@charset 'utf-8';

#deliveryBlock {
  margin-bottom: 35px;
}

.howtoBox {
  border: 1px solid #979797;
  width: 758px;
  height: 126px;
  margin-bottom: 10px;
  box-sizing: border-box;
  position: relative;
  background-image: url('/img/howto/bg_playBoxContent.jpg');
}

.stepImg {
  width: 112px;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  background-image: url('/img/howto/bg_playBoxStap.jpg');
  background-position: 8px top;
}

.stepImg::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #ffffff;
  font-size: 61px;
  background-position: center bottom 7px;
  background-repeat: no-repeat;
}

.step1 .stepImg::after {
  background-image: url(/img/howto/img_stap01.png);
}

.step2 .stepImg::after {
  background-image: url(/img/howto/img_stap02.png);
}

.step3 .stepImg::after {
  background-image: url(/img/howto/img_stap03.png);
}

.step4 .stepImg::after {
  background-image: url(/img/howto/img_stap04.png);
}

.howtoDescription {
  width: 615px;
}

.howtoDescription h4 {
  border-bottom: 1px solid #323232;
  font-weight: bold;
  font-size: 16px;
  padding-top: 17px;
  text-indent: 11px;
  padding-bottom: 15px;
  color: #323232;
}

.howtoDescription p {
  padding: 11px 0 20px 11px;
  line-height: 1.2em;
  box-sizing: border-box;
  position: relative;
}

.supplementText {
  line-height: 1.5em;
  margin: 0 auto 10px;
  position: relative;
  letter-spacing: -0.03em;
}

.smallText {
  font-size: 12px;
}

#googleMapWrap #googleMapBox {
  position: absolute;
  top: 40px;
  width: 758px;
  background-color: #ffffff;
  border-radius: 0px 0px 7px 7px;
  border-bottom: solid 1px #000000;
  border-left: solid 1px #000000;
  border-right: solid 1px #000000;
}

#googleMapWrap .supplementText {
  /* width: 720px; */
  margin-bottom: 20px;
  padding-top: 7px;
}

.mapWrap {
  width: 723px;
  margin: 0 auto 20px auto;
}

.mapAreaTitle {
  font-size: 16px;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
  /* color: #ce9b2c; */
  font-weight: bold;
}

.eastMapAreaWrap .mapArea {
  position: relative;
  margin-bottom: 22px;
  border-bottom: 1px #a47a1b dashed;
  padding-bottom: 22px;
}

.westMapAreaWrap .mapArea {
  position: relative;
  margin-bottom: 22px;
}

.googleMapBox {
  width: 358px;
  float: left;
  height: 267px;
  padding-left: 21px;
  background: url('/img/howto/bg_googlemap.jpg');
  margin-bottom: 15px;
}

.mapTextBox {
  margin-bottom: 14px;
  margin-top: 15px;
}

.mapTextBox p {
  font-weight: bold;
  color: #ffffff;
  font-size: 14px;
}

.mapTextBox p span {
  font-size: 12px;
  letter-spacing: -0.3px;
  font-weight: bold;
}

.googleMap {
  border: 1px solid #ffffff;
  width: 335px;
  height: 196px;
  background-color: #000000;
}

.mapImage {
  border: 3px solid #B39E6B;
  float: right;
  position: relative;
  box-sizing: border-box;
}

.mapImage::before {
  content: "";
  position: absolute;
  top: 58px;
  left: -36px;
  border-top: 19px solid transparent;
  border-right: 33px solid #B39E6B;
  border-bottom: 19px solid transparent;
}

.howtoBoxContent {
  padding-left: 112px;
}

/* =========================================================
 PC用
========================================================= */
@media screen and (min-width: 769px) {
  .hotelBtn a::before {
    content: "▶";
    background-color: #fffcb7;
    color: #ff324b;
    height: 100%;
    width: 32px;
    display: inline-block;
    position: absolute;
    left: 0;
  }

  .hotelBtn:hover {
    opacity: 0.7;
  }

  .supplementText span {
    float: right;
  }

  #googleMapWrap {
    width: 760px;
    position: relative;
    background: url('/img/howto/bg_mapImag.jpg');
    border-bottom: 1px solid #f7df9b;
    border-top: 1px solid #ba8b2a;
    margin-top: 16px;
    padding: 22px 19px 7px;
    box-sizing: border-box;
  }
  
  #googleMapWrap::before, #googleMapWrap::after {
    width: 1px;
    content: '';
    height: 100%;
    background: -webkit-gradient(linear, left top, right bottom, from(#ba8b2a), to(#f7df9b));
    background: -moz-linear-gradient(top, #ba8b2a, #f7df9b);
    background: linear-gradient(top, #ba8b2a, #f7df9b);
    position: absolute;
    top: 0;
  }
  
  #googleMapWrap::before {
    left: 0;
  }
  
  #googleMapWrap::after {
    right: 0;
  }

  #contentsWrapper #googleMapWrap h3 {
    background: none;
    height: auto;
    line-height: normal;
    margin-top: 0;
  }

  .mapImage {
    width: 343px;
    height: 267px;
    overflow-y: hidden;
  }
}

