@charset "utf-8";

/*=========================================
    RESET
=========================================*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote::before, blockquote::after, q::before, q::after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table tr th{
  vertical-align: middle;
}
button {
  border: none;
  cursor: pointer;
}
*, *::before, *::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
address{
  font-style: normal;
}
.clear {
  clear: both;
}
.clearfix::before, .clearfix::after {
  content: " ";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
 *zoom: 1;
}
img {
  display: block;
  vertical-align: middle;
  max-width: 100%;
    width:100%;
    height:auto;
}
button,
input,
textarea {
    border: none;
    cursor: pointer;
}
input:focus, 
textarea:focus,
button:focus {
  outline: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    font-size: 15px;
    font-family: 'Syne', sans-serif;
    font-weight: 400;
    font-style: normal;
    color:#101010;
    background: white;
}

a {
    text-decoration: none;
    color:#595959;
    display: block;
}
header{
	background: black;
	height: 100vh;
	color: white;
	display: flex;
    flex-wrap: wrap;
    align-content: center;
	gap:10%;
	
}
header a{
	color: white;
}

header img{
	width: 80%;
	max-width: 750px;
	margin: auto;
}
.header_logo{
	margin: auto;
}
header .nav{
	display: flex;
	gap:30px;
	margin: auto;
	justify-content: center;
	font-size: 20px;
	width: 100%;
}
.copy_right{
	background: black;
	color: white;
	text-align: center;
	font-size: 12px;
	padding: 10px;
}
section .title{
	font-size: 30px;
	text-align: center;
	font-weight: bold;
	margin: 50px 0 20px;
}
.title span{
	font-size: 16px;
	display: block;
	font-weight: 500;
}
.company{
	padding: 10px;
	max-width: 1000px;
	margin: auto;
}
.company dt{
	background:#E7E7E7;
	padding: 15px 10px;
	font-size: 17px;
	font-weight: bold;
}
.company dd{
	padding: 15px 10px;
}
#contact{
	border-top: 1px solid #787878;
	margin: 40px 0;
	text-align: center;
	margin-bottom: 50px;
}
#contact span{
	
}
.contact_tel{
	font-size: 30px;
	margin: 40px 0 20px;
	font-weight: bold;
	letter-spacing: 1px
}
#contact p{
	font-size: 16px;
	
}
@media Screen and (min-width:768px){
	header .nav{
		gap:100px;
	}
	header a:hover{
		text-decoration: underline;
	}
	.company dt{
		background: transparent;
		padding-left: 15px;
	}
	section .title{
		margin: 80px 0 50px;
	}
	.company dl{
		display: grid;
		grid-template-columns: 1fr 3fr;
		border-bottom: 1px solid #7F7F7F;
		padding: 20px 0;
	}
	.company dl:last-child{
		border-bottom: none;
	}
	.contact_tel{
		font-size: 50px;
		letter-spacing: 2px;
	}
	#contact{
		margin-bottom: 100px;
	}
	#contact p{
		margin-bottom: 8px;
	}
	.copy_right{
		padding: 15px;
	}
}