@charset "UTF-8";
/* CSS Document */

#topPG.wrapper {
	background-color: #939F62;
}
@media screen and (min-width: 800px) {
	#topHeader {
		width: 100%;
		height: calc(100vh - 20px);
		position: relative;
		background-image: url("../images/common/SVG/baba.svg");
		background-size: 300px auto;
		background-repeat: no-repeat;
		background-position: 50px 65px;
		mix-blend-mode: hard-light;
	}
	#topHeader .info {
		color: #FFFFFF;
		width: 534px;
		height: auto;
		min-height: 140px;
		padding: 25px 15px 25px 15px;
		position: absolute;
		top: calc(50% - 140px);
		right: 50px;
		background-image :
		linear-gradient(to right, #FFF, #FFF 6px, transparent 6px, transparent 12px),  /* 上の線 */
		linear-gradient(to bottom, #FFF, #FFF 6px, transparent 6px, transparent 12px), /* 右の線 */
		linear-gradient(to left, #FFF, #FFF 6px, transparent 6px, transparent 12px),  /* 下の線 */
		linear-gradient(to top, #FFF, #FFF 6px, transparent 6px, transparent 12px);   /* 左の線 */
		background-size:
			12px 3px,  /* 上の線 */
			3px 12px, /* 右の線 */
			12px 3px,  /* 下の線 */
			3px 12px;   /* 左の線 */
		background-position:
			left top,  /* 上の線 */
			right top, /* 右の線 */
			right bottom,  /* 下の線 */
			left bottom;   /* 左の線 */
		background-repeat:
			repeat-x,  /* 上の線 */
			repeat-y, /* 右の線 */
			repeat-x,  /* 下の線 */
			repeat-y;   /* 左の線 */
	}
}
@media screen and (min-width: 440px) and (max-width: 799px) {
	#topHeader {
		width: 100%;
		height: calc(100vh - 20px);
		position: relative;
		background-image: url("../images/common/SVG/baba.svg");
		background-size: 150px auto;
		background-repeat: no-repeat;
		background-position: 30px 35px;
		mix-blend-mode: hard-light;
	}
	#topHeader .info {
		color: #FFFFFF;
		width: calc(100% - 60px);
		height: auto;
		min-height: 140px;
		padding: 25px 15px 25px 15px;
		position: relative;
		top: calc(50% - 100px);
		left: 15px;
		background-image :
		linear-gradient(to right, #FFF, #FFF 6px, transparent 6px, transparent 12px),  /* 上の線 */
		linear-gradient(to bottom, #FFF, #FFF 6px, transparent 6px, transparent 12px), /* 右の線 */
		linear-gradient(to left, #FFF, #FFF 6px, transparent 6px, transparent 12px),  /* 下の線 */
			linear-gradient(to top, #FFF, #FFF 6px, transparent 6px, transparent 12px);   /* 左の線 */
		background-size:
			12px 3px,  /* 上の線 */
			3px 12px, /* 右の線 */
			12px 3px,  /* 下の線 */
			3px 12px;   /* 左の線 */
		background-position:
			left top,  /* 上の線 */
			right top, /* 右の線 */
			right bottom,  /* 下の線 */
			left bottom;   /* 左の線 */
		background-repeat:
			repeat-x,  /* 上の線 */
			repeat-y, /* 右の線 */
			repeat-x,  /* 下の線 */
			repeat-y;   /* 左の線 */
	}
}
@media screen and (max-width: 439px) {
	#topHeader {
		position: relative;
		padding: 200px 25px 50px 25px;
		background-image: url("../images/common/SVG/baba.svg");
		background-size: 100px auto;
		background-repeat: no-repeat;
		background-position: 30px 35px;
		mix-blend-mode: hard-light;
	}
	#topHeader .info {
		color: #FFFFFF;
		height: auto;
		min-height: 140px;
		padding: 25px 15px 25px 15px;
		position: relative;
		background-image :
		linear-gradient(to right, #FFF, #FFF 6px, transparent 6px, transparent 12px),  /* 上の線 */
		linear-gradient(to bottom, #FFF, #FFF 6px, transparent 6px, transparent 12px), /* 右の線 */
		linear-gradient(to left, #FFF, #FFF 6px, transparent 6px, transparent 12px),  /* 下の線 */
			linear-gradient(to top, #FFF, #FFF 6px, transparent 6px, transparent 12px);   /* 左の線 */
		background-size:
			12px 3px,  /* 上の線 */
			3px 12px, /* 右の線 */
			12px 3px,  /* 下の線 */
			3px 12px;   /* 左の線 */
		background-position:
			left top,  /* 上の線 */
			right top, /* 右の線 */
			right bottom,  /* 下の線 */
			left bottom;   /* 左の線 */
		background-repeat:
			repeat-x,  /* 上の線 */
			repeat-y, /* 右の線 */
			repeat-x,  /* 下の線 */
			repeat-y;   /* 左の線 */
	}
}

#topHeader .info h3 {
	font-family: "Roboto Slab";
	font-weight: 300;
	font-size: 18px;
	line-height: 18px;
	text-align: center;
}
#topHeader .info .toInfoList {
	width: 27px;
	heigth: 19px;
	display: block;
	position: absolute;
	top: 20px;
	right: 20px;
	background-image: url("../images/common/icon_list.png");
	background-size: 27px 19px;
	background-repeat: no-repeat;
}
#topHeader .info ul {
	margin-top: 15px;
}
#topHeader .info ul li {
	
}
#topHeader .info ul li {
	
}
#topHeader .info ul li a {
	color: #FFF;
	font-family: "Zen Kaku Gothic New";
	font-size: 14px;
	line-height: 20px;
	padding: 9px 9px 9px 34px;
	display: block;
	background-image: url("../images/common/midashi-point@2x.png");
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: 10px 13px;
	border: solid 1px rgba(255, 255, 255, 0);
	transition: all 0.2s 0s ease-out;
}
#topHeader .info ul li a:hover {
	border: solid 1px rgba(255, 255, 255, 0.5);
}
#topHeader .info ul li a h5 {
	font-size: 12px;
	line-height: 18px;
	font-weight: 300;
}
topHeader .info ul li a h5 span {
	margin-left: 5px;
	display: inline-block;
}

