/* * =========================================
■ 基本スタイル
 * =========================================
 */

/* * =========================================
 * Custom Propertie
 * =========================================
 */
:root {
	/* ヘッダーの高さ（jsで動的に設定される） */
	--header-height: 0px;

	/* 色の定義 */

	/* --- Translucent Colors (Opacityあり) --- */
	--color-cassis-syrup: #9d465fab; /* rgba(157, 70, 95, 0.67)(Opacity ~67%) */
	--color-grapefruit-jelly: #f56a7d38; /* rgba(245, 106, 125, 0.22)(Opacity ~22%) */
	--color-sakura-mist: #ffc5cf38; /* rgba(255, 197, 207, 0.22)(Opacity ~22%) */
	--color-rose-quartz: #f6dfdfb5; /* (Opacity ~71%) */
	--color-strawberry-latte: #f6d9d99e; /* (Opacity ~62%) */

	/* --- Solid Colors (不透明) --- */
	--color-antique-berry: #914659;
	--color-peach-tea: #ebbabc;
	--color-raspberry-red: #d04c6e;
	--color-dusty-rose: #e58e97;
	--color-blush-coral: #e46277;
	--color-dried-fig: #623a44;
	--color-white: #fff;
	--color-pink-macaron: #fb749a;
	--color-sakura-petal: #ffe8ef;

	/* 背景色 */
	--bg-color-1: var(--color-sakura-mist);
	--bg-color-2: var(--color-grapefruit-jelly);
	--bg-color-3: var(--color-cassis-syrup);

	/* テキストカラー */
	--text-color-default: var(--color-dried-fig);
	--text-color-1: var(--color-white);
	--text-color-2: var(--color-raspberry-red);
	--text-color-3: var(--color-dusty-rose);
	--text-color-4: var(--color-antique-berry);
	--text-color-5: var(--color-blush-coral);

	/* ボタンカラー */
	--btn-color: var(--color-antique-berry);

	/* フォント */
	--font-family-main: 'IBM Plex Sans JP', sans-serif;
	--font-family-sub1: 'Zen Maru Gothic', serif;
	--font-family-sub2: 'Noto Sans JP', sans-serif;
	--font-family-sub3: 'Shippori Mincho', serif;
	--font-weight-bold: 700;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
}

/* * =========================================
 * 基本設定
 * =========================================
 */
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	width: 100%;
	font-family: var(--font-family-main);
	color: var(--text-color-default);
	background-image: url('../img/common/bg_white.jpg');
}

section {
	position: relative;
	width: 100%;
}

.l-main > section,
.l-footer > section {
	min-width: 980px;
}

a {
	color: var(--text-color-default);
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4 {
	padding: 0;
	margin: 0;
	font-size: inherit; /* 親要素の文字サイズを継承 */
	font-style: normal;
	font-weight: normal; /* 太字を解除 */
}

/* * =========================================
 * ヘッダー
 * =========================================
 */
.header {
	height: 98px;
	padding: 20px 0;
	background-color: #ffffff70;
	box-shadow: 0 2.03px 3.044px 0 rgb(0 0 0 / 8%);
	transition:
		background-color 0.3s,
		box-shadow 0.3s,
		border-bottom 0.3s;
}

/* スクロール時のヘッダースタイル */
.header.scrolled {
	background-color: #fffffff0;
	border-bottom: 1px solid #eee;
	box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
}

.header__container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	max-width: 1440px;
	height: 100%;
	padding: 0 16px;
	overflow: visible;
}

/* ヘッダーのロゴ */
.header__logo,
.mobile-nav__logo {
	max-width: 80%; /* スマホ対応 */
}

.header__logo img,
.mobile-nav__logo img {
	width: 100%;
	min-width: 240px;
	max-width: 328px;
	padding-left: 16px;
}

/* ヘッダーのナビゲーション (PC) */
.global-nav {
	display: flex;
	gap: 24px;
	align-items: center;
	margin-left: auto;
}

.global-nav__list {
	display: flex;
	gap: 6px;
	padding-top: 6px;
	list-style: none;
}

.global-nav__item {
	position: relative;
}

.global-nav__item a {
	padding: 10px 12px;
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	color: var(--text-color-5);
	white-space: nowrap;
	border-radius: 8px;
	transition:
		background-color 0.3s,
		color 0.3s;
}

/* ヘッダーのPC用検索フォーム */
.global-nav__search-form {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 240px;
	height: 40px;
	overflow: hidden;
	background: rgb(255 255 255 / 54%);
	border: 1px solid var(--color-peach-tea);
	border-radius: 20px;
}

