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

html{
	margin: 0;
	padding: 0;
	font-size: 62.5%;
}
body{
	margin: 0 auto;
	padding: 0;
	font-size: 1.5em;
	background-color: var(--clLGray);
}
header,footer,section,aside,nav,article,main{
	display: block;
}
h1, h2, h3, h4, h5, h6, figure,
p, ul, ol, li, dl, dt, dd{
	margin: 0;
	padding: 0;
}
ul li, ol li{
	list-style: none;
}
img {
	border: none;
	vertical-align: top;
	margin: 0;
	padding: 0;
}
*, *::before, *::after{
	box-sizing: border-box;
}

/* button初期化 */
button{
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	margin: 0;
	font-family: inherit;
	background: none;
	border: none;
	outline: none;
}
@media (any-hover: hover){
	button:hover{
		cursor: pointer;
	}
}
@media print, screen and (812px < width){
	/* iPad背景切れ対策 */
	body,#headArea{
		min-width:1200px;
	}
	
	/* tel pcのみ無効 */
	a[href^="tel:"]{
		pointer-events: none;
	}
}

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


/*
	base_setting
-----------------------------------------------------------------------------------------------*/
/* 変数
========================================*/
:root{
	/* color */
	--clRed: #B4080A;
	--clDRed: #96080A;
	--clNavy: #063757;
	--clGold: #9C8D00;
	--clGreen: #5A8232;
	--clLGray: #EBEBEB;
	--clGray: #D2D2D2;
	--clDGray: #888888;
	--clNearlyBlack: #333333;

	/* width */
	--col1Width: 1200px;
	--col1WidthNarrow: 1060px;

	/* pattern */
	--patGrid: 
		linear-gradient(to right, transparent 17px, var(--clGold) 17px) left top / 18px 100% repeat-x,
		linear-gradient(to bottom, transparent 17px, var(--clGold) 17px) left top / 100% 18px repeat-y;
	--patGridW: 
		linear-gradient(to right, transparent 17px, rgb(255 255 255 / 0.3) 17px) left top / 18px 100% repeat-x,
		linear-gradient(to bottom, transparent 17px, rgb(255 255 255 / 0.3) 17px) left top / 100% 18px repeat-y;
	--patGridLW: 
		linear-gradient(to right, transparent 17px, rgb(255 255 255 / 0.08) 17px) left top / 18px 100% repeat-x,
		linear-gradient(to bottom, transparent 17px, rgb(255 255 255 / 0.08) 17px) left top / 100% 18px repeat-y;
	--patGridGray: 
		linear-gradient(to right, transparent 17px, rgb(0 0 0 / 0.04) 17px) left top / 18px 100% repeat-x,
		linear-gradient(to bottom, transparent 17px, rgb(0 0 0 / 0.04) 17px) left top / 100% 18px repeat-y;
	--patSlash: repeating-linear-gradient(-45deg, transparent, transparent 6px, var(--clGold) 8px, var(--clGold) 8px);
	--patDots:
		radial-gradient(circle, var(--clGold) 1px, transparent 1px) left top / 16px 32px,
		radial-gradient(circle, var(--clGold) 1px, transparent 1px) 8px 16px / 16px 32px;
	--patWave: url(../images/pat_wave.svg) left top no-repeat;
	
	/* font */
	--ffNoto: 'Noto Sans JP', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	--ffEn: 'Jost', 'Noto Sans JP', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;

	/* transition */
	--trstCmn: all 0.25s;
}

/* wrapper
========================================*/
#wrapper{
	font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 400;
	font-feature-settings: 'palt';
	letter-spacing: 0.1em;
	color: var(--mainBlack);
	word-break: break-all;
	position:relative;
	overflow:hidden;
	opacity: 0;
	animation: fadeIn 0.2s ease 0.2s forwards;
}
#ctsWrapper {
	padding-bottom: 120px;
	background-color: var(--clLGray);/* chromeでヘッダのblurを効かせるため背景色を指定 */
}

