@charset "utf-8";



/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');


/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	--bg-color: #f7f7f2;			/*主にテンプレートの背景色*/
	--bg-inverse-color: #6b664a;	/*上のbg-colorの「対」として使う色*/
	
	--primary-color: #e082a9;	/*メインまたはアクセントカラー*/
	--primary-inverse-color: #fff;	/*上のprimary-colorの「対」として使う色*/
	
	--content-space: 8.33vw;  /*余白の一括管理用。画面幅100% = 100vwです。（grid-boxと幅を合わせる為に100÷12=8.33にしました）*/

	--headerH: 70px;  /*headerの高さ他、関連パーツ用*/
	--headerM: 3rem;  /*headerのマージン他、関連パーツ用*/

	/*以下は、「会場のご案内」のマスク用*/
	--mask1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
	
	--mask2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
	
	--mask3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
	
	--mask4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
	
	--mask5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
	
	--mask6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
}


	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {

	:root {
		--content-space: 10px;	/*余白の一括管理用。小さな端末で余白を狭くする。*/
	}

	}/*追加指定ここまで*/


/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*fadeInのキーフレーム設定（テキストのフェードインに使用）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 15px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/


body {
	margin: 0;padding:0;
	font-family: "Zen Maru Gothic", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-weight: 300;
	-webkit-text-size-adjust: none;
	background: var(--bg-color);	/*背景色*/
	color: var(--bg-inverse-color);		/*文字色*/
	line-height: 2.5;		/*行間*/
	overflow-x: hidden;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
section > ol,section > ul {margin-left: 2rem;}


/*sectionの設定
---------------------------------------------------------------------------*/
section {
	padding: 0 var(--content-space);
	margin: 5vw 0;	/*5vwを変更する際は、他にも影響するので注意*/
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	text-decoration: none;
}


/*conatiner（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	animation: opa1 0.2s 0.4s both;  /*0.4秒待機後、0.2秒かけてフェードイン*/
	display: grid;
	grid-template-rows: auto 1fr;	/*mainの内容が少ない場合にfooterが浮かないように。*/
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: hidden;
}

/*トップ以外のcontainer*/
body:not(.home) #container {
	grid-template-rows: 1fr;	/*mainの内容が少ない場合にfooterが浮かないように。*/
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header {
	position: fixed;	/*画面の一定箇所で固定表示*/
	z-index: 1;
	width: calc(100% - 6rem);	/*幅。下の行のmarginが左右にあるので、6remを引いた幅にしています。*/
	margin: var(--headerM);	/*header周りに空けるマージン。css冒頭のheaderMを読み込みます。*/
	overflow: hidden;
	background: #fff;	/*背景色*/
	border-radius: 10px;	/*角を丸くする指定*/
	display: flex;
	align-items: center;
	gap: 2rem;	/*headerの直接の子要素同士に空けるスペース。２文字分。*/
	line-height: 1.5;	/*行間を少し狭く*/
	height: var(--headerH);	/*ヘッダーの高さ。css冒頭のheaderHを読み込みます。*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかす量、0,0,0は黒のことで0.1は色が10%出た状態。*/
	transition: transform 0.5s ease, opacity 0.5s ease;	/*スクロールでheaderがフェードする際にかける時間。*/
	padding: 0 calc(var(--headerH) + 2rem) 0 2rem;	/*header内の余白*/
}

/* 隠す際のスタイル */
.site-header.is-hide {
	opacity: 0;
	transform: translateY(-100%); /*真上に隠す*/
	pointer-events: none; /*消えている間はクリックを無効化*/
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	header {
		position: absolute;	/*スクロールとともに動かす為、絶対配置*/
		background: transparent;	/*背景を透明にして背後の画像を見やすく*/
		box-shadow: none;	/*ボックスの影も消す*/
		margin: 0;
	}

	}/*追加指定ここまで*/


/*ロゴ画像*/
#logo {margin: 0;flex-shrink: 0;}
#logo img {
	display: block;
	height: 40px;	/*ロゴの高さ。headerの高さを固定しているので、ロゴも高さで指定して下さい。*/
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	#logo img {
		background: #fff;	/*ロゴ背後の色。headerの背景色を消すので、ロゴの背後に色をのせています。*/
		padding: 0.5rem 1rem;	/*上下、左右の余白*/
		border-radius: 10px;	/*角丸のサイズ*/
	}

	}/*追加指定ここまで*/


