@charset "UTF-8";
/* ========================================================================
   common.css
   - ベーススタイル
   - 共通レイアウト変数（幅、余白、ブレイクポイント）
   - サイドバー、ヘッダー、ドロワー、CTA(DOWNLOAD/CONTACT)、フッター
   ======================================================================== */

/* ---------- カラー / フォント変数 ---------- */
:root {
	--color-corp: #009d8e;       /* コーポレートカラー */
	--color-accent: #d9e1ec;     /* アクセントカラー1 */
	--color-cta: #2660ac;        /* CTAカラー */
	--color-text: #333;
	--color-bg: #FFF;
	--font-en: 'Roboto', Arial, Helvetica, sans-serif;
	--font-ja: '游ゴシック', 'Yu Gothic', YuGothic, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	--font-base: var(--font-en), var(--font-ja);
}

/* ---------- リセット補完 ---------- */
* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

html {
	color: var(--color-text);
}

body {
	width: 100%;
	font-family: var(--font-base);
	font-weight: 400;
	-webkit-text-size-adjust: 100%;
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
	background-color: var(--color-bg);
	position: relative;
}

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

p {
	color: var(--color-text);
	line-height: 1.8;
}

img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* ---------- レイアウト変数 ---------- */
/* 左サイドバー幅。SPでは0。 */
:root {
	--sidebar-width: 165px;
}
@media screen and (max-width: 1199px){
	:root { --sidebar-width: 120px; }
}
@media screen and (max-width: 959px){
	:root { --sidebar-width: 80px; }
}
@media screen and (max-width: 767px){
	:root { --sidebar-width: 0px; }
}

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

/* メインコンテンツ領域（サイドバー右側）。
   .afterMain は <main> の外にある領域（footer等）にも同じオフセットを適用 */
.main,
.afterMain {
	width: calc(100% - var(--sidebar-width));
	margin-left: var(--sidebar-width);
}
.main {
	overflow: hidden;
}
@media screen and (max-width: 767px){
	.main,
	.afterMain {
		width: 100%;
		margin-left: 0;
	}
}

/* セクション間余白：最低150px、SPは80px */
.container {
	padding: 150px 0;
}
@media screen and (max-width: 767px){
	.container {
		padding: 80px 0;
	}
}

/* wrapper：1200px、SPで100% - 40px */
.wrapper {
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
}
@media screen and (max-width: 767px){
	.wrapper {
		width: calc(100% - 40px);
	}
}

/* wrapper_small：960px */
.wrapper_small {
	width: 95%;
	max-width: 960px;
	margin: 0 auto;
}
@media screen and (max-width: 767px){
	.wrapper_small {
		width: calc(100% - 40px);
	}
}

.pc {
	display: block;
}
.sp {
	display: none;
}
@media screen and (max-width: 767px){
	.pc { display: none; }
	.sp { display: block; }
}

/* 見出し h2：Roboto 46px + 游ゴシック 21px、コーポレートカラー */
.h2 {
	color: var(--color-corp);
	margin-bottom: 60px;
}
.h2__en {
	display: block;
	font-family: var(--font-en);
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
}
.h2__ja {
	display: block;
	font-family: var(--font-ja);
	font-size: 21px;
	font-weight: 700;
	margin-top: 17px;
}
@media screen and (max-width: 767px){
	.h2 { margin-bottom: 30px; }
	.h2__en { font-size: 28px; }
	.h2__ja { font-size: 18px; margin-top: 8px; }
}

/* 共通ボタン .btn：290×47、透明背景、コーポレートカラー1pxボーダー、完全角丸、16px */
.btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 290px;
	height: 45px;
	background-color: transparent;
	border: 1.5px solid var(--color-corp);
	border-radius: 999px;
	color: var(--color-corp);
	font-family: var(--font-base);
	font-size: 16px;
	font-weight: 700;
	transition: .25s;
	margin: 0 auto;
}
.btn:hover {
	background-color: var(--color-corp);
	color: #FFF;
}
/* 反転バリアント（背景色のあるエリア用） */
.btn--invert {
	border-color: #FFF;
	border-width: 1.5px;
	color: #FFF;
}
.btn--invert:hover {
	background-color: #FFF;
	color: var(--color-corp);
}
@media screen and (max-width: 767px){
	.btn {
		width: 200px;
		height: 40px;
		font-size: 14px;
	}
}

