@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 */
	--wMin:  1240px;
	--wBase: 1200px;
	--w800:  860px;
	--w900:  960px;
	/* height */
	--hHeader:       80px;
	--hHeaderScroll: 50px;
	/* color */
	--clrBase:    #282828;
	--clrBase10:  rgb(40 40 40 / 10%);
	--clrBase30:  rgb(40 40 40 / 30%);
	--clrBase50:  rgb(40 40 40 / 50%);
	--clrBase60:  rgb(40 40 40 / 60%);
	--clrBase80:  rgb(40 40 40 / 80%);
	--clrBase95:  rgb(40 40 40 / 95%);
	--clrLBlue:   #0071ce;
	--clrLBlue10: rgb(0 113 206 / 10%);
	--clrLBlue30: rgb(0 113 206 / 30%);
	--clrDBlue:   #004696;
	--clrPoint:   #ff3278;
	--clrPoint10: rgb(255 50 120 / 10%);
	--clrLGray:   #e9f1f4;
	--clrLGray50: rgb(233 241 244 / 50%);
	--clrLGray70: rgb(233 241 244 / 70%);
	--clrMGray:   #ced6dc;
	--clrDGray:   #a5b0b7;
	--clrDGray20: rgb(165 176 183 / 20%);
	--clrDGray40: rgb(165 176 183 / 40%);
	--clrWhite10: rgb(255 255 255 / 10%);
	--clrWhite20: rgb(255 255 255 / 20%);
	--clrWhite30: rgb(255 255 255 / 30%);
	--clrWhite50: rgb(255 255 255 / 50%);
	--clrWhite60: rgb(255 255 255 / 60%);
	--clrWhite70: rgb(255 255 255 / 70%);
	--clrWhite90: rgb(255 255 255 / 90%);
	--clrWhite98: rgb(255 255 255 / 98%);
	/* border */
	--borderBase: 1px solid var(--clrMGray);
	--radiusBase: 5px;
	/* font */
	--fBase: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif;
	--fEn:   'Montserrat', var(--fBase);
	/* line-height */
	--lineHBase: 200%;
	/* etter-spacing */
	--letterSBase: 0.15rem;
	/* transition */
	--transition03: all 0.3s;
	--transition05: all 0.5s;
}
html{
	font-size: 62.5%;
}
body{
	background-color: #fff;
	color: var(--clrBase);
	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: var(--clrBase);
	text-decoration: none;
	transition: var(--transition03);
}
@media print, screen and (min-width:813px){
	/* iPad背景切れ対策 */
	body{
		min-width: var(--wMin);
	}
	/* 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;
}
/* ctsWrapper
============================== */
#ctsWrapper{
	background-color: #fff;
	padding-block: var(--hHeader) 100px;
}
/* ctsArea
============================== */
.ctsArea{
	width: var(--wBase);
	padding: 0 30px 80px 30px;
	margin: 0 auto;
}
.ctsArea.w800{
	width: var(--w800);
}
.ctsArea.w900{
	width: var(--w900);
}
.ctsArea:last-of-type{
	padding-bottom: 0;
}
/* 背景色
============================== */
[class *= "cmnBgBox"]{
	background-color: var(--clrLGray);
}
.cmnBgBoxLBlue{
	background-color: var(--clrLBlue);
}
/* --- 左右空きあり --- */
.cmnBgBoxSpace{
	width: calc(100% - 40px);
	border-radius: var(--radiusBase);
	margin-inline: auto;
}
.cmnBgBoxSpace + .cmnBgBoxSpace{
	margin-top: 20px;
}
/* --- コンテンツ幅用 --- */
.cmnBgBoxCts{
	border-radius: var(--radiusBase);
	padding: 100px 120px;
}

/*
	空き調整
---------------------------------------------------- */
/* 調整エリア
============================== */
[class *= "cmnSpaceBox"]{
	display: flex;
	flex-direction: column;
}
.cmnSpaceBoxM{
	gap: 50px 0;
}

/* 上
============================== */
.mTop08,
[class *= "cmnSpaceBox"] .btnArea.mTop08{
	margin-top: 8px;
}
.mTop20,
[class *= "cmnSpaceBox"] .btnArea.mTop20{
	margin-top: 20px;
}
/* 下
============================== */
.mBtm20{
	margin-bottom: 20px;
}

/*
	font / txt
---------------------------------------------------- */
/* 調整テキスト
============================== */
.baseTxt{
	text-align: justify;
	line-height: var(--lineHBase);
	letter-spacing: var(--letterSBase);
}
/* 太字
============================== */
.fwB{
	font-weight: bold;
}
/* 文字色
============================== */
.clrPoint{
	color: var(--clrPoint);
}
/* 上付き
============================== */
.sup, .sub{
	display: inline-block;
	font-size: 50%;
	line-height: 100%;
}
.sup{
	vertical-align: super;
}
/* 下付き
============================== */
.sub{
	vertical-align: sub;
	transform: translateY(-4px);
}
/* 注釈
============================== */
.txtNote{
	display: inline-block;
	color: var(--clrTxt);
	font-size: 1.2rem;
	line-height: 140%;
}

/*
	タイトル
---------------------------------------------------- */
/* ベース
============================== */
.baseEnJaTit{
	margin-bottom: 30px;
}
.baseEnJaTit span{
	display: block;
	text-align: center;
	font-weight: 500;
	line-height: 100%;
}
.baseEnJaTit .ja{
	font-size: 2.8rem;
}
.baseEnJaTit .en{
	color: var(--clrDGray);
	font-size: 1.3rem;
	font-family: var(--fEn);
	letter-spacing: 0.2rem;
	margin-top: 12px;
}
/* 開催中・開催予定
============================== */
[class *= "clrBgTit"]{
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: flex-start;
	min-width: 100px;
	min-height: 30px;
	border-radius: var(--radiusBase);
	text-align: center;
	color: #fff;
	font-weight: 700;
	line-height: 110%;
	padding-inline: 15px
}
.clrBgTitNow{
	background-color: var(--clrPoint);
}
.clrBgTitNext{
	background-color: var(--clrLBlue);
}
/* 丸アイテム
============================== */
.circleTit{
	margin-bottom: 20px;
}
.circleTit:has(+p, +ul){
	margin-bottom: 15px;
}
.circleTit > *{
	display: block;
}
.circleTit .en{
	color: var(--clrLBlue);
	font-size: 1.2rem;
	font-family: var(--fEn);
	font-weight: 600;
	line-height: 100%;
	letter-spacing: 0.2rem;
	padding-left: 17px;
	margin-bottom: 6px;
	position: relative;
}
.circleTit .en::before{
	content: " ";
	display: block;
	width: 10px;
	aspect-ratio: 1/1;
	background-color: currentColor;
	border-radius: 50%;
	position: absolute;
	top: 1px;
	left: 0;
}
.circleTit .ja{
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 130%;
}
/* 黒背景
============================== */
[class *= "bgBlackTit"]{
	background-color: var(--clrBase);
	border-radius: var(--radiusBase);
	text-align: center;
	color: #fff;
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 110%;
	padding: 10px;
	margin-bottom: 20px;
}
.bgBlackTitS{
	font-size: 1.2rem;
	font-weight: 700;
	padding: 8px 10px;
	margin-bottom: 10px;
}
/* アンダーライン
============================== */
.underLineTit{
	border-bottom: var(--borderBase);
	color: var(--clrLBlue);
	font-size: 2rem;
	font-weight: 500;
	line-height: 140%;
	letter-spacing: 0.15rem;
	padding-bottom: 15px;
	margin-bottom: 30px;
}
/* ノーマル
============================== */
.normalTit{
	text-align: center;
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: 0.2rem;
	margin-bottom: 20px;
}

/*
	アイコン
---------------------------------------------------- */
/* 矢印
============================== */
/* --- 共通 --- */
[class *= "icoArrow"]::before, [class *= "icoArrow"]::after,
[class *= "icoListArrow"] a::before, [class *= "icoListArrow"] a::after,
[class *= "baseBtn"]::before, [class *= "baseBtn"]::after{
	content: " ";
	position: absolute;
	transition: var(--transition03);
}
[class *= "icoArrow"]::before,
[class *= "icoListArrow"] a::before,
[class *= "baseBtn"]::before{
	width: 20px;
	aspect-ratio: 1/1;
	background-color: #fff;
	border-radius: 50%;
}
[class *= "icoArrow"]::after,
[class *= "icoListArrow"] a::after,
[class *= "baseBtn"]::after{
	width: 6px;
	height: 7px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background-color: var(--clrBase);
}
[class *= "icoArrowS"]::before,
[class *= "icoListArrowS"] a::before,
[class *= "baseBtnS"]::before{
	width: 14px;
}
[class *= "icoArrowS"]::after,
[class *= "icoListArrowS"] a::after,
[class *= "baseBtnS"]::after{
	width: 5px;
	height: 6px;
}
/* --- アイコンのみ（listあり） --- */
[class *= "icoArrow"]::before,
[class *= "icoListArrow"] a::before{
	right: 10px;
	bottom: 10px;
}
[class *= "icoArrow"]::after,
[class *= "icoListArrow"] a::after{
	right: 16px;
	bottom: 17px;
}
[class *= "icoArrowS"]::after,
[class *= "icoListArrowS"] a::after{
	right: 14px;
	bottom: 14px;
}
[class *= "icoArrow"][class *= "Black"]::before,
[class *= "icoListArrow"][class *= "Black"] a::before{
	background-color: var(--clrBase);
}
[class *= "icoArrow"][class *= "Black"]::after,
[class *= "icoListArrow"][class *= "Black"] a::after{
	background-color: #fff;
}
/* --- 非活性 --- */
[class *= "icoArrow"].noLink::before,
[class *= "icoArrow"].noLink::after,
[class *= "icoListArrow"] a.noLink::before,
[class *= "icoListArrow"] a.noLink::after{
	content: none;
}
/* 外部リンク
============================== */
[class *= "icoLink"]::after,
[class *= "icoPdf"]::after{
	content: " ";
	display: block;
	width: 12px;
	aspect-ratio: 1/1;
	background-size: 100% auto;
	background-position: top left;
	background-repeat: no-repeat;
	position: absolute;
}
.icoLinkWhite::after{
	background-image: url("../images/ico_link_white.svg");
}
.icoLinkBlue::after{
	background-image: url("../images/ico_link_blue.svg");
}
/* pdfリンク
============================== */
.icoPdfWhite::after{
	background-image: url("../images/ico_pdf_white.svg");
}

