@charset "UTF-8";

body{
  width:100%;
  max-width: 720px;
  font-size: 8px;
  overflow-x: scroll;
  overflow-y: hidden;
  margin: 0 auto;
  padding: 0;
}

iframe{
  width: 100%;
  max-width: 720px;
  height: 120px;
  overflow: hidden;
}

.img-menu{
  display: block;
  width: 100%;
  padding: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.img-menu::-webkit-scrollbar {
  height: 1px;
}
.img-menu::-webkit-scrollbar-track {
  background: #f2f5f4;
}
.img-menu::-webkit-scrollbar-thumb {
  background: #222;
}

.img-menu > a,
.img-menu > div{
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 20%;
  padding: 0 2%;
  height: 80px;
  text-decoration: none;
}
a:link,a:visited,a:hover,a:active{
  color: #333;
}
b{
  display: none;
  position: relative;
  text-align: center;
  font-weight: normal;
  white-space: normal;
  height: 100px;
  overflow: hidden;
}
b.twiceline{
  top: 56px;
}
img{
  width: 100%;
  max-width: 100px;
  max-height:100px;
}
a{
  display: inline-block;
  width: 80%;
}

/*--------------------------------*/
/*ボタン*/
/*--------------------------------*/
.btn{
  display: none;
  position: absolute;
  top: 50px;
  border: 20px solid transparent;
}
.btn-prev{
  left: 0;
  border-right: 20px solid #CCC;
  transform: translateX(-50%) translateY(-50%);
}
.btn-prev:hover{
  border-right: 20px solid #999;
}
.btn-next{
  right: 0;
  border-left: 20px solid #CCC;
  transform: translateX(50%) translateY(-50%);
}
.btn-next:hover{
  border-left: 20px solid #999;
}
/*-----------------------------------*/
/*PC用*/
/*-----------------------------------*/

@media screen and (min-width:650px){
.btn{
    display: block;
  }
.img-menu{
  overflow: hidden;
  letter-spacing: -4rem;
}
.img-menu::-webkit-scrollbar {
  display: none;
  }
#imgmenu{
  width: 80%;
  margin: 0 auto;
}
.img-menu > a,
.img-menu > div{
  width: 25%;
  letter-spacing: normal;
}
b{
  display: block;
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 100px;
}


}/*@media*/