@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap");

/* FV */
.inner_fv_lower::before {
	width: 86px;
	height: 74px;
	background-image: url(../images/recommended/fv_icon01_sp.svg);
}

.inner_fv_lower::after {
	width: 98px;
	height: 134px;
	background-image: url(../images/recommended/fv_icon02_sp.svg);
}

/* 背景 */
.recommend_course {
	background-image: url(../images/top/recommend_course_bg_wave_sp.png);
	background-repeat: repeat-x;
	background-size: 474px 80px;
	background-position: bottom left;
	padding-bottom: 64px;
}

/* 大見出し */
.ttl_recommended {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
	color: #00853E;
	padding-bottom: 16px;
	margin-bottom: 24px;
	position: relative;
	line-height: 1.25;
}
.ttl_recommended::before, .ttl_recommended::after {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	background: url(../images/recommended/icon_clover.svg) no-repeat;
	background-size: contain;
	position: absolute;
}
.ttl_recommended::before {
	bottom: 0;
	left: 0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.ttl_recommended::after {
	top: 0;
	right: 0;
	-webkit-transform: translateX(50%);
	transform: translateX(50%);
}
.ttl_recommended span {
	display: block;
	width: 78.9333333333vw;
	margin: 0 auto;
}
.ttl_recommended span::after {
	content: "";
	display: block;
	width: 100%;
	height: 8px;
	border-radius: 10.6666666667vw;
	background: #E9F9BA;
	position: absolute;
	bottom: 0;
	left: 0;
}

/* 上部画像 */
.ul_recommended_img {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 2.1333333333vw;
}
.ul_recommended_img li {
	display: block;
	padding: 0;
	margin: 0;
	width: calc(50% - 1.0666666667vw);
	font-weight: bold;
	text-align: center;
}
.ul_recommended_img li::before {
	content: none;
}

/* ========================================
おすすめコース内容
======================================== */
.recommended_course {
	padding: 24px 0 0;
	margin-bottom: 16px;
}
.ttl_recommended_heading03.ttl_heading03 {
	margin-top: 24px;
}

.wrap_recommended_course_contents {
	margin-top: 24px;
	padding: 8px 0;
	position: relative;
	z-index: 1;
}
.wrap_recommended_course_contents::before {
	content: "";
	display: block;
	width: 100vw;
	height: 100%;
	background: #00853E;
	border-radius: 4.2666666667vw;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: -1;
}

.recommended_course_contents {
	width: 87.4666666667vw;
	margin: 0 auto 16px;
	padding: 24px 0;
	position: relative;
	z-index: 1;
}
.recommended_course_contents:last-child {
	margin-bottom: 0;
}
.recommended_course_contents::after {
	content: "";
	display: block;
	width: calc(100vw - 16px);
	height: 100%;
	background: #fff;
	border-radius: 4.2666666667vw;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: -1;
}
.recommended_course_contents .recommended_course_img {
	width: 78.9333333333vw;
	margin: 0 auto 16px;
}
.recommended_course_contents .time {
	font-family: "Fugaz One", sans-serif;
	font-size: 32px;
	font-size: 3.2rem;
	color: #00853E;
}
.recommended_course_contents .ttl_heading04 {
	margin-top: 8px;
}

.recommended_course_detail {
	margin-bottom: 16px;
}

/* 場所 */
.recommended_course_place {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 24px;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	padding: 16px;
}
.recommended_course_place .ttl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 4px;
	margin: 0;
	min-width: 4em;
}
.recommended_course_place .ttl::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	background: url(../images/recommended/icon_map.svg) no-repeat;
	background-size: contain;
}
.recommended_course_place a {
	color: #00853E;
	text-decoration: underline;
	display: block;
	margin-bottom: 8px;
}
.recommended_course_place a:hover {
	text-decoration: underline 3px;
}

.recommended_course_place a:last-child {
	margin-bottom: 0;
}

/* 最寄り駐車場 */
.recommended_course_parking {
	display: block;
}
.recommended_course_parking .ttl::before {
	background-image: url(../images/recommended/icon_parking.svg);
}
.recommended_course_parking ul {
	margin-top: 8px;
}

/* こちらもおすすめ */
.recommended_course_info {
	margin-top: 16px;
	border: 8px solid #EBFAD9;
	border-radius: 4.2666666667vw;
}

.inner_recommended_course_info {
	width: 78.9333333333vw;
	margin: 0 auto;
	padding: 24px 0;
}

.ttl_recommended_course_info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 16px;
}
.ttl_recommended_course_info::before {
	content: "";
	display: block;
	width: 20px;
	height: 18px;
	background: url(../images/recommended/icon_heart.svg) no-repeat;
	background-size: contain;
}