/*
	ボタン
---------------------------------------------------- */
[class *= "btnArea"]{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 50px;
}
.btnAreaC{
	justify-content: center;
}
/* ボタンベース
============================== */
[class *= "baseBtn"]{
	display: flex;
	align-items: center;
	min-width: 120px;
	min-height: 40px;
	background-color: var(--clrBase);
	border-radius: var(--radiusBase);
	color: #fff;
	font-weight: 700;
	line-height: 130%;
	word-break: break-all;
	padding: 10px 50px 10px 20px;
	position: relative;
	transition: var(--transition03);
}
[class *= "baseBtn"]::before{
	right: 10px;
}
.baseBtn::after{
	right: 16px;
}
/* --- サイズS --- */
[class *= "baseBtnS"]{
	min-width: 100px;
	min-height: 30px;
	font-size: 1.3rem;
	padding: 5px 45px 5px 15px;
}
.baseBtnS::after{
	right: 14px;
}
/* --- 戻る --- */
[class *= "baseBtn"][class *= "Back"]{
	justify-content: flex-end;
	text-align: right;
}
[class *= "baseBtn"][class *= "Back"]::before{
	left: 10px;
}
[class ^= "baseBtn"][class *= "Back"]::after{
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.baseBtnBack{
	padding-inline: 50px 20px;
}
.baseBtnBack::after{
	left: 16px;
}
.baseBtnSBack{
	padding-inline: 45px 15px;
}
.baseBtnSBack::after{
	left: 14px;
}
/* --- 外部リンク --- */
[class *= "baseBtn"][class *= "icoPdf"]::before,
[class *= "baseBtn"][class *= "icoLink"]::before{
	content: none;
}
[class *= "baseBtn"][class *= "icoLink"]::after,
[class *= "baseBtn"][class *= "icoPdf"]::after{
	background-color: transparent;
	clip-path: none;
	right: 14px;
}
[class *= "baseBtn"][class *= "icoLink"]::after{
	height: 12px;
}
/* --- PDFリンク --- */
[class *= "baseBtn"][class *= "icoPdf"]::after{
	width: 14px;
	height: 16px;
}
/* --- 非活性 --- */
[class *= "baseBtn"].noLink{
	opacity: 0.3;
}
@media (any-hover: hover){
	/* --- ボタンベース --- */
	[class *= "baseBtn"]:hover{
		cursor: pointer;
	}
	[class *= "baseBtn"]:hover,
	a:hover [class *= "baseBtn"]{
		background-color: var(--clrBase80);
	}
	[class *= "baseBtn"]:hover::before,
	a:hover [class *= "baseBtn"]::before{
		right: 5px;
	}
	.baseBtn:hover::after,
	a:hover .baseBtn::after{
		right: 11px;
	}
	/* --- サイズS --- */
	.baseBtnS:hover::after,
	a:hover .baseBtnS::after{
		right: 9px;
	}
	/* --- 戻る --- */
	[class *= "baseBtn"][class *= "Back"]:hover::before,
	a:hover [class *= "baseBtn"][class *= "Back"]::before{
		left: 5px;
	}
	.baseBtnBack:hover::after,
	a:hover .baseBtnBack::after{
		left: 11px;
	}
	.baseBtnSBack:hover::after,
	a:hover .baseBtnSBack::after{
		left: 9px;
	}
}
/* --- 青ライン・文字、白べた --- */
.baseBtn.clrLineBlue{
	background-color: #fff;
	border: 1px solid var(--clrLBlue);
	color: var(--clrLBlue);
}
/* チケットボタン
============================== */
a.ticketBtn{
	display: flex;
	align-items: center;
	width: 300px;
	min-height: 60px;
	background-color: var(--clrBase);
	border-radius: var(--radiusBase);
	color: #fff;
	font-weight: 700;
	padding: 15px 50px 15px 80px;
	position: relative;
	overflow: hidden;
}
.ticketBtn::before,
.ticketBtn::after{
	content: " ";
	display: block;
	background-repeat: no-repeat;
	position: absolute;
	transition: var(--transition03);
}
/* --- チケットアイコン --- */
.ticketBtn::before{
	width: 60px;
	height: 100%;
	background-color: var(--clrWhite10);
	background-image: url("../images/ico_ticket_white.svg");
	background-size: 30px auto;
	background-position: center center;
	top: 0;
	left: 0;
}
/* --- リンクアイコン --- */
/* 外部リンク */
.ticketBtn::after{
	height: 12px;
	aspect-ratio: 1/1;
	background-size: 100% auto;
	background-image: url("../images/ico_link_white.svg");
	background-position: center center;
	top: 50%;
	right: 20px;
	translate: 0 -50%;
}
/* 内部リンク */
.ticketBtn.icoImgArrow::after{
	height: 16px;
	background-image: url("../images/ico_arrow_white.svg");
}

@media (any-hover: hover){
	.ticketBtn:hover::before{
		background-color: var(--clrWhite30);
	}
}
/* --- オンラインチケット --- */
.ticketBtn.online{
	background-color: var(--clrLBlue);
}
/* テキストリンク
============================== */
a.linkTxt,
.cmnArticleTxtArea a{
	color: var(--clrLBlue);
	text-decoration: underline;
	word-break: break-all;
}
.linkTxt::after{
	display: inline-block;
	margin-left: 5px;
	position: static;
}
a.linkTxt:hover,
.cmnArticleTxtArea a:hover{
	text-decoration: none;
}
.noLink{
	pointer-events: none;
}

/*
	バナー
---------------------------------------------------- */
.baseBnr{
	display: block;
	position: relative;
}
@media (any-hover: hover){
	.baseBnr:hover{
		filter: brightness(110%);
	}
}

/*
	リスト
---------------------------------------------------- */
/* 共通
============================== */
[class *= "circleList"],
.komeList{
	display: flex;
	flex-direction: column;
}
[class *= "circleList"] > li,
.komeList > li{
	position: relative;
}
[class *= "circleList"] > li::before,
.komeList > li::before{
	content: " ";
	display: block;
	position: absolute;
	left: 0;
}
/* --- 丸アイテム --- */
[class *= "circleList"] > li{
	line-height: 145%;
}
[class *= "circleList"] > li::before{
	aspect-ratio: 1/1;
	border-radius: 50%;
}
/* Lサイズ */
.circleListL{
	gap: 15px 0;
}
.circleListL > li{
	font-size: 2rem;
	padding-left: 16px;
}
.circleListL > li::before{
	width: 10px;
	background-color: var(--clrLBlue);
	top: 0.5em;
}
/* Sサイズ */
.circleListS{
	gap: 10px 0;
}
.circleListS > li{
	font-size: 1.5rem;
	padding-left: 13px;
}
.circleListS > li::before{
	width: 7px;
	background-color: var(--clrDBlue);
	top: 0.5em;
}
/* --- ※ --- */
.komeList{
	gap: 5px 0;
}
.komeList > li,
.noteTxt{
	color: var(--clrDGray);
	font-size: 1.2rem;
	line-height: 130%;
}
.komeList > li{
	padding-left: 15px;
}
.komeList > li::before{
	content: "※";
}

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

/* 共通
============================== */
[class *= "tblBase"]{
	width: 100%;
	table-layout: fixed;
}
[class *= "tblBase"]:not(:has(thead)){
	border-top: var(--borderBase);
}
[class *= "tblBase"] tr:not(:has(thead)){
	border-bottom: var(--borderBase);
}
[class *= "tblBase"] tr > *{
	line-height: 150%;
	padding-block: 15px;
}
[class *= "tblBase"] th{
	color: var(--clrLBlue);
	vertical-align: top;
	font-weight: 500;
	padding-right: 20px;
}
/* --- ボタン --- */
[class *= "tblBase"] .btnArea{
	margin-top: 15px;
}
/* tblBase
============================== */
.tblBase th{
	width: 220px;
}
/* --- thead --- */
.tblBase thead th{
	color: var(--clrDGray);
	font-size: 1.3rem;
	padding-block: 0 8px;
}
/* tblBaseScroll
============================== */
.tblBaseScroll tr > *{
	text-align: center;
	padding-inline: 20px;
}
.tblBaseScroll tr > *:not(:first-child){
	border-left: var(--borderBase);
}
.tblBaseScroll th:first-child{
	text-align: left;
}
/* --- thead --- */
.tblBaseScroll thead tr{
	border-bottom: none;
}
.tblBaseScroll thead th{
	background-color: var(--clrLBlue10);
	text-align: center;
	color: var(--clrBase);
	line-height: 130%;
	padding-block: 8px;
}
/* スクロールヒント
============================== */
.scroll-hint-icon{
	height: auto;
}
/* その他調整
============================== */
/* --- 注釈 --- */
[class *= tblBase] + .noteTxt,
.scrollArea + .noteTxt{
	margin-top: 10px;
}



/* ==========================================================================
	サイトマップエリア
========================================================================== */
.cmnSitemapArea{
	display: flex;
	justify-content: center;
	gap: 0 100px;
}
/* カテゴリー
============================== */
.cmnSitemapTit{
	display: block;
	width: fit-content;
	line-height: 130%;
}
.cmnSitemapTit span{
	display: block;
	line-height: 100%;
	transition: var(--transition03);
}
.cmnSitemapTit .en{
	color: var(--clrLBlue);
	font-size: 1.3rem;
	font-family: var(--fEn);
	letter-spacing: 0.2rem;
	font-weight: 500;
	padding-left: 13px;
	margin-bottom: 8px;
	position: relative;
}
.cmnSitemapTit .en::before{
	content: " ";
	display: block;
	width: 8px;
	aspect-ratio: 1/1;
	background-color: currentColor;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
}
.cmnSitemapTit .ja{
	font-size: 2.2rem;
	font-weight: 700;
}
@media (any-hover: hover){
	a.cmnSitemapTit:hover .ja{
		translate: 10px 0;
	}
}
/* 各ページ
============================== */
.cmnSitemapList{
	display: flex;
	flex-direction: column;
	gap: 50px 0;
	font-weight: 500;
}
@media print, screen and (min-width:813px){
	.cmnSitemapList a::before,
	.cmnSitemapList a::after{
		content: none;
	}
}
.cmnSitemapTit + .cmnSitemapList,
.cmnSitemapBox.titNo .cmnSitemapList{
	gap: 15px 0;
}
.cmnSitemapTit + .cmnSitemapList{
	margin-top: 20px;
}
.cmnSitemapTit + .cmnSitemapList a,
.cmnSitemapBox.titNo .cmnSitemapList a{
	display: block;
	width: fit-content;
	color: var(--clrDGray);
}
@media (any-hover: hover){
	.cmnSitemapTit + .cmnSitemapList a:hover,
	.cmnSitemapBox.titNo .cmnSitemapList a:hover{
		translate: 10px 0;
	}
}



/* ==========================================================================
	header
========================================================================== */
#headerWrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-width: var(--wMin);
	height: var(--hHeader);
	background-color: var(--clrWhite70);
	backdrop-filter: blur(10px);
	padding-left: 20px;
	position: fixed;
	top: 0;
	left: 0;
	transition: var(--transition05);
	z-index: 9999;
}

