@charset "UTF-8";

@font-face {
    font-family:"satsuki";
    src:url("font/satsuki.eot") format("eot"), /* for IE */
    url("font/satsuki.woff") format("woff"), /* for IE(>=9), Firefox(>=3.6), Safari(>=5.1), Chrome(>=6), Opera(>=11) */
    url("font/satsuki.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
    }
.en {font-family: 'Open Sans', sans-serif;}
.sa {font-family: 'satsuki', serif; font-weight: normal; line-height: 135%;}
    .sa h1,.sa h2,.sa h3,.sa h4 { font-weight:normal !important; line-height: 135%;}

/*==================================================================================================

       ヘッダー

===================================================================================================*/

/*==================================================================================================
      desktop header
===================================================================================================*/

header.dsk-header {
	}
    .dsk-header-wrap {
        position:absolute;
        top:50%;
        left:30px;
        margin-top:-225px;
        padding:80px 65px 0;
        height:450px;
        width:400px;
        background: url("../images/parts/blue.jpg") center center repeat;
        box-sizing: border-box;
        z-index:999;
        }
        .dsk-logo {
            width:270px;
            padding-bottom:40px;
            }
        .dsk-navigation {
            }
            .dsk-main-nav {
                padding-bottom:45px;
                }
                .dsk-main-nav li {
                    float:left;
                    }
                    .dsk-main-nav li a {
                    display: block;
                    width:54px;
                    height:140px;
                    border-left:1px solid rgba(255,255,255,.5);
                    box-sizing: border-box;
                    text-align: center;
                    -webkit-transition  : all .3s ease;
                        -moz-transition : all .3s ease;
                        -ms-transition  : all .3s ease;
                            transition  : all .3s ease;
                    }
                    .dsk-main-nav li:last-child a {
                    border-right:1px solid rgba(255,255,255,.5);
                    }
                    .dsk-main-nav li a:hover {
                    padding-top:5px;
                    }
            .dsk-sub-nav {
                width:100%;
                text-align:center;
                }
                .dsk-sub-nav li {
                display: inline-block;
                line-height: 1;
                padding:0 14px 0 13px;
                color:#FFF;
                border-right:1px solid #FFF;
                }
                .dsk-sub-nav li:first-child {
                padding-left:0;
                }
                .dsk-sub-nav li:last-child {
                border-right:none;
                padding-right:0;
                }
                .dsk-sub-nav li a {
                font-size:18px;
                letter-spacing: .05em;
                position: relative;
                display: inline-block;
                text-decoration: none;
                color:#FFF;
                }
                .dsk-sub-nav li a:hover {
                cursor: pointer;
                text-decoration: none;
                }
                .dsk-sub-nav li a::after {
                position: absolute;
                bottom: -3px;
                left: 0;
                content: '';
                width: 100%;
                height: 1px;
                background: #FFF;
                transform: scale(0, 1);
                transform-origin: right top;
                transition: transform .3s;
                }
                .dsk-sub-nav li a:hover::after {
                transform-origin: left top;
                transform: scale(1, 1);
                }
        .dsk-contact-btn {
            position:fixed;
            right:20px;
            top:20px;
            line-height: 1;
            letter-spacing: 0.05em;
            z-index: 10000;
            font-weight:200;
            font-size:17px;
            -webkit-transition  : all .3s ease;
                -moz-transition : all .3s ease;
                -ms-transition  : all .3s ease;
                    transition  : all .3s ease;
            }
            .dsk-contact-btn a {
                width:180px;
                height:70px;
                text-align: center;
                line-height:70px;
                color:#FFF;
                background: url("../images/parts/yellow.jpg") center center repeat;
                position: relative;
                z-index: 1;
                -webkit-transition  : all .3s ease;
                    -moz-transition : all .3s ease;
                    -ms-transition  : all .3s ease;
                        transition  : all .3s ease;
                letter-spacing: .05em;
                display: inline-block;
                }
                .dsk-contact-btn a:after {
                position: absolute;
                content: "";
                width: 0;
                height: 100%;
                top: 0;
                right: 0;
                z-index: -1;
                -webkit-transition  : all .3s ease;
                    -moz-transition : all .3s ease;
                    -ms-transition  : all .3s ease;
                        transition  : all .3s ease;
                background: rgba(255,255,255,.15);
                }
                .dsk-contact-btn a:hover:after {
                left: 0;
                width: 100%;
                }

        @media screen and (max-width: 1240px) {
        .dsk-header-wrap { left:1.75%; margin-top:-205px; padding:60px 45px 0; height:410px; width:360px; }
        .dsk-contact-btn { right:15px; top:15px;}
        }

        @media screen and (max-width: 1087px) {
        .dsk-header-wrap { display:none; }
        .dsk-contact-btn { display:none; }
        }

    /*=================================================
            Fixed
    ==================================================*/

header.dsk-header .fix-header-wrap{
        position: fixed;
        top:-90px;
        width:100%;
        height:70px;
        background: url("../images/parts/blue.jpg") center center repeat;
        z-index: 9999;
        -webkit-transition  : all .3s ease;
            -moz-transition : all .3s ease;
            -ms-transition  : all .3s ease;
                transition  : all .3s ease;
        }
        header.dsk-header.fixed .fix-header-wrap{
        top:0;
        }
        .fix-logo {
            position: relative;
            float:left;
            margin:8px 0 0 30px;
            width:240px;
            z-index: 30;
            }
        .fix-navigation {
            position: relative;
            z-index: 10;
            }
            .fix-main-nav {
                position: absolute;
                top:38px;
                right:225px;
                }
                .fix-main-nav li {
                    float:left;
                    padding-right:40px;
                    line-height: 1;
                    }
                    .fix-main-nav li:last-child { padding-right:0;}
                    .fix-main-nav li a {
                    display: block;
                    box-sizing: border-box;
                    color:#FFF;
                    font-size:16px;
                    letter-spacing: .1em;
                    line-height: 1;
                    text-align: center;
                    -webkit-transition  : all .3s ease;
                        -moz-transition : all .3s ease;
                        -ms-transition  : all .3s ease;
                            transition  : all .3s ease;
                    }
            .fix-sub-nav {
                position: absolute;
                top:5px;
                right:225px;
                width:100%;
                text-align: right;
                }
                .fix-sub-nav li {
                display: inline-block;
                line-height: 1;
                padding:0 14px 0 13px;
                color:#FFF;
                border-right:1px solid #FFF;
                }
                .fix-sub-nav li:first-child {
                padding-left:0;
                }
                .fix-sub-nav li:last-child {
                border-right:none;
                padding-right:0;
                }
                .fix-sub-nav li a {
                font-size:14px;
                letter-spacing: .05em;
                position: relative;
                display: inline-block;
                text-decoration: none;
                color:#FFF;
                }
                .fix-sub-nav li a:hover {
                cursor: pointer;
                text-decoration: none;
                }
                .fix-sub-nav li a::after {
                position: absolute;
                bottom: -3px;
                left: 0;
                content: '';
                width: 100%;
                height: 1px;
                background: #FFF;
                transform: scale(0, 1);
                transform-origin: right top;
                transition: transform .3s;
                }
                .fix-sub-nav li a:hover::after {
                transform-origin: left top;
                transform: scale(1, 1);
                }
        header.dsk-header.fixed .dsk-contact-btn { right:0px; top:0px; font-size:16px; }
        header.dsk-header.fixed .dsk-contact-btn a { width:180px; height:70px; line-height:70px; }

    /*=================================================
            hover bar
    ==================================================*/

    .fix-main-nav li a {
        position: relative;
        display: inline-block;
        transition: .3s;
        padding-bottom:10px;
        }
        .fix-main-nav li a:after {
        position:absolute;
        bottom:1px;
        left:50%;
        content:'';
        width:0;
        height:2px;
        background-color:#FFF;
        transition:.3s;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%); 
        }
        .fix-main-nav li a:hover:after {
        width:90%;
        }

        @media screen and (max-width: 1240px) {
        .fix-logo { margin:8px 0 0 20px; }
        .fix-main-nav li { padding-right:30px; }
        .fix-main-nav li a {letter-spacing: .05em;}
        }

        @media screen and (max-width: 1087px) {
        .fix-header-wrap { display:none; }
        }


