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

/*==============================
コンテンツ設定
==============================*/

/*ページビジュアル*/
#pageVisual{
	background: url(../img/clinic/bg_main.webp) no-repeat center center / cover;
}

/*ページビジュアル  見出し英語*/
#pageVisual .pageNav h2::after{
	content: "CLINIC/CARE HOME";
}

/*------------------------------
共通設定
------------------------------*/

/*container*/
.container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/*container left,right共通*/
.container .leftBox,
.container .rightBox{
	width: 500px;
}

/*container left 見出し*/
.container .leftBox h3{
	color: #fff;
	font-size: 2.4rem;
	line-height: 1.8;
}

/*container left 本文*/
.container .leftBox .txt{
	color: #fff;
}

/*left 写真*/
.container .leftBox .photo{
	margin: 60px 0 0 0;
}

/*container right 見出し*/
.container .rightBox{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-between;
}


/*タイトル*/
.title{
	align-items: center;
}

/*タイトル 本文*/
.title .txtBox{
	width: 580px;
}

/*タイトル 見出し*/
.title .txtBox h3{
	padding: 0 0 25px 0;
	font-size: 3rem;
	line-height: 1.6;
}

/*タイトル 小見出し*/
.title .txtBox h4{
	margin: 25px 0 0 0;
	font-size: 2rem;
	line-height: 1.6;
}

/*ジャンル*/
.genre{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 350px;
	aspect-ratio: 1 / 1;
}

/*本文*/
.txt{
	margin: 30px 0 0 0;
	font-size: 1.4rem;
	line-height: 2.1;
	text-align: justify;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/*------------------------------
FEATURES設定
------------------------------*/

/*FEATURES全体*/
#features{
	background: #333;
}


/*FEATURES中身*/
#features .inner{
	width: 800px;
}

/*FEATURES 見出し*/
#features .inner h2{
	color: #fff;
}

/*FEATURES 見出し　英語*/
#features .inner h2::after{
	content: "FEATURES";
}

/*FEATURES 本文*/
#features .inner .txt{
	margin: 60px 0 0 0;
	color: #fff;
}

/*コンテンツナビゲーション*/
.contentNav{
	margin: 70px auto 0;
	width: 530px;
}

/*コンテンツナビゲーション中身*/
.contentNav ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: justify;
	gap: 10px;

}

/*コンテンツナビゲーション リスト*/
.contentNav ul li{
	width: 260px;
	height: 70px;
}

/*コンテンツナビゲーション リンク*/
.contentNav ul li a{
	padding: 10px 0 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	font-size: 2rem;
	line-height: 1;
	text-align: center;
	background: #fff;
	transition: 0.15s ease;
}

/* ホバー */
@media (any-hover: hover) {

	/*コンテンツナビゲーション リンク ホバー*/
	.contentNav ul li a:hover{
		color: #fff;
		background: #808080;
		transition: 0.3s ease;
	}

	/*コンテンツナビゲーション リンク 装飾　ホバー*/
	.contentNav ul li a:hover::after{
		background: url(../img/common/ico_arrow_white.svg) center center / cover;
		transform: rotate(90deg) translate(3px, 0);
		transition: 0.5s ease;
	}
}

/*コンテンツナビゲーション リンク 装飾*/
.contentNav ul li a::after{
	content: "";
	display: block;
	margin: 5px 0 0 0;
	width: 7px;
	height: 14px;
	background: url(../img/common/ico_arrow.svg) center center / cover;
	transform: rotate(90deg);
	transition: 0.15s ease;
}

/*------------------------------
医療施設設定
------------------------------*/

/*医療施設全体*/
#clinic{
	padding: 0;
	background: #333;
}

/*医療施設 ジャンル*/
#clinic .genre{
	background: #fff;
}

/*医療施設 タイトル 英語*/
#clinic .genre h2::after{
	content: "CLINIC";
}

