/*!*****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/app.css ***!
  \*****************************************************************************************************************************************************************/
/* ＝＝＝＝＝ ベース ＝＝＝＝＝ */
/* ＝＝＝＝＝＝＝＝ Noto Sans JP ＝＝＝＝＝＝＝＝ */
/* Light (300) */
@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 300;
	src: url(fonts/noto-sans-jp-v56-latin-300.714e0685.woff2) format("woff2");
	font-display: swap;
}
/* Regular (400) */
@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 400;
	src: url(fonts/noto-sans-jp-v56-latin-regular.df40a4da.woff2) format("woff2");
	font-display: swap;
}
/* Medium (500) */
@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 500;
	src: url(fonts/noto-sans-jp-v56-latin-500.1f3f212b.woff2) format("woff2");
	font-display: swap;
}
/* SemiBold (600) */
@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 600;
	src: url(fonts/noto-sans-jp-v56-latin-600.b02ae8b7.woff2) format("woff2");
	font-display: swap;
}
/* Bold (700) */
@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 700;
	src: url(fonts/noto-sans-jp-v56-latin-700.6d8123df.woff2) format("woff2");
	font-display: swap;
}
/* ExtraBold (800) */
@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 800;
	src: url(fonts/noto-sans-jp-v56-latin-800.82bac376.woff2) format("woff2");
	font-display: swap;
}
/* Black (900) */
@font-face {
	font-family: "Noto Sans JP";
	font-style: normal;
	font-weight: 900;
	src: url(fonts/noto-sans-jp-v56-latin-900.90577b93.woff2) format("woff2");
	font-display: swap;
}
/* ＝＝＝＝＝＝＝＝ しっぽり明朝 ＝＝＝＝＝＝＝＝ */
/* Regular */
@font-face {
	font-family: "Shippori Mincho";
	font-style: normal;
	font-weight: 400;
	src: url(fonts/shippori-mincho-v17-latin-regular.6a06ed7b.woff2) format("woff2");
	font-display: swap;
}
@font-face {
	font-family: "Shippori Mincho";
	font-style: normal;
	font-weight: 500;
	src: url(fonts/shippori-mincho-v17-latin-500.17ed0d4c.woff2) format("woff2");
	font-display: swap;
}
@font-face {
	font-family: "Shippori Mincho";
	font-style: normal;
	font-weight: 600;
	src: url(fonts/shippori-mincho-v17-latin-600.90a170f2.woff2) format("woff2");
	font-display: swap;
}
@font-face {
	font-family: "Shippori Mincho";
	font-style: normal;
	font-weight: 700;
	src: url(fonts/shippori-mincho-v17-latin-700.12748fc8.woff2) format("woff2");
	font-display: swap;
}
@font-face {
	font-family: "Shippori Mincho";
	font-style: normal;
	font-weight: 800;
	src: url(fonts/shippori-mincho-v17-latin-800.c97fc89c.woff2) format("woff2");
	font-display: swap;
}
:root {
	/* 1remを10pxとする */
	--px: 0.0625rem; /* 1 / 16 = 0.0625 */

	/* フォントの種類の定義 */
	--font-sans: "Noto Sans JP", san-serif;
	--font-serif: "Shippori Mincho", serif;

	/* メディアクエリ */

	/* --mq-sp: 400px;
	--mq-tab: 768px;
	--mq-pc: 1024px;
	--mq-xl: 1201px;
	--mq-xxl: 1440px; */

	/* フォントの大きさの定義 */
	--fs-small: calc(12 / 16 * 1rem); /* 12px */
	--fs-small-pc: calc(14 / 16 * 1rem); /* 14px */
	--fs-common: calc(15 / 16 * 1rem); /* 15px */
	--fs-common-pc: calc(16 / 16 * 1rem); /* 16px */
	--fs-large: 1rem; /* 16px */
	--fs-large-pc: calc(18 / 16 * 1rem); /* 18px */
	--fs-h4: calc(18 / 16 * 1rem); /* 18px */
	--fs-h4-pc: calc(20 / 16 * 1rem); /* 20px */
	--fs-h3: calc(20 / 16 * 1rem); /* 20px */
	--fs-h3-pc: calc(24 / 16 * 1rem); /* 24px */
	--fs-h2: calc(24 / 16 * 1rem); /* 24px */
	--fs-h2-pc: calc(32 / 16 * 1rem); /* 32px */

	/* 色の定義 */
	--c-white: #fff;
	--c-black: #262120;
	--c-black-rgb: 38, 33, 32;
	--c-red: #b51e3d;
	--c-red-rgb: 181, 30, 61;
	--c-navy: #003f8d;
	--c-navy-rgb: 0, 63, 141;
	--c-cool-gray: #edeff1;
	--c-lite-gray: #fafbfd;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
* {
	margin: 0;
}
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}
input,
button,
textarea,
select {
	font: inherit;
}
textarea {
	resize: vertical;
	min-height: 100px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	/* text-wrap: balance; */
	overflow-wrap: break-word;
}
html {
	scroll-behavior: smooth;
}
ul,
ol {
	list-style: none;
	padding: 0;
}
html {
	font-size: 100%;
	scroll-padding-top: 68px;
	@media (min-width: 1024px) {
		scroll-padding-top: 96px;
	}
}
body {
	color: var(--c-black);
	background-color: var(--c-white);
	font-family: var(--font-sans);
	font-size: var(--fs-common);
	line-height: 180%;
	/* font-feature-settings: "palt"; */
	word-break: break-all;
	@media (min-width: 1024px) {
		font-size: var(--fs-common-pc);
	}
}
img {
	height: auto;
	vertical-align: bottom;
}
a {
	text-decoration: none;
	color: var(--c-black);
}
button {
	border: none;
	outline: none;
	letter-spacing: 0.05em;
}
/* ＝＝＝＝＝ ユーティリティ ＝＝＝＝＝ */
/* ＝＝＝＝＝＝＝＝＝ フォント切り替えユーティリティ ＝＝＝＝＝＝＝＝＝ */
.u-font-mincho {
	font-family: var(--font-serif);
}
.u-font-gothic {
	font-family: var(--font-sans);
}
/* ＝＝＝＝＝＝＝＝＝ サイズ定義ユーティリティ（サイズ・行間・文字詰めをセットにする） ＝＝＝＝＝＝＝＝＝ */
/* Small (12px) */
.u-text-small {
	font-size: var(--fs-small);
	line-height: 160%; /* 本文は広め */
	font-weight: 500;
	@media (min-width: 1024px) {
		font-size: var(--fs-small-pc);
	}
}
/* Common (15px) */
.u-text-common {
	font-size: var(--fs-common);
	line-height: 180%; /* 本文は広め */
	font-weight: 400;
	@media (min-width: 1024px) {
		font-size: var(--fs-common-pc);
	}
}
/* Large (16px) */
.u-text-large {
	font-size: var(--fs-large);
	line-height: 180%;
	letter-spacing: 0.05em;
	font-weight: 500;
	@media (min-width: 1024px) {
		font-size: var(--fs-large-pc);
	}
}
/* H4レベル (18px) */
.u-text-h4 {
	font-size: var(--fs-h4);
	line-height: 160%;
	letter-spacing: 0.05em;
	@media (min-width: 1024px) {
		font-size: var(--fs-h4-pc);
	}
}
/* H3レベル (20px) */
.u-text-h3 {
	font-size: var(--fs-h3);
	line-height: 180%;
	letter-spacing: 0.05em;
	font-weight: 500;
	@media (min-width: 1024px) {
		font-size: var(--fs-h3-pc);
	}
}
/* H2レベル (例: 24px) */
.u-text-h2 {
	font-size: var(--fs-h2);
	line-height: 160%;
	letter-spacing: 0.1em;
	font-weight: 400;
	@media (min-width: 1024px) {
		font-size: var(--fs-h2-pc);
	}
}
/* ＝＝＝＝＝＝＝＝＝ 文字色ユーティリティ ＝＝＝＝＝＝＝＝＝ */
.u-color-white {
	color: var(--c-white);
}
.u-color-red {
	color: var(--c-red);
}
.u-color-navy {
	color: var(--c-navy);
}
.u-border-bottom-red {
	border-bottom: 1px solid var(--c-red);
}
/* ＝＝＝＝＝＝＝＝＝ 文字のレイアウト ＝＝＝＝＝＝＝＝＝ */
.u-d-inline-block {
	display: inline-block;
}
.u-d-block {
	display: block;
}
.text-center {
	text-align: center;
}
.text-tab-center {
	@media (min-width: 768px) {
		text-align: center;
	}
}
.text-pc-center {
	@media (min-width: 1024px) {
		text-align: center;
	}
}
.text-tab-left {
	@media (min-width: 768px) {
		text-align: left;
	}
}
.text-pc-left {
	@media (min-width: 1024px) {
		text-align: left;
	}
}
.letter-tight {
	letter-spacing: 0em;
}
/* ＝＝＝＝＝ コンポーネント ＝＝＝＝＝ */
/* ============================================
   Loading Animation
   ============================================ */
/* ローディング画面全体 */
.loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #fff; /* 背景色 */
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;

	/* フェードアウト用クラス */
	transition:
		opacity 2s ease,
		visibility 2s ease;
	&.is-hidden {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}
/* ロゴのアニメーション */
.loader-logo {
	opacity: 0;
	transform: translateY(20px);
	/* ふわっと下から出るアニメーション */
	animation: logoFadeIn 1s ease forwards;
	img {
		height: 80px;
	}
}
@keyframes logoFadeIn {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
/* トップページ以外ではローダー内のロゴを消す場合 */
body:not(.home):not(.front-page) .loader-logo {
	display: none;
}
body.is-visited #js-loader {
	.loader-logo {
		display: none !important;
	}
}
/* ============================================
   共通のアニメーション
   ============================================ */
