html {
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	margin: 0px;
	background-color: #00A6FF;
	font-family: Meiryo , "メイリオ" , sans-serif;
	padding: 0px;
}

.Container {
	position: relative;
	width: 100%;
	height: 100%;
	height: auto !important;
	min-height: 100%;
}

.HeaderArea {
	position: relative;
	width: 980px;
	height: 120px;
	margin: 0px auto;
}
.HeaderArea h1 {
	position: absolute;
	top: 50%;
	right: 0px;
	height: 18px;
	font-size: 12px;
	font-weight: lighter;
	color: #FFFFFF;
	margin: -9px 0px 0px 0px;
}

#Logo {
	position: absolute;
	top: 30px;
	left: 0px;
	width: 190px;
	height: 60px;
	display: block;
}

.Contents {
	padding: 0px 0px 180px 0px;
}

.NaviArea {
	position: relative;
	width: 980px;
	height: 815px;
	margin: 0px 0px 100px 0px;
}

.AboutBtn,
.BusinessBtn,
.ContactBtn,
.RecruitBtn,
.LblPrintBtn,
#LblPrintImg,
.MedicaBtn,
#MedicaImg,
.KurashiaiBtn,
#KurashiaiImg,
.DesignBtn,
#DesignImg,
.TerminalBtn,
#TerminalImg,
.FbBtn,
.TwtBtn,
.SendaBtn {
 	position: absolute;
 	display: block;
	outline: none;
	perspective: 500px;
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}
.AboutBtn,
.BusinessBtn,
.ContactBtn,
.RecruitBtn,
.FbBtn,
.TwtBtn,
.SendaBtn {
	width: 155px;
	height: 155px;
}
.LblPrintBtn,
#LblPrintImg,
.MedicaBtn,
#MedicaImg,
.KurashiaiBtn,
#KurashiaiImg,
.DesignBtn,
#DesignImg,
.TerminalBtn,
#TerminalImg {
	width: 320px;
	height: 155px;
}
.AboutBtn {
	top: 0px;
	left: 0px;
}
.BusinessBtn {
	top: 0px;
	left: 165px;
}
.ContactBtn {
	top: 165px;
	left: 0px;
}
.RecruitBtn {
	top: 165px;
	left: 165px;
}
.LblPrintBtn {
	top: 165px;
	left: 330px;
}
#LblPrintImg {
	top: 0px;
	left: 330px;
}
#MedicaImg {
	top: 0px;
	right: 0px;
}
.MedicaBtn {
	top: 165px;
	right: 0px;
}
#KurashiaiImg {
	top: 330px;
	left: 0px;
}
.KurashiaiBtn {
	bottom: 165px;
	left: 0px;
}
#DesignImg {
	top: 330px;
	left: 330px;
}
.DesignBtn {
	bottom: 165px;
	left: 330px;
}
#TerminalImg {
	top: 330px;
	right: 0px;
}
.TerminalBtn {
	bottom: 165px;
	right: 0px;
}
.FbBtn {
	bottom: 0px;
	left: 330px;
}
.TwtBtn {
	bottom: 0px;
	right: 330px;
}
.SendaBtn {
	bottom: 0px;
	right: 165px;
}

