@charset "utf-8";

/* ===================================================
	Sightseeing CSS
====================================================== */
/* ---------------------------------------------------
	観光スポットテンプレート
------------------------------------------------------ */
/* **********************************************************
	共通スタイル ※消さないでください。
********************************************************** */

/* 全体共通
========================================================== */
[class*="layout_"] + [class*="layout_"] {
	margin-top: 80px;
}
[class*="layout_"] .ofi {
	width: 100%;
	height: 100%;
}
[class*="layout_"] .detail_col dt span {
	display: block;
	margin: 0 0 5px;
	font-size: 14px;
}
[class*="layout_"] .time span {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	vertical-align: bottom;
}
[class*="layout_"] .time span::before {
	width: 26px;
	height: 26px;
	margin: 0 5px 0 0;
	content: "";
	background: no-repeat center center;
}
[class*="layout_"] .btn_col {
	display: flex;
	margin: 25px 0 0;
}
[class*="layout_"] .btn_col a {
	letter-spacing: 0;
}

@media screen and (max-width: 600px) {
	[class*="layout_"] + [class*="layout_"] {
		margin-top: 50px;
	}
	[class*="layout_"] .btn_col {
		margin-top: 15px;
	}
}

/* 中項目
========================================================== */
[class*="layout_md"] {
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 600px) {
	[class*="layout_md"] {
		display: block;
	}
}

/* **********************************************************
	選択スタイル※不要なスタイルは削除
********************************************************** */
/* 所要時間アイコン
========================================================== */
/* 車 */
[class*="layout_"] .time.icon_car span::before {
	background-image: url(../../sightseeing/img/icon_car.svg);
}

/* 徒歩 */
[class*="layout_"] .time.icon_foot span::before {
	background-image: url(../../sightseeing/img/icon_foot.svg);
}

/* ボタン
========================================================== */
/* ▼ アイコンあり ここから ---------------------------------- */
.btn_icon .btn_col a {
	display: flex;
	align-items: center;
}
.btn_icon .btn_col a::before {
	width: 16px;
	height: 16px;
	margin: 0 5px 0 0;
	content: "";
	background: no-repeat center center;
	background-size: 100% auto;
}
.btn_icon .btn_col .btn_map::before {
	background-image: url(../img/icon_map.svg);
}
.btn_icon .btn_col .btn_site::before {
	background-image: url(../img/icon_site_01.svg);
}
/* ▲ アイコンあり ここまで ---------------------------------- */

/* ▼ 左寄せ：オプションレイアウト ここから
以下は左寄せ：基本レイアウトに追加して使用するcssです。
--------------------------------------------------------- */
/* ▼ 左寄せ：type2 下ライン ここから */
.btn_sm_bd_btm .btn_col li:not(:last-child) {
	margin: 0 15px 0 0;
}
.btn_sm_bd_btm .btn_col a {
	padding: 5px 0;
}

@media screen and (max-width: 600px) {
	.btn_sm_bd_btm .btn_col {
		flex-wrap: wrap;
	}
}
/* ▲ 左寄せ：type2 下ライン ここまで */
/* ▲ 左寄せ：オプションレイアウト ここまで -------------------- */

/* 装飾type
========================================================== */
/* ▼ 装飾type1 ここから ----------------------------------- */
.decorate_01 .detail_col dt {
	padding: 0 0 10px;
	margin: 0 0 10px;
	border-bottom: 1px solid rgba(var(--color-border02-rgb), 0.3);
}
.decorate_01 [class*="layout_lg"] .time {
	margin: 0 0 20px;
}
.decorate_01 [class*="layout_md"] .time {
	margin: 0 0 15px;
}

@media screen and (max-width: 600px) {
	.decorate_01 [class*="layout_lg"] .time {
		margin-bottom: 15px;
	}
	.decorate_01 [class*="layout_md"] .time {
		margin-bottom: 10px;
	}
}
/* ▲ 装飾type1 ここまで ----------------------------------- */

/* 中項目
========================================================== */
/* ▼ 中項目type8 ここから --------------------------------- */
.layout_md_08 {
	flex-wrap: wrap;
	margin-bottom: -80px;
	counter-reset: num;
}
.layout_md_08::after {
	width: 365px;
	max-width: calc((100% - 60px) / 3);
	content: "";
}
.layout_md_08 .spot {
	width: 365px;
	max-width: calc((100% - 60px) / 3);
	margin: 0 0 80px;
	letter-spacing: 0;
	counter-increment: num;
}
.layout_md_08 .detail_col {
	margin: 18px 0 0;
}
.layout_md_08 .detail_col dt {
	display: flex;
	align-items: center;
	font-family: YakuHanMPs, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
	font-size: 24px;
	line-height: 1.4;
}
.layout_md_08 .detail_col dt::before {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	align-self: flex-start;
	justify-content: center;
	width: 35px;
	height: 35px;
	margin: 0 10px 0 0;
	font-size: 16px;
	color: #fff;
	content: counter(num, decimal-leading-zero);
	background: var(--color-bg02);
	border-radius: 50%;
}

@media screen and (max-width: 600px) {
	.layout_md_08 {
		margin-bottom: 0;
	}
	.layout_md_08::after {
		content: none;
	}
	.layout_md_08 .spot {
		width: auto;
		max-width: none;
		margin-bottom: 50px;
	}
	.layout_md_08 .img img {
		width: 100%;
	}
	.layout_md_08 .detail_col {
		margin-top: 15px;
	}
	.layout_md_08 .detail_col dt {
		font-size: 20px;
	}
	.layout_md_08 .detail_col dt::before {
		width: 30px;
		height: 30px;
		margin-right: 8px;
		font-size: 14px;
	}
}
/* ▲ 中項目type8 ここまで --------------------------------- */

/* ---------------------------------------------------
	sec01
------------------------------------------------------ */
#sec01 {
	padding: 80px 0 160px;
}
#sec01 .map iframe {
	display: block;
	width: 100%;
	height: 600px;
}
#sec01 .map {
	margin-bottom: 120px;
}

@media screen and (max-width: 600px) {
	#sec01 {
		padding: 60px 0;
	}
	#sec01 .map iframe {
		height: 60vw;
	}
	#sec01 .map {
		margin-bottom: 40px;
	}
}

/* ---------------------------------------------------
	sec_others
------------------------------------------------------ */
#sec_others {
	padding: 95px 0;
	margin-bottom: 55px;
	text-align: center;
	border-image-source: linear-gradient(#fff, #fff); /* 色 */
	border-image-slice: 0 fill; /* 変更しない */
	border-image-outset: 0 100vw; /* どれだけはみ出すか上下左右 */
}
#sec_others .cap {
	margin: 0 0 30px;
	font-size: 24px;
}
#sec_others .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 450px;
	min-height: 80px;
	padding: 10px 15px 10px 25px;
	border: 1px solid rgba(var(--color-border02-rgb), 0.3);
}
#sec_others .btn::after {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 0 0 0 10px;
	content: "";
	background: url(../img/icon_site_02.svg) no-repeat center center;
	background-size: 100% auto;
}

@media screen and (max-width: 600px) {
	#sec_others {
		padding: 60px 0;
		margin-bottom: 0;
		text-align: center;
	}
	#sec_others .cap {
		margin-bottom: 20px;
		font-size: 20px;
	}
	#sec_others .btn {
		width: 100%;
		min-height: 60px;
		padding: 10px 10px 10px 20px;
	}
	#sec_others .btn::after {
		margin-left: 5px;
	}
}