#topHeader .info h1 {
	width: 100%;
	height: 15px;
	text-indent: -9999px;
	display: block;
	margin: 20px 0 0 0;
	background-image: url("../images/common/SVG/babadesign.svg");
	background-size: 153px auto;
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) 0px;
}
#topHeader .toNext {
	width: 34px;
	height: 22px;
	display: block;
	position: absolute;
	left: calc(50% - 11px);
	bottom: 0px;
	background-image: url("../images/common/arrow-down@2x.png");
	background-size: 12px auto;
	background-repeat: no-repeat;
	background-position: center 10px;
	background-color: #222;
	transition: all 0.1s 0s ease-out;
}
#topHeader .toNext:hover {
	background-position: center 13px;
}

@media screen and (min-width: 800px) {
	#workArea {
		width: 100%;
		height: auto;
		color: #FFFFFF;
		padding: 15px 0px 50px 0px;
		position: relative;
		background-color: #333;
	}
}
@media screen and (max-width: 799px) {
	#workArea {
		width: 100%;
		height: auto;
		color: #FFFFFF;
		padding: 15px 0px 10px 0px;
		position: relative;
		background-color: #333;
	}
}
#workArea .slideBannerWrap {
	
}
#workArea a.works:hover {
	background-color: #FFF;
}
#workArea ul.work_cate {
	position: relative;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}
#workArea ul.work_cate li {
	display: inline-block;
}
#workArea ul.work_cate li a {
	color: #FFFFFF;
	display: block;
	padding: 0px 10px;
	border: solid 1px rgba(255, 255, 255, 0);
	transition: all 0.2s 0s ease-out;
}
#workArea ul.work_cate li a:hover {
	text-decoration: none;
	border: solid 1px rgba(255, 255, 255, 0.5);
}
#workArea p {
	font-family: "Roboto Slab";
	font-weight: 300;
	text-align: center;
	line-height: 30px;
}




