@charset "utf-8";
/* CSS Document */

#title_wrap h2::before{
  background: url("../img/titile_bg.jpg") no-repeat center / cover;
}

/* -------------------------------------------------
#message
------------------------------------------------- */
#message{}
#message .message_wrap{
  width: 1000px;
  margin: 80px auto;
}
#message .message_wrap .highlight{
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 1.5em;
}
#message .message_wrap .text{margin-bottom: 3em;}
#message .message_wrap .text p{
  font-size: 16px;
  margin-top: 1.5em;
  line-height: 2.2;
  text-align: justify;
}
#message .message_wrap .text p.name{text-align: right; line-height: 1.5;}

@media only screen and (max-width:1280px){
  #message .message_wrap{width: 90%;}
}
@media only screen and (max-width:768px){
  #message .message_wrap{margin: 60px auto;}
  #message .message_wrap .highlight{font-size: 22px;}
  #message .message_wrap figure img{width: 90%; max-width: 500px;}
}
@media only screen and (max-width:600px){
  #message .message_wrap{margin: 48px auto;}
  #message .message_wrap .highlight{font-size: 20px;}
  #message .message_wrap .text p{font-size: 14px;}
}
@media only screen and (max-width:400px){
  #message .message_wrap .highlight{font-size: 18px;}
}


/* -------------------------------------------------
#company_data
------------------------------------------------- */
#company_data{
  position: relative;
  width: 1000px;
  margin: 120px auto 80px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  line-height: 2;
}
#company_data h3{
  position: relative;
  font-weight: 700;
  margin-bottom: 1em;
  letter-spacing: 0.2em;
  font-size: 16px;
}
#company_data h3::before{
  content: '';
  display: block;
  width: 80px;
  height: 80px;
}
#company_data div.profile h3::before{background: url("../img/icon_company.gif") no-repeat center / contain;}
#company_data div.access h3::before{background: url("../img/icon_access.gif") no-repeat center / contain;}

#company_data div{font-size: 16px;}
#company_data div.profile {
  width: 55%;
  padding-right: 5%;
  box-sizing: border-box;
}
#company_data div.profile dt,
#company_data div.profile dd {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.5em;
}
#company_data div.profile dt {width: 4em; margin-right: 2em;}
#company_data div.profile dt.space {width: 4.5em; letter-spacing: 0.5em; margin-right: 1.5em;}
#company_data div.profile dd {width: calc(100% - 6em);}
#company_data div.access {width: 45%;}

@media only screen and (max-width:1280px){
  #company_data{width: 90%; display: block;}
  #company_data div.profile, #company_data div.access {width: 100%;}
  #company_data div.profile{margin-bottom: 80px; padding: 0;}
}
@media only screen and (max-width:768px){  
  #company_data h3::before{width: 90px; height: 90px;}
}
@media only screen and (max-width:600px){
  #company_data h3, #company_data div{font-size: 14px;}
  #company_data h3::before{width: 60px; height: 60px;}
}


/* -------------------------------------------------
map
------------------------------------------------- */
.map_box{
	position: relative;
	width: 100%;
	padding-top: 30%;
	margin-top: 20px;
}
.map_box iframe{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media only screen and (max-width:1280px){
  .map_box{padding-top: 40%;}
}
@media only screen and (max-width:768px){
  .map_box{padding-top: 50%;}
}
@media only screen and (max-width:600px){
  .map_box{padding-top: 75%;}
}
