﻿
.secWrap a {
	color: #1f1f1f;
}


@media (min-width: 768px) {

	.secWrap {
		max-width: 1200px;
		margin: 0 auto;
	}

	.secWrap a {
		transition: .3s;
	}

	.secWrap a:hover {
		opacity: 0.5;
	}

}

@media (max-width: 769px) {

	.secWrap {
		margin: 1.5em;
	}

}

/*
company
//////////////////////////////////////////////////////////////*/

#company .secWrap ul {
	border-top: 1px solid #aaa;
}

#company .secWrap ul li {
	border-bottom: 1px solid #aaa;
}

#company .secWrap ul li dl dd span {
	display: inline-block;
	width: calc( 100% - 6rem );
	baseline-source: first;
}

#company .secWrap ul li dl dd span.date {
	width: 6rem;
}

#company .secWrap h2 {
	background: #eee;
	border-left: 4px solid #0ea0d4;
	padding: 1.2rem 1.5rem;
	font-weight: 500;
	line-height: 1;
}

#company .secWrap h2 small {
	font-weight: 300;
}


@media (min-width: 768px) {

	#company .secWrap {
		max-width: 1200px;
		margin: 0 auto;
		padding: 30px 0 0;
	}

	#company .secWrap ul li dl {
		display: flex;
		padding: 0;
		margin: 0;
	}

	#company .secWrap ul li dl dt {
		padding: 1.5rem;
		background: #eee;
		width: 27%;
		position: relative;
	}

	#company .secWrap ul li dl dt span {
		display: block;
		position: absolute;
		top: 50%;
		transform: translateY( -50% );
	}

	#company .secWrap ul li dl dd {
		padding: 1.5rem;
		width: 73%;
	}

	#company .secWrap h2 {
		margin-bottom: 2rem;
	}

}

@media (max-width: 769px) {

	#company .secWrap {
		margin: 1.5em;
	}

	#company .secWrap h2 {
		margin-bottom: 1.5rem;
		padding: 0.75rem 1rem;
		font-size: 1.2rem;
	}

	#company .secWrap ul li dl {
		font-size: 0.82rem;
	}

	#company .secWrap ul li dl dt {
		font-weight: 600;
		padding: 0.5rem 0.5rem 0;
	}

	#company .secWrap ul li dl dd {
		padding: 0.5rem;
	}

}

/*
message
//////////////////////////////////////////////////////////////*/

#message {
	background: #eeeeee;
	position: relative;
	overflow: hidden;
}

#message .secWrap {
	position: relative;
	z-index: 1;
}

#message dl {
	position: relative;
	margin-top: -12vh;
}

#message dl dd p {
	position: absolute;
	color: #fff;
	bottom: 10%;
	left: 5%;
	margin: 0;
	width: 50%;
}

#message dl dd p small {
	display: inline-block;
	margin-right: 1rem;
}

#message dl dd p.caption {
	bottom: 50%;
	top: 50%;
	transform: translateY( -50% );
	font-weight: 500;
}

@media (min-width: 768px) {

	#message:before {
		background: #fff;
		content: "";
		clip-path: polygon(0% 0%, 100% 0, 100% 50%, 0% 100%);
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 150vh;
	}

	#message .secWrap {
		max-width: 1200px;
		margin: 0 auto;
	}

	#message .secWrap h2 {
		width: 25%;
		margin: 100px auto 50px;
	}

	#message dl dd p {
		font-size: 1.5rem;
	}

	#message dl dd p.caption {
		font-size: 2.2rem;
	}

	#message .secWrap.message {
		margin: 50px auto 100px;
		width: 65%;
		line-height: 1.8;
	}

}

@media (max-width: 769px) {

	#message:before {
		background: #fff;
		content: "";
		clip-path: polygon(0% 0%, 100% 0, 100% 28%, 0% 55%);
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 150vh;
	}

	.secWrap {
		margin: 1.5em;
	}

	#message .secWrap h2 {
		width: 40%;
		margin: 3rem auto 2rem;
	}

	#message dl dd p {
		font-size: 3vw;
	}

	#message dl dd p.caption {
		font-size: 3.5vw;
	}

	#message .secWrap.message {
		margin: 1.5rem 2.5rem 2.5rem;
		line-height: 1.8;
		
	}

	#message dl {
		margin-top: -7vh;
	}

	.secWrap.message {
		font-size: 0.82rem;
	}

}