/*==================================================================================================
      tablet-mobile header
===================================================================================================*/

header.sp-header {
    display: none;
	position:relative;
	height:60px;
	width:100%;
	z-index:9999;
	}
	.header-wrap {
        height:60px;
        width:100%;
        z-index:9999;
        background: #FFF;
        -webkit-transition  : all .3s ease;
            -moz-transition : all .3s ease;
            -ms-transition  : all .3s ease;
                transition  : all .3s ease;
        }
        .navigation-wrap {
            width:100%;
            box-sizing:border-box;
            position:relative;
            z-index: 10;
            }
            .sp-navigation {
                position: relative;
                width:100%;
                min-width:320px;
                height:60px;
                background: url("../images/parts/gray.jpg") center center repeat;
                z-index: 1000;
                }
                .logo {
                    position:relative;
                    float:left;
                    padding-top:7px;
                    padding-left:15px;
                    padding-bottom:0;
                    width:210px;
                    line-height:1;
                    z-index:100;
                    -webkit-transition  : all .3s ease;
                        -moz-transition : all .3s ease;
                        -ms-transition  : all .3s ease;
                            transition  : all .3s ease;
                    }
            .gnav-content {
                    display: none;
                    position: fixed;
                    left: 0;
                    top: 0;
                    width: 100%;
                    min-width:320px;
                    height: 100%;
                    background:#1F1F1F;
                    overflow: auto;
                    z-index:9999;
                    text-align: center;
                    }
                    .gnav-logo {
                        position:fixed;
                        width:240px;
                        left: 50%;
                        top: 40px;
                        margin-left: -120px;
                        padding-top: 0;
                        z-index: 200;
                        }
                    .navigation {
                        width:100%;
                        position:relative;
                        padding-top:120px;
                        -webkit-transition  : all .3s ease;
                            -moz-transition : all .3s ease;
                            -ms-transition  : all .3s ease;
                                transition  : all .3s ease;
                        }
                        .main-nav {
                            width: 100%;
                            max-width: 320px;
                            margin:0 auto;
                            }
                            .main-nav li {
                                position:relative;
                                line-height:1;
                                font-size:17px;
                                padding:0;
                                text-align: center;
                                -webkit-transition:  all 0.3s ease;
                                    -moz-transition: all 0.3s ease;
                                    -o-transition:   all 0.3s ease;
                                }
                                .main-nav li:last-child {
                                padding-right:0 !important;
                                }
                                .main-nav li a {
                                display: inline-block;
                                color:#FFF;
                                letter-spacing: 0.1em;
                                padding:12px 0; 
                                }
                                .main-nav li a:hover {
                                color:#CCC;
                                }
                                .main-nav li a::after {
                                position: absolute;
                                bottom: -3px;
                                left: 0;
                                content: '';
                                width: 100%;
                                height: 1px;
                                background: #FFF;
                                transform: scale(0, 1);
                                transform-origin: right top;
                                transition: transform .3s;
                                }
                                .main-nav li a:hover::after {
                                transform-origin: left top;
                                transform: scale(1, 1);
                                }
                        .sub-nav {
                            padding-top:40px;
                            }
                        .sub-nav li {
                            width: 40px;
                            padding: 0 10px;
                            display: inline-block;
                            text-align: center;
                            }


        @media screen and (max-width: 1087px) {
        header.sp-header { display: block; }
        }

    /*=================================================
            スマホ ハンバーガーメニュー
    ==================================================*/

        .nav-toggle {
            position:fixed;
            right:0;
            top:0;
            padding:0;
            width:52px;
            height:52px;
            text-align: center;
            font-size: 0px;
            letter-spacing: 0;
            box-sizing: border-box;
            pointer-events: auto;
            cursor:pointer;
            z-index:99999;
            }
            .nav-toggle div { position:absolute; width:28px; height:25px; top:18px; right:12px; }
            .nav-toggle span { display: block; position: absolute; height: 1px; width:25px; background: #1F1F1F; -moz-border-radius:2px; -webkit-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px;
            left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
            .nav-toggle span:nth-child(1) { top: 0; }
            .nav-toggle span:nth-child(2) { top: 6px; }
            .nav-toggle span:nth-child(3) { top: 12px; }
        .gnav .menu  { opacity: 1; position: absolute; width:24px; right:18px; top:37px; line-height: 1; font-size:10px; color:#111; -webkit-transition : all 0.2s ease;  -moz-transition : all 0.2s ease; -o-transition : all 0.2s ease;}
        .gnav .close { opacity: 0; position: absolute; width:24px; right:19px; top:37px; line-height: 1; font-size:10px; color:#FFF;  -webkit-transition : all 0.2s ease; -moz-transition : all 0.2s ease; -o-transition : all 0.2s ease;}
        .gnav.active .menu  { opacity: 0; }
        .gnav.active .close { opacity: 1; }
        .gnav.active .nav-toggle span { background: #FFF;}
        .gnav.active .nav-toggle span:nth-child(1) {top: 8px;-webkit-transform: rotate(315deg);-moz-transform: rotate(315deg);transform: rotate(315deg);}
        .gnav.active .nav-toggle span:nth-child(2) {width: 0;left: 50%;}
        .gnav.active .nav-toggle span:nth-child(3) {top: 8px;-webkit-transform: rotate(-315deg);-moz-transform: rotate(-315deg);transform: rotate(-315deg);}

/*==================================================================================================

       背景

===================================================================================================*/

.bg-gray { background: #EBEDE8;}
.bg-middlegray { background: #F6F7F4;}
.bg-lightgray { background: #FAFBF9;}


    .customer-lead {
        position:relative;
        z-index: 1;
        }
        .customer-lead:after {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        bottom:0;
        width:800px;
        height: 50px;
        background: url("../images/img/top/customer-title.png") center center / cover;
        }
        @media screen and (max-width: 1087px) {
        .customer-lead:after { width:560px; height: 35px; }
        }
        @media screen and (max-width: 767px) {
        .customer-lead:after { width:320px; height: 20px; }
        }

/*==================================================================================================

       タイトル

===================================================================================================*/

.f-span span{
    font-size:13px;
    font-weight:normal;
    }

.icon-title {
    position: relative;
    padding-left:50px;
    box-sizing: border-box;
    line-height: 1.45;
    }
    .icon-title:before {
        content:"";
        display:block;
        position: absolute;
        left:0;
        bottom:0;
        width:44px;
        height:44px;
        background: url("../images/parts/icon-a.png") center center / cover;
        }
.icon-title-s {
    position: relative;
    padding-left:42px;
    box-sizing: border-box;
    line-height: 1.25;
    }
    .icon-title-s:before {
        content:"";
        display:block;
        position: absolute;
        left:0;
        bottom:0;
        width:35px;
        height:35px;
        background: url("../images/parts/icon-a.png") center center / cover;
        }
.icon-title-center {
    position: relative;
    padding-top:60px;
    box-sizing: border-box;
    line-height: 1.25;
    }
    .icon-title-center:before {
        content:"";
        display:block;
        position: absolute;
        top:0;
        left:50%;
        margin-left:-20px;
        width:40px;
        height:40px;
        background: url("../images/parts/icon-a-c.png") center center / cover;
        }
.nomber-title-wrap {
    padding-left:90px;
    position: relative;
    }
    .nomber-title-wrap:before {
        content: "";
        display: block;
        position: absolute;
        left:0;
        bottom:0;
        width:80px;
        height:54px;
        }
        .nomber-title-wrap.no1:before { background: url("../images/img/concept/no1.png") center center / cover; }
        .nomber-title-wrap.no2:before { background: url("../images/img/concept/no2.png") center center / cover; }
        .nomber-title-wrap.no3:before { background: url("../images/img/concept/no3.png") center center / cover; }
        
        
    @media screen and (max-width: 1087px) {
    .f-span span{ font-size:11px; }
    .icon-title { padding-left:40px; }
    .icon-title:before { width:32px; height:32px; }
    .icon-title-s { padding-left:32px; }
    .icon-title-s:before { width:28px; height:28px; }
    .icon-title-center { padding-top:45px; }
    .icon-title-center:before { width:32px; height:32px; margin-left:-16px; }
    .nomber-title-wrap { padding-left:63px; }
    .nomber-title-wrap:before { width:56px; height:38px; }
    }
    @media screen and (max-width: 767px) {
    .f-span span{ font-size:10px; }
    .icon-title { padding-left:30px; }
    .icon-title:before { width:24px; height:24px; }
    .icon-title-s { padding-left:26px; }
    .icon-title-s:before { width:24px; height:24px; }
    .icon-title-center { padding-top:35px; }
    .icon-title-center:before { width:24px; height:24px; margin-left:-12px; }
    .nomber-title-wrap { padding-left:45px; }
    .nomber-title-wrap:before { width:40px; height:27px; }
    }
    
/*==================================================================================================

       トップページ

===================================================================================================*/

.hero-wrap {
    position: relative;
    background: url("../images/parts/black.jpg") center center repeat;
    width:100%;
    padding-bottom:48.8888889%;
    box-sizing:border-box;
    overflow: hidden;
    z-index: 10;
    }
    .hero-wrap:after {
        content: "";
        display:block;
        position: absolute;
        left:0;
        top:0;
        width:16.5%;
        height: 100%;
        background: url("../images/parts/gray.jpg") center center repeat;
        z-index: 11;
        }
        .hero-wrap:before {
        content: "";
        display:block;
        position: absolute;
        top:0;
        left:0;
        width:40px;
        padding-bottom:640px;
        background: url("../images/img/top/hero-text.png") center center / cover;
        z-index: 15;
        }
    .slider-wrap {
        position: absolute;
        top:3.5%;
        left:5.5%;
        width:92.75%;
        overflow: hidden;
        z-index: 20;
        }
    .slide-title {
        position: absolute;
        width:150px;
        top:50%;
        left:50%;
        margin-top:-165px;
        margin-left:-75px;
        z-index: 30;
        }
        @media screen and (max-width: 1240px) {
        .hero-wrap:before { width:32px; padding-bottom:512px; }
        .slide-title { width:120px; margin-top:-132px; margin-left:-60px; }
        }
        @media screen and (max-width: 1087px) {
        .hero-wrap:before { width:24px; padding-bottom:384px; }
        .hero-wrap:after { width:10%; }
        .slider-wrap { left:3.625%; }
        .slide-title { width:100px; margin-top:-110px; margin-left:-50px; }
        }
        @media screen and (max-width: 767px) {
        .hero-wrap:before { width:16px; padding-bottom:256px; }
        .slide-title { width:60px; margin-top:-66px; margin-left:-30px; }
        }
        @media screen and (max-width: 580px) {
        .hero-wrap:before { width:12px; padding-bottom:192px; }
        }

/*==================================================================================================
       ATT
===================================================================================================*/

.att-bg {
    position: relative;
    z-index: 1;
    }
    .att-bg:before {
        content: "";
        display: block;
        position: absolute;
        top:40px;
        left:-3.5%;
        width:107%;
        height: 100%;
        background: url("../images/parts/gray.jpg") center center repeat;
        z-index: -1;
        }
.att-img {
    position: relative;
    width:96.4%;
    padding-bottom:650px;
    z-index: 10;
    }
    .att-img.left { margin-right:3.6%; }
    .att-img.right { margin-left:3.6%; }
    
    .att_01 { background: url("../images/img/top/img_01.jpg") center center / cover; }
    .att_02 { background: url("../images/img/top/img_02.jpg") center center / cover; }
    .att_03 { background: url("../images/img/top/img_03.jpg") center center / cover; }

    .att-text {
        position: absolute;
        top:50%;
        margin-top:-205px;
        padding:65px 70px 80px;
        width:600px;
        background: url("../images/parts/white.png") center center repeat;
        box-sizing: border-box;
        z-index: 30;
        }
        .att-text.right { right:0; }
        .att-text.left { left:0; }
        
        .att-inner { position: relative; }
        .att-more { position: absolute; bottom:-120px; z-index: 40;}

    @media screen and (max-width: 1350px) {
    .att-img { padding-bottom:550px; }
    .att-text { width:500px; padding:50px 50px 80px; }
    }
    @media screen and (max-width: 1087px) {
    .att-bg:before { top:25px; }
    .att-img { width:100%; padding-bottom:48%; }
    .att-img.left { margin-right:0; }
    .att-img.right { margin-left:0; }
    .att-text { position: relative; top:auto; margin:-5% auto 0; width:93.5%; height: auto; padding:35px 35px 60px;}
    .att-text.right { right:auto; }
    .att-text.left { left:auto; }
    .att-more { bottom:-90px;}
    }
    @media screen and (max-width: 767px) {
    .att-bg:before { top:15px; }
    .att-text { padding:25px 25px 50px;}
    .att-more { bottom:-80px;}
    }

/*==================================================================================================
       カスタマー 一覧
===================================================================================================*/

.customer-icon {
    width:100%;
    font-size:1.1275rem;
    line-height: 46px;
    text-align: center;
    position: relative;
    background:#253149;
    color:#FFF;
    }
    .customer-icon:after {
        content: "";
        display: block;
        position: absolute;
        left:4px;
        top:7px;
        width:32px;
        height:32px;
        background: url("../images/parts/icon_b.png") center center / cover;
        }
    @media screen and (max-width: 1087px) {
    .customer-icon { line-height: 38px; font-size:.9275rem;}
    .customer-icon:after { left:4px; top:5px; width:28px; height:28px; }
    }
    @media screen and (max-width: 767px) {
    .customer-icon { line-height: 32px; font-size:.9275rem;}
    .customer-icon:after { left:4px; top:4px; width:24px; height:24px; }
    }

/*==================================================================================================
       BLOG一覧
===================================================================================================*/

.blog-list {}
    .blog-list h3 {
        padding-top:.75rem;
        padding-bottom:.75rem;
        line-height: 150%;
        font-size:16px;
        font-weight:normal;
        }
        .date-wrap {
            padding-bottom:3rem;
            }
            .list-cat {
            width:50%;
            float:left;
            font-size:12px;
            line-height: 1;
            letter-spacing:0;
            }
            .list-date {
            width:50%;
            float:right;
            font-size:12px;
            line-height: 1;
            letter-spacing:0;
            text-align: right;
            }

        @media screen and (max-width: 1087px) {
            .blog-list h3 { font-size:13px; padding-top:1rem; padding-bottom:.75rem; }
            .date-wrap { padding-bottom:2.5rem; }
            .list-cat { font-size:11px; }
            .list-date { font-size:11px; }
        }
        @media only screen and (max-width: 767px) {
            .blog-list h3 { font-size:12px; padding-top:1rem; padding-bottom:.75rem; }
            .date-wrap { padding-bottom:1.75rem; }
            .list-cat { font-size:10px; }
            .list-date { font-size:10px; }
        }

/*==================================================================================================
       Works 一覧
===================================================================================================*/

.works-list h3 {
        line-height: 150%;
        font-size:16px;
        font-weight:normal;
        position: relative;
        z-index: 5;
        }
    .works-list-title {
        margin-top:1px;
        padding:15px;
        box-sizing: border-box;
        background: #EBEDE8;
        position: relative;
        }
        .works-list-title:after {
            content:"";
            display: block;
            position: absolute;
            right:5px;
            bottom:5px;
            width:40px;
            height:40px;
            background: url("../images/parts/icon-c.png") right bottom / cover;
            z-index: 1;
            }
        @media screen and (max-width: 1087px) {
            .works-list h3 { font-size:13px; }
            .works-list-title { padding:10px 12px; }
            .works-list-title:after { right:4px; bottom:5px; width:30px; height:30px; }
        }
        @media only screen and (max-width: 767px) {
            .works-list h3 { font-size:12px; }
            .works-list-title { padding:8px 10px; }
            .works-list-title:after { right:4px; bottom:4px; width:26px; height:26px; }
        }

/*==================================================================================================
       Call to action
===================================================================================================*/

.cta-wrap {
    position: relative;
    background: #F1F2EF;
    padding:8rem 0 10rem;
    z-index: 1;
    }
    .cta-wrap:after {
        content: "";
        display:block;
        position: absolute;
        bottom:0;
        left:50%;
        margin-left:-330px;
        width:660px;
        height:120px;
        background: url("../images/img/top/illust_01.png") center bottom / cover;
        }
        .cta-wrap a {
        color:#FFF;
        }
        .cta-border {
        border-right:1px solid #999;
        }
    
        @media screen and (max-width: 1087px) {
            .cta-wrap { padding:5rem 0 10rem; }
        }
        @media only screen and (max-width: 767px) {
            .cta-wrap { padding:4rem 0 7rem; }
            .cta-wrap:after { margin-left:-148px; width:297px; height:54px; }
        }










/*==================================================================================================

       下層ページ 共通

===================================================================================================*/

.hero-wrap.page-hero {
    padding-bottom:510px;
    }
    .page-header-wrap {
        position: absolute;
        top:30px;
        left:0;
        width:100%;
        height:450px;
        padding-left:430px;
        padding-right:30px;
        box-sizing: border-box;
        z-index: 20;
        }
        .page-header {
            position: relative;
            width:100%;
            height:100%;
            z-index: 20;
            }
            .page-header:after {
            content:"";
            display:block;
            position: absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            background: rgba(0,0,0,.15);
            z-index: 21;
            }
            .concept { background: url("../images/img/concept/header.jpg") center center / cover; }
            .about   { background: url("../images/img/about/header.jpg") center center / cover; }
            .works   { background: url("../images/img/works/header.jpg") center center / cover; }
            .blog    { background: url("../images/img/blog/header.jpg") center center / cover; }
            .voice   { background: url("../images/img/voice/header.jpg") center center / cover; }
            .contact { background: url("../images/img/contact/header.jpg") center center / cover; }
            
            
    .page-title {
        position: absolute;
        bottom:30px;
        left:30px;
        color:#FFF;
        z-index: 30;
        }
        .page-title h1 { font-size:45px; font-weight:200; padding-bottom:10px; }
        .page-title p { font-size:18px; font-weight:200; }
        @media screen and (max-width: 1240px) {
        .hero-wrap.page-hero { padding-bottom:470px; }
        .page-header-wrap { padding-left:380px; height:410px; }
        .page-title { bottom:20px; left:20px; }
        .page-title h1 { font-size:33px; }
        .page-title p { font-size:15px; }
        }
        @media screen and (max-width: 1087px) {
        .hero-wrap.page-hero { padding-bottom:390px; }
        .page-header-wrap { top:20px; padding-left:20px; padding-right:20px; height:350px; }
        .page-title h1 { font-size:30px; }
        }
        @media screen and (max-width: 767px) {
        .hero-wrap.page-hero { padding-bottom:272px; }
        .page-header-wrap { top:16px; padding-left:16px; padding-right:16px; height:240px; }
        .page-title { bottom:18px; }
        .page-title h1 { font-size:24px; padding-bottom:5px;}
        .page-title p { font-size:13px; }
        }
        @media screen and (max-width: 480px) {
        .hero-wrap.page-hero { padding-bottom:204px; }
        .page-header-wrap { top:12px; padding-left:12px; padding-right:12px; height:180px; }
        .page-title { bottom:10px; }
        .page-title h1 { font-size:21px;  }
        .page-title p { font-size:10px; }
        }

.table {
    width:100%;
    line-height: 200%;
    box-sizing:border-box;
    border-collapse: collapse;
    border-spacing: 0;
    border-top:1px solid #999;
    }
    .table tr {
        border-bottom:1px solid #999
        }
    .table th {
        vertical-align:middle;
        text-align: left;
        padding:10px 1em;
        font-weight:400;
        }
    .table td {
        text-align: left;
        vertical-align:middle;
        padding:10px 1em;
        }

    @media screen and (max-width: 767px) {
        .table    { border:none; }
        .table tr { border-bottom:none; }
        .table th { width:100% !important; background: rgba(0,0,0,.08); display: block !important; padding:.25em 1em; box-sizing: border-box; border-right:none; text-align: left;}
        .table td { width:100% !important; display: block !important; padding:.25em 1em 1.25em; box-sizing: border-box;}
    }


.nomber-list {
    margin-left:2rem;
    }
    .nomber-list li {
        list-style: decimal;
        }

.map {
    position: relative;
    padding-bottom: 45%;
    margin-bottom:1em;
    height: 0;
    border: 1px solid #BEBEBE;
    background:#F9F9F9;
    overflow: hidden;
    }
    .map iframe,
    .map object,
    .map embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    @media screen and (max-width: 767px) {
        .map { padding-bottom: 90%;
        height: 0;
        border: 5px solid #999;
        overflow: hidden;
        }
    }





/*==================================================================================================

        CONCEPT

===================================================================================================*/

.concept-bg {
    position: relative;
    width:100%;
    height:100%;
    }
    .concept-bg.concept_04 { min-height:480px; }
    .concept_01 { background: url("../images/img/concept/img_01.jpg") center center / cover; }
    .concept_02 { background: url("../images/img/concept/img_02.jpg") left top / cover; }
    .concept_03 { background: url("../images/img/concept/img_03.jpg") left center / cover; }
    .concept_04 { background: url("../images/img/concept/img_04.jpg") left center / cover; }

    .concept-section {
        position: relative;
        margin-top:3rem;
        margin-bottom:9rem;
        z-index: 10;
        }
        .concept-section.last { margin-bottom:3rem; }
        .concept-section:before {
            content: "";
            display: block;
            position: absolute;
            top:-8%;
            width:97.5%;
            height:116%;
            background: #F6F7F4;
            z-index: -1;
            }
            .concept-section.left:before { left:0; }
            .concept-section.right:before { right:0; }

        @media screen and (max-width: 1087px) {
        .concept-bg { height:0; padding-bottom:50%; }
        .concept-bg.concept_04 { min-height:0; }
        .concept-section { margin-bottom:4rem; }
        .concept-section:before { top:5%; width:108%; height:95%; }
        .concept-section.left:before { left:-4%; }
        .concept-section.right:before { left:-4%; }
        }

.check-list {}
    .check-list li {
        font-size:27px;
        line-height: 180%;
        text-align: center;
        }
        .check-list li span {
            display: inline-block;
            width:24px;
            height:15px;
            margin-right:.5rem;
            background: url("../images/parts/check.svg") center center / cover;
            }
        @media screen and (max-width: 1087px) {
        .check-list li { font-size:19px; }
        .check-list li span { width:19px; height:12px; }
        }
        @media screen and (max-width: 767px) {
        .check-list li { font-size:15px; }
        .check-list li span { width:15px; height:9px; }
        }

/*==================================================================================================

       WORKS / blogs

===================================================================================================*/

.works-image-wrap {
    padding-bottom:6rem;
    }
    .works-image-wrap img {
    padding-bottom:2.5rem;
    }
    .post-head {
        padding-bottom:2rem;
        }
        .post-head h1 { color:#1B2752; padding-bottom:.25rem; border-bottom:3px solid #1B2752; margin-bottom:1rem }
        .post-head p { text-align: right; font-size:12px; }
    .post-contents {
        padding-bottom:4rem;
        }
        .post-contents p { padding:0 0 2.5rem; margin:0 auto; }
        .post-contents img { padding-bottom:2.5rem; }
        .post-contents p img { padding-bottom:2.5rem; text-align: center; }
        .post-contents h1 { font-size:24px; font-weight:700; line-height:150%; padding:2.5rem 0 2.5rem; margin:0 auto; color:#1B2752; }
        .post-contents h2 { font-size:21px; font-weight:700; line-height:150%; padding:2.5rem 0 2.5rem; margin:0 auto; color:#1B2752; }
        .post-contents h3 { font-size:18px; font-weight:700; line-height:150%; padding:2.5rem 0 2.5rem; margin:0 auto; color:#1B2752; }
        .post-contents h4 { font-size:17px; font-weight:700; line-height:150%; padding:2.5rem 0 2.5rem; margin:0 auto; color:#1B2752; }
        .post-contents a { font-weight:600; color:#000; border-bottom: 1px solid #999; display: inline-block; }
        .post-contents a:hover { color:#AAA; border-bottom:1px dotted #999; }

        @media only screen and (max-width: 1087px) {
            .post-contents h1,.post-contents h2,.post-contents h3,.post-contents h4,.post-contents h5 { padding:2rem 0; }
            .post-contents h1 { font-size:18px;}
            .post-contents h2 { font-size:17px;}
            .post-contents h3 { font-size:15px;}
            .post-contents h4 { font-size:14px;}
            .post-contents h5 { font-size:13px;}
        }
        @media only screen and (max-width: 767px) {
            .post-contents h1,.post-contents h2,.post-contents h3,.post-contents h4,.post-contents h5 { line-height:160%; padding:1.75rem 0; }
            .post-contents h1 { font-size:16px;}
            .post-contents h2 { font-size:14px;}
            .post-contents h3 { font-size:13px;}
            .post-contents h4 { font-size:12px;}
           .post-contents  h5 { font-size:12px;}
        }

    .post-foot {
        padding-bottom:2rem;
        }
        .post-cat {
            padding-bottom:.25rem;
            border-bottom:3px solid #353535;
            margin-bottom:1rem;
            }
    .youtube {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        overflow: hidden;
        }
        .youtube iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        }
@media screen and (max-width: 1087px) {
    .works-image-wrap { padding-bottom:5rem; }
    .works-image-wrap img { padding-bottom:2rem; }
    .post-contents { padding-bottom:3rem; }
    .blog-contents { padding-bottom:3rem; }
}
@media only screen and (max-width: 767px) {
    .works-image-wrap { padding-bottom:4rem; }
    .works-image-wrap img { padding-bottom:1rem; }
    .post-contents img { padding-bottom:2rem; }
    .post-contents p { padding:0 0 2rem; }
    .post-contents h2 { padding:2rem 0 2rem; }
    .post-contents h3 { padding:2rem 0 2rem; }
    .post-contents h4 { padding:2rem 0 2rem; }
}

/*==================================================
    カテゴリ　ドロワーメニュー
 ================================================== */

.cat-overlay,.arc-overlay {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255, 0.9);
    position:fixed;
    top: 0;
    left: 0;
    z-index: -10;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
    }
    .cat-overlay.open,.arc-overlay.open  {
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 10001;
    cursor: pointer;
    }
.cat-trigger,.arc-trigger {
    z-index:10100;
    }
.cat-modal,.arc-modal {
    width: 250px;
    height: 100%;
    padding-top: 50px;
    background-color: rgb(230, 230, 230, 0.95);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10010;
    transform: translate(250px);
    transition: all .4s;
    overflow-y: scroll;
    }
    .cat-modal.open,.arc-modal.open {
        transform: translateZ(0);
        }
        .cat-outer {
            padding:0 10px 120px;
            }
            .cat-outer ul {
            border-top:1px dotted #999;
            }
            .cat-outer li {
            width:100%;
            position:relative;
            text-align: center;
            border-bottom:1px dotted #999;
            }
            .cat-outer li a {
            position: relative;
            display: block;
            width:100%;
            padding:10px 5px;
            text-align: left;
            font-size:14px;
            letter-spacing: 0;
            line-height: 120%;
            box-sizing: border-box;
            }
            .cat-outer li a span {
                position: relative;
                display:inline-block;
                width:auto;
                }
            .cat-outer li a span:after {
                content:"";
                display:block;
                position: absolute;
                height:1px;
                width:0;
                bottom:-3px;
                left:0;
                background: #999;
                -webkit-transition: all 0.3s ease;
                   -moz-transition: all 0.3s ease;
                     -o-transition: all 0.3s ease;
                        transition: all 0.3s ease;
                }
            .cat-outer li a:hover span:after {
                width:100%;
                }
            .cat-outer ul ul {
                border-top:1px dotted #999;
                padding:3px 0 3px 1rem;
                }
                .cat-outer ul ul li {
                position: relative;
                border-bottom: none;
                }
                .cat-outer ul ul li:before {
                    content:"-";
                    display:inline-block;
                    width:5%;
                    }
                    .cat-outer ul ul li a {
                    display: inline-block;
                    width:95%;
                    }
    .cat-close,.arc-close {
        position:absolute;
        right:0;
        top:0;
        padding:0;
        width:100%;
        height:50px;
        text-align: center;
        font-size: 0px;
        letter-spacing: 0;
        box-sizing: border-box;
        pointer-events: auto;
        cursor:pointer;
        z-index:999999;
        }
        .cat-close span,.arc-close span { display: block; position: absolute; height: 1px; width:25px; background: #1F1F1F; -moz-border-radius:2px; -webkit-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px;
        left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
        .cat-close span:nth-child(1),.arc-close span:nth-child(1) { top: 18px; left:15px; -webkit-transform: rotate(315deg);-moz-transform: rotate(315deg);transform: rotate(315deg);}
        .cat-close span:nth-child(2),.arc-close span:nth-child(2) { top: 18px; left:15px; -webkit-transform: rotate(-315deg);-moz-transform: rotate(-315deg);transform: rotate(-315deg);}

/*==================================================================================================

       お問い合わせ / プライバシーポリシー

===================================================================================================*/

.kome { color:#990033; font-size:14px; font-weight: 600; }
.link { border-bottom:1px solid #666;}
    .link:hover { border-bottom:1px dotted #666;}

.form {
	width:100%;
    line-height: 200%;
    box-sizing:border-box;
    border-collapse: collapse;
    border-spacing: 0;
    border-top:1px solid #AAA;
	}
    .form tr {
        border-bottom:1px solid #AAA;
        }
    .form th {
        vertical-align: top;
        text-align: left;
        padding:10px 1em;
        font-weight:400;
        width:11em;
        }
    .form td {
        text-align: left;
        vertical-align: top;
        padding:10px 1em;
        }
    .form input {
        background:#F1F1F1;
        border:1px solid #DDD;
        padding:0.5em 2.5%;
        box-sizing: border-box;
        }
    .form .wpcf7-list-item {
        padding-right:2em;
        }
    .form textarea {
        background:#F1F1F1;
        border:1px solid #DDD;
        padding:0.5em 2.5%;
        box-sizing:border-box;
        }
    .form_btn {
        text-align:center;
        margin:30px auto 60px;
        width:180px;
        }
    html>/**/body #submit_button {
        cursor: pointer;
        display: block;
        color:#FFF;
        width: 180px;
        height: 48px;
        font-size:1rem;
        font-family: 'Noto Serif JP', serif;
        border: none;
        border-radius: 4px;
        background-color: #1C2852;
        -webkit-transition  : all .3s ease;
            -moz-transition : all .3s ease;
            -ms-transition  : all .3s ease;
                transition  : all .3s ease;
        }
    html>/**/body #submit_button:hover {
        background-color: #666;
        }
@media only screen and (max-width: 767px) {
    .form    { border-top:none; }
    .form tr { border-bottom:none; }
    .form th { width:100% !important; background: rgba(0,0,0,.08); display: block !important; padding:.25em 1em; box-sizing: border-box; border-right:none;}
    .form td { width:100% !important; display: block !important; padding:.625em 2% 1.25em; box-sizing: border-box;}
    .form input { width:100%; background: #FFF; }
    .form textarea { width:100%; background: #FFF; }
    .radio-input input { width:auto; margin:inherit; }
	}

.privacy-section {
    padding:3rem 0;
    border-bottom:1px dotted #999;
    font-size:.9275rem;
    }
    .privacy-section.last {
    border-bottom:none;
    }

/*==================================================================================================

       BLOG

===================================================================================================*/

.sns-share { position:relative; }
    .sns-share a {
        position: relative;
        display:inline-block;
        width:46px;
        margin-right:1px;
        }
    @media only screen and (max-width: 767px) {
        .sns-share a { width:38px; }
    }

/* =====================================
        一覧ページ ページャー
===================================== */

    .pagination_wrapper {
        position: relative;
        clear: both;
        width:100%;
        height:60px;
        }
        .pagination_wrapper ul {
        position: relative;
        text-align: center;
        list-style: none;
        }
        .pagination_wrapper li {
        position: relative;
        margin-right: .357143rem;
        margin-bottom:3px;
        display:inline-block;
        }
        .pagination_wrapper li a {
        display: block;
        color: #1f1f1f;
        padding: 12px 0;
        font-size:12px;
        font-weight:700;
        line-height:1;
        text-align: center;
        width:40px;
        background-color: #FFF;
        border: 1px solid #E6E6E6;
        }
        .pagination_wrapper li a:hover {
        background-color:#C3C3C3;
        border: 1px solid #C3C3C3;
        }
        .pagination_wrapper li .current {
        display: block;
        color: #1f1f1f;
        padding: 12px 0;
        font-size:12px;
        line-height:1;
        text-align: center;
        width:40px;
        background-color: #E6E6E6;
        border: 1px solid #E6E6E6;
        text-decoration: none;
        }

 
/* =====================================
        投稿　ページャー
===================================== */

    .post-pager {
        padding:2em 0 1.5em;
        }
        .prev-pager,
        .next-pager,
        .all-pager {
        height:100%;
        line-height:135%;
        position: relative;
        }
        .prev-pager a {
            position: relative;
            display: block;
            width:100%;
            padding:1em 0;
            box-sizing:border-box;
            color:#1F1F1F;
            border: 1px solid #999;
            text-align: center;
            -webkit-transition: all 0.3s ease;
               -moz-transition: all 0.3s ease;
                 -o-transition: all 0.3s ease;
                    transition: all 0.3s ease;
            }
            .prev-pager a:after {
                position: absolute;
                content: "";
                width: 0;
                height: 100%;
                top: 0;
                right: 0;
                z-index: -1;
                -webkit-transition  : all .3s ease;
                    -moz-transition : all .3s ease;
                    -ms-transition  : all .3s ease;
                        transition  : all .3s ease;
                background:#1C2852;
                }
                .prev-pager a:hover:after {
                left: 0;
                width: 100%;
                }
                .prev-pager a:hover {
                color:#FFF;
                }

        .next-pager a {
            display: block;
            width:100%;
            padding:1em 0;
            box-sizing:border-box;
            color:#1F1F1F;
            border: 1px solid #999;
            text-align: center;
            -webkit-transition: all 0.3s ease;
               -moz-transition: all 0.3s ease;
                 -o-transition: all 0.3s ease;
                    transition: all 0.3s ease;
            }
            .next-pager a:after {
                position: absolute;
                content: "";
                width: 0;
                height: 100%;
                top: 0;
                right: 0;
                z-index: -1;
                -webkit-transition  : all .3s ease;
                    -moz-transition : all .3s ease;
                    -ms-transition  : all .3s ease;
                        transition  : all .3s ease;
                background:#1C2852;
                }
                .next-pager a:hover:after {
                left: 0;
                width: 100%;
                }
                .next-pager a:hover {
                color:#FFF;
                }



/*==================================================================================================

       フッター

===================================================================================================*/

footer {
    width:100%;
    background: url("../images/parts/blue.jpg") center center repeat;
    color:#FFF;
    font-size:.9275rem;
    line-height: 180%;
    font-weight:200;
    }
    .footer-logo {
        width:270px;
        padding-bottom:2rem;
        }

.footer-menu {
	width:100%;
	text-align:left;
	}
	.footer-menu li {
        font-size:.94rem;
        padding:.1rem 0;
        line-height: 170%;
        }
    .footer-menu li a {
        color:#FFF;
        font-size:.9275rem;
        position: relative;
        display: inline-block;
        text-decoration: none;
        }
        .footer-menu li a:hover {
        cursor: pointer;
        text-decoration: none;
        }
        .footer-menu li a::after {
        position: absolute;
        bottom: 3px;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background: #FFF;
        transform: scale(0, 1);
        transform-origin: right top;
        transition: transform .3s;
        }
        .footer-menu li a:hover::after {
        transform-origin: left top;
        transform: scale(1, 1);
        }

.copyright {
    position: relative;
    z-index: 100;
    color:#FFF;
	margin-top:-5px;
	line-height:1;
	font-size:10px;
    letter-spacing: .05em;
	}

@media only screen and (max-width: 1087px) {
    .footer-logo { width:180px; padding-bottom:1.5rem; }
}
@media only screen and (max-width: 767px) {
    .footer-logo img { max-width:130px; }
    .footer-menu li { padding: .5rem 0; width: 49%;  border-bottom: 1px solid rgba(255,255,255,.4); float: left; margin-right: 1%;}
}