@charset "UTF-8";
/*スマホ用
----------------------------------*/
/*@media only screen and (max-width: 1035px) {
.FEATURE-box .text {width: 100%;}
.FEATURE-box .right {width: 100%;}
.FEATURE-box .left {width: 100%;}  
}*/

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

    header .top_area {
        width: 90%;
        margin: 0 auto;
    }

    header nav .header-nav {
        width: 90%;
        margin: 0 auto;
    }
    
    #message .textarea,
    #post .textarea {
        width: 90%;
        margin: 0 auto;
    }

    #service .textarea {
        width: 90%;
        margin: 0 auto;
    }

    footer .fotter-wrap .fotter-data {
        width: 90%;
        margin: 0 auto;
    }

    footer .fotter-wrap .company_data {
        width: 46%;
    }

}

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

    footer .fotter-wrap .footer_logo {
        width: 30%;
    }

    footer .fotter-wrap .company_data {
        width: 51%;
    }

}

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

    footer .fotter-wrap .company_data {
        width: 55%;
    }

}

/* iPad */
@media only screen and (max-width: 835px) {}

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

    #message .textarea p {
        font-size: 2.2rem;
    }

}

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

    footer .fotter-wrap .company_data {
        width: 64%;
    }

    /* NEWS＆BLOG */
    .archive-post .news_blog {
        width: 90%;
        margin: 0 auto;
    }

}

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

    #message .textarea p {
        font-size: 2rem;
    }
    
}

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

    footer .fotter-wrap .company_data {
        font-size: 1.4rem;
    }

}


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

    #message .textarea p {
        font-size: 1.8rem;
    }
    
}


