@charset "UTF-8";
/* Hero ================================= */
.container article:first-child {
    min-height: initial;
}
#hero{
    padding: 0;
}
#hero .img_wrap {
    position: relative;
    width: 100%;
    max-height: 620px;
}
#hero .img_wrap::before{
    content:"";
    display: block;
    padding-top: 32.2916%;
}
#hero .img_wrap > img{
    display: block;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#hero .title_wrap{
    position: absolute;
    left: 25%;
    top: 40%;
    text-align: left;
    letter-spacing: 1px;
    line-height: 1.5;
    box-sizing: border-box;
}
#hero .title_wrap .title{
    word-break: break-all;
    letter-spacing: normal;
}
#hero .title_wrap span{
    display: block;
}
#hero .title_wrap .title span.style_bold{
    letter-spacing: 0.01em;
}

@media (max-width: 767px){
    #hero .img_wrap{
        min-height: 180px;
    }
    #hero .img_wrap > img{
        object-fit: cover;
    }
    #hero .title_wrap{
        left: 10%;
        top: 40%;
    }
    #hero .title_wrap .title{
        font-size: 1.4rem;
        margin: 0;
        line-height: 1.5;
    }
    #hero .title_wrap .title span.style_bold{
        font-size: 1rem;
    }
    #hero .title_wrap .title img {
        width: 100%;
        max-width: 110px;
    }
}
@media (min-width: 768px){
    #hero .title_wrap .title{
        font-size: 3.0rem;
        margin: 0.5em 0;
    }
    #hero .title_wrap .title span.style_bold{
        font-size: 1.8rem;
    }
    #hero .title_wrap .title img {
        width: 100%;
        max-width: 230px;
    }
}


/* contents_wrap=============================================== */
#contents_wrap{
    padding: 0;
}
#contents_wrap .btn_wrap{
    position: relative;
    padding-top: 20px;
    height: 80px;
}
@media (max-width: 1024px){
    #contents_wrap .btn_wrap > div {
        text-align: center;
    }
    #contents_wrap .btn_wrap > div .basic_btn{
        display: inline-block;
        width: 45%;
        max-width: 250px;
        font-size: 1rem;
    }
}
@media (min-width: 1025px){
    #contents_wrap .btn_wrap > div{
        position: absolute;
        right: 27px;
    }
    #contents_wrap .btn_wrap .basic_btn{
        width: 253px;
        margin-bottom: 14px;
    }
}
#contents_wrap .wrap{
    width: 90%;
    max-width: 1530px;
    margin: 0 auto;
}
#contents_wrap .wrap > div{
    width: 50%;
    box-sizing: border-box;
}
#contents_wrap .technicleaner{
    border-bottom: 1px solid #707070;
}
#contents_wrap .technicleaner .text_box{
    max-width: 640px;
}
#contents_wrap .handcleaner .text_box{
    max-width: 567px;
}
#contents_wrap .wrap .text_box h3{
    letter-spacing: 0.01em;
    line-height: 1.5;
    font-weight: normal;
    text-align: left;
    margin: 1em 0;
}
#contents_wrap .wrap .text_box .link_border{
    border-bottom: 1px solid #707070;
    text-decoration: none;
    transition: 0.3s;
}
#contents_wrap .wrap .text_box .basic_btn{
    width: 100%;
    max-width: 423px;
    padding: 19px 0;
}
#contents_wrap .technicleaner .img_box{
    background-image: url(../images/c4_img1.png);
}
#contents_wrap .handcleaner .img_box{
    background-image: url(../images/c4_img2.png);
}

