/*--------------------------------------------------------------
# Front Page Styles (トップページスタイル)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Front Page (トップページ)
--------------------------------------------------------------*/

/* Hero Section */
.hero-section {
	min-height: var(--min-height-60);
	background-color: var(--color-white);
	position: relative;
}

.hero-content {
	width: 100%;
	max-width: var(--container-width);
	padding: 0 var(--container-padding);
}

.hero-title {
	font-size: 5.6rem; /* 56px */
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.hero-subtitle {
	font-size: var(--font-size-large);
	color: var(--color-text-light);
	line-height: 1.8;
}

/* Service Section (サービスセクション) */
.section-services {
	background-color: var(--color-white);
}

/* News Section (お知らせセクション) */
.section-news {
	background-color: var(--color-white);
}

/* Page Header (ページヘッダー) */
.page-header {
	position: relative;
}

.page-header--no-thumbnail {
	padding-top: 24.0rem; /* 240px */
}

/* .page-header--no-thumbnail のメディアクエリは responsive.css に定義済み */

/* Page Header Thumbnail (ページヘッダー サムネイル) */
.page-header__thumbnail {
	margin-bottom: 6.0rem; /* 60px */
}

/* .page-header__thumbnail のメディアクエリは responsive.css に定義済み */

.thumbnail-container {
	position: relative;
}

/* .thumbnail-container のメディアクエリは responsive.css に定義済み */

.thumbnail-mask {
	overflow: hidden;
	border-radius: 2.1rem; /* 21px */
	width: 100%;
	height: 100%;
}

.thumbnail,
.thumbnail-mask {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.thumbnail {
	width: 100%;
	height: 100%;
}

/* .thumbnail のメディアクエリは responsive.css に定義済み */

.thumbnail::after {
	background-color: rgba(40, 45, 39, 0.2);
	content: "";
	display: block;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: absolute;
	z-index: 2;
}

.thumbnail img {
	backface-visibility: hidden;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.page-header__thumbnail.animate-fade-in-up img {
	transform: scale(1.1);
}

.page-header__thumbnail.animate-fade-in-up.animated img {
	transform: scale(1.1);
}

/* Page Header Container (ページヘッダー コンテナ) */
.page-header__container {
	position: relative;
	z-index: 1;
}

/* .page-header__container のメディアクエリは responsive.css に定義済み */

/* Page Header Title (Large Green Text) (ページヘッダー タイトル - 大きな緑色のテキスト) */
.page-header__title {
	color: var(--color-primary);
	left: 0;
	position: absolute;
	top: -8.0rem; /* -80px */
	z-index: -1;
	font-size: 12.0rem; /* 120px */
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-family: serif;
	overflow: hidden;
}

/* .page-header__title のメディアクエリは responsive.css に定義済み */

/* .page-header__title--thumbnail {
	color: var(--color-primary);
	top: -224px;
} */

/* .page-header__title--thumbnail のメディアクエリは responsive.css に定義済み */

/* Animation Utilities */
.animate-fade-in-up {
	animation: fadeInUp 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
	opacity: 0;
	transform: translateY(3.0rem); /* 30px */
}

.animate-fade-in {
	animation: fadeIn 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
	opacity: 0;
}

.animate-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(100%);
	animation: charSlideUp 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

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

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

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

/* Page Header Heading (Medium Title) (ページヘッダー 見出し - 中サイズのタイトル) */
.page-header__heading {
	margin: 0;
}

.page-header__heading h1 {
	font-size: var(--font-size-h1);
	color: var(--color-text);
	font-weight: 700;
}

/* Page Header Description (ページヘッダー 説明文) */
.page-header__description {
	margin-top: 2.4rem; /* 24px */
}

/* .page-header__description のメディアクエリは responsive.css に定義済み */

.page-header__description p {
	margin: 0;
	color: var(--color-text);
	line-height: var(--line-height-base);
}

/* Legacy styles for backward compatibility */
.page-title {
	font-size: var(--font-size-h1);
	color: var(--color-text);
	font-weight: 700;
}

.page-subtitle {
	font-size: var(--font-size-large);
	color: var(--color-text-light);
}



/*--------------------------------------------------------------
# Top Page Additional Styles (トップページ追加スタイル)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Top Page (トップページ)
--------------------------------------------------------------*/

/* FV (First View) (ファーストビュー) */
.fv {
	padding-top: 25.0rem; /* 200px */
	position: relative;
	z-index: 1;
}

.fv .container {
	position: relative;
	z-index: 2;
}

.fv__copy {
	font-size: 5.0rem;
	line-height: 1.6;
	font-weight: bold;
	position: relative; /* 波線の位置指定用 */
	padding-bottom: 2.0rem; /* 波線との間隔 */
}

/* 1文字ずつ表示するアニメーション */
.fv__copy .char {
	display: inline-block;
	opacity: 0;
	transform: translateY(1.0rem);
	animation: charFadeInUp 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.fv__copy .char-space {
	display: inline;
}

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

.fv__copy__wave {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1.6rem; /* 波線の高さ */
}

.fv__copy__wave path {
	stroke-dasharray: 1000; /* パスの全長より大きい値 */
	stroke-dashoffset: 1000; /* 初期状態は非表示 */
	animation: drawWave 2.0s ease-out 1.8s forwards; /* 文字アニメーション完了後に開始 */
}

@keyframes drawWave {
	to {
		stroke-dashoffset: 0; /* パス全体が表示される */
	}
}

.fv__copy.animate .fv__copy__wave {
	opacity: 1;
	transform: translateY(0);
}

/* .fv__copy のメディアクエリは responsive.css に定義済み */

.fv__scroll-container,
.fv__scroll-l-container {
	margin-left: 1.2rem; /* 12px */
	margin-top: 6.4rem; /* 64px - 余白を増やす */
	opacity: 0;
	transform: translateY(2.0rem); /* 20px下から */
	transition: opacity 1.0s ease-out 0.8s, transform 1.0s ease-out 0.8s;
}

.fv__scroll-container.animate,
.fv__scroll-l-container.animate {
	opacity: 1;
	transform: translateY(0);
}

/* .fv__scroll-container, .fv__scroll-l-container のメディアクエリは responsive.css に定義済み */

.fv__scroll {
	align-items: center;
	display: flex;
	gap: 0.8rem; /* 8px */
	height: 2.4rem; /* 24px */
}

.fv__scroll__icon {
	aspect-ratio: 1;
	border: 1px solid var(--color-text);
	border-radius: 50%;
	position: relative;
	width: 2.0rem; /* 20px */
}

.fv__scroll__icon::before {
	aspect-ratio: 1;
	background-color: var(--color-text);
	content: "";
	display: block;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	position: absolute;
	width: 0.8rem; /* 8px */
	height: 0.8rem; /* 8px */
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none' viewBox='0 0 8 8'%3E%3Cpath fill='%23333' d='M4 6L1 3h6L4 6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none' viewBox='0 0 8 8'%3E%3Cpath fill='%23333' d='M4 6L1 3h6L4 6z'/%3E%3C/svg%3E");
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fv__scroll__text {
	display: flex;
	font-family: NeueHaasUnicaW1G-Medium, sans-serif;
	font-size: 1.2rem; /* 12px */
	line-height: 1;
}

.fv__mv-container,
.fv__mv-l-container {
	margin-top: 12.0rem; /* 120px */
	position: relative;
	z-index: 0;
}

/* .fv__mv-container, .fv__mv-l-container のメディアクエリは responsive.css に定義済み */

/* MV (Main Visual) */
.mv {
	aspect-ratio: 1600 / 980;
	max-height: 64rem;
	position: relative;
	width: 100%;
}

/* .mv のメディアクエリは responsive.css に定義済み */

.mv__container {
	top: 0.8rem; /* 8px */
	right: 0.8rem; /* 8px */
	bottom: 0.8rem; /* 8px */
	left: 0.8rem; /* 8px */
	position: absolute;
}

/* .mv__container のメディアクエリは responsive.css に定義済み */

.mv__base {
	inset: 0; /* 最初は横幅いっぱいに表示 */
	position: absolute;
	width: 100%;
}

/* .mv__base のメディアクエリは responsive.css に定義済み */

.mv__mask {
	backface-visibility: hidden;
	overflow: hidden;
	border-radius: 24px;
	width: 100%;
	height: 100%;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.9); /* 初期状態は少し小さく */
	opacity: 0; /* 初期状態は非表示 */
	z-index: 0;
	transition: opacity 1.2s ease-out 0.5s, transform 1.2s ease-out 0.5s;
}

.mv__mask.animate {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.mv__image {
	aspect-ratio: 1600/980;
	max-height: 768px;
	width: 100%;
	height: 100%;
}

/* .mv__image のメディアクエリは responsive.css に定義済み */

.mv__image img {
	backface-visibility: hidden;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Message Section (メッセージセクション) */
.message {
	position: relative;
	z-index: 1;
	margin-bottom: 4.0rem; /* 120px */
	background-color: var(--color-beige);
	padding: 0; /* 80px */
}

/* .message のメディアクエリは responsive.css に定義済み */

.message__container {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	align-items: center;
	gap: 4.0rem;
	min-height: 60.0rem; /* 600px */
}

/* 左側の画像 */
.message__images-left {
	display: flex;
	flex-direction: column;
	gap: 2.0rem;
	justify-content: center;
}

/* 右側の画像 */
.message__images-right {
	display: flex;
	flex-direction: column;
	gap: 2.0rem;
	justify-content: center;
}

/* 各画像 */
.message__image {
	position: relative;
	width: 100%;
	max-width: 25rem; /* 200px */
	aspect-ratio: 4/3;
	border-radius: 1.2rem;
	overflow: hidden;
	box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.1);
	transform-origin: center;
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* アニメーション前の状態 */
.message__image--animate {
	opacity: 0;
	transform: scale(0.9);
}

/* アニメーション後の状態 */
.message__image--animate.is-visible {
	opacity: 1;
	transform: scale(1);
}

/* 各画像の回転角度を保持 */
.message__images-left .message__image--1.message__image--animate.is-visible {
	transform: scale(1) rotate(-8deg);
}

.message__images-left .message__image--2.message__image--animate.is-visible {
	transform: scale(1) rotate(12deg);
}

.message__images-left .message__image--3.message__image--animate.is-visible {
	transform: scale(1) rotate(-10deg);
}

.message__images-right .message__image--4.message__image--animate.is-visible {
	transform: scale(1) rotate(8deg);
}

.message__images-right .message__image--5.message__image--animate.is-visible {
	transform: scale(1) rotate(-12deg);
}

.message__images-right .message__image--6.message__image--animate.is-visible {
	transform: scale(1) rotate(10deg);
}

.message__image__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 各画像の回転角度 */
.message__image--1 {
	transform: rotate(-8deg);
}

.message__image--2 {
	transform: rotate(12deg);
}

.message__image--3 {
	transform: rotate(-10deg);
}

.message__image--4 {
	transform: rotate(8deg);
}

.message__image--5 {
	transform: rotate(-12deg);
}

.message__image--6 {
	transform: rotate(10deg);
}

/* Message Main Container (メッセージメインコンテナ) */
.message__main-container,
.message__main-l-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 1;
	text-align: center;
	align-items: center;
}

/* .message__main-container, .message__main-l-container のメディアクエリは responsive.css に定義済み */

.message__main {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.message__location {
	text-align: center;
	margin-bottom: 2.4rem; /* 24px */
}

.message__location-text {
	font-size: 1.6rem; /* 16px */
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: 0.8rem; /* 8px */
	letter-spacing: 0.1em;
}

.message__location-title {
	font-size: 2.8rem; /* 28px */
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.4;
	margin: 0;
}

.paragraph {
	font-size: 2.4rem; /* 20px */
	font-weight: 600; /* 太字 */
	line-height: 1.8;
}

/* .paragraph のメディアクエリは responsive.css に定義済み */

.paragraph__inner {
	backface-visibility: hidden;
	display: block;
}

/* 地域名のハイライト表示 */
.location-highlight {
	display: inline-block;
	font-size: 3.2rem; /* 32px - 大きく表示 */
	font-weight: 700; /* 太字 */
	color: var(--color-primary);
	background: linear-gradient(transparent 60%, rgba(90, 159, 77, 0.2) 60%); /* マーカー風の背景 */
	padding: 0 0.4rem; /* 4px - 左右に少し余白 */
	line-height: 1.6;
	letter-spacing: 0.05em; /* 文字間隔を少し広げる */
}

.section-title__text {
	font-family: NewBaskervilleITCPro-Bold, serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	font-size: 24px;
	color: var(--color-primary);
}

/* .section-title__text のメディアクエリは responsive.css に定義済み */

.section-title__border {
	margin-top: 8px;
	height: 1px;
	background-color: var(--color-border);
	width: 100%;
}

.heading__line {
	display: block;
	font-family: NewCezannePro-M, FOT-ニューセザンヌ Pro M, sans-serif;
	font-size: 30px;
	line-height: 1.6;
}

/* .heading__line のメディアクエリは responsive.css に定義済み */

.heading__line__inner {
	backface-visibility: hidden;
	display: block;
	transform-origin: top center;
}


/* Icon Styles */
.icon {
	aspect-ratio: 1;
	display: block;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-color: currentColor; /* アイコンの色を親要素の色に合わせる */
}

.icon--arrow {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%235A9F4D' d='M7.966 14.636 6.648 13.33l3.46-3.46H2V7.948h8.108l-3.46-3.455 1.318-1.312 5.727 5.727z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%235A9F4D' d='M7.966 14.636 6.648 13.33l3.46-3.46H2V7.948h8.108l-3.46-3.455 1.318-1.312 5.727 5.727z'/%3E%3C/svg%3E");
	width: 1.6rem; /* 16px */
	height: 1.6rem; /* 16px */
}

.icon--next {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFFDF6' d='M8.196 4.29a.991.991 0 0 0-1.401 1.402L11.103 10l-4.308 4.308a.991.991 0 0 0 1.401 1.402l5.01-5.01a.99.99 0 0 0 0-1.4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFFDF6' d='M8.196 4.29a.991.991 0 0 0-1.401 1.402L11.103 10l-4.308 4.308a.991.991 0 0 0 1.401 1.402l5.01-5.01a.99.99 0 0 0 0-1.4z'/%3E%3C/svg%3E");
}

.icon--phone {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%235A9F4D' d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122L9.48 10.5a.678.678 0 0 1-.564-.37l-.461-1.03a.678.678 0 0 1-.122-.58l.122-1.756a.678.678 0 0 0-.122-.58L7.37 4.48a.678.678 0 0 1-.37-.564l-.122-1.756a.678.678 0 0 0-.58-.122L3.654 1.328z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%235A9F4D' d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122L9.48 10.5a.678.678 0 0 1-.564-.37l-.461-1.03a.678.678 0 0 1-.122-.58l.122-1.756a.678.678 0 0 0-.122-.58L7.37 4.48a.678.678 0 0 1-.37-.564l-.122-1.756a.678.678 0 0 0-.58-.122L3.654 1.328z'/%3E%3C/svg%3E");
}

.icon--mail {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%235A9F4D' d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.708 2.825L15 11.105V5.383zm-.034 6.875l-5.64-3.47L8 9.501l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.742zM1 11.105l4.708-2.897L1 5.383v5.722z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%235A9F4D' d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.708 2.825L15 11.105V5.383zm-.034 6.875l-5.64-3.47L8 9.501l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.742zM1 11.105l4.708-2.897L1 5.383v5.722z'/%3E%3C/svg%3E");
}


/* Menu List (メニューリスト - サービス紹介用) */
.menu-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	list-style: none;
}

/* .menu-list のメディアクエリは responsive.css に定義済み */

.menu-list__item {
	display: flex;
}

/* Card */
.card {
	background-color: var(--color-white);
	border-radius: 16px;
	padding: 40px;
	transition: all 0.3s cubic-bezier(0, 0.55, 0.45, 1);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	text-decoration: none;
	color: var(--color-text);
}

/* .card のメディアクエリは responsive.css に定義済み */

.card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.card--sm {
	min-height: 200px;
}

/* .card--sm のメディアクエリは responsive.css に定義済み */

.card__heading {
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 24px;
}

/* .card__heading のメディアクエリは responsive.css に定義済み */

.card__name {
	display: flex;
	align-items: center;
	gap: 8px;
}

.card__name__icon {
	background-color: var(--color-primary);
	width: 16px;
}

.card__name__text--container {
	overflow: hidden;
}

.card__name__text {
	display: block;
	font-family: NewCezannePro-DB, FOT-ニューセザンヌ Pro DB, sans-serif;
	font-size: 14px;
	font-weight: 600;
}

/* .card__name__text のメディアクエリは responsive.css に定義済み */

.card__name__text__inner {
	display: block;
}

/* Button */
.button {
	align-items: center;
	background-color: var(--color-text);
	border-radius: 60px;
	color: var(--color-white);
	display: inline-flex;
	font-size: 14px;
	gap: 8px;
	height: 60px;
	justify-content: center;
	padding: 0 32px;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0, 0.55, 0.45, 1);
}

/* .button のメディアクエリは responsive.css に定義済み */

.button:hover {
	opacity: 0.8;
}

.button__icon {
	background-color: var(--color-white);
	width: 16px;
}

/* .button__icon のメディアクエリは responsive.css に定義済み */

.button__text {
	display: block;
	line-height: 1.2;
	overflow: hidden;
	position: relative;
}

.button__text__inner {
	display: block;
}


/* Post List */
.post-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.post-list__item {
	border-bottom: 1px solid var(--color-border);
}

.post-list__item:last-child {
	border-bottom: none;
}

/* Post */
.post {
	display: block;
	padding: 24px 0;
	text-decoration: none;
	color: var(--color-text);
	transition: opacity 0.3s cubic-bezier(0, 0.55, 0.45, 1);
}

/* .post のメディアクエリは responsive.css に定義済み */

.post:hover {
	opacity: 0.7;
}

.post__info {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 12px;
}

/* .post__info のメディアクエリは responsive.css に定義済み */

.post__date {
	color: var(--color-text-80);
	font-family: NeueHaasUnicaW1G-Medium, sans-serif;
	font-size: 14px;
	white-space: nowrap;
}

/* .post__date のメディアクエリは responsive.css に定義済み */

.post__line {
	width: 1px;
	height: 12px;
	background-color: var(--color-border);
}

.post__category {
	color: var(--color-text-80);
	font-size: 14px;
	white-space: nowrap;
}

/* .post__category のメディアクエリは responsive.css に定義済み */

.post__content {
	display: flex;
}

.post__main {
	flex: 1;
}

.post__title {
	display: flex;
	align-items: center;
	gap: 8px;
}

.post__title__icon {
	background-color: var(--color-ui);
	width: 16px;
	flex-shrink: 0;
}

/* .post__title__icon のメディアクエリは responsive.css に定義済み */

.post__title__text {
	flex: 1;
	font-size: 16px;
	font-weight: 600;
}

/* .post__title__text のメディアクエリは responsive.css に定義済み */

/* Text Button */
.text-button {
	align-items: center;
	color: var(--color-text);
	display: flex;
	font-size: 14px;
	gap: 16px;
	text-decoration: none;
	transition: opacity 0.3s cubic-bezier(0, 0.55, 0.45, 1);
}

/* .text-button のメディアクエリは responsive.css に定義済み */

.text-button:hover {
	opacity: 0.7;
}

.text-button__text {
	display: block;
	line-height: 1.2;
	overflow: hidden;
	position: relative;
}

.text-button__text__inner {
	display: block;
}

.text-button__circle {
	align-items: center;
	aspect-ratio: 1;
	background-color: var(--color-ui);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	overflow: hidden;
	width: 44px;
}

/* .text-button__circle のメディアクエリは responsive.css に定義済み */

.text-button__circle__icon {
	background-color: var(--color-ui-invert);
	width: 16px;
}

/* .text-button__circle__icon のメディアクエリは responsive.css に定義済み */

/* Header Invert (ヘッダー反転 - お知らせセクション用) */
.header-invert {
	background-color: var(--color-primary);
}

/* Text Slider Section (横スライダーテキスト) */
.text-slider-section {
	overflow: hidden;
	padding: 0;
}

.text-slider {
	width: 100%;
	overflow: hidden;
}

.text-slider__track {
	display: flex;
	white-space: nowrap;
	animation: slideText 30s linear infinite;
	will-change: transform;
	width: fit-content;
}

.text-slider__text {
	font-family: 'Cormorant Garamond', Georgia, serif;
	transform: skew(-20deg);
	font-size: 10rem;
	font-weight: 700;
	letter-spacing: 0.1rem;
	color: var(--color-beige-alt);
	padding: 0 2rem;
	display: inline-block;
	flex-shrink: 0;
	line-height: 1.3;
}

@keyframes slideText {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-100% / 3));
	}
}

@media (max-width: 768px) {
	
	.text-slider__text {
		font-size: 5rem;
		padding: 0 1rem; /* 左右の間隔 */
	}
}

/* About Points Section (POINTセクション) */
.about-points {
	padding: 8.0rem 0 12.0rem; /* 80px 0 120px */
	background-color: var(--color-primary);
	border-radius: 4.0rem 4.0rem 0 0; /* 40px - 上部のみ角丸 */
	margin-top:0; /* 40px - 上のセクションとの間隔 */
	color: var(--color-text-white);
}

/* ABOUTセクション内のタイトルを白に */
.about-points .section-title__en,
.about-points .l-section-title__en {
	color: var(--color-text-white);
}

.about-points .section-title h2,
.about-points .l-section-title h2 {
	color: var(--color-text-white);
}

.about-points .section-title h2::after,
.about-points .l-section-title h2::after {
	background: linear-gradient(90deg, var(--color-white) 0%, rgba(255, 255, 255, 0.6) 100%);
	margin-left: auto;
	margin-right: auto;
}

/* .about-points のメディアクエリは responsive.css に定義済み */

.points-list {
	display: flex;
	flex-direction: column;
	gap: 8.0rem; /* 80px - 各POINTの間隔 */
}

/* .points-list のメディアクエリは responsive.css に定義済み */

/* Point Item (各POINT) */
.point-item {
	display: flex;
	gap: 4.0rem; /* 40px */
	align-items: center;
}

/* .point-item のメディアクエリは responsive.css に定義済み */

/* POINT番号 */
.point-item__number {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem; /* 2px - POINTと数字の間隔を狭める */
	margin-bottom: 1.6rem; /* 16px - タイトルとの間隔 */
}

.point-item__number__text {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.4rem; /* 14px */
	font-weight: 600;
	color: var(--color-text-white);
	letter-spacing: 0.1em;
}

.point-item__number__digit {
	font-size: 6.0rem; /* 60px */
	font-weight: 700;
	color: var(--color-text-white);
	line-height: 1;
}

/* .point-item__number__digit のメディアクエリは responsive.css に定義済み */

/* POINT画像 */
.point-item__image {
	width: 50%;
	flex-shrink: 0;
	aspect-ratio: 16 / 9;
	border-radius: 1.6rem; /* 16px */
	overflow: hidden;
	box-shadow: 0 0.4rem 2.0rem rgba(0, 0, 0, 0.1);
}

/* .point-item__image のメディアクエリは responsive.css に定義済み */

.point-item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* POINTコンテンツ */
.point-item__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1.6rem; /* 16px */
	position: relative; /* 番号の配置基準 */
}

