@charset "utf-8";

/* ==============================
Article header
============================== */
.vid_contents {
    display: none;
}

.article__header {
    margin: 35px auto 20px;
}

.post {
    width: 100%;
    padding-top: 45px;
    border-radius: 35px;
    background: #A18A7E;
}

.post__gate {
    display: block;
    width: 72%;
    min-height: 40px;
    margin: 0 auto;
}

.post__picture {
    color: #FFF;
    text-align: center;
    font-size: 6rem;
    font-weight: 900;
    margin-top: 10px;
}

/* Post Card */
.post__card {
    width: 100%;
    height: auto;
    background: #FFF;
    padding: 20px 0;
    position: relative;
}

.post__card::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--primary-black, #696969);
    position: absolute;
    top: 0;
}

.post__card::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--primary-black, #696969);
    position: absolute;
    bottom: 0;
}

.post__card img {
    width: 100%;
    height: auto;
}

/* Form */
.Form {
    margin: 41px auto 0;
    width: 89.3%;
}

.form__title{
    text-align: center;
    font-size: 2.3rem;
    font-weight: 700;
}

.btn--form {
    font-size: 1.4rem;
    display: block;
    margin: 30px auto;
}

.form__txt {
    font-size: 1.3rem;
    text-align: center;
    margin-top: 15px;
}

/* Access */
.access {
    margin: 39px 8% 0;
}

.access__topic {
    font-size: 2.3rem;
    font-weight: 700;
}

.access__address {
    margin-top: 15px;
    font-size: 1.6rem;
    font-weight: 700;
}

.access__address::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--primary-black, #696969);
    margin: 3px auto;
}

.access__list {
    margin: 15px 8% 0;
}

.access__item {
    font-size: 1.5rem;
    font-weight: 700;
}

.access__item:nth-child(2) {
    margin-top: 15px;
}

.map {
    width: 84%;
    height: auto;
    margin: 15px auto;
}

.contact__tel {
    margin: 0 auto;
    text-align: center;
}

.contact__title {
    font-size: 2.3rem;
    font-weight: 700;
    margin-top: 20px;
}

.contact__number {
    color: var(--primary-darkBrown, #805E4D);
    font-size: 2.8rem;
    font-weight: 700;
}

/* First view */
@media screen and (min-width: 1120px) {
    .container {
        display: grid;
        grid-template-columns: 46.1% 375px 27.7%;
        grid-template-rows: 100vh;
    }
    
    .vid_contents {
        grid-column: 1/2;
        grid-row: 1/2;
        height:100%;
        position: relative;
        display: block;
    }

    .video__pc {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .main {
        grid-column: 2/3;
        grid-row: 1/2;
        display: flex;
        height: 100vh;
        overflow-y: auto;
        flex-direction: column;
    }

    .header {
        grid-column: 3/4;
        grid-row: 1/2;
        height: 100%;
    }
}

/* ======================================
Loding
====================================== */
.loading-5 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #FEFBF2;
}

.loading-5 span {
    display: inline-block;
    color: #89604c;
    font-weight: 600;
    font-size: 4rem;
    animation: animation-loading-5 1s infinite;
}

.loading-5 span:nth-of-type(2) {
    animation-delay: .1s;
}

.loading-5 span:nth-of-type(3) {
    animation-delay: .2s;
}

.loading-5 span:nth-of-type(4) {
    animation-delay: .3s;
}

.loading-5 span:nth-of-type(5) {
    animation-delay: .4s;
}

.loading-5 span:nth-of-type(6) {
    animation-delay: .5s;
}

.loading-5 span:nth-of-type(7) {
    animation-delay: .6s;
}

.loading-5 span:nth-of-type(8) {
    animation-delay: .7s;
}

.loading-5 span:nth-of-type(9) {
    animation-delay: .8s;
}

.loading-5 span:nth-of-type(10) {
    animation-delay: .9s;
}

/* animation */
@keyframes animation-loading-5 {
    50% {
        transform: translateY(10px);
    }
}

/* end of loding */
.loaded {
    display: none;
}

/* fade in container */
.container {
    display: none;
}

.container.open {
    display: block;
}

@media screen and (min-width: 1120px) {
    .container.open {
        display: grid;
    }
}

/* ======================================
 fadeIn
====================================== */
.fadeIn {
    transform: translate(0, 50px);
    opacity: 0;
    transition: 0.8s;
}

.fadeIn.animated {
    transform: translate(0, 0);
    opacity: 1;
}