@charset "UTF-8";

#home_head { margin: 0px auto; padding: 0px; width: 100%; height: 1100px; background: #fff url(../i/home_head_back.jpg) top center repeat-x; position: relative; }

/* Home head image */
/* opacity秒数は、FadeTimeと同じ時間に設定 */
/* transform秒数は、FadeTimeとIntarvalTime＋0.5秒 */
#home_head_img { margin: 0px; padding: 0px; width: 100%; height: 100%; position: relative; }
#slide_wrap { margin: 0px; padding: 0px; width: 100%; height: 100%; position: relative; overflow: hidden; }
#slide_wrap .slide_item { opacity: 0; transform: scale(1); transition: opacity 3s linear, transform 15.5s linear; position: relative; }
.slide_item img { margin: 0px; padding: 0px; width: 100%; height: 100%; }
#slide_wrap .slide_item:not(:first-child) { position: absolute; top: 0; left: 0; }
#slide_wrap .slide_item.show_ { opacity: 1; }
#slide_wrap .slide_item.zoom_ { transform: scale(1.1); }
#slide_wrap .slide_item img { display: block;}

/* Header：キャッチコピー */
#home_head_str { margin: 0px; padding: 0px; width: 660px; position: absolute; left: 100px; top: 250px; z-index: 15; text-shadow: 0 0 7px #fff;}
#home_head_str * { font-family: 'Noto Serif JP', serif; /*letter-spacing: -0.05rem;*/ }
#home_head_str dt { margin: 0px; padding: 0px; font-size: 50px; }
#home_head_str dd { margin: 0px; padding: 0px; font-size: 31px; line-height: 2.2em;}

/* 診療内容について */
#medical_detail { margin: 0px auto; padding: 45px 0px 25px 0px; width: 1080px; background: rgba(255,255,255,0.7); border: solid 10px rgba(163,204,36,0.7); position: absolute; left: 0px; right: 0px; top: 548px; z-index: 10; }
#medical_detail div { margin: 0px; padding: 0px; width: 100%; color: #56a03c; font-size: 34px; font-weight: 600; letter-spacing: 0.2rem; text-align: center; }
#medical_detail hr { width: 144px; border-top: solid 4px #56a03c; }
#medical_detail ul { margin: 23px 40px 0px 40px; padding: 0px; min-height: 380px; background: url(../i/human_figure.png) top center no-repeat; display: flex; justify-content: space-between; }
#medical_detail li { margin: 0px; padding: 0px; width: 377px; }
#medical_detail dl { margin: 0px; padding: 0px; width: 100%; }
#medical_detail dt { margin: 0px; padding: 0px; width: 100%; height: 55px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
#medical_detail dt:hover { opacity: 0.7; }
#b_md1 { background: url(../i/b_md_base1.png) center center no-repeat; }
#b_md2 { background: url(../i/b_md_base2.png) center center no-repeat; }
#b_md3 { background: url(../i/b_md_base3.png) center center no-repeat; }
#b_md4 { background: url(../i/b_md_base4.png) center center no-repeat; }
#medical_detail dd { margin: 0px; padding: 7px 0px 0px 0px; width: 100%; height: 134px; color: #444; }
.human_figure { display: none; }

/* 先進医療 */
#advanced { width: 100%; min-width: 1200px; height: 359px; background: url(../i/advanced.jpg) center center no-repeat; background-size: cover; }
#advanced div { margin: 0px 0px 52px 0px; padding: 50px 0px 0px 0px; width: 100%; text-align: center; }
#advanced span { margin: 0px; padding: 0px 0px 20px 0px; width: 100%; color: #fff; font-size: 34px; border-bottom: solid 3px #fff; }
#advanced dl { margin: 0px auto; padding: 0px; width: 842px; display: flex; justify-content: space-between; }
#advanced dl:not(:first-child) { margin: 20px auto 0px auto; }
#advanced dt { margin: 0px; padding: 0px; width: 396px; text-align: center; }
#advanced dd { margin: 0px; padding: 0px; width: 396px; text-align: center; }
#advanced a { margin: 0px; padding: 15px 0px; width: 100%; color: #fff; font-size: 20px; font-weight: 600; line-height: 120%; text-decoration: none; background: url(../i/b_advanced_base.jpg) center center no-repeat; display: block; border-radius: 5px; transition: all 0.3s; }
#advanced a:hover { text-decoration: none; opacity: 0.7; }