.point-item__title {
	font-size: 2.4rem; /* 24px */
	font-weight: 700;
	color: var(--color-text-white);
	line-height: 1.6;
}

/* .point-item__title のメディアクエリは responsive.css に定義済み */

.point-item__text {
	font-size: 1.6rem; /* 16px */
	line-height: 1.8;
	color: var(--color-text-white);
}

/* .point-item__text のメディアクエリは responsive.css に定義済み */

/* POINT 2 (画像とコンテンツを左右反転) */
.point-item--reverse {
	flex-direction: row-reverse;
}

/* .point-item--reverse のメディアクエリは responsive.css に定義済み */

/* ABOUTページへのリンクボタン */
.about-points__button {
	margin-top: 8.0rem; /* 80px */
}

/* .about-points__button 内のボタンの背景を白に */
.about-points__button .button.button--primary {
	background-color: var(--color-white);
	color: var(--color-text);
}

.about-points__button .button.button--primary:hover {
	background-color: var(--color-beige);
	color: var(--color-text);
}

/* .about-points__button のメディアクエリは responsive.css に定義済み */

/* トップページのサービスセクション */
.section-services-top,
.l-section-services-top {
	padding: 0;
	background-color: var(--color-white);
	min-height: 80.0rem; /* 800px - 高さを確保 */
}