/*
	ロゴ
---------------------------------------------------- */
.hLogo,
.hMenuArea{
	position: relative;
	z-index: 1;
}
.hLogo a{
	display: block;
}
.hLogo img{
	width: 163px;
	transition: var(--transition05);
}
@media (any-hover: hover){
	.hLogo a:hover{
		opacity: 0.7;
	}
}

/*
	メニューエリア
---------------------------------------------------- */
.hMenuArea{
	display: flex;
	align-items: center;
	height: 100%;
}

/*
	スケジュール・アクセス アイコン
---------------------------------------------------- */
.hIcoList{
	display: flex;
	gap: 0 20px;
	margin-right: 30px;
}
.hIcoList a{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 100%;
}
.hIcoList img{
	width: 44px;
	transition: var(--transition03);
}
.hIcoList span{
	transition: var(--transition03);
}
@media (any-hover: hover){
	.hIcoList a:hover img{
		filter: brightness(1.8);
	}
	.hIcoList a:hover span{
		color: var(--clrLBlue);
	}
}

/*
	開館・休館・ショップのみ　切り替え
---------------------------------------------------- */
.hOpenArea{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 100%;
	background-color: var(--clrLBlue);
	color: #fff;
}
.hOpenArea > p{
	line-height: 100%;
}
/* 本日開館（時間表示）
============================== */
.hOpenTxt{
	border-right: 1px solid var(--clrWhite50);
	text-align: center;
	font-size: 1.8rem;
	font-weight: 700;
	padding: 2px 15px 4px 0;
	margin-right: 15px;
}
.hOpenTxt > span:not(.txtOpen){
	display: none;
}
/* --- 時間 --- */
.hOpenTime{
	font-size: 2.3rem;
	font-family: var(--fEn);
	font-weight: 300;
}
.hOpenTime span{
	display: inline-block;
	translate: 0 -2px;
}
/* テキストのみ（時間非表示）
============================== */
.hOpenArea:is(.close, .shop) .hOpenTxt{
	border-right: none;
	padding-right: 0;
	margin-right: 0;
}
/* --- テキスト切り替え --- */
.hOpenArea:is(.close, .shop) .hOpenTxt .txtOpen{
	display: none;
}
.hOpenArea.close .hOpenTxt .txtClose,
.hOpenArea.shop .hOpenTxt .txtShop{
	display: block;
}
/* --- 時間非表示 --- */
.hOpenArea:is(.close, .shop) .hOpenTime{
	display: none;
}

/*
	メニューボタン
---------------------------------------------------- */
.hMenuBtn{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: var(--hHeader);
	height: 100%;
	background-color: var(--clrBase);
	text-align: center;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 100%;
	padding: 15px;
	position: relative;
	transition: var(--transition05);
}
/* 3本線
============================== */
.hMenuBtn::before,
.hMenuBtn::after{
	content: "";
}
.hMenuBtn::before,
.hMenuBtn .line,
.hMenuBtn::after{
	display: block;
	width: 20px;
	height: 1px;
	background-color: currentColor;
	position: absolute;
	top: 25px;
	left: 50%;
	translate: -50% 0;
	transition: var(--transition03);
}
.hMenuBtn .line{
	top: calc(25px + 6px);
}
.hMenuBtn::after{
	top: calc(25px + 12px);
}
@media (any-hover: hover){
	.hMenuBtn:hover{
		background-color: var(--clrDBlue);
		cursor: pointer;
	}
	.hMenuBtn:hover .line{
		left: calc(50% + 5px);
	}
}
/* メニュー展開時
============================== */
.hMenuBtn.jsOpen .line{
	opacity: 0;
}
.hMenuBtn.jsOpen::before,
.hMenuBtn.jsOpen::after{
	top: calc(25px + 6px);
}
.hMenuBtn.jsOpen::before{
	rotate: 45deg;
}
.hMenuBtn.jsOpen::after{
	rotate: -45deg;
}
@media (any-hover: hover){
	.hMenuBtn.jsOpen:hover::before,
	.hMenuBtn.jsOpen:hover::after{
		width: 26px;
	}
}

/*
	展開メニュー
---------------------------------------------------- */
.hOpenMenuWrapper{
	width: 100%;
	height: 100vh;
	background-color: var(--clrWhite98);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: var(--transition05);
	pointer-events: none;
	overflow-y: auto;
	z-index: 0;
}
.hOpenMenuWrapper.jsOpen{
	pointer-events: all;
	opacity: 1;
}
.hOpenMenuWrapper nav{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding-block: 220px 130px;
}
.hOpenMenuWrapper .cmnSitemapArea{
	width: var(--wBase);
	padding-inline: 30px;
	margin-inline: auto;
}

/*
	スクロール時の調整
---------------------------------------------------- */
#headerWrapper.jsHeaderScroll{
	height: var(--hHeaderScroll);
}
/* ロゴ
============================== */
.jsHeaderScroll .hLogo img{
	width: 130px;
}
/* スケジュール・アクセス
============================== */
.jsHeaderScroll .hIcoList span,
.jsHeaderScroll .hMenuBtn .txt{
	display: none;
}
/* メニューボタン
============================== */
.jsHeaderScroll .hMenuBtn::before{
	top: calc(50% - 6px);
}
.jsHeaderScroll .hMenuBtn .line{
	top: 50%;
}
.jsHeaderScroll .hMenuBtn::after{
	top: calc(50% + 6px);
}
.jsHeaderScroll .hMenuBtn.jsOpen::before,
.jsHeaderScroll .hMenuBtn.jsOpen::after{
	top: 50%;
}



/* ==========================================================================
	footer
========================================================================== */
#footerWrapper{
	background-color: var(--clrBase);
	color: #fff;
	margin-top: auto;
}
.fMainArea{
	display: flex;
	justify-content: space-between;
	width: var(--wBase);
	padding: 60px 30px;
	margin-inline: auto;
}

/*
	ロゴエリア
---------------------------------------------------- */
.fLogoArea{
	display: flex;
	flex-direction: column;
	gap: 20px 0;
}
/* ロゴ
============================== */
.fLogo{
	display: flex;
	flex-direction: column;
	gap: 8px 0;
	width: fit-content;
}
.fLogo img,
.fLogo span{
	width: 163px;
}
.fLogo span{
	background-color: var(--clrWhite10);
	border-radius: 3px;
	text-align: center;
	color: #fff;
	font-size: 1rem;
	line-height: 100%;
	letter-spacing: 0.13rem;
	padding: 5px;
}
@media (any-hover: hover){
	.fLogo:hover{
		opacity: 0.7;
	}
}
/* 住所・電話番号
============================== */
.fInfo{
	font-size: 1.2rem;
}
/* sns
============================== */
.fSns{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	aspect-ratio: 1/1;
	background-color: #fff;
	border-radius: 50%;
}
.fSns img{
	width: 14px;
}
@media (any-hover: hover){
	.fSns:hover{
		background-color: var(--clrWhite70);
	}
}

/*
	メニューリスト
---------------------------------------------------- */
.fMenuArea{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 740px;
}
/* カテゴリー
============================== */
.fMenuTit{
	display: block;
	width: fit-content;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 130%;
}
/* 各ページ
============================== */
.fMenuList{
	display: flex;
	flex-direction: column;
	gap: 15px 0;
}
.fMenuTit + .fMenuList,
.fMenuBox.titNo .fMenuList{
	gap: 10px 0;
	font-size: 1.3rem;
}
.fMenuTit + .fMenuList{
	margin-top: 15px;
}
.fMenuTit + .fMenuList a,
.fMenuBox.titNo a{
	color: var(--clrWhite60);
}
@media (any-hover: hover){
	.fMenuList a:hover{
		color: var(--clrWhite70);
	}
	.fMenuTit + .fMenuList a:hover,
	.fMenuBox.titNo a:hover{
		color: var(--clrWhite30);
	}
}

/* 登録博物館
============================== */
.fLogoJapanMuseum{
	border-radius: var(--radiusBase);
	overflow: hidden;
}
.fLogoJapanMuseum img{
	width: 110px;
}

/*
	コピーライト
---------------------------------------------------- */
.fCopyrightArea{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--clrWhite10);
	padding-left: 30px;
}
.fCopyright{
	color: var(--clrWhite70);
	font-size: 1.2rem;
	font-family: var(--fEn);
	line-height: 100%;
}

/*
	そごうテキスト・ボタンリスト
---------------------------------------------------- */
.fOthersArea{
	display: flex;
	height: 60px;
}
/* テキスト
============================== */
.fSogoTxt{
	display: flex;
	align-items: center;
	gap: 0 10px;
	color: var(--clrWhite60);
	font-size: 1.1rem;
	margin-right: 30px;
}
/* ボタン
============================== */
.fLinkList{
	display: flex;
}
.fLinkListBtn{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 10px;
	width: 170px;
	height: 100%;
	border-left: 1px solid var(--clrWhite10);
	color: #fff;
	font-size: 1.4rem;
	padding: 8px;
}
.fLinkListBtn::after{
	position: static;
}
@media (any-hover: hover){
	.fLinkListBtn:hover,
	#pageTop:hover{
		background-color: var(--clrWhite30);
	}
}

/*
	ページトップボタン
---------------------------------------------------- */
#pageTop{
	display: block;
	height: 100%;
	aspect-ratio: 1/1;
	background-color: var(--clrWhite10);
	position: relative;
}
#pageTop::after{
	content: " ";
	display: block;
	width: 10px;
	aspect-ratio: 1/1;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	position: absolute;
	top: calc(50% + 2px);
	left: 50%;
	translate: -50% -50%;
	rotate: -45deg;
}



/* ==========================================================================
	写真 hover
========================================================================== */
.basePhBox{
	background-color: transparent;
	border: var(--borderBase);
	border-radius: var(--radiusBase);
	transition: var(--transition05);
	overflow: hidden;
}
.basePhBox img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition05);
}
@media (any-hover: hover){
	a:hover .basePhBox{
		background-color: var(--clrLBlue);
	}
	a:hover .basePhBox img{
		opacity: 0.7;
	}
}



/* ==========================================================================
	チケット追従
========================================================================== */
#fixTicketWrapper{
	width: 90px;
	position: fixed;
	top: 120px;
	right: 10px;
	z-index: 8888;
}

