@charset "UTF-8";

/* メイン画像 */
.mainimg {
	
	height: auto;
	padding-top: 19%;
	background-image: url('../img/under_mainimage.png');
	background-position: center center;

}

/* COMPANY */
#company .inner {

	padding-top: 5em;

}

#company h2 {
	
	position: relative;
	width: 17.5em;
	margin: 0 auto;
	margin-bottom: 4em;
	overflow: hidden;

}

#company h2:after {

	position: absolute;
	top: 0;
	right: 0;
	content: "";
	width:  100%;
	height: 100%;
	background: #fff;
	transition: all 1.5s;

}

#company h2.active:after {

	width: 0;

}

#company h2 img {

	width: 100%;

}

#company .table_wrap {

	position: relative;
	width: 74%;
	margin: 0 auto;
	margin-bottom: 11em;
	background-image: url('../img/border.png');
	background-size: cover;

}

#company table {

	width: 100%;
	margin: 0 auto;
	border-collapse: collapse;

}

#company table tr th, #company table tr td {
	
	padding: 0.6em 0;
	font-size: 18px;
	letter-spacing: 0.15em;

}

#company table tr th {
	
	text-align: left;
	font-weight: normal;
	padding-left: 0.5em;

}

#company table thead tr th {
	
	width: 34%;
	padding-top: 0.2em;
	padding-bottom: 0.9em;
	padding-left: 0.2em;
	font-size: 25px;

}

#company .map {
	
	position: absolute;
	right: 2em;
	bottom: -2em;
	display: block;
	width: 7em;

}

#company .map img {

	width: 100%;

}

/* MESSAGE */
#message {

	margin-bottom: 10em;

}

#message h2 {
	
	position: relative;
	width: 17em;
	margin: 0 auto;
	margin-bottom: 5.5em;
	overflow: hidden;

}

#message h2:after {

	position: absolute;
	top: 0;
	right: 0;
	content: "";
	width:  100%;
	height: 100%;
	background: #fff;
	transition: all 1.5s;

}

#message h2.active:after {

	width: 0;

}

#message h2 img {

	width: 100%;

}

#message .txt {
	
	opacity: 0;
	float: right;
	width: 48%;
	-webkit-transform: translateY(60px);
	transform: translateY(60px);
	transition: all 1.2s 0.3s;

}

#message .txt.active {

	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);

}

#message .txt p {

	font-size: 18px;
	line-height: 2;
	letter-spacing: 0.13em;

}

#message .txt .line2 {

	margin-top: 2em;
	margin-bottom: 1em;

}

#message .txt .line3 {

	text-align: right;

}

#message .img {
	
	opacity: 0;
	width: 45%;
	height: 548px;
	background-image: url('../img/photo.png');
	background-size: cover;
	background-position: center center;
	-webkit-transform: translateY(60px);
	transform: translateY(60px);
	transition: all 1.2s;

}

#message .img.active {

	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);

}



/* 中サイズ */
@media only screen and (max-width: 1366px) {
	
	/* COMPANY */
	#company .inner {
		
		padding-top: 4em;
		
	}
	
	#company h2 {
		
		width: 15.5em;
		margin-bottom: 3.5em;
		
	}
	
	#company .table_wrap {
		
		width: 74%;
		margin-bottom: 9em;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		
	}
	
	#company table tr th, #company table tr td {
		
		padding: 0.5em 0;
		font-size: 14px;
		letter-spacing: 0.1em;
		
	}
	
	#company table tr th {
		
		padding-left: 0.5em;
		
	}
	
	#company table thead tr th {
		
		width: 32%;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		padding-left: 0.2em;
		font-size: 17px;
		
	}
	
	#company table .first {
	
		padding-top: 1.5em;
	
	}
	
	#company .map {
		
		right: 1em;
		bottom: -2em;
		width: 6em;
		
	}
	
	/* MESSAGE */
	#message {
		
		margin-bottom: 8.5em;
		
	}
	
	#message h2 {
		
		width: 14.5em;
		margin: 0 auto;
		margin-bottom: 5em;
		
	}
	
	#message .txt {
		
		float: right;
		width: 48.5%;
		
	}
	
	#message .txt p {
		
		font-size: 13.5px;
		line-height: 2;
		letter-spacing: 0.1em;
		
	}
	
	#message .txt .line2 {
		
		margin-top: 2em;
		margin-bottom: 1em;
		
	}
	
	#message .txt .line3 {
		
		text-align: right;
		
	}
	
	#message .img {
		
		width: 45%;
		height: 400px;
		
	}

}