/*医療施設 見出し*/
#clinic .title .txtBox h3{
	color: #fff;
	border-bottom: 1px solid #FFF;
}

/*医療施設 小見出し*/
#clinic .title .txtBox h4{
	color: #fff;
}

/*医療施設 本文*/
#clinic .title .txtBox .txt{
	color: #fff;
}

/*5つのプラス*/
.fiveplus {
	margin: 124px auto 0;
	gap: 50px;
}

/*5つのプラス 写真*/
.fiveplus .photo{
	width: 580px;
}

/*5つのプラス txtBox*/
.fiveplus .txtBox{
	padding: 20px 30px;
	width: 470px;
	background: #fff;
}

/*5つのプラス 見出し*/
.fiveplus .txtBox h4{
	font-size: 2.4rem;
	line-height: 1.8;
	text-align: justify;
}

/*5つのプラス リスト全体*/
.fiveplus .txtBox ul{
	margin: 40px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 35px;
}

/*5つのプラス リスト*/
.fiveplus .txtBox ul li{
	max-width: 185px;
}

/*5つのプラス リスト 最後*/
.fiveplus .txtBox ul li:last-of-type{
	max-width: 100%;
}

/*5つのプラス のタイトル*/
.fiveplus .txtBox h5{
	padding: 0 0 12px 0;
	font-size: 1.8rem;
	line-height: 1;
	text-align: center;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	border-bottom: 1px solid #1a1a1a;
}

/*5つのプラス のタイトル　装飾*/
.fiveplus .txtBox h5::before{
	content: "";
	display: inline-block;
	margin: 0 5px 0 0;
	width: 14px;
	height: 14px;
	background: url(../img/common/ico_plus.svg) center center / cover;
}

/*5つのプラス 本文*/
.fiveplus .txtBox .txt{
	margin: 10px 0 0 0;
	line-height: 1.8;
}

/*5つのプラス 説明*/
.explanation{
	margin: 140px 0 0 0;
}

/*------------------------------
オーナー向けサービス設定
------------------------------*/

/*オーナー向けサービス全体*/
#service{
	background: #333;
}

/*オーナー向けサービス 見出し*/
#service h2{
	color: #fff;
}

/*オーナー向けサービス 見出し 英語*/
#service h2::after{
	content: "SERVICE";
}

/*サブリース*/
.lease{
	margin: 60px 0 0 0;
}

/*サブリース、土地探し photo共通*/
.lease .photo,
.search .photoBox{
	padding: 40px;
	width: 520px;
	background: #fff;
}

/*サブリース、土地探し txtBox共通*/
.lease .txtBox,
.search .txtBox{
	padding: 40px;
	width: calc(100% - 520px);
	background: #E5E5E5;
}

/*サブリース、土地探し 見出し共通*/
.lease .txtBox h3,
.search .txtBox h3{
	padding: 0 0 15px 0;
	font-size: 3rem;
	line-height: 1.6;
	border-bottom: 1px solid #1a1a1a;
}

/*サブリース、土地探し 見出し 小文字共通*/
.lease .txtBox h3 span,
.search .txtBox h3 span{
	font-size: 2rem;
	display: block;
}

/*サブリース、土地探し 本文共通*/
.lease .txtBox .txt,
.search .txtBox .txt{
	margin: 15px 0 0 0;
}

/*サブリース デメリット*/
.lease .txtBox dl{
	margin: 20px 0 0 0;
	display: flex;
	flex-direction: column;
}