/*
	チケット・パス購入
---------------------------------------------------- */
.fixTicketList{
	display: flex;
	flex-direction: column;
	gap: 10px 0;
}
.fixTicketList a{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px 0;
	height: 90px;
	text-align: center;
	color: #fff;
	font-size: 1.1rem;
	line-height: 110%;
}
@media print, screen and (min-width:813px){
	.fixTicketList a{
		border-radius: 5px;
	    box-shadow: 0 0 5px var(--clrBase30);
	}
}
.fixTicketList img{
	width: 48px;
}
/* チケット購入
============================== */
.fixBtnTicket{
	background-color: var(--clrLBlue);
}
@media (any-hover: hover){
	.fixBtnTicket:hover{
		background-color: var(--clrDBlue);
	}
}
/* プレス向け
============================== */
@media print, screen and (min-width:813px){
	.fixBtnPress{
		background-color: var(--clrBase60);
	}
}
@media (any-hover: hover){
	.fixBtnPress:hover{
		background-color: var(--clrBase80);
	}
}


/* ==========================================================================
	pan
========================================================================== */
#olistPan{
	display: flex;
	align-items: center;
	gap: 0 20px;
	width: 100%;
	min-height: 40px;
	font-size: 1.2rem;
	line-height: 100%;
	letter-spacing: 0.05em;
	padding: 20px 20px 0 20px;
	margin-inline: auto;
	overflow-x: scroll;
	-ms-overflow-style: none;/* IE, Edge 対応 */
	scrollbar-width: none;/* Firefox 対応 */
	position: relative;
	z-index: 100;
}
#olistPan::-webkit-scrollbar{/* Chrome, Safari 対応 */
	display: none;
}
#olistPan li{
	position: relative;
}
#olistPan li:last-of-type{
	padding: 0;
}
#olistPan a,
#olistPan li > span{
	color: var(--clrDGray);
	white-space: nowrap;
}
#olistPan a{
	text-decoration: underline;
}
@media (any-hover: hover){
	#olistPan a:hover{
		color: var(--clrBase);
		text-decoration: none;
	}
}

/*
	区切り
---------------------------------------------------- */
#olistPan li:not(:last-of-type)::after{
	content: " ";
	display: block;
	width: 6px;
	aspect-ratio: 1/1;
	border-top: 1px solid var(--clrDGray);
	border-right: 1px solid var(--clrDGray);
	position: absolute;
	top: 50%;
	right: -12px;
	transform: translateY(-50%) rotate(45deg);
}



/* ==========================================================================
	下層ページタイトル
========================================================================== */
#cmnPageTitWrapper{
	display: flex;
	align-items: center;
	width: var(--wBase);
	min-height: 150px;
	padding: 70px 30px 60px 30px;
	margin-inline: auto;
}
#olistPan + #cmnPageTitWrapper{
	padding-block: 30px 40px;
}

/*
	タイトル
---------------------------------------------------- */
.cmnPageTit > *{
	display: block;
}
.cmnPageTit .ja{
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 110%;
	letter-spacing: 0.2rem;
}
.cmnPageTit .en{
	color: var(--clrDGray);
	font-size: 1.6rem;
	font-family: var(--fEn);
	font-weight: 600;
	line-height: 100%;
	margin-top: 8px;
	translate: 0.2em 0;
}
/* 英語のみ
============================== */
.errorPage .cmnPageTit:not(:has(.ja)) .en{
	color: var(--clrBase);
	font-size: 4rem;
	margin-top: 0;
}



/* ==========================================================================
	下層ページKV
========================================================================== */
#cmnPageKvWrapper{
	width: var(--wBase);
	padding-inline: 30px;
	margin: 0 auto 80px auto;
}
#cmnPageKvWrapper img{
	border-radius: var(--radiusBase);
}



/* ==========================================================================
	カレンダー
========================================================================== */
.cmnScheduleClm2{
	display: flex;
	justify-content: space-between;
}
.cmnCalendarWrapper{
	position: relative;
}

/*
	カレンダーエリア
---------------------------------------------------- */
.cmnCalendarArea{
	background-color: #fff;
	border-radius: var(--radiusBase);
	padding: 40px 38px;
	position: relative;
}
.cmnCalendar{
	display: flex;
	flex-wrap: wrap;
	gap: 16px calc(100% / 13);
}

/*
	年月タイトル
---------------------------------------------------- */
.cmnCalendarTit{
	text-align: center;
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 30px;
}

/*
	1マス
---------------------------------------------------- */
.cmnCalendar div{
	width: calc(100% / 13);
	aspect-ratio: 1/1;
	text-align: center;
	text-indent: 0.1em;
	font-size: 1.3rem;
	font-weight: 500;
}
.cmnCalendar div span{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	cursor: default;
}
/* 曜日
============================== */
.cmnCalendar div:nth-child(-n+7){
	color: var(--clrDGray);
}
/* 日付
============================== */
.cmnCalendar div:nth-child(n+8),
.cmnCalendar div:nth-child(n+8) span{
	position: relative;
}
.cmnCalendar div:nth-child(n+8) span{
	border-radius: 50%;
	font-family: var(--fEn);
	z-index: 1;
}

/*
	展示期間
---------------------------------------------------- */
/* スケジュールあり　文字色
============================== */
[class *= "jsExhibDay"],
.cmnCalendar .closed,
.cmnCalendar .shop{
	color: #fff;
}
/* 展示期間　背景色
============================== */
[class *= "jsExhibDay"]::after{
	content: " ";
	display: block;
	width: calc((100% * 2) + 10px);
	height: calc(100% + 10px);
	background-color: var(--clrLBlue);
	position: absolute;
	top: 50%;
	left: -5px;
	translate: 0 -50%;
	z-index: 0;
}
.jsExhibDayStart::after{
	border-top-left-radius: 30% 50%;
	border-bottom-left-radius: 30% 50%;
}
.jsExhibDay.jsExhibDayStart:nth-child(n+8):nth-child(7n)::after{
	border-top-left-radius: 50% 50%;
	border-bottom-left-radius: 50% 50%;
}
.jsExhibDay:nth-child(n+8):nth-child(7n)::after,
.jsExhibDayEnd::after{
	width: calc(100% + 10px);
}
.jsExhibDayEnd::after{
	border-top-right-radius: 55% 60%;
	border-bottom-right-radius: 55% 60%;
}
/* --- 1日用 --- */
.jsExhibDayStart.jsExhibDayEnd::after{
	border-radius: 50%;
}
/* --- 展覧会終了 --- */
.cmnScheduleList .end a{
	border-left: 4px solid var(--clrDGray40);
}
[class *= "jsExhibDay"].end{
	color: var(--clrDGray);
}
[class *= "jsExhibDay"].end::after{
	background-color: var(--clrLGray);
}

/*
	ツールチップ
---------------------------------------------------- */
.calendarTooltip{
	display: none;
	max-width: 185px;
	background: var(--clrBase);
	border-radius: var(--radiusBase);
	color: #fff;
	font-size: 1.2rem;
	line-height: 140%;
	padding: 5px 8px;
	position: absolute;
	opacity: 0;
	transition: var(--transition03);
	pointer-events: none;
	z-index: 7777;
}
.calendarTooltip.jsTooltipShow{
	display: block;
	opacity: 1;
}

/*
	swiper
---------------------------------------------------- */
/* ページ送り
============================== */
/* --- 丸 --- */
.swiperBaseBtn{
	width: 30px;
	height: 30px;
	background-color: var(--clrBase);
	border-radius: 50%;
	position: absolute;
	top: 60px;
	right: auto;
	bottom: auto;
	left: auto;
}
[class *= "swiper-button"]{
	transition: var(--transition03);
}
[class *= "swiper-button"]::after{
	content: " ";
	width: 7px;
	height: 10px;
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: calc(50% - 1px);
	translate: -50% -50%;
}
.swiperBaseBtn.swiper-button-prev{
	left: 35px;
}
.swiperBaseBtn.swiper-button-next{
	right: 35px;
}
.swiperBaseBtn.swiper-button-next::after{
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	left: calc(50% + 1px);
}
@media (any-hover: hover){
	[class *= "swiper-button"]:hover{
		opacity: 0.7;
	}
}
/* --- 四角 --- */
.swiperSquareBtn[class *= "swiper-button"]{
	width: 50px;
	height: 100px;
	background-color: var(--clrBase60);
	border-radius: 3px;
	margin: 0;
	position: absolute;
	top: 50%;
	right: auto;
	bottom: auto;
	left: auto;
	translate: 0 -50%;
}
.swiperSquareBtn.swiper-button-prev{
	left: 0;
}
.swiperSquareBtn.swiper-button-next{
	right: 0;
}
.swiperSquareBtn.swiper-button-next::after{
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	left: calc(50% + 1px);
}

/*
	注釈
---------------------------------------------------- */
.cmnScheduleNoteList{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-top: 10px;
}
.cmnScheduleNoteList li{
	color: var(--clrBase50);
	font-size: 1.3rem;
	padding-left: 15px;
	position: relative;
}
.cmnScheduleNoteList li::before{
	content: " ";
	display: block;
	width: 10px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
}
/* 休館日
============================== */
.cmnCalendar .closed,
.cmnScheduleNoteList .closed::before{
	background-color: var(--clrPoint);
}
/* ミュージアムショップのみ営業
============================== */
.cmnCalendar .shop,
.cmnScheduleNoteList .shop::before{
	background-color: var(--clrDGray);
}



/* ==========================================================================
	スケジュールリスト
========================================================================== */
/*
	展示日付・タイトル　共通
---------------------------------------------------- */
/* 展示日付
============================== */
.dayBaseTxt{
	color: var(--clrDGray);
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 100%;
}
/* タイトル
============================== */
.baseTit{
	font-weight: 700;
	line-height: 140%;
	overflow-wrap: anywhere;
	word-break: normal;
	transition: var(--transition03);
}

