@charset "utf-8";

.dummy{
   width: 100%;
  height: 25rem;
  padding:15rem;
  text-align:center;
}
.dummy h3{
  color:#999999;
}

/*トップ画面------------------------------- */
#producttop{
  position: relative;
}

.full-img {
  width: 100%;
  height: 15rem;
  no-repeat fixed;
  object-fit: cover;
  object-position: 30% 60%;
}

/* スマホ　749px以下 */
@media  (max-width: 750px){
.full-img {
  width: 100%;
  height: 21.5rem;
  no-repeat fixed;
  object-fit: cover;
  object-position: 50 100%;
}
}


.bgc {
  text-align: center;
  padding: 2rem;
  margin: auto;
  font-weight: 550; 

  justify-content: center;
  position: absolute;
  z-index: 50;
  top: 2rem;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}



/* pc　749px以上 */
@media (min-width: 749px) {

.Dback {
  width: 336px;
  height: 107px;
  margin: auto;
  justify-content: center;
  z-index: 2;
            position: absolute;
            top: 18%;
            left: 0%;
            right: 100%;
            transform: translate(-18%, -100%);
}
}


/* スマホ　749px以下 */
@media  (max-width: 750px){
.Dback {
  width: 336px;
  height: 107px;
  margin: auto;
  justify-content: center;
  z-index: 2;
            position: absolute;
            top: 15%;
            left: 0%;
            transform: translate(-15%, -100%);
}
}





/*ギャラリー------------------------------- */


/*タブについて*/
.tab{
  display: flex;
  flex-wrap: wrap;
  margin:3rem 0 0 0;
}


.tab li a{
  color:#000;
  width:8rem;
  text-align:center;
  display: block;
  background:#fff;
  margin:0 1rem;
  padding:0.5rem 1rem;
}


.tab li.active a{
  background:#D8F3FB;
}




/*中身*/
.area {
  border-top: solid #D8F3FB 3px;
  margin:0 1rem;
  display: none;
  opacity: 0;
  background: #fff;
  padding:2rem;
}


.area.is-active {
  display: block;
  animation-name: displayAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.Ghalf2 img{
  Width:100%;
  object-fit:contain;
}

/*画像をズーム*/
.zoomIn img{
  transform: scale(1);
  transition: .3s ease-in-out;
}

.zoomIn a:hover img{
  transform: scale(1.2);
}


.mask{
  display: block;
  line-height: 0;
  overflow: hidden;
}


/* PC　750px以上 */
@media  (min-width: 749px){

.Ghalf2{
  text-align:left;
  display: flex;
  justify-content: space-between;
}

.area li{
  padding:2rem;
}
}



/* スマホ　749px以下 */
@media  (max-width: 750px){
.Ghalf2{
  text-align:left;
}

.area li{
  padding:2rem 0;
}
}






/*プロダクトページのみ、お問い合わせとフッターのバック色を変更する------------------------------- */

#sec06{
  background-color:#D8F3FB;
  padding: 5rem 0;
}

footer {
  background-color:#D8F3FB;
  padding: 3rem 0;
}