@charset "UTF-8";
/* CSS Document */

/* ==========================================================================
	Reset CSS
========================================================================== */
/***
	The new CSS reset - version 1.7.3 (last updated 7.8.2022)
	GitHub page: https://github.com/elad2412/the-new-css-reset
***/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)){
	all: unset;
	display: revert;
}
*,*::before,*::after{
	box-sizing: border-box;
}
a, button{
	cursor: revert;
}
ol, ul, menu{
	list-style: none;
}
img{
	vertical-align: top;
}
table{
	border-collapse: collapse;
	border-spacing: 0;
}
input, textarea{
	-webkit-user-select: auto;
	user-select: auto;
}
textarea{
	white-space: revert;
}
meter{
	-webkit-appearance: revert;
	appearance: revert;
}
::placeholder{
	color: unset;
}
:where([hidden]){
	display: none;
}
:where([contenteditable]:not([contenteditable="false"])){
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
	-webkit-line-break: after-white-space;
	line-break: after-white-space;
	-webkit-user-select: auto;
	user-select: auto;
}
:where([draggable="true"]){
	-webkit-user-drag: element;
}



/* ==========================================================================
	Setting CSS
========================================================================== */
:root{
	/* width */
	--wBase: 1200px;
	--w1000: 1060px;
	/* color */
	--clrLRed:    #ea343b;
	--clrMRed:    #c11a2e;
	--clrDRed:    #aa1729;
	--clrLLRed:   #EBDCDC;
	--clrLGray:   #f0f0f0;
	--clrMGray:   #b4aaaa;
	--clrDGray:   #898383;
	--clrBlue:    #0D4282;
	--clrLLBlue:  #CFDEE5;
	--clrBlack:   #222;
	--clrBlack15: rgb(000 000 000 / 15%);
	--clrBlack50: rgb(000 000 000 / 50%);
	--clrBlack80: rgb(000 000 000 / 80%);
	--clrWhite30: rgb(255 255 255 / 30%);
	--clrWhite50: rgb(255 255 255 / 50%);
	--clrWhite70: rgb(255 255 255 / 70%);
	/* font */
	--fSansSerif: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif;
	--fBase:      'Noto Sans JP', var(--fSansSerif);
	--fMincho:    'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho Pro', 'MS PMincho', serif;
	--fEn:        'Oswald', var(--fBase);
	/* 背景画像　共通記述 */
	--bgCmn: no-repeat top left / 100% auto;
	/* 矢印 */
	--icoArrowLRed:  url("../images/ico_arrow_red_l.svg") var(--bgCmn);
	--icoArrowMRed:  url("../images/ico_arrow_red_m.svg") var(--bgCmn);
	--icoArrowWhite: url("../images/ico_arrow_white.svg") var(--bgCmn);
	--icoArrowBlack: url("../images/ico_arrow_black.svg") var(--bgCmn);
	/* リンクアイコン */
	--icoLinkLRed:  url("../images/ico_link_red_l_pc.svg") var(--bgCmn);
	--icoLinkMRed:  url("../images/ico_link_red_m_pc.svg") var(--bgCmn);
	--icoLinkWhite: url("../images/ico_link_white_pc.svg") var(--bgCmn);
	/* 式 */
	--ctsSideGap: ((100vw - 1200px)/2);/* コンテンツ外の片側の幅 */
	/* transition */
	--comTransition: all 0.4s;
	/* scale */
	--cmnScale: 1.05;
}
html{
	font-size: 62.5%;
}
body{
	color: #000;
	font-size: 1.5em;
	font-family: var(--fBase);
	font-weight: 400;
	letter-spacing: 0.1rem;
	font-feature-settings: "palt";
	overflow-wrap: break-word;
}
p{
	line-height: 170%;
}
a{
	color: #000;
	text-decoration: none;
	transition: var(--comTransition);
}
@media print, screen and (min-width:813px){
	/* iPad背景切れ対策 */
	body{
		min-width: 1200px;
	}
	/* tel pcのみ無効 */
	a[href^="tel:"]{
		pointer-events: none;
	}
}

/* 
	表示切替
---------------------------------------------------- */
.switch{
	visibility: hidden;
}
.sp{
	display: none;
}



/* ==========================================================================
	common
========================================================================== */
/* 
	box
---------------------------------------------------- */
/* wrapper
============================== */
#wrapper{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
}
/* ctsWrapper
============================== */
#ctsWrapper{
	padding-block: 125px 100px;
}
#ctsWrapper.spaceS{
	padding-top: 100px;
}
#ctsWrapper.spaceL{
	padding-top: 170px;
}
/* ctsArea
============================== */
.ctsArea{
	width: var(--wBase);
	padding: 0 30px 80px 30px;
	margin: 0 auto;
}
.ctsArea.w1000{
	width: var(--w1000);
}
.ctsArea:last-of-type{
	padding-bottom: 0;
}

/* 
	font / txt
---------------------------------------------------- */
/* 太字
============================== */
.fwB{
	font-weight: bold;
}
/* 上付き・下付き
============================== */
.sup, .sub{
	display: inline-block;
	font-size: 50%;
	line-height: 1;
}
/* --- 上付き --- */
.sup{
	vertical-align: super;
}
/* --- 下付き --- */
.sub{
	vertical-align: sub;
	transform: translateY(-4px);
}
/* 平体
============================== */
.horizTxt{
	display: inline-block;
	font-family: var(--fMincho);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.05em;
	margin-top: -0.25em;
	transform: scaleY(0.75);
	transform-origin: bottom left;
}
.horizTxt .adjust{
	display: inline-block;
}
.horizTxt .period{
	display: inline-block;
	letter-spacing: -0.6em;
}
.ls-001{
	letter-spacing: -0.01em;
}
.ls002{
	letter-spacing: 0.02em;
}
.horizTxt .Katakana, .ls-01{
	letter-spacing: -0.1em;
}
.ls-015{
	letter-spacing: -0.15em;
}
.ls-02{
	letter-spacing: -0.2em;
}
.ls-025{
	letter-spacing: -0.25em;
}
.ls-03{
	letter-spacing: -0.3em;
}
.ls-035{
	letter-spacing: -0.35em;
}
.ls-04{
	letter-spacing: -0.4em;
}
.ls-045{
	letter-spacing: -0.45em;
}
.ls-05{
	letter-spacing: -0.5em;
}
.ls-055{
	letter-spacing: -0.55em;
}
/* 注釈
============================== */
[class *= "noteTxt"]{
	color: var(--clrDGray);
	line-height: 140%;
	margin-top: 8px;
}
/* --- 文中用 --- */
[class *= "noteTxt"].inline{
	display: inline-block;
	margin-top: 0;
}
/* --- サイズS --- */
.noteTxtS{
	font-size: 1.2rem;
}
/* --- 米印 --- */
[class *= "noteTxt"].komeIco{
	padding-left: 17px;
	position: relative;
}
[class *= "noteTxt"].komeIco::before{
	content: "※";
	position: absolute;
	left: 0;
}
/* サイズS */
.noteTxtS.komeIco{
	padding-left: 14px;
}
/* リード文
============================== */
.cmnLeadTxt{
	text-align: center;
	color: var(--clrMRed);
	font-size: 1.7rem;
	margin-bottom: 60px;
}

