@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{
	max-width: 100%;
	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
-----------------------------------------------------------------------------------------------*/
html{
	font-size: 62.5%;
}
body{
	color:#333;
	font-size: 1.5em;
	font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 400;
	letter-spacing: 0.1rem;
	font-feature-settings: "palt";
	overflow-wrap: break-word;
	word-break: break-all;
}
p{
	line-height: 170%;
}
a{
	color: #333;
	text-decoration: none;
	transition: all 0.3s;
}
a:link{
	color: #333;
}
a:visited{
	color: #333;
}
a:hover{
	text-decoration: none;
}
@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
-----------------------------------------------------------------------------------------------*/
:root{
	/* color */
	--clrBase:    #e8380d;
	--clrBase10:  rgb(232 56 13 / 10%);
	--clrBase30:  rgb(232 56 13 / 30%);
	--clrBaseD:   #cf2900;
	--clrBeige:   #f7f3e9;
	--clrBrown:   #7d593b;
	--clrBrown10: rgb(125 87 59 / 10%);
	--clrBrown30: rgb(125 87 59 / 30%);
	--clrBrown50: rgb(125 87 59 / 50%);
	--clrBrownD:  #664225;
	--clrGrayD:   #9b9b9b;
	--clrGrayL:   #c8c8c8;

	/* pattern */
	--pattern01:
		repeating-linear-gradient(45deg, var(--clrBrown10), var(--clrBrown10) 1px, transparent 0, transparent 29px),
		repeating-linear-gradient(315deg, var(--clrBrown10), var(--clrBrown10) 1px, transparent 0, transparent 29px);
	
	/* font */
	--fNot: 'Noto Sans JP', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	--fZen: 'Zen Kaku Gothic New', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	--fEn:  'Lato', 'Noto Sans JP', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;

	/* width */
	--wBase: 1200px;
	--w960: 1020px;

	/* height */
	--hHeader: 70px;
}

/* box
============================== */
/* wrapper */
#wrapper{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
}

/* ctsWrapper */
#ctsWrapper{
	padding-bottom: 100px;
}

/* ctsArea */
.ctsArea{
	width: var(--wBase);
	padding: 0 30px 100px 30px;
	margin: 0 auto;
}
.ctsArea:last-of-type{
	padding-bottom: 0;
}
.ctsArea.w960{
	width: var(--w960);
}

/* font / txt
============================== */
.fwB{
	font-weight: bold;
}
.sup{
	font-size: 50%;
	line-height: 100%;
	vertical-align: super;
}
.txtNote{
	display: inline-block;
	color: var(--clrGrayD);
	font-size: 1.2rem;
	line-height: 140%;
}
.clrRed{
	color: var(--clrBase) !important;
}
.txtLH{
	text-align: justify;
	line-height: 190%;
}

/* tit
============================== */
/* titBase */
[class *= titBase]{
	font-size: 3.6rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 130%;
	letter-spacing: 0.3rem;
	margin-bottom: 30px;
}
.titBaseC{
	text-align: center;
}

/* titSet */
.titSet{
	font-size: 3.2rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 130%;
	margin-bottom: 20px;
}
.titSet span{
	display: block;
	color: var(--clrBase);
	font-size: 1.4rem;
	line-height: 100%;
	margin-bottom: 5px;
}
.titSet .en{
	font-weight: var(--fEn);
}

/* titComment */
.titComment{
	width: fit-content;
	font-size: 2.8rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 120%;
	padding: 0 40px;
	margin-bottom: 30px;
	position: relative;
}
.titComment::before,
.titComment::after{
	content: " ";
	display: block;
	width: 25px;
	height: 21px;
	background: url("../images/item_comment.svg") no-repeat top left / 100% auto;
	position: absolute;
}
.titComment::before{
	top: -10px;
	left: 0;
}
.titComment::after{
	right: 0;
	bottom: -10px;
	transform: rotate(180deg);
}

/* btn
============================== */
.btnArea{
	display: flex;
	justify-content: center;
	margin-top: 50px;
}

/* btnBase */

/* txtLink */
a.txtLink{
	color: var(--clrBase);
	text-decoration: underline;
	word-wrap: break-word;
}
a.txtLink:hover{
	text-decoration: none;
}