/* .section-services-top, .l-section-services-top のメディアクエリは responsive.css に定義済み */

.services-top-grid,
.services-top-u-grid {
	display: grid;
	grid-template-columns: 30% 70%;
	align-items: stretch;
	min-height: var(--min-height-80);
}

/* .services-top-grid, .services-top-u-grid のメディアクエリは responsive.css に定義済み */

/* 左側：見出し・説明・リンク */
.services-top-left {
	background-color: var(--color-white);
	display: flex;
	align-items: center;
	padding: 8.0rem 6.0rem; /* 80px 60px */
}

.services-top-left-inner {
	width: 100%;
	max-width: var(--max-width-50);
}

/* .services-top-left のメディアクエリは responsive.css に定義済み */

.services-top-description {
	font-size: 1.6rem; /* 16px */
	line-height: 1.8;
	color: var(--color-text);
}

/* .services-top-description のメディアクエリは responsive.css に定義済み */

/* 右側：背景画像 + グリッドコンテンツ */
.services-top-right {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 1.6rem 0 0 1.6rem; /* 左上 右上 右下 左下 - 左側のみ角丸 */
	overflow: hidden;
	min-height: var(--min-height-80);
	display: flex;
	flex-direction: column;
}

/* .services-top-right のメディアクエリは responsive.css に定義済み */

