@charset "utf-8";
/* CSS Document */

/*---------------
access.htmlの設定
----------------*/
#access .top_img {
    position: relative;
    background-image: url(../images/access-top.jpg);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 300px;
    margin-bottom: 150px;
    & h1 {
        font-size: 4.8rem;
        color: #fff;
        -webkit-text-stroke: 1px #888;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
} /* .hero_img */

.address-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    & img {
        width: 400px;
        height: 300px;
    }
    & div {
        width: 50%;
        max-width: 550px;
        text-align: left;
        & h2 {
            font-size: 2.4rem;
            margin-bottom: 50px;
        }
        & p {
            margin-bottom: 1rem;
        }
        .a_title {
            font-size: 1.6rem;
            font-weight: 700;
        }
        & address {
            font-style: normal;
            position: relative;
        }
        & address::before {
            content: "";
            display: inline-block;
            width: 100%;
            height: 3px;
            background: #000;
            position: absolute;
            top: -25%;
            opacity: 0;
        }
        & address.on::before {
            opacity: 1;
            animation: extendCenter 2s ease forwards;
        }
    } /* div */
    & div:first-child {
        text-align: center;
    }
    & div:last-child {
        position: relative;
    }
    & div:last-child::before {
        content: "";
        width: 220px;
        height: 220px;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.3);
        top: 25%;
        left: 15%;
        animation: rotation 18s linear infinite;
    }
    & div:last-child::after {
        content: "";
        width: 220px;
        height: 220px;
        position: absolute;
        border: 10px solid rgba(0, 0, 0, 0.3);
        top: -25%;
        left: -15%;
        animation: rotation 18s linear infinite reverse;
    }
}
iframe {
    width: 100%;
}

@keyframes extendCenter {
    from {
        transform-origin: center;
        transform: scale(0, 1);
    }
    to {
        transform: scale(1, 1);
    }
}

/*------------------
スマートフォンの設定//
------------------*/
@media (max-width:768px) {
    #access .top_img {
        position: relative;
        background-image: url(../images/access-top.jpg);
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 300px;
        margin: 80px 0 50px;
    } /* .hero_img */

    .address-container {
        display: block;
        & img {
            width: 100%;
            height: auto;
        }
        & div {
            width: 90%;
            margin: auto;
        } /* div */
        & div:first-child {
            text-align: center;
        }
        & div:last-child::before {
            width: 25%;
            height: 25%;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            left: 70%;
            top: 80%;
        }
        & div:last-child::after {
            width: 75px;
            height: 75px;
            left: 60%;
            top: 30%;
        }
    }
}
/*----- access.htmlの設定 ここまで -----*/