*{
  box-sizing:border-box;
  letter-spacing: .1em;
}
body{
  margin-top: 1rem;
}
header .hed {
  max-width: 1200px;
  background-color: white;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0 auto;
}

.hed-img {
  width: 100%;
  height: 250px;
  background-image: url(../images/concept_head.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hed-img h1,
.hed-img-company h1,
.hed-img-con h1,
.hed-img-eng h1{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
  font-size: 3em;
  color: white;
  text-shadow: 1px 2px 3px #808080;
  font-weight: 700;
}
.hed-img-company {
  width: 100%;
  height: 250px;
  background-image: url(../images/company/company_hed.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hed-img-con {
  width: 100%;
  height: 250px;
  background-image: url(../images/concept_1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hed-img-eng {
  width: 100%;
  height: 250px;
  background-image: url(../images/head_eng.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hed-box2 {
  text-align: right;
}
.company-table {
  min-width: 100%;
}
.company-table td:nth-child(1){
  width:10.5em;
  padding-right: em;
}
.company-table td:nth-child(n+2){
  width:15.5em;
  float: left;
  padding-right:2em ;
}
.wrapper {
  max-width: 960px; /* 20px小さく指定し、両脇にpaddingを加える */
  margin:0 auto;
  padding-right: 10px;
  padding-left: 10px;
}
.wrapper p,
.wrapper ul{
  margin-top: 1.5em;
  
}
.top-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  margin:0 auto;
  position: relative;
  z-index: 0;
}

.top-container img{
  display: block;
  transition-duration: 0.3s;	/*変化に掛かる時間*/
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  z-index: 0;
}
.top-container img:hover{
  transform: scale(1.1);	/*画像の拡大率*/
  transition-duration: 0.3s;	/*変化に掛かる時間*/
  opacity: .5;
}


.construction-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.construction-box {
  max-width:280px;
  margin-bottom: 2em;
}
.construction-box img{
  width:100%;
}

/* =====================
  ハンバーガーメニューのCSS
===================== */
#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/*  CSS end
------------------------*/

#menu{
  display: flex;
  flex-flow: row;
  justify-content: center;
}
#menu a{
  display: block;
  border-radius: 4px;
  padding: 12px 24px;
  color: black;
  text-decoration: none;
  margin: auto;
}
#menu a:hover {
  background-color: #1abc9c;
  color: white;
}
#menu ul li:nth-child(2) {
    font-weight:800;
    color: blue;
    text-style:underline;
}
#nav-content {
  display: none;
}
.top-box1,
.top-box2,
.top-box3,
.top-box4{
  overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
  width: 25%;	/*画像の幅*/
  max-width: 300px;
  height: auto;
  
  background: #1abc9c;
  position: relative
}
.top-box1 p,
.top-box2 p,
.top-box3 p,
.top-box4 p{
  position: absolute;
  top: 85%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin: 0;
  padding: 0;
  color: white;
  font-size: 1.5em;
  font-weight: 900;
  white-space: nowrap;
}


.mid-box1,
.mid-box2,
.mid-box3,
.mid-box4,
.mid-box5,
.mid-box6,
.mid-box7,
.mid-box8{
  overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
  width: 25%;	/*画像の幅*/
  max-width: 300px;
  height: auto;
  padding: 2px;
  /*background: #1abc9c;*/
}

.concept3-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  margin:3em ;
  padding: 1em;
}
.concept3{
  background-color: #F7F7F7;
}
.concept3-1,
.concept3-2,
.concept3-3 {
  overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
  width: 33%;	/*画像の幅*/
  max-width: 380px;
  height: auto;
  background: #FFF;
  margin: 1em;

}
.concept3-1,
.concept3-2,
.concept3-3 {
  text-align: left;
}
.concept-block {
  width: 130px;
  height: 130px;
  margin: 2em 2em;
  background: #1abc9c;
  margin: 41.6px auto 41.6px;
  
  position: relative;
}
.concept-block p{
  position: absolute;
  top: 50%;
  left: 20%;
  -ms-transform: translateY(-50%);
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
  text-align: center;/
}
h2 {
  font-size: 1.8em;
  margin: 1em;
}
.ttl {
  font-size: 2.5em;
  color: #004500;
}
.wrapper h2 {
  margin: 1em 0;
  padding: 1rem;
  border-bottom: 1px solid #B60028;
}
footer {
  border-top: 2px solid #b5fff0;
  padding-top: 1em;
}
dl, dt, dd {
  box-sizing: border-box;
  /*border: 1px none #ccc;  共通のborderを定義。ただし、border-styleをnoneにし、初期状態では非表示にする */
}

dt, dd {
  margin: 0;
  /*border-top-style: solid;  上のborderを表示 */
  padding: .1px;
}

dl {
  display: flex; /* Flexible Boxを有効化 */
  flex-wrap: wrap; /* はみ出そうな時の折り返しを有効化 */
  border-style: none solid solid; /* 上を除く、全てのborderを表示 */
}

dt {
  width: 18%; /* 幅を指定 */
  /*background: #eee;  dt要素のための背景色を指定 */
}

dd {
  width: 82%; /* 幅を指定 */
  border-left-style: solid; /* 左のborderを表示 */
}

.specification3 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  background: #E0EDED;
  margin: 2em 0;
}
.specification-box {
  padding: 3em 2em;
}
.specification3 img {
  width: 240px;
  height: 192px;
  object-fit: cover;
}

