@charset "utf-8";

/* CSS Document */
/* =========================================================
 PC用
========================================================= */
@media screen and (min-width: 769px) {
  dl {
    width: 94%;
    margin: 0 auto 100px;
  }

  .naviTrip {
    position: relative;
  }

  .arrow {
    /* position: absolute; */
    /* top: 50%; */
    /* right: 16px; */
    /* transform: translate(0, -50%); */
  }

  .trip {
    padding: 20px 15px;
    display: flex;
  }

  .trip p {
    font-size: 14px;
    color: #717171;
    line-height: 1.7;
    padding-right: 10px;
  }

  dd {
    display: block !important;
    height: auto !important;
    padding-bottom: 25px!important;
  }

  .naviHeader {
    text-indent: -9999px;
    height: 77px;
    background-position-y: center;
    background-position-x: left;
    background-repeat: no-repeat;
  }

  .naviTrip:nth-of-type(1) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_01.png);
  }

  .naviTrip:nth-of-type(2) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_02.png);
  }

  .naviTrip:nth-of-type(3) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_03.png);
  }

  .naviTrip:nth-of-type(4) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_04.png);
  }

  .naviTrip:nth-of-type(5) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_05.png);
  }

  .naviTrip:nth-of-type(6) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_06.png);
  }

  .naviTrip:nth-of-type(7) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_07.png);
  }

  .naviTrip:nth-of-type(8) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_08.png);
  }

  .naviTrip:nth-of-type(9) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_09.png);
  }

  .naviTrip:nth-of-type(10) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_10.png);
  }

  .naviTrip:nth-of-type(11) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_11.png);
  }

  .naviTrip:nth-of-type(12) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_12_new.png);
  }

  .naviTrip:nth-of-type(13) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_13_new.png);
  }

  .naviTrip:nth-of-type(14) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_14_new.png);
  }

  .naviTrip:nth-of-type(15) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_14_new.png);
  }

  .naviTrip:nth-of-type(16) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_16.png);
  }

  .naviTrip:nth-of-type(17) .naviHeader {
    background-image: url(/img/howto/trip/title_trip_17.png);
  }

  .trip img {

  }

  .mainContents {
    background: url(/img/howto/trip/bg_trip_01.gif);
    width: 741px;
    margin: 0 auto;
  }
}

/* =========================================================
 スマホ用
========================================================= */
@media screen and (max-width: 768px) {
  .trip {
    background-image: url("/s/img/trip/bg_trip.gif");
    padding: 5% 0;
  }

  dl {
    margin-bottom: 7vw;
  }

  dt {
    position: relative;
  }

  dd {
    border-bottom: 1px solid #999999;
  }

  .arrow {
    position: absolute;
    right: 5px;
    top: 40%;
    width: 5%;
  }

  .open .arrow {
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }

  .naviTrip {
    display: block;
    border-bottom: 1px solid #999999;
    border-right: 1px solid #999999;
  }

  ul#btnBox, ul#btnBoxLast {
    display: block;
    width: 96%;
    text-align: center;
    margin: 20px auto;
  }

  #btnBox li {
    float: right;
    width: 34%;
    text-align: center;
  }

  #btnBox li.btnNext {
    width: 33%;
    text-align: right;
  }

  #btnBox li.btnPrev {
    width: 33%;
    text-align: left;
  }

  #btnBoxLast li {
    float: left;
    width: 34%;
    text-align: center;
  }

  #btnBox li.btnPrev {
    width: 33%;
    text-align: left;
  }

  .trip p {
    margin: 0 auto;
    text-align: justify;
    width: 90%;
    line-height: 1.6;
  }

  .bnBox {

background-image: url(/s/img/trip/title_trip.jpg);

background-repeat: no-repeat;

background-size: contain;

background-position-y: bottom;

width: 100%;

height: 33vw;
  }

  .naviHeader {
    text-indent: -9999px;
    width: 100%;
    height: 22vw;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .naviTrip:nth-of-type(1) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_01.jpg);
  }

  .naviTrip:nth-of-type(2) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_02.jpg);
  }

  .naviTrip:nth-of-type(3) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_03.jpg);
  }

  .naviTrip:nth-of-type(4) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_04.jpg);
  }

  .naviTrip:nth-of-type(5) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_05.jpg);
  }

  .naviTrip:nth-of-type(6) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_06.jpg);
  }

  .naviTrip:nth-of-type(7) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_07.jpg);
  }

  .naviTrip:nth-of-type(8) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_08.jpg);
  }

  .naviTrip:nth-of-type(9) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_09.jpg?);
  }

  .naviTrip:nth-of-type(10) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_10.jpg?);
  }

  .naviTrip:nth-of-type(11) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_11.jpg?);
  }

  .naviTrip:nth-of-type(12) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_12_new.jpg?);
  }

  .naviTrip:nth-of-type(13) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_13_new.jpg?);
  }

  .naviTrip:nth-of-type(14) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_14_new.jpg?);
  }

  .naviTrip:nth-of-type(15) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_14_new.jpg);
  }

  .naviTrip:nth-of-type(16) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_16.jpg);
  }

  .naviTrip:nth-of-type(17) .naviHeader {
    background-image: url(/s/img/trip/nav_trip_16.jpg);
  }

}