@charset "UTF-8";

@media screen and (max-width:767px) {
	.spot2025 #head_x_btn, .spot2025 #head_entry_btn {
	display: none;
	}
}

/* spot_outline -------------------------------*/
#spot_outline {
background-color: var(--clr_lightyellow);
}
.spot_outline_outer {
display: flex;
}
.spot_outline_outer .img_wrap {
display: block;
}
.spot_outline_outer .img_wrap img {
height: auto;
}
.spot_outline-txtarea p {
margin-bottom: 30px;
}
.spot_outline-txtarea ul {
display: flex;
justify-content: space-between;
}
.spot_menu a {
display: flex;
align-items: center;
background-color: #fff;
font-size: 1.8rem;
font-weight: 700;
line-height: 1;
}
.spot_menu a span {
display: flex;
justify-content: center;
align-items: center;
}
.spot_menu a span i.udarrow_fff {
width: 10px;
height: 10px;
display: block;
margin-right: 0;
}
.spot_menu a span i.udarrow_fff::before {
background-color: #fff;
width: 10px;
}
#spot_menu_a a span {
background-color: var(--clr_pink);
}
#spot_menu_b a span {
background-color: var(--clr_yellowgreen);
}
#spot_menu_c a span {
background-color: var(--clr_blue);
}

@media print, screen and (min-width:768px) {
	.spot_outline_outer {
	justify-content: space-between;
	align-items: center;
	}
	.spot_outline_outer .img_wrap {
	flex-basis: 33.8%;
	}
	.spot_outline-txtarea {
	flex-basis: 61.4%;
	}
	.spot_menu {
	width: calc((100% - 20px) / 3);
	}
	.spot_menu a {
	padding: 12px 14px 13px;
	}
	.spot_menu a span {
	width: 20px;
	height: 20px;
	border-radius: 10px;
	margin-right: 8px;
	}
}

@media screen and (max-width:767px) {
	.spot_outline_outer {
	flex-direction: column;
	}
	.spot_outline_outer .img_wrap {
	max-width: 350px;
	margin: 0 auto 28px;
	}
	.spot_outline-txtarea {
	max-width: 600px;
	margin: 0 auto;
	}
	.spot_menu {
	width: calc((100% - 12px) / 3);
	}
	.spot_menu a {
	flex-direction: column;
	position: relative;
	padding: 10px 0 30px;
	border-radius: 8px;
	}
	.spot_menu a span {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 20px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	}
}

/* area_title -------------------------------*/

.area_wrap:not(:last-child) {
margin-bottom: clamp(40px, 5vw, 50px);
}


.area_title {
border-style: solid;
border-width: 1px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: clamp(20px, 3vw, 30px);
}
.area_title h3 {
font-weight: 700;
line-height: 1;
}
.area_point_con {
display: flex;
color: #fff;
}
.area_point_con dt {
letter-spacing: 0.05em;
line-height: 1.2;
margin-right: 8px;
}
.area_point_con dd {
font-size: 2.2rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0em;
}
.area_point_con dd span {
font-size: 3.4rem;
vertical-align: -2px;
}

#area_a .area_title {
border-color: var(--clr_pink);
}
#area_b .area_title {
border-color: var(--clr_yellowgreen);
}
#area_c .area_title {
border-color: var(--clr_blue);
}
 #area_a .area_title h3 {
color: var(--clr_pink);
}
#area_b .area_title h3 {
color: var(--clr_yellowgreen);
}
#area_c .area_title h3 {
color: var(--clr_blue);
}
#area_a .area_point_con {
background-color: var(--clr_pink);
}
#area_b .area_point_con {
background-color: var(--clr_yellowgreen);
}
#area_c .area_point_con {
background-color: var(--clr_blue);
}

.area_plus1_con {
margin-bottom: 30px;
}
.area_plus1_con span {
display: block;
width: 90px;
padding-top: 6px;
}
.area_plus1_con div {
font-size: 1.4rem;
line-height: 1.5;
}

@media print, screen and (min-width:768px) {
	.area_title h3 {
	font-size: 2.2rem;
	padding-left: 18px;
	}
	.area_point_con {
	padding: 10px;
	}
	.area_point_con dt {
	border:solid 1px #fff;
	border-radius: 5px;
	font-size: 1.4rem;
	padding: 6px 8px 0;
	}
	.area_plus1_con {
	display: flex;
	justify-content: space-between;
	}
	.area_plus1_con div {
	width: calc(100% - 110px);
	}
}
@media screen and (max-width:767px) {
	.area_title h3 {
	font-size: 2.0rem;
	padding-left: 15px;
	}
	.area_point_con {
	padding: 8px 10px;
	align-items: center;
	}
	.area_point_con dt {
	font-size: 1.3rem;
	}
	.area_plus1_con {
	flex-direction: column;
	}
	.area_plus1_con span {
	float: left;
	margin: 0 20px 10px 0;
	}
	.area_plus1_con::after {
	content: "";
	display: block;
	clear: both;
	}
}

