@charset "utf-8";

/* --------------------------------------------
  #pic-004（サーキット体験部分）
-------------------------------------------- */

#rwd-content #pic4 {
  margin-top: 38px;
  position: relative;
}
#rwd-content #pic4 img {
  width: 100%;
}
#rwd-content #pic4 a {
  width: 46%;
  height: 20.2%;
  overflow: hidden;
  background: #fff;
  display: block;
  position: absolute;
  right: 8.0%;
  bottom: 0;
  opacity: 0;
  z-index: 4;
  color: transparent;
}
#rwd-content #pic4 a span {
  position: absolute;
  left: -500px;
}

@media print, screen and (min-width: 768px) {
  #rwd-content #pic4 a:hover {
    opacity: 0.5;
  }
}

@media print, screen and (max-width: 767px) {
  #rwd-content #pic4 {
    margin-top: 34px;
  }
  #rwd-content #pic4 a {
    width: 100%;
    height: 21.2%;
    right: 0;
  }
}

/* --------------------------------------------
  #detail
-------------------------------------------- */

@media print, screen and (min-width: 768px) {
  #detail.yomo .items .item.i7 {
    float: right;
    margin-right: 0;
  }
  #detail.yomo .items .item.i8 {
    float: right;
    margin-right: calc(30 / 1220 * 100%);
    margin-left: 0;
  }
  #detail.yomo .items .item.i9 {
    float: left;
    margin-right: calc(11 / 1220 * 100%);
    margin-left: calc(11 / 1220 * 100%);
  }
  #detail.yomo .items .item.i10 {
    float: left;
    margin-left: calc(20 / 1220 * 100%);
  }
}

/* --------------------------------------------
  bg-area
-------------------------------------------- */

#bg-area {
  width: 100%;
  height: calc(527 / 1387 * 100vw);
  position: relative;
  overflow: hidden;
}
#bg-area .pic {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%,-50%) scale(1.8);
  transition: all 3s cubic-bezier(.12,.92,.31,.95);
}
#bg-area .text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 4;
}

@media print, screen and (min-width: 768px) {
  #bg-area.on .pic {
    transform: translate(-50%,-50%) scale(1.3);
  }
}

@media print, screen and (max-width: 767px) {
  #bg-area {
    width: 100%;
    height: calc(621 / 767 * 100vw);
  }
  #bg-area.on .pic {
    transform: translate(-50%,-50%) scale(1);
  }
  #bg-area .text {
    width: 100%;
    top: 18%;
  }
}

/* --------------------------------------------
  #recipe
-------------------------------------------- */

p.note{
  color:#514040;
  line-height:1.4;
}

@media print, screen and (min-width: 768px) {
.rwd-grid-item.pad-left{
  padding-left: 10px!important;
}
 }