html,body{
  padding:0;
  margin:0;
  height: 100%;
  font-weight: 400;
  font-style: normal;
  font-family: YuGothic, '游ゴシック','Asap','Noto Sans JP',"Meiryo","メイリオ","ＭＳ Ｐゴシック", sans-serif;
  color:#545454;
}
#wrap{
   width: 100%;
   display:flex;
   flex-direction: column;
   min-height: 100vh;
}
#contents{
  width:100%;
  height:100%;
  background-color:#bbb;
}

.sp-br {
  display: none;
}

/*ヘッダー*/
header {
  display:flex;
  height:70px;
}
header .ht {
  width:50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color:#FFF8D8;
}
header .acc {
  margin-right:auto;
  margin-left:10px;
  font-size:5px;
  color:#8E5520;
}
header  .ht img {
  text-decoration: none;
  margin-left:10px;
  height:40px;
}

h1 {
  margin-left:20px;
  font-size:14px;
}
header .dc {
  width:50%;
  background-color:#FEEAE8;
}

header .top_link a{
  text-decoration: none;
  color:#8E5520;
  font-weight: bolder;
}

header .dc .top_link {
  padding-right:20px;
}
header .ht .top_link {
  margin-left:auto;
  padding-right:20px;
}

/*フッター*/
footer {
  padding-top: 20px;
  display: flex; /* 子要素をflexboxで揃える */
  justify-content: center; /* 子要素をflexboxにより中央に配置する */
  align-items: center;  /* 子要素をflexboxにより中央に配置する */
  height: fit-content;
  position: static;
  width: 100%;
  bottom: 0;
  background-color:#eee;
  text-align:center;
}
footer .acc {
  line-height:1.4em;
  font-size: 14px;
  color:#222;
}
footer #copyright {
  margin-top:20px;
  color:#8E5520;
}
#contents {
  display: flex;
  flex-wrap: wrap;
  /*height: calc(100vh - 70px) ;viewportの高さ-(ヘッダー+フッター)*/
  height: auto;
}

#contents .ht {
  /*background-color:#e8e07a;*/
  background-color:#FFF78A;
}
#contents .dc {
  /*background-color:#b94d4d;*/
  background-color:#EE3B3B;
}
#contents .de {
  background-color: #F9BD37;
}

#contents .ht, #contents .dc, #contents .de {
  display: flex; /* 子要素をflexboxで揃える */
  flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
  justify-content: center; /* 子要素をflexboxにより中央に配置する */
  align-items: center;  /* 子要素をflexboxにより中央に配置する */

  width:50%;
}

.content {
  margin: 50px auto;
  text-align: center;
  font-weight: bold;
  width: 55vh;
  height: calc(55vh * 1.5);
  background-color: #fffdf4;
  justify-content: flex-start; /* 子要素をflexboxにより上揃えする */
  min-width: 480px;
  min-height: 600px;
 }
 
.ht .content {
  border: solid 12px #fff78a;
  outline: solid 4px #fffdf4;
}
.dc .content {
  background-color:#feecec;
  border: solid 12px #ee3b3b;
  outline: solid 4px #feecec;
}
.de .content {
  background-color: #EDF5DB;
  border: solid 12px #F9BD37;
  outline: solid 4px #EDF5DB;
}

.enterprise {
  height:45%;
  color: #8e5520;
  display: flex; /* 子要素をflexboxで揃える */
  flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
  justify-content: flex-start; /* 子要素をflexboxにより上揃えする */
  align-items: center;  /* 子要素をflexboxにより中央に配置する */
}

.ht .enterprise {
  background-image:url(../img/logo_ht.png);
  background-repeat:no-repeat;
  background-position: center bottom;
  background-size:40%;
}
.dc .enterprise {
  background-image:url(../img/logo_dc.png);
  background-repeat:no-repeat;
  background-position: center bottom;
  background-size:30%;
}
.de .enterprise {
  background-image: url(../img/logo_de.png);
  background-repeat: no-repeat;
  background-position: center bottom 10px;
  background-size: 22%;
}

h2 {
  margin-top:20%;
  font-size: 2vh;
}
.btn_menu {
  display: flex; /* 子要素をflexboxで揃える */
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;  /* 子要素をflexboxにより中央に配置する */
  justify-content: flex-start;
  height: 50%;
  padding: 5%;
}

.btn_menu section {
  width: 45%;
}

.btn_menu h3 {
height: 3vh;
margin: 2vh auto 1vh;
line-height: 3vh;
color: #fff;
text-align:left;
font-size:1.5vh;
padding-left:2vh;
}

.dc .btn_menu h3 {
  background-color: #ee3b3b;
}
.ht .btn_menu h3 {
  background-color: #f7b82b;
}
.de .btn_menu h3 {
  background-color: #8EC31F;
}

.btn_menu a, .btn_menu span {
  display: block;
  font-size:1.2vh;
  padding-left:10px;
  text-align: left;
  color:#555;
  text-decoration: none;
}
.ht .btn_menu a:hover {
  background-color: #E8D0CC;
  transition : all 0.5s;

  text-decoration:underline !important;
  color:#99623a;
}
.dc .btn_menu a:hover {
  background-color: #E8D0CC;
  transition : all 0.5s;

  text-decoration:underline !important;
  color:#ee3b3b;
}
.de .btn_menu a:hover {
  background-color: #E8D0CC;
  transition: all 0.5s;

  text-decoration: underline !important;
  color: #F9BD37;
}

@media screen and (max-width:1000px) {
  #contents {
    flex-wrap : wrap;
  }
  header .ht {
    width:100%;
  }
  header .dc {
    display:none;
  }
  #contents {
    height: auto;
  }
  #contents .ht, #contents .dc, #contents .de {
    width:100%;
  }
  #contents .content {
    margin:50px auto;
  }
  .dc .enterprise h2, .de .enterprise h2 {
    padding-bottom: 24%;
  }
}

@media screen and (max-width:500px) {
  .sp-br {
    display: inline;
  }

#contents .ht, #contents .dc, #contents .de {
  width:100%;
  display:block;
}
#contents .content {
  margin:0;
  width:auto;
  height:auto;
}
h1 {
  font-size:1.5vh;
  margin:auto;
  text-align:center;
}

h2 {
  margin-top:10%;
  padding-bottom:20%;
  font-size:1.5vh;
}
header {
  height:auto;
}
header .ht {
  display: block;
  padding: 15px 0 10px;
}
header .ht img {
  display:block;
  margin:auto;
}
.btn_menu section {
width: 100%;
}

.content {
  min-width:auto;
  min-height:auto;
  padding:20px 5px;
 }

}