/* ============================================================
   左サイドバー（白いバー）
   - 1200+: 165px / 1199-960: 120px / 959-768: 80px / 767-: 非表示
   - ドロワーボタン上部固定 / 会社アイコン縦中央固定
   - SCROLL DOWN / PAGE TOP は body 内で絶対配置
   ============================================================ */

.sidebar {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--sidebar-width);
	background-color: #FFF;
	border-right: 1px solid #999;
	z-index: 9000;
}
@media screen and (max-width: 767px){
	.sidebar {
		display: none;
	}
}

/* 会社アイコン（縦中央固定）。サイドバー幅の65%。PNGが円形を内包 */
.sidebar__icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 65%;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .2s;
}
.sidebar__icon:hover {
	opacity: .85;
}
.sidebar__icon img {
	width: 100%;
	height: auto;
	display: block;
}

/* SCROLL DOWN：左に矢印（SVG）、右にSCROLL DOWN文字（90度回転） */
.scrollDown {
	position: absolute;
	left: 0;
	width: var(--sidebar-width);
	top: calc(100vh - 30px);
	transform: translateY(-100%);
	z-index: 9100;
	pointer-events: none;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 6px;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
/* ページトップから50pxスクロールで消える */
body.is-scrolled .scrollDown {
	opacity: 0;
	visibility: hidden;
}

.scrollDown__arrow {
	width: 22px;
	height: 181px;
	display: block;
	flex-shrink: 0;
	overflow: visible;
	animation: scrollDownBob 2s ease-in-out infinite;
}
/* 矢印だけが10px上下にゆらゆら（テキストは固定） */
@keyframes scrollDownBob {
	0%, 100% { transform: translateY(-5px); }
	50%      { transform: translateY(5px); }
}

.scrollDown__txt-wrap {
	position: relative;
	width: 14px;
	height: 100px;
	flex-shrink: 0;
}
.scrollDown__txt {
	position: absolute;
	left: 4px;
	top: 15px;
	font-family: var(--font-en);
	font-size: 16px;
	font-weight: 500;
	color: var(--color-corp);
	white-space: nowrap;
	transform: rotate(90deg);
	transform-origin: 0 0;
}

@media screen and (max-width: 767px){
	.scrollDown { display: none; }
}

/* PAGE TOP（ページ下端から200px、サイドバー内・絶対配置） */
.pageTop {
	position: absolute;
	left: 0;
	bottom: 100px;
	width: var(--sidebar-width);
	z-index: 9100;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 6px;
	text-decoration: none;
}
/* 矢印（上向き）：SCROLL DOWNと同形・ゆらゆらアニメーション */
.pageTop__arrow {
	width: 22px;
	height: 181px;
	display: block;
	flex-shrink: 0;
	overflow: visible;
	animation: pageTopBob 2s ease-in-out infinite;
}
@keyframes pageTopBob {
	0%, 100% { transform: translateY(5px); }
	50%      { transform: translateY(-5px); }
}
.pageTop__txt-wrap {
	position: relative;
	width: 14px;
	height: 100px;
	flex-shrink: 0;
}
.pageTop__txt {
	position: absolute;
	left: 4px;
	top: 65px;
	font-family: var(--font-en);
	font-size: 16px;
	font-weight: 500;
	color: var(--color-corp);
	white-space: nowrap;
	transform: rotate(90deg);
	transform-origin: 0 0;
}
@media screen and (max-width: 767px){
	.pageTop { display: none; }
}

/* ============================================================
   ヘッダー（メインコンテンツ上部）
   - 高さ140px、幅100%、背景透明、ページ上部固定
   - ヘッダーロゴ：右端から2%、上40px、高さ60px
   - ファーストビュー越えたらロゴ白→コーポレートカラー
   ============================================================ */

.header {
	position: fixed;
	top: 0;
	left: var(--sidebar-width);
	width: calc(100% - var(--sidebar-width));
	height: 150px;
	background-color: #FFF; /* 下層ページ：デフォルト白 */
	z-index: 7000;          /* サイドバー(9000)より下 */
	transition: .3s;
	box-shadow: 0 0 10px rgba(0,0,0,.06);
}

.header__link {
	position: absolute;
	right: 2%;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	transition: .3s;
}

.header__logo {
	height: 60px;
	width: auto;
	display: block;
	transition: .3s;
}

/* デフォルト：下層ページは緑ロゴ表示 */
.header__logo--white {
	display: none;
}
.header__logo--color {
	display: block;
}

/* TOPページ（body.is-top）：ファーストビュー時は背景透明＋白ロゴ */
body.is-top .header {
	background-color: transparent;
	box-shadow: none;
}
body.is-top .header__logo--white {
	display: block;
}
body.is-top .header__logo--color {
	display: none;
}
/* TOPでもスクロールすれば下層と同じ状態に */
body.is-top .header.scroll {
	background-color: #FFF;
	box-shadow: 0 0 10px rgba(0,0,0,.06);
}
body.is-top .header.scroll .header__logo--white {
	display: none;
}
body.is-top .header.scroll .header__logo--color {
	display: block;
}

/* ファーストビューを越えたら：高さ100px・ロゴ50px（TOP/下層共通） */
.header.scroll {
	height: 100px;
}
.header.scroll .header__logo {
	height: 50px;
}

@media screen and (max-width: 767px){
	.header {
		left: 0;
		width: 100%;
		height: 50px;
		background-color: #FFF;
	}
	body.is-top .header {
		background-color: transparent;
		box-shadow: none;
	}
	.header.scroll {
		background-color: #FFF;
		box-shadow: 0 0 10px rgba(0,0,0,.06);
		height: 50px;
	}
	.header__link {
		right: 3%;
		top: 10px;
		height: 30px;
		transform: none;
	}
	.header__logo,
	.header.scroll .header__logo {
		height: 30px;
		width: auto;
	}
	/* 下層ページ：常にカラーロゴ */
	.header__logo--white { display: none; }
	.header__logo--color { display: block; }
	/* TOPページ：初期=白ロゴ、scroll後=カラーロゴ */
	body.is-top .header__logo--white { display: block; }
	body.is-top .header__logo--color { display: none; }
	body.is-top .header.scroll .header__logo--white { display: none; }
	body.is-top .header.scroll .header__logo--color { display: block; }
}

/* ============================================================
   ドロワーナビ
   - PC/タブレットでも有効。ハンバーガーボタンはサイドバー上部に固定。
   - 展開時、左サイドバーはそのまま、右側コンテンツを覆う
   ============================================================ */

.drawerNav__btn {
	position: fixed;
	left: 0;
	top: 0;
	width: var(--sidebar-width);
	height: 80px;
	cursor: pointer;
	z-index: 9500;
	display: flex;
	justify-content: center;
	align-items: center;
}

.drawerNav__btnIcon {
	position: relative;
	width: 34px;
	height: 24px;
}

.drawerNav__btnIcon::before,
.drawerNav__btnIcon::after,
.drawerNav__btnIcon span {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	border-radius: 5px;
	background-color: var(--color-corp);
	transition: .3s;
}
.drawerNav__btnIcon::before { top: 0; }
.drawerNav__btnIcon span { top: 50%; transform: translateY(-50%); display: block; }
.drawerNav__btnIcon::after { bottom: 0; }

/* ドロワー展開時のハンバーガー→×変形 */
.drawerNav__btn.open .drawerNav__btnIcon::before {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}
.drawerNav__btn.open .drawerNav__btnIcon::after {
	bottom: 50%;
	transform: translateY(50%) rotate(-45deg);
}
.drawerNav__btn.open .drawerNav__btnIcon span {
	opacity: 0;
}
/* ドロワー展開時の×ボタンを白色に（緑背景で視認性確保） */
.drawerNav__btn.open .drawerNav__btnIcon::before,
.drawerNav__btn.open .drawerNav__btnIcon::after {
	background-color: #FFF;
}

@media screen and (max-width: 767px){
	.drawerNav__btn {
		width: 50px;
		height: 50px;
		background-color: transparent;
	}
	
	.drawerNav__btnIcon {
		position: relative;
		width: 24px;
		height: 16px;
	}

	.drawerNav__btnIcon::before,
	.drawerNav__btnIcon::after,
	.drawerNav__btnIcon span {
		height: 2px;
	}
	.drawerNav__btnIcon::before { top: 0; }
	.drawerNav__btnIcon span { top: 50%; transform: translateY(-50%); display: block; }
	.drawerNav__btnIcon::after { bottom: 0; }

}

/* ドロワーコンテンツ：右側コンテンツ部分のみ覆う */
.drawerNav__content {
	position: fixed;
	left: var(--sidebar-width);
	top: 0;
	width: calc(100% - var(--sidebar-width));
	height: 100vh;
	background-color: var(--color-corp);
	z-index: 9300;
	overflow-y: auto;
	display: none;
}
.drawerNav__content.open {
	display: block;
}
@media screen and (max-width: 767px){
	.drawerNav__content {
		left: 0;
		width: 100%;
	}
}

/* ドロワー上部の白ロゴ：PCは非表示（サイドバーのアイコンで代替）、SPでのみ表示 */
.drawerNav__logo {
	display: none;
}
.drawerNav__logo img {
	height: 30px;
	width: auto;
	display: block;
}

.drawerNav__inner {
	padding: 120px 8% 60px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.drawerNav__item {
	position: relative;
	padding: 30px;
	border-bottom: 1px solid #FFF;
	/* Grid: 1行目=link+toggle、2行目=children
	   → toggle は align-self: center で link 行（1行目）に縦中央固定 */
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 16px;
}
.drawerNav__item:first-child {
	border-top: 1px solid #FFF;
}

.drawerNav__link {
	grid-column: 1;
	grid-row: 1;
	display: inline-flex;
	align-items: baseline;
	gap: 25px;
	color: #FFF;
	transition: .2s;
}
.drawerNav__link:hover {
	opacity: .7;
}
.drawerNav__link-en {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 32px;
	font-weight: 700;
	color: #FFF;
	line-height: 1;
}
.drawerNav__link-ja {
	display: inline-block;
	font-family: var(--font-ja);
	font-size: 18px;
	font-weight: 500;
	color: #FFF;
	line-height: 1;
}

/* +ボタン（子メニュー展開トグル）：link行（1行目）に縦中央固定 */
.drawerNav__toggle {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	justify-self: end;
	position: relative;
	width: 28px;
	height: 28px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
}
.drawerNav__toggle::before,
.drawerNav__toggle::after {
	content: "";
	position: absolute;
	background-color: #FFF;
	left: 50%;
	top: 50%;
	transition: .25s;
}
.drawerNav__toggle::before {
	width: 28px;
	height: 2px;
	transform: translate(-50%, -50%);
}
.drawerNav__toggle::after {
	width: 2px;
	height: 28px;
	transform: translate(-50%, -50%);
}
.drawerNav__item.open .drawerNav__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

/* 子メニュー：grid 2行目で全列をまたぐ */
.drawerNav__children {
	grid-column: 1 / -1;
	grid-row: 2;
	display: none;
	margin-top: 25px;
	flex-wrap: wrap;
	gap: 12px 24px;
}
.drawerNav__item.open .drawerNav__children {
	display: flex;
}
.drawerNav__children-link {
	width: 50%; /* PC: 2列 */
	text-align: left;
	color: #FFF;
	font-size: 15px;
	font-weight: 500;
	opacity: .85;
	transition: .2s;
}
.drawerNav__children-link::before {
	content: "- ";
}
.drawerNav__children-link:hover {
	opacity: .6;
}

/* SP (≤767px) : 縮小サイズ＋子要素50%幅左寄せ */
@media screen and (max-width: 767px){
	.drawerNav__item {
		padding: 15px 5px 15px 10px;
		column-gap: 10px;
	}
	.drawerNav__link {
		display: inline-flex;
		flex-direction: row;
		align-items: baseline;
		gap: 10px;
	}
	.drawerNav__link-en { font-size: 18px; }
	.drawerNav__link-ja { font-size: 14px; }
	.drawerNav__toggle {
		width: 17px;
		height: 17px;
		margin-right: 10px;  /* もう10px右に */
	}
	.drawerNav__toggle::before { width: 17px; }
	.drawerNav__toggle::after  { height: 17px; }
	.drawerNav__children {
		margin-top: 15px;
		flex-wrap: wrap;
		row-gap: 8px;
		gap: 8px 0;
	}
	.drawerNav__children-link {
		width: 100%; /* SP: タイトルが長いため縦積み */
		text-align: left;
	}
}

@media screen and (max-width: 767px){
	.drawerNav__logo {
		display: flex;
		justify-content: flex-end; /* 右寄せ：クローズボタンと被らないように */
		padding: 20px 5% 0;
		margin-bottom: 20px;
	}
	.drawerNav__inner {
		padding: 0 5% 40px;
	}
}


/* ============================================================
   mvLower（下層ページ共通MV）
   - 幅100%、PC高さ380px / SP 220px
   - 固定ヘッダー分の margin-top で押し下げ
   - 背景画像はページ固有CSSで指定
   - h1 は en + ja の2行構成、白テキスト
   ============================================================ */

.mvLower {
	position: relative;
	width: 100%;
	height: 630px;
	margin-top: 150px; /* 固定ヘッダー分 */
	background-color: #c8ccd1; /* 仮プレースホルダー（後から画像差し替え） */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mvLower__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.mvLower__h1 {
	color: #FFF;
}
.mvLower__h1-en {
	display: block;
	font-family: var(--font-en);
	font-size: 56px;
	font-weight: 700;
	color: #FFF;
	line-height: 1;
}
.mvLower__h1-ja {
	display: block;
	font-family: var(--font-ja);
	font-size: 21px;
	font-weight: 700;
	color: #FFF;
	margin-top: 14px;
	line-height: 1;
}

@media screen and (max-width: 767px){
	.mvLower {
		height: auto;
		aspect-ratio: 10 / 8;
		margin-top: 50px;
	}
	.mvLower__h1-en {
		font-size: 36px;
	}
	.mvLower__h1-ja {
		font-size: 18px;
		margin-top: 10px;
	}
}


/* ============================================================
   CTAエリア（DOWNLOAD / CONTACT US 2カラム）
   ============================================================ */

.cta {
	display: flex;
	width: 100%;
}

.cta__item {
	width: 50%;
	padding: 90px 5%;
	text-align: center;
	transition: .3s;
}

.cta__item--download {
	background-color: var(--color-accent);
}

.cta__item--contact {
	background-color: var(--color-cta);
}

.cta__h2 {
	margin-bottom: 60px;
}
.cta__item--download .cta__h2 .h2__en,
.cta__item--download .cta__h2 .h2__ja {
	color: #333;
}
.cta__item--contact .cta__h2 .h2__en,
.cta__item--contact .cta__h2 .h2__ja {
	color: #FFF;
}

/* CTAボタン共通：背景corp / 文字白 / ホバー反転 */
.cta .btn {
	background-color: var(--color-corp);
	border-color: var(--color-corp);
	color: #FFF;
}
.cta .btn:hover {
	background-color: #FFF;
	color: var(--color-corp);
}

@media screen and (max-width: 767px){
	.cta {
		flex-direction: column;
	}
	.cta__item {
		width: 100%;
		padding: 50px 20px;
	}
	.cta__h2 {
		margin-bottom: 30px; /* 60 → 30 (半分) */
	}
}

/* ============================================================
   フッター
   ============================================================ */

.footer {
	background-color: #999;
	color: #FFF;
	padding: 50px 0;
}

.footer__inner {
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.footer__top {
	display: flex;
	align-items: center;
	gap: 40px;
}

.footer__logo {
	width: 270px;
	height: auto;
}

.footer__nav {
	display: flex;
	gap: 30px;
	font-size: 14px;
}
.footer__nav a {
	transition: .2s;
	color: #FFF;
}
.footer__nav a:hover {
	opacity: .7;
}

.footer__info {
	font-size: 16px;
	color: #FFF;
	line-height: 1.8;
}

.footer__copyright {
	text-align: left;
	font-size: 12px;
	color: #FFF;
	font-family: var(--font-en);
}

@media screen and (max-width: 767px){
	.footer__inner {
		width: calc(100% - 40px);
	}
	.footer__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	/* ロゴ60% (270 → 162) */
	.footer__logo {
		width: 162px;
	}
	/* 3つのナビは非表示 */
	.footer__nav {
		display: none;
	}
	/* 会社名・住所 12px */
	.footer__info {
		font-size: 12px;
	}
}



/* ============================================================
   下層ページ共通：セクション見出し（日本語 │ 英字ラベル）
   ============================================================ */
.lower-secH2 {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 40px;
}
.lower-secH2__ja {
	font-size: 21px;
	font-weight: 700;
	color: #333;
}
.lower-secH2__bar {
	font-size: 16px;
	color: #333;
	font-weight: 400;
}
.lower-secH2__en {
	font-family: var(--font-en);
	font-size: 14px;
	color: #333;
	font-weight: 500;
}


/* ============================================================
   下層共通：誘導ボックス（WORKS / FAQ 等の左右レイアウト）
   ============================================================ */
.lower-guideBox {
	background-color: #efefef;
	padding: 40px 35px 60px 35px;
	display: flex;
	align-items: flex-start;
}
.lower-guideBox__left {
	flex-shrink: 0;
	width: 250px;
}
.lower-guideBox__btn {
	width: 165px;
	height: 35px;
	margin-top: 35px;
}
.lower-guideBox__btn.sp {
	display: none;
}
.lower-guideBox__txt {
	flex: 1;
	font-size: 16px;
	color: #333;
	line-height: 1.85;
}


/* ============================================================
   下層共通：ページネーション
   ============================================================ */
.lower-pageNav {
	display: flex;
	justify-content: center;
	gap: 0;
	margin: 100px 0 0;
}
.lower-pageNav a,
.lower-pageNav span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 65px;
	border: 1px solid #999;
	margin-left: -1px;
	font-size: 16px;
	color: #333;
	font-family: var(--font-en);
	transition: .2s;
}
.lower-pageNav a:hover {
	background-color: var(--color-corp);
	color: #FFF;
}
.lower-pageNav .is-current {
	background-color: var(--color-corp);
	color: #FFF;
	font-weight: 700;
	position: relative;
}
.lower-pageNav .is-current::after {
	content: "";
	position: absolute;
	left: 25%;
	right: 25%;
	bottom: 8px;
	height: 1px;
	background-color: var(--color-corp);
}


/* ============================================================
   下層共通：前/一覧へ/次 ナビ
   ============================================================ */
.lower-prevNext {
	display: flex;
	justify-content: center;
	margin: 100px 0 0;
}
.lower-prevNext a,
.lower-prevNext span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 65px;
	padding: 0 35px;
	border: 1px solid #999;
	margin-left: -1px;
	font-size: 16px;
	color: #333;
	background-color: #FFF;
	transition: .2s;
}

.lower-prevNext a:nth-of-type(2) {
	padding: 0 45px;
}

.lower-prevNext a:hover {
	background-color: var(--color-corp);
	color: #FFF;
}
.lower-prevNext .is-disabled {
	color: #CCC;
	pointer-events: none;
}


/* ============================================================
   .btn のバリアント：緑塗りピル（CTA塗りボタン）
   ============================================================ */
.btn--fill {
	background-color: var(--color-corp);
	border-color: var(--color-corp);
	color: #FFF;
}
.btn--fill:hover {
	background-color: #007a6e;
	border-color: #007a6e;
	color: #FFF;
}


/* ============================================================
   ▼▼ 下層ページ共通 SP（〜767px）▼▼
   ============================================================ */

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

	/* 下層共通：セクション見出し */
	.lower-secH2 {
		gap: 10px;
		margin-bottom: 24px;
		flex-wrap: wrap;
	}
	.lower-secH2__ja {
		font-size: 18px;
	}
	.lower-secH2__bar {
		font-size: 14px;
	}
	.lower-secH2__en {
		font-size: 12px;
	}

	/* 下層共通：誘導ボックス（縦積み） */
	.lower-guideBox {
		flex-direction: column;
		align-items: stretch;
		padding: 24px 20px;
		gap: 20px;
	}
	.lower-guideBox__left {
		width: 100%;
	}
	.lower-guideBox__btn {
		margin: 16px auto 0;
	}
	.lower-guideBox__btn.pc {
		display: none;
	}
	.lower-guideBox__btn.sp {
		display: block;
	}
	.lower-guideBox__txt {
		font-size: 14px;
	}

	/* 下層共通：ページネーション */
	.lower-pageNav {
		margin-top: 40px;
		flex-wrap: wrap;
		gap: 0;
	}
	.lower-pageNav a,
	.lower-pageNav span {
		width: 36px;
		height: 36px;
		font-size: 13px;
	}

	/* 下層共通：前 / 一覧へ / 次 ナビ */
	.lower-prevNext {
		margin-top: 40px;
	}
	.lower-prevNext a,
	.lower-prevNext span {
		height: 38px;
		padding: 0 20px;
		font-size: 13px;
	}
}


/* === 自動生成: PC→SPフォントマッピング統一 === */
@media screen and (max-width: 767px){
	body {
		font-size: 14px;
	}
	/* 共通ボタン .btn：290×47、透明背景、コーポレートカラー1pxボーダー、完全角丸、16px */
.btn {
		font-size: 14px;
	}
	.scrollDown__txt {
		font-size: 14px;
	}
	.pageTop__txt {
		font-size: 14px;
	}
	.drawerNav__children-link {
		font-size: 12px;
	}
	.footer__nav {
		font-size: 12px;
	}
	.footer__info {
		font-size: 14px;
	}
	.lower-pageNav a,
.lower-pageNav span {
		font-size: 14px;
	}
	.lower-prevNext a,
.lower-prevNext span {
		font-size: 14px;
	}
}