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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho:wght@400;500;600;700&display=swap');

*{
	margin: 0;
	padding: 0;
	word-break: break-all;
	box-sizing: border-box;
}

body{
	font-family: 'Noto Sans JP', sans-serif;
	color: #333;
}

.wrapper{
	max-width: 1120px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.sp{
	display: none!important;
}




/*🔲🔲🔲🔲🔲🔲🔲🔲 TOP page TOP画像 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/



#top_bg{
	background-image: url("../images/top_bg.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 550px;
	padding-top: 60px;
	margin-bottom: 80px;
}

#top_bg h2{
	font-family: "Shippori Mincho", serif;
	font-weight: 500;
	color: #fff;
	font-size: 60px;
	margin-bottom: 40px;
}

#top_left{
	background-color: rgba(65,124,217,0.9);
	padding: 20px;
	display: inline-block;
}

#top_left p{
	color: #fff;
}

#top_right{
	background-color: rgba(255,255,255,0.9);
	padding: 30px;
	border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
	padding-right: calc(50vw - 50%)!important;
	margin-right: calc(50% - 50vw);
	overflow-x: hidden;
}

#top_right h3{
	font-size: 21px;
	font-weight: 600;
	margin-bottom: 20px;
}

.top_right_block{
	margin-bottom: 20px;
}

.top_right_block h4{
	color: #009eb8;
	font-size: 21px;
	font-weight: 600;
}

.top_right_block h4 img{
	width: 28px;
	margin-right: 5px;
}

.top_right_block p span{
	font-size: 14px;
}



#top_news_btn{
	background-color: #009eb8;
	text-align: center;
	display: inline-block;
	border-radius: 5px;
	font-size: 20px;
	font-weight: 600;
}

#top_news_btn a{
	color: #fff;
	padding: 8px 50px;
	display: block;
}

#top_tel a{
	color: #00a63c;
	font-weight: 700;
}

#top_tel span{
	font-size: 28px!important;
	font-weight: 700;
}

.flex_bet_start .top_right_block:first-child{
	margin-right: 20px;
}




/* トップページ ニュース部分タブ */

.news_tab_menu li{
	display: inline-block;
	font-weight: 600;
}

/*tabの形状*/
.news_tab_menu li a{
	color: #333;
	border-radius: 5px;
	padding: 5px 20px;
	display: inline-block;
}

#news_tab_1{
	background: rgb(216,249,160);
	background: linear-gradient(90deg, rgba(216,249,160,1) 0%, rgba(158,231,59,1) 50%, rgba(186,241,108,1) 100%);
}

#news_tab_2{
	background: rgb(236,247,249);
	background: linear-gradient(90deg, rgba(236,247,249,1) 0%, rgba(183,223,231,1) 50%, rgba(211,236,241,1) 100%);
}

.news_tab_btn{
	text-align: center;
	margin-right: calc(100vw / 50);
	display: block;
	padding: 10px;
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	padding-bottom: 20px;
	margin-bottom: -10px;
}

.news_tab_btn a{
	font-weight: 500!important;
	font-size: 18px!important;
}

.news_tab_btn img{
	width: 30px;
	margin-right: 5px;
	margin-top: -3px;
}

/*liにactiveクラスがついた時の形状*/
.news_tab_menu li.active{
	background-color: #eee;
	color: #fff;
}

/*エリアの表示非表示と形状*/
.news_tab_area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	margin-bottom: 80px;
}

.news_tab_area .wrapper{
	background-color: #EEEEEE;
	padding: 30px 60px;
	border-radius: 10px;
}

.news_tab_area dl{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.news_tab_area dt{
	width: 20%;
	padding-bottom: 15px;
	border-bottom: solid 1px #BEBFBA;
	margin-bottom: 15px;
}

.news_tab_area dd{
	width: 80%;
	padding-bottom: 15px;
	border-bottom: solid 1px #BEBFBA;
	margin-bottom: 15px;
	position: relative;
}

/*areaにis-activeというクラスがついた時の形状*/
.news_tab_area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}