/* 
	タイトル
---------------------------------------------------- */
/* 下線タイトル
============================== */
.lineBtmTit{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	border-bottom: 5px solid #000;
	padding-bottom: 20px;
	margin-bottom: 30px;
}
.lineBtmTit .horizTxt{
	text-indent: -0.05em;
	font-size: 5.4rem;
}
/* --- Lサイズ --- */
.lineBtmTit.sizeL .horizTxt{
	font-size: 8.8rem;
}
.lineBtmTit.sizeL .en{
	font-size: 3.6rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 90%;
}
/* --- 平体文字 中黒用 --- */
.lineBtmTit .middleDot{
	text-indent: -0.3em;
	letter-spacing: -0.3em;
}
/* --- 数字あり --- */
.lineBtmTit .num{
	font-size: 2rem;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 90%;
	translate: 2px 20px;
}
/* --- 下に来る要素 調整用 --- */
.lineBtmTit + .toggleList,
.lineBtmTit + .baseTable{
	border-top: none;
}
.lineBtmTit:has(+.toggleList),
.lineBtmTit:has(+.baseTable){
	margin-bottom: 0;
}
/* decEnTit
============================== */
.decEnTit{
	margin-bottom: 30px;
}
.decEnTit > *{
	display: block;
}
.decEnTit .ja{
	text-indent: -0.04em;
	font-size: 5rem;
	margin-top: -0.3em;
}
.decEnTit .ja .sizeL{
	display: inline-block;
	font-size: 8rem;
	margin-top: -0.15em;
}
.decEnTit .en{
	color: var(--clrMRed);
	font-size: 1.8rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 90%;
	margin-top: 10px;
}
.decEnTit:has(.ja .sizeL) .ja{
	margin-top: -0.4em;
}
.decEnTit:has(.ja .sizeL) .en{
	margin-top: 7px;
}
/* ノーマル平体タイトル
============================== */
.normalTit{
	font-size: 5.4rem;
	line-height: 120%;
	margin-bottom: 35px;
}
/* --- 「」 --- */
.normalTit [class *= "kakko"]{
	display: inline-block;
}
.normalTit .kakkoStart{
	text-indent: -0.4em;
	letter-spacing: -0.05em;
}
.normalTit .kakkoEnd{
	letter-spacing: -0.5em;
}
/* 複数行改行マーカー
============================== */
.markerTit > span{
	display: inline;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background-color: #000;
	color: #fff;
	font-size: 2rem;
	font-weight: 500;
	line-height: 235%;
	padding: 5px 10px 8px 10px;
}

/* 
	ボタンアイコン
---------------------------------------------------- */
/* 内部リンクボタン 外部リンクボタン アイコン
============================== */
[class *= "arrowIco"]::after,
[class *= "linkIco"]::after{
	content: " ";
	display: block;
	position: absolute;
	top: 50%;
	right: 15px;
	translate: 0 -50%;
	transition: var(--comTransition);
}
/* --- 内部リンクボタン --- */
[class *= "arrowIco"]::after{
	width: 14px;
	height: 10px;
}
.arrowIcoLRed::after{
	background: var(--icoArrowLRed);
}
.arrowIcoMRed::after{
	background: var(--icoArrowMRed);
}
.arrowIcoWhite::after{
	background: var(--icoArrowWhite);
}
/* --- 外部リンクボタン --- */
[class *= "linkIco"]::after{
	width: 14px;
	aspect-ratio: 1/1;
}
.linkIcoLRed::after{
	background: var(--icoLinkLRed);
}
.linkIcoMRed::after{
	background: var(--icoLinkMRed);
}
.linkIcoWhite::after{
	background: var(--icoLinkWhite);
}
/* --- hover時 --- */
@media (any-hover: hover){
	[class *= "arrowIco"]:hover::after,
	[class *= "linkIco"]:hover::after{
		right: 10px;
	}
}

