@charset "utf-8";

@import url(/css/base.css);
/*@import url(/css/contact.css);*/


/*####################################################################################

  	HOME

　####################################################################################*/


/* コンテンツ */

	.mainimage{
		max-width:1000px;
		width:94%;
		height: 300px;
		margin:0 auto 50px;
		line-height: 0;
	}

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

	.mainimage{
		width:100%;
		margin-bottom: 0;
	}

}

		.mainimage img{
			width:100%;
			height: auto;
			margin-top: 0;
			position: relative;
			top:-3px;
			z-index:10;
		}

		.maincatch{
			display:-webkit-flex;
			display:flex;
			justify-content: center;
			-webkit-align-items:center;
			align-items:center;
			color:#369;
			font-size: 3.3em;
			font-weight: 700;
			line-height: 1.5em;
			text-align: center;
					text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,
						0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
			position: relative;
			top:-3px;
			z-index:20;
		}

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

		.maincatch{
			font-size: 4.0vw;
		}

	}


/* 所長挨拶 */

		.message{
			width:100%;
			margin:0 auto;
			padding:50px 0;
			background-image:url(/shared/bg_paper.png);
		}

	@media screen and (max-width:1200px){
			
		.message{
			border-radius:0;
		}

	}

	@media screen and (max-width:1000px){
		.message{
			padding:30px 0;
		}
	}
	
	
			.message .inner{
				max-width:880px;
				width:88%;
				margin:0 auto;
			}
			
			.message img{
				margin:5px 0 20px 30px;
				float:right;
				position:relative;
			}

		@media screen and (max-width:1000px){
			
			.message img{
				margin:5px 0 20px 25px;
			}

		}

		@media screen and (max-width:640px){
			
			.message img{
				display:block;
				width:150px;
				margin:0 auto;
				float:none;
				top:0;
				left:0;
			}

		}

		@media screen and (max-width:480px){
			
			.message img{
				width:120px;
			}

		}
			
				.message .inner header{
					height:60px;
					overflow:hidden;
				}
	
			@media screen and (max-width:1000px){
			
				.message .inner header{
					height:90px;
				}
			
			}
	
			@media screen and (max-width:770px){
			
				.message .inner header{
					height:120px;
				}
			
			}
	
			@media screen and (max-width:640px){
			
				.message .inner header{
					height:110px;
					margin-top: 30px;
				}
			
			}

					.message .inner h3{
						color:#036;
						font-size:1.8em;
						font-weight:700;
						float:left;				
					}
	
				@media screen and (max-width:1000px){
			
					.message .inner h3{float:none;}
					
				}

				@media screen and (max-width:640px){
			
					.message .inner h3{text-align: center;}
					
				}

				@media screen and (max-width:480px){
			
					.message .inner h3{font-size:1.4em;}
					
				}

					.message .inner .name{
						float:right;
						margin:0 8px 0 0;
					}

				@media screen and (max-width:1000px){
			
					.message .inner .name{
						margin:15px 8px 0 0;
					}
	
				}

				@media screen and (max-width:770px){
			
					.message .inner .name{
						text-align: right;
					}
	
				}

				@media screen and (max-width:640px){
			
					.message .inner .name{
						margin:15px 5px 0 0;
					}
	
				}
			
			
					.message .inner .name span{
						font-size:1.2em;
						font-family: 'Sawarabi Mincho', sans-serif;
						letter-spacing:0.15em;
					}

			@media screen and (max-width:370px){
			
				
					.message .inner .name{
						font-size:0.9em;
					}
					
					.message .inner .name span{
						font-size:1.1em;
					}
			}
			
				.message .inner .note{
					margin:0;
					text-align:justify;
					line-height:2.0em;
				}

		@media screen and (max-width:640px){
			
			.message .inner{
				width:88%;
				left:0;
			}

		}
		
		.message + .linkbtn{
			display:block;
			max-width:620px;
			width:80%;
			height:70px;
			margin:50px auto 50px;
			padding-right:20px;
			color:#fff;
			font-size:1.3em;
			font-weight:700;
			text-decoration:none;
			text-align:center;
			line-height:70px;
			background-color:#22538f;
			background-image:url(/shared/img_yajirushi-yellow.png);
			background-repeat:no-repeat;
			background-position:95% 50%;
			background-size:10px auto;
			border-radius:10px;	
			position:relative;
			z-index:1100;
			-webkit-transition:opacity 0.3s ease-out;
			-moz-transition:opacity 0.3s ease-out;
			-ms-transition:opacity 0.3s ease-out;
			transition:opacity 0.3s ease-out;
		}		
		.message + .linkbtn:hover{
			color:#ffc;
			filter:alpha(opacity=80);
			-moz-opacity:0.80;
			opacity:0.80;
		}

	@media screen and (max-width:640px){
			
		.message + .linkbtn{
			height:50px;
			margin:30px auto 50px;
			font-size:1.0em;
			line-height:50px;
		}

	}

	@media screen and (max-width:480px){
			
		.message + .linkbtn{
			width:90%;
			height:40px;
			font-size:0.9em;
			line-height:40px;
			border-radius:6px;	
		}

	}

	@media screen and (max-width:400px){
			
		.message + .linkbtn{
			font-size:0.8em;
		}

	}

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

		.message + .linkbtn span{
			display: none;
		}

	}		