/*サブリース デメリット タイトル*/
.lease .txtBox dt{
	color: #fff;
	font-size: 1.6;
	line-height: 1;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/*サブリース デメリット タイトル 背景*/
.lease .txtBox dt span{
	display: inline-block;
	padding: 5px;
	background: #333;
}

/*サブリース デメリット 説明*/
.lease .txtBox dd{
	padding: 10px;
	font-size: 1.4;
	line-height: 1.6;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	border: 1px solid #333;
}

/*土地探し*/
.search{
	margin: 100px 0 0 0;
	flex-direction: row-reverse;
}

/*土地探し txtBox*/
.search .txtBox{
	background: #4d4d4d;
}

/*土地探し 見出し*/
.search .txtBox h3{
	color: #fff;
	border-bottom: 1px solid #fff;
}

/*土地探し 本文*/
.search .txtBox .txt{
	color: #fff;
}

/*土地探し 様々なケース*/
.search .photoBox h5{
	display: inline-block;
	margin: 0 0 30px 0;
	padding: 5px;
	color: #fff;
	font-size: 1.6;
	line-height: 1;
	font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	background: #333;
}

/*------------------------------
CARE HOME設定
------------------------------*/

/*ケアホーム ジャンル*/
#carehome .genre{
	background: #333;
}

/*ケアホーム タイトル*/
#carehome .genre h2{
	color: #fff;
}

/*ケアホーム タイトル 英語*/
#carehome .genre h2::after{
	content: "CARE HOME";
}

/*ケアホーム タイトル 見出し*/
#carehome .title .txtBox h3{
	color: #1a1a1a;
	border-bottom: 1px solid #1a1a1a;
}

/*ケアホーム 小見出し*/
#carehome .title .txtBox h4{
	color: #1a1a1a;
}

/*ケアホーム 見出し*/
#carehome .leftBox h3{
	color: #1a1a1a;
}

/*ケアホーム 本文*/
#carehome .leftBox .txt{
	color: #1a1a1a;
}

/*------------------------------
関連リンク設定
------------------------------*/

/*関連リンク全体*/
#link{
	background: #333;
}

/*関連リンク 見出し*/
#link h2{
	color: #fff;
}

/*関連リンク 見出し 英語*/
#link h2::after{
	content: "RELATED LINKS";
}

/*関連リンク バナー*/
#link .bnr{
	margin: 60px auto 0;
	width: 620px;
}

/*1100px以下の場合*/
@media screen and (max-width:1100px){

	/*------------------------------
	共通設定
	------------------------------*/

	/*container left,right共通*/
	.container .leftBox,
	.container .rightBox{
		width: calc(50% - 25px);
	}

	/*container left 見出し*/
	.container .leftBox h3{
		font-size: 2rem;
	}

	/*left 写真*/
	.container .leftBox .photo{
		margin: 40px 0 0 0;
	}

	/*タイトル 見出し*/
	.title .txtBox h3{
		padding: 0 0 20px 0;
		font-size: 2.6rem;
	}

	/*タイトル 小見出し*/
	.title .txtBox h4{
		margin: 20px 0 0 0;
		font-size: 1.8rem;
	}

	/*ジャンル*/
	.genre{
		width: 250px;
	}

	/*本文*/
	.txt{
		margin: 20px 0 0 0;
	}

	/*------------------------------
	FEATURES設定
	------------------------------*/

	/*FEATURES 本文*/
	#features .inner .txt{
		margin: 40px 0 0 0;
		color: #fff;
	}

	/*コンテンツナビゲーション*/
	.contentNav{
		margin: 50px auto 0;
	}

	/*------------------------------
	医療施設設定
	------------------------------*/

	/*5つのプラス*/
	.fiveplus {
		margin: 100px auto 0;
		gap: 0;
	}

	/*5つのプラス 写真*/
	.fiveplus .photo{
		width: calc(50% - 15px);
	}

	/*5つのプラス txtBox*/
	.fiveplus .txtBox{
		width: calc(50% - 15px);
	}

	/*5つのプラス 見出し*/
	.fiveplus .txtBox h4{
		font-size: 2.2rem;
	}

	/*5つのプラス リスト全体*/
	.fiveplus .txtBox ul{
		margin: 30px 0 0 0;
		gap: 20px;
	}

	/*5つのプラス リスト*/
	.fiveplus .txtBox ul li{
		max-width: calc(50% - 10px);
	}

	/*5つのプラス のタイトル*/
	.fiveplus .txtBox h5{
		padding: 0 0 10px 0;
		font-size: 1.6rem;
	}

	/*5つのプラス 本文*/
	.fiveplus .txtBox .txt{
		margin: 10px 0 0 0;
		line-height: 1.8;
	}

	/*5つのプラス 説明*/
	.explanation{
		margin: 100px 0 0 0;
	}

	/*------------------------------
	オーナー向けサービス設定
	------------------------------*/

	/*サブリース*/
	.lease{
		margin: 40px 0 0 0;
	}

	/*サブリース、土地探し photo共通*/
	.lease .photo,
	.search .photoBox{
		padding: 30px;
		width: 50%;
	}

	/*サブリース、土地探し txtBox共通*/
	.lease .txtBox,
	.search .txtBox{
		padding: 30px;
		width: 50%;
	}

	/*サブリース、土地探し 見出し共通*/
	.lease .txtBox h3,
	.search .txtBox h3{
		font-size: 2.6rem;
	}

	/*サブリース、土地探し 見出し 小文字共通*/
	.lease .txtBox h3 span,
	.search .txtBox h3 span{
		font-size: 1.6rem;
	}

	/*サブリース デメリット*/
	.lease .txtBox dl{
		margin: 15px 0 0 0;
	}

	/*土地探し*/
	.search{
		margin: 60px 0 0 0;
	}


			

}