/*header内のメニュー（※開閉メニューとはブロックが異なります）
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
header nav ul {
	display: flex;
	gap: 2rem;	/*メニュー同士の間に空けるスペース*/
	font-size: 1.2rem;	/*文字サイズ120%*/
}

	/*画面幅1000px以下の追加指定*/
	@media screen and (max-width:1000px) {

	header nav ul {
		gap: 1rem;	/*メニュー同士の間に空けるスペースを狭く*/
	}

	}/*追加指定ここまで*/

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	header nav ul {
		display: none;	/*非表示に*/
	}

	}/*追加指定ここまで*/

/*メニュー１個あたりの設定*/
header nav ul a {
	display: block;
	text-decoration: none;
	text-align: center;
}

/*マウスオン時*/
header nav ul a:hover {
	color: var(--primary-color);	/*文字色。css冒頭のprimary-colorを読み込みます。*/
}

/*英語の装飾文字*/
header nav ul span {
	display: block;
	font-size: 0.7rem;	/*文字サイズ70%*/
	opacity: 0.6;	/*色を60%だけ出す*/
}


/*言語切り替えブロック
---------------------------------------------------------------------------*/
#lang {
	margin: 0;padding: 0;list-style: none;
	position: absolute;
	right: var(--headerM);
	top: 0px;
	line-height: var(--headerM);
	z-index: 1;
	display: flex;
	gap: 1rem;	/*テキスト同士の間に空けるスペース。１文字分。*/
	font-size: 0.9rem;	/*文字サイズ85%*/
	color: #fff;	/*文字色*/
}


/*開閉メニュー
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
.small-screen #menubar {
	animation: animation1 0.2s both;
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 100px var(--content-space) 50px;		/*ブロック内の余白*/
	background: var(--primary-color) url('../images/bg-greeting.webp') no-repeat center bottom / 100%;	/*背景色はcss冒頭のprimary-colorを読み込み。url以降は背景画像。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込み。*/
	line-height: 1.5;
	font-size: 1.2rem;
}

.small-screen #menubar {display: none;}

/*メニュー１個あたり*/
.small-screen #menubar a {
	display: block;text-decoration: none;
	background: var(--primary-inverse-color);	/*背景色。css冒頭のprimary-inverse-colorを読み込み。*/
	color: #333;	/*文字色*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける。メニュー同士の間隔です。*/
	padding: 1rem 2rem;		/*メニュー内の余白。上下に１文字分、左右に２文字分。*/
	border-radius: 10px;
}

/*英語の装飾文字*/
.small-screen #menubar span {
	display: block;
	font-size: 0.7rem;	/*文字サイズ70%*/
	color: var(--primary-color);	/*文字色。css冒頭のprimary-colorを読み込みます。*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
	display: none; /* デフォルトは非表示 */
	animation: opa1 0s 0.2s both;
	position: fixed;
	z-index: 101;
	cursor: pointer;
	right: var(--headerM);	/*右からの配置場所。css冒頭のheaderMを読み込みます。*/
	top: var(--headerM);	/*上からの配置場所。css冒頭のheaderMを読み込みます。*/
	width: var(--headerH);	/*幅。css冒頭のheaderHを読み込みます。*/
	height: var(--headerH);	/*高さ。css冒頭のheaderHを読み込みます。*/
	background: var(--primary-color);	/*ボタン色。css冒頭のprimary-colorを読み込みます。*/
	transform-origin: right top;
	transform: scale(1);	/*大きさを調整したい場合はここの「1」を変更します。1.2や0.7など。*/
	border-radius: 10px;	/*角を丸くする指定。headerのborder-radiusと揃えます。*/
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	#menubar_hdr {
		right: 2rem;	/*右からの配置場所の上書き*/
	}

	}/*追加指定ここまで*/


/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
	background: #ff0000;
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
	display: block;
	position: absolute;
	left: 18px;
	width: 35px;
	height: 2px;		/*線の高さ*/
	background: #fff;	/*線の色*/
	transition: 0.3s;
}

#menubar_hdr span:nth-of-type(1) {
	top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
	top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
	top: 44px;
}

/* ハンバーガーメニュー展開時 */
#menubar_hdr.ham span:nth-of-type(1) {
	transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
	opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
	transform: translateY(-10px) rotate(45deg);
}

/*小さな画面での設定*/
.small-screen #menubar_hdr {
	display: flex;
}