/* icon
============================== */
/* 矢印 */
[class *= icoArrow]::before,
[class *= icoArrow]::after,
[class *= list][class *= icoLiArrow] a::before,
[class *= list][class *= icoLiArrow] a::after{
	content: " ";
	display: block;
	position: absolute;
	right: 15px;
	transition: all 0.3s;
	z-index: 10;
}
[class *= icoArrow]::before,
[class *= list][class *= icoLiArrow] a::before{
	width: 40px;
	height: 1px;
	background-color: var(--clrBase);
	top: 50%;
}
[class *= icoArrow]::after,
[class *= list][class *= icoLiArrow] a::after{
	width: 7px;
	height: 5px;
	background: url("../images/ico_arrow.svg") no-repeat top left / 100% auto;
	top: 50%;
	transform: translateY(-100%);
}
@media print, screen and (min-width:813px){
	[class *= icoArrow]:hover::before,
	[class *= icoArrow]:hover::after,
	[class *= list][class *= icoLiArrow] a:hover::before,
	[class *= list][class *= icoLiArrow] a:hover::after{
		right: 8px;
	}
}
.icoArrowBtm::before,
[class *= list].icoLiArrowBtm a::before{
	top: auto;
	bottom: 20px;
}
.icoArrowBtm::after,
[class *= list].icoLiArrowBtm a::after{
	top: auto;
	bottom: 16px;
}
[class *= icoArrow].clrW::before,
[class *= list][class *= icoLiArrow].clrW a::before{
	background-color: #fff;
}
[class *= icoArrow].clrW::after,
[class *= list][class *= icoLiArrow].clrW a::after{
	background: url("../images/ico_arrow_w.svg") no-repeat top left / 100% auto;
}

/* 外部リンクアイコン */
.listMegaMenu.icoLiArrow .outLink a::before{
	content:none;
}
.listMegaMenu.icoLiArrow .outLink a::after{
	content: " ";
	width: 14px;
	height: 14px;
	background: url("../images/ico_link_r.svg") no-repeat top left / 100% auto;
	top: 50%;
	transform: translateY(-50%);
}
@media print, screen and (min-width:813px){
	.listMegaMenu.icoLiArrow .outLink a:hover::after{
		right: 15px;
	}
}

/* list
============================== */
/* listIco */
.listIco{
	display: flex;
	flex-direction: column;
	gap: 8px 0;
}
.listIco li{
	text-align: justify;
	line-height: 170%;
	padding: 0 0 0 15px;
	position: relative;
}
.listIco li::before{
	content: " ";
	display: block;
	width: 10px;
	height: 10px;
	background-color: var(--clrBase);
	border-radius: 50%;
	position: absolute;
	top: 8px;
	left: 0;
}

/* listTag */
.listTag{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.listTag li{
	background-color: var(--clrBrown);
	border-radius: 50px;
	color: #fff;
	font-size: 1.4rem;
	line-height: 130%;
	padding: 3px 10px 5px 10px;
}

/* toggle
============================== */
.jsBtnToggle + *{
	display: none;
}

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

/* 共通
============================== */
[class *= "tblBase"]{
	width: 100%;
	border-top: 3px solid var(--clrBase);
}
[class *= "tblBase"] tr{
	border-bottom: 1px solid var(--clrGrayL);
}
[class *= "tblBase"] tr > *{
	line-height: 170%;
	padding: 25px 0;
}
[class *= "tblBase"] th{
	vertical-align: top;
	font-weight: 700;
	padding-right: 25px;
}

/* tblBase
============================== */
.tblBase th{
	width: 210px;
}

/* layoutFixd 幅指定用 */
.layoutFixd{
	table-layout: fixed;
}
.layoutFixd th{
	width: auto;
}

/* tblBaseScroll
============================== */
/* thead */
.tblBaseScroll thead{
	background-color: var(--clrBrown10);
}
[class *= "tblBase"] tr > *:not(:last-of-type){
	border-right: 1px solid var(--clrGrayL);
}
.tblBaseScroll thead tr{
	border-bottom: none;
}
.tblBaseScroll thead th{
	text-align: center;
	padding: 15px 25px;
}
.tblBaseScroll td{
	padding: 25px;
}

/* その他調整
============================== */
/* 注釈 */
[class *= tblBase] + .txtNote,
.scrollArea + .txtNote{
	margin-top: 15px;
}

/* 空きの調整 */
[class *= "tblBase"] .mTop{
	margin-top: 20px;
}
[class *= "tblBase"] .mBtm{
	margin-bottom: 20px;
}


/*
	header
-----------------------------------------------------------------------------------------------*/
#headerWrapper{
	display: flex;
	justify-content: space-between;
	height: var(--hHeader);
	padding-left: 30px;
	position: relative;
	z-index: 9999;
}

/* エントリーコメントアウト用 */
@media print, screen and (min-width:813px){
	#headerWrapper{
		padding: 0 30px;
	}
}