/*960px以下の場合*/
@media screen and (max-width:960px){

	/*------------------------------
	共通設定
	------------------------------*/

	/*container left,right共通*/
	.container .leftBox,
	.container .rightBox{
		margin: 0 auto;
		width: 600px;
	}

	.container .rightBox{
		margin: 30px auto 0;
		gap: 30px;
	}

	/*タイトル*/
	.title{
		align-items: start;
	}


	/*ジャンル*/
	.genre{
		width: 200px;
	}

	/*タイトル 本文*/
	.title .txtBox{
		width: calc(100% - 200px - 60px);
	}

	/*------------------------------
	FEATURES設定
	------------------------------*/

	/*FEATURES中身*/
	#features .inner{
		width: calc(100% - 80px);
	}

	/*コンテンツナビゲーション*/
	.contentNav{
		width: 100%;
	}

	/*コンテンツナビゲーション中身*/
	.contentNav ul{
		justify-content: space-between;
		gap: 0;
	}

	/*コンテンツナビゲーション リスト*/
	.contentNav ul li{
		width: calc(50% - 5px);
		height: 50px;
	}

	/*コンテンツナビゲーション リンク*/
	.contentNav ul li a{
		font-size: 1.6rem;
	}

	/*------------------------------
	医療施設設定
	------------------------------*/

	/*5つのプラス*/
	.fiveplus{
		width: 520px;
	}

	/*5つのプラス 写真*/
	.fiveplus .photo{
		width: 100%;
	}

	/*5つのプラス 見出し*/
	.fiveplus .txtBox h4{
		text-align: center;
	}

	/*5つのプラス txtBox*/
	.fiveplus .txtBox{
		margin: 30px 0 0 0;
		width: 100%;
	}

	/*5つのプラス リスト全体*/
	.fiveplus .txtBox ul{
		gap: 30px;
	}

	/*5つのプラス リスト*/
	.fiveplus .txtBox ul li{
		max-width: calc(50% - 15px);
	}

	/*------------------------------
	オーナー向けサービス設定
	------------------------------*/

	/*サブリース*/
	.lease{
		margin: 40px auto 0;
		flex-direction: column-reverse;
		width: 520px;
	}

	/*サブリース、土地探し photo共通*/
	.lease .photo,
	.search .photoBox{
		width: 100%;
	}

	/*サブリース、土地探し txtBox共通*/
	.lease .txtBox,
	.search .txtBox{
		width: 100%;
	}

	/*土地探し*/
	.search{
		margin: 40px auto 0;
		flex-direction: column-reverse;
		width: 520px;
	}

	/*------------------------------
	関連リンク設定
	------------------------------*/

	/*関連リンク バナー*/
	#link .bnr{
		margin: 40px auto 0;
		width: 400px;
	}

	

}

