@charset "UTF-8";

section {
    width: 100%;
    margin: 0 auto 10vh auto;
}

.bg_bk {
    background-color: #000000;
}

#top_cover {
    background-image: url("../img/pc_top00.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100vh;
}

#top_cover img {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#top_cover img.top_img {
    top: 1%;
}

#top_cover img.bottom_img {
    bottom: 1%;
}

.half_box {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    position: relative;
}

.half_box img {
    width: 100%;
}

.factory_box {
    display: flex;
}

.half_box img.factory {
    width: auto;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}


h1, h2, h3, h4 {
    color: #ffffff;
    font-family: "Noto Serif JP", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: 600;
    font-size: 120%;
}

h1 {
    font-size: 100%;
    line-height: normal;
    padding: 0;
    margin: 0 auto;
}

h2 {
    background-color: #5e0033;
    padding: 0.2em 1em;
    margin: 0 auto 0.5em auto;
}

h3 {
    background-color: #000000;
    background-image: url("../img/title_bg.jpg");
    background-size: cover;
    background-position: center;
    text-align: center;
    width: 100%;
    padding: 0.5em;
    margin: 0 auto;
}

.right_box01 {
    padding: 0 3em;
}

.secret_txt {
    margin: 0 auto 3em auto;
}

.users_voiceBox {
    display: flex;
    padding: 1em 2em;
}

.users_voice {
    margin: 1em;
    width: calc(20% - 1em);
}

.users_voice img {
    border-radius: 20px;
    margin: 0 auto 1em auto;
    width: 100%;
}

.right_box02 {
    padding: 3em 3em 0 3em;
}

.right_box02 .contents_txt {
    margin: 0 auto 2em auto;
}

.company_name {
    width: 5em;
    float: left;
}

.company_txt {
    width: calc(100% - 5em);
    overflow: auto;
}

ul {
    margin: 0.2em auto 0 auto;
    padding: 0 0 0 1.5em;
}


ul li {
    margin: 0 auto 0.2em auto;
}

/* ------------------------------------------------------ */
/* Media Query for Tablets */
@media only screen and (max-width : 1680px) {
/* ------------------------------------------------------ */

}

/* ------------------------------------------------------ */
/* Media Query for Tablets */
@media only screen and (max-width : 1440px) {
/* ------------------------------------------------------ */

}

/* ------------------------------------------------------ */
/* Media Query for Tablets */
@media only screen and (max-width : 1280px) {
/* ------------------------------------------------------ */

}

/* ------------------------------------------------------ */
/* Media Query for Tablets */
@media only screen and (max-width : 1024px) {
/* ------------------------------------------------------ */

#top_cover img.top_img {
    top: 10%;
}

#top_cover img.bottom_img {
    bottom: 5%;
}

}

/* ------------------------------------------------------ */
/* Media Query for Tablets */
@media only screen and (max-width : 960px) {
/* ------------------------------------------------------ */

#top_cover img.top_img {
    top: 1%;
}

#top_cover img.bottom_img {
    bottom: 1%;
}

.bg_bk {
    background-color: #ffffff;
}

section .bg_bk {
    height: 50vh!important;
}

.half_box {
    width: 100%;
}

.factory_box {
    display: block;
}

.half_box img.factory {
    width: calc(100% - 6em);
    height: auto;
    position: relative;
    left: 0;
    top: 0;
    transform: translate(0,0);
    margin: 0 3em 3em 3em;
    border-radius: 20px;
}

.users_voiceBox {
    flex-wrap: wrap;
}

.users_voice {
    width: calc(33.3% - 2em);
}

body,html {
    background-image: url("../img/footer.jpg");
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}

}

/* ------------------------------------------------------ */
/* Media Query for FAX */
@media only screen and (max-width : 810px) {
/* ------------------------------------------------------ */

}

/* ------------------------------------------------------ */
/* Media Query for FAX */
@media only screen and (max-width : 640px) {
/* ------------------------------------------------------ */

}

/* ------------------------------------------------------ */
/* Media Query for SmartPhone */
@media only screen and (max-width : 500px) {
/* ------------------------------------------------------ */
section {
    margin: 0 auto;
}
    
.half_box img.factory {
    width: 100%;
    margin: 0;
    border-radius: 0;
}
    
section.bg_bk {
    margin: 0 auto!important;
    height: 100vh!important;
    background-color: #000000;
}

#top_cover {
    background-image: url("../img/sp_top00.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh!important;
    background-color: #000000;
}
    
    #top_cover img  {
        width: auto;
        height: auto;
        max-height: 100vh;
        max-width: 100%;
        position: absolute;
        top: 50%!important;
        left: 50%;
        transform: translate(-50%, -50%);
    }


.right_box01{
    padding: 0;
    width: 100%;
}

h2 {
    text-align: center;
}

    .secret_txt {
        margin: 0 2em 3em 2em;
    }

    .end {
        margin: 0 2em 3em 2em;
    }
    
    .users_voice {
        width: 100%;
        margin: 0 auto 3em auto;
    }
    
    .users_voiceBox {
        padding: 2em;
    }
    
    .right_box02 {
    padding: 0;
    width: 100%;
    }
    
    .right_box02 .contents_txt {
        margin: 1em 2em 2em 2em;
    }
    
    .company_name,
    .company_txt {
        width: 100%;
        text-align: center;
    }
    
    
    .company_txt {
        margin: 0 auto 1em auto;
    }

}

/* ------------------------------------------------------ */
/* Media Query for Mobile iPhoneSE */
@media only screen and (max-width : 420px) {
/* ------------------------------------------------------ */

}

/* ------------------------------------------------------ */
/* Media Query for iphone */
@media only screen and (max-width : 380px) {
/* ------------------------------------------------------ */

}