@media (max-width: 767px){
    #contents_wrap{
        margin-bottom: 100px;
    }
    #contents_wrap .technicleaner{
        flex-direction: column;
    }
    #contents_wrap .handcleaner{
        flex-direction: column-reverse;
    }
    #contents_wrap .wrap .img_box{
        width: 100%;
        height: 150px;
    }
    #contents_wrap .wrap .text_box{
        width: 100%;
    }
    #contents_wrap .wrap .text_box h3{
        font-size: 1.6rem;
    }
    #contents_wrap .wrap .text_box .caption{
        font-size: 1.2rem;
        line-height: 1.7;
    }
    #contents_wrap .wrap .text_box .link_border{
        font-size: 1.2rem;
        letter-spacing: 0.01em;
    }
    #contents_wrap .wrap .text_box .flex_c{
        margin: 30px 0;
    }
    #contents_wrap .technicleaner .img_box{
        background-size: 65%;
        background-position: left 50% bottom 100%;
        background-repeat: no-repeat;
        max-width: 430px;
        margin: 0 auto;
    }
    #contents_wrap .handcleaner .img_box{
        background-size: 50%;
        background-position: left 60% bottom 100%;
        background-repeat: no-repeat;
        max-width: 430px;
        margin: 0 auto;
    }
}
@media (min-width: 768px){
    #contents_wrap{
        margin-bottom: 10vh;
    }
    #contents_wrap .technicleaner .text_box{
        padding-left: 30px;
    }
    #contents_wrap .handcleaner .text_box{
        padding-top: 94px;
    }
    #contents_wrap .wrap .text_box h3{
        font-size: 1.8rem;
    }
    #contents_wrap .technicleaner{
        margin-top: 100px;
    }
    #contents_wrap .handcleaner {
        justify-content: center;
    }
    #contents_wrap .wrap .text_box .caption{
        min-height: 124px;
        font-size: 1.4rem;
        letter-spacing: 0.02em;
        line-height: 2;
    }
    #contents_wrap .wrap .text_box .link_border{
        font-size: 1.4rem;
        letter-spacing: 0.01em;
    }
    #contents_wrap .wrap .text_box .flex_c{
        margin: 63px 0 48px;
    }
    #contents_wrap .wrap .text_box .basic_btn{
        font-size: 1.4rem;
    }
    #contents_wrap .technicleaner .img_box{
        background-size: 70%;
        background-position: left 40% bottom 100%;
        background-repeat: no-repeat;
    }
    #contents_wrap .handcleaner .img_box{
        background-size: 85%;
        background-position: left 55% top -95px;
        background-repeat: no-repeat;
    }
}
@media (min-width: 768px) and (max-width: 1300px){
    #contents_wrap .technicleaner .img_box{
        background-size: 100%;
        background-position: left 40% bottom 50%;
        background-repeat: no-repeat;
    }
    #contents_wrap .handcleaner .img_box{
        background-size: 100%;
        background-position: left 60% top 0px;
        background-repeat: no-repeat;
    }
}

.message_box{
    background-image: url(../images/c4_bg.png);
    background-position: bottom;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}
@media (max-width: 767px){
    .message_box{
        margin-top: 100px;
    }
    .message_box .text_box{
        padding-top: 100px;
    }
    .message_box .text_box div{
        width: 90%;
        margin: 0 auto;
        padding-bottom: 30px;
    }
    .message_box .text_box .style_serif{
        font-size: 2rem;
        letter-spacing: 0.25em;
        line-height: 1.5;
        margin: 1em 0;
    }
    .message_box .text_box .message{
        font-size: 1.2rem;
        letter-spacing: 0.02em;
        line-height: 2;
    }
    .message_box img{
        position: absolute;
        top: -50px;
        left: 0;
        width: 100%;
        max-width: 400px;
    }
}
@media (min-width: 768px){
    .message_box{
        margin-top: 150px;
        padding: 50px 0 75px;
    }
    .message_box img{
        position: absolute;
        top: -50px;
        width: 50%;
        max-width: 1045px;
    }
    .message_box .text_box{
        width: 50%;
        margin-left: auto;
    }
    .message_box .text_box div{
        max-width: 615px;
    }
    .message_box .text_box .style_serif{
        font-size: 30px;
        letter-spacing: 0.25em;
        margin: 1em 0;
    }
    .message_box .text_box .message{
        font-size: 1.4rem;
        letter-spacing: 0.02em;
        line-height: 2;
    }

}
@media (max-width: 1024px) and (min-width: 768px){
    .message_box img{
        top: auto;
    }
    .message_box .text_box{
        width: 55%;
    }
    .message_box .text_box div {
        padding-right: 30px;
    }
    .message_box .text_box .style_serif{
        font-size: 26px;
    }
}

