@charset "UTF-8";

/* ▼▼▼ 施設紹介
=====================================*/
.btm_line{
	display: flex;
	align-items: center;
}
.btm_line span{
	font-size: 18px;
	margin-left: auto;
	font-family: 'Noto Sans JP', sans-serif;
}
.title_area{
	display: flex;
	justify-content: space-between;
	margin: 0 0 40px;
	position: relative;
}
	.title_area div{
		width: 48%;
	}
	.yuinoki .title_area div{
		width: 48%;
		text-align: right;
	}

	.title_area h2{
		display: table;
		height: 177px;
		color: #353535;
		font-size: 40px;
		font-weight: 500;
		margin-top: 30px;
	}
	.title_area h2 span{
		display: table-cell;
		vertical-align: middle;
	}
	.title_area h2::before{
		content: "";
		width: 100vw;
		height: 177px;
		position: absolute;
		transform: translateX(-50%);
		left: 50%;
		top: 30px;
		z-index: -1;
	}
	.title_area p{
		background: #fff;
		border: 1px solid #C4C4C4;
		padding: 5px 0;
		width: 224px;
		font-weight: bold;
		text-align: center;
		position: absolute;
		top: 15px;
		left: 0;
	}

.bg{
	position: relative;
	padding-bottom: 60px;
	font-size: 18px;
}
	.bg::before{
		content: "";
		width: 100vw;
		height: calc(100% - 30px);
		position: absolute;
		transform: translateX(-50%);
		top: 30px;
		left: 50%;
		z-index: -1;
	}

.read{
	font-size: 32px;
	letter-spacing: .5em;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	text-align: center;
}

.line_spacing{
	margin: 0 0 60px;
	line-height: 2;
	text-align: center;
}

dl.desc{
	display: flex;
	align-items: center;
	margin: 0 0 60px;
	font-size: 18px;
}
	dl.desc dt{
		flex-shrink: 0;
		padding: 15px 60px;
		margin-right: 20px;
		color: #353535;
		text-align: center;
		font-weight: 500;
	}

.desc_wrap{
	display: flex;
	justify-content: space-between;
	margin: 0 0 60px;
}
.desc_wrap dl.desc{
	width: 48%;
	display: block;
	margin: 0;
}
	.desc_wrap dl.desc dt{
		display: table;
		padding: 15px 60px;
		margin: 0 0 12px;
		width: 100%;
		height: 91px;
	}
	.desc_wrap dl.desc dt span{
		display: table-cell;
		height: 100%;
		vertical-align: middle;
		text-align: center;
	}
	.desc_wrap  .flex_box{
		display: flex;
		justify-content: space-between;
	}
	.desc_wrap .flex_box .photo{
		flex-shrink: 0;
		width: 40%;
		margin-left: 20px;
	}

.chart_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 35px 95px;
	margin: 0 0 60px;
	overflow: hidden;
}
	.chart_list li{
		width: 30%;
	}
	.chart_list li:nth-child(-n + 3){
		margin-bottom: 40px;
	}
	.chart_list li span{
		display: block;
		margin-bottom: 10px;
		color: #000;
		font-size: 20px;
		text-align: center;
		font-weight: bold;
	}

.photo_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: -20px 0 40px;
}
	.photo_list li{
		width: 49%;
		margin-top: 20px;
	}

.environment > div{
	padding: 30px 0 35px;
	border-bottom: 1px dashed #ccc;
}
	.environment > div:last-of-type{
		border: none;
	}
	.environment h3{
		font-size: 32px;
		font-weight: normal;
		margin: 0 0 20px;
	}
	.environment .list_area{
		display: flex;
		justify-content: space-between;
	}
	.environment .list_area ol{
		width: 48%;
	}
	.environment > div.flex_box{
		display: flex;
	}
	.environment > div.flex_box > p{
		flex-shrink: 0;
		width: 35%;
		margin-left: 30px;
	}
	.environment ol.list_area{
		justify-content: space-between;
		margin-top: 20px;
	}
	.environment ol.list_area li{
		width: 48%;
	}
	.environment ol.list_area li p{
		margin: 0 0 10px;
		color: #DB7437;
		font-size: 21px;
		font-weight: bold;
	}
	.environment .voice_link{
		display: inline-block;
		margin: 10px 10px 0 0;
	}
	.environment .voice_link a{
		display: block;
		background: url(../img/icon_voice.svg) no-repeat center/contain;
		width: 26px;
		height: 30px;
	}
	.environment .voice_link a:hover{
		opacity: .7;
	}

.message{
	display: flex;
	align-items: center;
	margin: 0 0 20px;
}
	.message .photo{
		flex-shrink: 0;
		margin-right: 30px;
	}
	.message .txt_area{
		flex-shrink: 1;
		background: #fff;
		border-radius: 20px;
		display: table;
		height: 109px;
		width: calc(100% - 192px);
		position: relative;
	}
	.message .txt_area::before{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 10px 15px 20px;
		border-color: transparent transparent #fff transparent;
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
		left: -20px;
	}
	.message .txt_area p{
		display: table-cell;
		padding: 0 10%;
		vertical-align: middle;
		height: 100%;
		color: #000;
		font-size: 20px;
		font-weight: bold;
	}
	.hospital .message .txt_area p{
		padding: 0 8%;
	}