/* 
	ボタン
---------------------------------------------------- */
.btnArea{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 50px;
}
.btnArea [class *= "baseBtn"]{
	width: calc((100% - 20px)/2);
}
/* ベースボタン
============================== */
[class *= "baseBtn"]{
	display: flex;
	align-items: center;
	min-height: 54px;
	font-weight: 500;
	line-height: 120%;
	letter-spacing: 0.15rem;
	padding: 8px 45px 8px 20px;
	position: relative;
}
[class *= "baseBtn"].btnL{
	justify-content: center;
	min-height: 90px;
	font-size: 2rem;
	font-weight: 700;
}
/* --- 色 --- */
[class *= "baseBtn"].btnClrLRed{
	background-color: var(--clrLRed);
	color: #fff;
}
[class *= "baseBtn"].btnClrMRed{
	background-color: var(--clrMRed);
	color: #fff;
}
[class *= "baseBtn"].btnClrWhite{
	background-color: #fff;
}
@media (any-hover: hover){
	[class *= "baseBtn"].btnClrLRed:hover{
		filter: brightness(115%);
	}
	[class *= "baseBtn"].btnClrMRed:hover{
		background-color: var(--clrDRed);
	}
	[class *= "baseBtn"].btnClrWhite:hover{
		color: var(--clrMRed);
	}
}
/* ベースボタン（線）
============================== */
.baseBtnLine{
	border: 1px solid var(--clrMRed);
	color: var(--clrMRed);
}
@media (any-hover: hover){
	.baseBtnLine:hover{
		background-color: var(--clrLGray);
		border: 1px solid var(--clrLRed);
		color: var(--clrLRed);
	}
}
/* チェックボタン
============================== */
.checkBtn{
	display: flex;
	align-items: center;
	min-height: 60px;
	background-color: var(--clrLGray);
	border: 1px solid var(--clrMRed);
	color: var(--clrMRed);
	font-weight: 500;
	line-height: 130%;
	padding: 8px 45px 8px 80px;
	position: relative;
}
/* --- チェックアイコン --- */
.checkBtnIco{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px 0;
	width: 60px;
	height: 100%;
	background-color: var(--clrMRed);
	color: #fff;
	font-size: 1.1rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 90%;
	letter-spacing: 0.05rem;
	position: absolute;
	left: 0;
	transition: var(--comTransition);
}
.checkBtnIco::before{
	content: "!";
	display: flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	aspect-ratio: 1/1;
	background-color: #fff;
	border-radius: 50%;
	color: var(--clrMRed);
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 90%;
	padding-bottom: 1px;
}
/* --- hover時 --- */
@media (any-hover: hover){
	.checkBtn:hover{
		background-color: var(--clrLLRed);
		border-color: var(--clrLRed);
		color: var(--clrLRed);
	}
	.checkBtn:hover .checkBtnIco{
		background-color: var(--clrLRed);
	}
}
/* テキストリンク
============================== */
a.txtLink{
	text-decoration: underline;
	word-break: break-all;
}
a.txtLink:hover{
	text-decoration: none;
}
/* 矢印パーツ（線付き）
============================== */
/* --- 箱付き矢印・矢印のみ　共通 --- */
.arrowBtn,
[class *= "arrowItem"]{
	display: block;
	position: absolute;
	transition: var(--comTransition);
}
.arrowBtn::before,
.arrowBtn::after,
[class *= "arrowItem"]::before,
[class *= "arrowItem"]::after{
	content: " ";
	display: block;
	position: absolute;
	top: 50%;
}
.arrowBtn::before,
[class *= "arrowItem"]::before{
	width: 20px;
	height: 15px;
}
.arrowBtn::after,
[class *= "arrowItem"]::after{
	width: 20px;
	height: 2px;
}
/* --- 箱付き矢印 --- */
.arrowBtn{
	width: 100px;
	height: 50px;
	background-color: var(--clrBlack80);
	right: 0;
	bottom: 0;
}
.arrowBtn::before,
.arrowBtn::after{
	translate: -50% -50%;
}
.arrowBtn::before{
	background: var(--icoArrowWhite);
	left: calc(50% + 8px);
}
.arrowBtn::after{
	background-color: #fff;
	left: calc(50% - 8px);
}
/* hover時 */
@media (any-hover: hover){
	a:hover .arrowBtn{
		background-color: var(--clrDRed);
	}
}
/* --- 矢印のみ --- */
[class *= "arrowItem"]{
	width: 35px;
	height: 15px;
	top: 50%;
	right: 20px;
	translate: 0 -50%;
}
[class *= "arrowItem"]::before,
[class *= "arrowItem"]::after{
	translate: 0 -50%;
}
[class *= "arrowItem"]::before{
	background: var(--icoArrowBlack);
	right: 0;
}
[class *= "arrowItem"]::after{
	background-color: #000;
	left: 0;
}
/* 赤 */
.arrowItemRed::before{
	background: var(--icoArrowMRed);
}
.arrowItemRed::after{
	background-color: var(--clrMRed);
}
/* hover時 */
@media (any-hover: hover){
	a:hover [class *= "arrowItem"]{
		right: 10px;
	}
}

/* 
	リスト
---------------------------------------------------- */
/* 丸リスト
============================== */
.circleList{
	display: flex;
	flex-direction: column;
	gap: 6px 0;
}
.circleList > li{
	line-height: 140%;
	padding-left: 15px;
	position: relative;
}
.circleList > li::before{
	content: " ";
	display: block;
	width: 11px;
	aspect-ratio: 1/1;
	background-color: var(--clrMRed);
	border-radius: 50%;
	position: absolute;
	top: 6px;
	left: 0;
}
/* 矢印アイコンリスト
============================== */
[class *= "arrowIcoList"]{
	display: flex;
	flex-direction: column;
	gap: 10px 0;
}
[class *= "arrowIcoList"] > li{
	line-height: 130%;
	padding-left: 14px;
	position: relative;
}
[class *= "arrowIcoList"] > li::before{
	content: " ";
	display: block;
	width: 10px;
	height: 8px;
	background: var(--icoArrowMRed);
	position: absolute;
	top: 0.35em;
	left: 0;
}
/* --- 白 --- */
.arrowIcoListWhite{
	color: #fff;
}
.arrowIcoListWhite > li::before{
	background: var(--icoArrowWhite);
}
/* 矢印ボタンリスト
============================== */
.arrowBtnList{
	display: flex;
	flex-direction: column;
	gap: 10px 0;
}
.arrowBtnList a{
	display: flex;
	align-items: center;
	min-height: 80px;
	border: 1px solid #000;
	line-height: 125%;
	padding: 10px 70px 10px 20px;
	position: relative;
}
.arrowBtnList a::before,
.arrowBtnList a::after{
	content: " ";
	display: block;
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	transition: var(--comTransition);
}
.arrowBtnList a::before{
	width: 20px;
	height: 15px;
	background: var(--icoArrowBlack);
	right: 20px;
}
.arrowBtnList a::after{
	width: 20px;
	height: 2px;
	background-color: #000;
	right: 35px;
}
/* --- hover時 --- */
@media (any-hover: hover){
	.arrowBtnList a:hover{
		color: var(--clrMRed);
	}
	.arrowBtnList a:hover::before{
		right: 10px;
	}
	.arrowBtnList a:hover::after{
		right: 25px;
	}
}
/* ステップリスト
============================== */
.stepList{
	display: flex;
	flex-direction: column;
	gap: 50px 0;
}
.stepList > li{
	padding-left: 40px;
	position: relative;
}
/* --- 丸と線 擬似要素 --- */
.stepList > li::before,
.stepList li::after{
	content: " ";
	display: block;
	position: absolute;
}
/* 丸 */
.stepList > li::before{
	width: 15px;
	aspect-ratio: 1/1;
	background-color: var(--clrMRed);
	border-radius: 50%;
	left: 0;
	top: -2px;
	z-index: 1;
}
/* 線 */
.stepList > li::after{
	width: 3px;
	height: calc(100% + 50px);
	background-color: var(--clrBlack15);
	top: 0;
	left: 6px;
	z-index: 0;
}
.stepList > li:last-of-type:after{
	display: none;
}
/* --- タイトル --- */
.stepListTit > span{
	display: block;
}
.stepListTit .num{
	color: var(--clrMRed);
	font-size: 1.4rem;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 90%;
	letter-spacing: 0.05rem;
	margin-bottom: 4px;
}
.stepListTit .tit{
	font-size: 2rem;
	line-height: 130%;
	font-weight: 500;
}
/* --- 本文 --- */
.stepListTxt,
.stepList .circleList{
	margin-top: 15px;
}
.stepListTxt{
	text-align: justify;
}
/* --- ボタン --- */
.stepList li > .checkBtn,
.stepList li > .btnArea,
.stepList li > .baseBtn{
	margin-top: 20px;
}
/* トグルリスト
============================== */
.toggleList{
	border-top: 1px solid var(--clrBlack15);
}
.toggleList > li{
	border-bottom: 1px solid var(--clrBlack15);
}
/* --- タイトル --- */
.toggleTit{
	font-size: 2rem;
	font-weight: 500;
	line-height: 140%;
	padding: 30px 40px 30px 0;
	position: relative;
	cursor: pointer;
}
/* --- +- --- */
.toggleTit::before,
.toggleTit::after{
	content: " ";
	display: block;
	width: 21px;
	height: 1px;
	position: absolute;
	top: 44px;
	right: 0;
	transition: var(--comTransition);
}
.toggleTit::before{
	background-color: var(--clrMRed);
}
.toggleTit::after{
	background-color: #000;
	rotate: 90deg;
}
/* --- 展開エリア --- */
.toggleOpenArea{
	display: none;
	padding-bottom: 30px;
}
.toggleOpenArea .txt{
	text-align: justify;
}
/* --- 展開時 --- */
.toggleTit.jsToggleOpen::before{
	rotate: 180deg;
}
.toggleTit.jsToggleOpen::after{
	rotate: 180deg;
	opacity: 0;
}