.ttl_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 8px;
}

.ttl_list a {
	text-decoration: underline;
	color: #00853E;
}

.recommended_course_info .ttl_list {
	margin-bottom: 8px;
}
.recommended_course_info .ttl_list:last-child {
	margin-bottom: 0;
}
.ttl_list::before {
	content: "";
	display: block;
	min-width: 8px;
	max-width: 8px;
	height: 8px;
	background: #00853E;
	border-radius: 50%;
	margin-top: 8px;
}

.ttl_heading05 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	font-weight: bold;
	font-size: 18px;
	font-size: 1.8rem;
	margin-bottom: 8px;
}
.ttl_heading05:not(:first-child) {
	margin-top: 16px;
}
.ttl_heading05::before {
	content: "";
	display: block;
	min-width: 9px;
	max-width: 9px;
	height: 4px;
	background: #0EA36D;
	border-radius: 40px;
}

/* ========================================
所要時間
======================================== */
.recommended_contents {
	padding: 32px 0;
	margin-bottom: 16px;
	position: relative;
	z-index: 1;
}
.recommended_contents:last-child {
	margin-bottom: 0;
}
.recommended_contents::before {
	content: "";
	display: block;
	width: 95.7333333333vw;
	height: 100%;
	background: #fff;
	border: 8px solid #EBFAD9;
	border-radius: 4.2666666667vw;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: -1;
}

.inner_recommended_contents {
	width: 78.9333333333vw;
	margin: 0 auto;
}

.ul_recommended li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 18px;
	font-size: 1.8rem;
}
.ul_recommended li:last-child {
	margin-bottom: 0;
}
.ul_recommended li::before {
	content: "";
	display: block;
	min-width: 8px;
	max-width: 8px;
	height: 8px;
	background: #00853E;
	border-radius: 50%;
	margin-top: 8px;
}

/* ========================================
情報リンク
======================================== */
.recommended_link_contents {
	margin-bottom: 16px;
}
.recommended_link_contents:last-child {
	margin-bottom: 0;
}
.recommended_link_contents .btn {
	margin-top: 8px;
}
.recommended_link_contents .btn a {
	width: 100%;
	height: 48px;
}

.btn_recommended_course {
	margin-top: 48px;
}

/* ========================================
一覧ページ
======================================== */
.archive_recommended {
	background-image: url(../images/top/recommend_course_bg_wave_sp.png);
	background-repeat: repeat-x;
	background-size: 474px 80px;
	background-position: bottom left;
}

.recommend_course_list_contents:not(:last-child) {
	margin-bottom: 40px;
}

.recommended_img {
	width: calc(268 / 375 * 100vw);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.recommended_img::before,
.recommended_img::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
}

.recommended_img::before {
	border: 8px solid #00853E;
	pointer-events: none;
	top: 0;
	left: 0;
	border-radius: 16px;
}

.recommended_img::after {
	background: #C9E595;
	border-radius: calc(24 / 375 * 100vw);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-8deg);
	z-index: -1;
}

.recommend_course_list_contents:nth-child(3n + 2) .recommended_img::after {
	background: #9AE46B;
}

.recommend_course_list_contents:nth-child(3n + 3) .recommended_img::after {
	background: #08C29A;
}

.ttl_recommend_course_list {
	font-weight: bold;
	margin-top: 32px;
	padding-bottom: 8px;
	border-bottom: 1px dashed #002B14;
}

.course_number {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	color: #00853E;
	font-family: "Fugaz One", sans-serif;
	line-height: 2.75;
}
.course_number::after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border: 1px solid #00853E;
	border-radius: 50%;
}