/* ctsArea
========================================*/
.ctsArea{
	width: var(--col1Width);
	padding: 0 30px 80px 30px;
	margin: 0 auto;
}
.ctsArea:last-of-type {
	padding-bottom: 0;
}
.ctsArea.wNarrow{
	width: var(--col1WidthNarrow);
}

/* リンク
========================================*/
a{
	color: #000000;
	text-decoration: none;
	transition: color 0.25s;
}
a:link,a:visited{
	color: #000000;
}
@media (any-hover: hover){
	a:hover{
		color: var(--clNavyBlue);
		text-decoration: none;
	}
}
/* 別窓 */
.windowLink::after,.windowLinkS::after{
	content: ' ';
	display: inline-block;
	width: 13px;
	height: 9px;
	margin-left: 6px;
	background: url(../images/ico_window_w_large.svg) left top / contain no-repeat;
	opacity: 0.5;
	transition: var(--trstCmn);
}
.windowLinkS::after{
	width: 10px;
	height: 7px;
	margin-left: 6px;
	background-image: url(../images/ico_window_w.svg);
}
/* txtLink */
.txtLink{
	text-decoration: underline;
}

/* 文字
========================================*/
/* 書体 */
.ffEn{
	font-family: var(--ffEn);
}
/* サイズ */
.fsS{
	font-size:1.2rem;
}
/* 太さ */
.fwB{
	font-weight:600;
}
/* 色 */
.clRed{
	color: var(--clRed);
}

/* 長体 */
[class*="aspectratio"]{
	display:inline-block;
	white-space:nowrap;
	transform-origin:left center;
}
.aspectratio90{
	transform:scaleX(0.9);
}
.aspectratio85{
	transform:scaleX(0.85);
}
.aspectratio80{
	transform:scaleX(0.8);
}
.aspectratio75{
	transform:scaleX(0.75);
}
[class*="aspectratio"].originCenter{
	transform-origin: center center;
}
/* 文字詰 */
.ls-01{
	letter-spacing: -0.1em;
}
.ls-005{
	letter-spacing: -0.05em;
}
.ls00{
	letter-spacing: 0;
}
.ls005{
	letter-spacing: 0.05em;
}
.ls01{
	letter-spacing: 0.1em;
}
@media screen and (812px < width){
	.ls-01PC{
		letter-spacing:-0.1em;
	}
}

/* ボタン
========================================*/
/* VIEW 黒ベタ＋罫線 */
a.btnView{
	display: grid;
	align-content: center;
	width: fit-content;
	min-width: 150px;
	min-height: 25px;
	padding: 1px 0 0 10px;
	font-family: var(--ffEn);
	font-size: 1.1rem;
	font-weight: 800;
	color: #FFFFFF;
	line-height: 100%;
	background-color: #000;
	position: relative;
	transition: var(--trstCmn);
}
a.btnView::after{
	content: ' ';
	display: block;
	width: 120px;
	height: 1px;
	background: linear-gradient(to right, rgb(255 255 255 / 0.5) 50%, rgb(0 0 0 / 0.5) 50%);
	position: absolute;
	top: 11px;
	left: 90px;
	transition: all 0.3s;
}
@media (any-hover: hover){
	a.btnView:hover{
		background-color: var(--clGold);
	}
	a.btnView:hover::after{
		width: 0;
		right: -60px;
		left: auto;
	}
}
/* 下線 + > */
a.btnBtmLine{
	display: block;
	width: fit-content;
	padding: 0 20px 8px 0;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 100%;
	background: url(../images/ico_arrow.svg) right 5px top 1px no-repeat;
	position: relative;
	transition: var(--trstCmn);
}
a.btnBtmLine::after{
	content: ' ';
	display: block;
	width: 100%;
	height: 1px;
	background-color: #000000;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: all 0.25s;
}
@media (any-hover: hover){
	a.btnBtmLine:hover{
		background-position-x: right;
	}
	a.btnBtmLine:hover::after{
		width: 0;
		right: 0;
		left: auto;
	}
}

/* PC非表示
========================================*/
#spFixEntryArea{
	display: none;
}