/*
	リスト
---------------------------------------------------- */
.cmnScheduleList{
	display: flex;
	flex-direction: column;
	gap: 10px 0;
}
@media print, screen and (min-width:813px){
	.cmnScheduleList li{
		height: 140px;
	}
}
.cmnScheduleList a{
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #fff;
	border-radius: 0 var(--radiusBase) var(--radiusBase) 0;
	border-left: 4px solid var(--clrLBlue);
	padding: 15px 15px 40px 20px;
	position: relative;
}
.cmnScheduleList a.noLink{
	padding-bottom: 15px;
}
.cmnScheduleList .dayBaseTxt{
	order: 1;
	color: var(--clrLBlue);
	margin-bottom: 8px;
}
.cmnScheduleList .baseTit{
	order: 2;
}
@media print, screen and (min-width:813px){
	.cmnScheduleList .baseTit{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}
@media (any-hover: hover){
	.cmnScheduleList a:hover{
		background-color: var(--clrLBlue10);
	}
	.cmnScheduleList a:hover .baseTit{
		color: var(--clrLBlue);
	}
}
/* 展覧会終了
============================== */
.cmnScheduleList .end a{
	border-left: 4px solid var(--clrDGray40);
}
.cmnScheduleList .end .dayBaseTxt{
	color: var(--clrDGray);
}



/* ==========================================================================
	お知らせ
========================================================================== */
.cmnNewsList{
	display: flex;
	flex-direction: column;
}
.cmnNewsList:has(li){
	border-top: var(--borderBase);
}
.cmnNewsList a{
	display: flex;
	align-items: flex-start;
	border-bottom: var(--borderBase);
	padding-block: 30px;
}

/*
	タイトル・本文
---------------------------------------------------- */
.cmnNewsList p{
	line-height: 160%;
}
.cmnNewsList .dayBaseTxt{
	order: 1;
	min-width: 110px;
}
.cmnNewsTit{
	order: 2;
	width: calc(100% - 110px);
	overflow-wrap: anywhere;
	word-break: normal;
	transition: var(--transition03);
}
@media (any-hover: hover){
	.cmnNewsList a:hover .cmnNewsTit{
		color: var(--clrLBlue);
	}
}



/* ==========================================================================
	ブログ一覧
========================================================================== */
/*
	リスト
---------------------------------------------------- */
.blogList{
	display: flex;
	flex-direction: column;
	border-top: var(--borderBase);
}
.blogList li{
	border-bottom: var(--borderBase);
}
.blogList a{
	display: flex;
	justify-content: space-between;
	padding-block: 26px;
}
/* 画像
============================== */
.blogList .basePhBox{
	order: 1;
	width: 150px;
	height: 90px;
}
/* タイトル
============================== */
.blogListTxtArea{
	display: flex;
	flex-direction: column;
	order: 2;
	width: calc(100% - 180px);
}
.blogList .baseTit{
	font-size: 1.7rem;
	margin-bottom: 15px;
}
@media (any-hover: hover){
	.blogList a:hover .baseTit{
		color: var(--clrLBlue);
	}
}
/* 日付
============================== */
.blogList .dayBaseTxt{
	font-size: 1.3rem;
	margin-top: auto;
}



/* ==========================================================================
	ページャー
========================================================================== */
.cmnPaginationList{
	display: flex;
	justify-content: center;
	gap: 0 15px;
	margin-top: 80px;
}
.cmnPaginationList li{
	width: 50px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	transition: var(--transition03);
}
.cmnPaginationList li > *{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-indent: 0.1em;
	line-height: 90%;
}

/*
	進む・戻る
---------------------------------------------------- */
[class *= "cmnPageArrow"]{
	background-color: var(--clrBase);
	color: #fff;
	position: relative;
}
/* 矢印
============================== */
[class *= "cmnPageArrow"]::after{
	content: " ";
	display: block;
	width: 10px;
	height: 13px;
	background-color: #fff;
	position: absolute;
	top: 50%;
	translate: -50% -50%;
	transition: var(--transition03);
	pointer-events: none;
}
.cmnPageArrowPrev::after{
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
	left: calc(50% - 1px);
}
.cmnPageArrowNext::after{
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	left: calc(50% + 2px);
}
/* 非活性
============================== */
.cmnPageArrowPrev:has(+.active),
.active + .cmnPageArrowNext{
	opacity: 0.15;
	pointer-events: none;
}
/* hover
============================== */
@media (any-hover: hover){
	[class *= "cmnPageArrow"]:hover{
		opacity: 0.7;
	}
}

/*
	数字
---------------------------------------------------- */
.cmnPageNum a{
	color: var(--clrDGray);
	font-family: var(--fEn);
	font-weight: 500;
}
/* 活性
============================== */
.cmnPageNum.active{
	background-color: var(--clrLGray);
}
.cmnPageNum.active a{
	color: var(--clrBase);
}
/* hover
============================== */
@media (any-hover: hover){
	.cmnPageNum:hover{
		background-color: var(--clrLGray);
	}
	.cmnPageNum:hover a{
		color: var(--clrBase);
	}
}



/* ==========================================================================
	記事
========================================================================== */
#cmnArticleWrapper{
	padding-top: 50px;
}
.cmnArticleArea{
	border-bottom: var(--borderBase);
	padding-bottom: 60px;
}

/*
	タイトルエリア
---------------------------------------------------- */
.cmnArticleTitArea{
	margin-bottom: 40px;
}
/* 記事タイトル
============================== */
.cmnArticleTit{
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 130%;
	letter-spacing: 0.25rem;
	overflow-wrap: anywhere;
	word-break: normal;
	margin-bottom: 20px;
}
/* 日付
============================== */
.cmnArticleTitArea .dayBaseTxt{
	font-size: 1.3rem;
}
/* メイン画像
============================== */
.cmnArticleTitArea figure{
	margin-top: 40px;
}
.cmnArticleTitArea figure img{
	width: 100%;
	height: auto;
}

/*
	本文エリア
---------------------------------------------------- */
.cmnArticleTxtArea > *:last-child{
	margin-bottom: 0;
}
/* 本文
============================== */
.cmnArticleTxtArea p{
	line-height: 200%;
	font-feature-settings: normal;
	margin-bottom: 1em;
}
.cmnArticleTxtArea p:has(+img){
	margin-bottom: 2em;
}
/* 画像
============================== */
.cmnArticleTxtArea img{
	width: auto;
	max-width: 100%;
	height: auto;
	margin-bottom: 2em;
}
/* その他タグ
============================== */
/* --- 見出し --- */
.cmnArticleTxtArea h2,
.cmnArticleTxtArea h3,
.cmnArticleTxtArea h4,
.cmnArticleTxtArea h5,
.cmnArticleTxtArea h6{
	font-weight: bold;
}
.cmnArticleTxtArea h2{
	font-size: 2.8rem;
}
.cmnArticleTxtArea h3{
	font-size: 2.4rem;
}
.cmnArticleTxtArea h4{
	font-size: 2rem;
}
.cmnArticleTxtArea h5{
	font-size: 1.7rem;
}
.cmnArticleTxtArea h6{
	font-size: 1.5rem;
}
/* --- 太文字 --- */
.cmnArticleTxtArea strong{
	font-weight: bold;
}
/* --- イタリック --- */
.cmnArticleTxtArea i{
	font-style: italic;
}
/* --- 下線 --- */
.cmnArticleTxtArea u{
	text-decoration: underline;
}




/* ==========================================================================
	背景色付きメモエリア
========================================================================== */
.memoBgClm2{
	display: flex;
	gap: 0 30px;
	margin-top: 60px;
}
.memoBgBox{
	width: calc((100% - 30px)/2);
	background-color: var(--clrLGray);
	border-radius: var(--radiusBase);
}

/*
	タイトル
---------------------------------------------------- */
.memoBgTit{
	border-bottom: 1px solid #fff;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 130%;
	padding: 15px 30px;
}

/*
	本文エリア
---------------------------------------------------- */
.memoBgTxtArea{
	padding: 20px 30px 30px 30px;
}



/* ==========================================================================
	コンタクト　電話番号エリア
========================================================================== */
#contactTelWrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*
	電話番号
---------------------------------------------------- */
.contactTelNum{
	color: var(--clrLBlue);
	font-size: 5rem;
	font-family: var(--fEn);
	font-weight: 400;
	line-height: 80%;
	letter-spacing: 0.2rem;
}
.contactTelNum .txtS{
	color: var(--clrDGray);
	font-size: 2.4rem;
	font-weight: 600;
}

/*
	注釈
---------------------------------------------------- */
.contactTelComment{
	font-size: 1.4rem;
	line-height: 130%;
	margin-top: 5px;
}