/* spot_list -------------------------------*/
.spot_list_con {
display: grid;
gap: clamp(10px, 2.6vw, 26px);
}
.spot_list {
display: flex;
flex-direction: column;
position: relative;
background-color: #fff;
border: solid var(--clr_yellow) 8px;
padding: clamp(16px, 2.4vw, 24px);
}
.spot_plus1 {
display: block;
width: 90px;
height: 36px;
position: absolute;
}
.spot_list .spot_img {
display: block;
}
.spot_list .spot_img img {
height: auto;
}
.spot_point_num {
display: block;
color: #fff;
font-weight: 700;
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
font-size: clamp(1.3rem, 1.5vw, 1.5rem);
line-height: 1;
padding: 3px 0 6px;
letter-spacing: 0.03em;
margin-bottom: 10px;
}
.spot_point_num span {
font-size: clamp(2.2rem, 2.5vw, 2.5rem);
}
h4.spot_name {
font-size: clamp(1.5rem, 1.6vw, 1.6rem);
font-weight: 700;
margin-bottom: 8px;
}
.spot_address {
margin-bottom: 12px;
display: block;
}
.spot_btn {
margin-top: auto;
display: flex;
justify-content:space-between;
}
.spot_btn li {
width: calc((100% - 8px) / 2);
}
.spot_btn li a {
display: block;
font-size: clamp(1.5rem, 1.6vw, 1.6rem);
font-weight: 700;
line-height: 1;
border-style: solid;
border-width: 1px;
text-align: center;
border-radius: 4px;
padding: 5px 0 7px;
letter-spacing: 0em;
}

.spot_btn li a i {
width: 12px;
height: 12px;
}
.spot_btn li a i::before {
background-color: #3c3c3c;
width: 12px;
}

#area_a .spot_point_num {
background-color: var(--clr_pink);
}
#area_b .spot_point_num {
background-color: var(--clr_yellowgreen);
}
#area_c .spot_point_num {
background-color: var(--clr_blue);
}
#area_a h4.spot_name,
#area_a .spot_btn li a {
color: var(--clr_pink);
}
#area_b h4.spot_name,
#area_b .spot_btn li a {
color: var(--clr_yellowgreen);
}
#area_c h4.spot_name,
#area_c .spot_btn li a {
color: var(--clr_blue);
}
#area_a .spot_btn li a {
border-color: var(--clr_pink);
}
#area_b .spot_btn li a {
border-color: var(--clr_yellowgreen);
}
#area_c .spot_btn li a {
border-color: var(--clr_blue);
}

@media print, screen and (min-width:768px) {
	.spot_list_con {
	grid-template-columns: repeat(3, 1fr);
	}
	.spot_list {
	border: solid var(--clr_yellow) 8px;
	padding: clamp(16px, 2.4vw, 24px);
	}
	.spot_plus1 {
	left: -8px;
	top:-8px;
	}
	h4.spot_name {
	letter-spacing: 0.05em;
	line-height: 1.5;
	}
	.spot_address {
	line-height: 1.5;
	letter-spacing: 0.05em;
	}
}
@media screen and (max-width:767px) {
	.spot_list_con {
	/*grid-template-columns: repeat(2, 1fr);*/
	grid-template-columns: repeat(auto-fill, minmax(169px, 1fr));
	}
	.spot_list {
	border: solid var(--clr_yellow) 2px;
	padding: clamp(12px, 2.0vw, 20px);
	}
	.spot_plus1 {
	left: -2px;
	top:-2px;
	}
	h4.spot_name {
	letter-spacing: 0em;
	line-height: 1.5;
	}
	.spot_address {
	line-height: 1.4;
	letter-spacing: 0em;
	}
}
/* spot_flyer -------------------------------*/
#spot_flyer {
background-color: var(--clr_lightyellow);
}
.flyer_wrap {
display: flex;
}
.flyer_img {
display: block;
}
.flyer_img img {
height: auto;
}
.flyer_head {
display: block;
font-size: clamp(1.8rem, 2.2vw, 2.2rem);
font-weight: 700;
line-height: 1;
margin-bottom: 14px;
color: var(--clr_green);
}
.flyer_txt_wrap p {
letter-spacing: 0.03em;
}
.flyer_txt_wrap p span {
display: block;
font-size: 1.4rem;
letter-spacing: 0em;
margin-top: 8px;
}
.flyer_btn {
display: block;
width: 252px;
}
.flyer_btn .btn01 {
font-size: 1.6rem;
padding: 10px 0 11px;
}
@media print, screen and (min-width:768px) {
	.flyer_wrap {
	border: solid #fff 5px;
	padding: clamp(16px, 2.4vw, 30px);
	}
	.flyer_wrap {
	justify-content: space-between;
	}
	.flyer_img {
	flex-basis: 40%;
	}
	.flyer_txt_wrap {
	flex-basis: 57%;
	}
	.flyer_btn .btn01 {
	margin-top: 14px;
	}
}
@media screen and (max-width:767px) {
	.flyer_wrap {
	border: solid #fff 2px;
	padding: clamp(12px, 2.0vw, 20px);
	}
	.flyer_wrap {
	flex-direction: column;
	}
	.flyer_img {
	max-width: 500px;
	margin: 0 auto 16px;
	}
	.flyer_txt_wrap {
	max-width: 500px;
	margin: 0 auto;
	}
	.flyer_txt_wrap p span {
	line-height: 1.6;
	}
	.flyer_btn {
	margin: 14px auto 0;
	}
}