@charset "UTF-8";

/*********************************************************************
*  Main css
*********************************************************************/
#wrap { overflow: hidden }

/*********************************************************************
*  Common Parts
*********************************************************************/
/**
 * Blocks
 */
.block { display: block }
.inline_block { display: inline-block }

/**
 * Fonts
 */
.black { color: var(--black) }
.white { color: var(--white) }

/**
 * The presence or absence of display is determined.
 */

/* Aspect ratio */
@media screen and (orientation: landscape) {
    .portrait { display: none !important }
}
@media screen and (orientation: portrait) {
    .landscape { display: none !important }
}

/* iPad */
@media screen and (min-width: 768px) {
    .less768 { display: none !important }
}
@media screen and (max-width: 767px) {
    .over768 { display: none !important }
}

/* iPad Pro */
@media screen and (min-width: 1024px) {
    .less1024 { display: none !important }
}
@media screen and (max-width: 1023px) {
    .over1024 { display: none !important }
}

/* laptop */
@media screen and (min-width: 1280px) {
    .less1280 { display: none !important }
}
@media screen and (max-width: 1279px) {
    .over1280 { display: none !important }
}


/*********************************************************************
*  flex box
*********************************************************************/
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

/**
 * justify-content
 */
.f_between {
    -webkit-box-pack:justify;
    -webkit-flex-pack:justify;
    -webkit-justify-content:space-between;
    justify-content:space-between;
}
.f_around {
    -webkit-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
.f_start {
    -webkit-box-pack:start;
    -webkit-flex-pack:start;
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
}
.f_end {
    -webkit-box-pack:end;
    -webkit-flex-pack:end;
    -webkit-justify-content:flex-end;
    justify-content:flex-end;
}
.f_center {
    -webkit-box-pack:center;
    -webkit-flex-pack:center;
    -webkit-justify-content:center;
    justify-content:center;
}

/**
 * align-items
 */
.f_items_start {
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.f_items_end {
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.f_items_center {
    -webkit-box-align: center;
    align-items: center;
}
.f_items_baseline {
    -webkit-align-items: baseline;
    align-items: baseline;
}
.f_items_stretch {
    -webkit-align-items: stretch;
    align-items: stretch;
}

/**
 * flex-wrap
 */
.f_wrap {
    -webkit-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
}

/**
 * flex-direction
 */
.f_reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
}
.f_column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}
.f_column_reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    flex-direction: column-reverse;
}

/**
 * flex-grow
 */
.f_grow {
    -webkit-box-flex:1;
    flex-grow:1;
}


