@charset "UTF-8";

/*================================================
 *  common
 ================================================*/


/* basic : all hits media class */
.spDisplayNone {}
.tbDisplayNone {}
.pcDisplayNone {}
.smartContainer {}
.spDisplayOn,
.tbDisplayOn,
.pxDisplayOn,
.pcDisplayOn {
display: none;
}


/* for SP */
@media screen and (max-width: 767px) {
		.spDisplayNone {display:none;}
		.spDisplayOn {display: inline}
		.smartContainer {margin: 0 15px;}
		article,main {margin-top: 40px;}
}

/* for TB */
@media screen and (max-width: 1200px) and (min-width: 768px){
		.tbDisplayNone {display:none;}
		.tbDisplayOn {display: inline}
		.smartContainer {margin: 0 15px;}
		article,main {margin-top: 40px;}
}

/* for PC */
@media screen and (min-width: 1201px) {
		.container {
		margin: 0 auto;
		width:1200px;
		position: relative;
		}
		.pcDisplayNone {display:none;}
		.pcDisplayOn {display: inline}
		a:hover {
		filter: alpha(opacity=50);
		-moz-opacity:0.50;
		opacity:0.50;
		}
		a img:hover {
		filter: alpha(opacity=50);
		-moz-opacity:0.50;
		opacity:0.50;
		}
		article,main {margin-top: 94px;}

}



/*================================================
 *  headlines
 ================================================*/

#headlines h1 .sideName {
font-size: 14px;
font-weight: normal;
display: block;
margin-top: 15px;
letter-spacing: 0.15em;
}

@media screen and (min-width:768px) {

	#headlines h1 .sideName {
	display: inline-block;
	margin-top: 0;
	margin-left: 1em;
	}

}



/*================================================
 *  box01
 ================================================*/

#box01 .visualColumn {
margin-bottom: 10px
}

#box01 .mainColumn {

}

#box01 h2 {
font-size: 48px;
margin: 0.5em 0;
text-align: center;
line-height: 1em;
}
#box01 h2 span {
font-size: 14px;
display: inline-block;
line-height: 1em;
padding: 0;
margin: 0;
margin-left: 1em;
white-space: nowrap;
}

#box01 h2 + p {
font-size: 12px;
line-height: 1.75em;
letter-spacing: 0;
white-space: nowrap;
}

#box01 p {
margin: 0;
text-align: center;
line-height: 1em;
}


@media screen and (min-width:768px) {

	#box01 .tableColumn {
/*	display: table;
	width: 100%;
	margin: 0 auto;*/
	position: relative;
	}

	#box01 .visualColumn {
/*	margin-bottom: 0;
	display: table-cell;
	vertical-align: middle;
	width: 50%;*/
	position: absolute;
	top: 0;
	left: 0;
	}
	
	#box01 .visualColumn img {
	width: auto;
	height: 500px;
	}

	#box01 .mainColumn {
/*	display: table-cell;
	vertical-align: middle;
	width: 50%;*/
	height: 500px;
	box-sizing: border-box;
	display: table;
	width: 100%;
	position: relative;
	z-index: 2;
	margin: 0 auto;
	}
	#box01 .mainColumn > div {
	display: table-cell;
	vertical-align: middle;
	text-align: right;
	text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
	}

	#box01 .mainColumn > div > div {
	display: inline-block;
	}

	#box01 h2 + p {
	font-size: 14px;
	}

}

@media screen and (min-width:1660px) {

	#box01 .mainColumn > div {
	padding: 0 100px;
	}

	#box01 .visualColumn {
	left: 100px;
	}

}


/*================================================
 *  box02
 ================================================*/
 
 
/*================================================
*  box03
 ================================================*/

#box03 {
}

#box03 .pointList {
list-style: none;
}
#box03 .pointList li {
margin: 1em 0;
font-size: 16px;
padding-left: 1em;
text-indent: -1em;
line-height: 1.75em;
}

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

	#box03 .pointList {
	padding: 0;
	margin: 0;
	}

}

@media screen and (min-width:768px) {
	#box03 .pointList li {
	font-size: 24px;
	}
}


/*================================================
 *  box05
 ================================================*/

#box05 .nameDateList {
display: table;
margin: 0 0 0 auto;
padding-top: 1.5em;
}

#box05 .nameDateList dt,
#box05 .nameDateList dd {
font-size: 12px;
display: table-cell;
}