@charset "UTF-8";

/* wrapper
================================================== */
#wrapper {
	padding-top: 60px;
}
@media screen and (max-width: 639px) {
	#wrapper {
		padding-top: 50px;
	}
}

#slideArea {
	margin-bottom: 5%;
}
/* shadow
================================================== */
.shadow {
	filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.85));
}

#slideBox {
	overflow: hidden;
	position: relative;
}
@media screen and (max-width: 639px) {
	#slideBox figure {
		width: 240%;
		margin: 0 0 0 -8%;
	}
}


/* slideTit
================================================== */
#slideTit .title {
    padding: 39% 4% 0 62%;
    width: 34%;
}
@media screen and (max-width: 639px) {
	#slideTit .title{
		padding: 94% 0 0 36%;
		width: 60%;
	}
}

/* slideTxt
================================================== */
#slideTxt {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
}
#slideTxt .title {
    padding: 38.6% 4% 0;
    width: 57%;
}
@media screen and (max-width: 639px) {
	#slideTxt .title{
		padding: 12% 5% 0;
		width: 90%;
	}
}

/* contentArea
================================================== */
#contentArea {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 5% 5%;
}

/* infoArea
================================================== */
#infoArea {
	padding: 3% 0 1%;
}
@media screen and (max-width: 639px) {
	#infoArea {
		padding: 10% 0 1%;
	}
}
#infoArea h2{
	font-weight: bold;
	font-size: 180%;
	padding-bottom: 1%;
}
@media screen and (max-width: 1000px) {
	#infoArea h2{
		font-size: 2.5vw;
	}
}
@media screen and (max-width: 639px) {
	#infoArea h2{
		font-size: 120%;
		padding-bottom: 3%;
	}
}
#infoArea dl{
	padding: 1% 3%;
	font-weight: bold;
	background-color: #efefef;
	margin-bottom: 1%;
}
#infoArea dl dt{
	float: left;
	width: 110px;
	font-size: 80%;
}
#infoArea dl dd{
	float: left;
}
@media screen and (max-width: 639px) {
	#infoArea dl {
		margin-bottom: 3%;
	}
	#infoArea dl dt{
		padding-top: 2%;
		float: none;
		width: 100%;
		font-size: 60%;
		line-height: 140%;
	}
	#infoArea dl dd{
		float: none;
		line-height: 140%;
		padding-bottom: 2%;
	}
}
#infoArea dl dd a{
	color: #222;
}
#infoArea dl dd a:hover{
	color: #56a5af;
}

/* aboutArea
================================================== */
#aboutArea {
	padding: 2% 0;
	border-top: solid 1px;
	font-weight: bold;
}
@media screen and (max-width: 639px) {
	#aboutArea {
		padding: 2% 0 5%;
	}
}

/* bannerArea
================================================== */
.bannerArea {
	padding: 5% 0;
}
@media screen and (max-width: 639px) {
	.bannerArea {
		padding: 10% 0 0;
		border: none;
	}
}
.bannerArea figure{
	padding-bottom: 2%;
}
@media screen and (max-width: 639px) {
	.bannerArea figure{
		padding-bottom: 2%;
	}
}
.bannerArea .day{
	font-size: 80%;
	font-weight: bold;
	padding-bottom: 1%;
}
.bannerArea h2{
	font-size: 180%;
	line-height: 140%;
	font-weight: bold;
}
@media screen and (max-width: 1000px) {
	.bannerArea h2{
		font-size: 2.5vw;
	}
}
@media screen and (max-width: 639px) {
	.bannerArea h2{
		padding: 0;
		font-size: 100%;
		border-left: none;
	}
}
.bannerArea h2 span{
	font-size: 60%;
	line-height: 140%;
}
.bannerArea h3{
	font-size: 108%;
	line-height: 120%;
	font-weight: bold;
	padding-top: 1%;
}
@media screen and (max-width: 1000px) {
	.bannerArea h3{
		font-size: 1.5vw;
	}
}
@media screen and (max-width: 639px) {
	.bannerArea h3{
		font-size: 60%;
		border-left: none;
	}
}
.bannerArea a{
	color: #222;
}