/* iPadPro */
@media only screen and (max-width: 1024px) {

	/* COMPANY */
	#company .inner {
		
		padding-top: 3.7em;
		
	}
	
	#company h2 {
		
		width: 13.5em;
		margin-bottom: 3em;
		
	}
	
	#company .table_wrap {
		
		width: 78%;
		margin-bottom: 8.5em;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		
	}
	
	#company table tr th, #company table tr td {
		
		padding: 0.5em 0;
		font-size: 12.5px;
		letter-spacing: 0.08em;
		
	}
	
	#company table tr th {
		
		padding-left: 0.5em;
		
	}
	
	#company table thead tr th {
		
		width: 28%;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		padding-left: 0.2em;
		font-size: 15px;
		
	}
	
	#company table .first {
	
		padding-top: 1.5em;
	
	}
	
	#company .map {
		
		right: 1em;
		bottom: -1.5em;
		width: 5.5em;
		
	}
	
	/* MESSAGE */
	#message {
		
		margin-bottom: 8em;
		
	}
	
	#message h2 {
		
		width: 13em;
		margin: 0 auto;
		margin-bottom: 4.5em;
		
	}
	
	#message .txt {
		
		float: right;
		width: 50.5%;
		
	}
	
	#message .txt p {
		
		font-size: 11px;
		line-height: 2;
		letter-spacing: 0.06em;
		
	}
	
	#message .txt .line2 {
		
		margin-top: 1.5em;
		margin-bottom: 0.8em;
		
	}
	
	#message .txt .line3 {
		
		text-align: right;
		
	}
	
	#message .img {
		
		width: 44%;
		height: 300px;
		
	}

}



/* AndoroidのLの横 */
@media only screen and (max-width: 854px) {

	/* COMPANY */
	#company .inner {
		
		padding-top: 3.7em;
		
	}
	
	#company h2 {
		
		width: 13.5em;
		margin-bottom: 3em;
		
	}
	
	#company .table_wrap {
		
		width: 78%;
		margin-bottom: 8.5em;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		
	}
	
	#company table tr th, #company table tr td {
		
		padding: 0.5em 0;
		font-size: 12.5px;
		letter-spacing: 0.08em;
		
	}
	
	#company table tr th {
		
		padding-left: 0.5em;
		
	}
	
	#company table thead tr th {
		
		width: 28%;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		padding-left: 0.2em;
		font-size: 15px;
		
	}
	
	#company table .first {
	
		padding-top: 1.5em;
	
	}
	
	#company .map {
		
		right: 1em;
		bottom: -1.5em;
		width: 5.5em;
		
	}
	
	/* MESSAGE */
	#message {
		
		margin-bottom: 8em;
		
	}
	
	#message h2 {
		
		width: 13em;
		margin: 0 auto;
		margin-bottom: 4.5em;
		
	}
	
	#message .txt {
		
		float: right;
		width: 50.5%;
		
	}
	
	#message .txt p {
		
		font-size: 11px;
		line-height: 2;
		letter-spacing: 0.06em;
		
	}
	
	#message .txt .line2 {
		
		margin-top: 1.5em;
		margin-bottom: 0.8em;
		
	}
	
	#message .txt .line3 {
		
		text-align: right;
		
	}
	
	#message .img {
		
		width: 44%;
		height: 300px;
		
	}

}



