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

	/* 色の定義 */
	--color-white: #fff;
	--color-porcelain: #fcfcfc;
	--color-fondant-pink: #fff4f7;
	--color-sugar-mist: #ffffff70;
	--color-frosted-glass: #ffffff8a;
	--color-pink-macaron: #fb749a;
	--color-guava-pink: #f38597;
	--color-cranberry: #d75877;
	--color-baked-rhubarb: #d66b85;
	--color-peach-compote: #eb809b;
	--color-violet-candy: #eb90c7;
	--color-blue-mallow: #8091d8;
	--color-raspberry-sauce: #ca5274;
	--color-plum-jam: #c3527c;
	--color-rose-tea: #dd728c;
	--color-antique-rose: #e6acba;
	--color-dried-fig: #623a44;
	--color-rich-strawberry-milk: #ffe5e7f5;
	--color-light-strawberry-milk: #ffe0e0b2;
	--color-apricot-jelly: #f6b4b238;
	--color-currant-syrup: #f92f2938;
	--color-cocoa-syrup: #4d2322ab;
	--color-acai-smoothie: #dac3d099;

	/* フォント */
	--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-weight-bold: 700;
	--font-weight-regular: 400;
	--font-weight-medium: 500;

	/* テキストカラー */
	--font-color-default: var(--color-dried-fig);
	--font-color-1: var(--color-white);
	--font-color-2: var(--color-cranberry);
	--font-color-3: var(--color-antique-rose);

	/*************************************
	 * カラーセット
	 * 色違いのページを作成する際は、以下項目を各ページのCSSにてオーバライド
 	 * 以下の項目は総合トップを基準に設定
	 *************************************/

	/* ■ 背景色 */
	--bg-color-1: var(--color-sugar-mist); /* ex) ヘッダーの背景色 */
	--bg-color-2: var(
		--color-apricot-jelly
	); /* ex) コンテンツ部分の透明以外の背景色 */

	--bg-color-3: var(
		--color-currant-syrup
	); /* ex) サブフッター(sub-footer)の背景色 */

	--bg-color-4: var(
		--color-cocoa-syrup
	); /* ex) 共通フッター(common-footer)の背景色 */

	/* ■ 背景色（主にmobile-nav：SPのメニューで使用) */
	--bg-color-5: var(
		--color-rich-strawberry-milk
	); /* ex) mobile-nav（メニュー）の主な背景色 */

	--bg-color-6: none; /* ex) mobile-navのトグル配下のリンクの背景色 */
	--bg-color-7: #e99396; /* ex) mobile-navのトグル配下のタイトルの背景色 */
	--bg-color-8: #8091d8cc; /* ex) 関係者へのリンクの背景色 */

	/* ■ 背景色（主にl-main__sidebar：サイドバーで使用） */
	--bg-color-9: #ffeeefcc; /* ex) コンテンツとサイドバーでセパレートしてるページのサイドバー背景色 */

	/* ■ ボーダーカラー（主にnewで使用） */
	--border-color-1: var(--color-antique-rose);

	/* ■ ボーダーカラー（主にmobile-nav：SPのメニューで使用） */
	--border-color-2: var(--color-white); /* ex) mobile-navのリンクの境界線 */
	--border-color-3: #f8dbdb; /* ex) mobile-navのトグル配下のリンクの境界線 */

	/* ■ フォントカラー（主にmega-menu：メガメニューで使用） */
	--font-color-4: var(--color-rose-tea);

	/* ■ ボタンカラー（主にheaderやmobile-navで使用） */
	--btn-color-1: var(
		--color-rose-tea
	); /* ex) ハンバーガーのアイコンやバツ（クローズ）ボタンの色 */

	/* ■ アイコンカラー（主にnewで使用） */
	--icon-bg-color-1: var(
		--color-peach-compote
	); /* ex) お知らせアイコンの背景色 */

	--icon-bg-color-2: #ffd9e2; /* ex) 更新情報アイコンの背景色 */

	/* ■ アイコンカラー（主にback-to-topで使用） */
	--icon-bg-color-3: #9c7880; /* ex) 画面右下の上に戻るボタンの背景色 */

	/* ■ リンクカラー */
	--link-hover-color: var(
		--color-pink-macaron
	); /* ex) mega-menuやmobile-navのリンクのhover時 */

	--link-default-color: var(
		--color-raspberry-sauce
	); /* ex) mega-menuやmobile-navのリンク */

	--link-global-color: var(--color-raspberry-sauce); /* ex) headerのメニュー */
}

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

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

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

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

