@charset "UTF-8";


/*-----------------------------------

	contents

-----------------------------------*/
.lower_h3{
    font-size: 20px;
    width: 100%;
    border-bottom: 1px solid #38af80;
    padding-bottom: 10px;
}

.dot_line{
	border: 1.5px dotted #231815;
	width: 100vw;
	margin: 156px calc(50% - 50vw) 116px;
}

.btn_ore {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-align: center;
	border: 4px solid #fff;
	border-radius: 50vw;
	margin: 0 auto;
	position: relative;
	background: #F3982D;
	color: #fff!important;
	padding: 13px 0;
}
.btn_gy {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-align: center;
	border: 4px solid #fff;
	border-radius: 50vw;
	margin: 0 auto;
	position: relative;
	background: #6CBB5A;
	color: #fff!important;
	padding: 13px 0;
}
.btn_pink {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-align: center;
	border: 4px solid #fff;
	border-radius: 50vw;
	margin: 0 auto;
	position: relative;
	background: #E2507F;
	color: #fff!important;
	padding: 13px 0;
}
.btn_lb {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-align: center;
	border: 4px solid #fff;
	border-radius: 50vw;
	margin: 0 auto;
	position: relative;
	background: #37BEF0;
	color: #fff!important;
	padding: 13px 0;
}
.btn_ore::after,
.btn_gy::after,
.btn_pink::after,
.btn_lb::after{
	content: '';
	display: block;
	margin: auto;
	position: absolute;
	top: 0;
	right: 30px;
	bottom: 0;
	z-index: 1; 
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
}

@media screen and (max-width: 640px){
	.lower_h3{
		font-size: 16px;
	}
	.dot_line{
		margin: 50px calc(50% - 50vw);
	}
}

/*-----------------------------------

	guidebook_block

-----------------------------------*/
#guidebook_block{
	padding: 80px 0 480px;
}
#guidebook_block .intro_p{
	font-weight: 700;
    text-align: center;
    margin-bottom: 76px;
    line-height: 2;
	font-size: 20px;
}
#guidebook_block .guidebook_box{
	margin: 0 0 156px;
}
#guidebook_block .guidebook_box .guidebook_wrap{
	gap: 76px;
	margin: 40px auto 0;
	justify-content: flex-start;
}
#guidebook_block .guidebook_box .guidebook_wrap .guidebook{
	width: calc((100% - 152px) / 3);
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#guidebook_block .guidebook_box .guidebook_wrap .guidebook .img_box{
	border: 1px solid #808080;
	aspect-ratio: 5 / 7;
	width: 100%;
    height: fit-content;
    margin: auto;
}
#guidebook_block .guidebook_box .guidebook_wrap .guidebook .img_box img{
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
    object-position: center;
}
#guidebook_block .guidebook_box .guidebook_wrap .guidebook .lower_h4{
	color: #38AF80;
	font-size: 16px;
	padding: 20px 0 16px;
	min-height: 100px;
}
#guidebook_block .guidebook_box .guidebook_wrap .guidebook p{
	font-size: 14px;
	margin: 0 0 28px;
	flex-grow: 1;
}
#guidebook_block .guidebook_box .guidebook_wrap .guidebook a{
	display: block;
    width: 100%;
}
#guidebook_block .guidebook_box .guidebook_wrap .guidebook .btn_gr{
	padding: 13px 0;
	box-shadow: none;
	color: #fff!important;
}
#guidebook_block .guidebook_box .guidebook_wrap .guidebook .btn_gr::after{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
}
#guidebook_block .guidebook_box .boxttl_h4{
	font-size: 28px;
	text-align: center;
	margin: 80px auto 72px;
}
#guidebook_block .guidebook_box .guidebook .img_ttl ,
#guidebook_block .guidebook_box .guidebook .p_ttl {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}




@media screen and (max-width: 840px){
	#guidebook_block .guidebook_box .guidebook_wrap{
		gap: 30px;
	}
	#guidebook_block .guidebook_box .guidebook_wrap .guidebook{
		width: calc((100% - 60px) / 3);
	}
}
@media screen and (max-width: 640px){
	#guidebook_block{
		padding: 70px 0 220px;
	}
	#guidebook_block .intro_p{
		font-size: 16px;
		margin-bottom: 50px;
	}
	
	#guidebook_block .guidebook_box{
		margin: 0 0 50px;
	}
	#guidebook_block .guidebook_box .guidebook_wrap{
		margin: 30px auto 0;
	}
	#guidebook_block .guidebook_box .guidebook_wrap .guidebook{
		width: 100%;
	}
	#guidebook_block .guidebook_box .guidebook_wrap .guidebook .img_box{
		max-width: 250px;
		width: 100%;
		margin: auto;
	}
	#guidebook_block .guidebook_box .guidebook_wrap .guidebook p{
		margin: 0 0 20px;
	}
	#guidebook_block .guidebook_box .guidebook_wrap .guidebook a{
		max-width: 300px;
		width: 100%;
		margin: auto;
	}
	#guidebook_block .guidebook_box .boxttl_h4{
		margin: 30px auto;
		font-size: 20px;
	}
}