/* HOMEコンテンツ共通 */

	.content-sec{
		padding: 50px 0;
	}

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

	.content-sec{
		padding: 30px 0;
	}

}


	.content-sec .inner{
		width:1000px;
		width:88%;
		margin:0 auto;
	}

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

	.content-sec .inner{
		margin:0 auto;
	}

}

		.content-sec h2{
			margin-bottom:40px;
			color:#036;
			font-size:1.8em;
			font-weight:700;
			text-align: center;
		}

	@media screen and (max-width:1200px){
					
		.content-sec h2{
			font-size:1.6em;
		}

	}

	@media screen and (max-width:1000px){
					
		.content-sec h2{
			margin-bottom: 30px;
		}

	}

	@media screen and (max-width:880px){
					
		.content-sec h2{
		}

	}

	@media screen and (max-width:540px){
					
		.content-sec h2{
			margin-bottom: 20px;
			font-size:1.3em;
		}

	}

	@media screen and (max-width:370px){
					
		.content-sec h2{
			font-size:1.2em;
		}

	}	



/************************ 地域社会貢献について ************************/				
	
	
		.contribution{
			margin-bottom: -165px;
			padding-top:165px;
			position:relative;
			top:-165px;
		}

	@media screen and (max-width:1000px){
	
		.contribution{
			margin-bottom: -88px;
			padding-top:88px;
			top:-88px;
		}

	}

		.contribution > .inner > p{
			color:#036;
		}


	@media screen and (max-width:640px){
	
		.contribution{padding-top: 15px;}

	}
	
		.contribution h2{
			margin-top:50px;
		}
	

	
		.contribution .inner{
			max-width: 770px;
			width: 88%;
			margin: 0 auto;
		}
	
			.contributioni ul{
			}
		
				.contribution ul li{
					list-style:none;
					
				}
		
					.contribution ul h3{
						margin:50px 0 25px;
						color:#c33;
						font-size:1.8em;
						font-family: 'Sawarabi Mincho', sans-serif;
					}

					.contribution ul h3:before{
						content:url("/shared/mrk_circle-pink.png");
						margin-right: -10px;
						position: relative;
						left:-20px;
						top:-1px;
					}


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

			.contribution ul{
				margin-left:0;
			}

					.contribution ul h3{
						margin:40px 0 20px;
						font-size:1.4em;
					}

					.contribution ul h3:before{
						margin-right: -10px;
						left:-15px;
						top:1px;
					}

				}

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

						.contribution ul h3{
							margin:30px 0 10px;
							font-size:1.2em;
						}

					.contribution ul h3:before{
						top:2px;
					}

				}



/************************ こころとそだちの臨床研究所について ************************/				


	.about{
		margin-bottom:-107px;
		padding-top:107px;
		position:relative;
		top:-107px;
	}