/*
	header
-----------------------------------------------------------------------------------------------*/
#headArea{
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 96px;
	padding-inline: 10px 20px;
	position: fixed;
	z-index: 100;
	transition: var(--trstCmn);
}

/* ロゴ
========================================*/
#headLogo{
	padding-top: 10px;
}
#headLogo a{
	display: block;
}
#headLogo img{
	display: block;
	height: 36px;
	transition: var(--trstCmn);
}
#headLogo a .txt{
	display: block;
	padding-left: 38px;
	margin-top: 6px;
	font-family: var(--ffEn);
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: 0.24em;
	transition: var(--trstCmn);
}
@media (any-hover: hover){
	#headLogo a:hover{
		color: var(--clRed);
	}
}

/* エントリーリンクリスト
========================================*/
.listEntryLink{
	display: flex;
	justify-content: flex-end;
	gap: 5px;
	margin-bottom: 20px;
}
.listEntryLink a.btnHead{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	min-height: 42px;
	padding: 0 10px 1px 10px;
	font-family: var(--ffEn);
	font-size: 1.2rem;
	font-weight: 600;
	color: #FFFFFF;
	background-color: var(--clRed);
	transition: var(--trstCmn);
}
.listEntryLink a.btnHead .en{
	font-weight: 600;
}
.listEntryLink a.btnHead .italic{
	font-style: italic;
}
/* エントリー */
.listEntryLink a.btnHead.entry{
	justify-content: space-between;
}
.listEntryLink a.btnHead.entry{
	font-size: 1.3rem;
}
/* 仕事体験 */
.listEntryLink a.btnHead.WE{
	background-color: var(--clNearlyBlack);
}
@media (any-hover: hover){
	.listEntryLink a.btnHead:hover{
		background-color: var(--clDRed);
	}
	.listEntryLink a.btnHead.WE:hover{
		background-color: #000000;
	}
}

/* Gnav
========================================*/
#listGnav{
	display: flex;
	justify-content: flex-end;
	gap: 0 20px;
}
#listGnav > li{
	position: relative;
}
#listGnav > li > a,
#listGnav > li > .category{
	display: block;
	padding-bottom: 20px;
	font-family: var(--ffEn);
	font-size: 1.4rem;
	color: var(--clDGray);
	line-height: 100%;
	transition: var(--trstCmn);
}
@media screen and (812px < width) and (any-hover: hover){
	#listGnav > li > a:hover,
	#listGnav > li > .category:hover{
		color: #000000;
	}
	#listGnav > li > .category:hover{
		cursor: default;
	}
}
@media screen and (812px < width){
	/* 装飾_下線 */
	#listGnav > li > a::after,
	#listGnav > li > .category::after{
		content: ' ';
		display: block;
		width: 0;
		height: 1px;
		background-color: #000000;
		position: absolute;
		bottom: 0;
		right: 0;
		transition: var(--trstCmn);
	}
	#listGnav > li > a:hover::after,
	#listGnav li.jsMMOpen .category::after{
		width: 100%;
		right: auto;
		left: 0;
	}
}
/* メガメニュー */
#listGnav > li.jsMMOpen > .category{
	color: #000000;
}
.listGnavSub{
	display: none;
	width: fit-content;
	font-size: 1.2rem;
	white-space: nowrap;
	background-color: rgb(225 225 225 / 0.9);
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}
.listGnavSub li:nth-of-type(n+2){
	margin-top: 0px;
}
.listGnavSub > li > a{
	display: block;
	padding: 16px 35px 18px 15px;
	background: url(../images/ico_arrow.svg) right 15px center no-repeat;
	transition: var(--trstCmn);
}
@media (any-hover: hover){
	.listGnavSub li a:hover{
		background-color: rgb(255 255 255 / 0.8);
		background-position-x: right 10px;
	}
}
.listGnavSubIn{
	background-color: rgb(0 0 0 / 0.1);
}
.listGnavSubIn > li > a{
	display: block;
	padding: 10px 35px 12px 15px;
	font-size: 1rem;
	background: url(../images/ico_arrow_single.svg) right 17px center no-repeat;
	transition: var(--trstCmn);
}
.listGnavSubIn > li:nth-of-type(n+2) > a{
	border-top: 1px solid rgb(0 0 0 / 0.15);
}
@media (any-hover: hover){
	.listGnavSubIn li a:hover{
		background-position-x: right 14px;
	}
}