/* ロゴ
============================== */
#headerWrapper .logo{
	display: block;
	width: 150px;
	height: 150px;
	box-shadow: 0 0 5px rgb(000 000 000 / 20%);
	position: relative;
	z-index: 2;
}
#headerWrapper .logo a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
@media print, screen and (min-width:813px){
	#headerWrapper .logo a::after{
		content: " ";
		display: block;
		width: 0;
		height: 3px;
		background-color: var(--clrBase);
		position: absolute;
		bottom: 0;
		left: 0;
		transition: all 0.3s;
	}
	#headerWrapper .logo a:hover::after{
		width: 100%;
	}
}

/* メニュー
============================== */
#headerWrapper .menuArea{
	display: flex;
	justify-content: flex-end;
	gap: 0 40px;
}
#headerWrapper .listMenu{
	display: flex;
	align-items: center;
	gap: 0 40px;
	height: 100%;
}

/* メニュータイトル */
#headerWrapper .titMenu,
#headerWrapper .btnEntry{
	font-size: 1.6rem;
	font-family: var(--fEn);
	font-weight: 700;
	letter-spacing: 0.3rem;
}
#headerWrapper .titMenu{
	display: flex;
	justify-content: center;
	align-items: center;
	height: var(--hHeader);
	position: relative;
	transition: all 0.3s;
}
@media print, screen and (min-width:813px){
	#headerWrapper .titMenu::after{
		content: " ";
		display: block;
		width: 34px;
		height: 35px;
		background: url("../images/ico_paw.svg") no-repeat top left / 100% auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.3s;
		opacity: 0;
		z-index: -1;
	}
	#headerWrapper .titMenu:hover{
		color: var(--clrBase);
	}
	#headerWrapper span.titMenu:hover{
		cursor: default;
	}
	#headerWrapper .titMenu:hover::after{
		opacity: 1;
	}
}

@media print, screen and (min-width:813px){
	/* メガメニュー
	============================== */
	.megaMenuArea{
		display: none;
		width: 100%;
		background-color: #fff;
		border-bottom: 3px solid var(--clrBase);
		position: absolute;
		top: 70px;
		left: 0;
		z-index: 1;
	}
	.megaMenuArea .inBox{
		display: flex;
		justify-content: flex-end;
		width: var(--wBase);
		min-height: 230px;
		padding: 40px 30px;
		margin: 0 auto;
		position: relative;
	}

	/* メガメニュータイトル */
	.titMegaMenu{
		color: var(--clrBase);
		font-size: 7rem;
		font-family: var(--fEn);
		font-weight: 700;
		line-height: 100%;
		position: absolute;
		bottom: -10px;
		left: 25px;
	}

	/* メガメニューリスト */
	.listMegaMenu{
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		width: 750px;
	}
	.listMegaMenu li{
		width: calc((100% - 20px)/2);
		min-height: 60px;
	}
	.listMegaMenu a{
		display: flex;
		align-items: center;
		height: 100%;
		border: 1px solid var(--clrGrayL);
		font-size: 1.8rem;
		font-family: var(--fZen);
		font-weight: 700;
		padding: 10px 75px 10px 20px; 
		position: relative;
	}
	.listMegaMenu a span{
		display: inline-block;
		color: var(--clrGrayD);
		font-size: 1.5rem;
		font-weight: 500;
		padding-left: 10px;
	}
	.listMegaMenu a:hover,
	.listMegaMenu a:hover span{
		color: var(--clrBase);
	}
	.listMegaMenu a:hover{
		border-color: var(--clrBase);
	}
	.listMegaMenu a:hover span{
		opacity: 0.7;
	}

	/* 肉球表示（メガメニュー展開時） */
	#headerWrapper .jsMMOpen .titMenu{
		color: var(--clrBase);
	}
	#headerWrapper .jsMMOpen .titMenu::after{
		opacity: 1;
	}
}

/* エントリーボタン
============================== */
#headerWrapper .btnEntry{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 180px;
	background-color: var(--clrBase);
	color: #fff;
	position: relative;
}
#headerWrapper .btnEntry span{
	position: relative;
	z-index: 2;
}
@media print, screen and (min-width:813px){
	#headerWrapper .btnEntry::after{
		content: " ";
		display: block;
		width: 100%;
		height: 0;
		background-color: var(--clrBaseD);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.3s;
		z-index: 1;
	}
	#headerWrapper .btnEntry:hover::after{
		height: 100%;
	}
}


/*
	footer
-----------------------------------------------------------------------------------------------*/
#footerWrapper{
	background-color: var(--clrBeige);
	margin-top: auto;
}

