.gfs-didot-regular {
  font-family: "GFS Didot", serif;
  font-weight: 400;
  font-style: normal;
}


@font-face {
  font-family: "GFS Didot";
  src: url("../fonts/GFSDidot-Regular.ttf") format("truetype");
}

html {
  scroll-padding-top: 230px;
  font-family: "GFS Didot", serif; 
}

body {
  padding: 150px 0 0 0;
  margin: 0;
  }

a { color: #008; }

header {
  position: fixed;
  height: 200px;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid #000;
  box-shadow: 0 5px 15px;
  div { width: 1030px; margin: 0 auto;  }
  img { float: left; margin: 0 2em 0 0; }
  nav ul { display: flex; list-style-type: none;  justify-content: space-evenly; margin: 0; padding: 0; }
  line-height: 200px;
  background: #fff;
  a { color: #008; }
  z-index: 10; 
  }

section {
  width: 836px; padding: 2em; margin: 100px auto;
  background: rgba(255, 255, 255, .9);
  h2 { 
    margin-top: 0;
    img { float: none !important; }
    }
  img { float: left; margin: 0 2em 0 0; }
  div:not(.fadein) {
    clear: both; display: flex; padding-top: 40px; justify-content: space-evenly; text-align: center; 
    a { display: block; color: #fff; background: #00f; border-radius: 5px; padding: 5px 10px; text-decoration: none; font-weight: bold; }
    }
  p { text-align: center; }


position: relative; 
  &::before {
    display: block; 
    content: "";
    /*height: calc(100% + 140px);*/
    /* width: 100vw; */
    left: calc(-50dvw + 50%);
    right: calc(-50dvw + 50%);
    top: -52px;
    bottom: -52px;
    position: absolute;
    z-index: -1; 
    background-attachment: fixed;
    background-size: cover;
    }

  &#canon {
    border: 2px solid #f00a0a;
    &::before {
      background-image: url("../images/canon_background.jpg"); 
      }
    }
  &#epson {
    border: 2px solid #3b58b8;
    .fadein { float: right; margin: 0 0 0 2em; width: 470px; height: 340px; }
    img { float: none; margin: 0; }
    &::before {
      background-image: url("../images/epson_background.jpg"); 
      }
    }
  &#oki {
    border: 2px solid #f00a0a;
    img { float: right; margin: 0 0 0 2em; }
    &::before {
      background-image: url("../images/oki_background.jpg"); 
      }
    }
  &#print_factory { border: 2px solid #ffc01f;
    img { float: right; margin: 0 0 0 2em; }
    &::before {
      background-image: url("../images/print_factory_background.jpg"); 
      }
    }
  &#impoproof { border: 2px solid #f00a0a;
    &::before {
      background-image: url("../images/impoproof_background.jpg"); 
      }
    }
  &#mutoh { border: 2px solid #3b58b8;
    &::before {
      background-image: url("../images/mutoh_background.jpg");
      bottom: -152px;
      }
    }
  &#digital-66 {
    img { width: 600px; }
    width: 1030px;
    a { display: block; text-align: center; color: #008; }
   }
  }
@media (max-width: 835px) {
  section::before {
    left: 0 !important;
    right: 0 !important;
    }
  }
@media (max-width: 1030px) {
  section::before {
    left: -100px;
    right: -100px;
    }
  }

h2 { text-align: center; }


footer {
  background: #fff;
  padding: 1em;
  div { width: 1030px; display: flex; justify-content: space-evenly; margin: 0 auto; }
  border-top: 1px solid #000;
  a { color: #008; }
}



.fadein {
   position: relative;
   img {
    position:absolute;
    top:0;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;

   &:nth-child(even) {
     -webkit-animation-delay: -3s;
     }
   }



}

@keyframes fade {
    0% {opacity: 0;}
    10% {opacity: 1;}
    50% {opacity: 1;}
    60% {opacity: 0;}
    100% {opacity: 0;}
}