/*768px以下の場合*/
@media screen and (max-width:768px){

	/*------------------------------
	共通設定
	------------------------------*/

	.container .rightBox{
		margin: 20px auto 0;
		gap: 20px;
	}

	/*タイトル 見出し*/
	.title .txtBox h3{
		font-size: 2rem;
	}

	/*タイトル 小見出し*/
	.title .txtBox h4{
		margin: 25px 0 0 0;
		font-size: 1.6rem;
		line-height: 1.6;
	}

	/*ジャンル*/
	.genre{
		width: 100%;
		aspect-ratio: 3 / 1;
	}

	/*本文*/
	.txt{
		margin: 20px 0 0 0;
		line-height: 1.8;
	}

	/*タイトル*/
	.title{
		flex-direction: column;
	}

	/*タイトル 本文*/
	.title .txtBox{
		margin: 30px 0 0 0;
		width: 100%;
	}


}

/*600px以下の場合*/
@media screen and (max-width:600px){

	/*------------------------------
	FEATURES設定
	------------------------------*/

	/*コンテンツナビゲーション*/
	.contentNav{
		margin: 20px 0 0 0 ;
	}

	/*------------------------------
	医療施設設定
	------------------------------*/

	/*5つのプラス*/
	.fiveplus{
		margin: 40px auto 0;
		width: 100%;
	}

	/*5つのプラス 見出し*/
	.fiveplus .txtBox h4{
		font-size: 2rem;
		text-align: justify;
	}

	/*5つのプラス リスト全体*/
	.fiveplus .txtBox ul{
		gap: 25px;
	}

	/*5つのプラス リスト*/
	.fiveplus .txtBox ul li{
		max-width: 100%;
	}

	/*5つのプラス 説明*/
	.explanation{
		margin: 40px 0 0 0;
	}

	/*------------------------------
	オーナー向けサービス設定
	------------------------------*/

	/*サブリース*/
	.lease{
		width: 100%;
	}

	/*土地探し*/
	.search{
		width: 100%;
	}

	/*------------------------------
	関連リンク設定
	------------------------------*/

	/*関連リンク バナー*/
	#link .bnr{
		margin: 30px auto 0;
		width: 300px;
	}

}

/*430px以下の場合*/
@media screen and (max-width:430px){

	/*ページビジュアル*/
	#pageVisual{
		background: url(../img/clinic/bg_main_sp.webp) no-repeat center center / cover;
	}

	/*------------------------------
	共通設定
	------------------------------*/

	/*本文*/
	.txt{
		margin: 15px 0 0 0;
	}

	/*ジャンル*/
	.genre{
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	/*タイトル 見出し*/
	.title .txtBox h3{
		padding: 0 0 15px 0;
	}

	/*タイトル 小見出し*/
	.title .txtBox h4{
		margin: 15px 0 0 0;
	}


	/*------------------------------
	FEATURES設定
	------------------------------*/

	/*FEATURES中身*/
	#features .inner{
		width: calc(100% - 40px);
	}

	/*------------------------------
	医療施設設定
	------------------------------*/

	/*医療施設全体*/
	#clinic{
		padding: 60px 0 0;
	}

	/*------------------------------
	オーナー様向けサービス設定
	------------------------------*/

	/*サブリース、土地探し 見出し共通*/
	.lease .txtBox h3,
	.search .txtBox h3{
		padding: 0 0 10px 0;
	}

	/*サブリース、土地探し 本文共通*/
	.lease .txtBox .txt,
	.search .txtBox .txt{
		margin: 10px 0 0 0;
	}


}