.services-top-right::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(40, 45, 39, 0.7); /* 暗めのオーバーレイ */
	z-index: 1;
}

.services-top-grid-content {
	position: relative;
	z-index: 2;
	padding: 4.0rem; /* 40px */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.4rem; /* 24px */
	color: var(--color-text-white);
	height: 100%;
	align-content: center;
}

@media (max-width: 1200px) {
	.services-top-grid-content {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* .services-top-grid-content のメディアクエリは responsive.css に定義済み */

.services-grid-item,
.services-u-grid-item {
	display: flex;
	flex-direction: column;
	gap: 1.6rem; /* 16px */
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 0.8rem; /* 8px */
	padding: 2.4rem; /* 24px */
	color: var(--color-text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-grid-item--link,
.services-u-grid-item--link {
	text-decoration: none;
	cursor: pointer;
	position: relative;
}

.services-grid-item--link:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.services-grid-item--link:hover .services-grid-item__arrow,
.services-u-grid-item--link:hover .services-u-grid-item__arrow {
	transform: translateX(4px);
	color: var(--color-primary);
}

/* .services-grid-item のメディアクエリは responsive.css に定義済み */

.services-grid-item__image,
.services-u-grid-item__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 0.4rem; /* 4px */
	overflow: hidden;
	margin-bottom: 0.8rem; /* 8px */
}

.services-grid-item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.services-grid-item__title,
.services-u-grid-item__title {
	font-size: 2.0rem; /* 20px */
	font-weight: 700;
	color: var(--color-text);
	margin: 0;
	padding-bottom: 1.2rem; /* 12px */
	border-bottom: 2px solid var(--color-primary);
}

.services-grid-item__text,
.services-u-grid-item__text {
	font-size: 1.4rem; /* 14px */
	line-height: 1.6;
	color: var(--color-text);
	margin: 0;
	flex: 1;
}

.services-grid-item__arrow,
.services-u-grid-item__arrow {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 1.6rem; /* 16px */
	padding-top: 1.6rem; /* 16px */
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	color: var(--color-text);
	font-size: 1.8rem; /* 18px */
	transition: transform 0.3s ease, color 0.3s ease;
}

.services-grid-item--link:hover .services-grid-item__arrow i {
	transform: translateX(4px);
}

/* .services-grid-item__title のメディアクエリは responsive.css に定義済み */

.services-grid-list {
	display: flex;
	flex-direction: column;
	gap: 1.2rem; /* 12px */
}

.services-grid-list__item {
	font-size: 1.4rem; /* 14px */
	line-height: 1.6;
	color: var(--color-text);
	padding-left: 1.6rem; /* 16px */
	position: relative;
}

.services-grid-list__item::before {
	content: "・";
	position: absolute;
	left: 0;
	color: var(--color-primary);
	font-weight: 700;
}

/* .services-grid-list__item のメディアクエリは responsive.css に定義済み */

/* スクロールアニメーション用クラス */
.scroll-fade-up {
	opacity: 0;
	transform: translateY(3.0rem); /* 30px */
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* サービス項目のアニメーション */
.services-grid-item--link,
.services-u-grid-item--link {
	opacity: 0;
	transform: translateY(3.0rem); /* 30px */
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.services-grid-item--link.is-visible,
.services-u-grid-item--link.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 文字アニメーション */
.char-animate {
	opacity: 0;
	transform: translateY(1.0rem); /* 10px */
	display: inline-block;
	animation: charFadeIn 0.5s ease forwards;
}

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

/* トップページのお知らせセクション */
.section-news-top {
	padding: 8.0rem 0 12.0rem; /* 80px 0 120px */
}

/* .section-news-top のメディアクエリは responsive.css に定義済み */

.news-top__button {
	margin-top: 8.0rem; /* 80px */
}

/* .news-top__button のメディアクエリは responsive.css に定義済み */

/* .button--primary は .btn に統合 */