@charset "utf-8";

/*トップページに設置のCSS  --*/


/*リセットCSS（sanitize.css）の読み込み
https://unpkg.com/sanitize.css　（@13.0.0　をダウンロードして設置）
---------------------------------------------------------------------------*/
/* @import url("https://unpkg.com/sanitize.css");*/
@import url("sanitize.css");

/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("header.css");
@import url("footer.css");
@import url("table.css");
@import url("cal.css");
@import url("doctor_surgeon.css");
@import url("fullcont.css");


/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400..800&family=Noto+Serif+JP:wght@400..800&display=swap');

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");



/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	height: 100%;
}

body {
	/*font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;*/	/*フォント種類（ゴシック）*/
	font-family: "Noto Sans JP","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #000;		/*文字色*/
	font-weight: 400;
	line-height: 2;		/*行間*/
	animation: opa1 0.3s 0.5s both;	/*0.5秒の間だけ非表示にし、その後0.3秒かけてフェードイン表示。上部のメインメニューのデフォルトが一瞬見えてしまうのを回避する為の応急措置です。*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
section + section {
	margin-top: 3rem;
}

/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	display: flex;	/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	max-width: 2400px;	/*サイトの最大幅。これ以上広がらない。*/
	margin: 0 auto;
}


/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	padding: 0 0 100px;	/*上、左右、下への余白。下の余白は、ここのbackgroundの画像読み込み分に、適当な余白をプラスして指定しています。*/
}
/*画面幅900px以上の追加指定*/
	@media screen and (min-width:1280px) {
		.wi_80{width:80%;
		margin:0 auto;}
}

/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	margin: 2rem 0;	/*ブロックの外側に空けるスペース*/
	padding:0 0.5rem;
	
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:1280px) {
		
	main {
	margin: 2rem 20rem;	/*ブロックの外側に空けるスペース*/
}

	/*2カラムで使う為の指定*/
	main.c2 {
		display: flex;	/*flexボックスを使う指定*/
		justify-content: space-between;	/*並びかたの種類の指定*/
	}
	
	/*2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）*/
	main.c2 .main {
		width: calc(100% - 310px);	/*幅。ここの280pxの数字は下の.subの幅(230px)と、左右ブロックの間の余白(30px)を追加したものです。*/
		order: 1;
	}
	
	/*2カラムの中にある.sub要素*/
	main.c2 .sub {
		width: 280px;	/*幅*/
	}

	}/*画面幅900px以上の追加指定ここまで*/


/*mainブロック内のh2タグ*/
main h2 {
	margin: 0 0 1rem;		/*h2の外側にとるスペース。上、左右、下への順番。*/
	padding: 1rem;		/*左側に１文字分の余白を作る*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
   	color: #c0b076;			/*文字色*/
	font-size:22px;
	font-weight:600;
	line-height: 1.4;
	text-align: center;
}

/*h3タグ*/
main h3 {
	margin: 4em 0 2rem;				/*h2の外側にとるスペース。上、左右、下への順番。*/
	letter-spacing: 0.1em;			/*文字間隔を少しだけ広くとる*/
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	font-size:20px !important;
	font-weight:500;
}

/*h3の左側のアクセントライン*/
main h3::before {
	content: "";
	border-left: 3px solid #d8e2e7;		/*左側のアクセントラインの幅、線種、色*/
	padding-right: calc(1rem - 3px);	/*右側への余白。上の3pxの線幅を変更する場合は、ここの3pxも合わせて変更して下さい*/
}

/*h3の左側のアクセントライン*/
main .cont-page h3::before {
	content: "";
	border-left: 3px solid #d8e2e7;		/*左側のアクセントラインの幅、線種、色*/
	padding-right: calc(1rem - 3px);	/*右側への余白。上の3pxの線幅を変更する場合は、ここの3pxも合わせて変更して下さい*/
}


/*h4タグ*/
main h4 {
	margin: 0 1rem 1rem;	/*h4の外側にとるスペース。上、左右、下への順番。*/
}