/* SP-ZONE */
@media only screen and (max-width: 680px) {

    html {font-size: 65%;}

    .sp-zone {display: block;}
    .pc-zone {display: none;}

    header .top_area .header-contact,
    header nav .header-nav {
        display: none;
    }

    .firstview {
        padding-top: 0;
    }

    header nav {
        height: 0;
    }

    body.fixed nav {
        display: none;
        height: 0;
    }

    body.fixed .firstview {
        margin-top: 0;
    }

    .bx-wrapper {
        height: 500px!important;
    }

    .view_1 span,
    .view_2.active-slide span,
    .view_3.active-slide span {
        font-size: 1.8rem;
        margin: 10px 0;
    }

    li.view_1 {
        transform: translate(-50%, 180%);
    }

    li.view_2 {
        transform: translate(-50%, 120%);
    }

    li.view_3 {
        transform: translate(-50%, 30%);
    }

    li.view_4 {
        transform: translate(-50%, 5%);
    }

    li.view_4.active-slide img {
        max-width: 70%;
    }



    /* INDEXページ */
    #message,
    #post,
    #service,
    #company {
        padding-top: 0;
    }

    #post .textarea {
        text-align: justify;
    }

    #message .textarea p {
        line-height: 2.5em;
        font-size: 1.6rem;
    }

    #post .news_blog {
        width: 90%;
        margin: 0 auto;
    }

    #post .news_blog dl a {
        flex-direction: column;
        text-align: left;
        line-height: 1.2em;
        padding-bottom: 30px;
    }

    #post .news_blog dl a:last-child {
        padding-bottom: 0;
    }

    #post .news_blog dt {
        width: 100%;
        font-size: 1.4rem;
    }

    #post .news_blog dd {
        width: 100%;
        font-size: 1.6rem;
    }

    #service .textarea h3 {
        text-align: left;
        line-height: 1.4em;
        font-size: 2rem;
        text-align: center;
    }

    #service .textarea p {
        font-size: 1.6rem;
        line-height: 2em;
        text-align: justify;
    }

    #service .textarea .for-client p span {
        display: block;
        margin: -5px 0;
    }

    #company .textarea .company_data {
        width: 90%;
        margin: 0 auto;
        font-size: 1.8rem;
    }

    #company .textarea .company_data dl {
        font-size: 1.6rem;
    }

    #company .textarea .plofile {
        width: 90%;
        margin: 0 auto;
    }

    #company .textarea .plofile p.top-space {
        padding-top: 15px;
    }

    #message .title-wrap,
    #post .title-wrap,
    #service .title-wrap,
    #company .title-wrap {
        align-items: center;
        height: 125px;
        position: relative;
    }

    #message .title-wrap .title,
    #post .title-wrap .title,
    #service .title-wrap .title,
    #company .title-wrap .title {
        width: 90%;
        margin: 0 auto;
        padding-right: 0;
    }

    #message .title-wrap .title span,
    #post .title-wrap .title span,
    #service .title-wrap .title span,
    #company .title-wrap .title span {
        font-size: 1.4rem;
    }

    #message .title-wrap .title_logo,
    #post .title-wrap .title_logo,
    #service .title-wrap .title_logo,
    #company .title-wrap .title_logo {
        text-align: center;
        position: absolute;
        top: 15px;
        right: 5px;
    }

    #message .title-wrap .title h2 img {
        width: 40%;
        padding: 10px 0;
    }

    #post .title-wrap .title h2 img {
        width: 50%;
        padding: 10px 0;
    }

    #service .title-wrap .title h2 img,
    #company .title-wrap .title h2 img {
        width: 60%;
        padding: 10px 0;
    }

    #message .title-wrap .title_logo img,
    #post .title-wrap .title_logo img,
    #service .title-wrap .title_logo img,
    #company .title-wrap .title_logo img {
        width: 60%;
    }



    /* フッターCSS */

    footer .fotter-wrap {
        padding-bottom: 75px;
    }

    footer .fotter-wrap .fotter-data {
        flex-direction: column;
    }

    footer .fotter-wrap .footer_logo {
        width: 100%;
        text-align: center;
    }

    footer .fotter-wrap .company_data {
        width: 100%;
    }

    footer .fotter-wrap .company_data dl {
        width: 70%;
        margin: 0 auto;
        padding-top: 20px;
    }



    /* ハンバーガーメニュー内CSS */

    .navi.open h1 {
        width: 55%;
        margin: 0 auto;
    }

    .navi.open .header-contact p {
        font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
    }

    .navi.open .header-contact p.tel {
        padding: 15px 0;
    }

    .navi.open .head-menu {
        padding: 30px 0;
        width: 40%;
        margin: 0 auto;
        text-align: left;
    }

    .navi.open .head-menu li {
        font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
        font-size: 2rem;
        border-bottom: 1px solid #333;
        padding-bottom: 15px;
    }

    .navi.open .head-menu li a {
        color: #042275;
    }

    .navi.open .head-menu li a span {
        font-size: 1.6rem;
        padding-left: 15px;
        color: #737373;
    }

    .navi.open .header-contact p.tel span img {
        padding: 0 7px 0 7px;
    }

    .navi.open .header-contact p.mail span img {
        padding: 0 2.5px 4px 0;
    }


    /* NEWS＆BLOG */
    .archive-post .title-wrap,
    .single-post .title-wrap {
        align-items: center;
        height: 125px;
        position: relative;
    }

    .archive-post .title-wrap .title_logo,
    .single-post .title-wrap .title_logo {
        text-align: center;
        position: absolute;
        top: 5px;
        right: 5px;
    }

    .archive-post .news_blog dl a {
        flex-direction: column;
        text-align: left;
        line-height: 1.2em;
        padding-bottom: 30px;
    }

    .archive-post .news_blog dl a dt {
        font-size: 1.4rem;
        width: 100%;
    }

    .archive-post .news_blog dl a dd {
        width: 100%;
        font-size: 1.6rem;
    }

    .archive-post .title-wrap .title_logo img,
    .single-post .title-wrap .title_logo img {
        width: 60%;
    }

    .archive-post .title-wrap .title {
        width: 90%;
        margin: 0 auto;
    }

    .archive-post .title-wrap .title span,
    .single-post .title-wrap .title span {
        font-size: 1.4rem;
        padding-top: 7.5px;
    }

    .archive-post .title-wrap .title h2 img,
    .single-post .title-wrap .title h2 img {
        width: 50%;
    }

    .single-post .contents {
        width: 90%;
        margin: 0 auto;
        padding: 50px 0 100px;
    }

    .single-post .title {
        padding-right: 0;
        width: 90%;
        margin: 0 auto;
    }

    .single-post .contents .title {
        width: 100%;
    }

    .single-post .contents .title h3 {
        text-align: justify;
        font-size: 2rem;
        line-height: 1.4em;
    }
    
    .single-post .contents .ymd {
        font-size: 1.4rem;
    }

    .single-post .contents .article {
        padding: 30px 0 100px;
    }

    .single-post .contents .article h4 {
        font-size: 2rem;
        line-height: 1.5em;
    }

    .single-post .contents .article h3 {
        font-size: 2.2rem;
        line-height: 1.4em;
    }

    .single-post .contents .article h2 {
        font-size: 2.4rem;
        line-height: 1.4em;
    }

    .single-post .contents .article p {
        font-size: 1.6rem;
        line-height: 1.8em;
    }

    .single-post .contents .article img {
        width: 100%;
    }

    .wp-pagenavi {
        font-size: 1.6rem;
    }

    .single-post .contents .page-navi .page-turn,
    .single-post .contents .page-navi .return-link {
        font-size: 1.6rem;
    }


    /* CONTACTのCSS */

    #contact-pagezone .wp-block-group .wp-block-group__inner-container,
    #contact-confirm-pagezone .wp-block-group .wp-block-group__inner-container,
    #contact-thanks-pagezone .wp-block-group .wp-block-group__inner-container {
        flex-direction: column-reverse;
        position: relative;
    }

    .space-01,
    .space-02 {
        height: 25px;
    }

    .wp-block-image img {
        width: 100%;
    }

    .wp-block-image img.wp-image-65 {
        width: 15%;
        position: absolute;
        top: -10px;
        right: 5%;
    }

    .wp-block-image img.wp-image-64 {
        width: 40%;
    }

    .wp-block-group.is-layout-constrained.wp-block-group-is-layout-constrained {
        width: 100%;
        text-align: center;
    }

    #contact-pagezone .wp-block-group .wp-block-group__inner-container figure {
        width: 100%;
        padding-left: 0;
    }

    .wpcf7 form .contact-tel,
    .wpcf7 form .contact-mail {
        width: 90%;
        margin: 0 auto;
    }

    .wpcf7 form .contact-tel h3,
    .wpcf7 form .contact-mail h3 {
        font-size: 2rem;
    }

    .wpcf7 form .contact-tel p span {
        font-size: 1.4rem;
    }

    .wpcf7 form .contact-tel p {
        font-size: 1.8rem;
    }

    .wpcf7 form .contact-mail {
        padding-bottom: 15px;
    }

    .wpcf7 form p {
        width: 90%;
        margin: 0 auto;
    }

    .wpcf7 form p label {
        flex-direction: column;
    }

    .wpcf7 form p label span.dot {
        font-size: 1.2rem;
        width: 10%;
        padding: 5px 10px;
        margin: 10px 0;
    }

    .wpcf7 form p label span.name {
        font-size: 1.8rem;
        width: 100%;
        padding: 0;
    }

    .wpcf7 form p label span.wpcf7-form-control-wrap {
        width: 97.5%;
        margin-top: -15px;
    }

    .wpcf7 form p label span.wpcf7-form-control-wrap input {
        font-size: 1.8rem;
    }

    .wpcf7 form p .box-02,
    .wpcf7 form p .box-03,
    .wpcf7 form p .box-04 {
        margin-bottom: 25px;
    }

    .wpcf7 form p label span.dot.area {
        margin: 0 0 15px 0;
    }

    .wpcf7-spinner {
        display: none!important;
    }

    #contact-confirm-pagezone .wpcf7 form p label span.name {
        margin-right: 0;
        font-size: 1.8rem;
        font-weight: bold;
    }

    #contact-confirm-pagezone .wpcf7 form p label {
        align-items: baseline;
        font-size: 1.8rem;
        line-height: 1.4em;
    }

    .wpcf7 form p {
        padding: 5px 0;
    }

    .wpcf7 form p input.wpcf7-form-control.wpcf7-submit.has-spinner {
        font-size: 1.4rem;
    }

    .wpcf7 form p label span.wpcf7-form-control-wrap textarea {
        font-size: 1.8rem;
    }

    .wpcf7-not-valid-tip {
        font-size: 1.8rem;
    }

    #contact-confirm-pagezone .wpcf7 form p:nth-child(9) input.return {
        font-size: 1.4rem;
    }

    img.wp-image-76 {
        width: 15%;
        position: absolute;
        top: 5px;
        right: 5px;
    }

    #contact-pagezone .wp-block-group .wp-block-group__inner-container h2,
    #contact-confirm-pagezone .wp-block-group .wp-block-group__inner-container h2,
    #contact-thanks-pagezone .wp-block-group .wp-block-group__inner-container h2 {
        font-size: 1.4rem;
    }

    /* TOPに戻るボタン */

    .back-to-top {
        display: none!important;
    }



    header .bottom-menu {
        width: 100%;
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
    }

    header .bottom-menu ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header .bottom-menu ul li {
        width: calc(100% / 6);
        height: 55px;
    }

    header .bottom-menu ul li a {
        font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
        display: block;
        height: 100%;
        padding: 10px 0;
        background: #042275;
        color: #fff;
        font-size: 1.4rem;
        line-height: 1.2em;
        text-align: center;
        border-right: 1px solid #fff;
        border-top: 1px solid #fff;
    }

    header .bottom-menu ul li a:hover {
        opacity: 1;
    }

    header .bottom-menu ul li a.top-space {
        padding-top: 19px;
    }

    header .bottom-menu ul li:last-child a {
        border-right: none;
    }

    header .bottom-menu .sp-link {
        display: none;
    }