.factory_data{
	margin-top: 40px;
}
	.data_title{
		background: #F5F6F9;
		color: #000;
		font-size: 20px;
		font-weight: bold;
		padding: 15px 30px;
		position: relative;
	}
	.data_title .link{
		display: block;
		border-radius: 5px;
		width: 235px;
		text-align: center;
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
		right: 20px;
	}
	.data_title .link::before,
	.data_title .link::after{
		content: "";
		background: #fff;
		position: absolute;
		right: 10px;
	}
	.data_title .link::before{
		width: 18px;
		height: 1px;
		top: 18px;
	}
	.data_title .link::after{
		width: 8px;
		height: 1px;
		transform: rotate(45deg);
		top: 15px;
		right: 9px;
	}
	.data_title .link a{
		display: block;
		padding: 5px 10px;
		color: #fff;
		font-size: 15px;
	}
	.data_title .link a::before{
		content: "";
		display: inline-block;
		background: url(../img/icon_link.svg) no-repeat center/100%;
		width: 13.72px;
		height: 12.305px;
		margin-right: 5px;
	}
	.data_title .link:hover{
		opacity: .7;
	}
	.table_area{
		background: #fff;
		display: flex;
		justify-content: space-between;
		padding: 15px 30px 5px;
	}
	.table_area table{
		width: 48%;
		color: #000;
		font-weight: 500;
		font-size: 16px;
	}
	.table_area table th,
	.table_area table td{
		padding-bottom: 10px;
	}
	.table_area table th{
		width: 4em;
	}

/* メディケア玉井
---------------------------- */
.medicare .btm_line::before{
	border-color: #448E4D;
}
.medicare .title_area h2{
	color: #fff;
}
	.medicare .title_area h2::before{
		background: #448E4D;
	}
	.medicare .bg::before{
		background: #F7FAF7;
	}
	.medicare dl.desc dt{
		background: #448E4D;
		color: #fff;
	}
.chart_list{
	background: #ECF3ED;
}
.medicare .environment h3{
	color: #448E4D;
}
.medicare .data_title .link{
	background: #448E4D;
}
.medicare .table_area table th{
	color: #448E4D;
}


/* 玉井泉陽園
---------------------------- */
.senyoen .btm_line::before{
	border-color: #D9AC75;
}
	.senyoen .title_area h2::before{
		background: #D9AC75;
	}
	.senyoen .bg::before{
		background: #FAF6F1;
	}
	.senyoen dl.desc dt{
		background: #D9AC75;
	}
.senyoen .chart_list{
	background: #F6EFE6;
}
.senyoen .environment h3{
	color: #D9AC75;
}
.senyoen .data_title .link{
	background: #D9AC75;
}
.senyoen .table_area table th{
	color: #D9AC75;
}


/* 玉井病院
---------------------------- */
.hospital .btm_line::before{
	border-color: #EF9F20;
}
	.hospital .title_area h2::before{
		background: #EF9F20;
	}
	.hospital .bg::before{
		background: #FFFBF6;
	}
	.hospital dl.desc dt{
		background: #EF9F20;
	}
.hospital .chart_list{
	background: #FEF5E9;
}
.hospital .environment h3{
	color: #EF9F20;
}
.hospital .data_title .link{
	background: #EF9F20;
}
.hospital .table_area table th{
	color: #EF9F20;
}

/* 人生を結ぶ家 ゆいの希
---------------------------- */
.yuinoki .desc_wrap02 {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 900px;
	border: 2px solid #ED8649;
	padding: 20px 25px;
	margin: 0 auto 60px;
}
	.yuinoki .desc_wrap02 h3{
		margin: 0 0 20px;
		color: #ED8649;
		font-size: 23px;
	}

	.yuinoki .desc_wrap02 .photo_area{
		flex-shrink: 0;
		width: 24%;
		margin-left: 30px;
	}

.yuinoki .btm_line::before{
	border-color: #ED8649;
}
	.yuinoki .title_area h2::before{
		background: #ED8649;
	}
	.yuinoki .bg::before{
		background: #FAF6F1;
	}
	.yuinoki dl.desc dt{
		background: #ED8649;
	}
.yuinoki .chart_list{
	background: #F8EEE5;
}
.yuinoki  .data_title .link{
	background: #ED8649;
}
.yuinoki .environment h3{
	color: #ED8649;
}
.yuinoki .table_area table th{
	color: #ED8649;
}


