@charset "utf-8";

#key { background: url(../img/hard/key_bg.jpg) no-repeat center top /cover; }

#key p { top: 315px; }

#sec1 {
	background: url(../img/hard/sec1_bg_01.png) no-repeat center 17% /100% auto;
	position: relative;
	min-height: 731px;
}

#sec1 h2 {
	padding-top: 53px;
	text-align: center;
	z-index: 1;
}

#sec1 .lead {
	text-align: center;
	margin: 20px auto 600px;
}

#sec1 .txt { background: url(../img/hard/sec1_bg_02.jpg) no-repeat center top / cover; }

#sec1 .txt .content { min-height: 736px; }

#sec1 .txt .box {
	position: absolute;
	top: 0;
	right: -32px;
	width: 432px;
	height: 579px;
	background: url(../img/hard/sec1_txt_bg.png) no-repeat center top;
}

#sec1 .txt .box p {
	position: absolute;
	top: 46px;
	right: 95px;
	font-size: 17px;
	line-height: 40px;
	letter-spacing: 2.3px;
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
}

#sec1 .txt span,
#sec1 .txt strong {
	-webkit-writing-mode: horizontal-tb;
	-moz-writing-mode: horizontal-tb;
	-ms-writing-mode: lr-tb;
	writing-mode: horizontal-tb;
	line-height: 1.5;
	text-align: center;
}

#sec1 .txt strong {
	font-size: 145%;
	display: inline-block;
	line-height: 1.2;
}

#sec2 h2 {
	text-align: center;
	padding: 39px 0 32px;
}

#sec2 .info1 { height: 509px; }

#sec2 .info1 .box {
	position: absolute;
	top: 13px;
	left: 0;
}

#sec2 .info1 .box .txt {
	text-align: center;
	margin: 10px 0 0 3px;
}

#sec2 .info1 .photo {
	position: absolute;
	top: 62px;
	right: -62px;
}

#sec2 .info1 dl {
	border: 4px solid #000;
	border-radius: 10px;
	text-align: center;
	margin-top: 30px;
}

#sec2 .info1 dt { margin-top: 15px; }

#sec2 .info1 dd {
	border-top: 2px solid #000;
	margin: 10px 12px;
}

#sec2 .info1 ul { margin-top: 5px; }

#sec2 .info1 li {
	display: inline-block;
	list-style: circle;
}

#sec2 .info2 { height: 542px; }

#sec2 .info2 .box {
	position: absolute;
	top: 49px;
	right: 0;
}

#sec2 .info2 .box .txt {
	text-align: center;
	margin: 20px 0;
}

#sec2 .info2 .box .bnr { padding-left: 63px; }

#sec2 .info2 .photo1 {
	position: absolute;
	top: 0;
	left: -37px;
}

#sec2 .info2 .photo2 {
	position: absolute;
	top: 345px;
	left: 321px;
}

#sec2 .info3 { background: url(../img/hard/sec2_bg.png) no-repeat center 178px; }

#sec2 .info3 .txttop {
	padding: 18px 0 17px;
	text-align: center;
}

#sec2 .info3 .box {
	margin: 27px 0 72px 417px;
	background: #ebe1d6;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding-bottom: 27px;
}

#sec2 .info3 ul { padding: 7px 0 30px 19px; }

#sec2 .info3 ul li {
	display: inline-block;
	background: url(../img/hard/li_icon.png) no-repeat 0px 8px;
	margin-right: 18px;
	padding-left: 18px;
}

#sec2 .info3 ul li span { letter-spacing: -7.3px; }

#sec2 .info3 .photo {
	position: absolute;
	top: -134px;
	left: -73px;
}