@charset "utf-8";

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
ヘッダー
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

@media screen and (max-width:900px){

header{
	background-image:url('../img/index_bg2.png');
	height:calc(100vh + 126px);
}

	header h1{
		width:100%;
		height:100px;
	}

		header h1::after{
			height:100px;
			animation: logo_animation_4 2.5s ;
			animation-timing-function: ease;
			animation-iteration-count: 1;
			background-image:url('../img/logo_sp.svg');
			background-size:auto 85px;
		}
		
	header #menu_button{
		left:auto;
		right:0px;
		top:20px;
		max-width:80px;
		font-size:0.5em;
	}
	
		header #menu_button p{
			margin:0;
		}

	header #contact{
		max-width:100%;
		height:80px;
		line-height:80px;
		padding:0;
		animation: logo_animation_3 0s ;
		animation-timing-function: ease;
		animation-iteration-count: 1;
	}
	
.menu-trigger{
	width: 35px;
	height: 24px;
}
.menu-trigger span:nth-of-type(2){
	top: 11px;
}

.menu-trigger.active{
	width: 35px;
}
	
@keyframes logo_animation_4{
	0%{
		opacity:0;
		height:100vh;
	}
	25%{
		opacity:0;
	}
	55%{
		height:100vh;
	}
	60%{
		opacity:1.0;
	}
	100%{
		height:100px;
	}
}
@keyframes logo_animation_2{
	0%{
		height:100vh;
	}
	55%{
		height:100vh;
	}
	100%{
		height:100px;
	}
}
@keyframes logo_animation_3{
	0%{
		opacity:0;
	}
	75%{
		opacity:0;
	}
	100%{
		opacity:1.0;
	}
}

header nav{
	position:fixed;
	right:-450px;
	top:100px;
	height:calc(100vh - 100px);
	overflow-y:auto;
	z-index:7;
	width:450px;
}

header nav.active{
	right:0;
	animation: nav_animation_1_4 1.2s ;
}

header nav.close{
	right:-450px;
	animation: nav_animation_3_4 1.2s ;
}

header nav > div{
	position:relative;
	left:0;
	top:0;
	width:100%;
	max-width:100%;
	height:auto;
}

	header nav > div > div{
		height:auto;
		min-height:calc(50vh - 90px);
		padding: 30px 20px;
	}

	header nav p{
		margin:20px 0 40px 0;
		min-height:0;
	}
	
	header nav a{
		display:block;
		color:#fff;
		padding:5px 10px 5px 20px;
	}

.nav_menu_1.active,
.nav_menu_2.active,
.nav_menu_3.active{
	animation:none;
	left:auto;
	right:0;
}

.nav_menu_1.close,
.nav_menu_2.close,
.nav_menu_3.close{
	left:auto;
	animation:none;
}

@keyframes nav_animation_1_4{
	0%{
		left:auto;
		right:-450px;
	}
	60%{
		left:auto;
		right:0;
	}
}
@keyframes nav_animation_3_4{
	0%{
		left:auto;
		right:0;
	}
	50%{
		left:auto;
		right:0;
	}
	100%{
		left:auto;
		right:-450px;
	}
}

header #message{
	top:calc(50vh - 40px);
	left:15%;
	width:70%;
	height:auto;
}

}

@media screen and (max-width:450px){
	header nav{
		width:100%;
	}
	
	header #contact{
		height:60px;
		line-height:60px;
	}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
main
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media screen and (max-width:900px){
main{
	padding:0 0 0 0;
}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
病院理念
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media screen and (max-width:1180px){
	main #identity > div{
		max-width:100%;
		margin:0;
		padding:100px 30px 100px 70px;
	}
}
@media screen and (max-width:750px){
	main #identity{
		width:100%;
	}
}
@media screen and (max-width:620px){
main #identity{
	font-size:0.85em;
}

	main #identity > div{
		padding:60px 30px;
	}
	
	main #identity p{
		margin:15px 0;
	}
	
		main #identity p br{
			display:none;
		}
}
@media screen and (max-width:450px){
main #identity{
	margin:0 auto;
}

	main #identity h2{
		font-size:2.0em;
		text-align:center;
	}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
ニュース
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media screen and (max-width:500px){
main #news{
	margin:40px auto 0 auto;
}

	main #news dl{
		margin:25px auto;
	}
	
		main #news dl dd{
			width:calc(100% - 20px);
			margin:10px;
		}

}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
サービス
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media screen and (max-width:1450px){
	main #service a{
		font-size:1.5em;
	}
}
@media screen and (max-width:1200px){
main #service{
	padding:0 80px;
}
	main #service a{
		width:100%;
		max-width:400px;
		float:none;
		margin:40px auto;
		font-size:2.0em;
	}
	main #service a:nth-child(1),
	main #service a:nth-child(3){
		margin:40px auto;
	}
	
	main #service a::before{
		padding-top:60%;
	}
}
@media screen and (max-width:1200px){
	main #service a,
	main #service a:nth-child(1),
	main #service a:nth-child(3){
		margin: 60px auto;
	}
}
@media screen and (max-width:500px){
main #service{
	margin:40px auto 0 auto;
}

	main #service a{
		font-size:1.25em;
	}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
リンク
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media screen and (max-width:900px){
	main #link a::before{
		//display:none;
	}
}
@media screen and (max-width:750px){
	main #link a{
		float:none;
		width:calc(100% - 20px);
		max-width:300px;
		margin:20px auto;
	}
}
@media screen and (max-width:500px){
main #link{
	margin:40px auto 0 auto;
}
}