/* ▼▼▼ 480px〜768px
=====================================*/
@media screen and (max-width: 768px) {

	.btm_line{
		display: block;
	}
	.btm_line span{
		display: block;
		font-size: 14px;
		text-align: right;
	}

	section .title01{
		font-size: 24px;
	}
	.title_area{
		display: block;
		margin: 0 0 40px;
	}
		.title_area div{
			width: 100%;
			margin: -15px 0 0;
		}
		.yuinoki .title_area div {
			width: 85%;
			margin: -15px auto 0;
		}
		.title_area h2{
			height: 85px;
			font-size: 24px;
			margin-top: 0;
		}
		.title_area h2 span{
			display: table-cell;
			vertical-align: middle;
		}
		.title_area h2::before{
			content: "";
			width: 100vw;
			height: 85px;
			position: absolute;
			transform: translateX(-50%);
			left: 50%;
			top: 0;
		}
		.title_area p{
			padding: 3px 0;
			width: 145px;
			font-size: 12px;
			top: -10px;
			left: 0;
		}

	.bg{
		font-size: 16px;
	}
		.bg::before{
			content: "";
			width: 100vw;
			height: calc(100% - 30px);
			position: absolute;
			transform: translateX(-50%);
			top: 30px;
			left: 50%;
			z-index: -1;
		}
	.read{
		font-size: 24px;
	}

	.line_spacing{
	}

	dl.desc{
		display: block;
		font-size: 16px;
	}
		dl.desc dt{
			flex-shrink: 0;
			padding: 15px 30px;
			margin: 0 0 10px;
		}

	.desc_wrap{
		display: block;
		margin: 0 0 60px;
	}
	.desc_wrap dl.desc{
		width: 100%;
		display: block;
		margin: 0;
	}
		.desc_wrap dl.desc:first-of-type{
			margin-bottom: 40px;
		}
		.desc_wrap dl.desc dt{
			display: table;
			padding: 15px 20px;
			margin: 0 0 12px;
			width: 100%;
			height: 91px;
		}
		.desc_wrap dl.desc dt span{
			display: table-cell;
			height: 100%;
			vertical-align: middle;
			text-align: center;
		}
		.desc_wrap  .flex_box{
			display: flex;
			justify-content: space-between;
		}
		.desc_wrap .flex_box .photo{
			flex-shrink: 0;
			width: 40%;
			margin-left: 20px;
		}

	.chart_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 30px 20px;
	}
		.chart_list li{
			width: 48%;
			margin-bottom: 20px!important;
		}
		.chart_list li:nth-last-of-type(-n + 2){
			margin-bottom: 0!important;
		}

		.chart_list li span{
			margin-bottom: 5px;
			font-size: 16px;
		}

	.photo_list{
		margin: -10px 0 10px;
	}
		.photo_list li{
			width: 49%;
			margin-top: 10px
		}

	.environment{
		margin: 0 0 20px;
	}
	.environment > div{
		padding: 20px 0 25px;
	}
		.environment h3{
			font-size: 24px;
			margin: 0 0 10px;
		}
		.environment .list_area{
			display: block;
		}
		.environment .list_area ol{
			width: 100%;
		}
		.environment > div.flex_box{
			display: block;
		}
		.environment > div.flex_box > p{
			width: 100%;
			margin: 10px 0 0;
		}
		.environment ol.list_area{
			margin-top: 20px;
		}
		.environment ol.list_area li{
			width: 100%;
		}
		.environment ol.list_area li:last-child{

		}
		.environment ol.list_area li p{
			margin: 0 0 10px;
			color: #DB7437;
			font-size: 21px;
			font-weight: bold;
		}

	.message{
		display: flex;
		align-items: center;
		margin: 0 0 40px;
	}
		.message .photo{
			margin-right: 2%;
			width: 30%;
		}
		.message .txt_area{
			display: table;
			height: 100%;
			width: calc(100% - 32%);
			position: relative;
		}
		.message .txt_area::before{
			content: "";
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 8px 12px 18px;
			border-color: transparent transparent #fff transparent;
			position: absolute;
			transform: translateY(-50%);
			top: 50%;
			left: -18px;
		}
		.message .txt_area p{
			padding: 10px 20px;
			color: #000;
			font-size: 14px;
		}
		.hospital .message .txt_area p{
			padding: 10px 20px;
		}

	.data_title{
		font-size: 18px;
		padding: 15px 20px;
		position: relative;
	}
		.data_title .link{
			margin-top: 10px;
			width: auto;
			position: static;
			transform: translateY(0%);
		}
		.data_title .link::before{
			top: 16px;
		}
		.data_title .link::after{
			top: 13px;
		}
		.data_title .link a{
			display: block;
			padding: 5px 10px;
			color: #fff;
			font-size: 12px;
		}
		.data_title .link a::before{
			margin: 0 5px -2px 0;
		}
		.table_area{
			display: block;
			padding: 15px 20px 5px;
		}
		.table_area table{
			width: 100%;
		}

	/* 人生を結ぶ家 ゆいの希
	---------------------------- */
	.yuinoki .desc_wrap02 {
		display: block;
		padding: 20px;
	}
		.yuinoki .desc_wrap02 h3{
			margin: 0 0 15px;
			font-size: 20px;
		}
		.yuinoki .desc_wrap02 .txt_area{
			margin: 0 0 15px;
		}
		.yuinoki .desc_wrap02 .photo_area{
			flex-shrink: 0;
			width: 100%;
			margin-left: 0;
		}
}