@charset "UTF-8";

/* dlight */
.dm {}

/* ==================================================
/* SMARTPHONE
================================================== */
@media screen and (max-width: 768px) {

  #page-main {
    padding: 0 0 120px;
  }

  #pagekv p {
    color: #FFF;
  }


  .acc-gmap {
    margin: 0 auto 50px;
  }

  .acc-gmap>.inner {
    width: 100%;
    margin: auto;
  }

  .acc-gmap>.inner iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.5;
  }


  .acc-how {
    margin-bottom: 50px;
  }

  .acc-how>.inner>.header {
    margin-bottom: 30px;
  }

  .acc-how>.inner>.header h2 {
    width: 168px;
    font-size: 1.1rem;
    font-weight: 300;
    text-align: center;
    margin: 0 auto 30px;
  }

  .acc-how>.inner>.header h2 .logo {
    margin-bottom: 10px;
  }

  .acc-how>.inner>.header h2 img {
    width: 100%;
  }

  .acc-how>.inner>.header p {
    width: 80%;
    margin: auto;
    font-size: 1rem;
  }

  .acc-how>.inner>.case {
    width: 80%;
    margin: auto;
  }

  .acc-how>.inner>.case h3 {
    font-size: 1.2rem;
  }

  .acc-how>.inner>.case dl {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 30px 5px;
  }

  .acc-how>.inner>.case dl>div {
    position: relative;
    padding-left: 50px;
  }

  .acc-how>.inner>.case dl>div::before {
    display: block;
    content: '';
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .acc-how>.inner>.case dl>div.btrain::before {
    background-image: url(../img/access/icon_btrain.svg);
    width: 34px;
    height: 24px;
    top: -7px;
    left: 0;
  }

  .acc-how>.inner>.case dl>div.rtrain::before {
    background-image: url(../img/access/icon_rtrain.svg);
    width: 26px;
    height: 33px;
    top: -10px;
    left: 3px;
  }

  .acc-how>.inner>.case dl>div.plain::before {
    background-image: url(../img/access/icon_plain.svg);
    width: 28px;
    height: 28px;
    top: -8px;
    left: 0;
  }

  .acc-how>.inner>.case dl>div.car::before {
    background-image: url(../img/access/icon_car.svg);
    width: 32px;
    height: 16px;
    top: -2px;
    left: 0;
  }

  .acc-how>.inner>.case dl>div+div {
    margin-top: 30px;
  }

  .acc-how>.inner>.case dl dt {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    width: 170px;
  }

  .acc-how>.inner>.case dl dd {
    flex: 1;
    margin-left: 14px;
  }

  .acc-how>.inner>.case dl dd ul {
    margin-top: 6px;
    list-style: disc;
    list-style-position: outside;
  }

  .acc-how>.inner>.case dl dd ul li {
    font-size: 1.1rem;
  }

  .acc-how>.inner>.case dl dd p {
    font-size: 1.1rem;
    margin-top: 1em;
  }


  .acc-parking>.inner .header {
    width: 80%;
    margin: 0 auto 20px;
    text-align: left;
  }

  .acc-parking>.inner .header .sec-tt-en {
    display: inline-block;
  }

  .acc-parking>.inner .header .sec-tt-ja {
    font-size: 1.2rem;
    letter-spacing: 0;
  }

  .acc-parking>.inner .parking {
    width: 80%;
    margin: auto;
  }

  .acc-parking>.inner .parking .pinfo {
    margin-bottom: 20px;
  }

  .acc-parking>.inner .parking .pinfo h3 {
    font-size: 1.2rem;
    font-weight: 500;
    color: #FFF;
    background: #757569;
    padding: 5px 15px;
  }

  .acc-parking>.inner .parking .pinfo .catch {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .acc-parking>.inner .parking .pinfo .read {
    font-size: 1.1rem;
  }

  .acc-parking>.inner .parking .pinfo .stay>.inner {
    padding: 10px 15px 15px;
  }

  .acc-parking>.inner .parking .pinfo .temporary>.inner {
    padding: 10px 15px 15px;
  }

  .acc-parking>.inner .parking .pinfo .temporary>.inner table {
    border-collapse: collapse;
    border-top: 1px solid #757569;
    width: 100%;
    margin-bottom: 10px;
  }

  .acc-parking>.inner .parking .pinfo .temporary>.inner table th,
  .acc-parking>.inner .parking .pinfo .temporary>.inner table td {
    font-size: 1.1rem;
    border-bottom: 1px solid #757569;
    padding: 5px 10px;
  }

  .acc-parking>.inner .parking .pinfo .temporary>.inner table th {
    font-weight: 500;
    white-space: nowrap;
    background: #EDE9E6;
  }

  .acc-parking>.inner .parking .pinfo .temporary>.inner table td .bikou {
    font-size: 1rem;
    line-height: 1;
  }

  .acc-parking>.inner .parking .pinfo .notknow {
    font-size: 1.1rem;
    font-weight: 500;
    color: #FFF;
    text-align: center;
    background: #000;
    padding: 8px 0;
  }

  .acc-parking>.inner .parking .pmap figcaption {
    font-size: 1.1rem;
    margin-top: 15px;
  }

}

/* ==================================================
/* DESKTOP
================================================== */
@media (768px < width) {

  #page-main {
    padding: 0 0 120px;
  }

  #pagekv p {
    color: #FFF;
  }


  .acc-gmap {
    >.inner {
      width: 1060px;
      margin: auto;

      iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 0.46;
      }
    }

    margin: 0 auto 80px;
  }

  .acc-how {
    margin-bottom: 100px;

    >.inner {
      >.header {
        display: flex;
        justify-content: center;
        margin-bottom: 60px;

        h2 {
          width: 276px;
          font-size: 1.8rem;
          font-weight: 300;
          margin-right: 60px;

          .logo {
            margin-bottom: 10px;
          }

          img {
            width: 100%;
          }
        }

        p {
          font-size: 1.4rem;
        }
      }

      >.case {
        width: 700px;
        margin: auto;

        h3 {
          font-size: 1.5rem;
        }

        dl {
          border-top: 1px solid #000;
          border-bottom: 1px solid #000;
          padding: 50px 10px;

          >div {
            position: relative;
            display: flex;
            padding-left: 70px;

            &::before {
              display: block;
              content: '';
              position: absolute;
              background-size: contain;
              background-repeat: no-repeat;
            }
          }

          >div.btrain::before {
            background-image: url(../img/access/icon_btrain.svg);
            width: 48px;
            height: 38px;
            top: -12px;
            left: 0;
          }

          >div.rtrain::before {
            background-image: url(../img/access/icon_rtrain.svg);
            width: 36px;
            height: 46px;
            top: -18px;
            left: 3px;
          }

          >div.plain::before {
            background-image: url(../img/access/icon_plain.svg);
            width: 40px;
            height: 40px;
            top: -12px;
            left: 0;
          }

          >div.car::before {
            background-image: url(../img/access/icon_car.svg);
            width: 46px;
            height: 22px;
            top: 0;
            left: 0;
          }

          >div+div {
            margin-top: 50px;
          }

          dt {
            font-size: 1.6rem;
            font-weight: 600;
            line-height: 1.2;
            width: 170px;
          }

          dd {
            flex: 1;
            margin-left: 50px;

            ul {
              list-style: disc;
              list-style-position: outside;
            }

            p {
              font-size: 1.2rem;
              margin-top: 1em;
            }
          }
        }
      }
    }
  }

  .acc-parking {
    >.inner {
      .header {
        margin-bottom: 70px;
        text-align: center;

        .sec-tt-en {
          display: inline-block;
          margin-bottom: 30px !important;
        }
      }

      .parking {
        width: 1060px;
        margin: auto;
        display: flex;
        justify-content: space-between;

        .pinfo {
          width: 500px;

          h3 {
            font-weight: 500;
            color: #FFF;
            background: #757569;
            padding: 5px 15px;
          }

          .catch {
            font-size: 1.6rem;
            font-weight: 400;
            margin-bottom: 10px;
          }

          .stay {
            >.inner {
              padding: 15px 20px 20px;
            }
          }

          .temporary {
            >.inner {
              padding: 15px 20px 20px;

              table {
                border-collapse: collapse;
                border-top: 1px solid #757569;
                width: 100%;
                margin-bottom: 10px;

                th,
                td {
                  border-bottom: 1px solid #757569;
                  padding: 10px 20px;
                }

                th {
                  font-weight: 500;
                  background: #EDE9E6;
                }
              }
            }
          }

          .notknow {
            font-size: 1.6rem;
            font-weight: 500;
            color: #FFF;
            text-align: center;
            background: #000;
            padding: 8px 0;
          }
        }

        .pmap {
          width: 530px;

          figcaption {
            font-size: 1.2rem;
            margin-top: 15px;
          }
        }
      }
    }
  }

}