@charset "UTF-8";


* {
  padding: 0;
  margin: auto;
}
html {
  font-size:62.5%;
}
body {
  font-size:1.6rem;
  font-family:"Roboto","游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro","Hiragino kaku Gothic Pro","メイリオ","Meiryo","sans-serif";
}
img {
  max-width: 100%;
  height: auto;
}

@media only screen and (min-width: 320px){
.FV {
  background-image: url(../images/topimg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100vw;
  height: 700px;
  position: relative;
  z-index: 1;
}
.name {
  width: 90%;
  z-index: 2;
  position: absolute;
  top: 15%;
  left: 5%;
}
.scroll {
  z-index: 3;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
}
.sankaku {
  z-index: 4;
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translateX(-50%);
}

.worksArea {
  background-image: url(../images/topimg.jpg);
  background-repeat: repeat-y;

  background-position: center center;
  width: 100vw;
  height: 100%;
  padding-top: 10%;

/*  background-image: url(../images/topimg.jpg);
  background-repeat: repeat-y;
  background-position: center;
  width: 100vw;
  height: 100%;
  padding: 10%;
*/
}
.works {
  background-color:rgba(255,255,255,0.6);
  margin: auto;
  text-align: center;
  padding-bottom: 5%;
  width: calc(100% - 10%);
}
.workslogo {
  width: 50%;
  margin-top: 10%;
}
.subtitle {
  color: #274b7b;
}
.sakuhin {
  margin-top: 15%;
}
h2 {
  color: #515454;
  font-size: 3rem;
  margin-bottom: 8%;
}
.sakuhinlist {
  display: block;
  margin-bottom: 8%;
}
.sakuhinname {
  margin-top: -10%;
}
.resize {
  width: 80%;
}
footer {
  color: #ffffff;
  text-align: center;
  margin-top: 8%;
}

}

@media only screen and (min-width: 801px){
.FV {
  height: 800px;
}
.name {
  width: 70%;
  left: 15%;
}
.IMG {
 width:50%;
}
.sakuhinname {
  margin-top: -5%;
}
}

@media only screen and (min-width: 1200px){
.FV {
  height: 1200px;
}
}