@charset "utf-8";
/*
Theme Name: 
Author: yuta.s
Author URI: https://addone-works.com
Description:のテーマ
version: 1.0.0
*/

/*common
-----------------------------------------------------------------------------------------*/

/*header
-----------------------------------------------------------------------------------------*/
header {
    height: 100vh;
    width: 100%;
}

.top_bg {
    height: 100vh;
    width: 100%;
    background-image: url(./images/top.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: fixed;
    z-index: -1;
    animation: zoomFadeIn 5s forwards;
}

@keyframes zoomFadeIn {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: scale(1.04);
    }
}

.top_filter {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.header_top {
    position: fixed;
    top: 0;
    height: 90px;
    width: 100%;
    z-index: 99999;
    transition: 1s;
}

.header_logo {
    height: 100%;
    padding: 5px 0;
    float: left;
    box-sizing: border-box;
    margin-left: 10px;
}

.header_menu {
    float: right;
    line-height: 90px;
    margin-right: 15px;
}

.header_menu li {
    display: inline-block;
}

.header_menu li a {
    border-right: 1px solid rgb(255, 255, 255);
    font-size: 155%;
    padding: 0 20px;
}

.header_top a:hover {
    opacity: unset;
}

.header_menu li a span:hover {
    border-bottom: 4px solid rgb(255, 255, 255);
}

.header_menu li:last-child a {
    border-right: unset;
}

h1 {
    position: absolute;
    bottom: 0;
    left: 0;
    color: rgb(248, 248, 248);
    font-size: 1300%;
    line-height: 0.74;
    padding: 0;
    margin: 0;
    letter-spacing: 0.3rem;
    white-space: nowrap;
}

h1 span {
    display: block;
    padding-bottom: 45px;
}

h2 {
    position: absolute;
    bottom: 25%;
    left: 55%;
    color: rgb(208, 208, 208);
    font-size: 220%;
    writing-mode: vertical-rl;
}

h1,
h2 {
    font-weight: 900;
}

.top_iconbox {
    padding: 30px 20px;
    position: fixed;
    right: 2%;
    bottom: 40%;
    z-index: 99999;
}

.top_iconbox i {
    display: block;
    font-size: 220%;
    color: rgb(51, 51, 51);
}

.fa-envelope {
    margin-top: 30px;
}

.intro_top {
    font-weight: 200;
    font-size: 300%;
    padding-top: 15%;
}

.intro_bottom {
    margin-top: 5%;
    width: 35%;
    z-index: 3;
    position: relative;
}

.intro_bottom p {
    margin-top: 10px;
}

.intro_container {
    height: 100vh;
    background-image: url(./images/top_about.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.message_img_left {
    position: absolute;
    bottom: 3%;
    right: 38%;
    z-index: 2;
}
.masked-by-png{
    z-index: 1;
}
.header_top.invert {
    background-color: rgba(51, 51, 51, 0.6);
    transition: 1s;
}


/*footer
-----------------------------------------------------------------------------------------*/
.footer_contents_title span {
    padding-right: 5px;
}

.footer_contents {
    margin-top: 15px;
}

.footer_content {
    display: flex;
    align-items: center;
}

.footer_left,
.footer_right {
    width: 50%;
    padding: 5% 0;
}

.logo_box img,
.logo_box div {
    vertical-align: middle;
    display: inline-block;
}

.logo_box img{
    width: 18%;
}

.logo_box {
    display: inline-block;
    font-size: 130%;
    font-weight: 900;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.footer_contents_wrapper {
    display: inline-block;
}

.footer_centerline {
    width: 1px;
    background-color: rgb(192, 192, 192);
    height: 10vh;
}

.copyright {
    padding: 15px 0;
    background: linear-gradient(to right, rgb(247, 247, 247), rgb(192, 192, 192));
}

.sp-navigation {
    display: none;
}


@media screen and (max-width:1780px) {
    h1 {
        font-size: 1100%;
    }
}

@media screen and (max-width:1500px) {
    h1 {
        font-size: 900%;
    }
}

@media screen and (max-width:1365px) {
    .intro_bottom {
        margin-top: 5%;
        width: 45%;
    }
}

@media screen and (max-width:1245px) {
    h1 {
        font-size: 700%;
    }
}

@media screen and (max-width:1023px) {
    .intro_container {
        background-image: url(./images/top_about_sp.svg);
    }

    .message_img_left {
        position: absolute;
        bottom: 12%;
        right: unset;
        left: 9%;
        width: 28%;
    }
}

@media screen and (max-width:767px) {

    /*header
-----------------------------------------------------------------------------------------*/
    .header_menu {
        display: none;
    }

    h1 {
        font-size: 300%;
        letter-spacing: 0.1rem;
        bottom: 12%;
    }

    h1 span {
        padding-bottom: 20px;
    }

    h2 {
        bottom: 35%;
        font-size: 180%;
    }

    .header_top {
        height: 80px;
    }

    .header_logo {
        height: 100%;
        margin-left: 5px;
    }

    .top_iconbox {
        padding: 20px 10px;
        right: 2%;
        bottom: 30%;
    }

    .intro_top {
        font-size: 250%;
        padding-top: 15%;
    }

    .intro_bottom {
        margin-top: 15%;
        width: 75%;
    }

    /*footer
-----------------------------------------------------------------------------------------*/
    .footer_left .logo_box {
        position: static;
        top: unset;
        left: unset;
        transform: unset;
        padding: 50px 0;
    }

    .footer_content {
        display: block;
    }

    .footer_left,
    .footer_right {
        width: 80%;
        margin: 0 auto;
        padding: 5% 0;
    }

    .footer_centerline {
        width: 80%;
        margin: 0 auto;
        background-color: rgb(192, 192, 192);
        height: 1px;
    }

    .footer_contents:last-child {
        padding: 5% 0;
    }

    .sp-navigation {
        display: block;
        z-index: 9999999;
        position: fixed;
    }

    .drawer-menu {
        padding-top: 30px;
    }

    .drawer-menu-item {
        margin-top: 20px;
        font-size: 120%;
    }

    button.drawer-hamburger {
        top: 1% !important;
        right: 1% !important;
    }

    .drawer-hamburger-icon,
    .drawer-hamburger-icon:after,
    .drawer-hamburger-icon:before {
        background-color: rgb(255, 255, 255) !important;
    }

    nav.drawer-nav {
        background-color: rgb(248, 248, 248);
        padding-top: 20px;
    }
}