/* ----------------------------------------
ACCESS：アクセス
---------------------------------------- */

.access__wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 3.5em clamp(20px, 3vw, 47px);
    justify-content: center;
    align-items: flex-start;
}

.access__block {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 47px);
    justify-content: center;
    align-items: stretch;
}

.access__block:last-child {
    margin-bottom: 0;
}

.access__info {
    flex: 1;
    max-width: 300px;
    --space-min: 0;
    --space-max: 78;
    margin-top: var(--space);
}

.access h3 {
    --font-min: 20;
    --font-max: 24;
    font-size: var(--font-size);
    font-weight: var(--wght-bold);
    line-height: 1.1;
    margin-bottom: 0.5em;
    display: flex;
    align-items: flex-end;
}

/* 疑似要素でピンのアイコンを追加 */
.access h3::before {
    content: "";
    background: url("../../img/common/icon_pin.svg") no-repeat center/contain;
    display: inline-block;
    width: 1em;
    height: auto;
    aspect-ratio: 24/33;
    margin-right: 0.25em;
    vertical-align: middle;
}

.access__info address {
    --font-min: 20;
    --font-max: 24;
    font-size: var(--font-size);
}

.access__link {
    display: flex;
    align-items: center;
    gap: 0.5em;
    /* border-bottom: 1px solid currentColor; */ /* 削除 */
    margin-top: 0.5em;
    margin-bottom: 1em;
    padding-bottom: 0.1em;
    --font-min: 16;
    --font-max: 24;
    font-size: var(--font-size);
    position: relative; /* 追加 */
}

/* 疑似要素でボーダーを作成 */
.access__link::after {
    content: "";
    position: absolute;
    bottom: -0.2em;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform-origin: right; /* 右を起点にする */
    transition: transform 0.3s ease; /* アニメーション */
}

/* HOVER */
@media (hover: hover) and (pointer: fine) {
    .access__link:hover::after {
        transform: scaleX(0); /* 右から左に消える */
    }
}

.access__tel {
    --font-min: 18;
    --font-max: 30;
    font-size: var(--font-size);
    font-family: var(--fontFamily-en);
    font-weight: var(--wght-bold);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.1em;
    border: 1px solid currentColor;
    border-radius: 0.3em;
    padding: 0.2em 0.6em;
}

.access__tel::before {
    content: "";
    background: url("../../img/common/icon_phone.svg") no-repeat center/contain;
    display: inline-block;
    width: 1em;
    height: 1em;
}

.access__map {
    flex: 1;
    width: 100%;

    iframe {
        aspect-ratio: 885 / 590;
        width: 100%;
        height: 100%;
    }
}

.access .circle-arrow {
    width: 1.3em;
    height: 1.3em;
    border: 1px solid var(--color-base);
}

@media (width < 800px) {
    .access {
        margin-top: 0.7em;
    }

    .access__inner {
        flex-direction: column;
    }

    .access h2{
        /* SP調整 */
        --space-min:14;
    }

    .access h2,
    .access__info {
        margin-inline: 11px;
        font-weight: var(--wght-bold);
    }

    .access__block {
        flex-direction: column;
        margin-bottom: 0;
    }

    .access__info {
        margin-top: 0;
    }

    /* 〇〇店の前の疑似要素でピンのアイコン */
    .access h3::before {
        width: auto;
        height: 1em;
        aspect-ratio: 24/33;
        margin-right: 0.25em;
        vertical-align: middle;
    }

    .access__link {
        margin-bottom: 1.7em;
        width: fit-content;
    }

    /* オレンジの線ボタン型に変更 */
    .access__tel {
        --font-min: 24;
        --font-max: 30;
        font-size: var(--font-size);
        color: var(--color-main);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.1em;
        border: 1px solid currentColor;
        padding: 0.3em 1em;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
        border-radius: 999px;
        width: fit-content;
    }

    .access__tel::before {
        background: url("../../img/common/icon_phone-orange.svg") no-repeat center/contain;
        width: 0.8em;
        height: 0.8em;
    }

}