@charset "utf-8";
/* CSS Document */

/*================================
数字で見るハピネスさんあい
================================*/
.number{ padding: 3rem 0 2rem;}
.numberbox{
	background-color: #fff;
	
	margin-bottom: 1rem;
}
.numberbox h3{
	font-size: 1.3rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1rem;
}
@media (min-width: 768px){
	.numberbox{ padding: 1.5rem;}
}
@media (max-width: 767px){
	.numberbox{ padding: 1rem;}
}

/*男女比
================================*/
.num_ratio{
	display: flex;
	align-items: center;
	justify-content: center;
}
.num_ratio .num_graph{
	position: relative;
	z-index: 1;
	margin: 0 30px;
}
.num_ratio .num{
	position: relative;
	font-weight: bold;
	border-bottom-style: solid;
	border-bottom-width: 3px;
	line-height: 1;
}
.num_ratio .num:nth-child(1){ border-bottom-color: #f1d1b5;}
.num_ratio .num:nth-child(3){ border-bottom-color: #ebc7e8;}
.num_ratio .num::after{
	content: '';
	display: inline-block;
	width: 42px;
	height: 3px;
	position: absolute;
}
.num_ratio .num:nth-child(1)::after{ background-color: #f1d1b5;}
.num_ratio .num:nth-child(3)::after{ background-color: #ebc7e8;}
.num_ratio .num span{
	font-weight: normal;
	vertical-align: 3px;
}
.num_ratio .num .target{
	margin-right: .3rem;
}
.num_ratio .num .percent{
	font-size: 45%;
	margin-left: .3rem;
}

@media (min-width: 992px){
	.num_ratio .num .target{ font-size: 50%;}
}
@media (max-width: 991px){
	.num_ratio .num .target{
		font-size: 40%;
		display: block;
	}
}
@media (min-width: 768px){
	.num_ratio .num{
		font-size: 4rem;
		padding: 5px;
	}
	.num_ratio .num::after{ bottom: 7px;}
	.num_ratio .num:nth-child(1)::after{
		right: -38px;
		transform:rotate(-30deg); 
	}
	.num_ratio .num:nth-child(3)::after{
		left: -38px;
		transform:rotate(30deg); 
	}
	.num_ratio .num_graph{ width: 230px;}
}
@media (max-width: 767px){
	.num_ratio{ flex-wrap: wrap;}
	.num_ratio .num{
		font-size: 2.2rem;
		padding: 5px 0;
	}
	.num_ratio .num:nth-child(1){
		order: 1;
		margin-right: 15%;
	}
	.num_ratio .num:nth-child(3){
		order: 2;
		margin-left: 15%;
	}
	.num_ratio .num::after{
		bottom: -16px;
	}
	.num_ratio .num:nth-child(1)::after{
		right: -36px;
		transform:rotate(40deg); 
	}
	.num_ratio .num:nth-child(3)::after{
		left: -36px;
		transform:rotate(-40deg); 
	}
	.num_ratio .num_graph{
		width: 100%;
		max-width: 175px;
		order: 3;
	}
}

/*年齢層　＆　通勤方法
================================*/
.num_target .target_list ul{
	list-style: none;
	padding: 0;
}
.num_target .target_list ul li{
	font-size: 1.75rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.num_target .target_list ul li .target{
	font-size: 60%;
	font-weight: normal;
	width: 80px;
	display: inline-block;
}
.num_target .target_list ul li .t_num{
	font-weight: bold;
	vertical-align: 3px;
	display: flex;
	align-items: baseline;
}
.num_target .target_list ul li .percent{
	font-size: 55%;
	margin-left: .1rem;
}
@media (min-width: 1200px){
	.num_target .target_list{
		display: flex;
	}
}
@media (min-width: 992px){
	.num_target{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.num_target .target_list ul{
		margin-right: 2rem;
		margin-bottom: 0;
	}
}
@media (max-width: 991px){
	.num_target{ text-align: center;}
	.num_target .target_list{
		display: inline-block;
		text-align: left;
	}
	.num_target .target_list ul:not(:last-child){ margin-bottom: 0;}
}

/*その他
================================*/
.num_icon{
	display: flex;
	align-items: center;
	justify-content: center;
}
.num_icon .num{
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 0;
	margin-left: 1rem;
	line-height: 1;
}
.num_icon .num span{
	font-weight: normal;
	vertical-align: 3px;
}
.num_icon .num .percent{
	font-size: 45%;
	margin-left: .3rem;
}
.num_icon .num .month{
	font-size: 30%;
	margin-left: .3rem;
}
.num_icon .num .approx{
	font-size: 30%;
	margin-right: .3rem;
}


/*================================
和みや　＆　さんカフェ
================================*/
.main_txt p{
	line-height: 2;
  margin-bottom: 2.5rem;
}
.place_point h3{
	font-size: 1.1rem;
	font-weight: bold;
}
.place_point p:last-child{ margin-bottom: 0;}
.dot_line{
	background-image: linear-gradient(to right, #e4e4e4 2px, transparent 2px);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  height: 2px;
}
@media (min-width: 768px) and (max-width: 991px){
	.place_photo img{ max-width: 540px;}
}
@media (max-width: 991px){
	.place_photo{ margin-bottom: 1.5rem;}
}

/*================================
施設紹介
================================*/
.introbox{
  background: linear-gradient(to right, #f18c8e, #f1d1b5);
	position: relative;
	z-index: 0;
}
.introbox::before{
	content: '';
	display: inline-block;
  position: absolute;
	top: 2px;
	right: 2px;
	bottom: 2px;
	left: 2px;
	background-color: #fff;
	z-index: -1;
}
.intro img{ margin-bottom: 1rem;}
.intro h3{
	font-size: 1.1rem;
	font-weight: bold;
}
@media (min-width: 768px){
	.introbox{ padding: 3rem 3rem 0;}
	.intro{ margin-bottom: 3rem;}
}
@media (max-width: 767px){
	.introbox{ padding: 2rem 1rem 0;}
	.intro{ margin-bottom: 2rem;}
}