@charset "utf-8";


/* ==============================
 PAGE
 ======================================== */

/* Main Visual
------------------------------*/

.main-visual {
	display: table;
	width: 100%;
	height: 584px;
}
.main-visual.index {
	background-image: none;
}
.main-visual.index .mv-slide-show li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}
.main-visual.index .mv-slide-show li:nth-child(1) {
	background-image: url(../img/mv/mv_top_01.png);
	display: list-item;
}
.main-visual.index .mv-slide-show li:nth-child(2) {
	background-image: url(../img/mv/mv_top_02.png);
}
.main-visual.index .mv-slide-show li:nth-child(3) {
	background-image: url(../img/mv/mv_top_03.png);
}
.main-visual-text {
	position: relative;
	display: table-cell;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
}
.main-visual-text img {
	width: 900px;
	height: 242px;
}


/* Main Contents
------------------------------*/
.main {
	margin-top: calc(76px + 584px);
	padding-bottom: 0;
}


/* Subhead
------------------------------*/
h2 {
	border-bottom: 0;
	float: left;
}
h2:first-child {
	margin-top: 15px;
}


/* Link Banner
------------------------------*/
.banner-link-list * {
	box-sizing: border-box;
}
.banner-link-list {
	width: 100%;
	margin: 0 auto;
}
.banner-link-list:after {
	display: block;
	width: 0;
	height: 0;
	content: "";
	clear: both;
}
.banner-link-list li {
	float: left;
	display: block;
	position: relative;
	width: 100%;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.banner-link-list li.about,
.banner-link-list li.recruit {
	width: 50%;
}
.banner-link-list li a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.banner-link-list li a:before {
	content:"";
	display: block;
	padding-top: 25.42%;	/* Keeps BgImage Aspect Ratio */
}
.banner-link-list li.about a:before,
.banner-link-list li.recruit a:before {
	padding-top: 50.84%;	/* Keeps BgImage Aspect Ratio */
}

/* text */
.banner-link-list li p {
	position: absolute;
	width: 34%;
	line-height: 1.6;
	font-size: 18px;
	color: #333;
}
.banner-link-list li.mission p {
	top: 54.66%;
	left: 8.47%;
}
.banner-link-list li.service p {
	top: 52%;
	left: 55.76%;
}

/* background image */
.banner-link-list li.mission {
	background-image: url(../img/banner/banner_mission.png);
}
.banner-link-list li.service {
	background-image: url(../img/banner/banner_service.png);
}
.banner-link-list li.about {
	background-image: url(../img/banner/banner_about.png);
}
.banner-link-list li.recruit {
	background-image: url(../img/banner/banner_recruit.png);
}

/* title image */
.banner-link-list li a:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.banner-link-list li.mission a:after {
	content: url(../img/banner/title/banner_mission_title.png);
	top: 35.55%;
	left: 8.47%;
}
.banner-link-list li.service a:after {
	content: url(../img/banner/title/banner_service_title.png);
	top: 32.66%;
	left: 55.76%;
}
.banner-link-list li.about a:after {
	content: url(../img/banner/title/banner_about_title.png);
	top: 45.33%;
	left: 39.32%;
}
.banner-link-list li.recruit a:after {
	content: url(../img/banner/title/banner_recruit_title.png);
	top: 45.33%;
	left: 37.28%;
}


/* ==============================
 PARTS
 ======================================== */

 /* Facebook Share Button
 ------------------------------*/
.fb-like {
	float: left;
	padding: 15px 0 0 30px;
}
.fb-like:before {
	display: block;
	content: "";
	width: 0;
	height: 0;
	clear: both;
}


/* Facebook Feed
------------------------------*/
#fb-list * {
	box-sizing: border-box;
}
#fb-list {
	display: table;
	width: 1060px;
	margin-bottom: 50px;
	overflow: hidden;
}
#fb-list li {
	display: table-cell;
	table-layout: fixed;
	vertical-align: top;
	width: 33.33%;
	padding-right: 40px;
}
#fb-list li:after {
	display: block;
	content: "";
	width: 0;
	height: 0;
	clear: both;
}
#fb-list li * {
	float: left;
}
#fb-list li .image {
	width: 130px;
	height: 130px;
	background-size: cover;
	background-position: center center;
	padding-right: 15px;
}
#fb-list li .image img {
	width: 100%;
}
#fb-list li .text {
	width: calc(100% - 130px);
	padding-left: 15px;
}
#fb-list li p {
	line-height: 1.5;
	font-size: 14px;
	word-break: break-all;
	width: 100%;
}
#fb-list li p.date {
	font-family: "Hiragino Kaku Gothic W4 JIS2004", "ヒラギノ角ゴ Pro W3";
	font-weight: bold;
}