/* iPad */
@media only screen and (max-width: 768px) {

	/* COMPANY */
	#company .inner {
		
		padding-top: 3.7em;
		
	}
	
	#company h2 {
		
		width: 13em;
		margin-bottom: 3em;
		
	}
	
	#company .table_wrap {
		
		width: 78%;
		margin-bottom: 8.5em;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		
	}
	
	#company table tr th, #company table tr td {
		
		padding: 0.5em 0;
		font-size: 12.5px;
		letter-spacing: 0.08em;
		
	}
	
	#company table tr th {
		
		padding-left: 0.5em;
		
	}
	
	#company table thead tr th {
		
		width: 28%;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		padding-left: 0.2em;
		font-size: 15px;
		
	}
	
	#company table .first {
	
		padding-top: 1.5em;
	
	}
	
	#company .map {
		
		right: 1em;
		bottom: -1.5em;
		width: 5.5em;
		
	}
	
	/* MESSAGE */
	#message {
		
		margin-bottom: 7em;
		
	}
	
	#message h2 {
		
		width: 12.5em;
		margin: 0 auto;
		margin-bottom: 4.5em;
		
	}
	
	#message .txt {
		
		float: right;
		width: 50.5%;
		
	}
	
	#message .txt p {
		
		font-size: 11px;
		line-height: 2;
		letter-spacing: 0.06em;
		
	}
	
	#message .txt .line2 {
		
		margin-top: 1.5em;
		margin-bottom: 0.8em;
		
	}
	
	#message .txt .line3 {
		
		text-align: right;
		
	}
	
	#message .img {
		
		width: 44%;
		height: 300px;
		
	}

}



/* iPhonePlusの横 */
@media only screen and (max-width: 736px) {

	/* COMPANY */
	#company .inner {
		
		padding-top: 3.7em;
		
	}
	
	#company h2 {
		
		width: 13em;
		margin-bottom: 3em;
		
	}
	
	#company .table_wrap {
		
		width: 78%;
		margin-bottom: 8.5em;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		
	}
	
	#company table tr th, #company table tr td {
		
		padding: 0.5em 0;
		font-size: 12.5px;
		letter-spacing: 0.08em;
		
	}
	
	#company table tr th {
		
		padding-left: 0.5em;
		
	}
	
	#company table thead tr th {
		
		width: 28%;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		padding-left: 0.2em;
		font-size: 15px;
		
	}
	
	#company table .first {
	
		padding-top: 1.5em;
	
	}
	
	#company .map {
		
		right: 1em;
		bottom: -1.5em;
		width: 5.5em;
		
	}
	
	/* MESSAGE */
	#message {
		
		margin-bottom: 7em;
		
	}
	
	#message h2 {
		
		width: 12.5em;
		margin: 0 auto;
		margin-bottom: 4.5em;
		
	}
	
	#message .txt {
		
		float: right;
		width: 50.5%;
		
	}
	
	#message .txt p {
		
		font-size: 11px;
		line-height: 2;
		letter-spacing: 0.06em;
		
	}
	
	#message .txt .line2 {
		
		margin-top: 1.5em;
		margin-bottom: 0.8em;
		
	}
	
	#message .txt .line3 {
		
		text-align: right;
		
	}
	
	#message .img {
		
		width: 44%;
		height: 300px;
		
	}

}



/* iPhone8の横 */
@media only screen and (max-width: 667px) {

	/* COMPANY */
	#company .inner {
		
		padding-top: 3em;
		
	}
	
	#company h2 {
		
		width: 12em;
		margin-bottom: 2.5em;
		
	}
	
	#company .table_wrap {
		
		width: 84%;
		margin-bottom: 7.5em;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		
	}
	
	#company table tr th, #company table tr td {
		
		padding: 0.5em 0;
		font-size: 12px;
		letter-spacing: 0.06em;
		
	}
	
	#company table tr th {
		
		padding-left: 0.5em;
		
	}
	
	#company table thead tr th {
		
		width: 28%;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		padding-left: 0.2em;
		font-size: 14.5px;
		
	}
	
	#company table .first {
	
		padding-top: 1.5em;
	
	}
	
	#company .map {
		
		right: 1em;
		bottom: -1.5em;
		width: 5.5em;
		
	}
	
	/* MESSAGE */
	#message {
		
		margin-bottom: 6em;
		
	}
	
	#message h2 {
		
		width: 11.5em;
		margin: 0 auto;
		margin-bottom: 3.5em;
		
	}
	
	#message .txt {
		
		float: right;
		width: 55%;
		
	}
	
	#message .txt p {
		
		font-size: 10.5px;
		line-height: 2;
		letter-spacing: 0.06em;
		
	}
	
	#message .txt .line2 {
		
		margin-top: 1.5em;
		margin-bottom: 0.8em;
		
	}
	
	#message .txt .line3 {
		
		text-align: right;
		
	}
	
	#message .img {
		
		width: 41%;
		height: 260px;
		
	}

}