@media screen and (max-width:880px){
	
	.about{
		margin-bottom:-44px;
		padding-top:44px;
		position:relative;
		top:-44px;
	}
	
}

		.about .innerwrapper{
			background-color: #fffdf2;
		}

		.about .inner{
			padding:50px 0;
		}

	@media screen and (max-width:1000px){
		.about .inner{
			padding:30px 0;
		}
	}


			.about .inner table{
				width:calc(100% - 250px);
				float: left;
				border-collapse: collapse;
				border-top:1px solid #ccc;
			}

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

			.about .inner table{
				width:100%;
				float:none;
			}

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

			.about .inner table{
				border: none;
			}

		}

				.about .inner th{
					width:15%;
					min-width:100px;
					padding: 15px 0;
					color:#036;
					border-bottom:1px dashed #ccc;
				}
				.about .inner th:nth-last-of-type(1){
					border-bottom:1px solid #ccc;
				}

				.about .inner td{
					padding: 15px 2%;
					border-bottom:1px dashed #ccc;
					border-left:1px solid #ccc;
				}
				.about .inner td:nth-last-of-type(1){
					border-bottom:1px solid #ccc;
				}
	
			@media screen and (max-width:480px){

				.about .inner th{
					display: block;
					width:100%;
					padding: 3px 0;
					color:#fff;
					font-size: 0.9em;
					background-color:#036;
					border: none;
				}
				.about .inner th:nth-last-of-type(1){border:none;}

				.about .inner td{
					display: block;
					width:96%;
					border:none;
				}
				.about .inner td:nth-last-of-type(1){border:none;}

			}


	
				.about .imagebox{
					width:200px;
					margin: 0;
					line-height:0;
					float:right;
				}
				.about .imagebox img{width:100%;}

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

				.about .imagebox{
					width:200px;
					margin:20px auto;
					float:none;
				}

			}

					.about .imagebox span{
						display:block;
						width:180px;
						margin:0 auto;
						padding:5px;
						-moz-box-shadow:0px 1px 2px 1px #aaa;
						-webkit-box-shadow:0px 1px 2px 1px #aaa;
						box-shadow:0px 1px 2px 1px #aaa;
					}

					.about .imagebox p{
						margin:15px 0 8px !important;
						font-size:0.9em;
						line-height:1.5em;
						text-align:center;
					}



/************************ 業務のご紹介 ************************/				


	.archivements{
		margin-bottom: -165px;
		padding-top:165px;
		position:relative;
		top:-165px;
	}

@media screen and (max-width:880px){
	
	.archivements{
			margin-bottom: -88px;
			padding-top:88px;
			top:-88px;
	}
	
}

		.archivements .inner{
			padding-bottom: 50px;
		}

	@media screen and (max-width:480px){
		.archivements .inner{
			padding-bottom: 30px;
		}
	}


			.archivements .inner table{
				width:100%;
				border-collapse: collapse;
				border-top:1px solid #ccc;
			}

			.archivements .inner th{
				padding: 5px 0;
				background-color: #f2f2f2;
				border:1px solid #ccc;
			}

			.archivements .inner td{
				padding: 10px 1%;
				text-align: center;
				border:1px solid #ccc;
 	            overflow-wrap: break-word;
				word-wrap: break-word;
				line-height: 1.7em;
				word-break: break-all;
			}
			.archivements .inner td:nth-of-type(1){width:100px;}
			.archivements .inner td:nth-of-type(2){
				text-align:left;
			}
			.archivements .inner td:nth-of-type(3){width:100px;}

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

			.archivements .inner th{
				font-size: 0.9em;
			}

			.archivements .inner td{
				font-size: 0.9em;
			}
			.archivements .inner td:nth-of-type(1),
			.archivements .inner td:nth-of-type(3){
				width:80px;
				line-height:1.4em;
			}

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

			.archivements .inner td:nth-of-type(1){
				width:40px;
			}

		}