/*********************************************************************
*  header
*********************************************************************/
.header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: min(30px, 1.5625vw) min(30px, 1.5625vw) 0;
    z-index: 9999;
    transition: opacity .3s ease-in-out;
}
.logo {
    width: min(120px, 6.25vw);
}
.header__nav {
    padding-top: min(9px, 0.46875vw);
    padding-right: min(120px, 6.25vw);
}
.header__nav__item:not(:last-child) { margin-right: min(70px, 3.65vw) }
.header__nav__button {
    color: var(--brown);
    font-family: 'Libre Baskerville', serif;
    font-size: 16px;
    line-height: 1;
}
@media screen and (orientation: portrait) {
    .header {
        height: min(calc(300px / 3), calc(100vw * (300 / 1125)));
        padding: 0;
        background-color: rgba(255, 255, 255, 0.5);
    }
    .logo {
        position: absolute;
        top: min(calc(50px / 3), calc(100vw * (50 / 1125)));
        left: 50%;
        transform: translateX(-50%);
        width: min(calc(200px / 3), calc(100vw * (200 / 1125)));
        z-index: 10;
        transition: filter .15s .3s ease-out;
    }
    .header__inner.active .logo { filter: brightness(0) invert(1) }
    .sp-nav__button {
        position: absolute;
        top: min(calc(50px / 3), calc(100vw * (50 / 1125)));
        right: min(calc(50px / 3), calc(100vw * (50 / 1125)));
        width: 36px;
        height: min(calc(200px / 3), calc(100vw * (200 / 1125)));
        z-index: 10;
    }
    .sp-nav__button span {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: block;
        width: 100%;
        height: calc(10px / 3);
        background-color: var(--brown);
        transition: all .3s ease-out;
    }
    .sp-nav__button span:nth-child(1) { top: min(calc(50px / 3), calc(100vw * (50 / 1125))) }
    .sp-nav__button span:nth-child(2) { top: calc(((10px / 3) + 5px) + min(calc(50px / 3), calc(100vw * (50 / 1125)))) }
    .sp-nav__button span:nth-child(3) { top: calc(((20px / 3) + 10px) + min(calc(50px / 3), calc(100vw * (50 / 1125)))) }
    .header__inner.active .sp-nav__button span:nth-child(1) {
        top: calc(5px + min(calc(50px / 3), calc(100vw * (50 / 1125))));
        transform: translateX(-50%) rotate(45deg);
        background-color: var(--white);
    }
    .header__inner.active .sp-nav__button span:nth-child(2) { opacity: 0 }
    .header__inner.active .sp-nav__button span:nth-child(3) {
        top: calc(5px + min(calc(50px / 3), calc(100vw * (50 / 1125))));
        transform: translateX(-50%) rotate(-45deg);
        background-color: var(--white);
    }
    .sp-nav__button p {
        position: absolute;
        top: calc(((30px / 3) + 14px) + min(calc(50px / 3), calc(100vw * (50 / 1125))));
        left: 50%;
        transform: translateX(-50%);
        color: var(--brown);
        font-family: 'Libre Baskerville', serif;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        transition: color .3s ease-out;
    }
    .header__inner.active .sp-nav__button p { color: var(--white) }
    .sp-nav__button p::before { content: "MENU" }
    .header__inner.active .sp-nav__button p::before { content: "CLOSE" }
    .header__nav {
        position: absolute;
        top: 0;
        right: 0;
        transform: translateX(100%);
        width: calc(50% + (100px / 3) + (37px / 3));
        padding: 0;
        background-color: rgba(147, 112, 46, .8);
        transition: transform .3s ease-out;
    }
    .header__inner.active .header__nav { transform: translateX(0) }
    .header__nav__list {
        display: block;
        padding-top: min(calc(320px / 3), calc(100vw * (320 / 1125)));
        padding-right: min(calc(37px / 3), calc(100vw * (37 / 1125)));
        padding-left: min(calc(37px / 3), calc(100vw * (37 / 1125)));
        padding-bottom: min(calc(70px / 3), calc(100vw * (70 / 1125)));
    }
    .header__nav__item:not(:last-child) { margin-right: 0 }
    .header__nav__button {
        padding-top: .5em;
        padding-bottom: .5em;
        color: var(--white);
    }
}


/*********************************************************************
*  footer
*********************************************************************/
.footer { opacity: 0 }
.box.disp.footer { animation: slideIn .8s ease-out both }
.footer__inner { padding: 50px 20px calc(109px / 3) }
.footer__logo {
    width: calc(200px / 3);
    margin-right: auto;
    margin-left: auto;
    margin-bottom: calc(70px / 3);
}
.footer__logo img { width: 100% }
.footer__nav__button {
    color: var(--brown);
    font-size: 1.2rem;
    line-height: 1;
}
.copyright {
    display: block;
    background-color: var(--brown);
    color: var(--white);
    font-size: 1rem;
    line-height: 2;
    text-align: center;
}




/*********************************************************************
*  Content
*********************************************************************/
/**
 * Base
 */
