@charset "utf-8";

/* CSS Document */

/* ======================================================
	おすすめスポット / イベント
	[original] event
	@import"../css/test_line.css";
====================================================== */
:root
{
	--h1_h				: 10em;
}



/* ============================================================================================================
	一覧
	イベント(event/index.php)
------------------------------------------------------------------------------------------------------------ */
.EventIndex a
{
	text-decoration-line: none;
}


/* ============================================================================================================
	詳細
	イベント(event/detail.php)
------------------------------------------------------------------------------------------------------------ */
.EventIndex.Spot.ArticleDetail
{
}

.EventIndex.Spot.ArticleDetail article .head
{
	grid-template-areas:
		"h2 h2"
		"Gallery spotname-wrapper"
	;
	grid-template-columns: 1fr 30%;
	grid-template-columns: 1fr 40%;
}

.EventIndex.Spot.ArticleDetail article .Gallery
{
}
#Event .EventIndex.Spot.ArticleDetail article .Gallery>*
{
	width: 100%;
	min-width: initial;
	max-width: initial;

	padding: 0;
}

/*
	[260925-1450]追加　Googleマップ(管理画面の地図タグ)
	Safariでは common.css の iframe{height: 100%;} が親(grid)の高さで計算され、地図がフッターを超えて縦長になるため
	height: auto にして aspect-ratio(pc 16/9、sp 1/1)で高さを決める
*/
#Event .EventIndex.Spot.ArticleDetail article>.Wrap>iframe
{
	height: auto;
}
.EventIndex.Spot.ArticleDetail article .Gallery img
{
	object-fit: contain;
}

/* [イベント]　detail　<table>詳細データ */
.EventIndex.Spot.ArticleDetail article .head .spotname-wrapper
{
	justify-self: start;
}
.EventIndex.Spot.ArticleDetail article .head .detail-list
{
	display: block;
	margin: 0;
}
.EventIndex.Spot.ArticleDetail article .head .detail-list tbody
{
	display: block;
	margin: 0;
}

.EventIndex.Spot.ArticleDetail article .head .detail-list tr
{
	display: grid;
	gap: 1em;
}

.EventIndex.Spot.ArticleDetail article .head .detail-list tr :where(th, td)
{
	display: block;
	padding-left: 0;
	padding-right: 0;
	border-width: 0;
}


.EventIndex.Spot.ArticleDetail article .head .detail-list th
{
	max-width: initial;
	min-width: initial;
	width: auto;

	background-color: rgb(var(--y));

	padding: 0.5em 1em;
	border-radius: 0.5em;
}

.EventIndex.Spot.ArticleDetail article .head .detail-list td
{
	padding-top: 0;
}



.EventIndex.Spot.ArticleDetail article .spotdata-body #catch
{
	font-size: 1.5em;
	font-weight: bold;
	text-align: left;
	color: rgb(var(--bl));
}
.EventIndex.Spot.ArticleDetail article .spotdata-body #catch>b
{
	font-size: inherit;
	font-weight: inherit;
	text-align: inherit;
	color: inherit;
}


/* [250321-1538]　『イベント』detail、『お知らせ』detail　文字大きく */
.EventIndex.Spot.ArticleDetail article .spotdata-body #free
{
	font-size: 1.2em;
}


/* ============================================================================================================
	[250117/250124]校正　イベントと同じレイアウトになった
	ブログ
	blog/detail.php
------------------------------------------------------------------------------------------------------------ */
.BlogIndex a
{
	text-decoration-line: none;
}


.Blog.Detail
{
}

/*
[250128-0955/250219]校正　スクロール固定したら背景に困った
.Blog.Detail .event_calendar
{
	left: 0;
	right: 0;
	top: 0;

	z-index: 2;
}

.scroll_h1 .Blog.Detail .event_calendar
{
	position: fixed;
	top: calc(var(--h1_h) / 2);
}
*/


.Blog.Detail .h2.blog_nen_title
{
	margin: 0;
}

.Blog.Detail article>.main
{
}
/*
	display: grid;
	gap: var(--padding_tb);
*/

.Blog.Detail .post
{
	padding-top: var(--padding_tb);
}

.Blog.Detail .post:not(:first-child)
{
}


.Blog.Detail .post video
{
	width: auto;
	max-width: 100%;
	max-height: fit-content;
}


.Blog.Detail .post dl
{
	display: block;
	background-color: rgb(var(--w));
	padding: var(--gap);
}