/*見出し
---------------------------------------------------------------------------*/
/*h2と、grid-box内のh4*/
#container h2, .grid-box h4 {
	display: flex;
	flex-direction: column-reverse;	/*spanと表示順を入れ替える*/
	font-size: 1.8rem;	/*文字サイズ1.8倍*/
	font-weight: 400;
}

/*上記のh2とh4の中で使うspan（小文字）*/
#container h2 .small, #container h4 span {
	font-size: 0.8rem;	/*文字サイズ0.8倍*/
	opacity: 0.5;		/*透明度50%*/
	letter-spacing: 0.2em;	/*文字間隔を少しだけ広く*/
}


/*見出しのテキストのフェードイン設定
---------------------------------------------------------------------------*/
/* 初期状態でテキストを非表示にする */
.fade-in-text {
    visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.2s linear both;
}


/*main
---------------------------------------------------------------------------*/
/*トップ以外ののmain*/
body:not(.home) main {
	margin-top: 150px;	/*上にマージン。*/
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	body:not(.home) main {
		margin-top: 100px;
	}

	}/*追加指定ここまで*/


/*「会場のご案内」
---------------------------------------------------------------------------*/
/*gridボックス全体を囲むブロック*/
.grid-mask {
	display:grid;
	grid-template-columns: repeat(4, 1fr);	/*4列にする指定*/
	gap: 5rem;	/*ボックスの間に空けるスペース。５文字分。*/
	line-height: 1.5;	/*行間を少し狭く*/
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	.grid-mask {
		grid-template-columns: repeat(2, 1fr);	/*2列にする*/
		gap: 3rem;	/*ボックスの間に空けるスペース*/
	}

	}/*追加指定ここまで*/


/*h4見出し*/
.grid-mask h4 {
	margin-bottom: 0;
	text-align: center;
	color: var(--primary-color);	/*文字色。css冒頭のprimary-colorを読み込みます。*/
}

/*p（段落）*/
.grid-mask p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
}

/*画像*/
.grid-mask figure {
	aspect-ratio: 1 / 1;   /* アスペクト比1:1の正方形 */
}
.grid-mask figure img {
	transition: 0.3s;
	width:100%;
	height:100%;
	object-fit: cover;
	display:block;
}

/*画像にリンクがある場合のみ少しだけ拡大*/
.grid-mask figure a img:hover {
	transform: scale(1.1);
}

.grid-mask .list {
	position: relative;
}
.grid-mask .kazari {
	display: block;
	width: clamp(80px, 8vw, 250px);
	position: absolute;
	pointer-events: none;
}
.grid-mask .kazari.left-top {
	left: -5vw;
	top: -6vw;
}
.grid-mask .kazari.right-top {
	right: -5vw;
	top: -6vw;
}

	/* マスク対応ブラウザだけ「切り抜き」に切り替え */
	@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

	.grid-mask figure {
		border-radius: 0;
		overflow: visible;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 100% 100%;
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: 100% 100%;
		/* 明示的に透過（アルファ）でマスクする指定を追加 */
		-webkit-mask-source-type: alpha;
		mask-mode: alpha;
	}

	.grid-mask .list.mask1 figure {
		-webkit-mask-image: var(--mask1);
		mask-image: var(--mask1);
	}

	.grid-mask .list.mask2 figure {
		-webkit-mask-image: var(--mask2);
		mask-image: var(--mask2);
	}

	.grid-mask .list.mask3 figure {
		-webkit-mask-image: var(--mask3);
		mask-image: var(--mask3);
	}

	.grid-mask .list.mask4 figure {
		-webkit-mask-image: var(--mask4);
		mask-image: var(--mask4);
	}

	.grid-mask .list.mask5 figure {
		-webkit-mask-image: var(--mask5);
		mask-image: var(--mask5);
	}

	.grid-mask .list.mask6 figure {
		-webkit-mask-image: var(--mask6);
		mask-image: var(--mask6);
	}

	}/*追加指定ここまで*/


/*「人気ブースランキング（３列ブロック）」
---------------------------------------------------------------------------*/
.list-grid .list * {margin: 0;padding: 0;}

/*ブロック全体を囲むブロック*/
.list-grid {
	display: grid;
    grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	gap: 6vw;	/*ブロックの間に空けるスペース*/
	align-items: start;
}

