/*font-family: heisei-kaku-gothic-std,sans-serif;
font-weight: 300;
font-style: normal;
font-family: heisei-kaku-gothic-std,sans-serif;
font-weight: 700;
font-style: normal;*/

@charset 'utf-8';
/*=========================================
        　リセットcss
=========================================*/
/* 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%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body{
  font-family: heisei-kaku-gothic-std,sans-serif;
font-weight: 300;
font-style: normal;
}
h2,h3{
  font-weight: 700;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
  color: initial;
}
header{
  width: 100%;
  padding: 10px 0;
  z-index: 400;
  background-color: #fff;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}
.header-wrapper{
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
  align-items: center;
}
.header-logo{
  width: 20%;
}
.header-logo img{
  width: 100%;
  display: block;
}
.header-nav{
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.header-contact{
  width: 35%;
}
.header-contact a{
  display: flex;
  justify-content: center;
  align-items: center;  
  color: #fff;
  background-color: rgb(7,160,177);
   padding: 10px 0;
  border-radius: 5px;
  font-size: 22px;
}
.header-contact a i{
  margin-left: 20px;
}
.fix-flex{
  display: flex;
}

/*フッター*/
footer{
  padding: 50px 0 10px;
  background-color: rgb(7,160,177);
}
.footer-wrapper{
  width: 80%;
  margin: 0 auto;
  align-items: flex-end;
  margin-bottom: 20px;
}
.foot-adress,.footer-contact{
  width: 50%;
}
.foot-adress{
  display: flex;
  align-items: center;
}
.footer-logo{
  width: 15%;
  margin-right: 5%;
  border:solid 1px #fff;
}
.foot-adress p{
  color: #fff;
  line-height: 150%;
}
.footer-contact{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.footer-tel{
  font-size: 22px;
  color: #fff;
  margin-bottom: 20px;
}
.footer-tel span{
  font-size: 40px;
}
.footer-mail{
  background-color: #fff;
  color: rgb(7,160,177);
  font-size: 25px;
  padding: 10px 0;
  width: 50%;
  text-align: center;
  font-weight: 500;
  border-radius: 10px;
}
.copy-right{
  text-align: center;
  width: 100%;
  color: #fff;
  font-weight: 500;
}

@media screen and (max-width: 1024px){
  .header-contact {
      width: 55%;
  }
}

@media screen and (max-width: 500px){
  .header-contact {
      width: auto;
  }
  .header-contact a {
      padding: 10px 15px;
      font-size: 16px;
  }
  .header-logo {
      width: 15%;
  }
  .footer-wrapper {
      width: 80%;
      margin: 0 auto;
      align-items: flex-end;
      margin-bottom: 20px;
      flex-direction: column;
  }
  .foot-adress, .footer-contact {
      width: 100%;
  }
  .foot-adress {
      display: flex;
      align-items: center;
      flex-direction: column;
  }
  .footer-logo {
      width: 25%;
      margin-right: 0%;
      margin-bottom: 15px;
      border: solid 1px #fff;
  }
  .foot-adress p {
      text-align: center;
      color: #fff;
      line-height: 150%;
  }
  .footer-tel span {
      font-size: 30px;
  }
  .footer-tel {
      font-size: 22px;
      color: #fff;
      margin-bottom: 10px;
  }
  .footer-mail {
      width: 100%;
  }
  .footer-contact {
    margin-top: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  .header-nav {
      width: auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
  }
}