.content {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 2s ease-out;
}
.content.active { opacity: 1 }
.box {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    transition: top .65s .15s ease-out;
    overflow: hidden;
}
#top.box { top: 0 !important }
#concept.box { z-index: 10 }
#service.box { z-index: 20 }
#company.box { z-index: 30 }
#contact.box { z-index: 40 }
.box.target { top: 0 }
.main {
    position: relative;
    width: 100%;
    height: 100%;
}
@media screen and (orientation: portrait) {
    .content { position: static }
    .box { position: relative }
}

h2 {
    position: relative;
    padding: min(90px, 4.6875%) min(170px, calc(100vw * (170 / 1920))) min(17px, 0.885%);
    font-size: min(65px, calc(100vw * (65 / 1920)));
    line-height: 1;
    opacity: 0;
    z-index: 10;
}
.box.disp h2 { animation: fadeIn 1s 1s ease-out both }
@media screen and (orientation: portrait) {
    h2 {
        padding: 0;
        font-size: calc(80px / 3);
        text-align: center;
    }
}

.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.box.disp .page { animation: fadeIn 1s 1s ease-out both }
@media screen and (orientation: portrait) {
    .page { position: static }
}

.description {
    padding-right: min(170px, calc(100vw * (170 / 1920)));
    padding-left: min(170px, calc(100vw * (170 / 1920)));
    font-size: min(1.6rem, 0.84vw);
    line-height: 1.875;
    white-space: nowrap;
    opacity: 0;
}
.box.disp .description { animation: fadeIn 1s 1.4s ease-out both }
@media screen and (orientation: portrait) {
    .description {
        padding-right: 20px;
        padding-left: 20px;
        margin-bottom: 64px;
        font-size: 1rem;
        text-align: center;
        line-height: 1;
    }
}


/**
 * Top
 */
#top { background: url(../images/top-bg.png) no-repeat center center / cover }
.top__image {
    position: relative;
    display: none;
    width: min(1500px, calc(100vw * (1500 / 1920)));
    height: 100%;
    padding-top: min(50px, calc((100vh * (30 / 1080)) + 20px));
    padding-bottom: min(140px, calc(100vh * (140 / 1080)));
    margin-right: auto;
    margin-left: auto;
}
.box.action .top__image {
    display: block;
    animation: fadeIn 1.8s 1s ease-out both;
}
.top__image__inner {
    position: relative;
    width: 100%;
    height: 100%;
}
.top__image__left,
.top__image__right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    height: 100%;
    background-image: url(../images/top.jpg);
    background-repeat: no-repeat;
    background-size: 200% auto;
}
.top__image__left {
    left: 0;
    background-position: center left;
}
.box.action .top__image__left { animation: topLeft 0.6s 3s ease-out both }
.top__image__right {
    right: 0;
    background-position: center right;
}
.box.action .top__image__right { animation: topRight 0.6s 3s ease-out both }
.top__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    width: min(674px, calc(100vw * (674 / 1920)));
}
.box.action .top__logo {
    display: block;
    animation: fadeIn 1s 4s ease-out both;
}
.box.action .top__logo img { width: 100% }
@media screen and (orientation: portrait) {
    #top {
        height: 100vh;
        background-size: auto calc(100vw * (1213 / 1125));
    }
    .top__image {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        height: min(calc(752px / 3), calc(100vw * (752 / 1125)));
        padding-top: 0;
        padding-bottom: 0;
    }
    .top__logo { width: min(calc(754px / 3), calc(100vw * (754 / 1125))) }
}
@keyframes topLeft {
    0% { margin-top: 0px }
    100% { margin-top: -20px }
}
@keyframes topRight {
    0% { margin-top: 0px }
    100% { margin-top: 20px }
}

