/*====================

header

====================*/
#header-img {
	width: 100%;
	height: 600px;
	margin: 0;
	padding: 0;
	position: relative;
}

#header-img img {
	width: 100%;	
	height: 600px;
	margin: 0;
	padding: 0;
	z-index: 60;
	display: block;
	object-fit: cover;
	object-position: center top;
}

#header-img .header-box {
	background: #003366;
	color: #fff;
	width: 900px;
	padding: 50px;
	margin: 0 auto;
	z-index: 70;
	display: block;
	position: absolute;
	top: 90%;
	left: 50%;
	transform: translate(-50%, 0%);
}

.head-border {
    display: flex;
    align-items: center;
	font-size: 30px;
	font-family: 'Noto Serif JP', serif;
	font-weight: normal;
	padding-bottom: 25px;
	letter-spacing: 0.2em;
}
 
.head-border:before,
.head-border:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #fff;
}
 
.head-border:before {
    margin-right: 1.2rem;
}
 
.head-border:after {
    margin-left: 1.2rem;
}

p.head-text {
	font-size: 20px;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	letter-spacing: 0.2em;
}

/*====================

message

====================*/
#message {
	margin-top: 300px;
	padding: 100px 0;
	position: relative;
	display: flex;
	align-self: center;
	background: #f7f7f7;
}

#message p {
	font-family: 'Noto Serif JP', serif;
	margin-bottom: 32px;
}

.message-left {
	width: 50%;
    margin-top: -160px;
	margin-left: 0;
	padding-left: 0;
	text-align: left;
}

.message-left img {
	width: 100%;
	padding-right: 60px;
}

.message-right {
	width: 50%;
	max-width: 600px;
}

/*====================

company

====================*/
#company {
	margin: 100px auto;
	padding: 60px;
	text-align: center;
	background: #fff;
}

table {
	width: 80%;
	max-width: 1000px;
	min-width: 800px;
	margin: 60px auto;
	font-size: 14px;
}

 table tr {
	border-top: 1px solid #999;
 }

 table tr:last-child{
	border-bottom: 1px solid #999;
 }

table td,th {
	text-align: left;
	padding: 8px 40px;
}

th {
	width: 16em;
}

/*====================

map

====================*/
#map {
	width: 100%;
	padding: 60px;
	background: #f7f7f7;
	text-align: center;
	margin-bottom: 120px;
}

#map iframe.map {
	width: 80%;
	max-width: 1000px;
	max-height: 700px;
	min-width: 600px;
}









/*====================

スマートフォン対応

====================*/

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

header(768px)

====================*/
#header-img {
	width: 100%;
	height: 200px;
}

#header-img img {
	width: 100%;	
	height: 200px;
}

#header-img .header-box {
	width: 80%;
	min-width: 240px;
	padding: 14px;
	top:80%;
	left: 50%;
	transform: translate(-50%, 0%);
}

.head-border {
	font-size: 16px;
	padding-bottom: 10px;
	letter-spacing: 0.2em;
}
 
.head-border:before,
.head-border:after {
    height: 0.8px;
}
 
.head-border:before {
    margin-right: 10px;
}
 
.head-border:after {
    margin-left: 10px;
}

p.head-text {
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 28px;
}

p.head-text br {
    display: none;    
}

br.sp_br {
	display: block !important;
}


/*====================

message(768px)

====================*/
#message {
	margin: 300px auto 0 0;
	padding: 100px 0 20px;
	display: flex;
	flex-direction: column;
}

#message p {
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 24px;
}

.message-left {
	width: 100%;
	text-align: left;
    margin: -160px auto 0;
	text-align: center;
}

.message-left img {
	width: 70%;
	padding-right: 0;
}

.message-right {
	width: 100%;
	padding: 0 28px;
    margin: 0 auto;
}

/*====================

company(768px)

====================*/
#company {
	margin: 40px auto;
	padding: 20px;
	text-align: center;
	background: #fff;
}

table {
	width: 100%;
	min-width: 240px;
	font-size: 14px;
	margin: 0 auto;
}

 table tr {
	border-top: 1px solid #999;
 }

 table tr:last-child{
	border-bottom: 1px solid #999;
 }

table td,th {
	text-align: left;
	width: 100%;
	display: block;
	line-height: 24px;
}

th {
	padding: 6px 20px !important;	width: 100%;
}

td {
	padding: 0 20px 6px !important;	width: 100%;
}

/*====================

map(768px)

====================*/
#map {
	width: 100%;
	padding: 20px 0;
	margin-bottom: 60px;
}

#map iframe.map {
	width: 90%;
	max-width: 768px;
	max-height: 300px;
	min-width: 240px;
}
}
/*========レスポンシブ終了========*/