@charset "UTF-8";

/*Copyright 2018 Hyuga Kouzai.*/
/* CSS Document */
/* ------------------------------------------------ */
/* ▼会社概要用(profile.html)
/* ------------------------------------------------ */
.entry-content{
	#company_greet{
		display: -webkit-grid;
		display: -moz-grid;
		display: -ms-grid;
		display: -o-grid;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem 2%;
		width: calc(100% - 5%);
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
		& > div:first-child{
			text-align: center;
			& > img{
				width:80%;
				margin:1rem;
			}
		}
		& > div:nth-of-type(2){
			width: 80%;
			font-size: 1.6vw;
			line-height: 2.8vw;
			font-family:cursive,serif;
			& > p{
				line-height:2vw;
				padding-top: 2vw;
				padding-right:1rem;
				text-align:right;
				letter-spacing: 0.1rem;
				font-family:cursive,serif;
				font-weight:bold;
				font-size:1.7vw;
			}
		}
	}
	& > #company-prof{
		width: 60%;
		margin:0 auto;
		& th,
		& td{
			border: 1px solid #333333;
			padding: 1rem;
			
		}
		& th{
			width: 25%;
			white-space: nowrap;
			background-color: #cccccc;/*#2AA8E5;*/
			border-bottom: 1px solid #333333;
			line-height:1rem;
			vertical-align: middle;
			text-align:justify;
			font-size:1.4vw;

		}
		& td{
			line-height:1rem;
			font-size:1.3vw;
		}
	}
}
/* ▼会社概要googleマップ*/
#profile{
	& .map_wrapper {
		max-width: 60%;
		min-width: 30%;
		margin: 1rem auto;
		padding: 4px;
		border: 1px solid #CCC;
		& > .googlemap{
			position: relative;
			padding-bottom: 56.25%;
			height: 0;
			overflow: hidden;
			& > iframe{
				position: absolute;
				top: 0;
				left: 0;
				width: 100% !important;
				height: 100% !important;
			}
		}
	}
	& .maptext{
		max-width: 640px;
		min-width: 100px;
		margin: 20px auto;
		padding: 4px;
		& > p{
			text-align: center;
			font-size: 1.3vw;
			& > a{
				text-decoration: none;
				color: #999;
				&:hover{
					text-decoration: none;
					color: #2AA8E5;
				}
			}
		}
	}
}

/* ------------------------------------------------ */
/* タブレット 縦向き*/
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (min-width: 760px) and (max-width:1300px) {
	.entry-content{
		#company_greet{
			display: block;
			width: 80%;
			margin:0 auto;
			& > div:first-child{
				width: 100%;
				text-align: center;
				& > img{
					width:80%;
					margin: 0;
				}
			}
			& > div:nth-of-type(2){
				width: 90%;
				font-size: 1.1rem;
				line-height: 1.5rem;
				margin: 2rem auto 1rem;
				& > p{
					text-align: right;
					padding-top: 1rem;
					padding-right: 1rem;
					line-height:1.5rem;
					font-size:1.2rem;
				}
			}
		}
		& > #company-prof{
			width: 70%;
			margin:1rem auto 2rem;
			& th,
			& td{
				display: block;
				width: 100%;
				padding: 1rem;
			}
			& th{
				padding: .2rem 1rem;
				background-color: #cccccc;
				color: initial;
				border: 1px solid #333333;
				line-height: 1.5rem;
				text-align: center;
				letter-spacing: 0.2rem;
				font-weight: bold;
				font-size:1rem;
			}
			& td{
				line-height: 1.5rem;
				font-size:1rem;
				border-top:none;
				border-bottom:none;
				font-size: 1rem;
			}
			& tr:last-child td{
				border-bottom: 1px solid #333333;
			}
		}
	}
	/* google mapの配置 */
    .map_wrapper {
        max-width: 80%;
        min-width: 60%;
        margin: 1rem auto;
        padding: 4px;
        border: 1px solid #CCC;
    }
}