a {
	color: var(--font-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;

	/* 関係者に合わせて修正(オーバライド) */
	padding: 0;
	background-color: var(--bg-color-1);
	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;
	align-items: stretch;
	justify-content: flex-start;
	max-width: 1440px;
	height: 100%;
	padding: 0 16px;
	overflow: visible;
}

.header__container--shidousha {
	/* 関係者のリンクがある場合 */
	padding-right: 0;
}

/* ヘッダーのロゴ */
.header__logo,
.mobile-nav__logo {
	/* 関係者に合わせて修正(オーバライド) 
	padding: 20px 0;
	margin-right: 40px; */
	display: flex;
	align-items: center;
	max-width: 80%;
}

/* 関係者へのリンク */
.link-shidousha {
	margin-left: 20px;
	overflow: hidden;
	background: rgb(128 145 216 / 81%);
	transition: background-color 0.3s;
}

.link-shidousha :hover {
	background-color: rgb(144 165 255 / 81%);
}

.link-shidousha a {
	display: flex;
	flex-flow: row nowrap;
	gap: 6px;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 24px 12px 24px 16px;
}

.link-shidousha span {
	font-family: var(--font-family-sub1);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	color: var(--color-white);
	white-space: nowrap;
}

.link-shidousha img {
	width: 16px;
	height: auto;
}

/* ヘッダーのナビゲーション (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(--link-global-color);
	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 #dac3d099;
	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(--font-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%;
	cursor: pointer;
	background-color: #ffe0e0b2;
	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;
}

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

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

/* ヘッダーエリア */
.mobile-nav__header {
	position: sticky;
	top: 0;
	right: 0;

	/* position: absolute; */
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 98px;
	padding: 20px;

	/* ヘッダーの関係者へのリンクに伴い修正(オーバライド) */
	padding: 0 20px;
	cursor: pointer;
	background: transparent;
	background-color: var(--bg-color-5);
	border: none;
}

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

.mobile-nav__close::before,
.mobile-nav__close::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px; /* 線の長さ（ボタン幅に合わせて調整） */
	height: 4px; /* 線の太さ */
	content: '';
	background-color: var(--btn-color-1);
	transition: background-color 0.2s ease; /* ホバー時のアニメーション用 */
}

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

/* 2本目の線を-45度回転 */
.mobile-nav__close::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-1);
	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-1);
	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 {
	display: none;
	transform: translateY(8px) rotate(45deg);
}

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

/* 5. メガメニュー (PC) */
.mega-menu__icon {
	position: absolute;

	/* background-color: #8091d8; */
	display: none;
}

.triangle-down {
	width: 0;
	height: 0;

	/* 上のボーダーに色を付ける（三角形の高さと色を決定） */
	border-top: 12px solid #dab3c8; /* 画像に近いピンク色 */
	border-right: 10px solid transparent;

	/* 左右のボーダーを透明にする（底辺の幅を決定） */
	border-left: 10px solid transparent;
}

.global-nav__item--has-megamenu {
	position: static;
}

.global-nav__item--has-megamenu a {
	color: var(--link-global-color);
	white-space: nowrap;
}

.header > .l-container--wide {
	position: static;
	overflow: visible;
}

.mega-menu {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	display: none;
	width: 100%;
	padding: 30px 0;
	background-color: rgb(255 255 255 / 96%);
	border-top: 1px solid #eee;
	box-shadow: 0 2.03px 3.044px 0 rgb(0 0 0 / 8%);
}

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

.global-nav__item--has-megamenu:hover > .mega-menu__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 37px;
}

.mega-menu__inner-container {
	padding-top: 40px;
	padding-bottom: 48px;
	margin: 0 auto;
}

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

.mega-menu__title {
	font-family: var(--font-family-sub1);
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	color: var(--font-color-4);
}

.mega-menu__row {
	display: flex;
	flex: 1;
	flex-direction: row;
	align-items: center;
}

.mega-menu__row .mega-menu__category-title {
	width: 128px;
	padding: 10px 24px 10px 0;
	font-family: var(--font-family-sub1);
	font-size: 16px;
	font-weight: var(--font-weight-bold);
	color: var(--font-color-4);
	text-align: right;
}

.mega-menu__row ul {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 12px 24px;
	padding-left: 16px;
	list-style: none;
	border-left: 3px solid var(--font-color-4);
}

.mega-menu__row li a {
	display: inline-flex;
	align-items: center;
	padding: 5px 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--link-default-color);
	text-decoration: none;
	border-radius: 0;
}

.mega-menu__row li a::before {
	display: inline-block;
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	content: '';
	border-top: 1.5px solid currentcolor;
	border-right: 1.5px solid currentcolor;
	transform: rotate(45deg);
}

.mega-menu__row li a:hover {
	color: var(--link-hover-color);
	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(--bg-color-5);
	opacity: 0.95;
	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(--font-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-1);
	border: none;
	transition: background-color 0.3s;
}

.mobile-nav__search-submit:hover {
	background-color: #f5f5f5;
}

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

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