/* Topics */
#topics_base{ margin: 0px auto; padding: 0px; width: 1000px; }
#topics_base p { margin: 0px; padding: 0px 0px 3px 0px; font-size: 24px; font-weight: 600; }
#topics_win { margin: 0px; padding: 0px; width: 100%; height: 140px; border-top: solid 2px #56a03c; overflow-x: hidden; overflow-y: auto; } 
#topics_win ul { margin: 0px; padding: 0px; width: 100%; }
#topics_win li { margin: 0px; padding: 10px 0px 10px 56px; width: 100%; box-sizing: border-box; }
#topics_win li:nth-child(odd) { background: #f7faf1; }
#topics_win li span { color: #185d00; }
#topics_win a { color: #444; line-height: 240%; transition: all 0.3s; text-decoration: none;}
#topics_win a[href$=".pdf"]:after { content: url(../i/icon_pdf.png); vertical-align: middle; margin: 0 5px; }
#topics_win a:hover { opacity: 0.7;}

/* About us */
#about { margin: 0px; padding: 0px; width: 100%; min-width: 1200px; display: flex; }
#about dt { margin: 0px; padding: 0px; width: 50%; background: url(../i/about_img.jpg) top left no-repeat; background-size: cover; }
#about dt img { width: 100%; height: auto; display: none; }
#about dd { margin: 0px; padding: 63px 0px 30px 0px; width: 50%; text-align: center; background: #f7faf1; }
#about dd span { color: #56a03c; font-size: 34px; letter-spacing: 0.1em; }
#about dd hr { margin: 10px auto 30px auto; padding: 0px; width: 17%; border-bottom: solid 2px #56a03c; }
#about dd div { margin: 0px auto; padding: 0px 0 30px 0; width: 520px; color: #444; line-height: 180%; text-align: left; }
#about dd div p{ color: #56a03c; font-weight: bold; font-size: 18px; text-align: center; }

/* センター長ご挨拶 */
#d_message { margin: 0px; padding: 0px; width: 100%; min-width: 1200px; display: flex; }
#d_message dt { margin: 0px; padding: 63px 0px 0px 0px; width: 50%; text-align: center; background: #f7faf1; }
#d_message dt span { color: #56a03c; font-size: 34px; letter-spacing: 0.1em; }
#d_message dt hr { margin: 10px auto 30px auto; padding: 0px; width: 17%; border-bottom: solid 2px #56a03c; }
#d_message dt ul { margin: 0px auto; padding: 0px; width: 520px; color: #444; }
#d_message dt li:first-child { padding: 0px; line-height: 180%; text-align: left; }
#d_message dt li:nth-child(2) { padding: 30px 0px 0px 0px; line-height: 140%; text-align: right; }
#d_message dt li:nth-child(3) { padding: 20px 0px 0px 0px; line-height: 110%; text-align: right; }
#d_message dt li:last-child { padding: 10px 0px 50px 0px; font-size: 25px; font-weight: 600; line-height: 140%; text-align: right; }
#d_message dd { margin: 0px; padding: 0px; width: 50%; background: url(../i/director_photo.jpg) top left; background-size: cover; }
#d_message dd img { width: 100%; height: auto; display: none; }

/* スタッフ紹介 */
#staff { margin: 0px; padding: 0px; width: 100%; min-width: 1200px; height: 360px; background: url(../i/staff_img.jpg) center center no-repeat; background-size: cover; display: flex; align-items: center; }
.staff_img_mob { display: none; }
#staff div { margin: 0px auto; padding: 0px; width: 1200px; min-width: 1200px; }
#staff a { margin: 0px 0px 0px 90px; padding: 0px; display: block; transition: all 0.3s; }
#staff a:hover { opacity: 0.7; }