@media (min-width: 769px) {
	/* FV */
	.inner_fv_lower::before {
		width: 192px;
		height: 168px;
		background-image: url(../images/recommended/fv_icon01_pc.svg);
	}

	.inner_fv_lower::after {
		width: 160px;
		height: 220px;
		background-image: url(../images/recommended/fv_icon02_pc.svg);
	}

	/* 背景 */
	.recommend_course {
		background-image: url(../images/top/recommend_course_bg_wave_pc.png);
		background-size: 1920px 324px;
	}
	/* 大見出し */
	.ttl_recommended {
		font-size: 32px;
		font-size: 3.2rem;
		margin-bottom: 32px;
		position: relative;
		line-height: 1.25;
		text-align: center;
	}
	.ttl_recommended::before, .ttl_recommended::after {
		width: 64px;
		height: 64px;
	}
	.ttl_recommended::before {
		bottom: auto;
		top: 12px;
		left: 0;
		-webkit-transform: translate(0);
		transform: translate(0);
	}
	.ttl_recommended span {
		width: 100%;
	}
	.ttl_recommended span::after {
		border-radius: 40px;
	}
	/* 上部画像 */
	.ul_recommended_img {
		gap: min(2.3529411765vw, 32px);
		justify-content: center;
	}
	.ul_recommended_img li {
		width: calc(25% - min(7.0588235294vw, 96px) / 4);
	}
	.ul_recommended_img li::before {
		content: none;
	}
	/* ========================================
	おすすめコース内容
	======================================== */
	.wrap_recommended_course_contents {
		margin-top: 32px;
		padding: 24px 0;
	}
	.wrap_recommended_course_contents::before {
		width: 100%;
		border-radius: 24px;
	}
	.recommended_course_contents {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 0 32px;
		width: calc(100% - 48px);
		padding: 24px min(calc(72 / 1360 * 100vw), 72px);
	}
	.recommended_course_contents::after {
		width: calc(100% - 16px);
		border-radius: 16px;
	}
	.recommended_course_contents .recommended_course_img {
		width: min(32.9411764706vw, 448px);
		margin: 0;
	}
	.recommended_course_contents .contents {
		width: min(32.9411764706vw, 448px);
	}
	.recommended_course_detail {
		margin-bottom: 0;
	}
	.detail_text {
		font-size: 18px;
		font-size: 1.8rem;
	}
	/* 場所 */
	.recommended_course_place {
		padding: 32px 0 32px min(calc(40 / 1360 * 100vw), 40px);
	}
	/* 最寄り駐車場 */
	.recommended_course_parking {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: min(4.8529411765vw, 66px);
	}
	.recommended_course_parking ul {
		margin-top: 0;
	}
	/* こちらもおすすめ */
	.recommended_course_info.contents {
		width: 100%;
		border-radius: 16px;
	}
	.inner_recommended_course_info {
		width: min(54.1176470588vw, 736px);
		margin: 0 auto;
		padding: 24px 0;
	}
	.recommended_course_info_contents {
		margin-bottom: 16px;
	}
	.recommended_course_info_contents:last-child {
		margin-bottom: 0;
	}
	.recommended_course_info_contents .recommended_course_place {
		padding: 0 0 0 16px;
		margin-top: 8px;
	}
	.ttl_list {
		font-size: 18px;
		font-size: 1.8rem;
	}
	.ttl_list:::before {
		margin-top: 10px;
	}
	/* ========================================
	所要時間
	======================================== */
	.recommended_contents {
		padding: 48px 0;
		margin-bottom: 16px;
		position: relative;
		z-index: 1;
	}
	.recommended_contents:last-child {
		margin-bottom: 0;
	}
	.recommended_contents::before {
		width: 100%;
		border-radius: 24px;
	}
	.inner_recommended_contents {
		width: min(74.1176470588vw, 1008px);
		margin: 0 auto;
	}
	.ul_recommended li {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 8px;
		margin-bottom: 8px;
		font-size: 18px;
		font-size: 1.8rem;
	}
	.ul_recommended li:last-child {
		margin-bottom: 0;
	}
	.ul_recommended li::before {
		content: "";
		display: block;
		min-width: 8px;
		max-width: 8px;
		height: 8px;
		background: #00853E;
		border-radius: 50%;
		margin-top: 8px;
	}
	/* ========================================
	情報リンク
	======================================== */
	.wrap_recommended_link_contents {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 16px 0;
	}
	.recommended_link_contents {
		width: min(35.8823529412vw, 488px);
		margin-bottom: 0;
	}
	.recommended_link_contents .btn {
		max-width: 352px;
	}
	.recommended_link_contents .btn a {
		width: 100%;
		padding-top: 0;
		padding-bottom: 0;
	}
	.btn_recommended_course {
		margin: 48px auto 0;
	}

	/* ========================================
	一覧ページ
	======================================== */
	.archive_recommended {
		background-image: url(../images/top/recommend_course_bg_wave_pc.png);
		background-size: 1920px 324px;
	}

	.wrap_recommend_course_list_contents {
		display: flex;
		flex-wrap: wrap;
		gap: min(calc(32 / 1360 * 100vw), 32px);
	}
	.recommend_course_list_contents {
		width: min(calc(352 / 1360 * 100vw), 352px);
	}
	.recommend_course_list_contents:not(:last-child) {
		margin-bottom: 0;
	}
	.recommend_course_list_contents:nth-child(3n + 2) {
		margin-top: 64px;
	}
	.recommended_img {
		width: min(calc(320 / 1360 * 100vw), 320px);
	}
	.recommended_img::after {
		border-radius: min(calc(24 / 1360 * 100vw), 24px);
	}
	.ttl_recommend_course_list {
		font-size: 20px;
		font-size: 2rem;
	}
}