/* ------------------------------------------------ */
/* 600～700pxのタブレットサイズに対応
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (min-width: 600px) and (max-width:700px) {
	.entry-content{
		#company_greet{
			display: block;
			width: 90%;
			margin:0 auto;
			& > div:first-child{
				width: 100%;
				text-align: center;
				& > img{
					width:100%;
					margin: 0;
				}
			}
			& > div:nth-of-type(2){
				width: 90%;
				font-size: 1.1rem;
				line-height: 1.5rem;
				margin: 2rem auto 1rem;
				& > p{
					text-align: center;
					padding-top: 1rem;
					padding-right: 0;
					line-height:1.5rem;
					font-size:1.2rem;
				}
			}
		}
		& > #company-prof{
			width: 80%;
			& th,td{
				display: block;
				padding: 1rem;
			}
			& th{
				width:100%;
				padding: .2rem 1rem;
				background-color: #cccccc;
				color: initial;
				border: 1px solid #333333;
				line-height: 1.5rem;
				text-align: center;
				letter-spacing: 0.2rem;
				font-weight: bold;
				font-size:1.1rem;
			}
			& td{
				line-height: 1.5rem;
				font-size:1rem;
				border-top:none;
				border-bottom:none;
			}
			& tr:last-child td{
				border-bottom: 1px solid #333333;
			}
		}
	}
	
	/* google mapの配置 */
    .map_wrapper {
        max-width: 80%;
        min-width: 60%;
        margin: 1rem auto;
        padding: 4px;
        border: 1px solid #CCC;
    }
}

/* ------------------------------------------------ */
/* レスポンシブ（780px以下）
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (max-width:780px) {
	.entry-content{
		#company_greet{
			display: block;
			width: 90%;
			margin:0 auto;
			& > div:first-child{
				width: 100%;
				text-align: center;
				& > img{
					width:80%;
					margin: 0;
				}
			}
			& > div:nth-of-type(2){
				width: 90%;
				font-size: 1.1rem;
				line-height: 1.5rem;
				margin: 2rem auto 1rem;
				& > p{
					text-align: right;
					padding-top: 1rem;
					padding-right: 1rem;
					line-height:1.5rem;
					font-size:1.2rem;
				}
			}
		}
		& > #company-prof{
			width: 80%;
			& th,
			& td{
				display: block;
				padding: 1rem;
			}
			& th{
				width:100%;
				padding: .2rem 1rem;
				background-color: #cccccc;
				color: initial;
				border: 1px solid #333333;
				line-height: 1.5rem;
				text-align: center;
				letter-spacing: 0.2rem;
				font-weight: bold;
				font-size:1rem;
			}
			& td{
				border-top:none;
				border-bottom:none;
				line-height: 1.5rem;
				font-size:0.8rem;
			}
			& tr:last-child td{
				border-bottom: 1px solid #333333;
			}
		}
	}
	/* google mapの配置 */
	#profile{
		.map_wrapper {
			max-width: 80%;
			min-width: 60%;
			margin: 1rem auto;
			padding: 4px;
			border: 1px solid #CCC;
		}
		& .maptext{
			max-width: 640px;
			min-width: 100px;
			margin: 1rem auto;
			padding: 4px;
			& > p{
				font-size: 1rem;
			}
		}
	}
}

/* ------------------------------------------------ */
/* 380px以下に対応
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (max-width:380px)  and (max-height: 890px){
	.entry-content{
		#company_greet{
			& > div:nth-of-type(2){
				font-size: 1rem;
				& > p{
					text-align: center;
					padding-top: 1rem;
					padding-right: 0;
					line-height:1.5rem;
					font-size:1rem;
				}
			}
		}
	}
}

/* ------------------------------------------------ */
/* スマホ横向き時 450px以下 */
/* ------------------------------------------------ */
@media screen and (orientation: landscape) and (max-height: 450px) {
	.entry-content{
		#company_greet{
			display: block;
			width: 80%;
			margin:0 auto;
			& > div:first-child{
				width: 100%;
				text-align: center;
				& > img{
					width:100%;
					margin: 0;
				}
			}
			& > div:nth-of-type(2){
				width: 90%;
				font-size: 1.1rem;
				line-height: 1.5rem;
				margin: 2rem auto 1rem;
				& > p{
					text-align: center;
					padding-top: 1rem;
					padding-right: 0;
					line-height:1.5rem;
					font-size:1.2rem;
				}
			}
		}
		& > #company-prof{
			width: 80%;
			& th,td{
				display: block;
				padding: 1rem;
			}
			& th{
				width:100%;
				padding: .2rem 1rem;
				background-color: #cccccc;
				color: initial;
				border: 1px solid #333333;
				line-height: 1.5rem;
				text-align: center;
				letter-spacing: 0.2rem;
				font-weight: bold;
				font-size:1.1rem;
			}
			& td{
				line-height: 1.5rem;
				font-size:1rem;
				border-top:none;
				border-bottom:none;
			}
			& tr:last-child td{
				border-bottom: 1px solid #333333;
			}
		}
	}
}