/*---------------------------------------
スマホメニュー（ハンバーガーメニュー 表示） 
--------------------------------------*/

/*btn-navi*/
.sp-navi.sp-zone {display: block;}
.Btn-navi {padding: 5px 0 0 0; height: 55px; right: 5%; top: 15px; position: fixed; background: #042275; width: 50px; display:block; line-height: 1em; z-index:9999; transition: .3s;}
.Btn-navi .name {font-weight: bold; position: relative; bottom: -25px; left: 5px; vertical-align:middle; text-align:center; color:#ffffff; font-size:1rem; line-height: 1em; font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;}
.Btn-navi .menuBtn {display: inline-block; position: relative; width: 40px; height:30px;}
.menu-icon {display: block; position: absolute; top: 20%; left: 50%; width: 35px; height: 2px; margin: -1px 0 0 -12px; background: #ffffff; transition: .2s;}
.menu-icon:before,.menu-icon:after {display: block; content: ""; position: absolute; top: 50%; left: 0; width: 35px; height: 2px; background: #ffffff; transition: .3s;}
.menu-icon:before {margin-top: -10px;}
.menu-icon:after {margin-top: 8px;}
.menuBtn:hover .menu-icon:before {margin-top: -10px;}
.menuBtn:hover .menu-icon:after {margin-top: 8px;}
.Btn-navi.close .name { color:#ffffff; overflow: hidden; left: 5px; top: 27.5px; width: 100%; font-size: 1rem; line-height: 9px; text-align: center; font-weight: bold; height: 8px; font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;}
.Btn-navi.close .name:before {display: block; content: 'CLOSE'; overflow: hidden;}
.Btn-navi.close .menu-icon:before,.Btn-navi.close .menu-icon:after {background: #ffffff;}
.Btn-navi.close .menuBtn .menu-icon {background: transparent;}
.Btn-navi.close .menuBtn .menu-icon:before, .Btn-navi.close .menuBtn .menu-icon:after {margin-top: 0;}
.Btn-navi.close .menuBtn .menu-icon:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.Btn-navi.close .menuBtn .menu-icon:after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
#mainhead .Btn-navi{ position: absolute; left:5px; top:5px; }
#mainhead .Btn-navi.close { opacity: 0; display: none;}
#fixBtn-navi {position: fixed;  width: auto; bottom: 20px; right:15px;}
#fixBtn-navi.Btn-navi .menuBtn { display: block; background-color:#333; border-radius: 10px; padding:10px 0px 0px;}
#fixBtn-navi.Btn-navi .menuBtn .menu-icon {margin-top: -6px;}
#fixBtn-navi .menu-icon,#fixBtn-navi .menu-icon:before,#fixBtn-navi .menu-icon:after {background-color: #ffffff;}
#fixBtn-navi .menu-icon:before{margin-top: -7px;}
#fixBtn-navi .menu-icon:after {margin-top: 5px;}
#fixBtn-navi.close .menu-icon:before,#fixBtn-navi.close .menu-icon:after {margin-top: 0;}
#fixBtn-navi.close .menu-icon {background: transparent;}
#fixBtn-navi .name { color: #ffffff; display: block; position: relative; left:0px; bottom: -17px;}
#fixBtn-navi .name:before { display: inline; content: 'MENU';}
#fixBtn-navi.close .name:before { display: inline; content: 'CLOSE';}
#fixBtn-navi.close .name { color: #ffffff;}
#cavor.Btn-navi {width: 100%; height: 100%; position: fixed; top:0px; left: -100%; transition:0s;  z-index: 999;}
#cavor.Btn-navi .menuBtn {display:block; width: 100%; height: 100%; background:rgba(255,255,255,0.6); }
#cavor.close { left: 0px; }
.navi {
    background-color: rgba(255,255,255,.8); /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; /*メニュー内部上下左右余白*/
    position: fixed;
    left: 0%;
    opacity: 0;
    top: 0;
    transition: .2s; /*0.3s は変化するのにかかる時間*/
    width: 100%; /*メニュー横幅①*/
    z-index: -9;
}
.Btn-navi:hover + .navi-background {
    opacity: 0.5; /*黒背景部分透過度*/
    z-index: 999;
}
/*.navi-background {width: 100%; height: 100%; position: fixed; top: 0px; left: 0%; transition: 0s; z-index: 999;}*/
.navi-background a.background-btn{display: block; width: 100%; height: 100%; background: rgba(255,255,255,0.6);}
.navi.open {opacity: 1; z-index: 1000;}
.navi-background {z-index: 999; display: none; position: fixed; width: 100%; height: 100%; top: 0; left:0; }
.navi-background.open {display: block; background: rgba(255,255,255,0.6); }
.navi.open {padding-bottom: 10px; padding-top: 30px; text-align: center;}
.navi.open ul li {font-size: 14px; margin-bottom: 20px;}

.Btn-navi_first {padding: 5px; background: #816a29; width: 40px; display:none; line-height:1em; z-index:9999; transition: .3s;}
.Btn-navi_first .name { vertical-align:middle; text-align:center; color:#ffffff; font-size:7.3px; line-height: 1em; }
.Btn-navi_first .menuBtn {display: inline-block; position: relative; width: 40px; height:30px;}
/*footer .navi ul {display: block; padding: 30px 0px;}*/
footer .navi ul {
    font-size: 12px;
    height: 280px;
    overflow: auto;
    /* background-color: #FFF; */
    padding: 10px 10px;
    margin-bottom: 15px;
    /* border: 1px solid #CCC; */
    display: block;
    padding: 30px 0px;
}
/*---------------------------------------
スマホメニュー（ハンバーガーメニュー 表示ここまで） 
--------------------------------------*/
}

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

    footer .fotter-wrap .company_data dl {
        width: 73%;
    }

}

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

    .navi.open .head-menu {
        width: 45%;
    }

}

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

    footer .fotter-wrap .company_data dl {
        width: 78%;
    }

}


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

    #company .textarea .company_data dl {
        flex-direction: column;
        line-height: 1.5em;
    }

    #company .textarea .company_data dl dt {width: 100%;}
    #company .textarea .company_data dl dd {
        width: 100%;
        padding-bottom: 25px;
        text-align: justify;
    }
    zzw
    #company .textarea .company_data dl dd:last-child {
        padding-bottom: 0;
    }

}

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

    .bx-wrapper {
        height: 500px!important;
    }

    .sp-585 {display: block;}
    li.view_1 {
        transform: translate(-50%, 120%);
    }

    li.view_2 {
        transform: translate(-50%, 120%);
    }

    .view_3 {
        transform: translate(-50%, 35%);
    }

    li.view_4 {
        transform: translate(-50%, 15%);
    }
    
}

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

    footer .fotter-wrap .company_data dl {
        width: 84%;
    }

}

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

    .navi.open .head-menu {
        width: 50%;
    }

}

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

    footer .fotter-wrap .company_data dl {
        width: 88%;
    }

}

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

    .navi.open .head-menu {
        width: 55%;
    }

}

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

    footer .fotter-wrap .company_data dl {
        width: 94%;
    }
    
}

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

    .sp-504 {display: block;}

    /* .view_1 span,
    .view_2.active-slide span,
    .view_3.active-slide span {
        font-size: 1.6rem;
    } */

    li.view_2 {
        transform: translate(-50%, 40%);
    }

    .view_3 {
        transform: translate(-50%, 25%);
    }

    li.view_4 {
        transform: translate(-50%, 15%);
    }
    
}

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

    .navi.open .head-menu {
        width: 60%;
    }

}

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

    footer .fotter-wrap .company_data dl {
        width: 100%;
    }
    
}

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

    footer .fotter-wrap .company_data dl {
        width: 100%;
    }
    
}

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

    .navi.open .head-menu {
        width: 75%;
    }

}

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

    footer .fotter-wrap .company_data dl {
        font-size: 1.2rem;
    }

    .view_1 span,
    .view_2.active-slide span,
    .view_3.active-slide span {
        font-size: 1.6rem;
    }
    
}

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

    li.view_1 {
        transform: translate(-50%, 145%);
    }

    li.view_2 {
        transform: translate(-50%, 45%);
    }

    li.view_4 {
        transform: translate(-50%, 20%);
    }

    li.view_4.active-slide img {
        max-width: 85%;
    }

}

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

    .navi.open .head-menu {
        width: 70%;
    }

}

@media only screen and (max-width: 404px) {
    
    .view_1 span,
    .view_2.active-slide span,
    .view_3.active-slide span {
        font-size: 1.5rem;
    }

    li.view_1 {
        transform: translate(-50%, 150%);
    }

    li.view_2 {
        transform: translate(-50%, 50%);
    }

    li.view_3 {
        transform: translate(-50%, 45%);
    }

    footer .fotter-wrap .company_data dl {
        font-size: 1.1rem;
    }

}

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

    .navi.open .head-menu {
        width: 75%;
    }

}

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

    .navi.open .head-menu {
        width: 85%;
    }

}

@media only screen and (max-width: 389px) {
    
    .view_1 span,
    .view_2.active-slide span,
    .view_3.active-slide span {
        font-size: 1.3rem;
    }

}


@media only screen and (max-width: 320px) {
    
}