/* ==========================================================================
	フォーム
========================================================================== */
/*
	共通
---------------------------------------------------- */
/* 共通設定
============================== */
:root{
	--hForm:        50px;
	--hFormS:       34px;
	--fontSizeForm: 1.6rem;
}
input[type = "text"], textarea,
[class *= "formSelect"],
[class *= "formChoice"]{
	font-size: var(--fontSizeForm);
}
input[type = "text"], textarea,
[class *= "formSelect"]{
	display: block;
	background-color: #fff;
	border-radius: var(--radiusBase);
}
input[type = "text"], textarea{
	padding: 15px 20px;
}
input[type = "text"],
[class *= "formSelect"]{
	height: var(--hForm);
}
input[type = "text"],
[class *= "formSelect"] select{
	line-height: var(--hForm);
}
[class *= "formSelect"]:not(:has(select[disabled])),
[class*="formChoice"]:has(input:not(:disabled)){
	cursor: pointer;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: var(--clrBase) !important;
  transition: background-color 5000s ease-in-out 0s; /* Chrome autofill チラつき防止用ハック */
}
/* 複数時
============================== */
.formClmBox{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
/* サイズ
============================== */
.formS{
	width: calc((100% - 30px)/3);
}
.formM{
	width: calc((100% - 15px)/2);
}
.formL{
	width: 100%;
}
/* プレイスホルダー
============================== */
input[type = "text"]::placeholder,
textarea::placeholder{
	color: var(--clrDGray);
}

/*
	テキストエリア
---------------------------------------------------- */
textarea{
	width: 100%;
	height: 300px;
}
/* テキストカウンター
============================== */
.formCountTxt{
	text-align: right;
	color: var(--clrDGray);
	font-size: 1.2rem;
	margin-top: 5px;
}

/*
	セレクトボックス
---------------------------------------------------- */
[class *= "formSelect"]{
	position: relative;
	overflow: hidden;
}
/* 矢印
============================== */
[class *= "formSelect"]::before,
[class *= "formSelect"]::after{
	content: " ";
	position: absolute;
	pointer-events: none;
}
[class *= "formSelect"]::before{
	height: 100%;
	aspect-ratio: 1/1;
	background-color: var(--clrDGray);
	top: 0;
	right: 0;
}
[class *= "formSelect"]::after{
	width: 6px;
	height: 12px;
	background: url("../images/ico_select.svg") no-repeat top left / 100% auto;
	top: 50%;
	right: 22px;
	translate: 0 -50%;
}
/* select
============================== */
[class *= "formSelect"] select{
	width: 100%;
	height: 100%;
	appearance: none;
}
.formSelect select{
	padding: 0 70px 0 15px;
}
/* サイズ（全体が小さいタイプ）
============================== */
.formSelectS{
	height: var(--hFormS);
}
.formSelectS::after{
	right: 14px;
}
.formSelectS select{
	font-size: 1.4rem;
	line-height: var(--hFormS);
	padding: 0 54px 0 10px;
}

/*
	ラジオボタン・チェックボックス
---------------------------------------------------- */
/* 共通
============================== */
[class *= "formChoice"]{
	display: flex;
	align-items: center;
	gap: 0 8px;
	line-height: 150%;
	word-break: break-all;
	position: relative;
}
/* --- 擬似要素 --- */
[class *= "formChoice"]::before,
[class *= "formChoice"]::after{
	content: " ";
	aspect-ratio: 1/1;
}
[class *= "formChoice"]::before{
	flex-shrink: 0;
	width: 26px;
	background-color: #fff;
	border: 1px solid var(--clrDGray40);
}
[class *= "formChoice"]::after{
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	opacity: 0;
	transition: var(--transition03);
}
[class *= "formChoice"]:has(input:checked)::after{
	opacity: 1;
}
[class *= "formChoice"] input{
	display: none;
}
/* ラジオボタン
============================== */
/* --- 擬似要素 --- */
.formChoiceRadio::before,
.formChoiceRadio::after{
	border-radius: 50%;
}
.formChoiceRadio::after{
	width: 14px;
	background-color: var(--clrLBlue);
	left: 6px;
}
/* チェックボックス
============================== */
/* --- 擬似要素 --- */
.formChoiceCheck::before{
	border-radius: var(--radiusBase);
}
.formChoiceCheck::after{
	width: 8px;
	height: 14px;
	border-right: 3px solid var(--clrLBlue);
	border-bottom: 3px solid var(--clrLBlue);
	top: calc(50% - 1px);
	left: 9px;
	rotate: 45deg;
}

/*
	非活性
---------------------------------------------------- */
/* 項目
============================== */
input[disabled],
textarea[disabled],
[class *= "formSelect"]:has(select[disabled]),
[class *= "formChoice"]:has(input[disabled]){
	opacity: 0.5;
}
[class *= "formSelect"]:has(select[disabled]){
	color: var(--clrDGray);
}
/* --- ラジオボタン --- */
.formChoiceRadio:has(input[disabled])::after{
	background-color: var(--clrDGray);
}
/* --- チェックボックス --- */
.formChoiceCheck:has(input[disabled])::after{
	border-right: 3px solid var(--clrDGray);
	border-bottom: 3px solid var(--clrDGray);
}

/*
	必須
---------------------------------------------------- */
.formRequired{
	display: inline-block;
	border-radius: var(--radiusBase);
	border: 1px solid var(--clrLBlue);
	color: var(--clrLBlue);
	font-size: 1.1rem;
	line-height: 100%;
	padding: 3px 5px;
	margin-left: 20px;
}

/*
	エラー
---------------------------------------------------- */
/* タイトル
============================== */
.formError .baseTit,
.formErrorTxt{
	color: var(--clrPoint);
}
/* 項目
============================== */
.formError input,
.formError textarea,
.formError [class *= "formSelect"],
.formError [class *= "formChoice"]::before{
	background-color: var(--clrPoint10);
	border: 1px solid var(--clrPoint);
}
/* --- ラジオボタン --- */
.formError .formChoiceRadio::after{
	background-color: var(--clrPoint);
}
/* --- チェックボックス --- */
.formError .formChoiceCheck::after{
	border-right: 3px solid var(--clrPoint);
	border-bottom: 3px solid var(--clrPoint);
}
/* エラーテキスト
============================== */
.formErrorTxt{
	display: none;
	line-height: 140%;
	margin-top: 5px;
	padding-left: 22px;
	position: relative;
}
.formError .formErrorTxt{
	display: block;
}
.formErrorTxt + .formErrorTxt{
	margin-top: 5px;
}
/* --- アイコン --- */
.formErrorTxt::before,
.formErrorTxt::after{
	content: " ";
	display: block;
	position: absolute;
}
.formErrorTxt::before{
	width: 16px;
	aspect-ratio: 1/1;
	background-color: currentColor;
	border-radius: 50%;
	top: 3px;
	left: 0;
}
.formErrorTxt::after{
	content: "×";
	color: #fff;
	font-size: 1rem;
	line-height: 90%;
	top: 6px;
	left: 3px;
}

/*
	フォームリスト
---------------------------------------------------- */
.formList{
	display: flex;
	flex-direction: column;
	gap: 50px 0;
}
/* 項目名
============================== */
.formList .baseTit{
	margin-bottom: 12px
}

/*
	同意エリア
---------------------------------------------------- */
.formAgreeArea{
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #fff;
	border-radius: var(--radiusBase);
	padding: 30px;
	margin-top: 50px;
}
.formAgreeArea .formChoiceCheck{
	font-size: 1.5rem;
}
.formAgreeArea .formChoiceCheck:has(input:checked)::before{
	border: 3px solid var(--clrLBlue30);
}

/*
	遷移ボタン
---------------------------------------------------- */
.btnAreaC.form [class *= "baseBtn"]{
	width: 200px;
	min-width: initial;
}

/*
	確認画面
---------------------------------------------------- */
/* 入力テキスト
============================== */
.formCheckTxt{
	min-width: 0;
	font-size: 1.6rem;
	line-height: 180%;
	letter-spacing: 0.08em;
}



/* ==========================================================================
	完了画面・エラーページ　共通
========================================================================== */
#cmnInfoWrapper.cmnBgBoxSpace{
	padding-block: 100px;
}
.cmnInfoTit{
	text-align: center;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 130%;
	letter-spacing: 0.2rem;
	margin-bottom: 30px;
}
.cmnInfoTxt{
	text-align: center;
	font-size: 1.7rem;
}

/*
	エラーページ
---------------------------------------------------- */
#ctsWrapper.errorPage{
	padding-bottom: 20px;
}
/* サイトマップ
============================== */
.errorPage .cmnSitemapArea{
	margin-top: 80px;
}



