@charset "utf-8";

/* css Document
*****************************************************************/
@import "../../n_common/css/_variable.css";

#access {
  margin-bottom: 90px;
  @media (width < 896px) {
    margin-bottom: 60px;
  }
  @media (width < 600px) {
    margin-bottom: 45px;
  }
  .map_area {
    max-width:802px;
    margin: 40px auto;
    @media (width < 600px) {
      margin: 30px auto;
    }
    img {
      max-width:100%;
      border:1px solid var(--point_c);
    } 
    p {
      text-align:left;
      font-size:0.8rem;
      margin-top:10px;
    }
  }
  .btn_area {
    display: flex;
    justify-content: center;
    @media (width < 896px) {
      flex-direction: column;
    }
    .button01{
      background-color: var(--main_c);
      position:relative;
      display: block;
      padding: 20px;
      text-align: center;
      font-size: 1rem;
      width: 320px;
      transition: 0.2s;
      @media (width < 896px) {
        margin-bottom:20px;
      }
      &:hover {
        background-color: #FFFB78;
      }
      span {
        position: relative;
        padding-left: 20px;
        letter-spacing: 0.1em;
        &::before {
          position:absolute;
        }
      }
      &::after {
        content: "";
        display: block;
        position: absolute;
        left: 5px;
        top: 5px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        z-index: 1;
        border: 1px solid #fff;
      }
    }
  }
  a {
    margin: 0 20px;
    color: var(--point02);
    &:hover {
      text-decoration: none;
    }
  }
  .print::before {
    content: "";
    border: none;
    background-image: url("../images/ic_print.svg");
    background-size: contain;
    background-repeat: no-repeat; 
    display: inline-block;
    height: 38px;
    transform: rotate(0);
    top: 3px;
    left: -10px;
    width: 20px;
  }
  .mapLink::before {
    content: "";
    border: none;
    background-image: url("../images/ic_map.svg");
    background-size: contain;
    background-repeat: no-repeat; 
    display: inline-block;
    height: 38px;
    transform: rotate(0);
    top: 3px;
    left: -10px;
    width: 20px;
  }
}