.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(--link-default-color);
}

/* アコーディオンメニュー */
.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;
	color: var(--link-default-color);
	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 {
	background-color: var(--bg-color-6);
	border-bottom: 1px solid var(--border-color-3);
}

.mobile-nav__submenu li.mobile-nav__submenu-heading {
	padding: 16px 10px 10px 24px;
	margin-top: 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-white);
	background-color: var(--bg-color-7);
	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: 0;
	background-color: var(--bg-color-8);
}

.mobile-nav__list li.mobile-nav__item--stakeholder > a:hover {
	background-color: rgb(144 165 255 / 81%);
}

.mobile-nav__list li.mobile-nav__item--stakeholder > .mobile-nav__toggle {
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
}

.mobile-nav__list
	li.mobile-nav__item--stakeholder
	> .mobile-nav__toggle::after {
	color: var(--btn-color-sub2);
}

.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: var(--font-weight-regular);
	color: var(--link-default-color);
}

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

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

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

/* * =========================================
 * 新着情報 / お知らせ
 * =========================================
 */
.news {
	position: relative;
}

/* 背景を上50px分だけ削除するための処理 */
.news::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	content: '';

	/* 背景のスタイル */
	background-color: var(--bg-color-2);
	mix-blend-mode: multiply;

	/* 上50pxを削除 */
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent 50px,
		black 50px
	);
}

.news > * {
	position: relative;
	z-index: 1;
}

.news__container {
	display: flex;
	justify-content: center;
	padding-bottom: 5px;
	margin-top: -50px;
	overflow: visible;
}

.news__inner {
	width: 100%;
	padding: 24px 40px;
	background-color: var(--color-porcelain);
	border: 1px solid #eaeaea;
	border-radius: 24px;
	box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 15%);

	/* max-width: 1000px; */
}

.news__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: 8px;
	margin-bottom: 16px;
	border-bottom: 3px solid var(--border-color-1);
}

.news__title {
	font-family: var(--font-family-sub1);
	font-size: 24px;
	font-weight: var(--font-weight-medium);
	font-feature-settings:
		'halt' on,
		'pwid' on;
	letter-spacing: 0.96px;
}

.news__list {
	padding-bottom: 1em;
	margin-bottom: 1em;
	list-style: none;
	border-bottom: 2px solid var(--border-color-1);
}

.news__item {
	display: flex;
	gap: 16px;
	align-items: baseline;
	padding: 12px 0;
	font-size: 16px;
	border-bottom: 1px dashed var(--border-color-1);
}

.news__item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.news__item:first-child {
	padding-top: 0;
}

.news__item time {
	flex-shrink: 0;
	width: 80px;
	margin-left: 1em;
	font-family: var(--font-family-sub2);
	font-weight: var(--font-weight-medium);
}

.news__item .category {
	flex-shrink: 0;
	padding: 2px 16px;
	font-size: 14px;
	font-weight: var(--font-weight-bold);
	white-space: nowrap;
	border-radius: 1em;
}

.news__item .category.category--news {
	color: var(--font-color-1);
	background-color: var(--icon-bg-color-1);
}

.news__item .category.category--update {
	color: var(--color-cranberry);
	background-color: var(--icon-bg-color-2);
}

.news__item a {
	font-weight: var(--font-weight-medium);
	line-height: 140%;
	letter-spacing: 0.64px;
}

.news__more a {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	padding-bottom: 2px;
	font-size: 15px;
	letter-spacing: 0.6px;
	transition: border-color 0.3s;
}

/* * =========================================
 * 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%;
}

/* * =========================================
 * サブフッター
 * =========================================
 */
.sub-footer {
	position: relative;
	padding: 80px 0 54px;
}

.sub-footer__bg {
	pointer-events: none;
	background-color: var(--bg-color-3);
}

.sub-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: center;
	margin-bottom: 42px;
	list-style: none;
}

.sub-footer__list a {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	color: var(--link-default-color);
}

.sub-footer__list img {
	margin-left: 5px;
}

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

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

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

.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: var(--font-color-1);
	letter-spacing: 0.64px;
}

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

.common-footer__logo {
	margin: 0;
}

.common-footer__logo a {
	font-family: var(--font-family-sub2);
	font-size: 16px;
	font-weight: var(--font-weight-bold);
	line-height: 24px;
}

.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(--icon-bg-color-3);
	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__container--shidousha {
		padding-right: 20px;
	}

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

	/* ナビゲーション */
	.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-top: 64px;
		padding-bottom: 24px;
	}

	.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;
	}

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

	.sub-footer__list {
		flex-wrap: wrap;
		gap: 24px;
		margin-bottom: 0;
	}

	.sub-footer__list li {
		width: 100%;
	}

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