.scroll__down {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.scroll__down__button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: min(60px, calc(100vh * (60 / 1080)));
    color: var(--brown);
    font-size: min(2.4rem, 1.25vw);
    line-height: 1;
    white-space: nowrap;
    z-index: 10;
}
.scroll__down__button::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: min(45px, calc(100vh * (45 / 1080)));
    background-color: var(--brown);
}
.scroll__down__button p {
    font-family: 'Libre Baskerville', serif;
    color: var(--brown) !important;
}
@media screen and (orientation: portrait) {
    .scroll__down {
        height: 100px;
        margin-top: 0;
    }
    .scroll__down__button {
        display: flex;
        justify-content: center;
        width: 100%;
        padding-bottom: min(calc(320px / 3), calc(100vh * (320 / 1125)));
        color: var(--brown);
        font-size: 1rem;
    }
    .scroll__down__button::before { height: min(calc(100px / 3), calc(100vh * (100 / 1125))) }
    .scroll__down__button p {
        position: absolute;
        bottom: min(calc(200px / 3), calc(100vh * (200 / 1125)));
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
}

/**
 * Concept
 */
.concept-content {
    position: relative;
    width: min(990px, 51.5625vw);
    height: 100%;
    margin-top: min(77px, 4.1%);
    margin-right: auto;
    margin-left: auto;
    background: url(../images/concept.jpg) no-repeat top center / contain;
}
.concept-text {
    position: absolute;
    top: calc(100% * (120 / 853));
    left: 50%;
    transform: translateX(-50%);
    font-size: min(2.2rem, calc(100vw * (22 / 1920)));
    font-weight: 700;
    line-height: 1.75;
    text-align: center;
    white-space: nowrap;
    filter: drop-shadow(0 0 5px #fff);
}
.concept-text span { opacity: 0 }
.concept-text span:not(.screen) {
    position: relative;
    z-index: 10;
}
.concept-text span.screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
    text-shadow: 0 0 8px var(--white);
    mix-blend-mode: screen;
}
.box.disp .concept-text span { animation: fadeIn 2s 1s ease-out both }
@media screen and (orientation: portrait) {
    #concept { padding-top: 48px }
    #concept h2 { margin-bottom: calc(185px / 3) }
    .concept-content {
        width: 100%;
        height: 90.4vw;
        margin-top: 0;
        background-image: url(../images/concept_sp.jpg);
    }
    .concept-content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, .6);
    }
    .concept-text {
        top: 0;
        width: 100%;
        padding-right: 11px;
        padding-left: 11px;
        margin-top: 2em;
        font-size: 1.2rem;
        line-height: calc(70 / 36);
        transform: translateX(-50%);
        transform-origin: top center;
        text-align: left;
        white-space: normal;
        filter: none;
    }
    .concept-text span.screen { display: none }
}


/**
 * Service
 */