/* おしらせ */		
	
		.news .inner{
			max-width:1000px;
			width:90%;
		}
	

		/* リンクボタン */

		.news .linkbtn{
			display:block;
			width:160px;
			height:28px;
			margin:0;
			color:#c00;
			font-size:0.8em;
			text-decoration:none;
			text-align:center;
			line-height:28px;
			background-color:#fcc;
			background-image:url(/shared/img_yajirushi-yellow.png);
			background-repeat:no-repeat;
			background-position:98% 50%;
			background-size:5px auto;
			border-radius:5px;
			float: right;
			position:relative;
			top:-45px;
			left:-25px;
			z-index:1100;
			-webkit-transition:opacity 0.3s ease-out;
			-moz-transition:opacity 0.3s ease-out;
			-ms-transition:opacity 0.3s ease-out;
			transition:opacity 0.3s ease-out;
		}		
		.news .linkbtn:hover{
			color:#ffc;
			filter:alpha(opacity=80);
			-moz-opacity:0.80;
			opacity:0.80;
		}

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

		.news .linkbtn{
			width:160px;
			font-size:0.8em;
			left:0;
		}

	}

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

		.news .linkbtn{
			margin: 60px auto 0;
			float: none;
		}

	}

		.newslist{
			width:100%;
			margin:0 auto 10px;
			border-top:1px dashed #999;
			position: relative;
			top:-30px;
		}
		
			.newslist li{
				border-bottom:1px dashed #999;
				background-image:url(/shared/mrk_news.png);
				background-repeat:0;
				background-repeat:no-repeat;
				background-position:3% 14px;
				background-size:26px auto;
			}
	
		@media screen and (max-width:770px){

			.newslist li{
				background-position:1% 10px;
			}

		}

			.newslist li a,
			.newslist li span{
				display:block;
				padding:15px 0 15px 3%;
				text-decoration:none;
				-webkit-transition:opacity 0.3s ease-out;
				-moz-transition:opacity 0.3s ease-out;
				-ms-transition:opacity 0.3s ease-out;
				transition:opacity 0.3s ease-out;
			}

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

			.newslist li a,
			.newslist li span{
				padding:10px 0;
			}
		
		}

			.newslist li:after{
				content: "";
				display: block;
				visibility: hidden;
				clear: both;
				height: 0px;
			}
			* html .newslist li{display: inline-table;}
			/* no ie mac \*/
			* html .newslist li{height:1%;}
			.newslist li{display: block; min-height:0;}
			/* */


			.newslist li a:hover,
			.newslist li span:hover{
				filter:alpha(opacity=60);
				-moz-opacity:0.60;
				opacity:0.60;
			}
		
				.newslist li .date{
					width:100px;
					color:#333;
					line-height: 1.7em;
					float:right;
				}
	
			@media screen and (max-width:1000px){
		
				.newslist li .date{
					font-size:1.0em;
				}
				
			}

			@media screen and (max-width:770px){
		
				.newslist li .date{
					float: none;					
				}
				
			}

			@media screen and (max-width:480px){
		
				.newslist li .date{
					font-size:0.9em;
				}
				
			}
	
				.newslist li h3{
					width:calc(100% - 100px);
					color:#333;
					font-size:1.1em;
					font-weight:700;
					line-height: 1.7em;
				}
				
				.newslist li a h3{color:#333;}

			@media screen and (max-width:1000px){
		
				.newslist li h3{
					font-size:1.0em;
				}
				
			}

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

				.newslist li h3{
					width:100%;
				}

			}

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

				.newslist li h3{
					font-size:0.9em;
				}

			}


/*####################################################################################

  	お問い合わせ

　####################################################################################*/


	.contact{
		margin-bottom: -165px;
		padding-top:165px;
		padding-bottom: 0;
		position:relative;
		top:-165px;
	}