/* =========================================================
 スマホ用
========================================================= */
@media screen and (max-width: 768px) {
  h3 {
    font-size: 4.7vw;
    letter-spacing: -0.1vw;
  }

  .supplementText {
    width: 94%;
    margin: 5vw auto;
    line-height: 1.5;
  }

  #deliveryBlock>ul, #meetBlock>ul {
    width: 96%;
    margin: 0 auto;
  }

  .howtoBox {
    width: 100%;
    height: auto;
    margin-bottom: 3vw;
    border-color: #979797;
    /* color: #1d1e1f; */
  }

  .stepImg {
    width: 22%;
    height: 100%;
  }

  .stepImg::before {
    height: 100%;
    background-position-y: 3vw;
    background-size: 55%;
  }

  .stepImg::after {
    background-size: 85%;
    background-position-y: 20%;
  }

  .howtoDescription h4 {
    font-size: 4.05vw;
    padding: 0;
    text-indent: 1.3em;
    width: 100%;
    line-height: 2;
  }

  .howtoDescription p {
    padding-top: 4.3%;
    padding-left: 1.2em;
    line-height: 1.3;
    width: 91%;
    margin-bottom: 5%;
  }

  .smallText {
    font-size: 3.2vw;
    line-height: 1.7;
  }

  .supplementText.clearfix>span {
    letter-spacing: 0.1em;
    height: 10vw;
    width: 100%;
    position: static;
    float: none;
    margin-top: 5vw;
    display: block;
  }

  .supplementText.clearfix a {
    font-size: 4vw;
    height: 100%;
    line-height: 10vw;
    width: 90%;
    margin: 0 auto;
  }

  #googleMapWrap {
    margin: 0 auto 7vw;
  }

  #googleMapWrap #googleMapBox {
    width: 100%;
    position: static;
    box-sizing: border-box;
  }

  #googleMapWrap .supplementText {
    width: 94%;
    margin: 0 auto 5vw;
    /* padding-top: 5vw; */
  }

  .mapWrap {
    width: 96%;
    margin: 0 auto;
  }

  .mapAreaTitle {
    font-size: 4.3vw;
    margin-bottom: 3vw;
    line-height: 1.2;
  }

  .eastMapAreaWrap .mapArea, .westMapAreaWrap .mapArea {
    margin-bottom: 2vw;
    padding-bottom: 0;
    border: none;
    background-color: #ffffff;
  }

  .eastMapAreaWrap .mapArea {
    margin-bottom: 5vw;
  }

  .googleMapBox {
    width: 100%;
    float: none;
    border: none;
    height: auto;
    box-sizing: border-box;
    padding: 0;
    background: none;
    margin-bottom: 2%;
  }

  .mapTextBox {
    margin-bottom: 0;
    margin-top: 0;
    /* background-color: #ce9b2c; */
    line-height: 1.3;
    text-indent: 0.5em;
    padding: 3% 0;
  }

  .mapTextBox p {
    font-size: 4.2vw;
    color: #ffffff;
    font-weight: normal;
  }

  .mapTextBox p span {
    font-size: 3.2vw;
    font-weight: normal;
    /* padding-left: 1vw; */
    display: block;
    text-indent: 0;
  }

  .googleMap {
    width: 100%;
    height: 65vw;
    box-sizing: border-box;
    border: none;
  }

  .mapImage {
    border: none;
    float: none;
    position: relative;
    width: 100%;
    margin: 2vw auto 0;
  }

  .mapImage::before {
    top: 78px;
    left: -36px;
    border-top: 19px solid transparent;
    border-right: 33px solid #d1b35c;
    border-bottom: 19px solid transparent;
    content: none;
  }

  .googleMap iframe {
    width: 100%;
    height: 100%;
  }

  .mapImage img {
    width: 100%;
    height: auto;
  }

  #deliveryBlock {
    margin-bottom: 9vw;
  }

  .howtoBoxContent {
    padding-left: 0;
  }

  .howtoDescription {
    height: auto;
    width: 95%;
    /* margin-top: 2%; */
    padding-left: 22%;
    box-sizing: border-box;
  }

  #cautionNeeded {
    display: none;
  }

  .hotelBtn {
    position: relative;
    bottom: 0;
    right: 0;
    width: 94%;
    margin: 0 auto 4%;
    height: 12vw;
    background-color: #ff606b;
    background-image: linear-gradient(0deg, #ff4953, #ff606b);
    border: 1px solid #ff697b;
  }

  .hotelBtn a {
    color: #ffffff;
    line-height: 12vw;
    text-decoration: none;
    font-size: 4.5vw;
  }

  .hotelBtn a::before {
    content: "▶";
    background-color: #fffcb7;
    color: #ff324b;
    height: 100%;
    width: 12vw;
    display: inline-block;
    position: absolute;
    left: 0;
  }

  .supplementText span {
    display: block;
  }

  .mapAreaWrap  {
    width: 96%;
    margin: 0 auto 3%;
  }

  .mapArea {
    background-image: url("/s/img/play/bg_imgBlock.jpg");
    padding: 0 2% 2%;
    box-sizing: border-box;
  }
}