/* footer */
.footer{
  grid-area: footer;
  display: grid;
  grid-template: 
    "... ....... ......." calc(290px * var(--window_ratio))
    "... company sitemap" auto
    "... ....... ......." calc(110px * var(--window_ratio))
    /calc(130px * var(--window_ratio)) calc(640px * var(--window_ratio)) calc(830px * var(--window_ratio));
  background-color: #26263b;
  color: #ffffff;
}
.footer-company{
  grid-area: company;
  display: grid;
  grid-template: 
    "logo      ......... company-name company-name company-name company-name" calc(55px * var(--window_ratio))
    "......... ......... ............ ............ ............ ............" calc(55px * var(--window_ratio))
    "post-code post-code post-code    post-code    post-code    post-code   " calc(14px * var(--window_ratio))
    "......... ......... ............ ............ ............ ............" calc(12px * var(--window_ratio))
    "address   address   address      address      address      address     " calc(14px * var(--window_ratio))
    "......... ......... ............ ............ ............ ............" calc(47px * var(--window_ratio))
    "contact   contact   contact      contact      contact      contact     " calc(52px * var(--window_ratio))
    "......... ......... ............ ............ ............ ............" calc(260px * var(--window_ratio))
    "copyright copyright copyright    copyright    privacy      privacy     " calc(12px * var(--window_ratio))
    /calc(90px * var(--window_ratio)) calc(25px * var(--window_ratio)) calc(95px * var(--window_ratio)) calc(40px * var(--window_ratio)) calc(85px * var(--window_ratio)) auto;
}
.footer-logo{
  grid-area: logo;
  width: 100%;
}
.footer-company-name{
  grid-area: company-name;
  font-family: Montserrat;
  font-size: calc(16px * var(--window_ratio));
  line-height: 3.75;
  margin: 0;
  vertical-align: middle;
}
.footer-postcode{
  grid-area: post-code;
  font-size: calc(14px * var(--window_ratio));
  font-family: '游ゴシック体', yuGothic, sans-serif;
  opacity: 0.5;
}
.footer-address{
  grid-area: address;
  font-size: calc(14px * var(--window_ratio));
  font-family: '游ゴシック体', yuGothic, sans-serif;
  opacity: 0.5;
}
.footer-contact{
  grid-area: contact;
}
.footer-copyright{
  grid-area: copyright;
  margin: 0;
  font-family: Montserrat;
  font-size: calc(12px * var(--window_ratio));
  color: rgba(255, 255, 255, 0.5);
}
.footer-privacy-policy{
  grid-area: privacy;
  font-family: Montserrat;
  font-size: calc(12px * var(--window_ratio));
  color: rgba(255, 255, 255, 0.5);
}
.footer-sitemap{
  grid-area: sitemap;
  display: grid;
  grid-template: 
    "....... ..............." 23px
    "vision  vision-content " 15px
    "....... ..............." 50px
    "service service-content" 15px
    "....... ..............." 50px
    "company company-content" 15px
    "....... ..............." 50px
    "news    news-content   " 15px
    "....... ..............." 50px
    "contact ..............." 15px
    /calc(180px * var(--window_ratio)) auto;
}
.footer-sitemap a{
  font-size: calc(15px * var(--window_ratio));
  margin: 0;
  text-decoration: none;
}
.footer-sitemap a:hover{
  text-decoration-line: underline;
}
.footer-sitemap-vision{
  grid-area: vision;
  color: #ffffff;
}
.footer-sitemap-service{
  grid-area: service;
  color: #ffffff;
}
.footer-sitemap-company{
  grid-area: company;
  color: #ffffff;
}
.footer-sitemap-news{
  grid-area: news;
  color: #ffffff;
}
.footer-sitemap-contact{
  grid-area: contact;
  color: #ffffff;
}
.footer-sitemap-vision-content{
  grid-area: vision-content;
  color: rgba(255, 255, 255, 0.5);
}
.footer-sitemap-service-content{
  grid-area: service-content;
  color: rgba(255, 255, 255, 0.5);
}
.footer-sitemap-company-content{
  grid-area: company-content;
  color: rgba(255, 255, 255, 0.5);
}
.footer-sitemap-news-content{
  grid-area: news-content;
  color: rgba(255, 255, 255, 0.5);
}