/* ==============================
 For Smart Phone
 ======================================== */
@media only screen and (max-width: 900px) {
	/* Main Visual
	------------------------------*/
	.main-visual {
		height: 450px;
	}
	.main-visual-text {
		padding: 0 25px;
	}
	.main-visual-text img {
		width: 100%;
		height: auto;
	}

	/* Main Contents
	------------------------------*/
	.main {
		margin-top: calc(44px + 450px);
	}
}
@media only screen and (max-width: 768px) {
	/* Facebook Feed
	------------------------------*/
	#fb-list {
		display: block;
		width: 100%;
		margin-bottom: 30px;
	}
	#fb-list li {
		display: block;
		width: 100%;
		margin-bottom: 15px;
		padding-right: 0;
	}
	#fb-list li p {
		font-size: 12px;
	}
	#fb-list li .image {
		width: 90px;
		height: 90px;
		padding-right: 10px;
	}
	#fb-list li .text {
		width: calc(100% - 90px);
	}

	/* Facebook Share Button
  ------------------------------*/
 .fb-like {
 	float: right;
 }
}

@media only screen and (max-width: 600px) {
	/* Link Banner
	------------------------------*/
	.banner-link-list li.about,
	.banner-link-list li.recruit {
		width: 100%;
	}
	.banner-link-list li a:before {
		padding-top: 81.25%;	/* Keeps BgImage Aspect Ratio */
	}
	.banner-link-list li.about a:before,
	.banner-link-list li.recruit a:before {
		padding-top: 56.25%;	/* Keeps BgImage Aspect Ratio */
	}
	/* text */
	.banner-link-list li p {
		top: 0;
		width: 100%;
		padding: 0 15px;
		line-height: 1.6;
		font-size: 12px;
		color: #333;
	}
	.banner-link-list li.mission p {
		top: 34%;
		left: 0;
	}
	.banner-link-list li.service p {
		top: 78%;
		left: 0;
	}
	/* background image */
	.banner-link-list li.mission {
		background-image: url(../img/banner/banner_mission_sp.png);
	}
	.banner-link-list li.service {
		background-image: url(../img/banner/banner_service_sp.png);
	}
	.banner-link-list li.about {
		background-image: url(../img/banner/banner_about_sp.png);
	}
	.banner-link-list li.recruit {
		background-image: url(../img/banner/banner_recruit_sp.png);
	}
	/* title image */
	.banner-link-list li a:after {
		content: ""!important;
		width: 110px;
		height: 43px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-left: -55px;
	}
	.banner-link-list li.mission a:after {
		background-image: url(../img/banner/title/banner_mission_title_sp.png);
		top: 11.53%;
		left: 50%;
	}
	.banner-link-list li.service a:after {
		background-image: url(../img/banner/title/banner_service_title_sp.png);
		top: 55.76%;
		left: 50%;
	}
	.banner-link-list li.about a:after {
		background-image: url(../img/banner/title/banner_about_title_sp.png);
		top: 44.44%;
		left: 50%;
	}
	.banner-link-list li.recruit a:after {
		background-image: url(../img/banner/title/banner_recruit_title_sp.png);
		top: 44.44%;
		left: 50%;
	}
}