/* 追従
========================================*/
#headArea.jsHeaderScroll{
	height: auto;
	background-color: rgb(245 245 245 / 0.9);
	backdrop-filter: blur(10px);
	transition: all 0.4s;
}
#headArea.jsHeaderScroll #headLogo img{
	height: 28px;
}
#headArea.jsHeaderScroll #headLogo a .txt {
	padding-left: 30px;
	font-size: 1rem;
}
@media screen and (812px < width){
	#headArea.jsHeaderScroll .listEntryLink{
		margin-bottom: 15px;
	}
	#headArea.jsHeaderScroll .listEntryLink a.btnHead{
		min-height: 32px;
		padding: 0 10px 1px 10px;
		font-size: 1.1rem;
	}
	#headArea.jsHeaderScroll .listEntryLink a.btnHead .entry{
		font-size: 1.2rem;
	}
	#headArea.jsHeaderScroll #listGnav > li > a,
	#headArea.jsHeaderScroll #listGnav > li > .category{
		padding-bottom: 15px;
		font-size: 1.3rem;
	}
}

/* 
	modal
-----------------------------------------------------------------------------------------------*/
/* サムネイル */
.thumbModal{
	position: relative;
}
.thumbModal::after{
	content: ' ';
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 0.15);
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	transition: var(--trstCmn);
}
.icoPlay{
	display: grid;
	place-content: center;
	width: 74px;
	height: 50px;
	padding: 0 0 0 4px;
	margin: auto;
	background-color: var(--clRed);
	border-radius: 50%;
	position: absolute;
	inset: 0 0 22px 0;
	z-index: 1;
	transition: all 0.3s;
	pointer-events: none;
}
@media (any-hover: hover){
	.thumbModal:hover::after{
		background-color: rgb(0 0 0 / 0.3);
	}
	.thumbModal:hover .icoPlay{
		width: 88px;
		height: 60px;
	}
}
/* ボタン_開く */
.jsModalOpen{
	cursor: pointer;
}
/* モーダルと背景の指定 */
.modal{
	width: 100%;
	height: 100%;
	background: rgb(34 34 34 / 90%);
	padding: 40px 20px;
	position: fixed;
	top: 0;
	left: 0;
	transition: all 0.3s;
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
	z-index: 9999;
}
/* モーダル表示 */
.modal.jsModalActive{
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}
/* モーダル内側の指定 */
.modalContainer{
	display: block;
	width: fit-content;
	max-width: 900px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* ボタン_閉じる */
.btnModalClose,.btnModalClose:focus{
	width: 60px;
	height: 40px;
	border: 1px solid var(--clDGray);
	border-radius: 50%;
	position: absolute;
	top: -50px;
	right: -30px;
	transition: var(--trstCmn);
}
@media (any-hover: hover){
	.btnModalClose:hover{
		background-color: var(--clGray);
	}
}
.btnModalClose::before,.btnModalClose::after{
	content: ' ';
	display: block;
	width: 1px;
	height: 20px;
	background-color: var(--clDGray);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(54deg);
}
.btnModalClose::after{
	transform: translate(-50%,-50%) rotate(-54deg);
}


/*
	下層ページ（共通）
-----------------------------------------------------------------------------------------------*/
/* ページタイトル
========================================*/
#cmnPageHead{
	display: grid;
	place-content: center;
	height: 420px;
	padding-top: 30px;
	position: relative;
	z-index: 1;
}
#cmnPageHead .tit, #cmnPageHead .lead{
	width: var(--col1Width);
	padding: 0 30px;
	margin: 0 auto;
}
/* 日本語ページタイトル */
#cmnPageHead .tit{
	font-size: 5rem;
	font-weight: 900;
	color: var(--clNavy);
	line-height: 100%;
}
/* 英語カテゴリ_2行 */
#cmnPageHead .enCategory, #itvKvArea .enCategory{
	font-family: var(--ffEn);
	font-size: 16rem;
	font-weight: 800;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 85%;
	white-space: nowrap;
	position: absolute;
	top: -13px;
	left: max(calc(50% - 450px), 250px);
	z-index: -1;
	transform-origin: left top;
	transform: rotate(90deg);
}
/* リード */
#cmnPageHead .lead{
	margin-top: 20px;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	line-height: 170%;
}
#cmnPageHead .lead.jsAnmStart{
	animation-duration: 0.55s;
	animation-delay: 0.55s;
}
/* 紺帯タイトル */
/* 見出し */
.titBarNavy{
	align-items: center;
	background: var(--clNavy);
	color: #fff;
	display: flex;
	font-size: 2.6rem;
	font-weight: 700;
	height: 58px;
	letter-spacing: 0.13em;
	line-height: 100%;
	padding: 0 20px;
	overflow-y: hidden;
}
.titBarNavy > span{
	margin-inline: auto;
}


