@charset "UTF-8";

/* =====================
  01
===================== */
.tab-access {
  .article[data-id='1'] {
    padding-block-end: 134px;

    @media (width <=768px) {
      padding-block-end: var(--nudge-9);
    }

    /* ==== u-inner ==== */
    .u-inner {
      display: block grid;
      gap: 66px;

      @media (width > 768px) {
        padding-inline: 80px;
      }

      @media (width <=768px) {
        gap: var(--nudge-6);
      }
    }

    /* ==== access-list ==== */
    .access-list {
      display: block grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 53px 40px;

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: var(--nudge-5);
      }

      /* ==== section ==== */
      section {
        display: block grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
        gap: 0;
        align-items: flex-start;
        overflow: clip;
      }

      /* ==== h3 ==== */
      h3 {
        grid-column: 1 / -1;
      }

      /* ==== iframe ==== */
      iframe {
        grid-column: 1 / -1;
        inline-size: 100%;
        block-size: 500px;
        margin-block-start: 31px;

        @media (width <=768px) {
          block-size: calc((100 / 390) * 240 * 1vw);
          margin-block-start: var(--nudge-3);
        }
      }

      /* ==== location ==== */
      .location {
        font-weight: 500;
        word-break: auto-phrase;

        @media (width <=768px) {
          font-size: calc((100 / 390) * 15 * 1vw);
          word-break: auto-phrase;
        }
      }

      /* ==== tel-fax ==== */
      .tel-fax {
        display: block flex;
        gap: 5px;
        align-items: center;
        font-weight: 500;

        @media (width <=768px) {
          display: block flex;
          gap: var(--nudge-1);
          align-items: flex-start;
          padding-inline-start: 0;
          font-size: calc((100 / 390) * 15 * 1vw);

          a[href^='tel:'] {
            text-decoration: underline;
          }
        }

        p+p::before {
          margin-inline-end: 3px;
          content: '／';

          @media (width <=768px) {
            margin-inline-end: var(--nudge-1);
          }
        }
      }

      /* ==== station ==== */
      .station {
        display: block grid;
        align-self: flex-start;
        inline-size: 100%;
        padding-block: 20px;
        padding-inline: 32px;
        font-size: 15px;
        font-weight: 500;
        color: var(--primary);
        background: white;
        border-radius: 10px;

        @media (width <=768px) {
          padding-block: 3.7vw;
          padding-inline: calc((100 / 390) * 16 * 1vw);
          font-size: calc((100 / 390) * 14 * 1vw);
          border-radius: calc((100 / 390) * 10 * 1vw);
        }

        li {
          position: relative;
          padding-inline-start: 20px;

          @media (width <=768px) {
            padding-inline-start: calc((100 / 390) * 16 * 1vw);
            word-break: auto-phrase;
          }

          &::before {
            position: absolute;
            inset-block-start: 12px;
            inset-inline-start: 1.1%;
            inline-size: 4px;
            aspect-ratio: 1 / 1;
            content: '';
            background: currentcolor;
            border-radius: calc(infinity * 1px);

            @media (width <=768px) {
              inset-block-start: 2.7vw;
              inline-size: calc((100 / 390) * 4 * 1vw);
            }
          }
        }
      }

      /* ==== osaka ==== */
      section[data-id='osaka'] {
        grid-template-columns: auto 701px;
        grid-column: 1 / 3;
        gap: 0 20px;

        @media (width <=768px) {
          display: block flex;
          flex-direction: column;
        }

        address {
          grid-column: 1 / 2;
          margin-block-start: 30px;

          @media (width <=768px) {
            margin-block-start: var(--nudge-2);
          }
        }

        .station {
          grid-column: 2 / 3;
          margin-block-start: 30px;

          @media (width <=768px) {
            gap: 2.2vw;
            margin-block-start: var(--nudge-1);
          }
        }
      }

      /* ==== nagoya ==== */
      section[data-id='nagoya'] {
        grid-column: 1 / 2;
      }

      /* ==== tokyo ==== */
      section[data-id='tokyo'] {
        grid-column: 2 / 3;
      }

      /* ==== namba ==== */
      section[data-id='namba'] {
        grid-column: 1 / 2;
      }

      /* ==== fukuoka ==== */
      section[data-id='fukuoka'] {
        grid-column: 2 / 3;
      }

      section:not([data-id='osaka']) {
        address {
          margin-block-start: 30px;

          @media (width <=768px) {
            inline-size: 100%;
            margin-block-start: var(--nudge-2);
            font-size: calc((100 / 390) * 15 * 1vw);
          }
        }

        .station {
          margin-block: 20px 26px;

          @media (width <=768px) {
            margin-block: var(--nudge-2) 0;
          }
        }
      }
    }
  }
}