.AboutBtn span,
.AboutBtn .back {
	background-image: url("../index/about_btn.gif");
}
.BusinessBtn span,
.BusinessBtn .back {
	background-image: url("../index/business_btn.gif");
}
.ContactBtn span,
.ContactBtn .back {
	background-image: url("../index/contact_btn.gif");
}
.RecruitBtn span,
.RecruitBtn .back {
	background-image: url("../index/recruit_btn.gif");
}
.LblPrintBtn span,
.LblPrintBtn .back {
	background-image: url("../index/lblprint_btn.gif");
}
.MedicaBtn span,
.MedicaBtn .back {
	background-image: url("../index/medica_btn.gif");
}
.KurashiaiBtn span,
.KurashiaiBtn .back {
	background-image: url("../index/kurashiai_btn.gif");
}
.DesignBtn span,
.DesignBtn .back {
	background-image: url("../index/design_btn.gif");
}
.TerminalBtn span,
.TerminalBtn back {
	background-image: url("../index/terminal_btn.gif");
}
.FbBtn span,
.FbBtn back {
	background-image: url("../index/fb_btn.gif");
}
.TwtBtn span,
.TwtBtn back {
	background-image: url("../index/twt_btn.gif");
}
.SendaBtn span,
.SendaBtn .back {
	background-image: url("../index/senda_btn.gif");
}
.AboutBtn span,
.BusinessBtn span,
.ContactBtn span,
.RecruitBtn span,
.LblPrintBtn span,
.MedicaBtn span,
.KurashiaiBtn span,
.DesignBtn span,
.TerminalBtn span,
.FbBtn span,
.TwtBtn span,
.SendaBtn span {
	position: absolute;
	top: 0px;
	display: block;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
}
.AboutBtn span,
.BusinessBtn span,
.ContactBtn span,
.RecruitBtn span,
.FbBtn span,
.TwtBtn span,
.SendaBtn span {
	width: 155px;
	height: 155px;	
	background-size: 155px 310px;
}
.LblPrintBtn span,
.MedicaBtn span,
.KurashiaiBtn span,
.DesignBtn span,
.TerminalBtn span {
	width: 320px;
	height: 155px;
	background-size: 320px 310px;
}
.AboutBtn .back,
.BusinessBtn .back,
.ContactBtn .back,
.RecruitBtn .back,
.FbBtn .back,
.TwtBtn .back,
.SendaBtn .back {
	background-size: 155px 310px;
	background-position: 0px -155px;
	transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
}
.LblPrintBtn .back,
.MedicaBtn .back,
.KurashiaiBtn .back,
.DesignBtn .back,
.TerminalBtn .back {
	background-size: 320px 310px;
	background-position: 0px -155px;
	transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
}
.AboutBtn:hover .front,
.BusinessBtn:hover .front,
.ContactBtn:hover .front,
.RecruitBtn:hover .front,
.LblPrintBtn:hover .front,
.MedicaBtn:hover .front,
.KurashiaiBtn:hover .front,
.DesignBtn:hover .front,
.TerminalBtn:hover .front,
.FbBtn:hover .front,
.TwtBtn:hover .front,
.SendaBtn:hover .front {
	transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
}
.AboutBtn:hover .back,
.BusinessBtn:hover .back,
.ContactBtn:hover .back,
.RecruitBtn:hover .back,
.LblPrintBtn:hover .back,
.MedicaBtn:hover .back,
.KurashiaiBtn:hover .back,
.DesignBtn:hover .back,
.TerminalBtn:hover .back,
.FbBtn:hover .back,
.TwtBtn:hover .back,
.SendaBtn:hover .back {
	transform: rotateX(360deg);
	-webkit-transform: rotateX(360deg);
	display: block;
	backface-visibility: hidden;
}

.AboutBtn strong,
.BusinessBtn strong,
.ContactBtn strong,
.RecruitBtn strong,
.LblPrintBtn strong,
.MedicaBtn strong,
.KurashiaiBtn strong,
.DesignBtn strong,
.TerminalBtn strong,
.FbBtn strong,
.TwtBtn strong,
.SendaBtn strong {
	position: absolute;
	bottom: 5px;
	font-size: 14px;
	font-weight: lighter;
	margin: 0px;
	color: #FFFFFF;
}
.AboutBtn strong,
.BusinessBtn strong,
.ContactBtn strong,
.RecruitBtn strong,
.FbBtn strong,
.TwtBtn strong,
.SendaBtn strong {
	width: 155px;
	left: 0px;
	text-align: center;
}
.LblPrintBtn strong,
.MedicaBtn strong,
.KurashiaiBtn strong,
.DesignBtn strong,
.TerminalBtn strong {
	left: 15px;
}