/*pタグ*/
main p {
	margin: 0 1rem 2rem;	/*pの外側にとるスペース。上、左右、下への順番。*/
}

/*微調整*/
main p + p {
	margin-top: -1rem;	/*段落が続いた場合に、少し上に詰める。*/
}

/*.listブロック共通
---------------------------------------------------------------------------*/
.list {
	position: relative;	/*子要素のアイコンを絶対配置する為の設定*/
}

/*ボックス内のアイコン*/
.list .list-icon {
	font-size: 0.6rem;		/*文字サイズ*/
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 50%;		/*角丸のサイズ。円形になります。*/
	text-align: center;		/*テキストをセンタリング*/
	position: absolute;		/*親のブロックのrelative（この場合は.list）に対して絶対配置する*/
	left: -10px;			/*listブロックに対して左からの配置場所の指定*/
	top: -10px;				/*listブロックに対して上からの配置場所の指定*/
}

/*figure画像*/
.list figure {
	margin-bottom: 2rem;	/*下に空けるスペース。２文字分。*/
}


/*３列タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-grid .list {
	margin-bottom: 30px;	/*ボックス同士の上下間に空けるスペース*/
	padding: 15px;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
	border:1px #eee solid;
}

/*dl（下のdtとddを囲むブロック）*/
.list-grid .list dl {
	height: 10em;	/*高さ*/
	overflow: hiden;	/*高さを超えるコンテンツである場合に、自動でスクロールバーを出す*/
}

/*dt（タイトル、日付が入っている所）*/
.list-grid .list dl dt {
	color: #666;		/*文字色*/
	font-weight: 500;	/*太字にする*/
}