.js-scrolled {
	&.js-fade-up {
		opacity: 0;
		transform: translateY(30px); /* 30px下から */
		transition:
			opacity 1.2s ease,
			transform 1.2s ease;
		&.is-action {
			/* 画面内に入った時 */
			opacity: 1;
			transform: translateY(0);
		}
	}
	&.js-fade-left {
		opacity: 0;
		transform: translateX(-40px);
		transition:
			opacity 1.2s ease,
			transform 1.2s ease;
		&.is-action {
			/* 画面内に入った時 */
			opacity: 1;
			transform: translateY(0);
		}
	}
	&.js-fade-right {
		opacity: 0;
		transform: translateX(40px);
		transition:
			opacity 1.2s ease,
			transform 1.2s ease;
		&.is-action {
			/* 画面内に入った時 */
			opacity: 1;
			transform: translateY(0);
		}
	}
	/* (オプション) 順番に出てくるようにしたい場合 */
	&.delay-02 {
		transition-delay: 0.2s;
	}
	&.delay-04 {
		transition-delay: 0.4s;
	}
	&.delay-06 {
		transition-delay: 0.6s;
	}
	&.delay-08 {
		transition-delay: 0.8s;
	}
	&.delay-10 {
		transition-delay: 1s;
	}
}
/* js-scrolled */
/* セクションのタイトル共通設定 */
.section-title {
	@media (min-width: 1024px) {
		display: flex;
		gap: calc(16 * var(--px));
		align-items: baseline;
	}
	.english {
		font-family: var(--font-serif);
		font-size: calc(48 * var(--px));
		font-weight: 500;
		line-height: 140%;
		letter-spacing: 0.05em;
		color: var(--c-black);
		opacity: 0.6;
		word-break: normal;
		@media (min-width: 1024px) {
			font-size: calc(64 * var(--px));
		}
	}
	.sub {
		display: flex;
		align-items: center;
		gap: calc(24 * var(--px));
	}
	.line {
		width: 100%;
		flex: 1;
		height: 1px;
		background-color: rgba(var(--c-black-rgb), 0.5);
		@media (min-width: 1024px) {
			display: none;
		}
	}
	&.under-line {
		@media (min-width: 1024px) {
			width: -moz-fit-content;
			width: fit-content;
			border-bottom: 1px solid rgba(var(--c-black-rgb), 0.5);
		}
	}
}
.common-btn {
	position: relative;
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	font-family: var(--font-serif);
	font-size: var(--fs-h4);
	line-height: 160%;
	letter-spacing: 0.1em;
	color: var(--c-black);
	border-left: 1px solid var(--c-black);
	border-bottom: 1px solid var(--c-black);
	padding-block: calc(12 * var(--px));
	padding-left: calc(20 * var(--px));
	padding-right: calc(88 * var(--px));
	transition: all 0.5s ease;
	@media (min-width: 1024px) {
		font-size: var(--fs-h4-pc);
		padding-left: calc(24 * var(--px));
		padding-right: calc(96 * var(--px));
	}
	@media (hover: hover) {
		&:hover {
			background-color: var(--c-black);
			color: #fff;
			&:before,
			&:after {
				background-color: #fff;
				transform: translateX(8px);
			}
		}
	}
	&:before,
	&:after {
		content: "";
		position: absolute;
		background-color: var(--c-black);
		transition: all 0.5s ease;
	}
	&:before {
		aspect-ratio: 56 / 1;
		width: 56px;
		right: 20px;
		bottom: 20px;
	}
	&:after {
		aspect-ratio: 8 / 6;
		width: 8px;
		clip-path: polygon(0 0, 100% 100%, 0 100%);
		right: 19px;
		bottom: 21px;
	}

	.insta-icon {
		margin-right: calc(20 * var(--px));
		display: inline;
		aspect-ratio: 1 / 1;
		width: 40px;
	}
}
.common-btn.bg-line {
	background-color: #469968;
	border: 1px solid #469968;
	color: #fff;
	filter: drop-shadow(1px 1px 6px rgba(0, 0, 0, 0.15));
	&::before,
	&::after {
		background-color: #fff;
	}
	@media (hover: hover) {
		&:hover {
			background-color: #fff;
			color: #469968;
			&:before,
			&:after {
				background-color: #469968;
			}
		}
	}
}
.common-btn.bg-red {
	background-color: var(--c-red);
	border: 1px solid var(--c-red);
	color: #fff;
	filter: drop-shadow(1px 1px 6px rgba(0, 0, 0, 0.15));
	&::before,
	&::after {
		background-color: #fff;
	}
	@media (hover: hover) {
		&:hover {
			background-color: #fff;
			color: var(--c-red);
			&:before,
			&:after {
				background-color: var(--c-red);
			}
		}
	}
}
.common-btn.bg-navy {
	background-color: var(--c-navy);
	border: 1px solid var(--c-navy);
	color: #fff;
	filter: drop-shadow(1px 1px 6px rgba(0, 0, 0, 0.15));
	&::before,
	&::after {
		background-color: #fff;
	}
	@media (hover: hover) {
		&:hover {
			background-color: #fff;
			color: var(--c-navy);
			&:before,
			&:after {
				background-color: var(--c-navy);
			}
		}
	}
}
.more-btn {
	display: block;
	background: transparent;
	border: none;
	border-left: 1px solid var(--c-black);
	border-bottom: 1px solid var(--c-black);
	padding-block: calc(12 * var(--px));
	padding-inline: calc(20 * var(--px)) calc(40 * var(--px));
	font-family: var(--font-serif);
	font-size: calc(20 * var(--px));
	letter-spacing: 0.05em;
	font-weight: 400;
	line-height: 160%;
	cursor: pointer;
	transition: 0.3s;
	position: relative;
	width: -moz-fit-content;
	width: fit-content;
	&:before,
	&:after {
		content: "";
		position: absolute;
		aspect-ratio: 7 / 14;
		width: 7px;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		top: calc(22 * var(--px));
	}
	&:before {
		background-color: var(--c-black);
		right: calc(25 * var(--px));
	}
	&:after {
		background-color: #fff;
		right: calc(26 * var(--px));
	}
	&:hover {
		background-color: var(--c-black);
		color: #fff;
		border-color: var(--c-black);
	}
}
.close-btn {
	margin-left: auto;
	display: block;
	background: transparent;
	border: none;
	border-right: 1px solid var(--c-black);
	border-bottom: 1px solid var(--c-black);
	padding-block: calc(12 * var(--px));
	padding-inline: calc(20 * var(--px));
	font-family: var(--font-serif);
	font-size: calc(20 * var(--px));
	letter-spacing: 0.05em;
	font-weight: 400;
	line-height: 160%;
	cursor: pointer;
	transition: 0.3s;
	position: relative;
	width: -moz-fit-content;
	width: fit-content;
}
.section-header {
	position: fixed;
	z-index: 1000;
	display: flex;
	/* align-items: center; */
	justify-content: space-between;
	padding-inline: calc(16 * var(--px));
	width: 100%;
	height: 60px;
	top: 0;
	left: 0;
	transition: all 0.7s ease;
	@media (min-width: 1024px) {
		padding-right: 0;
		height: 80px;
	}
}
.section-header.is-scrolled {
	background-color: rgba(255, 255, 255, 0.9);
	filter: drop-shadow(1px 1px 6px rgba(0, 0, 0, 0.15));
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.header-logo {
	margin-block: auto;
	img {
		width: auto;
		height: 40px;
		@media (min-width: 1024px) {
			height: 56px;
		}
	}
}
.header-nav {
	display: flex;
	justify-content: flex-end;
	gap: calc(16 * var(--px));
	@media (min-width: 1024px) {
		flex-direction: row-reverse;
		align-items: center;
		gap: calc(40 * var(--px));
	}
}
.header-line-btn {
	display: flex;
	align-items: center;
	background-color: var(--c-red);
	padding-inline: calc(16 * var(--px));
	transition: opacity 0.5s ease;
	/* align-self: stretch; */
	height: 100%;
	@media (hover: hover) {
		&:hover {
			opacity: 0.8;
		}
	}
	@media (min-width: 1024px) {
		padding-inline: calc(32 * var(--px));
	}
}
.hamburger-menu {
	position: relative;
	z-index: 1000;
	width: calc(40 * var(--px));
	cursor: pointer;
	@media (min-width: 1024px) {
		display: none;
	}
	.line01,
	.line02 {
		position: absolute;
		background-color: var(--c-red);
		height: 1px;
		right: 0;
		transition: all 0.5s ease;
	}
	.line01 {
		width: 40px;
		top: 24px;
	}
	.line02 {
		width: 24px;
		bottom: 24px;
	}
	&.active {
		.line01,
		.line02 {
			top: 50%;
			right: 50%;
		}
		.line01 {
			transform: translate(50%, 50%) rotate(45deg);
		}
		.line02 {
			width: 40px;
			transform: translate(50%, 50%) rotate(-45deg);
		}
	}
}
.nav-box {
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.97);
	padding-top: calc(64 * var(--px));
	width: 100dvw;
	height: 100dvh;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease;
	@media (min-width: 1024px) {
		background-color: transparent;
		padding-top: 0;
		opacity: 1;
		visibility: visible;
		position: relative;
		width: 100%;
		height: auto;
		flex: 1;
	}
	.nav-logo {
		margin-bottom: calc(24 * var(--px));
		@media (min-width: 1024px) {
			display: none;
		}
		img {
			height: 56px;
		}
	}
	&.show {
		opacity: 1;
		visibility: visible;
	}
	.common-btn.bg-line {
		@media (min-width: 1024px) {
			display: none;
		}
	}
}
.nav-list {
	margin-bottom: calc(48 * var(--px));
	display: flex;
	flex-direction: column;
	row-gap: calc(16 * var(--px));
	@media (min-width: 1024px) {
		margin-bottom: 0;
		flex-direction: row;
		align-items: center;
		-moz-column-gap: calc(56 * var(--px));
		     column-gap: calc(56 * var(--px));
	}
	.list-item {
		position: relative;
		width: -moz-fit-content;
		width: fit-content;
		&:before,
		&:after {
			content: "";
			position: absolute;
			aspect-ratio: 4 / 9;
			width: 4px;
			top: 11px;
			clip-path: polygon(0 0, 100% 50%, 0 100%);
			@media (min-width: 1024px) {
				content: none;
			}
		}
		&::before {
			z-index: 1;
			background-color: rgba(255, 255, 255, 0.97);
			right: calc(-15 * var(--px));
			@media (min-width: 1024px) {
				background-color: rgba(255, 255, 255, 0.9);
			}
		}
		&:after {
			background-color: var(--c-black);
			right: calc(-16 * var(--px));
		}
	}
	.has-list {
		position: relative;
		.list-item {
			display: block;
			margin-bottom: calc(4 * var(--px));
			&:before,
			&:after {
				aspect-ratio: 9 / 4;
				width: 9px;
				clip-path: polygon(0 0, 100% 0, 50% 100%);
				right: calc(-19 * var(--px));
				transition: all 0.5s ease;
				@media (min-width: 1024px) {
					content: "";
					clip-path: polygon(0 0, 100% 50%, 0 100%);
					aspect-ratio: 4 / 9;
					width: 4px;
					top: 13px !important;
				}
			}
			&:before {
				top: calc(13 * var(--px));
				@media (min-width: 1024px) {
					right: calc(-10 * var(--px));
				}
			}
			&:after {
				top: calc(14 * var(--px));
				@media (min-width: 1024px) {
					right: calc(-11 * var(--px));
				}
			}
		}
		&:hover {
			@media (min-width: 1024px) {
				.list-item {
					&::before,
					&::after {
						aspect-ratio: 9 / 4;
						width: 9px;
						clip-path: polygon(0 0, 100% 0, 50% 100%);
						right: calc(-14 * var(--px));
					}
					&::before {
						top: calc(15 * var(--px)) !important;
					}
					&:after {
						top: calc(16 * var(--px)) !important;
					}
				}
				.list-item-inner {
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}
}
.list-item-inner {
	display: flex;
	flex-direction: column;
	row-gap: calc(8 * var(--px));
	padding-left: calc(16 * var(--px));
	/* PC時、ホバーした時に表示 */
	@media (min-width: 1024px) {
		position: absolute;
		width: 150px;
		top: 100%;
		left: 50%;
		transform: translate(-50%, 10px);
		padding-block: calc(16 * var(--px));
		background-color: rgba(255, 255, 255, 0.9);
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		/* pointer-events: none; */
	}
	.inner-item {
		@media (min-width: 1024px) {
			border-bottom: 1px solid rgba(var(--c-black-rgb) 0.5);
		}
	}
}
body:has(.nav-box.show) {
	overflow: hidden;
}
.footer {
	margin-top: calc(128 * var(--px));
	width: 100%;
	position: relative;
	@media (min-width: 1024px) {
		margin-top: calc(188 * var(--px));
	}
	.footer-logo {
		position: absolute;
		z-index: 10;
		top: -44px;
		left: 50%;
		height: 64px;
		transform: translateX(-50%);
		@media (min-width: 1024px) {
			height: 96px;
			top: -67px;
		}
	}
	/* --- PAGE TOPボタン --- */
	.footer-page-top {
		position: absolute;
		z-index: 100;
		top: 0; /* ネイビーエリアから少し飛び出させる */
		right: 16px; /* innerの右端に合わせる */
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-size: 13px;
		transition: opacity 0.3s;
		@media (min-width: 1024px) {
			right: 80px;
		}
		&::before,
		&::after {
			content: "";
			position: absolute;
			aspect-ratio: 25 / 13;
			width: 25px;
			clip-path: polygon(0 100%, 50% 0, 100% 100%);
			left: 50%;
			transform: translateX(-50%);
		}
		&::before {
			background-color: var(--c-red);
			top: -22px;
		}
		&::after {
			background-color: #fff;
			top: -19px;
		}
		&:hover {
			opacity: 0.7;
		}
	}

	/* --- ボディエリア（ネイビー部分） --- */
	.footer-body {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: var(--c-navy);
		padding-block: calc(40 * var(--px)) calc(24 * var(--px));
		color: #fff;
		@media (min-width: 1024px) {
			padding-block: calc(40 * var(--px)) calc(40 * var(--px));
		}
	}

	/* --- SNSアイコン --- */
	.footer-insta-link {
		display: block;
		transition: opacity 0.3s;
		img {
			width: 40px;
			@media (min-width: 1024px) {
				width: 56px;
			}
		}
	}
	.footer-insta-link:hover {
		opacity: 0.7;
	}
	/* --- 電話番号 --- */
	.footer-tel {
		position: relative;
		padding-left: 16px;
		&::before {
			content: "";
			position: absolute;
			background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxMSAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNzE0MTQgNi40MzkyM0MyLjE3MzMzIDguODcyMiAzLjM3NzA0IDExLjExMDggNS4xMzMyOSAxMi43OThMNy4xODYxOSAxMS42MTc3QzcuNDQ3NDcgMTEuNDY3NSA3Ljc0NzE3IDExLjQ5MSA3Ljk3ODQ4IDExLjY0ODVDOC43MTQ5NCAxMi4xNjYyIDkuNTQ0NyAxMi41NzM0IDEwLjQ1MjIgMTIuODQxMUMxMC42NDQ3IDEyLjg5NzkgMTAuODA3NiAxMy4wMzE1IDEwLjkwNDkgMTMuMjEyNUMxMS4wMDIyIDEzLjM5MzQgMTEuMDI2IDEzLjYwNjkgMTAuOTcxIDEzLjgwNkwxMC4yNDYgMTYuNDMzNUMxMC4xOTExIDE2LjYzMjYgMTAuMDYxOSAxNi44MDEgOS44ODY5IDE2LjkwMTZDOS43MTE5IDE3LjAwMjIgOS41MDU0MiAxNy4wMjY4IDkuMzEyODcgMTYuOTdDNi4wMzk2MyAxNi4wMDQzIDMuMjcxNDYgMTMuNzMzNSAxLjYxNzM0IDEwLjY1NzJDLTAuMDM2NzgyNiA3LjU4MDk0IC0wLjQ0MTM2NSAzLjk1MTIgMC40OTI1OTYgMC41NjY0NzRDMC41NDc1MzUgMC4zNjczNzIgMC42NzY3MTIgMC4xOTg5OTMgMC44NTE3MDggMC4wOTgzNzc4QzEuMDI2NzEgLTAuMDAyMjM3NCAxLjIzMzE5IC0wLjAyNjg0NjkgMS40MjU3MyAwLjAyOTk2MzFMMy45NjY2OSAwLjc3OTY3MkM0LjE1OTIzIDAuODM2NDgyIDQuMzIyMDYgMC45NzAwNTggNC40MTkzNiAxLjE1MTAxQzQuNTE2NjcgMS4zMzE5NyA0LjU0MDQ2IDEuNTQ1NDkgNC40ODU1MyAxLjc0NDU5QzQuMjI2NTkgMi42ODI5OCA0LjEyMzIxIDMuNjI2NjcgNC4xNTk4MiA0LjU0NjczQzQuMTY3MTggNC44MzMwNCA0LjAyODMxIDUuMTA4NjggMy43NjcwNCA1LjI1ODlMMS43MTQxNCA2LjQzOTIzWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
			background-repeat: no-repeat;
			background-size: contain;
			aspect-ratio: 11 / 17;
			width: 11px;
			left: 0;
			top: 6px;
			@media (min-width: 1024px) {
				top: 9px;
			}
		}
	}
}
/* footer */
/* --- ＝＝＝＝＝＝＝＝＝ コンテナ ＝＝＝＝＝＝＝＝＝ --- */
.container-xl {
	margin: 0 auto;
	padding-inline: calc(16 * var(--px));
	width: min(100%, calc(1360 * var(--px)));
	@media (min-width: 768px) {
		padding-inline: calc(40 * var(--px));
	}
}
.container-lg {
	margin: 0 auto;
	padding-inline: calc(16 * var(--px));
	width: min(100%, calc(1080 * var(--px)));
	@media (min-width: 768px) {
		padding-inline: calc(40 * var(--px));
	}
}
.container-md {
	margin: 0 auto;
	padding-inline: calc(16 * var(--px));
	width: min(100%, calc(880 * var(--px)));
	@media (min-width: 768px) {
		padding-inline: calc(40 * var(--px));
	}
}
/* --- ＝＝＝＝＝＝＝＝＝ マージン共通 ＝＝＝＝＝＝＝＝＝ --- */
.m-auto {
	margin: auto;
}
.m-l-auto {
	margin-left: auto;
}
.m-r-auto {
	margin-right: auto;
}
.m-0 {
	margin: 0;
}
.m-tab-auto {
	@media (min-width: 768px) {
		margin: auto;
	}
}
.m-pc-auto {
	@media (min-width: 1024px) {
		margin: auto;
	}
}
.m-tab-0 {
	@media (min-width: 768px) {
		margin: 0;
	}
}
.m-pc-0 {
	@media (min-width: 1024px) {
		margin: 0;
	}
}
/* --- マージンボトム (mb) --- */
.mb-1 {
	margin-bottom: calc(8 * var(--px));
}
.mb-2 {
	margin-bottom: calc(16 * var(--px));
}
.mb-3 {
	margin-bottom: calc(24 * var(--px));
}
.mb-4 {
	margin-bottom: calc(32 * var(--px));
}
.mb-5 {
	margin-bottom: calc(40 * var(--px));
}
.mb-6 {
	margin-bottom: calc(48 * var(--px));
}
.mb-7 {
	margin-bottom: calc(56 * var(--px));
}
.mb-8 {
	margin-bottom: calc(64 * var(--px));
}
.mb-9 {
	margin-bottom: calc(72 * var(--px));
}
.mb-10 {
	margin-bottom: calc(80 * var(--px));
}
/* タブレット (mb-tab) */
@media (min-width: 768px) {
	.mb-tab-0 {
		margin-bottom: 0;
	}
	.mb-tab-1 {
		margin-bottom: calc(8 * var(--px));
	}
	.mb-tab-2 {
		margin-bottom: calc(16 * var(--px));
	}
	.mb-tab-3 {
		margin-bottom: calc(24 * var(--px));
	}
	.mb-tab-4 {
		margin-bottom: calc(32 * var(--px));
	}
	.mb-tab-5 {
		margin-bottom: calc(40 * var(--px));
	}
	.mb-tab-6 {
		margin-bottom: calc(48 * var(--px));
	}
	.mb-tab-7 {
		margin-bottom: calc(56 * var(--px));
	}
	.mb-tab-8 {
		margin-bottom: calc(64 * var(--px));
	}
	.mb-tab-9 {
		margin-bottom: calc(72 * var(--px));
	}
	.mb-tab-10 {
		margin-bottom: calc(80 * var(--px));
	}
	.mb-tab-11 {
		margin-bottom: calc(88 * var(--px));
	}
	.mb-tab-12 {
		margin-bottom: calc(96 * var(--px));
	}
	.mb-tab-13 {
		margin-bottom: calc(104 * var(--px));
	}
	.mb-tab-14 {
		margin-bottom: calc(112 * var(--px));
	}
	.mb-tab-15 {
		margin-bottom: calc(120 * var(--px));
	}
}
/* PC (mb-pc) */
@media (min-width: 1024px) {
	.mb-pc-0 {
		margin-bottom: 0;
	}
	.mb-pc-1 {
		margin-bottom: calc(8 * var(--px));
	}
	.mb-pc-2 {
		margin-bottom: calc(16 * var(--px));
	}
	.mb-pc-3 {
		margin-bottom: calc(24 * var(--px));
	}
	.mb-pc-4 {
		margin-bottom: calc(32 * var(--px));
	}
	.mb-pc-5 {
		margin-bottom: calc(40 * var(--px));
	}
	.mb-pc-6 {
		margin-bottom: calc(48 * var(--px));
	}
	.mb-pc-7 {
		margin-bottom: calc(56 * var(--px));
	}
	.mb-pc-8 {
		margin-bottom: calc(64 * var(--px));
	}
	.mb-pc-9 {
		margin-bottom: calc(72 * var(--px));
	}
	.mb-pc-10 {
		margin-bottom: calc(80 * var(--px));
	}
	.mb-pc-11 {
		margin-bottom: calc(88 * var(--px));
	}
	.mb-pc-12 {
		margin-bottom: calc(96 * var(--px));
	}
	.mb-pc-13 {
		margin-bottom: calc(104 * var(--px));
	}
	.mb-pc-14 {
		margin-bottom: calc(112 * var(--px));
	}
	.mb-pc-15 {
		margin-bottom: calc(120 * var(--px));
	}
}
/* --- マージントップ (mt) --- */
.mt-1 {
	margin-top: calc(8 * var(--px));
}
.mt-2 {
	margin-top: calc(16 * var(--px));
}
.mt-3 {
	margin-top: calc(24 * var(--px));
}
.mt-4 {
	margin-top: calc(32 * var(--px));
}
.mt-5 {
	margin-top: calc(40 * var(--px));
}
.mt-6 {
	margin-top: calc(48 * var(--px));
}
.mt-7 {
	margin-top: calc(56 * var(--px));
}
.mt-8 {
	margin-top: calc(64 * var(--px));
}
.mt-9 {
	margin-top: calc(72 * var(--px));
}
.mt-10 {
	margin-top: calc(80 * var(--px));
}
/* タブレット (mt-tab) */
@media (min-width: 768px) {
	.mt-tab-0 {
		margin-top: 0;
	}
	.mt-tab-1 {
		margin-top: calc(8 * var(--px));
	}
	.mt-tab-2 {
		margin-top: calc(16 * var(--px));
	}
	.mt-tab-3 {
		margin-top: calc(24 * var(--px));
	}
	.mt-tab-4 {
		margin-top: calc(32 * var(--px));
	}
	.mt-tab-5 {
		margin-top: calc(40 * var(--px));
	}
	.mt-tab-6 {
		margin-top: calc(48 * var(--px));
	}
	.mt-tab-7 {
		margin-top: calc(56 * var(--px));
	}
	.mt-tab-8 {
		margin-top: calc(64 * var(--px));
	}
	.mt-tab-9 {
		margin-top: calc(72 * var(--px));
	}
	.mt-tab-10 {
		margin-top: calc(80 * var(--px));
	}
	.mt-tab-11 {
		margin-top: calc(88 * var(--px));
	}
	.mt-tab-12 {
		margin-top: calc(96 * var(--px));
	}
	.mt-tab-13 {
		margin-top: calc(104 * var(--px));
	}
	.mt-tab-14 {
		margin-top: calc(112 * var(--px));
	}
	.mt-tab-15 {
		margin-top: calc(120 * var(--px));
	}
}
/* PC (mt-pc) */
@media (min-width: 1024px) {
	.mt-pc-0 {
		margin-top: 0;
	}
	.mt-pc-1 {
		margin-top: calc(8 * var(--px));
	}
	.mt-pc-2 {
		margin-top: calc(16 * var(--px));
	}
	.mt-pc-3 {
		margin-top: calc(24 * var(--px));
	}
	.mt-pc-4 {
		margin-top: calc(32 * var(--px));
	}
	.mt-pc-5 {
		margin-top: calc(40 * var(--px));
	}
	.mt-pc-6 {
		margin-top: calc(48 * var(--px));
	}
	.mt-pc-7 {
		margin-top: calc(56 * var(--px));
	}
	.mt-pc-8 {
		margin-top: calc(64 * var(--px));
	}
	.mt-pc-9 {
		margin-top: calc(72 * var(--px));
	}
	.mt-pc-10 {
		margin-top: calc(80 * var(--px));
	}
	.mt-pc-11 {
		margin-top: calc(88 * var(--px));
	}
	.mt-pc-12 {
		margin-top: calc(96 * var(--px));
	}
	.mt-pc-13 {
		margin-top: calc(104 * var(--px));
	}
	.mt-pc-14 {
		margin-top: calc(112 * var(--px));
	}
	.mt-pc-15 {
		margin-top: calc(120 * var(--px));
	}
}
.page-title {
	position: relative;
	margin-bottom: calc(56 * var(--px));
	display: flex;
	flex-direction: column;
	row-gap: calc(48 * var(--px));
	font-family: var(--font-serif);
	color: var(--c-red);
	font-size: calc(48 * var(--px));
	letter-spacing: 0.05em;
	line-height: 140%;
	font-weight: 500;
	text-align: center;
	@media (min-width: 1024px) {
		margin-bottom: calc(80 * var(--px));
		font-size: calc(64 * var(--px));
		row-gap: calc(112 * var(--px));
	}
	&::before,
	&::after {
		content: "";
		position: absolute;
		transition: all 1.2s ease 0.4s;
	}
	&::before {
		z-index: -1;
		background-color: var(--c-lite-gray);
		width: calc(100% - calc(16 * var(--px)));
		height: 104px;
		top: -12px;
		right: 0;
		transform: scale(0, 1);
		transform-origin: center right;
		@media (min-width: 768px) {
			width: calc(100% - calc(40 * var(--px)));
		}
		@media (min-width: 1024px) {
			width: calc(100% - calc(80 * var(--px)));
			height: 210px;
			top: -56px;
		}
	}
	&::after {
		background-color: var(--c-red);
		width: 1px;
		height: 40px;
		top: 70px;
		left: 50%;
		transform: translateX(-50%) scale(1, 0);
		transform-origin: top center;
		@media (min-width: 1024px) {
			height: 80px;
			top: 100px;
		}
	}
	&.is-loaded {
		&::before {
			transform: scale(1);
		}
		&::after {
			transform: translateX(-50%) scale(1);
		}
	}
}
.breadcrumbs {
	margin-bottom: calc(24 * var(--px));
	padding-top: calc(76 * var(--px));
	@media (min-width: 1024px) {
		margin-bottom: calc(72 * var(--px));
		padding-top: calc(104 * var(--px));
	}
	:has(.single) {
		margin-bottom: calc(40 * var(--px));
		@media (min-width: 1024px) {
			margin-bottom: calc(40 * var(--px));
		}
	}
}
/* 外枠：中央寄せ */
.pagination-wrapper {
	margin-top: calc(48 * var(--px));
	display: flex;
	justify-content: center;
	@media (min-width: 1024px) {
		margin-top: calc(64 * var(--px));
	}
}
/* ページネーション全体 */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
/* 各ボタン（数字・矢印） */
.pagination {
	.page-numbers {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 40px; /* ボタンの幅 */
		height: 40px; /* ボタンの高さ */
		padding: 0 5px;
		text-decoration: none;
		background: #fff;
		transition: all 0.3s;
	}
	.current {
		color: #fff; /* 文字色（白） */
		pointer-events: none; /* クリック無効化 */
	}
	.dots {
		border: none;
		background: transparent;
	}
}
.tab-news {
	.pagination {
		.page-numbers {
			color: var(--c-red);
			border: 1px solid var(--c-red);
			&:hover {
				background-color: rgba(var(--c-red-rgb), 0.2);
			}
		}
		.current {
			background-color: var(--c-red);
			color: #fff;
		}
	}
}
.tab-insta {
	.pagination {
		.page-numbers {
			color: var(--c-navy);
			border: 1px solid var(--c-navy);
			&:hover {
				background-color: rgba(var(--c-red-navy), 0.2);
			}
		}
		.current {
			background-color: var(--c-navy);
			color: #fff;
		}
	}
}
/* ============================================
   共通タブコンポーネント (c-tab)
   ============================================ */
.c-tab-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-left: 1px solid #ddd;
	margin-bottom: calc(40 * var(--px));
	@media (min-width: 1024px) {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		margin-bottom: calc(64 * var(--px));
	}
}
.c-tab-btn {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	border: none;
	background: transparent;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px 10px;
	height: calc(104 * var(--px));
	color: rgba(var(--c-black-rgb), 0.6);
	cursor: pointer;
	transition: all 0.3s ease;
	&:not(.is-active):hover {
		opacity: 0.7;
	}
	&.is-active {
		color: #fff;
	}
	&:nth-of-type(n + 3) {
		border-bottom: none !important;
	}
}
.js-tab-group.news {
	.c-tab-btn {
		border-bottom: 1px solid var(--c-red);
		&:nth-of-type(odd) {
			border-right: 1px solid var(--c-red);
			@media (min-width: 1024px) {
				border-right: none;
			}
		}
		&:nth-of-type(n + 3) {
			@media (min-width: 1024px) {
				border-bottom: 1px solid var(--c-red) !important;
			}
		}
		&:not(.is-active):hover {
			background-color: rgba(var(--c-red-rgb), 0.2);
		}
		&.is-active {
			background-color: var(--c-red);
		}
	}

	/* --- ニュースリストのデザイン --- */
	.news-list-wrap {
		display: flex;
		flex-direction: column;
		@media (min-width: 1024px) {
			flex-direction: row;
			flex-wrap: wrap;
		}
	}

	/* --- 各ニュースアイテム --- */
	.news-item {
		transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
		opacity: 1;
		max-height: 500px;
		overflow: hidden;
		margin-bottom: calc(35 * var(--px)); /* gapの代わりの余白（アニメーション用） */
		@media (min-width: 1024px) {
			margin-bottom: calc(43 * var(--px)); /* gapの代わりの余白（アニメーション用） */
			width: 47.5%;
		}
		&:nth-of-type(odd) {
			@media (min-width: 1024px) {
				margin-right: 5%;
			}
		}
	}

	/* 非表示状態（フィルタリングで除外された時） */
	.news-item.is-hidden {
		opacity: 0;
		max-width: 0;
		max-height: 0;
		margin: 0;
		padding: 0;
		pointer-events: none; /* クリック不可にする */
	}

	/* --- カードの中身 --- */
	.news-link {
		display: block;
		padding: 5px;
	}

	.news-content-wrap {
		display: flex;
		gap: calc(16 * var(--px));
		margin-bottom: calc(16 * var(--px));
	}

	.news-img {
		aspect-ratio: 1 / 1;
		width: 115px;
		flex-shrink: 0;
		background-color: #fff; /* ロゴ用背景 */
		display: flex;
		align-items: center;
		justify-content: center;
		filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.1));
		img {
			width: 100%;
			height: 100%;
			-o-object-fit: cover;
			   object-fit: cover;
		}
	}
	.news-body {
		flex: 1;
	}
	.news-title {
		margin-bottom: calc(4 * var(--px));
		/* 3行以上は...にする設定 */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.news-meta {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: calc(4 * var(--px));
	}

	.news-date {
		color: #666;
	}

	.news-cat-label {
		padding: calc(2 * var(--px)) calc(8 * var(--px));
		border: 1px solid var(--c-black);
		display: inline-block;
	}

	.news-excerpt {
		/* 3行以上は...にする設定 */
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}
.js-tab-group.instagram {
	.c-tab-btn {
		border-bottom: 1px solid var(--c-navy);
		&:nth-of-type(odd) {
			border-right: 1px solid var(--c-navy);
			@media (min-width: 1024px) {
				border-right: none;
			}
		}
		&:nth-of-type(n + 3) {
			@media (min-width: 1024px) {
				border-bottom: 1px solid var(--c-navy) !important;
			}
		}
		&:not(.is-active):hover {
			background-color: rgba(var(--c-navy-rgb), 0.2);
		}
		&.is-active {
			background-color: var(--c-navy);
		}
	}
	/* --- グリッドレイアウト全体 --- */
	.insta-grid-wrap {
		display: grid;
		/* スマホ：2列 */
		grid-template-columns: 1fr 1fr;
		/* アイテム間の隙間（横20px, 縦30px） */
		-moz-column-gap: 20px;
		     column-gap: 20px;
		row-gap: 30px;

		/* PC対応：768px以上で4列にする */
		@media (min-width: 768px) {
			grid-template-columns: repeat(4, 1fr);
			-moz-column-gap: 30px;
			     column-gap: 30px;
			row-gap: 40px;
		}
		@media (min-width: 1024px) {
			-moz-column-gap: calc(40 * var(--px));
			     column-gap: calc(40 * var(--px));
		}
	}

	/* --- 各アイテム（リンク全体） --- */
	.insta-link {
		display: block;
		transition: opacity 0.3s;
		&:hover {
			opacity: 0.7;
		}
	}

	/* --- 画像部分（影の設定含む） --- */
	.insta-img-wrap {
		margin-bottom: calc(8 * var(--px));
		position: relative;
		aspect-ratio: 1 / 1;
		width: 100%;
		&::before {
			content: "";
			position: absolute;
			z-index: -1;
			background-color: #ece6e3;
			width: 100%;
			height: 100%;
			top: 8px;
			left: 8px;
			filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.1));
		}
		img {
			width: 100%;
			height: 100%;
			-o-object-fit: cover;
			   object-fit: cover;
			display: block;
		}
	}

	/* --- テキストエリア --- */

	.insta-date {
		display: block;
		color: #666;
		margin-bottom: 8px;
	}

	.insta-text {
	}
}
/* instagram */
.common-contact {
	margin-top: calc(80 * var(--px));
	@media (min-width: 1024px) {
		margin-top: calc(120 * var(--px));
	}
	.section-title {
		&.contact-title {
			@media (min-width: 1024px) {
				flex-direction: column;
				align-items: center;
			}
		}
	}

	.contact-btn-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		-moz-column-gap: calc(64 * var(--px));
		     column-gap: calc(64 * var(--px));
		row-gap: calc(40 * var(--px));
		@media (min-width: 768px) {
			flex-direction: row;
			align-items: stretch;
		}
		.common-btn.bg-line {
			display: flex;
			align-items: center;
			&::before,
			&::after {
				@media (min-width: 768px) {
					bottom: 39px;
				}
			}
		}
	}
	.form-btn-wrap {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		row-gap: calc(12 * var(--px));
		width: -moz-fit-content;
		width: fit-content;
		.form-btn-copy {
			background-color: #fff;
			padding-inline: calc(20 * var(--px));
			width: -moz-fit-content;
			width: fit-content;
			&::before {
				content: "";
				position: absolute;
				z-index: -1;
				background-color: var(--c-black);
				width: 100%;
				height: 1px;
				top: calc(14 * var(--px));
				left: 0;
			}
		}

		.contact-btn {
			border: 1px solid var(--c-black);
		}
	}
}
/* common-contact */
/* ＝＝＝＝＝ ページ ＝＝＝＝＝ */
/* front-page */
.front-page {
	/* ============================================
   メインビジュアル
   ============================================ */
	.t-mainvisual {
		margin-bottom: calc(40 * var(--px));
		position: relative;
		padding-top: calc(100 * var(--px));
		@media (min-width: 1024px) {
			margin-bottom: calc(96 * var(--px));
			padding-top: calc(120 * var(--px));
		}

		.mainvisual-inner {
			position: relative;
			@media (min-width: 1024px) {
				margin-bottom: calc(56 * var(--px));
			}
			&:before {
				content: "";
				position: absolute;
				z-index: -1000;
				background-color: var(--c-cool-gray);
				width: calc(100% - calc(16 * var(--px)));
				height: calc(100% + calc(100 * var(--px)) + calc(40 * var(--px)));
				top: calc(-100 * var(--px));
				left: 0;
				@media (min-width: 768px) {
					width: calc(100% - calc(40 * var(--px)));
				}
				@media (min-width: 1024px) {
					width: calc(100% - calc(80 * var(--px)));
					height: calc(592 * var(--px));
					top: calc(-120 * var(--px));
					left: auto;
					right: 0;
				}
			}
		}

		.mainvisual-image {
			margin-left: auto;
			width: calc(100% - calc(16 * var(--px)));
			height: calc(520 * var(--px));
			overflow: hidden;
			@media (min-width: 768px) {
				width: calc(100% - calc(40 * var(--px)));
			}
			@media (min-width: 1024px) {
				margin-left: 0;
				width: calc(100% - calc(378 * var(--px)));
				height: calc(640 * var(--px));
			}
			img {
				width: 100%;
				height: 100%;
				-o-object-fit: cover;
				   object-fit: cover;
				transform: scale(1.2);
				transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1);
			}
		}
		.mainvisual-lead {
			@media (min-width: 1024px) {
				position: absolute;
				display: flex;
				flex-direction: column;
				row-gap: calc(48 * var(--px));
				right: calc(80 * var(--px));
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.mainvisual-title {
			position: absolute;
			display: flex;
			flex-direction: column;
			row-gap: calc(16 * var(--px));
			top: 50%;
			transform: translateY(calc(-50% + 30px));
			opacity: 0;
			transition:
				opacity 2s ease,
				transform 2s ease;
			@media (min-width: 1024px) {
				position: relative;
				top: auto;
				transform: translateY(30px);
			}
			.mainvisual-title-row {
				display: flex;
				flex-direction: column;
				row-gap: calc(16 * var(--px));
				@media (min-width: 768px) {
					flex-direction: row;
					span {
						&:nth-of-type(1) {
							padding-right: 0;
						}
						&:nth-of-type(2) {
							padding-left: 0;
						}
					}
				}
			}
			span {
				display: inline-block;
				width: -moz-fit-content;
				width: fit-content;
				background-color: rgba(var(--c-navy-rgb), 0.8);
				color: #fff;
				padding: calc(1 * var(--px)) calc(8 * var(--px));
			}
		}
		.mainvisual-btn {
			margin: auto;
			margin-top: calc(-16 * var(--px));
			margin-bottom: calc(56 * var(--px));
			@media (min-width: 1024px) {
				margin: 0;
			}
		}
		/* 2. テキストのフェードイン */
		.mainvisual-btn {
			opacity: 0;
			transform: translateY(30px); /* 少し下から */
			transition:
				opacity 2s ease 0.6s,
				transform 2s ease 0.6s,
				background-color 0.5s ease 0s;
		}
	}
}
/* ============================================
   JSで .is-mv-active が付与された時の状態
   ============================================ */
.t-mainvisual.is-mv-active .mainvisual-image img {
	/* 等倍に戻す */
	transform: scale(1);
}
.t-mainvisual.is-mv-active .mainvisual-title {
	opacity: 1;
	transform: translateY(0);
	/* 画像が動き出してから0.3秒後に開始 */
	transition-delay: 0.3s;
}
.t-mainvisual.is-mv-active .mainvisual-btn {
	opacity: 1;
	transform: translateY(0);
}
.front-page {
	/* ============================================
   Dissonanceセクション
   ============================================ */
	.t-problem {
		margin-bottom: calc(56 * var(--px));
		@media (min-width: 1024px) {
			margin-bottom: calc(88 * var(--px));
		}
		.problem-inner {
			@media (min-width: 1024px) {
				display: flex;
				align-items: center;
				gap: calc(80 * var(--px));
			}
		}
		.problem-title {
			@media (min-width: 1024px) {
				/* ★縦書き設定 */
				writing-mode: vertical-rl;
				text-orientation: mixed;
			}
			.section-title {
				@media (min-width: 1024px) {
					display: flex;
					flex-direction: column-reverse;
					align-items: normal;
					gap: 0;
				}
				.line {
					display: block;
					width: 1px;
					height: 100%;
				}
			}
		}
		.problem-list {
			display: flex;
			flex-direction: column;
			row-gap: calc(12 * var(--px));
			@media (min-width: 1024px) {
				row-gap: calc(32 * var(--px));
			}
		}
		.problem-item {
			position: relative;
			background-color: var(--c-cool-gray);
			padding-block: calc(6 * var(--px));
			padding-left: calc(20 * var(--px));
			padding-right: calc(16 * var(--px));
			width: -moz-fit-content;
			width: fit-content;
		}
		.problem-item::before {
			content: "";
			position: absolute;
			background-color: var(--c-black);
			aspect-ratio: 20 / 1;
			width: 20px;
			height: 1px;
			top: 50%;
			left: -10px;
			transform: translateY(-50%);
		}
		.problem-item::after {
			content: "";
			position: absolute;
			background-color: var(--c-black);
			aspect-ratio: 1 / 1;
			width: 4px;
			top: 50%;
			left: -10px;
			border-radius: 50%;
			transform: translateY(-50%);
		}
		.problem-text {
			flex: 1;
		}
	} /* t-problem */
}
/* front-page */
.front-page {
	/* ============================================
   Strengthセクション
   ============================================ */
	.t-strength {
		margin-bottom: calc(136 * var(--px));
		position: relative;
		@media (min-width: 1024px) {
			margin-bottom: calc(240 * var(--px));
		}
		&::before {
			content: "";
			position: absolute;
			z-index: -1;
			background-color: var(--c-cool-gray);
			width: 100%;
			height: calc(100%);
			top: 52px;
			left: 0;
			@media (min-width: 1024px) {
				height: calc(100% + 48px);
				top: 72px;
			}
		}
		.strength-title {
			.section-title {
				@media (min-width: 1024px) {
					justify-content: flex-end;
				}
			}
		}
		.features-list {
			position: relative;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 4px;
			@media (min-width: 768px) {
				grid-template-columns: 1fr 1fr 1fr 1fr;
			}
			&:before {
				content: "";
				position: absolute;
				z-index: -1;
				background-color: #fff;
				width: 25%;
				height: calc(100% + 104px);
				top: -24px;
				left: 50%;
				transform: translateX(-50%);
				@media (min-width: 1024px) {
					content: none;
				}
			}
		}

		.features-item {
			width: 100%;
		}

		.features-card {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			row-gap: calc(16 * var(--px));
			width: 100%;
			height: min(100%, 236px);
			padding-block: calc(32 * var(--px));
			padding-inline: calc(16 * var(--px));
			color: #fff;
			background-size: cover;
			background-position: center;
			background-blend-mode: multiply;
			&:before {
				content: "";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}
		}

		.features-item:nth-child(odd) .features-card {
			background-color: rgba(var(--c-red-rgb), 0.8);
		}

		.features-item:nth-child(even) .features-card {
			background-color: rgba(var(--c-navy-rgb), 0.8);
		}
		.features-item:nth-child(1) .features-card {
			&::before {
				background-image: url(images/top_image-strength01.8d7d8cc9.webp);
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
			}
		}
		.features-item:nth-child(2) .features-card {
			&::before {
				background-image: url(images/top_image-strength02.7b63dbfc.webp);
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
			}
		}
		.features-item:nth-child(3) .features-card {
			&::before {
				background-image: url(images/top_image-strength03.05e8734f.webp);
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
			}
		}
		.features-item:nth-child(4) .features-card {
			&::before {
				background-image: url(images/top_image-strength04.3ca538ef.webp);
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
			}
		}

		.features-number {
			display: block;
			font-family: var(--font-serif);
			font-size: calc(48 * var(--px));
			letter-spacing: 0.1em;
			line-height: 1;
		}
	}
}
/* front-page */
.front-page {
	/* ============================================
   Our Serviceセクション
   ============================================ */
	.t-service {
		margin-bottom: calc(80 * var(--px));
		@media (min-width: 1024px) {
			margin-bottom: calc(160 * var(--px));
		}

		/* --- タブボタン --- */
		.service-tabs {
			display: flex;
			justify-content: center;
			padding-inline: calc(16 * var(--px));
		}

		.service-tab-btn {
			width: 200px;
			padding-block: calc(12 * var(--px));
			background: #fff;
			cursor: pointer;
			transition: all 0.3s;
			text-align: center;
			&.personal {
				color: rgba(var(--c-red-rgb), 0.6);
				border-bottom: 1px solid rgba(var(--c-red-rgb), 0.6);
				&.is-active {
					background-color: var(--c-red);
					color: #fff;
					border-bottom: none;
				}
			}
			&.business {
				color: rgba(var(--c-navy-rgb), 0.6);
				border-bottom: 1px solid rgba(var(--c-navy-rgb), 0.6);
				&.is-active {
					background-color: var(--c-navy);
					color: #fff;
					border-bottom: none;
				}
			}
		}

		/* アクティブなタブ */
		.service-tab-btn {
			&.is-active {
				background-color: #bf3842;
				color: #fff;
			}
		}
		/* タブのホバー */
		.service-tab-btn:not(.is-active):hover {
			background-color: #f2cece;
		}

		/* --- タブコンテンツ切り替え --- */
		.service-tab-content {
			display: none; /* デフォルト非表示 */
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.service-tab-content.is-active {
			display: block;
			opacity: 1;
		}

		.service-contents {
			margin: auto;
			padding-left: calc(16 * var(--px));
			width: min(100%, 1320px);
			@media (min-width: 1024px) {
				padding-inline: calc(16 * var(--px));
			}
			@media (min-width: 1201px) {
				padding-inline: calc(40 * var(--px));
			}
			.swiper-wrapper {
				align-items: stretch;
				height: 100% !important;
				@media (min-width: 1024px) {
					display: flex;
					justify-content: center;
					-moz-column-gap: 5%;
					     column-gap: 5%;
				}
				.swiper-slide {
					height: auto;
					transition: width 0.5s ease;
					@media (min-width: 1024px) {
						width: min(22%, 272px);
						flex-shrink: inherit;
					}
					&:has(.is-open) {
						@media (min-width: 1024px) {
							width: 30% !important;
						}
					}
				}
			}
		}
		/* --- カード（スライド）のデザイン --- */
		.service-card {
			background: transparent;
			height: 100%;
			display: flex;
			flex-direction: column;
			.card-title {
				position: relative;
				padding-left: 21px;
				&::before {
					content: "";
					position: absolute;
					background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAxMSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzYwMjdfODM3KSI+CjxwYXRoIGQ9Ik03Ljc5OTY0IDE1LjExODFDNy41NzI0NiAxNS4wODUzIDcuMzM3NzIgMTUuMDg4MiA3LjEwMjE3IDE1LjEyMDVDNi45NTc5IDEzLjU4MiA2LjgxNTYyIDEyLjA2MjggNi42ODc2OCAxMC43MDE3QzguMjU1OTggOS4xMzgxNyA5Ljg1MDk4IDcuMzY2MDQgMTAuMjg1IDUuOTE4OTFDMTAuNzE1IDQuNDg1MyAxMC42NDA1IDMuMDQyMjcgMTAuMTUwNyAxLjg5ODQyQzkuOTkwODcgMS4zODY5NCA5LjM4NDI3IC0wLjM1NjUwMiA4LjI1NTk4IDAuMDY0ODA5QzcuMTE3NzIgMC40ODk4MDkgNS45MjEyNyAyLjAwMjkyIDUuNjQ0NjcgMy41MTQ4MUM1LjM2ODA4IDUuMDI2MjggNS41MTk5MyA1LjY3MDU1IDUuNTUyNjEgNi4wMTMxN0M1LjYwNDQyIDYuNTUzNzQgNS43MDkyNCA3LjY0MTQ1IDUuODQzMTUgOS4wNDEwNEMzLjk2ODc3IDEwLjQ5NiAxLjkwMTg4IDEyLjA3NDYgMC42ODY3MDIgMTQuNDMzM0MtMS42OTMwNCAxOS4wNTE3IDIuNjQzOTggMjIuNzM0MSA1LjU3MjU0IDIzLjIyMTRDNi4xMDM4IDIzLjMwOTkgNi42NTE0MSAyMy4yOTkyIDcuMTg1MDcgMjMuMjAzN0M3LjMxOTM4IDI0LjY1OTUgNy40MDc4NiAyNS42NTU4IDcuNDE2NjMgMjUuODQ0N0M3LjQ1NTI5IDI2LjY3MzQgNy4yMjAxNCAyNy45ODk0IDYuMTA4OTggMjguNzM2MUM1LjMwOTg5IDI5LjI3MyAzLjYxMjA2IDI5LjM4MzcgMi44NjA4IDI4LjYwODdDMi42MjU2NSAyOC4zNjYgMi43Njc5MyAyOC4zNDE5IDIuNzc1OSAyOC4yNzc1QzMuMDcxMjMgMjguMDY2IDMuMjkyMDMgMjcuNzU5OSAzLjM0NzQzIDI3LjQwN0MzLjQ2MzggMjYuNjY0OCAyLjk0MDExIDI2LjA4IDIuMjAwNCAyNS45NTdDMS40NjA2OSAyNS44MzQxIDAuNzUwNDcgMjYuNDM0OSAwLjYzMzY5NCAyNy4xNzcxQzAuNjA5NzgxIDI3LjMyODMgMC42MjQ5MjYgMjcuNTAwMSAwLjY3NTE0NCAyNy42Njk3QzAuODIzMDA2IDI4LjM1OTkgMS41NTQ3NSAyOS4zMTQgMi43MjA1MSAyOS43MzEyQzMuOTQ3NjQgMzAuMTcwMSA1LjMwMTEyIDMwLjA3MDUgNi40Mzg1OSAyOS40MzlDNy43NDQ2NCAyOC43MTMyIDguMjI4ODggMjcuMDkxOSA4LjEwNTMyIDI1LjgxMTFDOC4wNzE4NSAyNS40NjU2IDcuOTc2MTkgMjQuNDQ4IDcuODQzODggMjMuMDQwMkM5LjM4OTA2IDIyLjU0NDcgMTAuNjk1NSAyMS4zMjM0IDEwLjk1MyAxOS42ODczQzExLjI4MzQgMTcuNTg1MyA5LjgyMDI5IDE1LjQwOTkgNy43OTkyNCAxNS4xMTgxSDcuNzk5NjRaTTYuMjM2MTIgNS45MTA3MUM2LjIwMTg1IDUuNTMyODQgNi4xMTI5NyAzLjEzNjk0IDcuNjkzMjIgMS44MTM5OUM5LjEwODg4IDAuNjI4NzQzIDkuNzU1MzMgMS4wNzM0MiAxMC4wMDQ0IDEuOTMxMkMxMC4xMjA4IDIuNzc4MzMgMTAuMDU4NiAzLjcwNDE1IDkuNzgzNjIgNC42MjEzN0M5LjMyMzY5IDYuMTU0OTcgOC4wMTUyNSA3LjMzMDM4IDYuNDg0ODIgOC41Mzk4MUM2LjM3MTYzIDcuMzM2MTIgNi4yODM1NSA2LjQwMjkyIDYuMjM2MTIgNS45MTA3MVpNNS43NTcwNiAyMi42ODMzQzMuNDE0MzggMjIuMjkzNSAxLjU0Njc3IDE5Ljk4MTYgMS45MjU4IDE3LjU3MUMyLjA5MzU5IDE2LjUwMjEgMi4zNzczNSAxNS42MjM4IDMuMjkwMDQgMTQuMTYwN0MzLjYzMjc5IDEzLjYxMDcgNC43ODM0IDEyLjU2MTEgNi4wNjExNiAxMS4zMTg1QzYuMTgwMzMgMTIuNTY0IDYuMzA5ODUgMTMuOTIxIDYuNDM5NzggMTUuMjg5NEM1LjM1MzczIDE1LjY5MDYgNC4zODI0NiAxNi42NjU2IDQuMjExMDkgMTcuNzU2NkM0LjAxNjk5IDE4Ljk5MSA1LjA4OTA5IDIwLjI0NDcgNi4zMzk3NSAyMC40NTI5QzUuNTg1NjkgMjAuMzI3NSA0Ljc0NTE0IDE5LjM3MTggNC45MDA1OCAxOC4zODQxQzUuMDQ2NDUgMTcuNDU1NCA1LjcyMjM5IDE2Ljc1MTMgNi41NTg5NSAxNi41NDM5QzYuNzcwMTggMTguNzY2OSA2Ljk3NDY0IDIwLjkzNzggNy4xMzEyNyAyMi42MjYzQzYuNjk0NDYgMjIuNzM3OCA2LjIyOTM1IDIyLjc2MjQgNS43NTcwNiAyMi42ODM3VjIyLjY4MzNaTTkuNjk5OTMgMTkuNzU1OEM5LjUxMjYxIDIwLjk0NzIgOC43NjY5MiAyMS45MDIxIDcuNzgyOSAyMi4zODQ5QzcuNjI2MjcgMjAuNzE0OCA3LjQzMDE4IDE4LjYyMzggNy4yMzAxMSAxNi40ODc4QzcuMjk0MjcgMTYuNDkyNyA3LjM1OTI0IDE2LjQ5ODggNy40MjQyIDE2LjUwOTlDOC45MjM1NSAxNi43NTk1IDkuOTQyNjQgMTguMjEyOCA5LjY5OTkzIDE5Ljc1NThaIiBmaWxsPSIjQjUxRTNEIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNjAyN184MzciPgo8cmVjdCB3aWR0aD0iMTEiIGhlaWdodD0iMzAiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);
					background-repeat: no-repeat;
					background-size: contain;
					aspect-ratio: 11 / 30;
					width: 11px;
					top: 6px;
					left: 0;
				}
			}
		}
		#tab-business {
			.service-card {
				.card-title {
					&::before {
						background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAxMSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzYwMjdfOTcxKSI+CjxwYXRoIGQ9Ik03Ljc5OTU4IDE1LjExODFDNy41NzI0IDE1LjA4NTMgNy4zMzc2NiAxNS4wODgyIDcuMTAyMTEgMTUuMTIwNUM2Ljk1Nzg0IDEzLjU4MiA2LjgxNTU1IDEyLjA2MjggNi42ODc2MiAxMC43MDE3QzguMjU1OTIgOS4xMzgxNyA5Ljg1MDkyIDcuMzY2MDQgMTAuMjg0OSA1LjkxODkxQzEwLjcxNSA0LjQ4NTMgMTAuNjQwNCAzLjA0MjI3IDEwLjE1MDYgMS44OTg0MkM5Ljk5MDgxIDEuMzg2OTQgOS4zODQyMSAtMC4zNTY1MDIgOC4yNTU5MiAwLjA2NDgwOUM3LjExNzY2IDAuNDg5ODA5IDUuOTIxMjEgMi4wMDI5MiA1LjY0NDYxIDMuNTE0ODFDNS4zNjgwMiA1LjAyNjI4IDUuNTE5ODcgNS42NzA1NSA1LjU1MjU1IDYuMDEzMTdDNS42MDQzNiA2LjU1Mzc0IDUuNzA5MTggNy42NDE0NSA1Ljg0MzA5IDkuMDQxMDRDMy45Njg3MSAxMC40OTYgMS45MDE4MiAxMi4wNzQ2IDAuNjg2NjQxIDE0LjQzMzNDLTEuNjkzMTEgMTkuMDUxNyAyLjY0MzkyIDIyLjczNDEgNS41NzI0NyAyMy4yMjE0QzYuMTAzNzQgMjMuMzA5OSA2LjY1MTM1IDIzLjI5OTIgNy4xODUwMSAyMy4yMDM3QzcuMzE5MzIgMjQuNjU5NSA3LjQwNzggMjUuNjU1OCA3LjQxNjU3IDI1Ljg0NDdDNy40NTUyMyAyNi42NzM0IDcuMjIwMDggMjcuOTg5NCA2LjEwODkyIDI4LjczNjFDNS4zMDk4MyAyOS4yNzMgMy42MTIgMjkuMzgzNyAyLjg2MDczIDI4LjYwODdDMi42MjU1OSAyOC4zNjYgMi43Njc4NyAyOC4zNDE5IDIuNzc1ODQgMjguMjc3NUMzLjA3MTE3IDI4LjA2NiAzLjI5MTk3IDI3Ljc1OTkgMy4zNDczNyAyNy40MDdDMy40NjM3NCAyNi42NjQ4IDIuOTQwMDUgMjYuMDggMi4yMDAzNCAyNS45NTdDMS40NjA2MyAyNS44MzQxIDAuNzUwNDA5IDI2LjQzNDkgMC42MzM2MzMgMjcuMTc3MUMwLjYwOTcyIDI3LjMyODMgMC42MjQ4NjUgMjcuNTAwMSAwLjY3NTA4MyAyNy42Njk3QzAuODIyOTQ1IDI4LjM1OTkgMS41NTQ2OCAyOS4zMTQgMi43MjA0NSAyOS43MzEyQzMuOTQ3NTggMzAuMTcwMSA1LjMwMTA2IDMwLjA3MDUgNi40Mzg1MyAyOS40MzlDNy43NDQ1OCAyOC43MTMyIDguMjI4ODIgMjcuMDkxOSA4LjEwNTI2IDI1LjgxMTFDOC4wNzE3OSAyNS40NjU2IDcuOTc2MTMgMjQuNDQ4IDcuODQzODEgMjMuMDQwMkM5LjM4OSAyMi41NDQ3IDEwLjY5NTQgMjEuMzIzNCAxMC45NTI5IDE5LjY4NzNDMTEuMjgzMyAxNy41ODUzIDkuODIwMjMgMTUuNDA5OSA3Ljc5OTE4IDE1LjExODFINy43OTk1OFpNNi4yMzYwNiA1LjkxMDcxQzYuMjAxNzkgNS41MzI4NCA2LjExMjkxIDMuMTM2OTQgNy42OTMxNiAxLjgxMzk5QzkuMTA4ODIgMC42Mjg3NDMgOS43NTUyNiAxLjA3MzQyIDEwLjAwNDQgMS45MzEyQzEwLjEyMDcgMi43NzgzMyAxMC4wNTg2IDMuNzA0MTUgOS43ODM1NiA0LjYyMTM3QzkuMzIzNjMgNi4xNTQ5NyA4LjAxNTE5IDcuMzMwMzggNi40ODQ3NiA4LjUzOTgxQzYuMzcxNTcgNy4zMzYxMiA2LjI4MzQ5IDYuNDAyOTIgNi4yMzYwNiA1LjkxMDcxWk01Ljc1NyAyMi42ODMzQzMuNDE0MzIgMjIuMjkzNSAxLjU0NjcxIDE5Ljk4MTYgMS45MjU3MyAxNy41NzFDMi4wOTM1MiAxNi41MDIxIDIuMzc3MjkgMTUuNjIzOCAzLjI4OTk3IDE0LjE2MDdDMy42MzI3MyAxMy42MTA3IDQuNzgzMzQgMTIuNTYxMSA2LjA2MTEgMTEuMzE4NUM2LjE4MDI2IDEyLjU2NCA2LjMwOTc5IDEzLjkyMSA2LjQzOTcyIDE1LjI4OTRDNS4zNTM2NyAxNS42OTA2IDQuMzgyNCAxNi42NjU2IDQuMjExMDIgMTcuNzU2NkM0LjAxNjkzIDE4Ljk5MSA1LjA4OTAzIDIwLjI0NDcgNi4zMzk2OCAyMC40NTI5QzUuNTg1NjMgMjAuMzI3NSA0Ljc0NTA4IDE5LjM3MTggNC45MDA1MiAxOC4zODQxQzUuMDQ2MzkgMTcuNDU1NCA1LjcyMjMzIDE2Ljc1MTMgNi41NTg4OSAxNi41NDM5QzYuNzcwMTIgMTguNzY2OSA2Ljk3NDU4IDIwLjkzNzggNy4xMzEyMSAyMi42MjYzQzYuNjk0MzkgMjIuNzM3OCA2LjIyOTI5IDIyLjc2MjQgNS43NTcgMjIuNjgzN1YyMi42ODMzWk05LjY5OTg3IDE5Ljc1NThDOS41MTI1NSAyMC45NDcyIDguNzY2ODYgMjEuOTAyMSA3Ljc4Mjg0IDIyLjM4NDlDNy42MjYyMSAyMC43MTQ4IDcuNDMwMTIgMTguNjIzOCA3LjIzMDA1IDE2LjQ4NzhDNy4yOTQyMSAxNi40OTI3IDcuMzU5MTggMTYuNDk4OCA3LjQyNDE0IDE2LjUwOTlDOC45MjM0OSAxNi43NTk1IDkuOTQyNTggMTguMjEyOCA5LjY5OTg3IDE5Ljc1NThaIiBmaWxsPSIjMDAzRjhEIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNjAyN185NzEiPgo8cmVjdCB3aWR0aD0iMTEiIGhlaWdodD0iMzAiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);
					}
				}
			}
		}

		.service-img {
			margin-bottom: calc(24 * var(--px));
			aspect-ratio: 4 / 3;
			width: 100%;
			overflow: hidden;
			img {
				width: 100%;
				height: 100%;
				-o-object-fit: cover;
				   object-fit: cover;
				display: block;
			}
		}
		.service-body {
			display: flex;
			flex-direction: column;
			flex: 1;
			justify-content: space-between;
		}

		.service-summary-wrapper,
		.service-detail-wrapper {
			display: grid;
			/* デフォルトの状態 */
			transition:
				grid-template-rows 0.4s ease-out,
				opacity 0.4s ease-out;
		}
		.service-summary-wrapper {
			flex: 1;
		}
		.service-summary,
		.service-detail {
			overflow: hidden;
			min-height: 0;
		}
		.service-summary {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.service-detail {
			.service-text {
				ul {
					margin-block: calc(8 * var(--px));
					li {
						padding-left: calc(15 * var(--px));
						text-indent: calc(-15 * var(--px));
					}
				}
			}
		}
		/* --- アコーディオンの仕組み --- */
		.service-summary-wrapper {
			grid-template-rows: 1fr;
			opacity: 1;
		}
		.service-detail-wrapper {
			grid-template-rows: 0fr;
			opacity: 0;
		}

		/* === オープン時（is-open がついた状態） === */

		/* 概要：閉じる（高さ0・透明） */
		.service-card.is-open .service-summary-wrapper {
			grid-template-rows: 0fr;
			opacity: 0;
			/* 完全に消えたときにクリック判定などを消すための微調整 */
			pointer-events: none;
		}

		/* 詳細：開く（高さあり・不透明） */
		.service-card.is-open .service-detail-wrapper {
			grid-template-rows: 1fr;
			opacity: 1;
			pointer-events: auto;
		}

		/* Swiperのページネーション位置調整 */
		.swiper-pagination {
			position: static;
			margin-top: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: calc(4 * var(--px));
			@media (min-width: 1024px) {
				display: none;
			}
		}
		.swiper-pagination-bullet {
			width: 12px;
			height: 12px;
			background-color: transparent;
			border: 1px solid var(--c-red);
			opacity: 1;
			transition: background-color 0.3s ease;
		}
		#tab-business {
			.swiper-pagination-bullet {
				border: 1px solid var(--c-navy);
			}
		}
		.swiper-pagination-bullet-active {
			background-color: var(--c-red);
			width: 20px;
			height: 20px;
		}
		#tab-business {
			.swiper-pagination-bullet-active {
				background-color: var(--c-navy);
			}
		}
	} /* service */
}
/* front-page */
.front-page {
	/* ============================================
   Newsセクション（切り替えタブはtabGrid.cssで）
   ============================================ */
	.t-news {
		position: relative;
		margin-bottom: calc(80 * var(--px));
		@media (min-width: 1024px) {
			display: flex;
			gap: calc(48 * var(--px));
		}
		&::before {
			content: "";
			position: absolute;
			z-index: -1;
			background-color: var(--c-cool-gray);
			width: 21%;
			height: calc(100% + 80px);
			left: 0;
			top: -40px;
			@media (min-width: 1024px) {
				width: 80px;
				height: calc(100% + 48px);
				top: -80px;
				left: 140px;
			}
		}

		.section-title {
			&.news-title {
				@media (min-width: 1024px) {
					/* ★縦書き設定 */
					writing-mode: vertical-rl;
					text-orientation: mixed;
				}
			}
		}
		.news-content-wrap {
			@media (min-width: 1024px) {
				flex: 1;
			}
		}
		/* パネルの表示制御 */
		.js-tab-panel {
			display: none; /* 基本は非表示 */
		}

		.js-tab-panel.is-active-panel {
			display: flex; /* アクティブなパネルだけ表示 */
			animation: fadeIn 0.5s ease; /* ふわっと切り替え（任意） */
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
	} /* t-news */
}
/* front-page */
.front-page {
	/* ============================================
   Instagramセクション
   ============================================ */
	.t-instagram {
		position: relative;
		margin-bottom: calc(80 * var(--px));
		@media (min-width: 1024px) {
			margin-bottom: calc(160 * var(--px));
			display: flex;
			flex-direction: row-reverse;
			gap: calc(48 * var(--px));
		}
		&::before {
			content: "";
			position: absolute;
			z-index: -1;
			background-color: var(--c-cool-gray);
			width: 21%;
			height: calc(100% + 240px);
			right: 0;
			top: -40px;
			@media (min-width: 1024px) {
				width: 80px;
				right: 140px;
				top: -80px;
			}
		}
		.section-title {
			&.insta-title {
				@media (min-width: 1024px) {
					/* ★縦書き設定 */
					writing-mode: vertical-rl;
					text-orientation: mixed;
				}
			}
		}
		.insta-content-wrap {
			@media (min-width: 1024px) {
				flex: 1;
			}
		}
		.js-tab-group {
			&.instagram {
				margin-bottom: calc(40 * var(--px));
				@media (min-width: 1024px) {
					margin-bottom: calc(48 * var(--px));
				}
			}
		}
		.btn-wrap {
			display: flex;
			flex-direction: column;
			row-gap: calc(24 * var(--px));
			@media (min-width: 1024px) {
				flex-direction: row;
				align-items: center;
				-moz-column-gap: calc(48 * var(--px));
				     column-gap: calc(48 * var(--px));
			}
		}
		/* パネルの表示制御 */
		.js-tab-panel {
			display: none; /* 基本は非表示 */
		}

		.js-tab-panel.is-active-panel {
			display: grid; /* アクティブなパネルだけ表示 */
			animation: fadeIn 0.5s ease; /* ふわっと切り替え（任意） */
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
	} /* t-instagram */
}
/* front-page */
.front-page {
	/* ============================================
   Concept (Message) セクション
   ============================================ */

	/* セクション全体 */
	.t-concept {
		padding-bottom: 80px;

		/* --- ヘッダーエリア（背景とロゴ） --- */
		.message-header {
			position: relative;
			z-index: 1;
			width: 100%;
			height: 440px;
			background-image: url(images/top_image-concept-sp.8c102558.webp);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 40px 20px;
			color: #fff;
			text-align: right;
			@media (min-width: 768px) {
				background-image: url(images/top_image-concept-pc.4f04e69b.webp);
				justify-content: center;
				text-align: center;
			}
			&::before {
				content: "";
				position: absolute;
				z-index: -1;
				background-color: rgba(var(--c-black-rgb), 1);
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				transition: background-color 0.5s ease 0.4s;
			}
		}
		&.is-action {
			.message-header {
				&::before {
					background-color: rgba(var(--c-black-rgb), 0.6);
				}
			}
		}

		.message-logo-text {
			font-family: var(--font-serif);
			font-size: calc(48 * var(--px));
			line-height: 1.2;
			margin-bottom: calc(24 * var(--px));
			letter-spacing: 0.05em;
			font-weight: normal; /* h2の太字を解除 */
			@media (min-width: 1024px) {
				margin-bottom: calc(40 * var(--px));
			}
		}

		/* --- ボディエリア（写真と本文） --- */
		.message-body {
			position: relative;
			z-index: 2; /* ヘッダーより手前に表示 */
		}

		/* --- 人物写真とリード文の囲い --- */
		.message-lead {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			row-gap: calc(32 * var(--px));
			width: 100%;
			margin-top: calc(-40 * var(--px));
			@media (min-width: 1024px) {
				flex-direction: row;
				justify-content: center;
				-moz-column-gap: calc(72 * var(--px));
				     column-gap: calc(72 * var(--px));
			}
			&::before {
				content: "";
				position: absolute;
				z-index: -1;
				background-color: var(--c-cool-gray);
				width: calc(100% - 16px);
				height: 44%;
				top: 40px;
				right: 0;
				@media (min-width: 1024px) {
					width: 90%;
					height: 219px;
				}
			}

			/* 人物写真 */
			.message-portrait {
				aspect-ratio: 300 / 257;
				width: min(80%, 400px);
				img {
					width: 100%;
					height: 100%;
					-o-object-fit: cover;
					   object-fit: cover;
					display: block;
				}
			}
		}

		/* --- アコーディオン（続きを読む）機能 --- */
		.message-text-wrap {
			position: relative;
			overflow: hidden;
			/* 初期の高さ：行間(line-height) × 行数 
       例: 1.8em × 4行 = 7.2em (少し余裕を見て7.5em) */
			height: 7.5em;
			transition: height 0.5s ease-out; /* ヌルヌル動かす設定 */
		}

		/* 下部のぼかしマスク */
		.message-fade-mask {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 60px;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
			transition: opacity 0.5s;
			pointer-events: none;
		}

		/* 開いた状態（クラスはJSで付与） */
		.message-text-wrap.is-open .message-fade-mask {
			opacity: 0;
		}

		/* 開いた後にボタンを消す場合 */
		.message-read-btn.is-hidden {
			display: none;
		}

		/* --- サイン --- */
		.message-signature {
			font-family: cursive; /* 筆記体など */
			font-size: 30px;
			color: #333;
			margin-top: 20px;
		}
	} /* t-concept */
}
/* front-page */
.front-page {
	/* ============================================
   Commitment Section
   ============================================ */
	.t-commitment {
		margin-bottom: calc(80 * var(--px));
		position: relative;
		overflow: hidden;
		@media (min-width: 1024px) {
			margin-bottom: calc(120 * var(--px));
		}
		&::before {
			content: "";
			position: absolute;
			z-index: -1;
			background-color: var(--c-cool-gray);
			width: 100%;
			height: calc(100% + 66px);
			top: 54px;
			left: 0;
			@media (min-width: 1024px) {
				height: calc(100% + clamp(8rem, 5.1429rem + 4.4643vw, 10.5rem));
				top: 72px;
			}
		}
		/* --- カードリスト --- */
		.commitment-list {
			display: flex;
			flex-direction: column;
			gap: calc(56 * var(--px));
			@media (min-width: 1024px) {
				gap: clamp(5rem, 2.1429rem + 4.4643vw, 7.5rem);
			}
		}

		/* --- カード本体 --- */
		.commitment-item {
			position: relative;
			background: #fff;
			padding-block: calc(16 * var(--px)) calc(24 * var(--px));
			width: calc(100% - 32px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
			/* スマホは縦並び（HTML順序通り） */
			display: flex;
			flex-direction: column;
			@media (min-width: 768px) {
				width: calc(100% - 64px);
			}
			@media (min-width: 1024px) {
				display: grid;
				grid-template-columns: 1fr 1.2fr;
				-moz-column-gap: calc(48 * var(--px));
				     column-gap: calc(48 * var(--px));
				padding: 0;
				width: calc(100% - 80px);
				min-height: 480px;
				align-items: center;
				/* 通常：画像が左、タイトルと本文が右 */
				/* 上段に画像とタイトル、下段に画像と本文 */
				grid-template-areas:
					"img head"
					"img txt";
			}
		}
		/* 画像 */
		.commitment-img {
			position: relative;
			aspect-ratio: 311 / 225;
			width: calc(100% - 32px);
			margin-bottom: calc(24 * var(--px));
			padding-right: 16px;
			border-right: 1px solid var(--c-red);
			/* PC用Gridエリア名定義 */
			grid-area: img;
			@media (min-width: 768px) {
				aspect-ratio: 16 / 9;
				padding-right: 32px;
			}
			@media (min-width: 1024px) {
				padding-right: 48px;
				aspect-ratio: inherit;
				width: 100%;
				height: 100%;
				margin: 0;
			}
			img {
				width: 100%;
				height: 100%;
				-o-object-fit: cover;
				   object-fit: cover;
				display: block;
			}
			&::before,
			&::after {
				content: "";
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}
			&::before {
				background-color: #fff;
				width: 2px;
				height: 32px;
				right: -1px;
			}
			&:after {
				right: -5px;
				aspect-ratio: 1 / 1;
				width: 8px;
				background-color: var(--c-red);
				border-radius: 50%;
			}
		}

		/* タイトル */
		.commitment-heading {
			margin-bottom: calc(24 * var(--px));
			/* PC用Gridエリア名定義 */
			grid-area: head;
			@media (min-width: 1024px) {
				padding-top: calc(24 * var(--px));
				align-self: end;
			}
		}

		/* 本文 */
		.commitment-text {
			padding-inline: calc(16 * var(--px)) calc(32 * var(--px));
			/* PC用Gridエリア名定義 */
			grid-area: txt;
			@media (min-width: 768px) {
				padding-inline: calc(40 * var(--px));
			}
			@media (min-width: 1024px) {
				align-self: self-start;
				padding-left: 0;
				padding-right: calc(64 * var(--px));
				padding-bottom: calc(24 * var(--px));
			}
		}

		/* --- 逆向きレイアウト (is-reverse) --- */
		/* MISSIONなどは画像を右寄せ・線を左にする（スマホでも） */
		.commitment-item.is-reverse {
			margin-left: auto;
			@media (min-width: 1024px) {
				grid-template-areas:
					"head img"
					"txt  img";
			}
			.commitment-img {
				margin-left: auto;
				padding-right: 0;
				padding-left: 16px;
				border-right: none;
				border-left: 1px solid var(--c-red);
				@media (min-width: 768px) {
					padding-left: 32px;
				}
				@media (min-width: 1024px) {
					padding-left: 48px;
				}

				&::before {
					right: auto;
					left: -1px;
				}
				&::after {
					right: auto;
					left: -5px;
				}
			}
			.commitment-heading {
				@media (min-width: 1024px) {
					padding-left: calc(64 * var(--px));
				}
			}
			.commitment-text {
				padding-inline: calc(32 * var(--px)) calc(16 * var(--px));
				@media (min-width: 768px) {
					padding-inline: 0;
				}
				@media (min-width: 1024px) {
					padding-right: 0;
					padding-left: calc(64 * var(--px));
				}
			}
		}

		/* --- MISSIONのリスト装飾 --- */
		.commitment-mission-list {
			display: flex;
			flex-direction: column;
			row-gap: calc(24 * var(--px));
			counter-reset: mission-counter;
		}
		.mission-head {
			display: block;
			margin-bottom: calc(8 * var(--px));
			position: relative;
			padding-left: calc(28 * var(--px));
		}
		/* 数字部分 */
		.mission-head::before {
			counter-increment: mission-counter;
			content: counter(mission-counter);
			position: absolute;
			left: 0;
			top: 4px;
			aspect-ratio: 1 / 1;
			width: 20px;
			background-color: var(--c-red);
			color: #fff;
			font-size: calc(16 * var(--px));
			text-align: center;
			line-height: 100%;
			border-radius: 50%;
			font-family: var(--font-serif);
			/* padding-top: 2px; */
		}
	} /* t-commitoment */
}
/* front-page */
.front-page {
	/* ============================================
   Profile Section
   ============================================ */
	.t-profile {
		position: relative;
		z-index: 1;
		margin-bottom: calc(56 * var(--px));
		overflow: hidden;
		@media (min-width: 1024px) {
			margin-bottom: calc(120 * var(--px));
		}
		.profile-grid {
			margin: 0 auto;
			display: grid;
			/* スマホレイアウト: [画像エリア (残り全部)] [タイトル帯 (60px固定)] */
			grid-template-columns: 1fr 76px;
			/* 縦方向は自動 */
			grid-template-rows: auto auto;
			gap: calc(16 * var(--px));
			width: min(100%, 560px);
			@media (min-width: 1024px) {
				margin: 0;
				/* 左右2分割 */
				grid-template-columns: min(45%, 440px) 1fr;
				grid-template-rows: auto 1fr;
				/* 余白設定 */
				gap: 0 60px;
				align-items: start;
				width: min(100%, 1140px);
			}
		}

		/* --- 1. 画像 --- */
		.profile-img {
			grid-column: 1 / 2; /* 1列目 */
			grid-row: 1 / 2; /* 1行目 */
			width: 100%;
			aspect-ratio: 293 / 257;
			-o-object-fit: cover;
			   object-fit: cover;
			@media (min-width: 1024px) {
				grid-column: 1 / 2;
				grid-row: 1 / 3; /* 1行目から2行目までぶち抜き */
				aspect-ratio: inherit;
				height: 100%;
			}
			img {
				width: 100%;
				height: 100%;
				-o-object-fit: cover;
				   object-fit: cover;
				display: block;
			}
		}

		/* --- 2. タイトルエリア (スマホ：縦書き帯) --- */
		.profile-header {
			grid-column: 2 / 3; /* 2列目 (右端) */
			grid-row: 1 / 2; /* 1行目 (画像と同じ高さ) */
			/* ★縦書き設定 */
			writing-mode: vertical-rl;
			text-orientation: mixed;
			@media (min-width: 1024px) {
				grid-column: 2 / 3;
				grid-row: 1 / 2;
				/* スタイルリセット */
				background-color: transparent;
				writing-mode: horizontal-tb; /* 横書きに戻す */
				padding: 0;
				margin-bottom: calc(24 * var(--px));
			}
			.profile-title {
				display: flex;
				flex-direction: column;
				row-gap: calc(16 * var(--px));
				@media (min-width: 1024px) {
					flex-direction: row;
					padding-bottom: 10px;
				}
				.english {
					line-height: 70%;
				}
				.profile-subtitle {
					letter-spacing: 0.2em;
				}
				.line {
					width: 1px;
					flex: 1;
					height: 100%;
				}
			}
		}

		/* --- 3. 本文エリア --- */
		.profile-body {
			grid-column: 1 / 3; /* 横幅いっぱい使う */
			grid-row: 2 / 3; /* 2行目 */
			padding-inline: calc(16 * var(--px)); /* 上部の余白 */
			@media (min-width: 1024px) {
				grid-column: 2 / 3;
				grid-row: 2 / 3;
				padding: 0; /* リセット */
			}
		}
	} /* t-profile */
}
/* front-page */
.front-page {
	/* ============================================
   Company Info Section
   ============================================ */
	.t-company {
		margin-bottom: calc(136 * var(--px));
		@media (min-width: 1024px) {
			margin-bottom: calc(88 * var(--px));
			display: flex;
			gap: calc(80 * var(--px));
		}
		.company-header {
			@media (min-width: 1024px) {
				/* ★縦書き設定 */
				writing-mode: vertical-rl;
				text-orientation: mixed;
				height: -moz-fit-content;
				height: fit-content;
			}
			.company-title {
				@media (min-width: 1024px) {
					display: flex;
					flex-direction: column-reverse;
					align-items: normal;
					gap: 0;
				}
				.line {
					display: block;
					width: 1px;
					height: 100%;
				}
			}
		}

		.company-list {
			@media (min-width: 768px) {
				display: grid;
				/* 左カラム(30%くらい) 右カラム(残り) */
				grid-template-columns: 330px 1fr;
				/* 項目の間に白い隙間を作る */
				row-gap: calc(8 * var(--px));
			}
			dt {
				margin-bottom: calc(8 * var(--px));
				position: relative;
				background-color: var(--c-lite-gray);
				color: var(--c-navy);
				padding: calc(4 * var(--px)) calc(16 * var(--px));
				@media (min-width: 768px) {
					margin-bottom: 0;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding-block: 0;
					padding-inline: calc(24 * var(--px)); /* 文字と境界の余白 */
				}
				/* 左側の装飾線 */
				&::before {
					content: "";
					position: absolute;
					aspect-ratio: 17 / 1;
					width: 16px;
					background-color: var(--c-navy);
					left: -8px;
					top: 50%;
					transform: translateY(-50%);
					@media (min-width: 768px) {
						aspect-ratio: 24 / 1;
						width: 24px;
						left: -12px;
					}
				}
			}
			dd {
				margin-bottom: calc(32 * var(--px)); /* スマホ版での各項目の間隔 */
				@media (min-width: 768px) {
					margin-bottom: 0; /* スマホ用のマージンリセット */
					padding-block: calc(16 * var(--px));
					padding-left: calc(24 * var(--px));
					display: flex;
					align-items: center; /* 上下中央揃え（1行の場合きれいに見える） */
				}
			}
		}

		/* リスト形式の中身 */
		.company-sub-list li {
			position: relative;
			padding-left: 1em; /* ・文頭の余白 */
		}
		.company-sub-list li::before {
			content: "・";
			position: absolute;
			left: 0;
			top: 0;
		}
		.company-sub-list li:last-child {
			margin-bottom: 0;
		}
	} /* t-company */
}
/* front-page */
.front-page {
	/* ============================================
   FAQ Section
   ============================================ */
	.t-faq {
		position: relative;
		margin-bottom: calc(136 * var(--px));
		@media (min-width: 1024px) {
			margin-bottom: calc(240 * var(--px));
		}
		&::before {
			content: "";
			position: absolute;
			z-index: -1;
			background-color: var(--c-cool-gray);
			width: 100%;
			height: calc(100% + 136px);
			top: -56px;
			left: 0;
			@media (min-width: 1024px) {
				top: 72px;
				height: calc(100% + 58px);
			}
		}
		/* リスト全体（Gridコンテナ） */
		.faq-list {
			display: grid;
			grid-template-columns: 1fr;
			gap: calc(32 * var(--px));
			@media (min-width: 768px) {
				grid-template-columns: 1fr 1fr;
				gap: 30px;
			}
			@media (min-width: 1024px) {
				gap: calc(56 * var(--px));
			}
		}
		/* --- 質問ボタン --- */
		.faq-question {
			width: 100%;
			background-color: #fff;
			padding-block: calc(12 * var(--px));
			padding-inline: calc(24 * var(--px)) calc(72 * var(--px));
			cursor: pointer;
			position: relative;
			text-align: left;
			transition:
				background-color 0.3s,
				color 0.3s;
			@media (min-width: 768px) {
				min-height: 88px;
			}
		}

		/* --- アイコン (+ / -) --- */
		.faq-icon {
			position: absolute;
			top: 50%;
			right: 24px;
			transform: translateY(-50%);
			aspect-ratio: 1 / 1;
			width: 16px;
			display: block;
		}

		/* 横棒 (常に表示) */
		.faq-icon::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 1px;
			background-color: var(--c-black);
			transform: translateY(-50%);
			transition: background-color 0.3s;
		}

		/* 縦棒 (開いている時は消してマイナスにする) */
		.faq-icon::after {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: 1px;
			height: 100%;
			background-color: #333;
			transform: translateX(-50%);
			transition:
				transform 0.3s,
				background-color 0.3s;
		}

		/* --- 開いている状態 (is-active) --- */
		.faq-question.is-active {
			background-color: var(--c-navy);
			color: #fff;
			.faq-icon {
				/* 開いている時のアイコン線色変更 */
				&::before,
				&::after {
					background-color: #fff;
				}
				&::after {
					transform: translateX(-50%) rotate(90deg);
				}
			}
		}

		/* --- 回答エリア --- */
		.faq-answer {
			height: 0; /* JSで高さを操作するために0にしておく */
			overflow: hidden;
			transition: height 0.4s ease-out; /* ヌルヌル動く設定 */
			background-color: #fff;
		}

		.faq-answer-inner {
			padding: calc(24 * var(--px));
		}
	} /* t-faq */
}
/* front-page */
/* 下層ページ */
.single {
	.single-header {
		margin-bottom: calc(40 * var(--px));
		@media (min-width: 1024px) {
			margin-bottom: calc(56 * var(--px));
		}
		.thumbnail {
			margin-bottom: calc(24 * var(--px));
			aspect-ratio: 4 / 3;
			width: 100%;
			@media (min-width: 768px) {
				aspect-ratio: 16 / 9;
			}
			@media (min-width: 1024px) {
				margin-bottom: calc(40 * var(--px));
			}
			img {
				width: 100%;
				height: 100%;
				-o-object-fit: cover;
				   object-fit: cover;
			}
		}
		.title {
			margin-bottom: calc(8 * var(--px));
			font-family: var(--font-serif);
			font-size: calc(20 * var(--px));
			line-height: 160%;
			font-weight: 600;
			letter-spacing: 0.05em;
			@media (min-width: 1024px) {
				margin-bottom: calc(16 * var(--px));
				font-size: calc(24 * var(--px));
			}
		}
		.time {
			display: block;
			margin-bottom: calc(16 * var(--px));
			color: #666;
		}
		.category-list {
			display: flex;
			-moz-column-gap: calc(24 * var(--px));
			     column-gap: calc(24 * var(--px));
			row-gap: calc(12 * var(--px));
			.item {
				font-family: var(--font-serif);
				padding-block: calc(2 * var(--px));
				padding-inline: calc(8 * var(--px));
				border: 1px solid var(--c-black);
				font-weight: 500;
			}
		}
	} /* single-header */

	.single-content {
		h1,
		h2,
		h3,
		h4,
		h5,
		figure {
			margin-top: calc(24 * var(--px));
			font-family: var(--font-serif);
			line-height: 160%;
			@media (min-width: 1024px) {
				margin-top: calc(32 * var(--px));
			}
		}
		ul,
		ol,
		table,
		figure {
			margin-top: calc(24 * var(--px));
			@media (min-width: 1024px) {
				margin-top: calc(32 * var(--px));
			}
		}
		h1 {
			font-size: calc(24 * var(--px));
			@media (min-width: 1024px) {
				font-size: calc(28 * var(--px));
			}
		}
		h2 {
			font-size: calc(20 * var(--px));
			@media (min-width: 1024px) {
				font-size: calc(24 * var(--px));
			}
		}
		h3 {
			font-size: calc(18 * var(--px));
			@media (min-width: 1024px) {
				font-size: calc(20 * var(--px));
			}
		}
		h4 {
			font-size: calc(16 * var(--px));
			@media (min-width: 1024px) {
				font-size: calc(18 * var(--px));
			}
		}
		p {
			margin-top: calc(15 * var(--px));
		}
		ul {
			display: flex;
			flex-direction: column;
			row-gap: calc(12 * var(--px));
			li {
				position: relative;
				padding-left: calc(16 * var(--px));
				&::before {
					content: "";
					position: absolute;
					background-color: var(--c-red);
					aspect-ratio: 1 / 1;
					width: 8px;
					border-radius: 50%;
					top: 10px;
					left: 0;
				}
			}
		}
		ol {
			display: flex;
			flex-direction: column;
			row-gap: calc(12 * var(--px));
			counter-reset: single-counter;
			li {
				position: relative;
				padding-left: calc(28 * var(--px));
				&::before {
					counter-increment: single-counter;
					content: counter(single-counter);
					position: absolute;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: var(--c-red);
					padding-bottom: 3px;
					width: 20px;
					height: 20px;
					border-radius: 50%;
					color: #fff;
					font-family: var(--font-serif);
					top: 8px;
					left: 0;
				}
			}
		} /* ol */
		/* テーブルを囲ったdiv */
		figure:has(table) {
			overflow-x: auto;
		}
		table {
			max-width: 800px;
			border-spacing: 0;
		}
	} /* single-content */
	.post-navigation {
		margin-top: calc(48 * var(--px));
		display: flex;
		justify-content: space-between;
		@media (min-width: 1024px) {
			margin-top: calc(56 * var(--px));
		}
		.post-link {
			position: relative;
			color: var(--c-navy);
			&::before {
				content: "";
				position: absolute;
				background-color: var(--c-navy);
				aspect-ratio: 1 / 1;
				width: 8px;
				border-radius: 50%;
				top: 11px;
			}
		}
		.prev-post {
			padding-left: calc(16 * var(--px));
			&::before {
				left: 0;
			}
		}
		.next-post {
			padding-right: calc(16 * var(--px));
			&::before {
				right: 0;
			}
		}
	}
}
/* single */
.page-contact {
	.contact-line {
		margin-bottom: calc(128 * var(--px));
		display: flex;
		flex-direction: column;
		align-items: center;
		@media (min-width: 1024px) {
			margin-bottom: calc(240 * var(--px));
		}
	}

	/* フォームエリア */
	.custom-cf7-skin {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		&::before {
			content: "";
			position: absolute;
			z-index: -1;
			background-color: var(--c-cool-gray);
			width: 100dvw;
			height: calc(100% + 120px + 188px);
			top: -64px;
			left: 50%;
			transform: translateX(-50%);
			@media (min-width: 1024px) {
				top: -120px;
			}
		}
		.wpcf7-form {
			.form-content-wrap {
				display: flex;
				flex-direction: column;
				row-gap: calc(24 * var(--px));
				@media (min-width: 1024px) {
					row-gap: calc(40 * var(--px));
				}
			}
			.form-row {
				display: flex;
				flex-direction: column;
				row-gap: calc(8 * var(--px));
				@media (min-width: 768px) {
					flex-direction: row;
					flex-wrap: wrap;
					-moz-column-gap: calc(40 * var(--px));
					     column-gap: calc(40 * var(--px));
				}
			}
			.form-title {
				display: flex;
				-moz-column-gap: calc(8 * var(--px));
				     column-gap: calc(8 * var(--px));
				@media (min-width: 768px) {
					justify-content: flex-end;
				}
				&:not(:has(.required)) {
					padding-right: 27px;
					@media (min-width: 1024px) {
						padding-right: 29px;
					}
				}
				.required {
					color: var(--c-red);
				}
				@media (min-width: 768px) {
					width: 176px;
				}
				@media (min-width: 1024px) {
					width: 194px;
				}
			}
			.wpcf7-form-control-wrap,
			.form-row-inner {
				@media (min-width: 768px) {
					flex: 1;
				}
			}
			.wpcf7-text,
			.wpcf7-textarea {
				width: 100%;
				border: none;
				padding-inline: calc(12 * var(--px));
			}
			.wpcf7-text {
				height: 40px;
			}
			.wpcf7-textarea {
				height: 200px;
			}
			.wpcf7-radio {
				display: flex;
				flex-wrap: wrap;
				-moz-column-gap: calc(24 * var(--px));
				     column-gap: calc(24 * var(--px));
				row-gap: calc(8 * var(--px));
				.wpcf7-list-item {
					margin: 0;
					label {
						display: flex;
						align-items: center;
						gap: calc(8 * var(--px));
					}
				}
			}
			input[type="radio"] {
				position: relative;
				-webkit-appearance: none;
				-moz-appearance: none;
				     appearance: none;
				aspect-ratio: 1 / 1;
				width: 10px;
				border-radius: 50%;
				border: 1px solid var(--c-navy);
				background-color: #fff;
				&:checked {
					&::after {
						content: "";
						display: block;
						background-color: var(--c-navy);
						aspect-ratio: 1 / 1;
						width: 5px;
						border-radius: 50%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
			.submit-wrapper {
				position: relative;
				width: -moz-fit-content;
				width: fit-content;
				transition: all 0.5s ease;
				&:before,
				&:after {
					content: "";
					position: absolute;
					background-color: var(--c-black);
					transition: all 0.5s ease;
				}
				&:before {
					aspect-ratio: 56 / 1;
					width: 56px;
					right: 20px;
					bottom: 20px;
				}
				&:after {
					aspect-ratio: 8 / 6;
					width: 8px;
					clip-path: polygon(0 0, 100% 100%, 0 100%);
					right: 19px;
					bottom: 21px;
				}
				@media (hover: hover) {
					&:hover {
						background-color: var(--c-black);

						.wpcf7-submit {
							color: #fff;
						}
						&:before,
						&:after {
							background-color: #fff;
							transform: translateX(8px);
						}
					}
				}
				.wpcf7-submit {
					display: block;
					background-color: inherit;
					font-family: var(--font-serif);
					font-size: var(--fs-h4);
					line-height: 160%;
					letter-spacing: 0.1em;
					color: var(--c-black);
					border: none;
					border-left: 1px solid var(--c-black);
					border-bottom: 1px solid var(--c-black);
					padding-block: calc(12 * var(--px));
					padding-left: calc(24 * var(--px));
					padding-right: calc(88 * var(--px));
					transition: all 0.5s ease;
					cursor: pointer;
					@media (min-width: 1024px) {
						font-size: var(--fs-h4-pc);
						padding-left: calc(24 * var(--px));
						padding-right: calc(96 * var(--px));
					}
				}
				.wpcf7-spinner {
					margin: 0;
					position: absolute;
					bottom: -36px;
					left: 50%;
					transform: translateX(-50%);
				}
			} /* submit-wrapper */
		} /* wpcf7-form */
	} /* custom-cf7-skin */
	+ .footer {
		.footer-page-top {
			&::after {
				background-color: var(--c-cool-gray);
			}
		}
	}
}
/* page-contact */
.page-contact-thanks {
	.thanks-content {
		.list {
			dd {
				margin-bottom: calc(16 * var(--px));
				padding-left: calc(15 * var(--px));
				@media (min-width: 1024px) {
					padding-left: calc(16 * var(--px));
				}
				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}
		.btn-wrap {
			margin: 0 auto;
			width: -moz-fit-content;
			width: fit-content;
		}
	}
}

/*!*******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/swiper/swiper-bundle.css ***!
  \*******************************************************************************************************************************************************************************************/
/**
 * Swiper 12.0.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 21, 2025
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 3D Effects */

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */

.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: '';
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */

/* 3D Shadows */

.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Slide styles end */

.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode {
  .swiper-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }
}

.swiper-virtual.swiper-css-mode.swiper-horizontal {
  .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size);
  }
}

.swiper-virtual.swiper-css-mode.swiper-vertical {
  .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size);
  }
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;

  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);

  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }
  svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
}

