@charset "UTF-8";

/*---------------------------------------------

Company Category Page CSS

for ipps.co.jp
coded by d-spica at 2018-03-09

---------------------------------------------*/


@import url(default.css);
@import url(base.css);
@import url(parts.css);


section.company,
section.topmessage {
	position: relative;
	background: #E6E6E6 url(../img/bg-section-top.png) no-repeat 0 0;
	background-size: 100% 120px;
	padding-top: 180px;
}

section.company .nav-section {
	overflow: hidden;
	margin-bottom: 5em;
}

section.company .nav-section li {
	float: left;
	width: 25%;
}

section.company .nav-section li a {
	display: block;
	border-left: solid 1px #FFF;
	background: #F31100;
	padding: 1.5em;
	text-align: center;
	font-size: 114.2%;
	color: #FFF;
}

section.company .nav-section li:nth-child(1) a {
	border-left: none;
}

section.company section {
	position: relative;
	padding-bottom: 8em;
}

section.company section span[id] {
	position: absolute;
	top: -184px;
	left: 0;
}

section.company section h3 {
	margin: 0 auto 2em;
	max-width: 1030px;
	line-height: 1.4;
}

section.company section h3 em {
	display: block;
	margin: 0.1em 0;
	font-family: "Roboto", sans-serif;;
	font-size: 228.5%;
	font-weight: 500;
	color: #F31100;
}

section.company section .tag {
	position: absolute;
	top: 50%;
	left: 1.95%;
	margin-top: 6em;
	width: 12em;
	text-align: center;
	font-size: 78.5%;
	color: #999;
	transform: rotate(-90deg);
	transform-origin: 0 0;
}

section.company section .box {
	margin: 0 auto;
	box-sizing: border-box;
	background: #FFF;
	padding: 3em 3em 1em;
	max-width: 1030px;
	line-height: 2;
}

section.aiyo .tag {
	margin-top: 6em;
}

section.gaiyo .box {
	overflow: hidden;
}

section.gaiyo .box a {
	text-decoration: underline;
	color: #F31100;
}

section.gaiyo .box .photo {
	float: left;
	margin-bottom: 1em;
	max-width: 19.14em;
}

section.gaiyo .box .photo img {
	margin-bottom: 1em;
}

section.gaiyo .box dl {
	margin: 0 0 0.3em 24.5em;
}

section.enkaku .box dl {
	margin: 0 auto 0.3em;
	max-width: 45em;
}

section.gaiyo .box dt,
section.enkaku .box dt {
	border-top: solid 1px #CCC;
	padding: 1.3em 0;
	width: 9em;
}

section.gaiyo .box dd,
section.enkaku .box dd {
	border-top: solid 1px #CCC;
	margin: -4.6em 0 0 11em;
	padding: 1.3em 0;
}

section.gaiyo .box dt:nth-of-type(1),
section.enkaku .box dt:nth-of-type(1) {
	border-top: none;
	padding-top: 0;
}

section.gaiyo .box dd:nth-of-type(1),
section.enkaku .box dd:nth-of-type(1) {
	border-top: none;
	margin-top: -3.3em;
	padding-top: 0;
}

section.soshiki .figure {
	margin-bottom: 2em;
	text-align: center;
}

section.access {
	overflow: hidden;
}

section.access .grid {
	position: relative;
	box-sizing: border-box;
	width: 50%;
	height: 37em;
}

section.access .tag {
	color: #FFF;
}

section.access .grid:nth-of-type(1),
section.access .grid:nth-of-type(4) {
	float: right;
}

section.access .grid:nth-of-type(2),
section.access .grid:nth-of-type(3) {
	float: left;
}

section.access .grid:nth-of-type(1),
section.access .grid:nth-of-type(3) {
	background: #F31100;
	padding: 4.5em;
	color: #FFF;
}

section.access .grid h3 em {
	color: #FFF;
}

section.access .grid dl {
	line-height: 1.8;
}

section.access .grid dt {
	font-size: 114.2%;
}

section.access .grid dd {
	margin-top: 1.8em;
}

section.access .grid:nth-of-type(3) dl {
	position: absolute;
	bottom: 4.5em;
	right: 4.5em;
	text-align: right;
}


section.topmessage {
	padding-bottom: 5em;
}

section.topmessage h2 {
	margin: 2em auto 2.5em;
	max-width: 1030px;
	line-height: 1.6;
	font-size: 228.5%;
}

section.topmessage h2 img {
	position: absolute;
	top: -75px;
	right: 50%;
	margin-right: -515px;
}

section.topmessage .author {
	margin: 0 auto 3.5em;
	max-width: 38em;
	line-height: 1.6;
}

section.topmessage .author em {
	display: block;
	font-size: 142.8%;
}

