@charset "utf-8";

/* CSS Document */

/* ======================================================
	おすすめスポット / 観る・遊ぶ、食べる・買う、泊まる、花だより
	[original] spot
	@import"../css/test_line.css";
====================================================== */

/* ------------------------------------------------------
	[共通]　検索BOX
*/
/*
.SpotIndex.ArticleList .body>.head
{
	position: sticky;
	left: 0;
	top: 0;
}
*/

.search_box
{
	--border_radius				: 0.1em;
}

.search_box .select
{
	padding-left: 0.5em;
	padding-right: 0.25em;

	background-color: rgb(var(--w));
	border-radius: var(--border_radius);
}
/*
	border-width: 1px;
*/

.search_box .select select
{
	background-color: transparent;
}
.search_box .select select option
{
	background-color: transparent;
	border-width: 0;
	outline-width: 0;
	padding: 0;
}

.search_box .select::before
{
	--arrow_weight		: 2px;
	
	aspect-ratio: 7 / 4.5;

	width: 0.75em;
	height: auto;

	background-color: rgb(var(--arrow_color));
	clip-path: polygon(
		50% calc(100% - var(--arrow_weight)),
		100% 0,
		100% var(--arrow_weight),
		50% 100%,
		0% var(--arrow_weight),
		0 0
	);
}

.search_box form
{
	display: grid;
	grid-template-columns: 1fr 10em;
	justify-content: stretch;
	gap: calc(var(--gap) / 2);
	gap: 0.25em;
}

.search_box .search_item
{
	display: flex;
	gap: 0.25em;
}
.search_box .search_item>*
{
	width: 100%;
	
	display: grid;

	border-color: rgb(var(--border_color));
}
/*
	border-width: 1px;
*/

.search_box [class*="search"] .title
{
}


.search_box .Change
{
	--change_btn_size: 1em;
	--change_btn_padding: 0.5em;
	--border_color			: var(--arrow_color);
}
.search_box .Change .details
{
	border-width: 0;
	background-color: rgb(var(--w));
}
.search_box .Change .details .summary
{
	background-color: transparent;
}
.search_box .Change .details .summary .Btn
{
}
.search_box .Change .details .summary .Btn>*:before
{
}
/*
.search_box .Change .details .summary .Btn>*:after
{
	content: none;
}
*/

.search_box .Change .details .summary .title>b
{
	font-weight: inherit;
}
.search_box .Change .details .detail
{
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;

	width: 100%;
	
	display: grid;
	grid-template-areas: none;
	grid-template-columns: 1fr;
	gap: 0;

	margin-left: 0;
	padding: var(--change_btn_padding);
	padding: 0 1em 1em 1em;

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

	z-index: 5;
}

.search_box .search_item+.Btn
{
}
.search_box .search_item+.Btn :is(a, .a)
{
	display: grid;
	justify-content: center;
	align-items: center;
	gap: 0.5em;

	width: 100%;
	height: 100%;

	background-color: rgb(var(--arrow_color));
	color: rgb(var(--w));

	border-radius: var(--border_radius);
}
.search_box .search_item+.Btn :is(a, .a) .Img
{
}