/* 
	table
---------------------------------------------------- */
/* メモ：
	.baseTable      ：sp時 block
	.baseTableScroll：sp時 横スクロール
*/

/* 共通
============================== */
[class *= "baseTable"]{
	width: 100%;
	border-top: 1px solid var(--clrBlack15);
}
[class *= "baseTable"] tr{
	border-bottom: 1px solid var(--clrBlack15);
}
[class *= "baseTable"] tr > *{
	line-height: 170%;
	padding: 15px 0;
}
[class *= "baseTable"] th{
	vertical-align: top;
	color: var(--clrMRed);
	font-weight: 500;
	padding-right: 20px;
	line-height: 130%;
}
/* baseTable 通常
============================== */
.baseTable th{
	width: 180px;
}
/* baseTableScroll スクロール用
============================== */
/* --- thead --- */
.baseTableScroll:has(thead){
	border-top: none;
}
.baseTableScroll thead{
	background-color: var(--clrLGray);
}
.baseTableScroll tr > *:not(:last-child){
	border-right: 1px solid var(--clrBlack15);
}
.baseTableScroll thead tr{
	border-bottom: none;
}
.baseTableScroll thead th{
	vertical-align: middle;
	text-align: center;
	color: initial;
	padding: 8px 20px;
}
.baseTableScroll td{
	padding-inline: 20px;
}
/*
	テーブル
---------------------------------------------------- */
/* タイトル */
.baseCaption{
	position: relative;
	font-weight: 500;
	padding-left: 14px;
	margin-bottom: 14px;
}
.baseCaption::before{
	content: url(../images/ico_square_red.svg);
	position: absolute;
	top: -2px;
	left: 0;
}



/*
	モーダル
-----------------------------------------------------------------------------------------------*/
/* base
============================== */
/* モーダルを開くボタン */
.jsModalOpen{
	cursor: pointer;
	transition: var(--comTransition);
}
@media (hover: hover){
	/* JONAN SPIRITSのモーダルボタンホバー */
	.spiritsList .jsModalOpen:hover{
		opacity: .7;
		transform: translateY(-3px);
	}
	/* 加納久宜・小原鐵五郎の格言集のモーダルボタンホバー */
	.quick04 .jsModalOpen:hover{
		opacity: .5;
	}
}

/* モーダルと背景の指定 */
.modal{
	width: 100%;
	height: 100%;
	background: rgb(34 34 34 / 90%);
	position: fixed;
	top: 0;
	left: 0;
	transition: all 0.3s;
	visibility: hidden;
	opacity: 0;
	z-index: 9999;
}
.modal,
.modal *{
	pointer-events: none;
}

/* モーダル表示 */
.modal.jsModalActive{
	opacity: 1;
	visibility: visible;
}
.modal.jsModalActive,
.modal.jsModalActive *{
	pointer-events: all;
}

/* モーダル内側の指定 */
.modalContainer{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* デザイン
============================== */
/* モーダル閉じるボタン */
.modalClose::before,
.modalClose::after{
	content: "";
	position: absolute;
	width: 40px;
	height: 1px;
	background: #fff;
	right: 0;
}
.modalClose::before{
	transform: rotate(25deg);
	top: -20px;
	transition: var(--comTransition);
}
.modalClose::after{
	transform: rotate(-25deg);
	top: -20px;
	transition: var(--comTransition);
}
@media (hover: hover){
	.modalClose:hover::before,
	.modalClose:hover::after{
		opacity: .4;
	}
}

/* コンテンツBox */
.modalContent{
	padding: 50px;
	width: 725px;
	min-width: 500px;
	background-color: #fff;
}




/* ==========================================================================
	header
========================================================================== */
#headerWrapper{
	width: 100%;
	min-width: var(--wBase);
	padding: 30px 0 0 30px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8888;
}

/* 
	ロゴ
---------------------------------------------------- */
.hLogoArea{
	width: fit-content;
	position: relative;
	z-index: 0;
}
.hLogoArea a{
	display: flex;
	align-items: flex-end;
	gap: 0 10px;
}
.hLogoRecruit{
	width: 100px;
}
/* hover時
============================== */
@media (any-hover: hover){
	.hLogoArea a:hover{
		opacity: 0.7;
	}
}

/* 
	ボタンエリア
---------------------------------------------------- */
.hBtnArea{
	display: flex;
	height: 50px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 2;
}
/* インターンシップはこちら
============================== */
.hInternshipBtn,
.hMenuBtn{
	display: flex;
	align-items: center;
	color: #fff;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	padding-left: 20px;
	position: relative;
	transition: var(--comTransition);
}