#service h2 { margin-left: -.05em }
.service__container {
    position: absolute;
    top: min(30px, 1.5625vw);
    right: min(102px, 5.3125vw);
    width: min(1092px, calc(100vw * (1092 / 1920)));
    background: url(../images/service_bg.jpg) no-repeat top center / contain;
}
.box.disp .service__container { animation: fadeIn 2s 1s ease-out both }
.service__inner { padding-bottom: calc(100% * (840 / 1092)) }
.service__item {
    position: absolute;
    width: min(320px, calc(100vw * (320 / 1920)));
    height: min(300px, calc(100vw * (300 / 1920)));
    border: clamp(1px, calc(100vw * (2 / 1920)), 2px) solid var(--brown);
    opacity: 0;
}
.service__item:nth-child(1) {
    top: min(164px, calc(100vw * (164 / 1920)));
    left: min(204px, calc(100vw * (204 / 1920)));
}
.box.disp .service__item:nth-child(1) { animation: slideIn 1s 1.6s ease-out both }
.service__item:nth-child(2) {
    top: min(492px, calc(100vw * (492 / 1920)));
    left: min(513px, calc(100vw * (513 / 1920)));
}
.box.disp .service__item:nth-child(2) { animation: slideIn 1s 1.8s ease-out both }
.service__item:nth-child(3) {
    top: min(77px, calc(100vw * (77 / 1920)));
    left: min(701px, calc(100vw * (701 / 1920)));
}
.box.disp .service__item:nth-child(3) { animation: slideIn 1s 2.0s ease-out both }
.service__screen {
    display: block;
    filter: drop-shadow(0 0 min(4px, calc(100vw * (4 / 1920))) var(--white));
    mix-blend-mode: screen;
}
.service__screen img { filter: drop-shadow(0 0 min(4px, calc(100vw * (4 / 1920))) var(--white)) }
.service__item__body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.service__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (orientation: portrait) {
    #service {
        padding-top: 48px;
        padding-bottom: calc(148px / 3);
    }
    #service h2 { margin-bottom: calc(16px / 3) }
    #service .description {
        margin-bottom: 33px;
        text-align: left;
    }
    .service__container {
        position: relative;
        top: unset;
        right: unset;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        background-image: url(../images/service_bg_sp.jpg);
    }
    .service__inner { padding-bottom: calc(100% * (2767 / 1125)) }
    .service__item {
        width: calc(100vw * (615 / 1125));
        height: calc(100vw * (576 / 1125));
    }
    .service__item:nth-child(1) {
        top: 0;
        left: calc(100vw * (433 / 1125));
    }
    .service__item:nth-child(2) {
        top: 100vw;
        left: calc(100vw * (58 / 1125));
    }
    .service__item:nth-child(3) {
        top: calc(100vw * (1986 / 1125));
        left: calc(100vw * (374 / 1125));
    }
}


/**
 * Company
 */
#company { background: url(../images/company.jpg) no-repeat top center / cover }
#company h2 { margin-left: -.1em }
@media screen and (orientation: portrait) {
    #company { padding: calc(90px / 3) 20px calc(226px / 3) }
    #company h2 { margin-bottom: 110px }
}

.about {
    width: min(700px, calc(100vw * (700 / 1920)));
    margin-top: min(71px, calc(100vh * (71 / 1080)));
    margin-left: min(170px, calc(100vw * (170 / 1920)));
    opacity: 0;
    overflow: hidden;
}
.box.disp .about { animation: fadeIn .8s 1.4s ease-out both }
.about__inner {
    position: relative;
    width: 100%;
    padding-top: calc(min(45px, calc(100vh * (45 / 1080))) + min(5px, calc(100vw * (5 / 1920))));
    padding-right: calc(min(50px, calc(100vw * (50 / 1920))) + min(5px, calc(100vw * (5 / 1920))));
    padding-left: calc(min(100px, calc(100vw * (100 / 1920))) + min(5px, calc(100vw * (5 / 1920))));
    padding-bottom: calc(min(40px, calc(100vh * (40 / 1080))) + min(5px, calc(100vw * (5 / 1920))));
    transition: background-color 2s 2s ease-out;
}
.about__inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: min(5px, calc(100vw * (5 / 1920))) solid var(--brown);
}
.box.disp .about__inner { background-color: rgba(255, 255, 255, .3) }
.about__bg {
    position: absolute;
    top:
        calc(
            -1 *
            (
                min(30px, 1.5625vw) +
                min(120px, 6.25vw) +
                min(90px, calc(100vw * (90 / 1920))) +
                min(65px, calc(100vw * (65 / 1920))) +
                min(17px, calc(100vw * (17 / 1920))) +
                min(71px, calc(100vh * (71 / 1080)))
            )
        );
    left: calc(-1 * (min(170px, calc(100vw * (170 / 1920)))));
    width: 100vw;
    height: 100vh;
    background: url(../images/company.jpg) no-repeat top center / cover;
    filter: blur(10px);
    z-index: -1;
    opacity: 0;
}
.box.disp .about__bg { animation: fadeIn 1.8s 2.6s ease-out both }
.about__content {
    color: var(--brown);
    font-size: min(2.4rem, 1.25vw);
    font-weight: 700;
    line-height: 1.75;
}
.about__title { width: min(200px, 37%) }
@media screen and (orientation: portrait) {
    .about {
        width: 100%;
        margin-top: 0;
        margin-left: 0;
    }
    .about__inner {
        padding-top: 34px;
        padding-right: calc(35px / 3);
        padding-left: calc(35px / 3);
        padding-bottom: 34px;
    }
    .about__inner::before { border-width: calc(5px / 3) }
    .about__bg {
        top: calc(-1 * (500px / 3));
        left: -20px;
        height: calc((396px / 3) + 360px);
    }
    .about__content {
        justify-content: center;
        font-size: calc(46px / 3);
    }
    .about__title { width: 100px }
    .about__text { width: 9em }
}