.search_box .search_item+.Btn a
{
	font-size: 1.2em;

	grid-template-columns: 2em auto;

	padding-right: 0.5em;

	text-decoration-line: none;
}
.search_box .search_item+.Btn .a
{
}
/*
[2412226/241227]　デザイン変えろ
.search_box
{
	background-color: rgb(var(--bl) / 0.2);
	padding: var(--gap);

	border-radius: 1em;
}

.search_box form
{
	display: inline-flex;
	align-items: center;
	gap: var(--gap);
}

.search_box form>*
{
	display: flex;
	align-items: center;
	gap: 2em;
}

.search_box form .title
{
	font-weight: bold;
	padding: 1em 1.25em 1em 1em;
}
.search_box form .title::before
{
	--s					: 1em;
	content: "";
	display: block;

	position: absolute;
	left: calc(50% + (var(--s) / 2));
	top: 50%;
	translate: -50% -50%;

	width: calc(100% + ((1em * 1) + var(--s)));
	height: calc(100% + (1em / 2));

	background-color: rgb(var(--w) / 0.75);
	clip-path: polygon(
		0% 0%,
		calc(100% - var(--s)) 0,
		calc(100% - var(--s)) calc(50% - (var(--s) / 2)),
		100% 50%,
		calc(100% - var(--s)) calc(50% + (var(--s) / 2)),
		calc(100% - var(--s)) 100%,
		0 100%
	);

}

.search_box form select
{
	border-radius: 0.25rem;
	outline-color: var(--border_color);

	padding-top: 0.9em;
	padding-bottom: 0.75em;
	
}


.search_box form .Btn a
{
	font-size: 0.9em;

	display: flex;
	align-items: center;
	gap: 0.5em;

	padding: 0.25em 4em 0.25em 2.5em;
	background-color: rgb(var(--bl));
	border-radius: 0.25rem;

	color: rgb(var(--w));
	line-height: 1;

	text-decoration-line: none;
}
.search_box form .Btn a .glass
{
	aspect-ratio: 1 / 1;
	width: 3em;
}
.search_box form .Btn a>b
{
	font-size: 1.2em;
}
*/


/* ------------------------------------------------------
	[共通]　タイトル
*/
.spot_title
{
}

/* [共通]　タイトル・かな */
.spot_title>.kana
{
	font-size: inherit;

	position: absolute;
	left: 50%;
	bottom: 100%;
	translate: -50% -0%;

	width: 100%;
	
	font-weight: normal;
	opacity: 0.7;
}


/* ------------------------------------------------------
	[共通]　タグ
*/
:is(.cate-tag, .icons)
{
	font-size: 0.8em;
}

:is(.cate-tag, .icons)>*
/*,
.spotdata-body
*/
{
	display: inline-flex;
	font-weight: inherit;

	--label_angle			: 0.75em;

	padding: 0 0.5em 0 var(--label_angle);
	background-color: rgb(var(--bg_color));
	clip-path: polygon(
		var(--label_angle) 0%,
		100% 0,
		100% 100%,
		0 100%,
		0% var(--label_angle)
	);
}

:is(.cate-tag, .icons)>*>*
{
	font-weight: inherit;
}

.cate-tag
{
	--bg_color				: var(--y);
}

.Spot.ArticleDetail .head .cate-tag
{
	font-size: inherit;
}


.icons
{
	--bg_color				: var(--or) / 0.2;
}
/*
濁る
	filter: drop-shadow(-1px -1px 0px rgb(var(--bk) / 0.5));
*/



/* ------------------------------------------------------
	[共通]　『～～周辺』 */
.area-tag-tahara
{
	padding: 0.25em 0.5em;
}

.area-tag-tahara::before
{
	--arrow_w					: 1em;
	--arrow_h					: 0.75em;
	--arrow_position_l			: 1em;

	content: "";
	display: block;

	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: calc(100% + var(--arrow_h));

	background-color: rgb(var(--gradation2_gr) / 0.95);
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--arrow_h)),
		calc(var(--arrow_position_l) + var(--arrow_w)) calc(100% - var(--arrow_h)),
		calc(var(--arrow_position_l) + (var(--arrow_w) / 2)) 100%,
		var(--arrow_position_l) calc(100% - var(--arrow_h)),
		0 calc(100% - var(--arrow_h))
	);
}
.area-tag-tahara>b
{
	font-weight: inherit;
}

.area-tag-tahara
{
	position: absolute;
	left: 1em;
	bottom: calc(100% - 0.25em);

	filter: drop-shadow(1px 1px 0px rgb(var(--bk) / 0.2));
}


.SpotIndex.ArticleDetail .head .area-tag-tahara
{
	position: relative;
	top: initial;
	left: initial;
	right: initial;
	bottom: initial;

	padding-top: 0;
	padding-bottom: 0;

	filter: none;
}
/*
	padding: 0;
*/

.SpotIndex.ArticleDetail .head .area-tag-tahara::before
{
	height: 100%;
	clip-path: none;
}
.SpotIndex.ArticleDetail .head .area-tag-tahara>*
{
	background-color: transparent;
}