@media screen and (max-width:880px){
	
	.contact{
		margin-bottom: -88px;
		padding-top:88px;
		top:-88px;
	}
	
}

	.contact .inner-wrapper{
		margin:0;
		padding: 50px 0;
		background-color: #f2f2f2;
	}

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

	.contact .inner-wrapper{
		padding: 30px 0;
	}

}


		.contact .inner{
			max-width:980px;
			width:90%;
			margin:0 auto;
		}

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

		.contact .inner{
		}

	}

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

		.contact .inner{
		}

	}

		.contact h2{
			/*margin:0 0 70px;*/
		}

	

		.mailform{
			max-width:840px;
			width:100%;
			margin:0 auto;
		}

			.mailform table{
				width:100%;
				border-collapse:collapse;
			}
	 
				.mailform th{
					height:70px;
					padding:0 5px 0 15px;
					color:#22538e;
					font-weight:500;
					text-align:left;
					line-height:1.4em;
					background-color:#f2f8ff;
					white-space:nowrap;
					border-bottom:1px dashed #ccc;
				}
				.mailform tr:nth-of-type(1) th{border-top:1px dashed #ccc;}

				.mailform td{
					padding:10px 0 0 20px;
					font-weight:400;
					border-bottom:1px dashed #ccc;
				}
				.mailform tr:nth-of-type(1) td{border-top:1px dashed #ccc;}
		
					.mailform td input{
						margin-bottom:10px;
						padding:10px 5px;
						font-weight:400;
						border:none;
						border-radius:5px;
					}
		
					.mailform td textarea{
						width:91%;
						margin-bottom:10px;
						padding:10px 2%;
						font-weight:400;
						border:none;
						border-radius:5px;
					}

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

				.mailform th{
					display: block;
					height: auto;
					padding:5px 0;
					text-align: center;
					width:100%;
					border:none;
				}
				.mailform tr:nth-of-type(1) th{border:none;}

				.mailform td{
					display: block;
					padding:10px 2%;
					width:96%;
					border:none;
				}
				.mailform tr:nth-of-type(1) td{border:none;}

			}
	
	
	
			#dantai,#dfurigana,#email,#email2{
				max-width:380px;
				width:93%;
			}
			#name1,#name2,#furigana1,#furigana2{
				max-width:145px;
				width:34%;
			}
			#tel1,#tel2,#tel3{
				max-width:80px;
				width:20%;
				text-align:center;
			}


		@media screen and (max-width:480px){
			
			#name1,#name2,#furigana1,#furigana2{
				width:70%;
			}
		
		}
	
			#submit1{
				display:block;
				max-width:360px;
				width:80%;
				height:50px;
				margin:30px auto;
				color:#fff;
				font-size:1.1em;
				font-weight:700;
				letter-spacing:0.07em;
				text-align:center;
				line-height:45px;
				background-color:#036;
				border-radius:5px;
				cursor:pointer;
				-webkit-transition:opacity 0.3s ease-out;
				-moz-transition:opacity 0.3s ease-out;
				-ms-transition:opacity 0.3s ease-out;
				transition:opacity 0.3s ease-out;
			}
	
			#submit1:hover{
				filter:alpha(opacity=80);
				-moz-opacity:0.80;
				opacity:0.80;
			}


		@media screen and (max-width:480px){
			
			#submit1{
				margin:30px auto 0;
				font-size:1.0em;
			}
				
		}

		@media screen and (max-width:370px){
			
			#submit1{
				width:100%;
				height:40px;
				line-height:40px;
			}
				
		}


	
	
				.mailform tr:nth-of-type(3) th,
				.mailform tr:nth-last-of-type(1) th{
					padding-top:24px;
					vertical-align:top;
				}
	
					.hissu{
						width:30px;
						height:14px;
						color:#fff;
						font-size:0.7em;
						text-align:center;
						line-height:16px;
						float:right;
						background-color:#e73656;
						position:relative;
						top:-6px;
						margin-right:5px;
					}
	
		@media screen and (max-width:640px){
			
				.mailform td{
					padding:10px 0 0 10px;
				}
	
			#dantai,#furigana,#email,#email2{
				width:88%;
			}
			#tantou1,#tantou2,#tfurigana1,#tfurigana2{
				width:60%;
			}
	
					.hissu{
						top:-17px;
					}
	
		}
	
				.remarks{
					margin:0;
					color:#369;
					font-size:0.9em;
					position:relative;
					top:-8px;
				}



		/* 戻る */
			
			.modoru{
				display:block;
				max-width:360px;
				width:80%;
				height:50px;
				margin:30px auto;
				color:#fff;
				font-size:1.1em;
				font-weight:500;
				letter-spacing:0.07em;
				text-align:center;
				line-height:50px;
				background-color:#036;
				border-radius:5px;
				cursor:pointer;
				-webkit-transition:opacity 0.3s ease-out;
				-moz-transition:opacity 0.3s ease-out;
				-ms-transition:opacity 0.3s ease-out;
				transition:opacity 0.3s ease-out;
			}
			
			.modoru:hover{
				filter:alpha(opacity=80);
				-moz-opacity:0.80;
				opacity:0.80;
			}
		
		
				.thanksnote{
					width:90%;
					margin:20px auto;
					
				}

		



/* コンテンツ共通 */


	.content main > .inner{
		width:1000px;
		width:88%;
		margin:0 auto;
	}

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

	.content main > .inner{
		margin:0 auto;
	}

}

		.content main h2{
			margin-bottom:70px;
			color:#036;
			font-size:1.8em;
			font-weight:700;
			text-align: center;
		}

	@media screen and (max-width:1200px){
					
		.content main h2{
			font-size:1.6em;
		}

	}

	@media screen and (max-width:1000px){
					
		.content main h2{
			margin: 40px 0 70px;
		}

	}

	@media screen and (max-width:540px){
					
		.content main h2{
			margin: 30px 0 60px;
			font-size:1.3em;
		}

	}

	@media screen and (max-width:370px){
					
		.content main h2{
			font-size:1.2em;
		}

	}	



/*####################################################################################

  	おしらせ

　####################################################################################*/