/* iPhone5の横 */
@media only screen and (max-width: 568px) {

	/* COMPANY */
	#company .inner {
		
		padding-top: 3em;
		
	}
	
	#company h2 {
		
		width: 11em;
		margin-bottom: 2em;
		
	}
	
	#company .table_wrap {
		
		width: 88%;
		margin-bottom: 7em;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		
	}
	
	#company table tr th, #company table tr td {
		
		padding: 0.5em 0;
		font-size: 12px;
		letter-spacing: 0.06em;
		
	}
	
	#company table tr th {
		
		padding-left: 0.5em;
		
	}
	
	#company table thead tr th {
		
		width: 28%;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		padding-left: 0.2em;
		font-size: 14px;
		
	}
	
	#company table .first {
	
		padding-top: 1.5em;
	
	}
	
	#company .map {
		
		right: 1em;
		bottom: -1.5em;
		width: 5.5em;
		
	}
	
	/* MESSAGE */
	#message {
		
		margin-bottom: 5em;
		
	}
	
	#message h2 {
		
		width: 10.5em;
		margin: 0 auto;
		margin-bottom: 3em;
		
	}
	
	#message .txt {
		
		float: right;
		width: 55.5%;
		
	}
	
	#message .txt p {
		
		font-size: 10px;
		line-height: 1.8;
		letter-spacing: 0.06em;
		
	}
	
	#message .txt .line2 {
		
		margin-top: 1.5em;
		margin-bottom: 0.8em;
		
	}
	
	#message .txt .line3 {
		
		text-align: right;
		
	}
	
	#message .img {
		
		width: 40%;
		height: 230px;
		
	}

}



/* AndoroidのL */
@media only screen and (max-width: 480px) {

	/* COMPANY */
	#company .inner {
		
		padding-top: 3em;
		
	}
	
	#company h2 {
		
		width: 10em;
		margin-bottom: 1.5em;
		
	}
	
	#company .table_wrap {
		
		width: 100%;
		margin-bottom: 6em;
		background-size: 120% 100%;
		background-repeat: no-repeat;
		
	}
	
	#company table tr th, #company table tr td {
		
		padding: 0.5em 0;
		font-size: 12.5px;
		letter-spacing: 0.08em;
		
	}
	
	#company table tr th {
		
		padding-left: 0.5em;
		
	}
	
	#company table thead tr th {
		
		width: 32%;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		padding-left: 0.2em;
		font-size: 14px;
		
	}
	
	#company table .first {
	
		padding-top: 2em;
	
	}
	
	#company .map {
		
		right: 0;
		bottom: -1.5em;
		width: 5em;
		
	}
	
	/* MESSAGE */
	#message {
		
		margin-bottom: 4em;
		
	}
	
	#message h2 {
		
		width: 9.5em;
		margin: 0 auto;
		margin-bottom: 2.5em;
		
	}
	
	#message .txt {
		
		float: none;
		width: 100%;
		margin-bottom: 3em;
		
	}
	
	#message .txt p {
		
		font-size: 12.5px;
		line-height: 2;
		letter-spacing: 0.15em;
		
	}
	
	#message .txt .line2 {
		
		margin-top: 1.5em;
		margin-bottom: 0.8em;
		
	}
	
	#message .txt .line3 {
		
		text-align: right;
		
	}
	
	#message .img {
		
		float: right;
		width: 75%;
		height: auto;
		padding-top: 72%;
		
	}

}