/* series-line-up ================================= */
#series-line-up{
    padding: 0;
}
#series-line-up h2{
    font-size: 1.4rem;
    letter-spacing: 0.01em;
    margin-bottom: 2.5em;
}
#series-line-up h3{
    font-size: 1.4rem;
    letter-spacing: 0.28px;
    font-weight: normal;
    margin-bottom: 1.7em;
}
#series-line-up .inner{
    width: 80%;
    max-width: 1262px;
    margin: 0 auto;
}
#series-line-up .inner .flex_box{
    justify-content: space-between;
    flex-wrap: wrap;
}
#series-line-up .inner .flex_box::after{
    content:"";
    display: block;
    width: 30%;
}
#series-line-up .inner .flex_box .item_box{
    position: relative;
    display: block;
    width: 33%;
    max-width: 400px;
    margin-bottom: 50px;
    transition: 0.3s;
    text-decoration: none;
}
#series-line-up .inner .flex_box .item_box .img_wrap{
    position: relative;
    width: 100%;
    border: 1px solid #D6D6D6;
    background: #EDEDED;
}
#series-line-up .inner .flex_box .item_box .img_wrap::before {
    content:"";
    display: block;
    padding-top: 50%;
}
#series-line-up .inner .flex_box .item_box .img_wrap > span{
    position: absolute;
    letter-spacing: 0.02em;
    top: 50%;
    left: 20px;
    z-index: 10;
}
#series-line-up .inner .flex_box .item_box .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#series-line-up .item_box .caption p{
    word-break: break-all;
    white-space: pre-wrap;
}
#series-line-up .item_box .caption .style_bold{
    font-size: 1.2rem;
    letter-spacing: 3.6px;
    margin: 13px 0 7px;
    color: #534F4F;
}
#series-line-up .item_box .caption .style_en{
    font-size: 1.5rem;
    letter-spacing: 0.15px;
    margin: 13px 0 7px;
    color: #534F4F;
}
#series-line-up .item_box .caption .text{
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 767px) {
    #series-line-up .inner .flex_box{
        flex-direction: column;
    }
    #series-line-up .inner .flex_box .item_box{
        width: 100%;
        margin: 0 auto 50px;
    }
    #series-line-up .inner .flex_box .item_box .img_wrap > span{
        font-size: 2rem;
    }
}
@media (min-width: 768px) {
    #series-line-up .inner{
        margin: 0 auto;
    }
    #series-line-up .inner .flex_box .item_box .img_wrap > span{
        font-size: 2.8rem;
    }
}