/* メニューエリア
============================== */
#footerWrapper .menuArea{
	width: var(--wBase);
	padding: 80px 30px;
	margin: 0 auto;
	position: relative;
}

/* logo */
#footerWrapper .logo{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 150px;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 30px;
}
@media print, screen and (min-width:813px){
	#footerWrapper .logo::after{
		content: " ";
		display: block;
		width: 0;
		height: 3px;
		background-color: var(--clrBase);
		position: absolute;
		bottom: 0;
		left: 0;
		transition: all 0.3s;
	}
	#footerWrapper .logo:hover::after{
		width: 100%;
	}
}

/* listMenu */
#footerWrapper .listMenu{
	display: flex;
	justify-content: flex-end;
	gap: 0 50px;
	margin-left: auto;
}
#footerWrapper .titMenu{
	font-size: 1.6rem;
	font-family: var(--fEn);
	font-weight: 700;
	letter-spacing: 0.3rem;
}
#footerWrapper .listInMenu{
	display: flex;
	flex-direction: column;
	gap: 5px 0;
	margin-top: 13px;
}
#footerWrapper .listInMenu a{
	color: #666;
	font-size: 1.3rem;
}
#footerWrapper a.titMenu:hover,
#footerWrapper .listInMenu a:hover{
	color: var(--clrBase);
}

/* 外部リンクアイコン */
#footerWrapper .listInMenu .outLink a{
	padding-right: 20px;
	position: relative;
}
#footerWrapper .listInMenu .outLink a::before,
#footerWrapper .listInMenu .outLink a::after{
	content:"";
	width: 12px;
	height: 12px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s;
	will-change: opacity;/* Win edge用 */
}
#footerWrapper .listInMenu .outLink a::before{
	background: url("../images/ico_link_g.svg") no-repeat right center / 100% auto;
	z-index: 2;
}
#footerWrapper .listInMenu .outLink a::after{
	background: url("../images/ico_link_r.svg") no-repeat right center / 100% auto;
	opacity: 0;
	z-index: 1;
}
#footerWrapper .listInMenu .outLink a:hover::before{
	opacity: 0;
}
#footerWrapper .listInMenu .outLink a:hover::after{
	opacity: 1;
}

/* コピーライトエリア
============================== */
.copyrightArea{
	display: flex;
	align-items: center;
	background-color: #fff;
	height: 50px;
	padding-left: 30px;
}

/* コピーライト */
.copyright{
	font-size: 1.2rem;
	line-height: 100%;
	margin-right: auto;
}

/* コーポレートサイトボタン */
a.btnCorporate.sp{
	display: none;
}
a.btnCorporate{
	display: flex;
	align-items: center;
	width: 230px;
	height: 100%;
	background-color: var(--clrBrown);
	color: #fff;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 80%;
	padding-left: 30px;
	position: relative;
}
a.btnCorporate::after{
	content: " ";
	display: block;
	width: 14px;
	height: 14px;
	background: url("../images/ico_link_w.svg") no-repeat top left / 100% auto;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}
a.btnCorporate:hover{
	background-color: var(--clrBrownD);
}

/* ページトップ */
#btnPageTop{
	width: 50px;
	height: 100%;
	background-color: var(--clrBase);
	position: relative;
}
#btnPageTop::before,
#btnPageTop::after{
	content: " ";
	display: block;
	position: absolute;
	transition: all 0.3s;
}
#btnPageTop::before{
	width: 1px;
	height: 20px;
	background-color: #fff;
	top: 50%;
	left: 50%;
	transform: translateY(-50%);
}
#btnPageTop::after{
	width: 7px;
	height: 5px;
	background: url("../images/ico_arrow_w.svg") no-repeat top left / 100% auto;
	top: 15px;
	left: calc(50% + 2px);
	transform: translateX(-100%) rotate(-90deg);
}
#btnPageTop:hover{
	background-color: var(--clrBaseD);
}


/*
	下層ページ　ページタイトル
-----------------------------------------------------------------------------------------------*/
#cmnPageTitWrapper{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 200px;
	padding: 50px 0 30px 0;
	margin-bottom: 80px;
	position: relative;
}
#cmnPageTitWrapper::after{
	content: " ";
	display: block;
	width: 0;
	height: 3px;
	background-color: var(--clrBase);
	position: absolute;
	bottom: 0;
	left: 0;
}

/* anm */
#cmnPageTitWrapper::after{
	animation: anmW100 2s linear 0.5s forwards;
}