/*🔲🔲🔲🔲🔲🔲🔲🔲 トップページ主要メニュー8個 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

#top_main_menu_bg{
	background: rgb(205,234,202);
	background: linear-gradient(0deg, rgba(205,234,202,1) 0%, rgba(195,239,244,1) 60%, rgba(255,255,255,1) 100%);
	padding-top: 80px;
	padding-bottom: 50px;
	margin-bottom: 100px;
}

.top_main_menu{
	background-color: #fff;
	border-radius: 10px;
	width: 230px;
	text-align: center;
	position: relative;
	box-shadow: 3px 3px 5px -3px rgba(0, 0, 0, 0.3);
	margin-bottom: 40px;
	transition:all 0.3s;
}

.top_main_menu a{
	display: block;
	width: 100%;
	padding: 20px;
	padding-top: 30px;
}

.top_main_menu:hover{
	background-color: #e8f9ff;
}

.top_main_menu::before{
	content: url("../images/top_main_menu_deco.svg");
	width: 110px;
	top: -20px;
	left: calc(50% - 55px);
	position: absolute;
}

.top_main_menu::after{
	content: url("../images/icn_circle_arrow_blue.svg");
	width: 18px;
	height: 18px;
	bottom: 15px;
	right: 15px;
	position: absolute;
	transition:all 0.3s;
}

.top_main_menu:hover::after{
	transform: translate(5px,0px);
}

.top_main_menu img{
	width: 64px;
	margin-bottom: 10px;
}

.top_main_menu h2{
	color: #009eb8;
	font-size: 21px;
	font-weight: 700
}

.top_main_menu p{
	color: #8bc7a1;
	font-size: 15px;
}




/*🔲🔲🔲🔲🔲🔲🔲🔲 トップページ診療科部門一覧24個 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

.cd_list{
	background-color: #fff;
	width: 15%;
	border-radius: 10px;
	box-shadow: 3px 3px 5px -3px rgba(0, 0, 0, 0.3);
	margin-bottom: 20px;
	font-size: 14px;
	display: grid;
	align-items: center;
	height: 90px;
	overflow: hidden;
	position: relative;
}

.cd_list::after{
	content: url("../images/icn_circle_arrow_blue.svg");
	position: absolute;
	width: 18px;
	height: 18px;
	right: 15px;
	top: calc(50% - 9px);
	transition:all 0.3s;
}

.cd_list:hover::after{
	transform: translate(3px,0px);
}

.cd_list a{
	background-color: #fff;
	font-size: 14px;
	padding: 10px;
	color: #333;
	height: 100%;
	display: grid;
	align-items: center;
	transition:all .3s;
}

.cd_list a:hover{
	background-color: #e8f9ff;
	transition:all .3s;
}

#cd_list_bg{
	position: absolute;
	background-color: #f5f7f7;
	width: 100%;
	height: 400px;
	top: 130px;
	z-index: -1;
	padding-right: calc(50vw - 50%)!important;
	margin-right: calc(50% - 50vw);
	margin-left: 80px;
	overflow-x: hidden;
	border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
	box-sizing:content-box;
}




/*🔲🔲🔲🔲🔲🔲🔲🔲 トップページ4つのバナー 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

#top_banner_bg{
	background-color: #e3f6ee;
	padding-top: 60px;
	padding-bottom: 30px;
	margin-bottom: 100px;
}

.top_banner_block{
	border: solid 1px #00a63c;
	background-color: #fff;
	border-radius: 10px;
	width: 48%;
	margin-bottom: 20px;
	position: relative;
}

.top_banner_block::after{
	content: url("../images/icn_circle_arrow_green.svg");
	width: 24px;
	position: absolute;
	right: 20px;
	top: calc(50% - 12px);
	transition:all .3s;
}

.top_banner_block:hover::after{
	transform: translate(3px,0px);
}

.top_banner_block a{
	display: flex;
	align-items: center;
	padding: 20px;
	border-radius: 10px;
	transition:all .3s;
}

.top_banner_block a:hover{
	background-color: #e8f9ff;
	transition:all .3s;
}

.top_banner_block img{
	width: 80px;
	margin-right: 20px;
}

.top_banner_block h2{
	color: #00a63c;
	font-size: 21px;
	font-weight: 700;
}







/*🔲🔲🔲🔲🔲🔲🔲🔲 病院の紹介(about) 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

#about_main h2{
	text-align: center;
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 40px;
}




/*🔲🔲🔲🔲🔲🔲🔲🔲 院長挨拶(about_1) 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

#about_1_greet_left{
	width: 740px;
}

#about_1_greet_right{
	width: 280px;
}

ol li span{
	color: #009eb8;
	font-weight: 500;
	margin-right: 10px;
}



/*🔲🔲🔲🔲🔲🔲🔲🔲 病院概要・機能(about_2) 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

.gray_table{
	width: 100%;
	border-radius: 10px;
}

.gray_table th{
	background-color: #DFE7EE;
	width: 15%;
	padding: 15px;
}

.gray_table td{
	background-color: #fff;
	padding: 15px;
}

.about_2_td_box{
	width: 48%;
	margin-right: 4%;
	margin-bottom: 40px;
}

.about_2_td_box:last-child{
	margin-right: 0%;
}




/*🔲🔲🔲🔲🔲🔲🔲🔲 ご来院の皆さまへ(patient) 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

#corona_box{
	background-color: #FCE3DA;	
	padding: 20px 50px;
	margin-bottom: 60px;
}

#corona_box p{
	color: #E7312F;
	font-size: 21px;
	font-weight: 700;
	position: relative;
	padding-left: 60px;
}

#corona_box p::before{
	content: "";
	background-image: url("../images/icn_corona.svg");
	background-repeat: no-repeat;
	width: 48px;
	height: 48px;
	position: absolute;
	left: 0px;
}

#patient_block{
	border: solid 1px #009EB8;
	border-radius: 10px;
	padding: 40px 50px;
	margin-bottom: 100px;
}





/*🔲🔲🔲🔲🔲🔲🔲 医療関係の皆さまへ（related）　🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

#related_left{
	width: 600px;
}

#related_right{
	width: 280px;
}

#related_right p{
	text-align: center;
	font-size: 14px;
	line-height: 1.5!important;
	margin-top: 5px;
}

.tel_sentence,.fax_sentence{
	font-size: 18px;
	font-weight: 500;
	position: relative;
	padding-left: 35px;
	display:inline-block;
}

.tel_sentence::before{
	content: url("../images/icn_top_tel.svg");
	width: 28px;
	height: 28px;
	position: absolute;
	left: 0px;
	top: calc(50% - 14px);
}

.fax_sentence::before{
	content: url("../images/icn_fax.svg");
	width: 28px;
	height: 28px;
	position: absolute;
	left: 0px;
	top: calc(50% - 14px);
}

.tel_sentence a,.fax_sentence a{
	color: #00A63C;
	font-size: 36px;
	font-weight: 700;
	margin-left: 10px;
	line-height: 1.0!important;
	display: inline-block;
	margin-top: -20px;
	vertical-align: middle;
}

.tel_sentence span{
	color: #FF3333;
}

.icn_24px{
	width: 24px;
	margin-left: 8px;
	margin-top: -3px;
}

.no_border_table{
	border: none;
	margin-bottom: 40px;
}

.no_border_table th{
	border: none;
	font-weight: 500;
	text-align: left;
	padding: 10px;
}

.no_border_table td{
	border: none;
	padding: 10px;
}



/*🔲🔲🔲🔲🔲🔲🔲🔲 採用情報(recruit)　🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

.annotation{
	font-size: 14px;
}

#recruit_last_link{
	color: #333;
	margin-bottom: 100px;
	display: inline-block;
}

#recruit_last_link img{
	width: 28px;
	margin-left: 10px;
	margin-top: -3px;
}




/*🔲🔲🔲🔲🔲🔲🔲🔲 サイトマップ 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

.sitemap_box{
	width: 50%;
}

.sitemap_box ul{
	margin-bottom: 50px;
}

.sitemap_box li{
	text-indent: 2em;
	position: relative;
}

.sitemap_box li a{
	color: #333;
	text-indent: 1em;
	display: inline-block;
}

.sitemap_box li::before{
	content: url("../images/icn_sitemap_arrow.svg");
	width: 8px;
	height: 10px;
	position: absolute;
	left: 0px;
}

.snd_level{
	margin-bottom: 0px!important;
}

.snd_level li{
	text-indent: 3.5em;
}

.sitemap_box .no_arrow::before{
	content: none;
	width: 0px;
	height: 0px;
	position: static;
	left: 0px;
}




/*🔲🔲🔲🔲🔲🔲🔲🔲 コンタクトページ 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

.contact_table_wrap{
	background-color: #eee;
	padding: 60px;
	border-radius: 10px;
}

.contact_table{
	width: 100%;
	border: none!important;
}

.contact_table th,.contact_table td{
	border: none!important;
}

.contact_table th{
	text-align: left!important;
	width: 30%;
	vertical-align: top;
}

.contact_table th span{
	display: inline-block;
	color: #fff;
	font-size: 13px;
	background-color: #db5877;
	padding: 5px 10px;
	margin-left: 15px;
	border-radius: 5px;
	line-height: 1;
}

.contact_table td{
	width: 70%;
	padding-bottom: 50px;
}

.contact_table td input[type="text"],.contact_table td textarea{
	border: none;
	width: 100%;
	padding: 10px;
	border-radius: 3px;
	font-size: 16px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.contact_table_wrap hr{
	border-top:1px solid #999;
	margin-bottom: 40px;
}

.contact_attention{
	border: solid 1px #009eb8;
	padding: 50px;
	border-radius: 10px;
	margin-bottom: 40px;
}

.contact_attention h2{
	font-size: 24px;
	color: #009eb8;
	font-weight: 500;
	text-align: center;
	margin-bottom: 20px;
}

.contact_attention ol li{
	text-indent: -1em;
	padding-left: 1em;
}

.contact_attention ol li{
	margin-bottom: 20px;
}

#ssl_block {
	margin-bottom: 100px;
}

#ssl_block h2{
	font-size: 24px;
	color: #009eb8;
	font-weight: 500;
	margin-bottom: 20px;
}

#contact_btn{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#contact_btn input{
	background-color: #878787;
	color: #fff;
	padding: 15px;
	width: 180px;
	line-height: 1;
	border-radius: 5px;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 18px;
	border:none;
}

#contact_btn input:hover{
	opacity: 0.8;
}




/*🔲🔲🔲🔲🔲🔲🔲🔲 ニュース一覧 🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

.news_list{
	margin-bottom: 60px;
}

.news_list dt{
	color: #00a63c;
	margin-bottom: 5px;
}

.news_list h3{
	font-weight: 700;
}

.news_list dd{
	border-bottom: solid 1px #666;
	padding-bottom: 10px;
	margin-bottom: 40px;
}

.news_list dd a{
	position: relative;
	margin-left: 20px;
}

.news_list dd a::before{
	content:'';
	position: absolute;
	left:-20px;
	top:10px;
	width:6px;
	height:6px;
	border-top: 1px solid #333;
    border-right:1px solid #333;
    transform: rotate(45deg);
}

.page_block{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10%;
}

.page_block ul{
	display:flex;
	list-style: none;
}

.page_block ul li{
	border:solid 1px #ccc;
	border-radius: 5px;
	margin-right:5%;
}
	
.page_block li a{
	display: block;
	padding: calc(100vw / 80);
	text-decoration: none;
	color: #009eb8;
}

.page_block ul li a:hover{
	background-color:#009eb8;
	color:#fff;
}

.page_target{
	padding: calc(100vw / 80);
	background-color:#009eb8;
	color: #fff;
}

#page_first_last{
	display: flex;
}

#page_first_last a{
	color: #009eb8;
	position: relative;
	margin-left: calc(100vw / 30);
	text-decoration: none;
}

#page_first_last a:hover{
	opacity: 0.8;
}

#page_first_last a::after {
	content: '';
	width: 8px;
	height: 8px;
	border-top: solid 1px #73998f;
	border-right: solid 1px #73998f;
	position: absolute;
	right: -40%;
	top: 35%;
	transform: rotate(45deg);
}

#closed_table{
	width: 100%;
}

#closed_table th{
	padding: 5px 10px;
	background-color: #eee;
}

#closed_table td{
	padding: 5px 10px;
	background-color: #fff;
}




/*🔲🔲🔲🔲 追加 🔲🔲🔲🔲🔲🔲*/

.nurse_banner{
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: -60px;
}

.nurse_banner img{
	width: 100%;
	max-width: 600px;
}