/**
 * Contact
 */
#contact h2 { margin-left: -.1em }
 #contact .description { margin-bottom: min(60px, calc(100vw * (60 / 1920))) }

.form {
    width: min(400px, calc(100vw * (400 / 1920)));
    margin-top: min(67px, 3.5%);
    margin-left: min(170px, calc(100vw * (170 / 1920)));
}
.form.disabled {
    opacity: .9;
    pointer-events: none;
}
#form {
    display: block;
    width: min(325px, 100%);
}
.input__box {
    width: 100%;
    margin-bottom: min(20px, calc(100vh * (20 / 1080)));
    opacity: 0;
}
.box.disp .input__box { animation: fadeIn .7s 1.6s ease-in-out both }
@media screen and (orientation: portrait) {
    #contact { padding-top: 48px }
    #contact h2 { margin-bottom: calc(17px / 3) }
    #contact .description { margin-bottom: calc(95px / 3); }
    .form {
        width: 100%;
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 24px;
        margin-left: 0;
    }
    #form { width: 100% }
    .input__box {
        width: 100%;
        margin-bottom: 20px;
    }
}

.contact__bg {
    position: absolute;
    top: min(100px, 5.3vw);
    right: 0;
    width: min(1004px, 52.3%);
}
.box.disp .contact__bg { animation: fadeIn 2s 1.6s ease-out both }
.contact__bg__inner {
    position: relative;
    padding-bottom: min(670px, 67%);
    background: url(../images/contact.jpg) no-repeat top center / cover;
}
.contact__list {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.contact__item { width: min(194px, 19.2%) }
.box.disp .contact__item { animation: slideIn .5s ease-in-out both }
.box.disp .contact__item:nth-child(1) { animation-delay: 2.4s }
.box.disp .contact__item:nth-child(2) { animation-delay: 2.5s }
.box.disp .contact__item:nth-child(3) { animation-delay: 2.6s }
.box.disp .contact__item:nth-child(4) { animation-delay: 2.7s }
.box.disp .contact__item:nth-child(5) { animation-delay: 2.8s }
.contact__item__image {
    width: 100%;
    filter: brightness(0) invert(1);
}
@media screen and (orientation: portrait) {
    .contact__bg {
        position: relative;
        top: 0;
        width: 100%;
        height: calc(100vw * 2 / 3);
    }
    .contact__bg__inner {
        height: 100%;
        padding-bottom: 0;
    }
    .contact__item { width: auto }
    .contact__item:nth-child(1) { height: calc(100% * (177 / 750)) }
    .contact__item:nth-child(2) { height: calc(100% * (60 / 750)) }
    .contact__item:nth-child(3) { height: calc(100% * (185 / 750)) }
    .contact__item:nth-child(4) { height: calc(100% * (82 / 750)) }
    .contact__item:nth-child(5) { height: calc(100% * (170 / 750)) }
    .contact__item__image {
        width: auto;
        height: 100%;
    }
}

/**
 * Animation
 */
@keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}
@keyframes slideIn {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes zoom {
    0% { transform: translateX(-50%) scale(.95) }
    100% { transform: translateX(-50%) scale(1) }
}