/* ============================================================================================================
	一覧
	スポット(spot/index.php)
------------------------------------------------------------------------------------------------------------ */
.SpotIndex .body
{
	display: grid;
	gap: var(--gap);
}
/*
	gap: var(--padding_tb);
*/

.SpotIndex .body .head
{
	display: grid;
	gap: var(--gap);
}

.SpotIndex .body h2.head_title
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: baseline;
	gap: calc(var(--gap) / 2);

	min-width: initial;
	max-width: initial;
	width: 100%;
}
/*
	margin-bottom: 0;
	height: 0;
*/

.SpotIndex .body h2.head_title>b
{
	min-width: initial;
	max-width: initial;
	width: auto;
}
.SpotIndex .body h2.head_title .search_place
{
	font-weight: inherit;
	font-size: 1.4em;
}


.SpotIndex .spot-list-wrapper
{
	display: grid;
	gap: var(--gap);
}
/*
	padding-bottom: calc(var(--gap) * 2);
	padding-top: calc(var(--gap) * 2);
	padding-bottom: calc(var(--gap) * 2);

*/

/* [241209]　3段→4段 */
.SpotIndex .List
{
	grid-template-columns: repeat(4, 1fr);
}
/*

	padding-top: calc(var(--padding_tb) / 1);
*/

.SpotIndex .List :is(a, .a)
{
	text-decoration-line: none;
}

.SpotIndex .List .Item
{
	padding: 0;
}

.SpotIndex .List .Item .Img img
{
	aspect-ratio: 1 / 1;

	height: auto;
}
/*
[250401-1110]　画像の全体を入れる※上下左右に余白が出ることは了承済み
	object-fit: cover;
*/

.SpotIndex .List .Item .detail
{
	gap: 0;
}



.SpotIndex .List .Item .post-content
{
	display: grid;
	gap: calc(var(--gap) / 3);
	
	padding: calc(var(--gap) / 3) calc(var(--gap) / 2) calc(var(--gap) / 1);

	text-align: justify;
}

.SpotIndex .List .Item h3
{
	text-align: inherit;
	font-size: inherit;

	margin-bottom: 0 !important;
}

/* [241209am]　行数制限　2行くらい？ */
.SpotIndex .List .Item h3>b
{
	text-align: inherit;
	font-size: inherit;

	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.SpotIndex .List .Item .tag-wrapper
{

	display: grid;
	gap: calc(var(--gap) / 3);
}

.SpotIndex .List .Item .tag-wrapper>*
{
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--gap) / 6);
}


.SpotIndex form[action="spot.php"]
{
	margin-top: var(--gap);
}

/* ============================================================================================================
	詳細
	スポット(spot/spot.php)
	[241209am]　スライダー+ライトボックスへ変更
------------------------------------------------------------------------------------------------------------ */
/* [詳細]　ライトボックス */
.Spot.ArticleDetail .Gallery
{
	margin: 0;
}
/*
	max-width: 50svw;
*/

#Category .Spot.ArticleDetail .Gallery>.WrapM
{
	margin: 0;
	padding: 0;
	max-width: initial;
}
/*

	display: grid;
	gap: var(--gap);
*/

#Category .Spot.ArticleDetail .Gallery .slider
{
	grid-template-areas:
		"slick-list"
	;
	grid-template-columns: 1fr;
}

.Spot.ArticleDetail .Gallery ul
{
	--gallery_num				: 5;
	display: grid;
	grid-template-columns: repeat(var(--gallery_num), 1fr);
	gap: calc(var(--gap) / 3);
}
/*
	align-items: center;
*/

.Spot.ArticleDetail .Gallery img
{
	aspect-ratio: 4 / 2.5;
	border-radius: 0;
	object-fit: contain;
}
/*
	background-color: rgb(var(--w));
*/

/* [詳細]　ライトボックス　1枚目だけ大きく */
.Spot.ArticleDetail .Gallery .Item1
{
	grid-column: 1 / span var(--gallery_num);
	margin-bottom: 1em;
}