/* 
	footer
-----------------------------------------------------------------------------------------------*/
#footArea{
	position: relative;
}
/* 白背景
========================================*/
.footTopArea{
	background-color: #FFFFFF;
}
.footTopArea .ctsArea{
	display: flex;
	justify-content: space-between;
	padding-block: 55px 53px;
}
/* サイト内リンク */
.dlistFootTopLink{
	display: flex;
	gap: 0 100px;
}
.dlistFootTopLink > div{
	display: flex;
	align-items: center;
	gap: 0 30px;
}
.dlistFootTopLink dt{
	font-family: var(--ffEn);
	font-size: 2.1rem;
	font-weight: 700;
	letter-spacing: 0;
}
.dlistFootTopLink dd a{
	display: block;
	padding: 7px 23px 8px 0;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 100%;
	background: url(../images/ico_arrow.svg) right 5px center no-repeat;
	position: relative;
	transition: var(--trstCmn);
}
.dlistFootTopLink dd a::after{
	content: ' ';
	display: block;
	width: 0;
	height: 1px;
	background-color: #000;
	position: absolute;
	bottom: 0;
	right: 23px;
	transition: var(--trstCmn);
}
@media (any-hover: hover){
	.dlistFootTopLink dd a:hover{
		background-position-x: right 0;
	}
	.dlistFootTopLink dd a:hover::after{
		width: calc(100% - 23px);
		right: auto;
		left: 0;
	}
}
/* SNS */
.listSns{
	display: flex;
	align-items: center;
	gap: 0 18px;
	width: fit-content;
}
.listSns li a img{
	transition: var(--trstCmn);
}
@media (any-hover: hover){
	.listSns li a:hover img{
		opacity: 0.5;
	}
}

