@charset "utf-8";

.header {
}

@media screen and (max-width: 640px) {
	#home .header {
		width: 100%;
		margin: 0 auto 10.4%;
	}
	.tree .header,
	#archive-index .header {
		width: 100%;
		padding: 0 0 4.8%;
		margin: 0 auto 7.2%;
	}
	.header .header-inner {
	}
	.header h1 {
		display: block;
		background: url(../images/sp/header.png) no-repeat center top;
		font-size: 0;
		line-height: 0;
		text-indent: -9999px;
		padding: 75% 0 0;
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
	}
	.header #date {
		width: 88.44%;
		display: block;
		background: url(../images/sp/date.png) no-repeat center top;
		font-size: 0;
		line-height: 0;
		text-indent: -9999px;
		padding: 19.4974% 0 0; /* w100% = 22.0459% */
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		margin: -1.6% auto 0;
	}
	/* .header #date {
		width: 98.44%;
		display: block;
		background: url(../images/sp/date201804.png) no-repeat center top;
		font-size: 0;
		line-height: 0;
		text-indent: -9999px;
		padding: 31.719% 0 0; /* w100% = 32.222% */
		/* background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		margin: -9.6% auto 0;
	}
	.header #date {
		width: 98.44%;
		display: block;
		background: url(../images/sp/date.png) no-repeat center top;
		font-size: 0;
		line-height: 0;
		text-indent: -9999px;
		padding: 21.563% 0 0; /* w100% = 21.905% */
		/* background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		margin: -9.6% auto 0;
	} */
	
	.tree .header #date,
	#archive-index .header #date {
		width: 62.34%;
		display: block;
		background: url(../images/sp/date-tree.png) no-repeat center top;
		font-size: 0;
		line-height: 0;
		text-indent: -9999px;
		padding: 23.748% 0 0; /* w100% = 38.095% */
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		margin: -20.6% auto 3.2%;
	}
	.tree .header #top a,
	#archive-index .header #top a {
		width: 66%;
		display: block;
		background: url(../images/sp/btn-top.png) no-repeat center top;
		font-size: 0;
		line-height: 0;
		text-indent: -9999px;
		padding: 10.479% 0 0; /* w100% = 15.877% */
		background-size: contain;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		margin: 0 auto;
	}
	
	#home .header .head-info {
		overflow: hidden;
		height: 0px;
	}
}

@media screen and (min-width: 641px) {
	#home .header {
		width: 100%;
		background: url(../images/pc/header.png) no-repeat center top;
		padding: 734px 0 0;
		margin: 0 auto 42px;
	}
	#home .header .header-inner {
		width: 980px;
		margin: 0 auto;
		position: relative;
	}
	#home .header h1,
	#home .header .head-info {
		overflow: hidden;
		height: 0px;
	}
	#home .header #date {
		display: block;
		background: url(../images/pc/date.png) no-repeat 0 0;
		font-size: 0;
		line-height: 0;
		text-indent: -9999px;
		list-style-type: none;
		width: 706px;
		height: 147px;
		margin: 0 auto;
	}
	/* #home .header #date {
		display: block;
		background: url(../images/pc/date201804.png) no-repeat 0 0;
		font-size: 0;
		line-height: 0;
		text-indent: -9999px;
		list-style-type: none;
		width: 706px;
		height: 165px;
		margin: 0 auto;
	}
	#home .header #date {
		display: block;
		background: url(../images/pc/date.png) no-repeat 0 0;
		font-size: 0;
		line-height: 0;
		text-indent: -9999px;
		list-style-type: none;
		width: 706px;
		height: 142px;
		margin: 0 auto;
	} */
	
	.tree .header,
	#archive-index .header {
		width: 100%;
		background: url(../images/pc/header-tree.png) no-repeat center top;
	}
	.tree .header .header-inner,
	#archive-index .header .header-inner {
		width: 980px;
		height: 288px;
		margin: 0 auto;
		position: relative;
	}
	.tree .header h1,
	.tree .header #date,
	#archive-index .header h1,
	#archive-index .header #date {
		overflow: hidden;
		height: 0px;
	}
	.tree .header #top a,
	#archive-index .header #top a {
		display: block;
		background: url(../images/pc/btn-top.png) no-repeat 0 0;
		font-size: 0;
		line-height: 0;
		text-indent: -9999px;
		list-style-type: none;
		width: 191px;
		height: 31px;
		position: absolute;
		top: 162px;
		left: 646px;
		/* CSS3 fade-in-out */
		transition: all  0.3s ease;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		z-index: 999;
	}
	.tree .header #top a:hover,
	#archive-index .header #top a:hover {
		opacity: 0.7;
	}	
}