section.topmessage .tag {
	position: absolute;
	top: 50%;
	left: 1.95%;
	margin-top: 20em;
	width: 12em;
	text-align: center;
	font-size: 78.5%;
	color: #999;
	transform: rotate(-90deg);
	transform-origin: 0 0;
}

section.topmessage .box {
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
	background: #FFF;
	padding: 3em 4em 1em 31em;
	max-width: 1030px;
	min-height: 760px;
	line-height: 2;
}

section.topmessage .box p {
	margin-bottom: 2em;
}

section.topmessage .box .signature {
	text-align: right;
}

section.topmessage .box .signature img {
	display: block;
	margin: 0 0 1em auto;
	width: 16em;
}

section.topmessage .photo {
	position: absolute;
	top: 0;
	left: 4em;
	box-sizing: border-box;
	border-left: solid 1px #fff;
	border-right: solid 1px #fff;
	background: #fff no-repeat 0 110%;
	/* background: #F31100 url(../img/lg-ipps-bg.png) no-repeat 0 110%; */
	/* background: #fff url(../img/lg-ipps-rd.png) no-repeat 50% 50%; */
	background-size: 60% auto;
	padding-top: 3em;
	width: 22em;
	height: 760px;
}

section.topmessage .photo img {
	width: 100%;
}

section.recruit h3 {
	margin-bottom: 1em;
	font-size: 200%;
	font-weight: 700;
}

section.recruit p {
	margin-bottom: 2em;
}

section.recruit p img {
	width: 100%;
}

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

	section.company,
	section.topmessage {
		background-size: 100% auto;
		padding-top: 15%;
	}

	section.company {
		padding-bottom: 4em;
	}

	section.company .nav-section {
		margin-bottom: 3em;
	}

	section.company .nav-section li a {
		padding: 1em 0.5em;
		font-size: 100%;
	}

	section.company section {
		padding-bottom: 3em;
	}

	section.company section span[id] {
		top: -75px;
	}
	
	section.company section h3 {
		margin: 0 1em 1em;
	}

	section.company section h3 em {
		font-size: 171.4%;
	}

	section.company .tag {
		display: none;
	}

	section.company section .box {
		margin: 0 1em;
		padding: 1.5em 1.5em 0.1em;
	}

	section.gaiyo .box .photo {
		float: none;
		margin: 0 auto 1em;
		text-align: center;
	}

	section.gaiyo .box dl {
		margin: 0 0 0.3em;
	}

	section.enkaku .box dl {
		margin: 0 0 0.3em;
		max-width: none;
		line-height: 1.6;
	}

	section.gaiyo .box dt,
	section.enkaku .box dt {
		padding: 0.8em 0 0.4em;
		width: auto;
		font-weight: 600;
	}

	section.gaiyo .box dd,
	section.enkaku .box dd {
		border-top: none;
		margin: 0;
		padding: 0 0 0.8em 1em;
	}

	section.gaiyo .box dd:nth-of-type(1),
	section.enkaku .box dd:nth-of-type(1) {
		margin-top: 0;
	}

	section.access .grid {
		float: none !important;
		width: auto;
		height: auto;
	}

	section.access .grid h3 {
		margin: 0 0 1.5em;
	}
	
	section.access .tag {
		display: none;
	}

	section.access .grid:nth-of-type(1),
	section.access .grid:nth-of-type(3) {
		padding: 1.5em;
	}

	section.access .grid:nth-of-type(2),
	section.access .grid:nth-of-type(4) {
		height: 24em;
	}

	section.access .grid dd {
		margin-top: 1em;
	}

	section.access .grid:nth-of-type(3) dl {
		position: static;
		text-align: left;
	}

	section.topmessage {
		padding-bottom: 3em;
	}

	section.topmessage h2 {
		margin: -12% 0.583em 0.5em;
		text-align: center;
		font-size: 171.4%;
	}

	section.topmessage h2 img {
		display: block;
		position: static;
		margin: 0 auto 1.5em;
		max-width: 60%;
	}

	section.topmessage .author {
		margin: 0 auto 3em;
		padding: 0 1em;
		max-width: 18em;
		text-align: right;
	}

	section.topmessage .tag {
		display: none;
	}

	section.topmessage .box {
		margin: 0 1em;
		padding: 1.5em 1.5em 0.1em;
		min-height: 0;
	}

	section.topmessage .photo {
		position: static;
		margin-top: 3em;
		border: none;
		/* background: #808080 url(../img/lg-ipps-bg.png) no-repeat 0 100%; */
		background: #fff no-repeat 50% 50%;
		background-size: 12em auto;
		padding: 3em 0 24em;
		width: auto;
		height: auto;
	}

	section.company section.recruit h3 {
		margin: 0 0 1.5em;
		font-size: 150%;
	}



}