@charset "utf-8";

/* レスポンシブ　ベース
----------------------------------------------------*/

@media screen and (min-width: 801px) {
	.only-smp {
		display:none !important;
	}
	body {
		font-size:1.2rem;
		line-height:150%;		
	}
	article#main-contents {
		width:1000px;
		margin: 0 auto;
	}	
	section {
		width:100%;
		margin: 0 auto;
		padding-bottom:30px;		
	}
}
@media screen and (max-width: 800px) {
	.only-pc {
		display:none !important;
	}
	body {
		width:100%;
		overflow:hidden;
		overflow-y:scroll;

		font-size:1.6vw;
		line-height:150%;		
	}		
	#main-contents {
		width:100%;
	}			
	section {
		width:100%;
		overflow:hidden;
	}	
	.smp-w100p {
		width:100% !important;
	}
	.image img,
	.img img,
	.smp-w100p {
		width:100% !important;
	}	

}




/* レイアウト
----------------------------------------------------*/


/*  header
---------------------------- */

@media screen and (min-width: 801px) {
	body {
		background:url(/img/header_bg.jpg) center top no-repeat;	
	}
}

header {
	width:1000px;
	height:452px;
	margin: 0 auto;
	background:url(/img/header_img.jpg) no-repeat;
	background-size:contain;
}
@media screen and (max-width: 800px) {
	header {
		width:100vw;
		height:calc(46.7vw);/* 374 / 800 */
		background-image:url(/img/header_img_smp.jpg);
	}
}

header h1 {
	margin:0;
	padding:30px 60px 10px 0;
	font-size:1.1rem;
	line-height:120%;
	text-align:right;
	text-shadow: 5px 5px 5px #fff, -5px -5px 5px #fff;
}
header address {
	margin:0;
	padding:0 60px 10px 0;
	font-size:1rem;
	line-height:140%;
	text-align:right;
	text-shadow: 5px 5px 5px #fff, -5px -5px 5px #fff;
}
@media screen and (max-width: 800px) {
	header h1 {
		padding:15px 30px 10px 0;
		font-size:2.8vw;
	}
	header address {
		padding:0 30px 10px 0;
		font-size:2.6vw;
		line-height:160%;
	}	
}





/*  navi
---------------------------- */

nav {
	position:fixed;
	right:0;
	top:10vh;
	width:40px;
	height:100vh;
	z-index:999;
}
@media screen and (max-width: 800px) {
	nav {
		width:6vw;
	}
}
nav a {
	display:block;
	text-align:right;
}
nav a img {
	width:100%;
}




/*  main contents
---------------------------- */

#top-news {
	padding-bottom:50px;
}
#top-news .unit {
	margin-bottom:10px;
}
#top-news span {
	display:block;
}
#top-news span.date {
	float:left;
	width:25%;
}
#top-news span.title {
	float:right;
	width:73%;
	margin-bottom:5px;
}
#top-news span.content {
	float:right;
	width:73%;
	font-size:0.95rem;
	line-height:160%;
}




#top-photo {
	padding-bottom:50px;
}
#top-photo .unit {
	width:90%;
	margin:20px auto;
	padding:15px;
	background:#fff;
	border: dashed 2px #ccc;
}
#top-photo span {
	display:block;
}
#top-photo span.date {
	padding:15px;
	font-size:1.4rem;
	color:#293;
	font-weight:bold;
}
#top-photo div.photo {
	padding: 0 10px 10px 10px;
}
#top-photo span.image {
	display:flex;
	flex-wrap: wrap;
}
#top-photo span.image a {
	display:block;
	flex-basis: 23%;
	height:120px;
	overflow:hidden;
	margin:0 1% 10px;
}
#top-photo span.content {
	padding:10px;
	font-size:1.1rem;
	line-height:160%;
}






img.top-ttl {
	display:block;
	margin: 10px auto;
}