.swiper-button-lock {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
}

.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  .swiper-navigation-icon {
    transform: rotate(180deg);
  }
}

.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}

.swiper-horizontal {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-next,
  & ~ .swiper-button-next,
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    .swiper-navigation-icon {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    .swiper-navigation-icon {
      transform: rotate(0deg);
    }
  }
}

.swiper-vertical {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    .swiper-navigation-icon {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    .swiper-navigation-icon {
      transform: rotate(90deg);
    }
  }
}

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}

/* Common Styles */

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}

/* Bullets */

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }

  &:only-child {
    display: none !important;
  }
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition:
        200ms transform,
        200ms top;
    }
  }
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition:
        200ms transform,
        200ms left;
    }
  }
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
    200ms transform,
    200ms right;
}

/* Fraction */

.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

/* Progress */

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}

.swiper-pagination-lock {
  display: none;
}

:root {
  /*
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
  */
}

.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
  .swiper-scrollbar-disabled > &,
  &.swiper-scrollbar-disabled {
    display: none !important;
  }
  .swiper-horizontal > &,
  &.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
  .swiper-vertical > &,
  &.swiper-scrollbar-vertical {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

/* Zoom container styles start */

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  > img,
  > svg,
  > canvas {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

/* Zoom container styles end */

.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}

/* a11y */

.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-thumbs {
  .swiper-slide-thumb-active {
    /* Styles for active thumb slide */
  }
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade {
  &.swiper-free-mode {
    .swiper-slide {
      transition-timing-function: ease-out;
    }
  }
  .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
    .swiper-slide {
      pointer-events: none;
    }
  }
  .swiper-slide-active {
    pointer-events: auto;
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
}

.swiper.swiper-cube {
  overflow: visible;
}

.swiper-cube {
  .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
    .swiper-slide {
      pointer-events: none;
    }
  }
  &.swiper-rtl .swiper-slide {
    transform-origin: 100% 0;
  }
  .swiper-slide-active {
    &,
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
  .swiper-slide-active,
  .swiper-slide-next,
  .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible;
  }

  .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 0;

    &:before {
      content: '';
      background: #000;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      filter: blur(50px);
    }
  }
}

.swiper-cube {
  .swiper-slide-next + .swiper-slide {
    pointer-events: auto;
    visibility: visible;
  }
}

/* Cube slide shadows start */

.swiper-cube {
  .swiper-slide-shadow-cube.swiper-slide-shadow-top,
  .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-cube.swiper-slide-shadow-left,
  .swiper-slide-shadow-cube.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
}

/* Cube slide shadows end */

.swiper.swiper-flip {
  overflow: visible;
}

.swiper-flip {
  .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    .swiper-slide {
      pointer-events: none;
    }
  }
  .swiper-slide-active {
    &,
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
}

/* Flip slide shadows start */

.swiper-flip {
  .swiper-slide-shadow-flip.swiper-slide-shadow-top,
  .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-flip.swiper-slide-shadow-left,
  .swiper-slide-shadow-flip.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
}

/* Flip slide shadows end */

.swiper-coverflow {
}

.swiper-creative {
  .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height;
  }
}

.swiper.swiper-cards {
  overflow: visible;
}

.swiper-cards {
  .swiper-slide {
    transform-origin: center bottom;
    backface-visibility: hidden;
    overflow: hidden;
  }
}


/*# sourceMappingURL=index.css.map*/