/* 一時的ここから(2027年卒向けのインターシップは終了しました) */
/* .hInternshipBtn{
	width: 280px;
	background-color: var(--clrLRed);
	padding-right: 40px;
}
.hInternshipBtn .txt {
	opacity: .7;
	line-height: 1.2;
}
.hInternshipBtn::after{
	content: " ";
	display: block;
	width: 14px;
	aspect-ratio: 1/1;
	background: var(--icoLinkWhite);
	position: absolute;
	top: 50%;
	right: 15px;
	translate: 0 -50%;
	transition: var(--comTransition);
	opacity: .7;
} */
/* 一時的ここまで(2027年卒向けのインターシップは終了しました) */

/* インターシップはこちら ここから */
.hInternshipBtn{
	width: 140px;
	letter-spacing: .15rem;
	background-color: var(--clrLRed);
	padding-right: 40px;
}
.hInternshipBtn::after{
	content: " ";
	display: block;
	width: 14px;
	aspect-ratio: 1/1;
	background: var(--icoLinkWhite);
	position: absolute;
	top: 50%;
	right: 15px;
	translate: 0 -50%;
	transition: var(--comTransition);
}
@media (any-hover: hover){
	.hInternshipBtn:hover{
		filter: brightness(115%);
	}
	.hInternshipBtn:hover::after{
		right: 10px;
	}
}
/* インターシップ ここまで */

/* メニューボタン
============================== */
.hMenuBtn{
	width: 180px;
	background-color: var(--clrMRed);
	font-size: 2.2rem;
	font-family: var(--fEn);
}
.hMenuBtn::before,
.hMenuBtn::after{
	content: " ";
}
.hMenuBtn::before,
.hMenuBtn span,
.hMenuBtn::after{
	display: block;
	width: 40px;
	height: 1px;
	background-color: #fff;
	position: absolute;
	right: 20px;
	transition: var(--comTransition);
	will-change: rotate;
}
.hMenuBtn::before{
	translate: 0 -8px;
}
.hMenuBtn::after{
	translate: 0 8px;
}
/* --- 展開時 --- */
.hMenuBtn.jsOpen span{
	opacity: 0;
}
.hMenuBtn.jsOpen::before,
.hMenuBtn.jsOpen::after{
	top: 50%;
	translate: 0 -50%;
}
.hMenuBtn.jsOpen::before{
	rotate: -20deg;
}
.hMenuBtn.jsOpen::after{
	rotate: 20deg;
}
/* --- hover時 --- */
@media (any-hover: hover){
	/* デフォルト */
	.hMenuBtn:hover{
		cursor: pointer;
		background-color: var(--clrDRed);
	}
	.hMenuBtn:not(.jsOpen):hover::before{
		width: 13px;
	}
	.hMenuBtn:not(.jsOpen):hover span{
		width: 26px;
	}
	/* 展開時 */
	.hMenuBtn.jsOpen:hover::before{
		rotate: 20deg;
	}
	.hMenuBtn.jsOpen:hover::after{
		rotate: -20deg;
	}
}

/* 
	メガメニュー
---------------------------------------------------- */
.hMenuArea{
	width: 100%;
	height: 100dvh;
	min-height: 100%;
	background-color: var(--clrMRed);
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: var(--comTransition);
	overflow: auto;
	z-index: 1;
}
@media print, screen and (min-width:813px){
	.hMenuArea::before{
		content: " ";
		display: block;
		width: 100%;
		min-width: var(--wBase);
		height: 100%;
		background: url("../images/bg_munu_pc.png") no-repeat center center / cover;
		position: fixed;
		pointer-events: none;
	}
}
.hMenuInArea{
	display: flex;
	min-width: var(--wBase);
	min-height: 100%;
}
/* 展開時
============================== */
body:has(.hMenuArea.jsOpen){
	overflow-y: hidden;
}
.hMenuArea.jsOpen{
	opacity: 1;
	pointer-events: all;
}
/* ロゴ
============================== */
.hMenuLogoArea{
	display: block;
	width: 184px;
	margin-bottom: 50px;
}
/* --- hover時 --- */
@media (any-hover: hover){
	.hMenuLogoArea:hover{
		opacity: 0.7;
	}
}
/* 新卒採用/中途採用 共通
============================== */
.hMenuRecruit{
	display: flex;
	flex-direction: column;
}
.hMenuRecruitBox{
	width: 320px;
	padding: 50px;
}
/* --- タイトル --- */
.hMenuRecruitTit{
	color: #fff;
	font-size: 3.2rem;
}
/* --- ボタン --- */
.hMenuRecruitBox .baseBtn{
	margin-top: 20px;
}
/* --- リスト --- */
.hMenuRecruitBox .arrowIcoListWhite{
	font-size: 1.3rem;
	margin-top: 30px;
}
.hMenuRecruitBox .arrowIcoListWhite a{
	display: block;
	width: fit-content;
	color: #fff;
}
/* --- hover時 --- */
@media (any-hover: hover){
	.hMenuRecruitBox .arrowIcoListWhite a:hover{
		translate: 5px 0;
	}
}
/* 新卒採用
============================== */
.hMenuNew{
	height: 60%;
	background-color: var(--clrLRed);
	padding-top: 40px;
}
/* 中途採用
============================== */
.hMenuCareer{
	height: 40%;
	background-color: var(--clrMRed);
}
/* 各コンテンツ
============================== */
.hMenuPage,
.hMenuPage a{
	color: #fff;
}
.hMenuPage{
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(100% - 320px);
	background-color: var(--clrBlack);
	padding: 80px 50px;
}
/* --- リスト --- */
.hMenuPageList{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 60px 0;
	max-width: 820px;
}
@media print, screen and (min-width:813px){
	.hMenuPageList > li:nth-of-type(2n+1){
		/* 文字量増減したら調整 */
		width: 370px;
	}
	.hMenuPageList > li:nth-of-type(2n+2){
		/* 文字量増減したら調整 */
		width: 360px;
	}
}
/* --- タイトル --- */
.hMenuPageListTit{
	margin-bottom: 20px;
}
.hMenuPageListTit .en{
	display: block;
	color: var(--clrLRed);
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 1;
	margin-bottom: 8px;
}
.hMenuPageListTit .ja{
	font-size: 3.2rem;
}
/* 働く環境 */
.hMenuPageList li:nth-of-type(5) .hMenuPageListTit .ja .adjust{
	width: 24px;
	margin-left: -4px;
}
/* --- リスト IN --- */
.hMenuPageListIn{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.hMenuPageListIn a{
	display: flex;
	align-items: center;
	height: 100%;
	min-height: 40px;
	background-color: var(--clrWhite30);
	font-size: 1.3rem;
	line-height: 90%;
	padding: 5px 35px 5px 10px;
	position: relative;
}
.hMenuPageListIn a::after{
	content: " ";
	display: block;
	width: 10px;
	height: 8px;
	background: var(--icoArrowWhite);
	position: absolute;
	top: 50%;
	right: 10px;
	translate: 0 -50%;
	transition: var(--comTransition);
}
/* hover時 */
@media (any-hover: hover){
	.hMenuPageListIn a:hover{
		background-color: var(--clrWhite50);
	}
	.hMenuPageListIn a:hover::after{
		right: 5px;
	}
}



/* ==========================================================================
	footer
========================================================================== */
#footerWrapper{
	background-color: var(--clrBlack);
	margin-top: auto;
	position: relative;
}
.footerInArea,
.footerInArea a{
	color: #fff;
}
.footerInArea{
	display: flex;
	width: var(--wBase);
	padding-inline: 30px;
	margin-inline: auto;
}
.fLogoArea,
.fMenuArea{
	padding-block: 80px;
}