.global-nav__search-input {
	width: 192px;
	padding: 0 6px 0 12px;
	font-family: var(--font-family-sub2);
	font-size: 14px;
	color: var(--text-color-default);
	background-color: transparent;
	border: none;
	outline: none;
}

.global-nav__search-input::placeholder {
	color: var(--text-color-3);
}

.global-nav__search-input::-webkit-search-cancel-button {
	display: none;
	appearance: none;
}

.global-nav__search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 100%;
	color: #a26aaa;
	cursor: pointer;
	background-color: #f6dfdfb5;
	border: none;
	transition: background-color 0.3s;
}

.global-nav__search-submit:hover {
	background-color: #fde0e8;
}

.global-nav__search-submit .material-symbols-outlined {
	width: 21px;
	height: 21px;
}

.material-symbols-outlined img {
	width: auto;
}

/* SNS */
.global-nav__sns {
	width: 170px;
	margin-left: 20px;
}

/* * =========================================
 * スマホ用 ハンバーガーメニュー
 * =========================================
 */

/* ヘッダーエリア */
.mobile-nav__header {
	/* position: absolute; */
	position: sticky;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 98px;
	padding: 20px;
	cursor: pointer;
	background: transparent;
	background-color: var(--color-sakura-petal);
	border: none;
}

/* クローズボタン */
.close-button {
	position: relative; /* 擬似要素の基準点 */
	display: block;
	width: 40px; /* ボタンのクリック領域の幅 */
	height: 40px; /* ボタンのクリック領域の高さ */
	padding: 0;
	appearance: none; /* デフォルトスタイルリセット */
	cursor: pointer; /* ホバー時に指カーソルにする */
	background: transparent; /* 背景なし */
	border: none;
}

.close-button::before,
.close-button::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px; /* 線の長さ（ボタン幅に合わせて調整） */
	height: 4px; /* 線の太さ */
	content: '';
	background-color: var(--btn-color); /* 画像の「×」の色に近い濃いピンク */
	border-radius: 2px; /* 線の端を少し丸くする */
	transition: background-color 0.2s ease; /* ホバー時のアニメーション用 */
}

/* 1本目の線を45度回転 */
.close-button::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

/* 2本目の線を-45度回転 */
.close-button::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.global-nav__hamburger {
	z-index: 1001;
	display: none;
	padding: 10px;
	cursor: pointer;
	background: transparent;
	border: none;
}

.global-nav__hamburger-icon {
	position: relative;
	display: block;
	width: 34px;
	height: 4px;
	background-color: var(--btn-color);
	transition: background-color 0.3s;
}

.global-nav__hamburger-icon::before,
.global-nav__hamburger-icon::after {
	position: absolute;
	left: 0;
	display: block;
	width: 34px;
	height: 4px;
	content: '';
	background-color: var(--btn-color);
	transition: transform 0.3s;
}

.global-nav__hamburger-icon::before {
	top: -12px;
}

.global-nav__hamburger-icon::after {
	bottom: -12px;
}

/* ハンバーガー (Open時) */
.is-open .global-nav__hamburger-icon {
	background-color: transparent;
}

.is-open .global-nav__hamburger-icon::before {
	transform: translateY(8px) rotate(45deg);
}

.is-open .global-nav__hamburger-icon::after {
	transform: translateY(-8px) rotate(-45deg);
}

/* 5. メガメニュー (PC) */
.mega-menu {
	position: absolute;
	top: 100%;
	left: calc(50% - 50vw);
	z-index: 1001;
	display: none;
	width: 100vw;
	padding: 30px 0;
	background-color: #fff;
	border-top: 1px solid #eee;
	box-shadow: none;
}

.global-nav__item--has-megamenu:hover > .mega-menu {
	display: block;
}

.mega-menu__inner-container {
	width: 100%;
	max-width: 1100px;
	padding: 0 20px;
	margin: 0 auto;
}

.mega-menu__content {
	display: flex;
	gap: 40px;
}

.mega-menu__column {
	flex: 1;
}

.mega-menu__column h4 {
	padding-bottom: 8px;
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 700;
	color: #0d9488;
	border-bottom: 2px solid #0d9488;
}

.mega-menu__column ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
}

.mega-menu__column li a {
	display: inline;
	padding: 5px 0;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	border-radius: 0;
}

.mega-menu__column li a:hover {
	color: #0d9488;
	text-decoration: underline;
	background-color: transparent;
}

/* 6. モバイルナビゲーション (SP) */
.mobile-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	display: none;
	width: 100%;
	height: 100%;
	padding-bottom: 50px;
	overflow-y: auto;
	background-color: var(--color-sakura-petal);
	transition:
		transform 0.3s ease-in-out,
		display 0s 0.3s;
	transform: translateX(100%);
}