/* iPhonePlus */
@media only screen and (max-width: 414px) {

	/* COMPANY */
	#company .inner {
		
		padding-top: 3em;
		
	}
	
	#company h2 {
		
		width: 9.5em;
		margin-bottom: 1.5em;
		
	}
	
	#company .table_wrap {
		
		margin-bottom: 5em;
		background-size: 125% 100%;
		
	}
	
	#company table tr th, #company table tr td {
		
		padding: 0.5em 0;
		font-size: 12.5px;
		letter-spacing: 0.04em;
		
	}
	
	#company table tr th {
		
		padding-left: 0.2em;
		
	}
	
	#company table thead tr th {
		
		width: 33%;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		padding-left: 0;
		font-size: 14px;
		
	}
	
	#company table .first {
	
		padding-top: 2em;
	
	}
	
	#company .map {
		
		right: 0;
		bottom: -1.5em;
		width: 5em;
		
	}
	
	/* MESSAGE */
	#message {
		
		margin-bottom: 3.5em;
		
	}
	
	#message h2 {
		
		width: 9em;
		margin: 0 auto;
		margin-bottom: 2em;
		
	}
	
	#message .txt {
		
		float: none;
		width: 100%;
		margin-bottom: 3em;
		
	}
	
	#message .txt p {
		
		font-size: 12.5px;
		line-height: 2;
		letter-spacing: 0.13em;
		
	}
	
	#message .txt .line2 {
		
		margin-top: 1.5em;
		margin-bottom: 1em;
		
	}
	
	#message .img {
		
		width: 75%;
		padding-top: 72%;
		
	}

}



/* iPhone8 */
@media only screen and (max-width: 375px) {

	/* COMPANY */
	#company .inner {
		
		padding-top: 2.5em;
		
	}
	
	#company h2 {
		
		width: 9em;
		margin-bottom: 1.5em;
		
	}
	
	#company .table_wrap {
		
		margin-bottom: 4.5em;
		background-size: 130% 100%;
		background-repeat: repeat-x;
		
	}
	
	#company table tr th, #company table tr td {
		
		padding: 0.5em 0;
		font-size: 12px;
		letter-spacing: 0.08em;
		
	}
	
	#company table tr th {
		
		padding-left: 0.2em;
		
	}
	
	#company table thead tr th {
		
		width: 34%;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		padding-left: 0;
		font-size: 14px;
		
	}
	
	#company table .first {
	
		padding-top: 2em;
	
	}
	
	#company .map {
		
		right: 0;
		bottom: -1.5em;
		width: 5em;
		
	}
	
	/* MESSAGE */
	#message {
		
		margin-bottom: 3em;
		
	}
	
	#message h2 {
		
		width: 9em;
		margin: 0 auto;
		margin-bottom: 2em;
		
	}
	
	#message .txt {
		
		float: none;
		width: 100%;
		margin-bottom: 3em;
		
	}
	
	#message .txt p {
		
		font-size: 12px;
		line-height: 2;
		letter-spacing: 0.12em;
		
	}
	
	#message .txt .line2 {
		
		margin-top: 1.5em;
		margin-bottom: 1em;
		
	}
	
	#message .img {
		
		width: 75%;
		padding-top: 72%;
		
	}

}



/* AndoroidのM */
@media only screen and (max-width: 360px) {



}



/* iPhone5 */
@media only screen and (max-width: 320px) {

	/* COMPANY */
	#company .inner {
		
		padding-top: 2em;
		
	}
	
	#company h2 {
		
		width: 8.5em;
		margin-bottom: 1.5em;
		
	}
	
	#company .table_wrap {
		
		margin-bottom: 4em;
		background-size: 145% 100%;
		background-repeat: repeat-x;
		
	}
	
	#company table tr th, #company table tr td {
		
		padding: 0.5em 0;
		font-size: 11.5px;
		letter-spacing: 0.08em;
		
	}
	
	#company table tr th {
		
		padding-left: 0.2em;
		
	}
	
	#company table thead tr th {
		
		width: 38%;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		font-size: 13px;
		
	}
	
	#company table .first {
	
		padding-top: 2em;
	
	}
	
	#company .map {
		
		right: 0;
		bottom: -1.5em;
		width: 4.5em;
		
	}
	
	/* MESSAGE */
	#message {
		
		margin-bottom: 2.5em;
		
	}
	
	#message h2 {
		
		width: 8.5em;
		margin: 0 auto;
		margin-bottom: 2em;
		
	}
	
	#message .txt {
		
		float: none;
		width: 100%;
		margin-bottom: 3em;
		
	}
	
	#message .txt p {
		
		font-size: 12px;
		line-height: 2;
		letter-spacing: 0.12em;
		
	}
	
	#message .txt .line2 {
		
		margin-top: 1.3em;
		margin-bottom: 1em;
		
	}
	
	#message .img {
		
		width: 75%;
		padding-top: 72%;
		
	}

}