/* ------------------------------------------ */
/* スマホ */
/* ------------------------------------------ */
@media all and (max-width:799px){
	#home_head { padding: 0px 0px 50px 0px; width: 100%; background-size: contain; }
	
	#slide_wrap .slide_item { left: -30%; }
	.slide_item img { width: 130%; height: 130%; }
	
	/* Header：キャッチコピー */
	#home_head_str { width: 85%; position: absolute; left: 5%; top: 45%; }
	#home_head_str dt { font-size: 8vw; }
	#home_head_str dd { font-size: 3.8vw; }
	
	/* 診療内容について */
	#medical_detail { margin: 0px auto; padding: 30px 0px 15px 0px; width: 94%; border: solid 4px rgba(163,204,36,0.5); top: 70%; }
	#medical_detail hr { width: 15%; }
	#medical_detail div { font-size: 7vw; }
	#medical_detail ul { margin: 0px auto; padding: 0px; width: 90%; min-height: auto; background: url(); display: block; }
	#medical_detail li { width: 100%; }
	#medical_detail dl { margin: 0px; padding: 30px 0px 0px 0px; width: 100%; }
	#b_md1 { background-size: contain; }
	#b_md2 { background-size: contain; }
	#b_md3 { background-size: contain; }
	#b_md4 { background-size: contain; }
	#medical_detail dt { font-size: 4vw; }
	#medical_detail dd { padding: 10px 0px 0px 0px; width: 100%; height: auto; }
	.human_figure { margin: 25px auto 0px auto; padding: 0px; width: 25%; height: auto; display: block; }
	
	/* 先進医療 */
	#advanced { margin-top: 10px; min-width: 100%; padding: 30px 0px; height: auto; background-size: cover; }
	#advanced div { padding: 0px 0px 0px 0px; }
	#advanced span { font-size: 7vw; }
	#advanced dl { margin: 0px; padding: 0px; width: 96%; display: block; }
	#advanced dl:not(:first-child) { margin: 20px auto; }
	#advanced dt { margin: 0px; padding: 0px; width: 100%; }
	#advanced dd { margin: 20px 0px 0px 0px; padding: 0px; width: 100%; }
	#advanced a { padding: 20px 0px; font-size: 4vw; line-height: 120%; background-size: cover; border-radius: 5px; }
	
	/* Topics */
	#topics { margin: 40px auto; padding: 0px; width: 96%; }
	#topics_base{ width: 96%; }
	#topics_base p { font-size: 6vw; }
	#topics_win { height: 250px; } 
	#topics_win li { margin: 0px; padding: 15px 10px 15px 10px; width: 100%; box-sizing: border-box; }
	#topics_win li span { margin: 0px; padding: 0px; display: block; }
	#topics_win a { color: #444; line-height: 120%; }
	
	/* About us */
	#about { min-width: 100%; display: block; }
	#about dt { width: 100%; background: none; }
	#about dt img { display: block; }
	#about dd { padding: 20px 0px 0px 0px; width: 100%; }
	#about dd span { font-size: 6vw; }
	#about dd div { padding: 0px 0px 50px 0px; width: 90%; line-height: 180%; }
	
	/* センター長ご挨拶 */
	#d_message { min-width: 100%; flex-wrap: wrap-reverse; }
	#d_message dt { padding: 30px 0px; width: 100%; }
	#d_message dt span { font-size: 6vw; }
	#d_message dt ul { width: 90%; }
	#d_message dt li:first-child { line-height: 180%;  }
	#d_message dt li:nth-child(2) {  }
	#d_message dt li:nth-child(3) { }
	#d_message dt li:last-child { font-size: 5vw; }
	#d_message dd { width: 100%; background: none; }
	#d_message dd img { display: block; }
	
	/* スタッフ紹介 */
	#staff { padding: 0px 0px 0px 0px; width: 100%; min-width: 100%; height: 100%; background: url(); display: block; }
	.staff_img_mob { margin: 0px; padding: 0px; display: block; }
	#staff div { width: 100%; min-width: 100%; }
	#staff a { margin: 0px auto 30px auto; padding: 0px; width: 60%; display: block; }
	#staff img { margin: 0px; padding: 0px; width: 100%; height: auto; }
}