.Blog.Detail .post dt,
.Blog.Detail .post dd
{
	margin: 0;
}

.Blog.Detail .post .post-title
{
	margin-left: 0;
	margin-bottom: calc(var(--gap) * 2.5);
}
/*
	margin-bottom: var(--gap);
*/

.Blog.Detail .post .post-date-wrapper
{
	display: flex;
	justify-content: end;
	gap: 1em;
}

.Blog.Detail .post a,
.Blog.Detail .post a>*
{
	display: inline;
}
.Blog.Detail .post a>*::before
{
	content: none;
}
/*
.Blog.Detail .post .post-body>p:last-child,
.Blog.Detail .post .post-sns
{
	position: absolute;
	display: none;
	opacity: 0;
}
.Blog.Detail .post a,
.Blog.Detail .post a>*
{
	display: inline;
}
.Blog.Detail .post a>*::before
{
	content: none;
}
*/

/*
[250117/250124]校正　イベントと同じレイアウトになった

/ ------------------------------------------------------
	[ブログ]　バックナンバ―ボタン
/
.backnumber_btn
{
}

.backnumber_btn .main
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
}
.backnumber_btn .main>*
{
	--num		: 4;
	width: calc((100% - (var(--gap) * (var(--num) - 1))) / var(--num));
}
/
.backnumber_btn .main
{
	display: grid;
	gap: var(--gap);
}

.backnumber_btn .list
{
	display: grid;
	gap: calc(var(--gap) / 2);
}

.backnumber_btn .list>.Wrap
{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: calc(var(--gap) / 2);
}

.backnumber_btn .list .title
{
	font-size: 1.5em;
	color: rgb(var(--bl));
}
/

.backnumber_btn .list .ColorBtn
{
	min-width: initial;
	max-width: initial;
	width: 100%;
}



/ ------------------------------------------------------
	[ブログ]　バックナンバ―　埋め込み本文
/
.BlogOldBacknumber h2
{
}


.BlogOldBacknumber .detail
{
	display: grid;
	gap: 0;
}

.BlogOldBacknumber .NaviBtn
{
	--num				: 6;

	gap: 1em;
}
/

	position: sticky;
	bottom: 0;

	z-index: 10;

	background-color: red;
//
.BlogOldBacknumber .detail
{
	display: grid;
	grid-template-areas:
		"article NaviBtn"
	;
	grid-template-columns: 1fr 10em;
	align-items: start;
	gap: var(--gap);
}
.BlogOldBacknumber .detail>article
{
	grid-area: article;
}
.BlogOldBacknumber .detail>.NaviBtn
{
	grid-area: NaviBtn;
}

.BlogOldBacknumber .NaviBtn
{
	--num				: 1;

	position: fixed;

	display: grid;
	justify-content: stretch;
	gap: calc(var(--gap) / 2);

	width: 10em;
}
.BlogOldBacknumber .NaviBtn>*
{
	width: 100%;
}
/


.BlogOldBacknumber .detail article:not(:first-of-type)
{
	padding-top: var(--padding_tb);
}

.BlogOldBacknumber .blog_nen_title
{
	font-size: 1.5em;
	font-weight: bold;
}

.BlogOldBacknumber .detail article h2
{
}

.BlogOldBacknumber .detail article .main
{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	
}

.BlogOldBacknumber .detail article .post
{
	background-color: rgb(var(--w));
	padding: var(--gap);
}

.BlogOldBacknumber .detail article .post dl
{
	margin: 0;
}

.BlogOldBacknumber .detail article .post dl dt
{
	margin: 0;
}

.BlogOldBacknumber .detail article .post dl dd
{
	margin: 0;
}

.BlogOldBacknumber .detail article .post-date-wrapper
{
	margin-top: var(--gap);

	display: flex;
	justify-content: end;
	gap: var(--gap);
}
.BlogOldBacknumber .detail article .post-date-wrapper .post-date
{
	display: flex;
	justify-content: end;
	align-items: center;
	gap: calc(var(--gap) / 3);
}
.BlogOldBacknumber .detail article .post-date-wrapper .post-category
{
	position: absolute;
	display: none;
	opacity: 0;
}
.BlogOldBacknumber .detail article .post-body
{
}

.BlogOldBacknumber .detail article .post-sns
{
	position: absolute;
	display: none;
	opacity: 0;
}
*/