/* 
	ロゴエリア
---------------------------------------------------- */
.fLogoArea{
	display: flex;
	flex-direction: column;
	width: 260px;
	border-right: 1px solid var(--clrWhite30);
}
/* ロゴ
============================== */
.fLogo{
	width: fit-content;
}
.fLogo .en{
	display: block;
	font-size: 1.3rem;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 1;
	padding-left: 33px;
	margin-top: 5px;
}
/* --- hover時 --- */
@media (any-hover: hover){
	.fLogo:hover{
		opacity: 0.7;
	}
}
/* コーポレートリンク
============================== */
.fCorporateLink{
	width: fit-content;
	font-size: 1.3rem;
	margin-top: 40px;
	position: relative;
}
.fCorporateLink::after{
	content: " ";
	display: inline-block;
	width: 14px;
	aspect-ratio: 1/1;
	background: var(--icoLinkLRed);
	margin-left: 5px;
	translate: 0 3px;
}
/* hover時 */
@media (any-hover: hover){
	/* 文字量増減したら調整 */
	.fCorporateLink:hover{
		color: var(--clrLRed);
	}
}
/* コピーライト
============================== */
.fCopyright{
	font-size: 1.2rem;
	font-family: var(--fEn);
	font-weight: 300;
	margin-top: auto;
}

/* 
	メニューエリア
---------------------------------------------------- */
.fMenuArea{
	width: calc(var(--wBase) - 260px);
	padding-left: 60px;
}
.fMenuList{
	display: flex;
	flex-wrap: wrap;
	gap: 50px 60px;
}
@media print, screen and (min-width:813px){
	.fMenuList > li:nth-of-type(5){
		min-width: 162px;
	}
}
/* タイトル
============================== */
.fMenuListTit{
	font-size: 1.8rem;
	margin-bottom: 10px;
}
/* --- 働く環境 --- */
.fMenuList li:nth-of-type(5) .fMenuListTit .adjust{
	width: 15px;
	margin-left: -2px;
}
/* リスト IN
============================== */
.fMenuListIn{
	display: flex;
	flex-direction: column;
	gap: 10px 0;
}
.fMenuListIn a{
	display: block;
	width: fit-content;
	color: var(--clrWhite70);
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 130%;
}
/* hover時 */
@media (any-hover: hover){
	.fMenuListIn a:hover{
		translate: 5px 0;
	}
}

/* 
	ページトップ
---------------------------------------------------- */
#pageTop{
	writing-mode: vertical-rl;
	color: var(--clrLRed);
	font-size: 1.3rem;
	font-family: var(--fEn);
	font-weight: 700;
	padding-top: 20px;
	position: absolute;
	right: 30px;
	bottom: 30px;
	transition: var(--comTransition);
}
#pageTop::before{
	content: " ";
	display: block;
	width: 10px;
	height: 14px;
	background: var(--icoArrowLRed);
	rotate: -90deg;
	position: absolute;
	top: 0;
	left: 8px;
	transition: var(--comTransition);
}
/* hover時 */
@media (any-hover: hover){
	#pageTop:hover{
		filter: brightness(150%);
	}
	#pageTop:hover::before{
		translate: 0 -5px;
	}
}



/* ==========================================================================
	共通ページタイトル
========================================================================== */
#cmnPageTitWrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 280px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	margin-bottom: 60px;
}
.cmnPageTitIn{
	display: flex;
	flex-direction: column;
}
/* メイン
============================== */
.cmnPageTit{
	color: #fff;
	font-size: 8.8rem;
}
.cmnPageTitIn .cmnPageTit{
	order: 2;
}
/* サブ
============================== */
.cmnPageSubTit{
	width: fit-content;
	background-color: #000;
	color: #fff;
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1;
	padding: 5px 8px 7px 8px;
}
.cmnPageSubTit .en{
	display: inline-block;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 90%;
}
.cmnPageTitIn .cmnPageSubTit{
	order: 1;
	margin-bottom: 15px;
}
/* 平体文字 中黒用
============================== */
.cmnPageTit .middleDot{
	text-indent: -0.25em;
	letter-spacing: -0.25em;
}



/* ==========================================================================
	スクロールヒント
========================================================================== */
@media print, screen and (min-width:813px){
	.scroll-hint-icon-wrap{
		display: none;
	}
}
.scroll-hint-icon{
	height: 85px;
	background: var(--clrBlack50);
	padding: 30px 10px 10px 10px;
}

/* 
	指
---------------------------------------------------- */
.scroll-hint-icon:before{
	width: 24px;
	height: 24px;
	top: 15px;
}

/* 
	矢印
---------------------------------------------------- */
.scroll-hint-icon:after{
	width: 28px;
	height: 12px;
	background-size: 100% auto;
	margin-left: -16px;
	top: 15px;
}