.Spot.ArticleDetail .Gallery .Item1 img
{
	aspect-ratio: initial;
}


.Spot.ArticleDetail .Gallery.Slider .slider .slick-track
{
	gap: 0;
}
#Category .Spot.ArticleDetail .Gallery.Slider .slider+.thumbnail img
{
	width: auto;
	height: 5em;
	margin-left: auto;
	margin-right: auto;
}
/*
.Spot.ArticleDetail .Gallery.Slider .slick-prev
{
}
.Spot.ArticleDetail .Gallery.Slider .slick-next
{
}

#Category .Spot.ArticleDetail .Gallery.Slider .slider+.thumbnail
{
	width: 100%;
}

	max-width: calc(100% - (var(--slick_arrow_w) * 2));


#Category .Spot.ArticleDetail .Gallery.Slider .slider+.thumbnail .slick-track
{
	gap: 1em;
}

#Category .Spot.ArticleDetail .Gallery.Slider .slider+.thumbnail img
{
	width: auto;
	height: 4em;
	margin-left: auto;
	margin-right: auto;

	object-fit: contain;
}
*/

/* ------------------------------------------------------
	[詳細]　本体
*/
.Spot.ArticleDetail article
{
	display: grid;
	gap: var(--padding_tb);
	gap: var(--gap);

	text-align: justify;
}

.Spot.ArticleDetail article>.Wrap
{
	display: grid;
	gap: var(--padding_tb);
}

.Spot.ArticleDetail article h2
{
	display: block;

	align-items: initial;
	min-width: initial;
	max-width: initial;
	width: 100%;

	margin-top: 0;
	margin-bottom: 0;
}
/*
*/
.Spot.ArticleDetail article h2>b
{
	border-radius: 0;

	width: 100%;
	min-width: initial;
}
.Spot.ArticleDetail article .spot_title>.kana
{
}


/* ------------------------------------------------------
	[詳細]　<head>
*/
.Spot.ArticleDetail .head
{
	display: grid;
	grid-template-areas:
		"h2"
		"spotname-wrapper"
		"Gallery"
	;
	align-items: start;
	gap: var(--gap);
}
/*
	justify-content: center;
	grid-template-columns: repeat(2, calc((100% - var(--gap)) / 2));
*/
.Spot.ArticleDetail .head>h2
{
	grid-area: h2;
}
.Spot.ArticleDetail .head>.spotname-wrapper
{
	grid-area: spotname-wrapper;
}
.Spot.ArticleDetail .head>.Gallery
{
	grid-area: Gallery;
}


.Spot.ArticleDetail .head>*
{
	min-width: calc((100% - var(--gap)) / 2);
}
/*
*/



/* ------------------------------------------------------
	[詳細]　右
*/
.Spot.ArticleDetail .head .spotname-wrapper
{
	display: grid;
	justify-content: center;
	gap: var(--gap);
}


/* ------------------------------------------------------
	[詳細]　右　タグ
*/
.Spot.ArticleDetail .head .spotname-wrapper .tag-wrapper,
.Spot.ArticleDetail .head .spotname-wrapper .tag-wrapper>.Wrap
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--gap) / 3);
}
/*
[250128-0955]校正　大きく
	font-size: 0.8em;

*/

.Spot.ArticleDetail .head .spotname-wrapper .tag-wrapper .tag.area-tag-tahara
{
	background-color: rgb(var(--gr));
}

/* ------------------------------------------------------
	[詳細]　右　TEL, 住所
*/
.Spot.ArticleDetail .head .address-wrapper
{
	list-style: none;
	margin: 0;

	display: grid;
	gap: calc(var(--gap) / 3);
}

.Spot.ArticleDetail .head .address-wrapper>*
{
	margin: 0;

	display: flex;
	align-items: center;
	gap: 1em;
}

.Spot.ArticleDetail .head .address-wrapper li>*[class*="num"]
{
	font-size: 1.5em;
}


/* ------------------------------------------------------
	[詳細]　free(説明文)
	[250311-1655/250313]　表示する
------------------------------------------------------ */
.spotdata-body
{
	background-color: rgb(var(--w));
	padding: var(--gap);
}