/* titPage
============================== */
#cmnPageTitWrapper .titPage{
	max-width: 800px;
	text-align: center;
	color: #fff;
	font-size: 4.2rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 120%;
	letter-spacing: 0.5rem;
}
#cmnPageTitWrapper .titPage span{
	display: block;
	font-size: 1.2rem;
	font-family: var(--fEn);
	line-height: 100%;
	letter-spacing: 0.3rem;
	margin-top: 8px;
}

/* anm */
#cmnPageTitWrapper .titPage{
	opacity: 0;
	animation: anmFadeUpS 1s ease 0.5s forwards;
}


/*
	pan
-----------------------------------------------------------------------------------------------*/
#olistPan{
	display: flex;
	align-items: center;
	width: calc(100% - 60px);
	min-height: 30px;
	font-size: 1.2rem;
	line-height: 100%;
	letter-spacing: 0.05em;
	padding: 15px 0 0 170px;
	margin: 0 auto;
	overflow-x: scroll;
	-ms-overflow-style: none;/* IE, Edge 対応 */
	scrollbar-width: none;/* Firefox 対応 */
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
}
#olistPan::-webkit-scrollbar{/* Chrome, Safari 対応 */
	display: none;
}
#olistPan li{
	padding: 0 20px 0 0;
	position: relative;
}
#olistPan li:nth-last-of-type(n+2)::after{
	content: ' ';
	display: block;
	width: 6px;
	height: 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
	position: absolute;
	top: 50%;
	right: 9px;
	transform: translateY(-50%) rotate(45deg);
}
#olistPan li:last-of-type{
	padding: 0;
}
#olistPan li a{
	color: rgba(255, 255, 255, 0.7);
	white-space: nowrap;
}
#olistPan li a:hover{
	color: rgba(255, 255, 255, 1);
}
#olistPan li:last-of-type a,
#olistPan li.none a{
	text-decoration: none;
	pointer-events: none;
}
#olistPan.black li:nth-last-of-type(n+2)::after{
	border-top: 1px solid rgb(000 000 000 / 50%);
	border-right: 1px solid rgb(000 000 000 / 50%);
}
#olistPan.black li a{
	color: rgb(000 000 000 / 50%);
	white-space: nowrap;
}
#olistPan.black li a:hover{
	color: rgb(000 000 000 / 70%);
}


/*
	パーツ
-----------------------------------------------------------------------------------------------*/
/* 写真アニメーション用
============================== */
.phLayer{
	position: relative;
}
.phLayer::before{
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: absolute;
	top: 0;
	right: 0;
}

/* コメント
============================== */
.cmnCommentArea{
	display: flex;
	justify-content: space-between;
	width: calc(100% - 30px);
	padding: 40px 40px 50px 40px;
	margin-left: auto;
	position: relative;
}
.cmnCommentArea::after{
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	background-image: var(--pattern01);
	border-bottom: 3px solid var(--clrBase);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}

/* itemEn */
.cmnCommentArea .itemEn{
	text-align: right;
	color: var(--clrBrown10);
	font-size: 6rem;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(-50%);
	z-index: 2;
}

/* phBox */
.cmnCommentArea .phBox{
	width: 230px;
	font-family: var(--fZen);
	font-weight: 500;
	margin-top: -70px;
}
.cmnCommentArea .phBox figure{
	width: 300px;
	transform: translateX(-70px);
}

/* name */
.cmnCommentArea .phBox .name{
	font-size: 2.4rem;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 100%;
	margin-top: 30px;
}
.cmnCommentArea .phBox .name span{
	display: inline-block;
	font-size: 1.5rem;
	padding-left: 3px;
}
.cmnCommentArea .txtBox .name{
	text-align: right;
	font-size: 1.7rem;
	font-family: var(--fZen);
	font-weight: 500;
	line-height: 100%;
	margin-top: 15px;
}

/* job */
.cmnCommentArea .phBox .job{
	width: fit-content;
	background-color: var(--clrBrown);
	color: #fff;
	font-size: 1.4rem;
	line-height: 100%;
	padding: 4px 8px 5px 8px;
	margin-top: 10px;
}

/* txtBox */
.cmnCommentArea .txtBox{
	width: 580px;
}
.cmnCommentArea .txtBox .txt{
	text-align: justify;
}

/* 複数用 */
.cmnCommentArea .txtBox .list{
	display: flex;
	flex-direction: column;
	gap: 30px 0;
}
.cmnCommentArea .txtBox .list li:not(:last-of-type){
	border-bottom: 1px solid var(--clrGrayL);
	padding-bottom: 30px;
}