@media screen and (max-width:812px){
	/* ==========================================================================
		Setting CSS
	========================================================================== */
	:root{
		/* width */
		--wMin:  100%;
		--wBase: 100%;
		--w900:  100%;
		--w800:  100%;
		--w500:  500px;
		/* height */
		--hHeader:       60px;
		--hHeaderScroll: 40px;
		/* line-height */
		--lineHBase: 180%;
		/* etter-spacing */
		--letterSBase: 0.15rem;
	}
	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: var(--hHeader) 60px;
	}
	/* ctsArea
	============================== */
	.ctsArea{
		max-width: var(--w500);
		padding: 0 20px 50px 20px;
	}
	.cmnBgBoxSpace .ctsArea{
		max-width: 480px;
		padding-inline: 10px;
	}
	/* 背景色 スペースあり
	============================== */
	/* --- 左右空きあり --- */
	.cmnBgBoxSpace{
		width: calc(100% - 20px);
	}
	.cmnBgBoxSpace + .cmnBgBoxSpace{
		margin-top: 10px;
	}
	/* --- コンテンツ幅用 --- */
	.cmnBgBoxCts{
		border-radius: var(--radiusBase);
		padding: 25px 15px;
	}

	/*
		空き調整
	---------------------------------------------------- */
	/* 調整エリア
	============================== */
	.cmnSpaceBoxM{
		gap: 40px 0;
	}
	/* 上
	============================== */
	.mTop20,
	[class *= "cmnSpaceBox"] .btnArea.mTop08{
		margin-top: 15px;
	}
	/* 下
	============================== */
	.mBtm20{
		margin-bottom: 15px;
	}

	/*
		タイトル
	---------------------------------------------------- */
	/* ベース
	============================== */
	.baseEnJaTit{
		margin-bottom: 20px;
	}
	.baseEnJaTit .ja{
		font-size: 2.4rem;
	}
	/* 開催中・開催予定
	============================== */
	[class *= "clrBgTit"]{
		font-size: 1.5rem;
	}
	/* 丸アイテム
	============================== */
	.circleTit{
		margin-bottom: 20px;
	}
	.circleTit:has(+p, +ul){
		margin-bottom: 15px;
	}
	.circleTit .en{
		font-size: 1.1rem;
		padding-left: 14px;
		margin-bottom: 5px;
	}
	.circleTit .en::before{
		width: 8px;
	}
	.circleTit .ja{
		font-size: 2.2rem;
	}
	/* 黒背景
	============================== */
	[class *= "bgBlackTit"]{
		font-size: 1.5rem;
		padding: 8px 10px;
		margin-bottom: 15px;
	}
	.bgBlackTitS{
		font-size: 1.2rem;
		padding: 5px 8px;
		margin-bottom: 8px;
	}
	/* アンダーライン
	============================== */
	.underLineTit{
		font-size: 1.8rem;
		padding-bottom: 12px;
		margin-bottom: 20px;
	}
	/* ノーマル
	============================== */
	.normalTit{
		font-size: 2.2rem;
		margin-bottom: 15px;
	}

	/*
		ボタン
	---------------------------------------------------- */
	[class *= "btnArea"]{
		margin-top: 30px;
		gap: 10px;
	}
	/* ボタンベース
	============================== */
	[class *= "baseBtn"]{
		min-width: 100%;
		min-height: 30px;
		padding-left: 15px;
	}
	/* --- サイズS --- */
	[class *= "baseBtnS"]{
		min-width: 100px;
		min-height: 24px;
		padding-right: 40px;
	}
	/* --- 戻る --- */
	.baseBtnBack{
		min-width: initial;
		padding-inline: 50px 15px;
	}
	.baseBtnBack::after{
		left: 16px;
	}
	.baseBtnSBack{
		padding-inline: 40px 15px;
	}
	.baseBtnSBack::after{
		left: 14px;
	}
	/* チケットボタン
	============================== */
	a.ticketBtn{
		width: 100%;
		min-height: 50px;
		padding: 10px 40px 10px 70px;
	}
	/* --- チケットアイコン --- */
	.ticketBtn::before{
		width: 50px;
		height: 100%;
	}
	/* --- リンクアイコン --- */
	/* 外部リンク */
	.ticketBtn::after{
		right: 15px;
	}
	/* 内部リンク */
	.ticketBtn.icoImgArrow::after{
		height: 15px;
		right: 13px;
	}

	/*
		リスト
	---------------------------------------------------- */
	/* --- 丸アイテム --- */
	/* Lサイズ */
	.circleListL{
		gap: 13px 0;
	}
	.circleListL > li{
		font-size: 1.6rem;
		padding-left: 13px;
	}
	.circleListL > li::before{
		width: 8px;
	}
	/* Sサイズ */
	.circleListS{
		gap: 10px 0;
	}
	.circleListS > li{
		font-size: 1.4rem;
		padding-left: 10px;
	}
	.circleListS > li::before{
		width: 6px;
	}

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

	/* tblBase
	============================== */
	.tblBase tr,
	.tblBase tr > *{
		display: block;
		width: 100%;
	}
	.tblBase th{
		width: 100%;
		padding: 10px 0 0 0;
	}
	.tblBase td{
		padding-top: 6px;
	}
	/* tblBaseScroll
	============================== */
	/* --- thead --- */
	.tblBaseScroll tr > *{
		padding-inline: 15px;
	}
	/* その他調整
	============================== */
	/* --- scrollArea --- */
	.scrollArea{
		overflow-x: scroll;
	}



	/* ==========================================================================
		サイトマップエリア
	========================================================================== */
	.cmnSitemapArea{
		flex-direction: column;
		gap: 20px 0;
	}
	/* カテゴリー
	============================== */
	.cmnSitemapTit{
		width: 100%;
	}
	.cmnSitemapTit .en{
		font-size: 1.2rem;
		margin-bottom: 5px;
	}
	.cmnSitemapTit .ja{
		font-size: 1.8rem;
	}
	/* 各ページ
	============================== */
	.cmnSitemapList a{
		position: relative;
	}
	.cmnSitemapList a::before,
	.cmnSitemapList a::after{
		top: 50%;
		bottom: auto;
		translate: 0 -50%;
	}
	.cmnSitemapList[class *= "icoListArrow"] a::before{
		background-color: var(--clrMGray);
	}
	.cmnSitemapList:has(.cmnSitemapTit){
		gap: 0;
		border-top: var(--borderBase);
	}
	.cmnSitemapList:has(.cmnSitemapTit) > li{
		border-bottom: var(--borderBase);
	}
	.cmnSitemapList:has(.cmnSitemapTit) > li a{
		padding-block: 20px;
	}
	.cmnSitemapTit + .cmnSitemapList,
	.cmnSitemapBox.titNo .cmnSitemapList{
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 8px;
	}
	.cmnSitemapTit + .cmnSitemapList{
		margin-top: 15px;
	}
	.cmnSitemapBox.titNo{
		border-top: var(--borderBase);
		padding-top: 20px;
	}
	.cmnSitemapTit + .cmnSitemapList li,
	.cmnSitemapBox.titNo .cmnSitemapList li{
		width: calc((100% - 10px)/2);
	}
	.cmnSitemapTit + .cmnSitemapList a,
	.cmnSitemapBox.titNo .cmnSitemapList a{
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: var(--clrWhite70);
		border: var(--borderBase);
		border-radius: var(--radiusBase);
		color: var(--clrBase);
		font-size: 1.2rem;
		letter-spacing: 0;
		padding: 8px 24px 8px 8px;
	}
	.cmnSitemapTit + .cmnSitemapList a::before,
	.cmnSitemapBox.titNo .cmnSitemapList a::before{
		right: 6px;
	}
	.cmnSitemapTit + .cmnSitemapList a::after,
	.cmnSitemapBox.titNo .cmnSitemapList a::after{
		right: 10px;
	}




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

	/*
		ロゴ
	---------------------------------------------------- */
	.hLogo img{
		width: 100px;
	}

	/*
		メニューエリア
	---------------------------------------------------- */
	.hMenuArea{
		display: flex;
		align-items: center;
		height: 100%;
	}

	/*
		スケジュール・アクセス アイコン
	---------------------------------------------------- */
	.hIcoList{
		gap: 0 15px;
		margin-right: 15px;
	}
	.hIcoList img{
		width: 25px;
	}
	.hIcoList span{
		display: none;
	}

	/*
		開館・休館・ショップのみ　切り替え
	---------------------------------------------------- */
	.hOpenArea{
		flex-direction: column;
		width: 90px;
	}
	/* 本日開館（時間表示）
	============================== */
	.hOpenTxt{
		border-right: none;
		font-size: 1.3rem;
		padding: 0;
		margin: 0 0 10px 0;
	}
	/* --- 時間 --- */
	.hOpenTime{
		font-size: 1.2rem;
		font-weight: 500;
		letter-spacing: 0;
	}
	.hOpenTime span{
		translate: 0 -1px;
	}
	/* テキストのみ（時間非表示）
	============================== */
	.hOpenArea:is(.close, .shop) .hOpenTxt{
		margin-bottom: 0;
	}
	/* --- ミュージアムショップのみ営業 --- */
	.hOpenArea.shop .hOpenTxt .txtShop{
		font-size: 1rem;
		line-height: 120%;
		letter-spacing: 0rem;
	}

	/*
		メニューボタン
	---------------------------------------------------- */
	.hMenuBtn{
		font-size: 1rem;
		letter-spacing: 0;
		padding: 10px;
	}
	/* 3本線
	============================== */
	.hMenuBtn::before,
	.hMenuBtn .line,
	.hMenuBtn::after{
		width: 16px;
		top: 16px;
	}
	.hMenuBtn .line{
		top: calc(16px + 5px);
	}
	.hMenuBtn::after{
		top: calc(16px + 10px);
	}
	/* メニュー展開時
	============================== */
	.hMenuBtn.jsOpen::before,
	.hMenuBtn.jsOpen::after{
		top: calc(16px + 5px);
	}

	/*
		展開メニュー
	---------------------------------------------------- */
	.hOpenMenuWrapper{
		height: 100dvh;
	}
	.hOpenMenuWrapper nav{
		flex-direction: column;
		justify-content: flex-start;
		padding-block: 90px 80px;
	}
	.hOpenMenuWrapper .cmnSitemapArea{
		max-width: var(--w500);
		padding-inline: 20px;
	}

	/*
		スクロール時の調整
	---------------------------------------------------- */
	/* ロゴ
	============================== */
	.jsHeaderScroll .hLogo img{
		width: 80px;
	}
	/* 本日開館
	============================== */
	.hOpenTxt{
		font-size: 1.2rem;
		margin-bottom: 5px;
	}
	/* メニューボタン
	============================== */
	.jsHeaderScroll .hMenuBtn::before{
		top: calc(50% - 5px);
	}
	.jsHeaderScroll .hMenuBtn .line{
		top: 50%;
	}
	.jsHeaderScroll .hMenuBtn::after{
		top: calc(50% + 5px);
	}
	.jsHeaderScroll .hMenuBtn.jsOpen::before,
	.jsHeaderScroll .hMenuBtn.jsOpen::after{
		top: 50%;
	}



	/* ==========================================================================
		footer
	========================================================================== */
	.fMainArea{
		flex-direction: column;
		gap: 40px 0;
		max-width: var(--w500);
		padding: 30px 20px;
		margin-inline: auto;
	}

	/*
		ロゴエリア
	---------------------------------------------------- */
	.fLogoArea{
		gap: 12px 0;
	}
	/* ロゴ
	============================== */
	.fLogo img,
	.fLogo span{
		width: 150px;
	}
	.fLogo span{
		font-size: 1rem;
		line-height: 130%;
		letter-spacing: 0.05rem;
	}
	/* sns
	============================== */
	.fSns{
		width: 35px;
	}
	.fSns img{
		width: 12px;
	}

	/*
		メニューリスト
	---------------------------------------------------- */
	.fMenuArea{
		flex-wrap: wrap;
		gap: 30px 25px;
		width: 100%;
	}
	.fMenuBox{
		width: calc((100% - 25px)/2);
	}
	/* カテゴリー
	============================== */
	.fMenuTit{
		font-size: 1.4rem;
	}
	/* 各ページ
	============================== */
	.fMenuList{
		gap: 13px 0;
	}
	.fMenuTit + .fMenuList,
	.fMenuBox.titNo .fMenuList{
		gap: 8px 0;
		font-size: 1.2rem;
	}
	.fMenuTit + .fMenuList{
		margin-top: 13px;
	}
	/* --- ご来館サービスのご案内 --- */
	.fMenuBox:nth-of-type(4) .fMenuList li:nth-of-type(3){
		letter-spacing: 0.05rem;
	}

	/* 登録博物館
	============================== */
	.fLogoJapanMuseum{
		width: 100%;
		background-color: #fff;
		text-align: center;
	}

	/*
		コピーライト
	---------------------------------------------------- */
	.fCopyrightArea{
		padding-left: 20px;
	}
	.fCopyright{
		font-size: 1rem;
	}

	/*
		そごうテキスト・ボタンリスト
	--------------------------------------------------- */
	.fOthersArea{
		align-items: center;
		gap: 0 10px;
		height: 50px;
	}
	/* テキスト
	============================== */
	.fSogoTxt{
		margin-right: 0;
	}
	.fSogoTxt img{
		width: 25px;
	}
	/* ボタン
	============================== */
	.fLinkList{
		flex-direction: column;
		gap: 10px 0;
	}
	.fLinkListBtn{
		width: 100%;
		height: 40px;
		background-color: var(--clrWhite20);
		border-left: none;
	}


	/* ==========================================================================
		チケット追従
	========================================================================== */
	#fixTicketWrapper{
		width: 100%;
		background-color: var(--clrBase80);
		top: auto;
		right: 0;
		bottom: 0;
		overflow: visible;
	}
	#fixTicketWrapper > *:not(:first-child){
		border-top: 1px solid #fff;
	}

	/*
		展示情報
	---------------------------------------------------- */
	.fixTicketExhib{
		display: flex;
		flex-direction: column;
		gap: 5px 0;
		padding: 15px 15px 10px 15px;
	}
	.fixTicketExhib > *{
		color: #fff;
	}
	.fixTicketExhib .dayBaseTxt{
		order: 1;
		font-size: 1.2rem;
	}
	.fixTicketExhib .baseTit{
		order: 2;
		display: -webkit-box;
		font-size: 1.4rem;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	/*
		チケット・パス購入
	---------------------------------------------------- */
	.fixTicketList{
		flex-direction: row;
		justify-content: center;
		gap: 0;
	}
	.fixTicketList li{
		width: calc(100% / 2);
	}
	.fixTicketList li:only-child{
		width: 100%;
	}
	.fixTicketList a{
		flex-direction: row;
		gap: 0 10px;
		height: 46px;
		text-align: left;
	}



	/* ==========================================================================
		pan
	========================================================================== */
	#olistPan{
		padding-top: 15px;
	}



	/* ==========================================================================
		下層ページタイトル
	========================================================================== */
	#cmnPageTitWrapper{
		min-height: initial;
		padding: 45px 20px 35px 20px;
	}
	#olistPan + #cmnPageTitWrapper{
		padding-block: 25px 30px;
	}

	/*
		タイトル
	---------------------------------------------------- */
	.cmnPageTit .ja{
		font-size: 2.6rem;
	}
	.cmnPageTit .en{
		font-size: 1.3rem;
	}
	/* 英語のみ
	============================== */
	.errorPage .cmnPageTit:not(:has(.ja)) .en{
		font-size: 2.8rem;
	}



	/* ==========================================================================
		下層ページKV
	========================================================================== */
	#cmnPageKvWrapper{
		width: var(--wBase);
		padding-inline: 0;
		margin-bottom: 50px;
	}
	#cmnPageKvWrapper img{
		border-radius: 0;
	}



	/* ==========================================================================
		カレンダー
	========================================================================== */
	.cmnScheduleClm2{
		flex-direction: column;
		gap: 30px 0;
	}

	/*
		カレンダーエリア
	---------------------------------------------------- */
	.cmnCalendarArea{
		width: 100%;
		padding: 20px;
	}
	.cmnCalendar{
		gap: 17px calc(100% / 13);
	}

	/*
		年月タイトル
	---------------------------------------------------- */
	.cmnCalendarTit{
		font-size: 1.6rem;
		margin-bottom: 20px;
	}

	/*
		1マス
	---------------------------------------------------- */
	.cmnCalendar div{
		font-size: 1.2rem;
	}

	/*
		展示期間
	---------------------------------------------------- */
	/* 展示期間　背景色
	============================== */
	.jsExhibDayStart::after{
		border-top-left-radius: 30% 50%;
		border-bottom-left-radius: 30% 50%;
	}

	/*
		ツールチップ
	---------------------------------------------------- */
	.calendarTooltip{
		max-width: 90px;
		font-size: 1.1rem;
	}

	/*
		swiper
	---------------------------------------------------- */
	/* ページ送り
	============================== */
	/* --- 丸 --- */
	.swiperBaseBtn{
		top: 40px;
	}
	.swiperBaseBtn.swiper-button-prev{
		left: 20px;
	}
	.swiperBaseBtn.swiper-button-next{
		right: 20px;
	}
	/* --- 四角 --- */
	.swiperSquareBtn[class *= "swiper-button"]{
		width: 30px;
		height: 80px;
	}

	/*
		注釈
	---------------------------------------------------- */
	.cmnScheduleNoteList{
		bottom: -8px;
	}
	.cmnScheduleNoteList li{
		font-size: 1.2rem;
	}



	/* ==========================================================================
		スケジュールリスト
	========================================================================== */
	/*
		リスト
	---------------------------------------------------- */
	.cmnScheduleList{
		width: 100%;
	}
	.cmnScheduleList li{
		max-height: initial;
	}
	.cmnScheduleList a{
		padding-left: 15px;
	}


	/* ==========================================================================
		お知らせ
	========================================================================== */
	.cmnNewsList a{
		flex-direction: column;
		padding-block: 20px;
	}

	/*
		タイトル・本文
	---------------------------------------------------- */
	.cmnNewsList .dayBaseTxt{
		min-width: initial;
	}
	.cmnNewsTit{
		width: 100%;
	}


	/* ==========================================================================
		ブログ一覧
	========================================================================== */
	/*
		リスト
	---------------------------------------------------- */
	.blogList a{
		padding-block: 20px;
	}
	/* 画像
	============================== */
	.blogList .basePhBox{
		width: 120px;
		height: 70px;
	}
	/* タイトル
	============================== */
	.blogListTxtArea{
		width: calc(100% - 135px);
	}
	.blogList .baseTit{
		font-size: 1.4rem;
	}
	/* 日付
	============================== */
	.blogList .dayBaseTxt{
		font-size: 1.3rem;
	}


	/* ==========================================================================
		ページャー
	========================================================================== */
	.cmnPaginationList{
		gap: 0 5px;
		margin-top: 40px;
	}
	.cmnPaginationList li{
		width: 32px;
	}

	/*
		進む・戻る
	---------------------------------------------------- */
	/* 矢印
	============================== */
	[class *= "cmnPageArrow"]::after{
		width: 8px;
		height: 11px;
	}

	/*
		数字
	---------------------------------------------------- */
	.cmnPageNum a{
		font-size: 1.1rem;
		letter-spacing: 0rem;
	}


	/* ==========================================================================
		記事
	========================================================================== */
	#cmnArticleWrapper{
		padding-top: 40px;
	}
	.cmnArticleArea{
		padding-bottom: 40px;
	}

	/*
		タイトルエリア
	---------------------------------------------------- */
	/* 記事タイトル
	============================== */
	.cmnArticleTit{
		font-size: 2.4rem;
		letter-spacing: 0.2rem;
	}
	/* メイン画像
	============================== */
	.cmnArticleTitArea figure{
		margin-top: 30px;
	}

	/*
		本文エリア
	---------------------------------------------------- */
	/* 本文
	============================== */
	.cmnArticleTxtArea p{
		line-height: 160%;
	}
	/* その他タグ
	============================== */
	/* --- 見出し --- */
	.cmnArticleTxtArea h2{
		font-size: 2.1rem;
	}
	.cmnArticleTxtArea h3{
		font-size: 1.9rem;
	}
	.cmnArticleTxtArea h4{
		font-size: 1.7rem;
	}
	.cmnArticleTxtArea h5{
		font-size: 1.6rem;
	}
	.cmnArticleTxtArea h6{
		font-size: 1.5rem;
	}

	/*
		戻るボタン
	---------------------------------------------------- */
	#cmnArticleWrapper > .btnAreaC{
		margin-top: 40px;
	}


	/* ==========================================================================
		背景色付きメモエリア
	========================================================================== */
	.memoBgClm2{
		flex-direction: column;
		gap: 15px 0;
		margin-top: 40px;
	}
	.memoBgBox{
		width: 100%;
	}

	/*
		タイトル
	---------------------------------------------------- */
	.memoBgTit{
		font-size: 1.5rem;
		padding: 10px 15px;
	}

	/*
		本文エリア
	---------------------------------------------------- */
	.memoBgTxtArea{
		padding: 15px;
	}



	/* ==========================================================================
		コンタクト　電話番号エリア
	========================================================================== */
	#contactTelWrapper{
		align-items: center;
	}

	/*
		タイトル
	---------------------------------------------------- */
	#contactTelWrapper .underLineTit{
		text-align: center;
		font-size: 1.6rem;
	}

	/*
		電話番号
	---------------------------------------------------- */
	.contactTelNum{
		font-size: 3rem;
	}
	.contactTelNum .txtS{
		font-size: 1.5rem;
		font-weight: 500;
	}

	/*
		注釈
	---------------------------------------------------- */
	.contactTelComment{
		font-size: 1.3rem;
	}



	/* ==========================================================================
		フォーム
	========================================================================== */
	/*
		共通
	---------------------------------------------------- */
	/* 共通設定
	============================== */
	:root{
		--hForm:        40px;
		--hFormS:       30px;
		--fontSizeForm: 1.6rem;
	}
	input[type = "text"], textarea{
		padding: 10px;
	}
	/* 複数時
	============================== */
	.formClmBox{
		gap: 10px;
	}
	/* サイズ
	============================== */
	.formS{
		width: calc((100% - 10px)/2);
	}
	.formM{
		width: 100%;
	}

	/*
		テキストエリア
	---------------------------------------------------- */
	textarea{
		height: 350px;
	}

	/*
		セレクトボックス
	---------------------------------------------------- */
	/* 矢印
	============================== */
	[class *= "formSelect"]::before{
		width: 30px;
	}
	[class *= "formSelect"]::after{
		right: 12px;
	}
	/* select
	============================== */
	.formSelect select{
		padding: 0 45px 0 10px;
	}
	/* サイズ（全体が小さいタイプ）
	============================== */
	.formSelectS::before{
		width: 24px;
	}
	.formSelectS::after{
		right: 9px;
	}
	.formSelectS select{
		font-size: 1.3rem;
		padding: 0 40px 0 10px;
	}

	/*
		必須
	---------------------------------------------------- */
	.formRequired{
		margin-left: 15px;
	}

	/*
		エラー
	---------------------------------------------------- */
	/* エラーテキスト
	============================== */
	.formErrorTxt{
		padding-left: 20px;
	}
	/* --- アイコン --- */
	.formErrorTxt::before{
		width: 16px;
		top: 2px;
	}
	.formErrorTxt::after{
		top: 5px;
	}

	/*
		フォームリスト
	---------------------------------------------------- */
	.formList{
		gap: 35px 0;
	}

	/*
		同意エリア
	---------------------------------------------------- */
	.formAgreeArea{
		padding: 20px 15px;
		margin-top: 30px;
	}
	.formAgreeArea .formChoiceCheck{
		font-size: 1.4rem;
	}

	/*
		遷移ボタン
	---------------------------------------------------- */
	.btnAreaC.form [class *= "baseBtn"]{
		width: calc((100% - 10px)/2);
		font-size: 1.3rem;
		padding-inline: 10px 35px;
	}
	.btnAreaC.form [class *= "baseBtn"]::before{
		right: 6px;
	}
	.btnAreaC.form [class *= "baseBtn"]::after{
		right: 12px;
	}
	.btnAreaC.form .baseBtnBack{
		padding-inline: 35px 10px;
	}
	.btnAreaC.form .baseBtnBack::before{
		left: 6px;
	}
	.btnAreaC.form .baseBtnBack::after{
		left: 12px;
	}

	/*
		確認画面
	---------------------------------------------------- */
	/* 入力テキスト
	============================== */
	.formCheckTxt{
		font-size: 1.5rem;
		line-height: 160%;
	}



	/* ==========================================================================
		完了画面・エラーページ　共通
	========================================================================== */
	#cmnInfoWrapper.cmnBgBoxCts{
		padding: 40px 20px;
	}
	#cmnInfoWrapper.cmnBgBoxSpace{
		padding-block: 30px 40px;
	}
	#cmnInfoWrapper.cmnBgBoxSpace .ctsArea{
		padding-inline: 20px;
	}
	.cmnInfoTit{
		font-size: 2rem;
		letter-spacing: 0.15rem;
		margin-bottom: 20px;
	}
	.cmnInfoTxt{
		text-align: justify;
		font-size: 1.4rem;
	}

	/*
		エラーページ
	---------------------------------------------------- */
	#ctsWrapper.errorPage{
		padding-bottom: 10px;
	}
	/* エラータイトル
	============================== */
	.errorPage .cmnInfoTit{
		text-align: left;
	}
	/* サイトマップ
	============================== */
	.errorPage .cmnSitemapArea{
		margin-top: 40px;
	}
}