@media screen and (max-width:812px){
	/* ==========================================================================
		Setting CSS
	========================================================================== */
	:root{
		/* width */
		--wBase: 100%;
		--w1000: 100%;
		/* リンクアイコン */
		--icoLinkLRed:  url("../images/ico_link_red_l_sp.svg") var(--bgCmn);
		--icoLinkMRed:  url("../images/ico_link_red_m_sp.svg") var(--bgCmn);
		--icoLinkWhite: url("../images/ico_link_white_sp.svg") var(--bgCmn);
	}
	body{
		-webkit-text-size-adjust: 100%;
		font-size: 1.4rem;
	}
	img{
		width: 100%;
	}
	p{
		line-height: 150%;
	}
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	br.sp{
		display: inline-block;
	}
	

	
	/* ==========================================================================
		common
	========================================================================== */
	/* 
		box
	---------------------------------------------------- */
	/* ctsWrapper
	============================== */
	#ctsWrapper{
		padding-block: 75px 60px;
	}
	#ctsWrapper.spaceS{
		padding-top: 75px;
	}
	#ctsWrapper.spaceL{
		padding-top: 100px;
	}
	/* ctsArea
	============================== */
	.ctsArea{
		max-width: 500px;
		padding: 0 20px 60px 20px;
	}

	/* 
		font / txt
	---------------------------------------------------- */
	/* リード文
	============================== */
	.cmnLeadTxt{
		text-align: justify;
		font-size: 1.5rem;
		margin-bottom: 40px;
	}

	/* 
		タイトル
	---------------------------------------------------- */
	/* 下線タイトル
	============================== */
	.lineBtmTit{
		padding-bottom: 13px;
		margin-bottom: 20px;
	}
	.lineBtmTit .horizTxt{
		font-size: 2.7rem;
	}
	/* --- Lサイズ --- */
	.lineBtmTit.sizeL{
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 6px 0;
	}
	.lineBtmTit.sizeL .horizTxt{
		font-size: 3.8rem;
	}
	.lineBtmTit.sizeL .en{
		font-size: 1.2rem;
	}
	/* --- 数字あり --- */
	.lineBtmTit .num{
		font-size: 1.4rem;
		translate: 2px 14px;
	}
	/* decEnTit
	============================== */
	.decEnTit{
		margin-bottom: 20px;
	}
	.decEnTit .ja{
		font-size: 3.2rem;
	}
	.decEnTit .ja .sizeL{
		font-size: 4.6rem;
	}
	.decEnTit .en{
		font-size: 1.4rem;
		margin-top: 8px;
	}
	.decEnTit:has(.ja .sizeL) .en{
		margin-top: 5px;
	}
	/* ノーマル平体タイトル
	============================== */
	.normalTit{
		font-size: 2.6rem;
		margin-bottom: 15px;
	}
	/* 複数行改行マーカー
	============================== */
	.markerTit > span{
		font-size: 1.6rem;
		line-height: 225%;
		padding: 3px 8px 6px 8px;
	}

	/* 
		ボタンアイコン
	---------------------------------------------------- */
	/* 内部リンクボタン 外部リンクボタン アイコン
	============================== */
	[class *= "arrowIco"]::after,
	[class *= "linkIco"]::after{
		right: 10px;
	}
	/* --- 内部リンクボタン --- */
	[class *= "arrowIco"]::after{
		width: 12px;
		height: 10px;
	}
	/* --- 外部リンクボタン --- */
	[class *= "linkIco"]::after{
		width: 12px;
	}
	/* 矢印パーツ（線付き）
	============================== */
	/* --- 箱付き矢印・矢印のみ　共通 --- */
	.arrowBtn::before,
	[class *= "arrowItem"]::before{
		width: 16px;
		height: 12px;
	}
	.arrowBtn::after,
	[class *= "arrowItem"]::after{
		width: 16px;
	}
	/* --- 箱付き矢印 --- */
	.arrowBtn{
		width: 70px;
		height: 40px;
	}
	.arrowBtn::before{
		left: calc(50% + 6px);
	}
	.arrowBtn::after{
		left: calc(50% - 6px);
	}
	/* --- 矢印のみ --- */
	[class *= "arrowItem"]{
		width: 28px;
		height: 12px;
		right: 10px;
	}
	
	/* 
		ボタン
	---------------------------------------------------- */
	.btnArea{
		flex-direction: column;
		gap: 10px 0;
		margin-top: 30px;
	}
	.btnArea [class *= "baseBtn"]{
		width: 100%;
	}
	/* ベースボタン
	============================== */
	[class *= "baseBtn"]{
		min-height: 50px;
		letter-spacing: 0.1rem;
		padding: 8px 30px 8px 10px;
	}
	[class *= "baseBtn"].btnL{
		min-height: 64px;
		font-size: 1.6rem;
	}
	/* チェックボタン
	============================== */
	.checkBtn{
		padding-inline: 50px 30px;
	}
	/* --- チェックアイコン --- */
	.checkBtnIco{
		width: 40px;
		font-size: 1rem;
	}
	.checkBtnIco::before{
		width: 20px;
		font-size: 1.5rem;
	}

	/* 
		リスト
	---------------------------------------------------- */
	/* 丸リスト
	============================== */
	.circleList{
		gap: 6px 0;
	}
	.circleList > li{
		padding-left: 13px;
	}
	.circleList > li::before{
		width: 9px;
		top: 5px;
	}
	/* 矢印ボタンリスト
	============================== */
	.arrowBtnList a{
		min-height: 60px;
		padding: 8px 50px 8px 15px;
	}
	.arrowBtnList a::before{
		width: 16px;
		height: 12px;
		right: 10px;
	}
	.arrowBtnList a::after{
		width: 16px;
		right: 22px;
	}
	/* ステップリスト
	============================== */
	.stepList{
		gap: 40px 0;
	}
	.stepList > li{
		padding-left: 30px;
	}
	/* --- 丸と線 擬似要素 --- */
	/* 丸 */
	.stepList > li::before{
		width: 13px;
		top: 0;
	}
	/* 線 */
	.stepList > li::after{
		height: calc(100% + 40px);
		top: 2px;
		left: 5px;
	}
	/* --- タイトル --- */
	.stepListTit .num{
		font-size: 1.2rem;
	}
	.stepListTit .tit{
		font-size: 1.7rem;
	}
	/* --- 本文 --- */
	.stepListTxt,
	.stepList .circleList{
		margin-top: 10px;
	}
	/* --- ボタン --- */
	.stepList li > .checkBtn,
	.stepList li > .btnArea,
	.stepList li > .baseBtn{
		margin-top: 13px;
	}
	/* トグルリスト
	============================== */
	/* --- タイトル --- */
	.toggleTit{
		font-size: 1.5rem;
		padding: 20px 25px 20px 0;
	}
	/* --- +- --- */
	.toggleTit::before,
	.toggleTit::after{
		width: 15px;
		top: 31px;
	}
	/* --- 展開エリア --- */
	.toggleOpenArea{
		padding-bottom: 20px;
	}

	/* 
		table
	---------------------------------------------------- */
	/* メモ：
		.baseTable      ：sp時 block
		.baseTableScroll：sp時 横スクロール
	*/
	
	/* 共通
	============================== */
	[class *= "baseTable"] tr > *{
		line-height: 150%;
		padding: 15px;
	}
	/* baseTable 通常
	============================== */
	.baseTable tr,
	.baseTable tr > *{
		display: block;
		width: 100%;
	}
	.baseTable th{
		width: 100%;
		padding: 15px 0 5px 0;
	}
	.baseTable td{
		padding: 0 0 15px 0;
	}
	/* baseTableScroll スクロール用
	============================== */
	/* --- tblScrollArea --- */
	.tblScrollArea{
		width: 100%;
		overflow-x: scroll !important;
	}
	/* --- thead --- */
	.baseTableScroll thead th{
		padding: 5px 15px;
	}
	/* --- tbody --- */
	.baseTableScroll tbody th{
		padding-left: 0;
	}

	/*
		モーダル
	-----------------------------------------------------------------------------------------------*/
	/* モーダル内側の指定 */
	.modalContainer{
		width: 80%;
	}

	/* デザイン
	============================== */
	/* モーダル閉じるボタン */
	.modalClose::before,
	.modalClose::after{
		width: 30px;
	}
	.modalClose::before{
		transform: rotate(25deg);
		top: -15px;
	}
	.modalClose::after{
		transform: rotate(-25deg);
		top: -15px;
	}
	/* コンテンツBox */
	.modalContent{
		padding: 25px;
		width: 100%;
		min-width: 100%;
	}



	/* ==========================================================================
		header
	========================================================================== */
	#headerWrapper{
		min-width: initial;
		padding: 15px 0 0 10px;
	}

	/* 
		ロゴ
	---------------------------------------------------- */
	.hLogoArea a{
		flex-direction: column;
		align-items: flex-start;
		gap: 8px 0;
	}
	.hLogo{
		width: 160px;
	}
	.hLogoRecruit{
		width: 70px;
	}

	/* 
		ボタンエリア
	---------------------------------------------------- */
	.hBtnArea{
		height: 40px;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 2;
	}
	/* メニューボタン
	============================== */
	.hMenuBtn{
		width: 100px;
		font-size: 1.3rem;
		padding-left: 12px;
	}
	.hMenuBtn::before,
	.hMenuBtn span,
	.hMenuBtn::after{
		width: 30px;
		right: 12px;
	}
	.hMenuBtn::before{
		translate: 0 -6px;
	}
	.hMenuBtn::after{
		translate: 0 6px;
	}

	/* 
		メガメニュー
	---------------------------------------------------- */
	.hMenuInArea{
		flex-direction: column;
	}
	/* インターンシップはこちら
	============================== */
	.hInternshipBtn{
		position: fixed;
		bottom: 0;
		left: 0;
		order: 2;
		width: 100%;
		height: 50px;
		padding-left: 50px;
		background-color: var(--clrDRed);
		font-size: 1.3rem;
		justify-content: center;
	}
	.hInternshipBtn::after{
		width: 12px;
		top: 50%;
		right: 20px;
		translate: 0 -50%;
	}
	/* ロゴ
	============================== */
	.hMenuLogoArea{
		display: none;
	}
	/* 新卒採用/中途採用 共通
	============================== */
	.hMenuRecruit{
		order: 3;
		flex-direction: row;
		border-top: 1px solid var(--clrBlack);
		padding-bottom: 50px;
	}
	.hMenuRecruitBox{
		width: calc(100%/2);
		height: auto;
		padding: 20px;
	}
	/* --- タイトル --- */
	.hMenuRecruitTit{
		font-size: 2.2rem;
	}
	/* --- ボタン --- */
	.hMenuRecruitBox .baseBtn{
		font-size: 1.3rem;
		margin-top: 15px;
	}
	/* --- リスト --- */
	.hMenuRecruitBox .arrowIcoListWhite{
		font-size: 1.2rem;
		margin-top: 20px;
	}
	/* 新卒採用
	============================== */
	.hMenuNew{
		padding-top: 20px;
	}
	/* 各コンテンツ
	============================== */
	.hMenuPage{
		order: 1;
		display: block;
		width: 100%;
		padding: 50px 20px 30px 20px;
	}
	/* --- リスト --- */
	.hMenuPageList{
		flex-direction: column;
		gap: 30px 0;
		width: 100%;
	}
	/* --- タイトル --- */
	.hMenuPageListTit{
		margin-bottom: 15px;
	}
	.hMenuPageListTit .en{
		font-size: 1.2rem;
		margin-bottom: 5px;
	}
	.hMenuPageListTit .ja{
		font-size: 2.6rem;
	}
	/* --- リスト IN --- */
	.hMenuPageListIn{
		gap: 8px;
	}
	.hMenuPageListIn li{
		width: calc((100% - 8px)/2);
	}
	.hMenuPageListIn a{
		min-height: 46px;
		font-size: 1.2rem;
		line-height: 130%;
		padding-right: 25px;
	}
	.hMenuPageListIn a::after{
		right: 7px;
	}



	/* ==========================================================================
		footer
	========================================================================== */
	.footerInArea{
		flex-direction: column;
		padding-inline: 20px;
	}
	.fLogoArea{
		padding-block: 20px 70px;
	}

	/* 
		ロゴエリア
	---------------------------------------------------- */
	.fLogoArea{
		align-items: center;
		width: 100%;
		border-right: none;
	}
	/* ロゴ
	============================== */
	.fLogo img{
		width: 150px;
	}
	.fLogo .en{
		font-size: 1.2rem;
		font-weight: 400;
		padding-left: 27px;
	}
	/* コーポレートリンク
	============================== */
	.fCorporateLink{
		font-size: 1.2rem;
		margin-top: 20px;
	}
	.fCorporateLink::after{
		width: 12px;
	}
	/* コピーライト
	============================== */
	.fCopyright{
		text-align: center;
		font-size: 1rem;
		margin-top: 20px;
	}

	/* 
		メニューエリア
	---------------------------------------------------- */
	.fMenuArea{
		display: none;
	}

	/* 
		ページトップ
	---------------------------------------------------- */
	#pageTop{
		font-size: 1.1rem;
		right: 15px;
		bottom: 70px;
	}
	#pageTop::before{
		left: 6px;
	}



	/* ==========================================================================
		共通ページタイトル
	========================================================================== */
	#cmnPageTitWrapper{
		min-height: 160px;
		margin-bottom: 40px;
	}
	/* メイン
	============================== */
	.cmnPageTit{
		font-size: 3.6rem;
	}
	/* サブ
	============================== */
	.cmnPageSubTit{
		font-size: 1.3rem;
		padding-bottom: 6px;
	}
	.cmnPageTitIn .cmnPageSubTit{
		margin-bottom: 10px;
	}
}