@media screen and (min-width:751px){

/* main visual */
#stage {
  position: relative;
  max-width: 1100px;
  margin: 25px auto 0 auto;
}
#photo1 {
  position: absolute;
}
#photo2 {
  position: absolute;
}
#photo1 img {
  width: 100%;
  height: auto;
  opacity:0;
  -moz-animation: imgTrans1 60s infinite;
  -webkit-animation: imgTrans1 60s ease-in infinite;
  animation: imgTrans1 60s infinite;
  animation-fill-mode: forwards;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#photo2 img {
  width: 100%;
  height: auto;
  opacity:0;
  animation: imgTrans2 60s;
  animation-fill-mode: forwards;
  -moz-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
@-webkit-keyframes imgTrans1 {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans1 {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans1 {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans2 {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:1; }
100% { opacity:1; }
}

#adjust {
  padding: 28%; 
}

/* 見出し */
h2 { 
  font-size: 55px;
  font-weight: lighter;
  margin-bottom: 30px; 
  text-align: center; 
  letter-spacing: 0.03em; 
}

/* about works */
#to_about, #to_works {
  max-width: 720px; 
  margin: 11% auto 150px auto; 
}

/* view more */
.viewmore { 
  border-radius: 40px; 
  background-color: #2c2c2c; 
  color: #ffffff;
  height: 40px; 
  width: 130px; 
  margin: 50px auto 80px auto; 
  text-decoration: none; 
  font-size: 15px; 
  text-align: center; 
  letter-spacing: 0.05em; 
  line-height: 40px; 
}

}



@media screen and (max-width:750px){

/* トップ画像 */
#stage {
  position: relative;
  max-width: 750px;
  margin: 80px auto 0 auto;
}
#photo1 {
  position: absolute;
}
#photo2 {
  position: absolute;
}
#photo1 img {
  width: 100%;
  height: auto;
  opacity:0;
  -moz-animation: imgTrans1 60s infinite;
  -webkit-animation: imgTrans1 60s ease-in infinite;
  animation: imgTrans1 60s infinite;
  animation-fill-mode: forwards;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#photo2 img {
  width: 100%;
  height: auto;
  opacity:0;
  animation: imgTrans2 60s;
  animation-fill-mode: forwards;
  -moz-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
@-webkit-keyframes imgTrans1 {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans1 {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans1 {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans2 {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:1; }
100% { opacity:1; }
}

#adjust {
  padding: 30%; 
}

/* 見出し */
h2 { 
  font-size: 45px;
  font-weight: lighter;
  margin-bottom: 15px; 
  text-align: center; 
  letter-spacing: 0.03em; 
}

/* about works */
#to_about, #to_works {
  width: auto; 
  margin: 10% auto 20px auto; 
}

/* view more */
.viewmore { 
  border-radius: 40px; 
  background-color: #2c2c2c; 
  color: #ffffff;
  height: 40px; 
  width: 130px; 
  margin: 50px auto 80px auto; 
  text-decoration: none; 
  font-size: 14px; 
  text-align: center; 
  letter-spacing: 0.05em; 
  line-height: 40px; 
}

}