/* News=============================================== */
#news .inner{
    display: flex;
    flex-wrap: wrap;
}
#news .news_box{
    display: flex;
    min-height: 145px;
    box-sizing: border-box;
}
#news .news_box:nth-child(2n){
    margin-right: 0;
}
#news .news_box .news_pic,
#news .news_box .news_pic_none{
    border: 1px solid #cbcbcb;
    background: #FFF;
}
#news .news_box .news_pic_none{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#news .news_box .news_pic .thumbnail,
#news .news_box .news_pic_none .thumbnail{
    width: 100%;
    height: 100%;
}
#news .news_box .news_pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#news .news_box .news_desc{
    flex: 1;
}
#news .news_box .news_desc .news_cat{
    display: inline-block;
    text-transform: uppercase;
}
#news .news_box .news_desc time{
    font-size: 1.2rem;
}
#news .news_box .news_desc p,
#news .news_box .news_desc a{
    display: block;
    word-break: break-all;
}
@media (max-width: 767px) {
    #news .inner{
        width: 90%;
        justify-content: space-between;
    }
    #news .news_box{
        flex-wrap: wrap;
        width: 100%;
        margin: 0 0 30px 0;
    }
    #news .news_box .news_pic,
    #news .news_box .news_pic_none{
        position: relative;
        width: 160px;
        height: 106px;
        margin-bottom: 10px;
    }
    #news .news_box .news_pic::before,
    #news .news_box .news_pic_none::before{
        content: "";
        display: block;
        padding-top: 65.25%;
    }
    #news .news_box .news_pic .thumbnail{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    #news .news_box .news_desc{
        padding-left: 10px;
    }
    #news .news_box .news_desc .news_cat{
        padding-right: 10px;
        margin-right: 5px;
        border-right: 1px solid #000;
        font-size: 1.3rem;
        letter-spacing: 0.15em;
    }
    #news .news_box .news_desc time{
        display: inline-block;
    }
    #news .news_box .news_desc p,
    #news .news_box .news_desc a{
        font-size: 1.2rem;
        line-height: 1.8;
        margin: 20px 0 0;
        height: 5.3em;
        overflow: hidden;
    }
}
@media (min-width: 768px) {
    #news .inner{
        width: 80vw;
    }
    #news .news_box{
        width: calc(50% - 45px);
        min-width: 515px;
        margin: 0 90px 90px 0;
    }
    #news .news_box .news_pic,
    #news .news_box .news_pic_none{
        width: 217px;
        height: 145px;
    }
    #news .news_box .news_desc{
        padding-left: 20px;
        position: relative;
    }
    #news .news_box .news_desc .news_cat{
        padding-bottom: 0.5em;
        margin-bottom: 0.5em;
        border-bottom: 1px solid #000;
        font-size: 1.4rem;
    }
    #news .news_box .news_desc time{
        display: block;
        margin-bottom: 20px;
    }
    #news .news_box .news_desc p,
    #news .news_box .news_desc a{
        font-size: 1.4rem;
        line-height: 1.5;
        margin: 0;
        height: 4.5em;
        position: absolute;
        bottom: 0;
        overflow: hidden;
    }
}
@media (min-width: 768px) and (max-width: 1399px) {
    #news .inner {
        flex-direction: column;
    }
    #news .news_box{
        width: 100%;
        margin: 0 20px 60px 0;
    }
}

/* information=============================================== */
#information-menu .inner{
    width: 90%;
    max-width: 1117px;
    margin: 0 auto;
}
#information-menu ul{
    padding: 0;
    margin: 4em 0;
    text-align: center;
}
#information-menu ul li{
    display: inline-block;
    min-width: 201px;
    border-bottom: 2px solid #707070;
    position: relative;
    margin: 0 28px 50px 50px;
    font-size: 1.1rem;
    letter-spacing: 3.3px;
    text-align: center;
}
#information-menu ul li a{
    display: block;
    padding: 13px 0;
    text-decoration: none;
    transition: 0.3s;
}
#information-menu ul li::before{
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
}
#information-menu ul li.contact::before{
    background-image: url(../images/information_icon1.svg);
    right: 100%;
    bottom: -5px;
}
#information-menu ul li.office{
    margin-left: 83px;
}
#information-menu ul li.office::before{
    background-image: url(../images/information_icon7.svg);
    right: calc(100% - 5px);
    bottom: -5px;
    width: 83px;
    height: 50px;
}
@media (max-width: 767px) {
    #information-menu ul{
        text-align: center;
    }
    #information-menu ul li{
        margin-right: 0;
    }
}

/* movie=============================================== */
#contents_wrap .movie_box{
    margin: 100px auto 0;
    position: relative;
    width: 80%;
    max-width: 640px;
}
#contents_wrap .movie_box::before {
    content:"";
    display: block;
    padding-top: 56.25%;
}
#contents_wrap .movie_box iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}