/* 黒背景
========================================*/
.footBtmArea{
	padding-block: 98px 35px;
	background-color: #000000;
}
/* Grid */
.listFootNav{
	display: grid;
	grid-template-columns: repeat(4, auto);
	grid-auto-flow: column;
	gap: 30px 100px;
	width: fit-content;
	margin-inline: auto;
}
.listFootNav li.span1-2{
	grid-row: span 2;
}
/* サイト内リンク_カテゴリ */
.listFootNav li .tit{
	margin-bottom: 15px;
	font-family: var(--ffEn);
	font-size: 1.5rem;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 100%;
	position: relative;
}
.listFootNav li .tit::after{
	content: ' ';
	display: block;
	width: 100%;
	height: 1px;
	background-color: rgb(255 255 255 / 0.2);
	position: absolute;
	left: 0;
	bottom: 2px;
}
/* サイト内リンク */
.listFootLink li:nth-of-type(n+2){
	margin-top: 5px;
}
.listFootLink li a{
	font-size: 1.3rem;
	color: rgb(255 255 255 / 0.5);
	transition: var(--trstCmn);
}
.listFootLink.people li:nth-of-type(n+2) a{
	font-size: 1.1rem;
}
@media (any-hover: hover){
	.listFootLink li a:hover{
		color: rgb(255 255 255 / 1);
	}
}
/* Endエリア */
.footEndArea{
	display: flex;
	justify-content: space-between;
	margin-top: 100px;
	font-family: var(--ffEn);
	font-size: 1.2rem;
	color: #FFFFFF;
	position: relative;
}
.footEndArea a{
	color: #FFFFFF;
	transition: var(--trstCmn);
}
.footEndArea .listLink{
	display: flex;
	gap: 0 20px;
}
.copyright{
	width: fit-content;
	margin: auto;
	position: absolute;
	inset: 0;
}
a#pageTop{
	padding-right: 15px;
	font-size: 1.2rem;
	position: relative;
	transition: var(--trstCmn);
}
a#pageTop::after{
	content: ' ';
	display: block;
	width: 10px;
	height: 10px;
	background: url(../images/ico_arrow_pagetop.svg) left top no-repeat;
	opacity: 0.5;
	position: absolute;
	top: 4px;
	right: 0;
	transition: var(--trstCmn);
}
@media (any-hover: hover){
	.footEndArea a:hover{
		color: rgb(255 255 255 / 0.5);
	}
	.footEndArea a.windowLink:hover::after{
		opacity: 0.3;
	}
	a#pageTop:hover::after{
		top: 1px;
	}
}