.b1-lr,
.b2-lr {
	padding: 0 100px;
}
.b1-lr img {
	display:block;
	float:left;
	width:291px;
}
.b1-lr p {
	display:block;
	float:right;
	width:480px;
}
.b2-lr img {
	display:block;
	float:left;
	width:447px;
}
.b2-lr p {
	display:block;
	float:right;
	width:324px;
}

@media screen and (max-width: 800px) {
	#top-news {
		padding-bottom:4vw;
	}
	#top-news .unit {
		padding: 0 6vw;
	}
	#top-news span.date {
		float:none;
		width:100%;
		font-size:4vw;
	}
	#top-news span.title {
		float:none;
		width:100%;
		font-size:4vw;
	}
	#top-news span.content {
		float:none;
		width:100%;
		font-size:3vw;
	}
	
	.b1-lr,
	.b2-lr {
		padding: 0 11vw 0 9vw;
	}
	.b1-lr img {
		float:none;
		width:80vw;
	}
	.b1-lr p {
		float:none;
		width:80vw;
		padding:10px 0;
		font-size:3.8vw;
		line-height:160%;
	}
	.b2-lr img {
		float:none;
		width:80vw;
	}
	.b2-lr p {
		float:none;
		width:80vw;
		padding:10px 0;
		font-size:3.8vw;
		line-height:160%;
	}
}





.feature {
	padding: 0 100px;
}
.feature.pink h3 { color:#E378AC; }

.feature.pink h3 figure {
	display:inline-block;
	margin-right:10px;
	vertical-align:middle;
}
.feature.pink ul {
}
.feature.pink ul li {
	list-style:none;
	margin-bottom:10px;
}
.feature.pink ul li span {
	display:inline-block;
	margin-left: -20px;
}
.feature.pink ul li span { color:#E378AC; }

.feature.blue div {
	margin-bottom:20px;
}
.feature.blue div figure {
	display:block;
	float:left;
	margin-right:14px;
	height:60px;
}

@media screen and (max-width: 800px) {
	
	.feature {
		padding: 0 7vw 0 5vw;
		font-size:3.8vw;
		line-height:160%;		
	}
}




section.info {
	padding-top:10px;
	background:#F5F5F5;
	border:solid 1px #F5F5F5;

	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;	
}
section.info p,
section.info div {
	padding:0 100px;
}
section.info div table {
	width:100%;
	border-collapse:collapse;
	border-top: dotted #999 1px;
}
section.info table th {
	width:20%;
	border-bottom: dotted #999 1px;
	text-align:right;
}
section.info table td {
	padding: 10px 0 10px 30px;
	border-bottom: dotted #999 1px;
}

ul.pdf {
	padding-left:220px;
}
ul.pdf * {
	vertical-align:middle;
}
ul.pdf li img {
	display:inline-block;
}

div.links a {
	display:block;
	margin-bottom:10px;
	text-align:center;
}

@media screen and (max-width: 800px) {
	
	section.info {
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;	
		font-size:3.8vw;
		line-height:160%;			
	}
	section.info td {
		font-size:3.5vw;
	}
	section.info p {
		padding: 0 7vw 0 5vw;
	}
	section.info div {
		padding: 0 4vw 0 2vw;
	}
	ul.pdf {
		padding: 0 5%;
	}
	div.links a {
		font-size:4vw;
	}	
}



/*  footer
---------------------------- */

footer {
	margin-top:20px;
	padding: 30px 0;
	text-align:center;
	font-size:1.0rem;
	line-height:160%;
	background:#FCE4E5;
}
footer h4 {
	padding:10px 0;
	font-size:1.3rem;
	letter-spacing:0.3px;
}
footer p a {
	display:block;
	padding:10px 0;
	text-decoration:none;
	font-size:1.5rem;
	letter-spacing:1px;
}
copy {
	display:block;
	padding: 30px 0;
	font-size:0.85rem;
	letter-spacing:0.1px;
	text-align:center;
}

@media screen and (max-width: 800px) {
	footer h4 {
		font-size:3.8vw;
	}
	footer p a {
		font-size:3.8vw;
	}
}