.mobile-nav.is-open-transition {
	display: block;
	transition: transform 0.3s ease-in-out;
	transform: translateX(0);
}

/* スクロール禁止 */
body.is-open {
	overflow: hidden;
}

/* モバイルメニュー内検索 */
.mobile-nav__search-form {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-nav__search-form form {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 80%;
	min-width: 240px;
	max-width: 800px;
	height: 40px;
	margin: 20px 0;
	overflow: hidden;
	background: var(--color-white);
	border-radius: 20px;
}

.mobile-nav__search-input {
	width: 92%;
	padding: 0 6px 0 12px;
	font-family: var(--font-family-sub2);
	font-size: 16px;
	background-color: transparent;
	border: none;
	outline: none;
}

.mobile-nav__search-input::-webkit-search-cancel-button {
	display: none;
	appearance: none;
}

.mobile-nav__search-input::placeholder {
	color: var(--text-color-3);
}

.mobile-nav__search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 100%;
	padding: 2px 0 0;
	cursor: pointer;
	background-color: var(--btn-color);
	border: none;
	transition: background-color 0.3s;
}

.mobile-nav__list {
	list-style: none;
}

.mobile-nav__list li {
	border-bottom: 1px solid var(--color-white);
}

.mobile-nav__list li:hover {
	background-color: #ffffffe0;
}

.mobile-nav__list a {
	display: block;
	padding: 20px 24px;
	font-size: 16px;
	font-weight: 500;
	color: var(--text-color-5);
}

/* アコーディオンメニュー */
.mobile-nav__item--has-submenu > .mobile-nav__toggle {
	position: relative;
}

.mobile-nav__toggle::after {
	position: absolute;
	top: 50%;
	right: 15px;
	font-size: 24px;
	font-weight: 500;
	content: '+';
	transition: transform 0.3s;
	transform: translateY(-50%);
}

.mobile-nav__item--is-open > .mobile-nav__toggle::after {
	transform: translateY(-50%) rotate(45deg);
}

/* サブメニュー */
.mobile-nav__submenu {
	display: none;
	padding-left: 0;
	overflow: hidden;
	list-style: none;
	background-color: #f5f5f5;
}

.mobile-nav__submenu li {
	border-bottom: 1px solid #e0e0e0;
}

.mobile-nav__submenu li.mobile-nav__submenu-heading {
	padding: 16px 10px 10px 24px;
	margin-top: 10px;
	font-size: 15px;
	font-weight: 700;
	color: #0d9488;
	background-color: #f0f0f0;
	border-top: 1px solid #e0e0e0;
}

.mobile-nav__submenu li.mobile-nav__submenu-heading:first-child {
	margin-top: 0;
	border-top: none;
}

.mobile-nav__submenu li:last-child {
	border-bottom: none;
}

.mobile-nav__submenu a {
	padding: 14px 10px 14px 24px;
	font-size: 15px;
	font-weight: 400;
}

/* 関係者リンク (SP) */
.mobile-nav__list li.mobile-nav__item--stakeholder {
	margin-top: 10px;
	background-color: #f0f0f0;
	border-top: 1px solid #ddd;
}

.mobile-nav__list li.mobile-nav__item--stakeholder > .mobile-nav__toggle {
	font-weight: 700;
}

.mobile-nav__sublist {
	padding: 32px 0;
	margin-top: 20px;
	list-style: none;
}

.mobile-nav__sublist li {
	margin-bottom: 16px;
}

.mobile-nav__sublist li:last-child {
	border-bottom: none;
}

.mobile-nav__sublist a {
	padding: 0 24px;
	font-size: 15px;
	font-weight: 400;
	color: var(--text-color-5);
}

.mobile-nav__sublist a:hover {
	color: var(--color-pink-macaron);
}

/* バナー */
.mobile-nav__banner {
	margin-top: 48px;
	list-style: none;
}

.mobile-nav__banner li {
	padding: 0 64px;
	margin-top: 24px;
}

.mobile-nav__banner a {
	width: 100%;
}

.mobile-nav__banner img {
	width: 100%;
}