.AboutBtn h2,
.BusinessBtn h2,
.ContactBtn h2,
.RecruitBtn h2,
.LblPrintBtn h2,
.MedicaBtn h2,
.KurashiaiBtn h2,
.DesignBtn h2,
.TerminalBtn h2,
.FbBtn h2,
.TwtBtn h2,
.SendaBtn h2 {
	height: 155px;
	font-size: 12px;
	text-align: center;
	font-weight: lighter;
	color: #FFFFFF;
	margin: 0px 0px;
	vertical-align: middle;
	display: table-cell;
}
.AboutBtn h2,
.BusinessBtn h2,
.ContactBtn h2,
.RecruitBtn h2,
.FbBtn h2,
.TwtBtn h2,
.SendaBtn h2 {
	width: 155px;
	line-height: 180%;
}
.LblPrintBtn h2,
.MedicaBtn h2,
.KurashiaiBtn h2,
.DesignBtn h2,
.TerminalBtn h2 {
	width: 320px;
}

.PrArea {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 320px;
	height: 155px;
	overflow: hidden;
	margin: 0px;
}
.PrArea ul {
	width: 320px;
	height: 155px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
.PrArea li {
	width: 320px;
	height: 155px;
	float: left;
}
.PrArea img {
	width: 320px;
	height: 155px;
	display: block;
	margin: 0px;
	border: none;
}

/*
.slider-arrows--left,
.slider-arrows--right {
	position: absolute;
	top: 0px;
	width: 20px;
	height: 140px;
	margin: 0px;
	background-size: 20px 130px;
	cursor: pointer;
}
.slider-arrows--left {
	left: 0px;
	background-image: url("../index/slider_l.png");
}
.slider-arrows--right {
	right: 0px;
	background-image: url("../index/slider_r.png");
}
*/

.slider-nav {
	position: absolute;
	bottom: 8px;
}
.slider-nav-item {
	width: 9px;
	height: 9px;
	float: left;
	clear: none;
	display: block;
	margin: 0px 3px 0px;
	background: #CFCFCF;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}
.slider-nav-item:hover {
	background: #FF8800;
}
.slider-nav-item--current {
  background: #00A0FF;
}

.BlogArea {
	position: absolute;
	top: 330px;
	left: 0px;
	width: 320px;
	height: 320px;
}
.EyecatchArea {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 320px;
	height: 320px;
	overflow: hidden;
}
.EyecatchArea img {
	position: absolute;
	top: 0px;
	left: -140px;
	width: 600px;
	height: 320px;
	clip: rect(0px , 520px , 320px , 140px);
	border: none;
	display: block;
}
.TitleBack {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 320px;
	height: 80px;
	background-color: #000000;
	opacity: 0.5;
}
.BlogTitle {
	position: absolute;
	bottom: 10px;
	left: 15px;
	width: 290px;
	height: 60px;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 170%;
}
.BlogTitle a {
	color: #FFFFFF;
	text-decoration: none;
}
.BlogTitle a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
.BlogTitle p {
	margin: 0px;
	word-break: break-all;
	overflow: hidden;
}

.Contents {
	position: relative;
	width: 990px;
	height: 100%;
	padding: 0px 0px 180px 0px;
	margin: 0px auto;
}

.Footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 180px;
	background-color: #404040;
}
.FooterArea {
	position: relative;
	width: 990px;
	height: 180px;
	margin: 0px auto;
}
.FooterArea p {
	position: absolute;
	top: 15px;
	left: 0px;
	margin: 0px;
	color: #8E8E8E;
	font-size: 12px;
	font-weight: bold;
}
.FooterMenuArea {
	position: absolute;
	top: 40px;
	left: 0px;
	height: 15px;
}
.FooterMenuArea a {
	background-image: url("../img/footer_list_icn.gif");
	background-size: 12px 30px;
	background-repeat: no-repeat;
	color: #8E8E8E;
	font-size: 12px;
	text-decoration: none;
	overflow: hidden;
	padding: 0px 0px 0px 20px;

}
.FooterMenuArea a:hover {
	color: #FFFFFF;
	background-position: 0px -15px;
}
#FooterLogo {
	position: absolute;
	top: 20px;
	right: 300px;
	width: 150px;
	height: 40px;
	display: block;
}
.FooterInfoArea {
	position: absolute;
	top: 20px;
	right: 0px;
	width: 260px;
	height: 120px;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 180%;
	border-left: solid 1px #FFFFFF;
	padding: 0px 0px 0px 20px;
}