/* 
	SP
-----------------------------------------------------------------------------------------------*/
@media screen and (width <= 812px){
	body{
		font-size: 1.4em;
		-webkit-text-size-adjust:100%;
	}
	img{
		width:100%;
	}
	p{
		line-height: 160%;
	}
	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
	br.sp{
		display:inline-block;
	}
	.wrapper a{
		text-decoration: none;
	}
	/*
		base_setting
	-----------------------------------------------------------------------------------------------*/
	/* 変数
	========================================*/
	:root{
		/* width */
		--col1Width: 100%;
		--col1WidthNarrow: 100%;
		
		/* pattern */
		--patGrid: 
			linear-gradient(to right, transparent 11px, var(--clGold) 11px) left top / 12px 100% repeat-x,
			linear-gradient(to bottom, transparent 11px, var(--clGold) 11px) left top / 100% 12px repeat-y;
		--patGridW: 
			linear-gradient(to right, transparent 11px, rgb(255 255 255 / 0.3) 11px) left top / 12px 100% repeat-x,
			linear-gradient(to bottom, transparent 11px, rgb(255 255 255 / 0.3) 11px) left top / 100% 12px repeat-y;
		--patGridLW: 
			linear-gradient(to right, transparent 17px, rgb(255 255 255 / 0.08) 11px) left top / 12px 100% repeat-x,
			linear-gradient(to bottom, transparent 17px, rgb(255 255 255 / 0.08) 11px) left top / 100% 12px repeat-y;
		--patGridGray: 
			linear-gradient(to right, transparent 11px, rgb(0 0 0 / 0.04) 11px) left top / 12px 100% repeat-x,
			linear-gradient(to bottom, transparent 11px, rgb(0 0 0 / 0.04) 11px) left top / 100% 12px repeat-y;
		--patSlash: repeating-linear-gradient(-45deg, transparent, transparent 4px, var(--clGold) 6px, var(--clGold) 6px);
		--patDots:
		radial-gradient(circle, var(--clGold) 1px, transparent 1px) left top / 12px 24px,
		radial-gradient(circle, var(--clGold) 1px, transparent 1px) 6px 12px / 12px 24px;
		--patWave: url(../images/pat_wave_sp.svg) left top no-repeat;
	}

	/* wrapper
	========================================*/
	#ctsWrapper {
		padding-bottom: 60px;
	}

	/* ctsArea
	========================================*/
	.ctsArea{
		max-width: 500px;
		padding: 0 25px 80px 25px;
	}
	.ctsArea:last-of-type {
		padding-bottom: 0;
	}

	/* リンク
	========================================*/
	/* 別窓 */
	.windowLink::after,.windowLinkS::after{
		width: 10px;
		height: 7px;
		margin-left: 5px;
		background-image: url(../images/ico_window_w.svg);
	}

	/* ボタン
	========================================*/
	/* VIEW 黒ベタ＋罫線 */
	a.btnView{
		min-width: 115px;
		min-height: 20px;
		padding: 2px 0 0 8px;
		font-size: 1rem;
	}
	a.btnView::after{
		width: 80px;
		height: 1px;
		background: linear-gradient(to right, rgb(255 255 255 / 0.5) 50%, rgb(0 0 0 / 0.5) 50%);
		position: absolute;
		top: 9px;
		left: 75px;
	}
	@media (any-hover: hover){
		a.btnView:hover::after{
			width: 0;
			right: -40px;
			left: auto;
		}
	}
	/* 下線 + > */
	a.btnBtmLine{
		font-size: 1.0rem;
		letter-spacing: 0.075em;
	}


	/*
		header
	-----------------------------------------------------------------------------------------------*/
	#headArea{
		height: auto;
		padding: 0 15px 7px 8px;
		z-index: 1000;
	}

	/* ロゴ
	========================================*/
	#headLogo{
		padding-top: 8px;
		z-index: 1000;
	}
	#headLogo img{
		width: auto;
		height: 27px;
	}
	#headLogo a .txt{
		padding-left: 29px;
		margin-top: 3px;
		font-size: 1rem;
		letter-spacing: 0.18em;
	}

	/* ハンバーガー_ボタン
	========================================*/
	#btnHmbg{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		gap: 4px 0;
		width: 20px;
		height: 30px;
		margin-top: 12px;
		position: relative;
		z-index: 1000;
		transition: var(--trstCmn);
	}
	#btnHmbg::before,#btnHmbg::after{
		content: ' ';
		display: block;
		width: 20px;
		height: 1px;
		background-color: #000000;
		transition: var(--trstCmn);
	}
	#btnHmbg::after{
		width: 10px;
	}
	/* active */
	#btnHmbg.jsActive::before,#btnHmbg.jsActive::after{
		position: absolute;
		top: 50%;
		transform: rotate(144deg);
		transition: var(--trstCmn);
	}
	#btnHmbg.jsActive::after{
		width: 20px;
		transform: rotate(-144deg);
	}

	/* ハンバーガー_展開
	========================================*/
	/* overlay */
	#gNavOverlay{
		display: block;
		width: 100vw;
		height: 100vh;
		background-color: transparent;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgb(245 245 245 / 0.9);
		backdrop-filter: blur(10px);
		opacity: 0;
		z-index: -999;
		transition: opacity 0.4s;
		pointer-events: none;
	}
	#gNavOverlay.jsPanelActive{
		opacity: 1;
		z-index: 999;
		pointer-events: all;
	}
	/* 表示切り替え */
	#headNavArea.jsPanelActive{
		visibility: visible;
		z-index: 999;
		opacity: 1;
	}
	#headNavArea{
		width: 100%;
		max-height: 100svh;
		padding: 34px 20px 100px 20px;
		position: absolute;
		top: 55px;
		left: 0;
		z-index: -999;
		opacity: 0;
		transition: opacity 0.4s;
		overflow-y: auto;
		visibility: hidden;
	}
	.jsHeaderScroll #headNavArea{
		padding: 30px 20px 100px 20px;
		top: 51px;
	}

	/* エントリーリンクリスト
	========================================*/
	.listEntryLink{
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.listEntryLink li{
		width: calc((100% - 10px) / 3);
	}
	.listEntryLink a.btnHead{
		width: 100%;
		min-width: initial;
		min-height: 42px;
		padding: 0 8px 1px 8px;
		font-size: 1.1rem;
	}
	.listEntryLink a.btnHead.fsS{
		font-size: 1rem;
		letter-spacing: 0;
	}
	/* エントリー */
	.listEntryLink a.btnHead.entry{
		font-size: 1.1rem;
	}
	.listEntryLink a.btnHead.entry .en{
		font-size: 1.2rem;
	}

	/* Gnav
	========================================*/
	#listGnav{
		flex-direction: column;
		gap: 15px 0;
	}
	#listGnav > li > a,
	#listGnav > li > .category{
		display: block;
		padding-bottom: 5px;
		font-size: 1.4rem;
	}
	/* メガメニュー */
	.listGnavSub{
		display: block;
		width: 100%;
		font-size: 1.2rem;
		background-color:transparent;
		position: static;
		transform: none;
	}
	.listGnavSub > li:nth-of-type(n+2){
		margin-top: 5px;
	}
	.listGnavSub > li > a{
		display: block;
		padding: 11px 35px 13px 15px;
		background-color: #FFFFFF;
	}

	/* 追従
	========================================*/
	#headArea.jsHeaderScroll{
		height: auto;
	}
	#headArea.jsHeaderScroll #headLogo img{
		height: 23px;
	}
	#headArea.jsHeaderScroll #headLogo a .txt {
		padding-left: 25px;
	}


	/*
		下層ページ（共通）
	-----------------------------------------------------------------------------------------------*/
	/* ページタイトル
	========================================*/
	#cmnPageHead{
		height: 220px;
	}
	#cmnPageHead .tit, #cmnPageHead .lead{
		width: 100vw;
		padding: 0 45px;
	}
	/* 日本語ページタイトル */
	#cmnPageHead .tit{
		font-size: 2.7rem;
	}
	/* 英語カテゴリ_2行 */
	#cmnPageHead .enCategory, #itvKvArea .enCategory{
		font-size: 8rem;
		top: -5px;
		left: 2em;
	}
	/* リード */
	#cmnPageHead .lead{
		margin-top: 10px;
		font-size: 1.0rem;
	}
	/* 紺帯タイトル */
	/* 見出し */
	.titBarNavy{
		font-size: 2.0rem;
		height: 40px;
		padding: 0 16px;
	}

	/* 
		エントリー下部固定
	-----------------------------------------------------------------------------------------------*/
	#spFixEntryArea{
		display: block;
		width: 100%;
		padding: 10px;
		background-color: rgb(0 0 0 / 0.3);
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1;
		backdrop-filter: blur(10px);
		opacity: 0;
		transition: var(--trstCmn);
		pointer-events: none;
	}
	#spFixEntryArea .listEntryLink{
		margin-bottom: 0;
	}
	#spFixEntryArea .listEntryLink a.btnHead{
		min-height: 30px;
	}
	#spFixEntryArea.jsHeaderScroll{
		opacity: 1;
		pointer-events: all;
	}

	/* 
		footer
	-----------------------------------------------------------------------------------------------*/
	/* 白背景
	========================================*/
	.footTopArea .ctsArea{
		display: flex;
		justify-content: space-between;
		padding: 25px 15px 23px 15px;
	}
	/* サイト内リンク */
	.dlistFootTopLink{
		display: flex;
		gap: 0 15px;
	}
	.dlistFootTopLink > div{
		flex-direction: column;
		align-items: flex-start;
		gap: 4px 0;
	}
	.dlistFootTopLink dt{
		font-size: 1rem;
	}
	.dlistFootTopLink dd a{
		padding: 0 23px 1px 0;
		font-size: 1.2rem;
	}

	/* 黒背景
	========================================*/
	.footBtmArea{
		padding-block: 20px 100px;
	}
	.footBtmArea .ctsArea{
		padding-inline: 15px;
	}
	/* Grid */
	.listFootNav{
		display: none;
	}

	/* Endエリア */
	.footEndArea{
		margin-top: 0;
		font-size: 1.1rem;
	}
	.footEndArea .listLink{
		gap: 0 15px;
	}
	.copyright{
		inset: 40px auto auto 0;
	}
	a#pageTop{
		padding-right: 15px;
		font-size: 1.1rem;
		position: absolute;
		inset: 40px 0 auto auto;
	}
}