/* SNSボタン (SP) */
.mobile-nav__sns {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-nav__sns > .mobile-nav__sns-inner {
	width: 210px;
}

/* * =========================================
 * SNSのアイコン
 * =========================================
 */
.sns-icon,
.sns-icon--bw {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.sns-icon > a {
	max-width: 28%;
}

.sns-icon--bw > a {
	max-width: 22%;
}

/* * =========================================
 * フッター
 * =========================================
 */
.common-footer {
	position: relative;
	padding-top: 30px;
	color: #fff;
}

.common-footer a {
	color: #fff;
}

.common-footer__bg {
	background-color: var(--bg-color-3);
}

.common-footer__nav {
	padding: 32px 0;
}

.common-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	justify-content: center;
	list-style: none;
}

.common-footer__list a {
	font-size: 16px;
	line-height: 140%;
	color: #fff;
	letter-spacing: 0.64px;
}

.common-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	padding: 40px 0;
}

.common-footer__logo {
	font-family: var(--font-family-sub2);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	font-feature-settings:
		'halt' on,
		'pwid' on;
	line-height: 160%;
	text-align: center;
	letter-spacing: 0.56px;
}

.common-footer__logo p:first-child {
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	font-feature-settings:
		'halt' on,
		'pwid' on;
	line-height: 140%; /* 22.4px */
	letter-spacing: 0.64px;
}

.common-footer__sns {
	width: 150px;
	margin-bottom: 24px;
}

.common-footer__copyright {
	font-family: var(--font-family-sub2);
	font-size: 14px;
	font-weight: 200;
	line-height: 150%;
	text-align: center;
}

/* * =========================================
 * フローティングボタン
 * =========================================
 */
.back-to-top {
	position: fixed;
	right: 20px; /* 右端からの距離 */
	bottom: 20px; /* 下端からの距離 */
	z-index: 999; /* 最前面に表示 */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px; /* ボタンの幅 */
	height: 60px; /* ボタンの高さ */
	text-decoration: none;
	visibility: hidden; /* 最初は操作不可 */
	background-color: var(--color-antique-berry);
	border-radius: 50%; /* 正円にする */
	box-shadow: 0 2px 10px rgb(0 0 0 / 10%); /* 軽い影 */
	opacity: 0; /* 最初は隠しておく */
	transition:
		opacity 0.3s,
		visibility 0.3s,
		transform 0.3s;
}

/* ホバー時の挙動 */
.back-to-top:hover {
	opacity: 0.9;
	transform: translateY(-5px); /* 少し浮き上がる */
}

/* 表示クラスがついた時の状態 */
.back-to-top.is-active {
	visibility: visible;
	opacity: 1;
}

/* * =========================================
 * レスポンシブ対応 (767px以下)
 * =========================================
 */
@media screen and (width <= 767px) {
	.l-main > section,
	.l-footer > section {
		min-width: auto;
	}

	/* ヘッダー */
	.header__container {
		flex-wrap: nowrap;
		gap: 10px;
		justify-content: space-between;
	}

	/* ロゴ */
	.header__logo,
	.mobile-nav__logo {
		flex-shrink: 0;
		width: auto;
		max-width: 80%;
		margin-right: 0;
		text-align: left;
	}

	.header__logo img,
	.mobile-nav__logo img {
		padding-left: 0;
	}

	/* ナビゲーション */
	.global-nav {
		flex-grow: 0;
		gap: 10px;
		justify-content: flex-end;
		width: auto;
		margin-left: 0;
	}

	.global-nav__list {
		display: none;
		margin-right: 0;
	}

	.global-nav__stakeholder {
		display: none;
	}

	.global-nav__search-form {
		display: none;
	} /* ヘッダー検索非表示 */
	.global-nav__sns {
		display: none;
	} /* ヘッダー検索非表示 */
	.global-nav__hamburger {
		display: block;
	} /* ハンバーガー表示 */

	/* メガメニュー無効化 */
	.mega-menu {
		display: none !important;
	}

	/* 新着情報 */
	.news .container {
		padding: 0 24px;
	}

	.news__header {
		flex-flow: column wrap;
		gap: 10px;
	}

	.news__item {
		flex-wrap: wrap;
	}

	.news__item p {
		order: 3;
		width: 100%;
		padding-left: 0;
	}

	.news__item time {
		margin-left: 0;
	}

	/* フッター */
	.common-footer {
		padding: 64px 0;
	}

	.common-footer__bottom {
		flex-direction: column;
		gap: 16px;
		padding: 0 0 32px;
		text-align: center;
	}

	.common-footer__nav {
		padding: 32px 0;
	}

	.common-footer__list li {
		width: 100%;
		text-align: center;
	}

	.common-footer__sns {
		margin-bottom: 24px;
	}

	.common-footer__copyright {
		font-size: 13px;
	}

	/* フローティングボタン */
	.back-to-top {
		right: 15px;
		bottom: 15px;
		width: 50px;
		height: 50px;
	}
}