/*dtの前に矢印*/
.list-grid .list dt::before{
	left: 3px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #ccc;
	border-right: 2px solid #ccc;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.arrow{
	position: relative;
	display: block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

/*dd（サンプルテキストが入っている所）*/
.list-grid .list dl dd {
	margin-bottom: 0.5em;	/*下に空けるスペース*/
}

/*ボックス内のh4タグ*/
.list-grid .list h4 {
	margin: 0;
	padding: 1rem;	/*余白。１文字分。*/
}

/*ボックス内のh4タグ内のiタグ（アイコンの事）*/
.list-grid .list h4 i {
	transform: scale(1.5);	/*デフォルトの1.5倍に*/
	margin-right: 1rem;		/*右側に空けるスペース。テキストとアイコンの隙間部分です。*/
}

/*タイトルの背景色バリエーション（共通）*/
.bg-color0, .bg-color1, .bg-color2, .bg-color3, .bg-color4, .bg-color5, .bg-color6 {
	color: #3f3f3f;	/*文字色*/
	margin-bottom: 1rem !important;	/*下に空けるスペース*/
}
.bg-color0 a, .bg-color1 a, .bg-color2 a, .bg-color3 a, .bg-color4 a, .bg-color5 a, .bg-color6 a {
	display: block;
	color: inherit;
}

/*bg-color0への追加指定*/
.bg-color0 {
	background: #13baa8;	/*背景色*/
}
/*bg-color1への追加指定*/
.bg-color1 {
 background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);
 background-blend-mode: screen;/*背景色*/
}
/*bg-color2への追加指定*/
.bg-color2 {
 background-image: radial-gradient(73% 147%, #cfd9df 59%, #e2ebf0 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);
 background-blend-mode: screen;/*背景色*/
}
/*bg-color3への追加指定*/
.bg-color3 {
	background-image: linear-gradient(to top, #cfd9df 20%, #e2ebf0 100%);	/*背景色*/
}
/*bg-color4への追加指定*/
.bg-color4 {
	background-image: linear-gradient(100deg, #fdfbfb 0%, #ebedee 90%);	/*背景色*/	/*背景色*/
}
/*bg-color5への追加指定*/
.bg-color5 {
	background: #1b7a1e;	/*背景色*/
}
/*bg-color6への追加指定*/
.bg-color6 {
	background: #7a3a1b;	/*背景色*/
}

/*ボックス内のpタグ*/
.list-grid .list p {
	margin: 0;
}

/*ボックス内のfigure画像*/
.list-grid .list figure {
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*listブロック全体を囲むブロック*/
	.list-grid {
		display: flex;		/*flexボックスを使う指定*/
		flex-wrap: wrap;	/*折り返す指定*/
	}

	/*１個あたりのボックス設定*/
	.list-grid .list {
		width: 32%;			/*幅。３列になります。*/
		margin-right: 2%;	/*右側へのマージン。ボックス同士の左右の余白です。*/
	}
	
	/*1カラムにしたい場合*/
	.list-grid.c1 .list {
		width: 100%;
		margin-right: 0;
	}
	/*1カラムにしたい場合のdl（dtとddを囲むブロック）*/
	.list-grid.c1 .list dl {
		height: auto;
	}

	/*3の倍数目のボックスの右側のマージンをなくす*/
	.list-grid .list:nth-of-type(3n) {
		margin-right: 0;
	}

	/*ボックス内のtextブロック*/
	.list-grid .list .text {
		flex: 1;
	}

	}/*画面幅900px以上の追加指定ここまで*/




/*トップ紹介レイアウト
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {
.top_greeting{margin: 2rem 15rem;
text-align:center;
}
}

/*list-normal3-parts　20250425追加
---------------------------------------------------------------------------*/
.list-normal3-parts .list-parts * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-normal3-parts .list-parts {
	position: relative;
	overflow: hidden;
	padding: 1.5rem;		/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	color: #555;			/*文字色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	margin-bottom: 2rem;	/*ボックス同士の余白*/
}

/*ボックス内のfigure画像*/
.list-normal3-parts .list-parts figure {
	margin-bottom: 0.5rem;	/*見出しの下に0.5文字分のスペースを空ける*/
}

/*ボックス内のh4見出し*/
.list-normal3-parts .list-parts h4 {
	font-size: 1.3rem;	/*文字サイズ130%*/
	margin-bottom: 0.5rem;	/*見出しの下に0.5文字分のスペースを空ける*/
}

/*ボックス内のp要素*/
.list-normal3-parts .list-parts p {
	font-size: 0.9rem;	/*文字サイズを90%*/
	line-height: 1.6;	/*行間を少し狭く*/
}

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

	/*ボックス１個あたり*/
	.list-normal3-parts .list-parts {
		display: flex;	/*横並びにする*/
		gap: 1.5rem;	/*左の画像と右のテキストとの間のマージン的な余白*/
	}
	
	/*ボックス内のfigure画像*/
	.list-normal3-parts .list-parts figure {
		margin-bottom: 0;	/*見出しの下のマージンをリセット*/
		width: 30%;			/*画像の幅*/
	}

	/*テキストを囲むブロック*/
	.list-normal3-parts .list-parts .text-parts {
		flex: 1;
	}

	}/*追加指定ここまで*/


/*アイコン
---------------------------------------------------------------------------*/
/*共通*/
.list-normal3-parts .icon-bg1-parts,
.list-normal3-parts .icon-bg2-parts {
	overflow: hidden;
	position: absolute;
	left: 0px;		/*左からの配置場所*/
	top: 0px;		/*上からの配置場所*/
	font-size: 0.7rem;	/*文字サイズ。70%*/
	width: 10rem;		/*幅。10文字分*/
	padding-top: 2rem;	/*テキストの上にとる余白。2文字分。*/
	text-align: center;	/*テキストをセンタリング*/
	transform: rotate(-45deg) translate(-2.4rem,-3rem);	/*反時計回りに45度回転、X軸に-2.4文字分、Y軸に-3文字分移動。*/
}

/*icon-bg1-parts（サンプルだと「NEW」）*/
.list-normal3-parts .icon-bg1-parts {
	background: #c0b076;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*icon-bg2-parts（サンプルだと「UP」）*/
.list-normal3-parts .icon-bg2-parts {
	background: #7fcccd;	/*背景色*/
	color: #fff;			/*文字色*/
}