/*ボックス１個あたり*/
.list-grid .list {
	display: grid;
	text-align: center;		/*テキストをセンタリング*/
	position: relative;
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list-grid.square .list figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-grid.square .list figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*ボックス内のh4（見出し）*/
.list-grid h4 {
	font-weight: 500;
}

/*ボックス内のp（文章）*/
.list-grid p {
	font-weight: normal;
	font-size: 0.85rem;	/*文字サイズ85%*/
	opacity: 0.7;		/*色を70%だけ出す*/
}

/* ランキングの旗 */
.rank-flag {
	position: absolute;
	left: -5px;	/*左からの配置場所*/
	top: -5px;	/*上からの配置場所*/
	width: 3rem;	/*幅*/
	height: 3rem;	/*高さ*/
	font-weight: bold;	/*太字に*/
	background: #fff; /*背景色*/
	color: #333;	/*文字色*/
  
  /* マスクの設定 */
  --mask-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,100 L50,70 L0,100 Z' fill='%23000000'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 色のバリエーション */
.rank1 {
  background: #fddc00; /*背景色（金）*/
  color: #111;	/*文字色*/
}
.rank2 {
  background: #c0c0c0; /*背景色（銀）*/
  color: #fff;	/*文字色*/
}
.rank3 {
  background: #cd7f32; /*背景色（銅）*/
  color: #fff;	/*文字色*/
}


/*grid-box（色々なレイアウト用）
---------------------------------------------------------------------------*/
/*ボックス全体*/
.grid-box {
	margin-bottom: 5vw;	/*下に空けるスペース。100vw = 画面幅100%なので、この場合は5%。*/
}

/*ボックス内のh2*/
.grid-box h2 {
	grid-column: 2 / 12;
}

/*ボックス内のh4*/
.grid-box h4{
	margin: 0;
}

/*画像と文字を囲むブロック*/
.grid-box section {
	display: grid;
	grid-template-columns: repeat(12, 1fr); /* 12等分 */
	gap: 5vw; /* 要素間の隙間 */
	margin-left: calc(-1 * var(--content-space));
	margin-right: calc(-1 * var(--content-space));
	margin-bottom: 5vw;	/*下に空けるスペース*/
	grid-auto-flow: dense;
}
.grid-box section:last-child {
  margin-bottom: 0;	/*最後のブロックの下マージンをなくす*/
}

/*imageとtextの設定*/
.grid-box .image,
.grid-box .text {
	align-self: center;
	position: relative;
}

/*imageのみの設定*/
.grid-box .image {
	grid-column: 1 / -1;
}

/*textのみの設定*/
.grid-box .text {
	grid-column: 2 / 12;
}

/*装飾イラスト用*/
.grid-box .kazari {
	display: block;
	position: absolute;
	z-index: 99;
	transform: translate(-50%, -50%);
	width: 150px;	/*幅*/
}

/*image-wide（横長で使う場合）*/
.grid-box .image-wide {
	grid-column: 2 / 12;
}

/*image-01*/
.grid-box .image-01 {
	grid-column: 8 / 12;
}
/*.text-01*/
.grid-box .text-01 {
	grid-column: 2 / 8;
}
/*image-01（左右入れ替え用）*/
.grid-box section.reverse .image-01 {
	grid-column: 2 / 6;
}
/*text-01（左右入れ替え用）*/
.grid-box section.reverse .text-01 {
	grid-column: 6 / 12;
}

/*image-02*/
.grid-box .image-02 {
	grid-column: 1 / 10;
}
/*text-02*/
.grid-box .text-02 {
	grid-column: 2 / 10;
}
/*image-02（左右入れ替え用）*/
.grid-box section.reverse .image-02 {
	grid-column: 4 / -1;
}
/*text-02（左右入れ替え用）*/
.grid-box section.reverse .text-02 {
	grid-column: 4 / 12;
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {

	/*画像と文字を囲むブロック*/
	.grid-box section {
		margin-left: var(--content-space);
		margin-right: var(--content-space);
		display: block;
		margin-bottom: 60px;
	}
	
	}/*追加指定ここまで*/


/*お知らせ
---------------------------------------------------------------------------*/
	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ブロック全体*/
	.new {
		display: grid;
		gap: 1rem;  /*日付や文章の間にとるスペース。１文字分。*/
		grid-template-columns: auto 1fr;	/* 日付の幅は自動で、内容が入るブロックは残り幅一杯とる。 */
	}

	}/*追加指定ここまで*/


/*背景画像が少しずつ上に移動する
---------------------------------------------------------------------------*/
/*画像ボックス*/
.bg-slideup {
    background-image: url("../images/bg-slideup.jpg");	/*背景画像の読み込み*/
    background-repeat: no-repeat;
    background-size: cover;
	width: 100%;
	height: 50vh;	/*高さ。画面の高さの50%になる設定ですがお好みで。*/
	display: flex;
	justify-content: center;
	align-items: center;
}


/*「ご挨拶」の背景画像
---------------------------------------------------------------------------*/
.bg-greeting {
	padding-bottom: 5vw;	/*下に余白。*/
	background: url('../images/bg-greeting.webp') no-repeat center bottom / 100%;	/*画像の読み込み。*/
}


/*btn1（ボタン）
---------------------------------------------------------------------------*/
.btn1 a {
	display: block;text-decoration: none;
	width: fit-content;
	margin: 0 auto;
	background: var(--bg-color);	/*背景色*/
	color: var(--bg-inverse-color);	/*文字色*/
	padding: 0.5rem 3rem;	/*ボタン内の余白。上下に0.5文字分、左右に3文字分。*/
	border-radius: 100px;	/*角を丸くする指定。大きければ適当でOK。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボタンの影。右に、下に、ぼかす量、0,0,0は黒のことで0.1は色が10%出た状態。*/
}

/*マウスオン時*/
.btn1 a:hover {
	background: #000;	/*背景色*/
	color: #fff;		/*文字色*/
	box-shadow: none;	/*ボタンの影を消す*/
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;		/*ボックス内の余白*/
	background: rgba(0,0,0,0.1);	/*背景色*/
	color: var(--bg-inverse-color);			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	border-top: 1px solid rgba(0,0,0,0.3);	/*テーブルの上の線。幅、線種、0,0,0は黒のことで0.3は色が30%出た状態。*/
	width: 100%;				/*幅*/
	margin-bottom: 2rem;		/*テーブルの下に空けるスペース。２文字分。*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid rgba(0,0,0,0.3);	/*テーブルの下の線。幅、線種、0,0,0は黒のことで0.3は色が30%出た状態。*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 1rem;		/*ボックス内の余白*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*th（左側）のみの設定*/
		.ta1 th {
			width: 20%;		/*幅*/
		}

	}/*追加指定ここまで*/


/*フッター
---------------------------------------------------------------------------*/
footer * {margin: 0;padding: 0;}
footer ul {list-style: none;}

/*ブロック全体*/
footer {
	background: var(--primary-color);	/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	padding: var(--content-space);	/*フッター内の余白。css冒頭のcontent-spaceを読み込みます。*/
	position: relative;
}

/*ロゴが入ったブロック（大きな画面だと左側）*/
footer .footer1 {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*このブロック内のボックス同士の間に空ける余白。１文字分。*/
	margin-bottom: 30px;
}

/*フッター内のロゴ*/
footer .logo {
	font-size: 1.5rem;
}

/*地図が入ったブロック（大きな画面だと右側）*/
footer .footer2 {
    flex: 1;
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {

	footer {
		display: flex;
		gap: 2rem;		/*ロゴのブロックとメニューのブロックとの間の余白。2文字分。*/
	}

	/*ロゴが入ったブロック*/
	footer .footer1 {
		margin-bottom: 0;
		text-align: left;
	}

	}/*追加指定ここまで*/


/*Copyright部分*/
footer small {
	display: block;
	text-align: right;
	margin-top: 2rem;
}


/*Google Map用
---------------------------------------------------------------------------*/
.iframe-box1 {
	width: 100%;
	aspect-ratio: 16 / 9;	/*マップのアスペクト比。お好みで。*/
	position: relative;
	overflow: hidden;
}
.iframe-box1 iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}


/*SNSアイコン
---------------------------------------------------------------------------*/
.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	gap: 10px;
}
.icons i {
	font-size: 40px;	/*アイコンサイズ*/
}


/*bg1背景
---------------------------------------------------------------------------*/
.bg1 {
	background: var(--primary-color);	/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	padding-top: 3vw;		/*ボックス内の上に空ける余白。画面幅100%=100vw*/
	padding-bottom: 3vw;	/*ボックス内の下に空ける余白。画面幅100%=100vw*/
}

/*上部分のみ角丸にしたい場合*/
.bg1.kado-maru {
	border-radius: 20vw 20vw 0 0;	/*左上、右上、右下、左下の順*/
}


/*bg2背景
---------------------------------------------------------------------------*/
.bg2 {
	background: #fff;	/*背景色*/
	padding-top: 3vw;		/*ボックス内の上に空ける余白。画面幅100%=100vw*/
	padding-bottom: 3vw;	/*ボックス内の下に空ける余白。画面幅100%=100vw*/
}


/*bg1,bg2共通設定。微妙な余白をなくす。
---------------------------------------------------------------------------*/
.bg1 + .bg1,
.bg2 + .bg2,
.bg1 + .bg2,
.bg2 + .bg1 {
	margin-top: 0;
}


/*kazari2背景
---------------------------------------------------------------------------*/
.kazari2 {
	background-image: url('../images/kazari2.png');	/*装飾画像*/
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
}
.kazari3 {
	background-image: url('../images/kazari3.png');	/*装飾画像*/
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
}



/*近くの観光案内（イメージマップ風）
---------------------------------------------------------------------------*/
/*マップ全体を囲むブロック*/
.image-map-container {
    position: relative;
    width: 100%;
	line-height: 1.2;
}

/*地図イラスト*/
.base-image {
    width: 100%;
    height: auto;
    display: block;
}

/*ピン（アイコンマーク）の配置の基準設定と、ピンデザイン*/
.pin-item {
    position: absolute; /* 基準に対して絶対配置 */
    transform: translate(-50%, -50%);
    
    /* 以下、ピンのデザイン */
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/*ピン（アイコンマーク）*/
.pin-marker {
	font-size: clamp(10px, 4vw, 30px);	/*文字サイズ。最小10px、最大30px、それ以外は4vw。*/
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    text-shadow: 
        2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, /* 白いフチ */
        3px 3px 5px rgba(0,0,0,0.5); /* 影 */
    transition: transform 0.2s;
}

/*ラベル（テキスト）*/
.pin-label {
    background: #fff;	/*背景色*/
    color: #333;		/*文字色*/
	border: 2px solid #333;	/*枠線の幅、線種、色*/
    padding: 4px 8px;	/*ラベル内の余白。上下、左右に。*/
    border-radius: 4px;	/*角を少しだけ丸くする*/
    /*font-size: 0.8rem;	文字サイズ*/
	/*font-size: 1.2vw;*/
	font-size: clamp(10px, 1.2vw, 20px);	/*文字サイズ。最小10px、最大20px、それ以外は1.2vw。*/
    font-weight: bold;	/*太字に*/
    white-space: nowrap; /* 文字を折り返さない */
}

/* ホバー時の動き（PC用） */
.pin-item:hover .pin-marker {
    transform: scale(1.2) translateY(-5px); /* ちょっと大きくなって浮く */
}


/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.slide-thumbnail1 {
	overflow-x: hidden;
	margin-bottom: 2rem;
}

/*画像たちを囲むブロック*/
.slide-thumbnail1 .img {
	display: flex;
	overflow: hidden;
}

/*画像*/
.slide-thumbnail1 .img img {
	padding: 0 1vw;	/*上下の余白はなし、左右への余白は画面の1%*/
}


/*段違いに見せる為、偶数番目の画像に上に余白を作る。*/
.slide-thumbnail1 .img div:nth-of-type(even) {
	margin-top: 30px;
}

/*右から左へ、左から右へ、のアニメーション*/
.slide-thumbnail1 .rtl, .slide-thumbnail1 .ltr {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.slide-thumbnail1 .rtl {animation-name: slide-rtl;}
.slide-thumbnail1 .ltr {animation-name: slide-ltr;}

@keyframes slide-rtl {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}


/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
	text-decoration: none;display: block;
	background: #555;
	color: #ccc;
	text-align: right;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: bold;
	margin-right: 0.5em;
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 1s 0.4s both;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*YouTubeをiframeで読み込む（アスペクト比16:9）
---------------------------------------------------------------------------*/
.youtube {
	max-width: 700px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;	/*アスペクト比を調整するところです*/
	position: relative;
}
.youtube iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #c02340 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.padding0 {padding: 0 !important;}
.mb0 {margin-bottom: 0px !important;}
.mb3rem {margin-bottom: 3rem !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: rgba(0,0,0,0.7); color: #fff; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.look .color-check {color: yellow !important;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.block {display: block !important;}