/*
.spotdata-body h3
{
	margin-bottom: 1em;
}
.spotdata-body h3::before
{
	content: none;
}
.spotdata-body h3>b
{
	display: inline-block;

	font-size: 1.5em;
}
*//*
[250117/250124]校正　ひとまず消す
.spotdata-body
{
	--label_angle			: var(--gap);

	display: block;

	background-color: rgb(var(--w));
	padding: calc(var(--gap) * 1.5) var(--gap);
}
/

	mask-image: linear-gradient(#000, #000), var(--mask_arrow_line_r);
	mask-position: center, left top;
	mask-size: 5em;
	mask-composite: exclude;
	mask-repeat: repeat;
	mask-size: 100%, 1em;
/

.spotdata-body::before,
.spotdata-body::after
{
	--w				: 0.5em;
	--h				: 0.25em;
	--blank			: 0.5em;

	content: "";
	display: block;

	position: absolute;
	left: 50%;
	transform: translateX(-50%);

	width: calc(100% - (var(--gap) * 1));
	height: var(--h);

	background-size: calc(var(--w) + var(--blank)) var(--h);
	background-image: linear-gradient(
		to right,
		rgb(var(--bl) / 0.3) calc(var(--w) / 2),
		transparent calc(var(--w) / 2)
	);
	background-repeat: repeat-x;
	background-position: center;
}
/
	border-top-width: 1px;
	border-top-style: dashed;

/

.spotdata-body::before
{
	top: var(--gap);
}
.spotdata-body::after
{
	bottom: calc(var(--gap) / 1.5);
}

.spotdata-body>*
{
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

.spotdata-body #catch
{
	margin-bottom: 0;
}

.spotdata-body #catch::before
{
	content: none;
}

.spotdata-body #catch>b
{
	font-size: 1.5em;
	text-align: left;
}


.spotdata-body #free
{
}
*/

/* ------------------------------------------------------
	[詳細]　詳細データ
------------------------------------------------------ */
.spotdata-detail
{
}

.spotdata-detail :is(th, td)
{
	padding-top: 1em;
	padding-bottom: 1em;
}


/* ------------------------------------------------------
	[250117/250124]校正・新規　地図
------------------------------------------------------ */
.spot_map .Map
{
	width: 100%;
}


/* ------------------------------------------------------
	[詳細]　関連スポット
------------------------------------------------------ */
.spotdata-relation
{
	display: grid;
	gap: var(--gap);
}

.spotdata-relation .spot-list-wrapper
{
	--num					: 4;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(var(--gap) * 2) var(--gap);
}
/*
	display: grid;
	grid-template-columns: repeat(4, 1fr);
*/
.spotdata-relation .spot-list-wrapper>*
{
	width: calc((100% - (var(--gap) * (var(--num) - 1))) / var(--num));
}

.spotdata-relation .spot-list-wrapper a>*
{
	display: grid;
	gap: calc(var(--gap) / 3);
}

.spotdata-relation .spot-list-wrapper img
{
	aspect-ratio: 1 / 1;
}


/* ------------------------------------------------------
	[詳細]　近所のスポット
------------------------------------------------------ */
.spotdata-nearspot
{
	display: grid;
	gap: var(--gap);
}

.spotdata-nearspot ul
{
	list-style: none;
	margin: 0;
	text-align: inherit;
}
.spotdata-nearspot ul>li
{
	margin: 0;
}

.spotdata-nearspot .nearspot-list
{
	--num					: 5;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
}
/*
	display: grid;
	grid-template-columns: repeat(4, 1fr);
*/

.spotdata-nearspot .nearspot-list>*
{
	width: calc((100% - (var(--gap) * (var(--num) - 1))) / var(--num));
}

.spotdata-nearspot .nearspot-list a>*
{
	display: grid;
	gap: calc(var(--gap) / 3);
}

.spotdata-nearspot .nearspot-list img
{
	aspect-ratio: 1 / 1;
}


.spotdata-nearspot .nearspot-text
{
	display: grid;
	gap: calc(var(--gap) / 3);
}