/* インタビューINDEX
============================== */
.listPeople{
	display: flex;
	justify-content: flex-end;
	gap: 0 59px;
}
.listPeople li{
	width: 238px;
	position: relative;
}

/* 飾り */
.listPeople li::after{
	content: " ";
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--clrBase);
	position: absolute;
	bottom: 0;
	right: 0;
}
@media print, screen and (min-width:813px){
	.listPeople li:hover::after{
		animation: anmPeopleItem 1s ease-in-out 0s forwards;
	}
}
@keyframes anmPeopleItem{
	0%  {
		width: 100%;
		right: 0;
	}
	30% {
		width: 0;
		right: 0;
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	60%{
		width: 0;
		right: auto;
		left: 0;
		opacity: 1;
	}
	100%{
		width: 100%;
		right: auto;
		left: 0;
	}
}

/* tit */
.listPeople .tit{
	display: flex;
	align-items: center;
	width: 100%;
	background-color: rgb(000 000 000 / 30%);
	color: #fff;
	font-weight: 700;
	line-height: 100%;
	padding: 15px 15px 35px 15px;
	position: absolute;
	left: 0;
	bottom: 0;
}
.listPeople .tit > *{
	line-height: 100%;
}
.listPeople .tit .name{
	font-size: 2.4rem;
	font-family: var(--fEn);
}
.listPeople .tit .nameSub{
	display: inline-block;
	font-size: 1.2rem;
	margin-left: 3px;
	transform: translateY(3px);
}
.listPeople .tit .job{
	display: inline-block;
	background-color: #000;
	font-size: 1.2rem;
	font-family: var(--fZen);
	padding: 5px 10px;
	margin-left: 15px;
}

/* ph */
@media print, screen and (min-width:813px){
	.listPeople figure{
		width: 238px;
		height: 320px;
		overflow: hidden;
	}
	.listPeople img{
		transition: all 0.5s;
	}
	.listPeople li:nth-of-type(3) .tit .job{
		letter-spacing: -0.03rem;
	}
	.listPeople a:hover img{
		object-fit: cover;
		transform: scale(1.1);
	}
}

@media screen and (max-width:812px){
	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
	-----------------------------------------------------------------------------------------------*/
	:root{
		/* width */
		--wBase: 100%;
		--w960: 100%;

		/* height */
		--hHeader: 50px;
	}

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

	/* ctsArea */
	.ctsArea,
	.ctsArea.w960{
		max-width: 500px;
	}
	.ctsArea{
		padding: 0 20px 60px 20px;
	}

	/* font / txt
	============================== */
	.txtLH{
		line-height: 170%;
	}

	/* tit
	============================== */
	/* titBase */
	[class *= titBase]{
		font-size: 2.6rem;
		letter-spacing: 0.2rem;
		margin-bottom: 20px;
	}

	/* titSet */
	.titSet{
		font-size: 2.2rem;
		line-height: 120%;
		margin-bottom: 15px;
	}
	.titSet span{
		font-size: 1.3rem;
	}

	/* titComment */
	.titComment{
		font-size: 2.2rem;
		padding: 0 30px;
		margin-bottom: 20px;
	}
	.titComment::before,
	.titComment::after{
		width: 20px;
		height: 17px;
	}
	.titComment::before{
		top: -5px;
	}
	.titComment::after{
		bottom: -5px;
	}

	/* btn
	============================== */

	/* icon
	============================== */
	/* 矢印 */
	[class *= icoArrow]::before,
	[class *= list][class *= icoLiArrow] a::before{
		width: 30px;
	}
	[class *= icoArrow]::after,
	[class *= list][class *= icoLiArrow] a::after{
		width: 6px;
		height: 4px;
	}
	.icoArrowBtm::after,
	[class *= list].icoLiArrowBtm a::after{
		bottom: 17px;
	}

	/* list
	============================== */
	/* listIco */
	.listIco li{
		line-height: 150%;
	}
	.listIco li::before{
		top: 6px;
	}

	/* listTag */
	.listTag{
		gap: 8px;
	}
	.listTag li{
		font-size: 1.3rem;
		padding: 3px 10px;
	}
	

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

	/* 共通
	============================== */
	[class *= "tblBase"] tr > *{
		line-height: 170%;
		padding: 15px;
	}
	
	/* tblBase
	============================== */
	.tblBase tr:not(:last-of-type){
		border-bottom: none;
	}
	.tblBase tr > *{
		display: block;
		width: 100%;
	}
	.tblBase th{
		width: 100%;
		background-color: var(--clrBrown10);
		padding: 5px 10px;
	}
	.tblBase td{
		padding: 15px 10px 25px 10px;
	}

	/* tblBaseScroll
	============================== */
	/* thead */
	.tblBaseScroll thead th{
		padding: 5px 15px;
	}

	/* その他調整
	============================== */
	/* scrollArea */
	.scrollArea{
		overflow-x: scroll;
	}

	/* 空きの調整 */
	[class *= "tblBase"] .mTop{
		margin-top: 15px;
	}
	[class *= "tblBase"] .mBtm{
		margin-bottom: 15px;
	}



	/*
		header
	-----------------------------------------------------------------------------------------------*/
	#headerWrapper{
		padding-left: 20px;
	}

	/* ロゴ
	============================== */
	#headerWrapper .logo{
		width: 90px;
		height: 90px;
	}
	#headerWrapper .logo img{
		width: 70px;
	}

	/* メニューボタン
	============================== */
	#btnMenu{
		width: var(--hHeader);
		height: var(--hHeader);
		position: relative;
		z-index: 2;
	}
	#btnMenu::before,
	#btnMenu::after{
		content: " ";
		display: block;
		height: 2px;
		background-color: var(--clrBase);
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.3s;
	}
	#btnMenu::before{
		width: 20px;
		margin-top: -3px;
		left: 50%;
	}
	#btnMenu::after{
		width: 14px;
		margin-top: 3px;
		left: calc(50% + 3px);
	}

	/* メニュー
	============================== */
	#headerWrapper .menuArea{
		display: block;
		width: 100%;
		height: 100vh;
		background-color: var(--clrBeige);
		padding: 100px 20px;
		position: absolute;
		top: 0;
		right: 0;
		transform: translateX(100%);
		transition: all 0.3s;
		overflow-y: scroll;
		z-index: 1;
	}
	#headerWrapper .listMenu{
		flex-direction: column;
		gap: 30px 0;
	}

	/* メニュータイトル */
	#headerWrapper .titMenu{
		display: block;
		width: fit-content;
		height: auto;
		font-size: 2rem;
		margin: 0 auto;
	}
	#headerWrapper span.titMenu::after{
		content: " ";
		display: block;
		width: 8px;
		height: 8px;
		border: 2px solid;
		border-color: transparent var(--clrBase) var(--clrBase) transparent;
		position: absolute;
		top: calc(50% - 2px);
		right: -20px;
		transform: translateY(-50%) rotate(45deg);
		transition: all 0.3s;
	}
	#headerWrapper span.titMenu.jsToggleOpen::after{
		transform: translateY(-50%) rotate(-135deg);
		top: calc(50% + 3px);
	}
	
	/* メガメニュー
	============================== */
	.listMegaMenu{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px 0;
		margin-top: 15px;
	}
	.listMegaMenu a{
		font-size: 1.5rem;
		font-family: var(--fZen);
		font-weight: 500;
	}
	.listMegaMenu a span{
		display: inline-block;
		color: var(--clrGrayD);
		font-size: 1.2rem;
		font-weight: 500;
		padding-left: 8px;
		transform: translateY(-2px);
	}
	.listMegaMenu.icoLiArrow a::before,
	.listMegaMenu.icoLiArrow a::after{
		content: none;
	}

	/* 外部リンクアイコン */
	.listMegaMenu.icoLiArrow .outLink a{
		position: relative;
	}
	.listMegaMenu.icoLiArrow .outLink a::after{
		width: 12px;
		height: 12px;
		background: url("../images/ico_link_g.svg") no-repeat top center / 100% auto;
		right: -18px;
	}

	/* メガメニュータイトル */
	.titMegaMenu{
		display: none;
	}

	/* エントリーボタン
	============================== */
	#headerWrapper .btnEntry{
		width: 100%;
		height: 50px;
		margin-top: 50px;
	}

	/* メニュー展開時
	============================== */
	/* body スクロール禁止 */
	body.jsScrollLock{
		overflow: hidden;
	}

	/* header展開時のズレ調整 */
	body.jsScrollLock #ctsWrapper{
		padding-top: 50px;
	}

	/* header固定 */
	#headerWrapper.jsFixed{
		width: 100%;
		position: fixed;
	}

	/* メニューボタン */
	#btnMenu.jsOpen::before,
	#btnMenu.jsOpen::after{
		width: 20px;
		margin-top: 0;
		left: 50%;
	}
	#btnMenu.jsOpen::before{
		transform: translate(-50%, -50%) rotate(135deg);
	}
	#btnMenu.jsOpen::after{
		transform: translate(-50%, -50%) rotate(-135deg);
	}

	/* メニュー展開 */
	#headerWrapper .menuArea.jsOpen{
		transform: translateX(0);
	}


	/*
		footer
	-----------------------------------------------------------------------------------------------*/
	/* メニューエリア
	============================== */
	#footerWrapper .menuArea{
		display: flex;
		padding: 0;
	}

	/* logo */
	#footerWrapper .logo{
		width: 130px;
		height: 80px;
		background-color: transparent;
		position: static;
	}
	#footerWrapper .logo img{
		width: 70px;
	}

	/* listMenu */
	#footerWrapper .listMenu{
		display: none;
	}

	/* コピーライトエリア
	============================== */
	.copyrightArea{
		padding-left: 20px;
	}

	/* コーポレートサイトボタン */
	a.btnCorporate.pc{
		display: none;
	}
	a.btnCorporate.sp{
		display: flex;
		width: calc(100% - 130px);
		height: 80px;
		padding-left: 20px;
	}
	

	/*
		下層ページ　ページタイトル
	-----------------------------------------------------------------------------------------------*/
	#cmnPageTitWrapper{
		gap: 8px 0;
		min-height: 150px;
		padding: 50px 20px 40px 20px;
		margin-bottom: 40px;
	}

	/* titPage
	============================== */
	#cmnPageTitWrapper .titPage{
		max-width: initial;
		font-size: 3.2rem;
		letter-spacing: 0.3rem;
	}
	#cmnPageTitWrapper .titPage span{
		font-size: 1rem;
		letter-spacing: 0.2rem;
		margin-top: 5px;
	}

	/* コメント
	============================== */
	.cmnCommentArea{
		flex-direction: column;
		gap: 30px 0;
		width: 100%;
		padding: 40px 0 30px 0;
	}
	.cmnCommentArea::after{
		width: 100vw;
	}

	/* itemEn */
	.cmnCommentArea .itemEn{
		font-size: 4rem;
		top: 20px;
		transform: translateY(0);
	}

	/* phBox */
	.cmnCommentArea .phBox{
		width: 100%;
		margin-top: 0;
	}
	.cmnCommentArea .phBox figure{
		width: 100%;
		transform: translateX(0);
	}

	/* name */
	.cmnCommentArea .name{
		font-size: 1.5rem;
	}
	.cmnCommentArea .phBox .name{
		text-align: center;
		font-size: 2rem;
		margin-top: 20px;
	}
	.cmnCommentArea .phBox .name span{
		font-size: 1.2rem;
	}
	.cmnCommentArea .txtBox .name{
		font-size: 1.4rem;
	}

	/* job */
	.cmnCommentArea .phBox .job{
		text-align: center;
		font-size: 1.3rem;
		margin: 10px auto 0 auto;
	}

	/* txtBox */
	.cmnCommentArea .txtBox{
		width: 100%;
	}

	/* インタビューINDEX
	============================== */
	.listPeople{
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 20px 14px;
	}
	.listPeople li{
		width: calc((100% - 14px)/2);
	}

	/* tit */
	.listPeople .tit{
		display: block;
		padding: 10px 10px 30px 10px;
	}
	.listPeople .tit .name{
		font-size: 2rem;
		letter-spacing: 0.05rem;
	}
	.listPeople .tit .nameSub{
		display: inline-block;
		font-size: 1.2rem;
		margin-left: 3px;
		transform: translateY(-1px);
	}
	.listPeople .tit .job{
		display: block;
		width: fit-content;
		font-size: 1.1rem;
		padding: 5px 8px 6px 8px;
		margin: 7px 0 0 0;
	}

	/* anm */
	.listPeople li.jsAnm.jsAnmStart:nth-of-type(2n+1){
		animation: anmFadeIn 1s ease 0.5s forwards;
	}
	.listPeople li.jsAnm.jsAnmStart:nth-of-type(2n+2){
		animation: anmFadeIn 1s ease 0.8s forwards;
	}
	.listPeople .phLayerOut.jsAnmStart:nth-of-type(2n+1) .phLayer::before{
		animation: anmPhLayer 0.8s ease 0.5s forwards;
	}
	.listPeople .phLayerOut.jsAnmStart:nth-of-type(2n+2) .phLayer::before{
		animation: anmPhLayer 0.8s ease 0.8s forwards;
	}

	
	/*
		pan
	-----------------------------------------------------------------------------------------------*/
	#olistPan{
		width: calc(100% - 40px);
		min-height: 15px;
		font-size: 1rem;
		padding: 0;
		top: auto;
		bottom: 10px;
	}

}