article {/*CSSカラムのセッティング*/
 column-width: 280px;
 column-gap: 1em;
}
 
section {/*各ボックスのスタイル*/
  display: inline-block;
  margin: 0.25rem;
  width: 100%;
}
  #return-top {
    background-color: #004500;
    border-radius: 50%;
    bottom: 50px;
    color: #fff;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    outline: 0;
    position: fixed;
    right: 50px;
    text-align: center;
    width: 50px;
  }

/* =====================
  Menu ハンバーガー
===================== */

.icon-hamburger {
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  height: 50px;
  position: relative;
  width: 50px;
  display: none;
  margin-bottom: 0.4em;
}

.icon-hamburger span {
  background: #cccccc;
  display: block;
  height: 16%;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 50%;
  width: 84%;
}

.icon-hamburger span::before,
.icon-hamburger span::after {
  background: #cccccc;
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -50%;
  position: absolute;
  top: 50%;
  width: 100%;
}

.icon-hamburger span::before {
  margin-top: -38%;
}

.icon-hamburger span::after {
  margin-top: 19%;
}

/* =====================
  Menu モーダル
===================== */
.menu-container {
  margin: 0;
}

.menu-container .menu {
  /*border: 1px solid #ccc;*/
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-container .menu .menu-item {
  /*flex: 1;*/
}

.menu-container .menu .menu-item a {
  background: #fff;
  /*border-right: 1px solid #ccc;*/
  color: #333;
  display: block;
  padding: 0.6em 1.5em;/*0.6em 0.4em;*/
  text-align: center;
  text-decoration: none;
}

.menu-container .menu .menu-item a:hover {
  background: #ccc;
  color: #ffffff;
}

.menu-container .menu .menu-item:last-child a {
  border-right: none;
}

#modal-overlay {
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  height: 120%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}

@media screen and (max-width: 768px) {
  .menu-container .menu {
    -webkit-transform: translate(-50%, -50%);
    background: #fff;
    display: none;
    height: auto;
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    z-index: 100;
  }
  .menu-container .menu .menu-item a {
    border-bottom: 1px solid #ccc;
    border-right: none;
  }
  .menu-container .menu .menu-item:last-child a {
    border-bottom: none;
  }
}
@media screen and (max-width: 768px) {
  .icon-hamburger {
    display: inline-block;
    margin-left: 70%;
  }
}