@media screen and (min-width: 1300px) {
	#linkArea {
		font-family: "Roboto Slab";
		padding: 15px 50px 10px 50px;
	}
	#linkArea ul {
		display: flex;
		height: 165px;
	}
	#linkArea ul li {
		margin: 0px 15px 0px 0px;
		width: calc(100% / 4);
		height: 150px;
	}
	#linkArea ul li:last-child {
		margin: 0px;
	}
	#linkArea ul li a {
		font-family: "Roboto Slab";
		color: #FFF;
		text-align: center;
		font-size: 16px;
		line-height: 240px;
		width: 100%;
		height: 160px;
		display: block;
		background: rgba(50,50,50,0.1);
		transition: all 0.1s 0s ease-out;
	}
	#linkArea ul li a:hover {
		background: rgba(50,50,50,0.3);
	}
	#linkArea ul li a.link_info {
		background-image: url("../images/common/icon-profile.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 82px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 27px, right bottom;
	}
	#linkArea ul li a.link_work {
		background-image: url("../images/common/icon-works3.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 80px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 27px, right bottom;
	}
	#linkArea ul li a.link_profile {
		background-image: url("../images/common/icon-info.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 60px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 25px, right bottom;
	}
	#linkArea ul li a.link_contact {
		background-image: url("../images/common/icon-mail2.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 60px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 33px, right bottom;
	}
	#linkArea ul li a.link_office {
		background-image: url("../images/common/icon-office.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 107px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 25px, right bottom;
	}
	#linkArea ul li a.link_pakection {
		background-image: url("../images/common/icon-pakection.svg"),url("../images/common/mark-link3.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 43px auto, 20px auto, 35px auto;
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-position: center 32px, 10px 12px, right bottom;
	}
}
@media screen and (min-width: 800px) and (max-width: 1299px) {
	#linkArea {
		font-family: "Roboto Slab";
		padding: 15px 10px 10px 10px;
	}
	#linkArea ul {
		display: relative;
		text-align: center;
	}
	#linkArea ul li {
		margin: 0px 10px 5px 10px;
		width: calc(100% / 3 - 40px);
		height: 165px;
		display: inline-block;
	}
	#linkArea ul li:nth-child(2n) {
		/*margin-left: 0px;*/
	}
	#linkArea ul li a {
		font-family: "Roboto Slab";
		color: #FFF;
		text-align: center;
		font-size: 16px;
		line-height: 240px;
		width: 100%;
		height: 160px;
		display: block;
		background: rgba(50,50,50,0.1);
		transition: all 0.1s 0s ease-out;
	}
	#linkArea ul li a:hover {
		background: rgba(50,50,50,0.3);
	}
	#linkArea ul li a.link_info {
		background-image: url("../images/common/icon-profile.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 82px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 27px, right bottom;
	}
	#linkArea ul li a.link_work {
		background-image: url("../images/common/icon-works3.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 80px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 27px, right bottom;
	}
	#linkArea ul li a.link_profile {
		background-image: url("../images/common/icon-info.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 60px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 25px, right bottom;
	}
	#linkArea ul li a.link_contact {
		background-image: url("../images/common/icon-mail2.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 60px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 33px, right bottom;
	}
	#linkArea ul li a.link_office {
		background-image: url("../images/common/icon-office.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 107px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 25px, right bottom;
	}
	#linkArea ul li a.link_pakection {
		background-image: url("../images/common/icon-pakection.svg"),url("../images/common/mark-link3.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 43px auto, 20px auto, 35px auto;
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-position: center 32px, 10px 12px, right bottom;
	}
}
@media screen and (max-width: 799px) {
	#linkArea {
		font-family: "Roboto Slab";
		padding: 15px 0px 10px 0px;
		height: 457px;
	}
	#linkArea ul {
		display: relative;
		text-align: center;
	}
	#linkArea ul li {
		margin: 0px 10px 5px 10px;
		width: calc(100% / 2 - 30px);
		height: 150px;
		display: inline-block;
	}
	#linkArea ul li:nth-child(2n) {
		margin-left: 0px;
	}
	#linkArea ul li a {
		font-family: "Roboto Slab";
		color: #FFF;
		text-align: center;
		font-size: 15px;
		line-height: 220px;
		width: 100%;
		height: 140px;
		display: block;
		background: rgba(50,50,50,0.1);
		transition: all 0.1s 0s ease-out;
	}
	#linkArea ul li a:hover {
		background: rgba(50,50,50,0.3);
	}
	#linkArea ul li a.link_info {
		background-image: url("../images/common/icon-profile.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 75px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 23px, right bottom;
	}
	#linkArea ul li a.link_work {
		background-image: url("../images/common/icon-works3.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 75px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 23px, right bottom;
	}
	#linkArea ul li a.link_profile {
		background-image: url("../images/common/icon-info.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 55px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 27px, right bottom;
	}
	#linkArea ul li a.link_contact {
		background-image: url("../images/common/icon-mail2.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 50px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 33px, right bottom;
	}
	#linkArea ul li a.link_office {
		background-image: url("../images/common/icon-office.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 95px auto, 35px auto;
		background-repeat: no-repeat, no-repeat;
		background-position: center 25px, right bottom;
	}
	#linkArea ul li a.link_pakection {
		background-image: url("../images/common/icon-pakection.svg"),url("../images/common/mark-link3.svg"),url("../images/common/mark-go@2x-8.png");
		background-size: 35px auto, 20px auto, 35px auto;
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-position: center 32px, 10px 12px, right bottom;
	}
}