@charset "utf-8";

/*
基本構造
*--------------------------------------------------------*/

body{
    font-size: 1.6rem;
    line-height: 1.5em;
    font-family: 'Noto Sans Jp', serif;
    color:#000000;
}



.works .lower{
    padding:65px 0 0;
}

.home header{
    border-bottom:0;
}


header{
    border-bottom: 1px solid #EEEEEE;
}


.lower{
    padding:65px 0 0;
}

.company .lower{
    padding:65px 0 0;
}



.conts{
    max-width: 1240px;
    margin:0 auto;
    padding: 0 20px;
}
.wrap{
    max-width: 970px;
    margin: 0 auto;
}





#all-wrap{ margin:0 auto; opacity: 0;}
#all-wrap.active{ opacity: 1;}
#top-main-contents{

}
main{
    display: block;
    margin-top: 80px;
}
img.wide{
    width: 100%;
    max-width: unset;
}

/*aタグ*/
 a {
    color:#000;
    cursor: pointer;
    transition-duration:0.5s ;
    transition-property: opacity ;
    -webkit-transition-property: opacity ;
    transition-timing-function: ease, linear;
}

a.uline{
        color:#D84577;
    text-decoration: underline;
}
a[href^="tel:"] {
    pointer-events: none;
}

a:hover, button:hover{ opacity: 0.6;}

/*見出し初期設定*/
h1,h2,h3,h4,h5,h6{ font-weight: 700; line-height: 1.4em;}

/*画像幅100%*/
img{ max-width: 100%; height: auto;}
img.wide{ width: 100%; height: auto;}

/*背景cover*/
.bgcover{ background-position: center; -webkit-background-size:center; background-size:cover; background-repeat: no-repeat;}

/*画像切り替えなど*/
.sp{ display: none !important; }
.pc{ display:block !important; }

/*フレックスボックス*/
.flex{ display: -ms-flexbox; display: -webkit-flex; display: flex;}
.flex-wrap{ -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.flex.revs{ -webkit-flex-direction: row-reverse; flex-direction:row-reverse;}
.flex.va-cent{ -webkit-align-items: center; align-items:center;}
.flex.jc-cent{ -webkit-justify-content: center; justify-content: center;}
.flex.jc-right{ -webkit-justify-content: flex-end; justify-content: flex-end;}

/*color*/
.red{color:#D84577;}
.blue{color:#0085B2;}



.font-ibm{
    font-family: 'IBM Plex Serif', serif;
}


.bdr{
    border:5px solid #0085B2;
}
.rds{
    -webkit-border-radius: 1em;
    border-radius: 1em;
}


/*ローディング*/
#loader-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 10;
}
#loader {
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 60px;
  left: 0;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  z-index: 100;
}
/*ローダー・サークル*/
.loader1{
  width:45px;
  height:45px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,0.2);
  border-top-color:rgba(0,0,0,0.4);
  box-sizing:border-box;
  display: inline-block;
  animation:loading 0.6s linear infinite;
  -webkit-animation:loading 0.6s linear infinite;
}
    @keyframes loading{
      0%{transform:rotate(0deg)}
      100%{transform:rotate(360deg)}
    }
        @-webkit-keyframes loading{
          0%{-webkit-transform:rotate(0deg)}
          100%{-webkit-transform:rotate(360deg)}
        }

/*header*/
header {
    position: fixed;
    height: 80px;
    top:0;
    left:0;
    width: 100%;
    z-index: 20;
    background:#fff;
}
header .logo{
    padding-left: 20px;
}

header nav{
    margin-left: auto;
}

header nav .menu>li{
    margin: 0 0.5vw;
}

.home header nav .menu>li:nth-child(1) a::after{
    display: block;
}
.service header nav .menu>li:nth-child(2) a::after{
    display: block;
}
.works header nav .menu>li:nth-child(3) a::after{
    display: block;
}
.company header nav .menu>li:nth-child(4) a::after{
    display: block;
}

header nav .menu>li>a {
    position: relative;
    display: block;
    font-weight: bold;
    font-size: 1.5rem;
    background: #fff;
    height: 79px;
    padding: 27px 1.5em 0 1.5em;
}

header nav .menu>li>a:hover{}
header nav .menu>li>a::before{
    content:"";
    display: block;
    position: absolute;
    width: 100%;
    height: 6px;
    bottom:0;
    left:0;
    background: #000;
    transform: rotateY(-90deg);
    -webkit-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
}

header nav .menu>li>a:hover::before{
    transform: rotateY(0);
}


header nav .menu>li>a::after{
    content:"";
    display: none;
    position: absolute;
    width: 100%;
    height: 6px;
    bottom:0;
    left:0;
    background: #000;
}

header .nav-tel{
    width: 220px;
    height: 80px;
    padding-top: 20px;
    text-align: center;
}
header .nav-tel strong {
    font-size: 2.4rem;
    font-weight: 900;
}

header .nav-tel a span{
    display: block;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.4em;
}
header .mail{
    width: 160px;
    padding-top: 18px;
    text-align: center;
    color:#fff;
    background: #000;
    height: 80px;
}
header .mail span{
    color:#fff;
    display: block;
    font-size: 1.1rem;
}

/*footer*/

footer{
    position: relative;
    background: #000;
    color:#fff;
    padding: 34px 0;
    text-align: center;
}
footer .menu{
    margin-bottom: 50px;
}
footer .menu>li>a{
    color:#fff;
}
footer .menu>li{
    margin: 0 20px;
}

footer .logo{
    text-align: center;
    font-size: 1.4rem;
    width: 130px;
    margin: 0 auto;
}
footer .logo span{
    color:#fff;
    margin: 14px 0 10px;
    display: block;
}
footer address{
    font-size: 1.2rem;
    margin-bottom: 20px;
}

footer .copyright{
    font-size: 1.2rem;
}


/*ページ遷移ボタン*/
#pagetop{
    position: fixed;
    right: 0px;
    bottom: 0px;
    -webkit-transition: opacity .5s ease;
       -moz-transition: opacity .5s ease;
        -ms-transition: opacity .5s ease;
         -o-transition: opacity .5s ease;
            transition: opacity .5s ease;
    width: 70px;
    height: 70px;
    overflow: hidden;
    z-index: 99;
}

    #pagetop>span{
        position: absolute;
        left: 0px;
        top: 0px;
        display: block;
        width: 70px;
        height: 70px;
        text-align: center;
        -webkit-transition: all .2s ease;
           -moz-transition: all .2s ease;
            -ms-transition: all .2s ease;
             -o-transition: all .2s ease;
                transition: all .2s ease;
        opacity: 0;

    }

    #pagetop.open>span{
        top: 0px;
        opacity: 1;
    }
        #pagetop>span>span,
        #pagetop>span>a{
            position: relative;
            display: block;
            background: #000;
            width: 70px;
            height: 70px;
            cursor: pointer;
            -webkit-transition: all .4s ease;
               -moz-transition: all .4s ease;
                -ms-transition: all .4s ease;
                 -o-transition: all .4s ease;
                    transition: all .4s ease;
            opacity: 1;
        }
            #pagetop>span>a::after{
                content: "";
                position: absolute;
                left: 50%;
                top: 41%;
                width: 15px;
                height: 15px;
                border-top: 3px solid #fff;
                border-left: 3px solid #fff;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }







/*--------------
animation
---------------*/

/*delay*/
.dt_2{ transition-delay: 0.2s !important; -webkit-transition-delay: 0.2s !important;}
.dt_3{ transition-delay: 0.3s !important; -webkit-transition-delay: 0.3s !important;}
.dt_5{ transition-delay: 0.5s !important; -webkit-transition-delay: 0.5s !important;}
.dt_6{ transition-delay: 0.6s !important; -webkit-transition-delay: 0.6s !important;}
.dt_7{ transition-delay: 0.7s !important; -webkit-transition-delay: 0.7s !important;}
.dt_8{ transition-delay: 0.8s !important; -webkit-transition-delay: 0.8s !important;}
.dt_9{ transition-delay: 0.9s !important; -webkit-transition-delay: 0.9s !important;}
.dt_10{ transition-delay: 1.0s !important; -webkit-transition-delay: 1.0s !important;}
.dt_12{ transition-delay: 1.2s !important; -webkit-transition-delay: 1.2s !important;}
.dt_15{ transition-delay: 1.5s !important; -webkit-transition-delay: 1.5s !important;}
.dt_18{ transition-delay: 1.8s !important; -webkit-transition-delay: 1.8s !important;}

/*from*/
.init{
	opacity: 0;
}

/*to*/
.scl.animated .init{
	opacity: 1;
	-webkit-transform: translate(0,0) scale(1,1) rotate(0);
	transform: translate(0,0) scale(1,1) rotate(0);
    transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    transition-property: opacity transform;
    -webkit-transition-property: opacity transform;
    transition-timing-function: ease, linear;
}


/*
パーツ
*--------------------------------------------------------*/

.headline-l{
    text-align: center;
    margin-bottom: 50px;
}
.headline-l>strong{
    display: block;
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 1.5em;
    letter-spacing: 0.1em;
}
.headline-l>span{ font-size: 1.5rem; font-weight: normal;}

.headline-m{
    font-size: 2.6rem;
    text-align: center;
}

.link-btn{
    position: relative;
    display: block;
    margin:0 auto;
    max-width: 394px;
    padding: 1.2em;
    font-size: 1.6rem;
    text-align: center;
    color:#fff;
    background:#000;
}

.link-btn::after{
        content:"";
        position: absolute;
        top:50%;
        right:20px;
        width: 10px;
        height: 10px;
        border-right:2px solid #fff;
        border-bottom:2px solid #fff;
        -webkit-transform: translate(0,-50%) rotate(-45deg) scale(1,1);
        transform: translate(0,-50%) rotate(-45deg) scale(1,1);

}

/*
.data-tbl{}
.data-tbl>table{
    width: 100%;
    border:1px solid #CCCCCC;
}
.data-tbl>table>tbody{}
.data-tbl>table>tbody>tr{
    border-bottom:1px solid #CCCCCC;
}
.data-tbl>table>tbody>tr>th{
    padding: 0.6em 2em;
    background: #EEE;
    text-align: left;
}
.data-tbl>table>tbody>tr>td{
    padding: 0.6em 2em;
    background: #fff;
}
*/

/*ページャー*/
.pager{
    text-align: center;
    letter-spacing: -0.5em;
    padding: 30px 0;
}
    .pager li{
        display: inline-block;
        margin: 0px;
        font-weight: normal;
        height: 38px;
        line-height: 38px;
        width: 38px;
        text-align: center;
        letter-spacing: normal;
        vertical-align: middle;
        font-weight: bold;
        margin: 0 3px;
    }
    .pager li:first-child{border-right:none;}
    .pager li:last-child{border-right:none;}
    .pager li:nth-last-child(2){border-right: #152A87;}
    .pager .first{}
    .pager .prev{margin-right: 10px;}
    .pager .next{margin-left: 10px;}
    .pager .last{}

        .pager span {
            display: block;
            background: #000000;
            color: #fff;
            font-weight: bold;
            font-size: 1.8rem;
        }
        .pager a{
            display: block;
            width: 100%;
            color:#000;
            height: 38px;
            line-height: 38px;
            background: #EEEEEE;
            font-size: 1.8rem;
            -webkit-transition: opacity 0.3s ease;
            -moz-transition: opacity 0.3s ease;
            -ms-transition: opacity 0.3s ease;
            -o-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
        }
        .pager a:hover{
            opacity: 0.6;
        }




        .pager .first a,.pager .first span,
        .pager .prev a,.pager .prev span,
        .pager .next a,.pager .next span,
        .pager .last a,.pager .last span{
            position: relative;
            background: transparent !important;
            text-indent: 200%;
            white-space: nowrap;
            overflow: hidden;
        }

        .pager .prev a,
        .pager .next a{
            position: relative;
        }

        .pager .prev a{
        }

        .artists .pager a{
            background: #EEEEEE;
        }

    .pager .prev a::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 12px;
        margin-top: -7px;
        width: 11px;
        height: 11px;
        border-left: 2px solid #000;
        border-bottom: 2px solid #000;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
            .pager .next a::after{
                content: "";
                position: absolute;
                top: 50%;
                right: 12px;
                margin-top: -7px;
                width: 11px;
                height: 11px;
                border-top: 2px solid #000;
                border-right: 2px solid #000;
                -webkit-transform: rotate(45deg);
                   -moz-transform: rotate(45deg);
                    -ms-transform: rotate(45deg);
                     -o-transform: rotate(45deg);
                        transform: rotate(45deg);
            }





/*
トップページ
---------------------------------*/

/*メインスライダー*/
#top-main-visual {
    position: relative;
    margin-bottom: 50px;
}

#top-main-visual .txt-layer{
    position: absolute;
    width:100%;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align:center;
    z-index: 2;
}
#top-main-visual .txt-layer .inr{
    max-width: 400px;
    color:#fff;
    display: inline-block;
}
#top-main-visual .txt-layer .inr .catch{
    font-size: 3.3rem;
    border:5px solid #fff;
    padding: 15px;
    margin-bottom: 10px;
}
#top-main-visual .txt-layer .inr .catch>i{
    margin-left:0.8em;
}

#top-main-visual .txt-layer .inr p{
    font-size: 1.8rem;
}

.main-slider{
    padding-bottom: 0px;
}
/*.main-slider.on{
    opacity: 1;
    -webkit-transition: opacity 0.8s  ease-out 0.5s;
    transition: opacity 0.8s  ease-out 0.5s;
}
*/
.main-slider .swiper-slide {
    -webkit-transition: transform 0.4s  ease-out;
    transition: transform 0.4s  ease-out;
    width: 800px;
}

.main-slider .swiper-slide img{
    width: 100%;
}

#top-main-visual .swiper-pagination {
    padding: 20px 0;
    width: 100%;
    opacity: 0;
}
#top-main-visual.active .swiper-pagination {
    opacity: 1;
    -webkit-transition: opacity 0.8s  ease-out 0.5s;
    transition: opacity 0.8s  ease-out 0.5s;
}

#top-main-visual .swiper-pagination-bullet {
    width: 17px;
    height: 17px;
    display: inline-block;
    border-radius: 100%;
    background: #BBBBBB;
    opacity: 1;
    margin: 0 7px;
}

#top-main-visual .swiper-pagination-bullet:focus{
    outline: none;
}



#top-main-visual .swiper-pagination-bullet-active {
    background: #000;
    opacity: 1;
}


/* .top-message */
.top-message{
    padding-top: 55px;
}

.top-message .block {
    margin-top: 60px;
}

.top-message .block .img-box{
    width: 50%;
    height: 533px;
    background-size: 100% center !important;
}
.top-message .block .txt-box{
    width: 50%;
    padding-left: 5%;
    padding-right: 20px;
}
.top-message .block .txt-box .inr{
    max-width: 650px;
    padding-top: 100px;
}
.top-message .block .txt-box .inr .ttl{
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 1.5em;
}
.top-message .block .txt-box .inr .txt-group{

}
.top-message .block .txt-box .inr .txt-group p{
    padding-bottom: 1.5em;
}

/*top-works*/
.top-works{
    padding: 90px 20px;
}

.top-works .headline-l{
    margin-bottom: 50px;
}



.data-block{
    max-width: 1180px;
    margin:0 auto;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.data-block a{
    width:32.2%;
    display: block;
    margin-right: 1.6%;
    margin-bottom: 30px;
}
.data-block a article>.pic img{
    width: 100%;
}
.data-block a article .txt{
    padding: 0 5px;
}

    .data-block a article .info {
        margin: 10px 0 6px;
    }
        .data-block a article .info>time{
            font-size: 1.2rem;
            color:#999999;
            margin-right: 10px;
            display: inline-block;
        }
            .data-block a article .info>i{
                border:1px solid #000;
                padding: 0 10px;
                font-size: 1.2rem;
            }

.data-block a article .ttl{
    font-size: 1.6rem;
    margin-bottom: 0.5em;
}

.data-bck a article .btn{
    text-align: right;
}

.data-block a article dl{
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    font-size: 1.2rem;
}
.data-block a article dl>dd{
    display: inline-block;
    background:#EEEEEE;
    padding-right: 1.5em;
}
.data-block a article dl>dt{
    background:#EEEEEE;
    display: inline-block;
    padding-left: 1.5em;
    white-space: nowrap;
}

.data-block a article p{
    font-size: 1.4rem;
    padding: 0.5em 0.7em;
}

.data-block a article .btn{
    text-align: right;
    font-size: 1.2rem;
    padding-right: 10px;
}


.data-block a:nth-child(3n){
    margin-right: 0;
}


/*top-banner*/
.top-banner{
    margin-bottom: 55px;
}
.top-banner .block{
    max-width: 1042px;
    margin:0 auto;
}
.top-banner .block .box{
    width: 48%;
    margin-right:4%;
}
.top-banner .block .box:nth-child(2n){
    margin-right:0;
}

.top-banner .block .box>figcaption{
    font-size: 1.4rem;
    padding: 0.8em 0.5em;
}


.top-section-nav>.box{
    position: relative;
    width: 50%;
}
.top-section-nav>.box a{
    display: block;
}

.top-section-nav>.box a:hover{
    opacity: 1;
}

.top-section-nav>.box figure{
    overflow:hidden;
}
.top-section-nav>.box a img{
    -webkit-transition: transform 0.2s ease-out;
    transition: transform 0.2s ease-out;

}

.top-section-nav>.box a:hover img{
    -webkit-transform: scale(1.3,1.3);
    transform: scale(1.3,1.3);
}

.top-section-nav>.box a::after{
    content:"";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background:#000;
    opacity: 0.26;
    z-index: 1;
}

.top-section-nav>.box a .ttl{
    position: absolute;
    width:100%;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align:center;
    color:#fff;
    z-index: 2;
}
.top-section-nav>.box a .ttl>strong{
    font-size: 3.2rem;
    line-height: 1.5em;
}
.top-section-nav>.box a .ttl>span{
    font-size: 1.5rem;
    display: block;
    font-weight: normal;
}

.top-contact {
    position: relative;
    height: 500px;
    margin-bottom: -1px;
}

.top-contact::after{
    content:"";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background:#000;
    opacity: 0.26;
    z-index: 1;
}

.top-contact .inr{
    position: absolute;
    width:100%;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align:center;
}

.top-contact .bg{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
}

.top-contact .inr {
    z-index: 2;
}

.top-contact .inr .info{
    max-width: 800px;
    margin:0 auto;
    text-align: center;
}

.top-contact .inr .info p{
    font-size: 1.2rem;
}

.top-contact .inr .info .tel {
    width: 50%;
    background: #fff;
    height: 100px;
    padding-top: 15px;
}

.top-contact .inr .info .info-ttl{
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 0.5em;
}

.top-contact .inr .info .tel .label{
    position: relative;
    display: inline-block;
    font-size: 3rem;
    font-weight: bold;
    padding-left: 40px;

}
.top-contact .inr .info .tel .label>i{
    position: absolute;
    left:0;
    top:-3px;
}

.top-contact .inr .info .mail .label{
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: bold;
    padding-left: 45px;
    color:#fff;
    margin-top: 3px;
    letter-spacing: 0.1em;
}

.top-contact .inr .info .mail .label>i{
    position: absolute;
    left:0;
    top:1px;
}

.top-contact .inr .info  .mail .info-ttl{
    color:#fff;

}

.top-contact .inr .info .mail{
    width: 50%;
    padding-top: 20px;
    background:#000;

}

/*
works
---------------------------------*/
.sort-nav{
    padding:20px;
    margin-bottom: 15px;
}
    .sort-nav>li{
        margin:0 5px;
    }
     .sort-nav>li>a{
        padding:10px;
        font-size: 1.2rem;
     }


.cate-nav{
    padding:20px 45px;
    background:#F6F6F6;
    margin-bottom: 48px;
}
    .cate-nav>li{
        width:19.2%;
        margin-right: 1%;
        margin-top: 5px;
        margin-bottom: 5px;
    }
        .cate-nav>li:nth-child(5n){
            margin-right: 0;
        }
         .cate-nav>li a>div{
            display: -ms-flex;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            height: 47px;
         }

            .cate-nav>li a{
                position: relative;
                background: #fff;
                border:1px solid #DDDDDD;
                display: block;
                text-align: center;
            }

            .cate-nav>li a span{
                display: block;
                line-height: 1em;
                font-size: 1.4rem;
            }
            .cate-nav>li a i{
                margin-top: -8px;
                display: block;
                width: 100%;
                font-size: 1rem;
                line-height: 1em;
            }
.clm-block{
    width: 100%;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}
    .clm-block>article{
        padding-right: 6.5%;
        width: -webkit-calc(100% - 250px);
        width: calc(100% - 250px);
    }
        .clm-block> .aside{
            width: 250px;
        }

.clm-block .aside .cate-nav{
    display: block;
    padding:20px 20px;
    margin-bottom: 30px;
}


.clm-block .aside .cate-nav>li{
    width: 100%;
}

.clm-block .aside .aside-ttl{
    font-size: 1.6rem;
    margin-bottom: 0.5em;
}

.clm-block .aside .data-block a {
    width: 100%;
    display: block;
    padding: 0 0 15px 5px;
    border-bottom: 1px solid #dddddd;
    margin-bottom: 0;
}
.clm-block .aside .cate-nav>li a.active {
    background: #dddddd;
}
.clm-block .aside .data-block a .pic{
    width: 40%;
    padding: 0 7px 0 0;
}
.clm-block .aside .data-block a .txt{
    width: 60%;
    padding: 0;
}

.clm-block .aside .data-block a .ttl{
    font-size: 1.4rem;
    margin-bottom: 0.5em;
}

.clm-block .aside .data-block a article dl>dt {
    background: transparent;
    display: inline;
    padding-left: 0em;
    line-height: 1.2em;
}
.clm-block .aside .data-block a article dl>dd {
    display: inline;
    background: transparent;
    line-height: 1.2em;
    padding-right: 0em;
}

.clm-block .aside .data-block a article .info {
    margin: 10px 0 12px;
}

/*
works 記事詳細
---------------------------------*/
.works .conts{
    padding-bottom: 50px;
}


.article-detail{
    padding-bottom: 100px;
}

.article-detail .info {
    margin: 10px 0 6px;
}
    .article-detail .info>time{
        font-size: 1.2rem;
        color:#999999;
        margin-right: 10px;
        display: inline-block;
    }
        .article-detail .info>i{
            border:1px solid #000;
            padding: 0 10px;
            font-size: 1.2rem;
        }

.article-detail .goods-name{
    margin:0.2em 0 1.2em;
}

.article-detail .main-copy{
    font-size: 1.4rem;
    padding: 20px 15px;
    margin-bottom: 30px;
}

.article-detail .main-info{
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}
.article-detail .main-info>.box{ width: 50%;}
.article-detail .main-info>div.box{ padding: 0px;}
.article-detail .main-info>div:nth-child(1){
    padding-right: 40px;
}

.article-detail .main-info .link-btn{
    border:1px solid #000;
    background:#fff;
    color:#000;
    text-decoration:none;
    padding: 0.4em;
    margin-top: 20px;
    max-width: unset;
}

.article-detail .main-info .link-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    -webkit-transform: translate(0,-50%) rotate(-45deg) scale(0.8,0.8);
    transform: translate(0,-50%) rotate(-45deg) scale(0.8,0.8);
}

/*見出し*/
.article-detail .article-ttl{ font-size:2.8rem; margin-bottom: 0.8em; }
.article-detail .heading-main{font-size:2.8rem; margin-bottom: 0em;}
.article-detail .heading-mm{font-size: 2.4rem; margin-bottom: 0.8em;}
.article-detail .heading-ss{font-size: 2rem; margin-bottom: 0.8em;}

/*ディティールトップ*/
.article-detail .main-info{ display: -ms-flex; display: -webkit-flex; display: flex;
    width: 100%;
    overflow: hidden;
    margin-bottom: 65px;
}

/*画像*/
.article-detail img{ max-width: 100%;}
.article-detail figcaption{ padding:0.3em 0; font-size: 1.2rem; line-height: 1.4em;}
.article-detail .single-img{ margin:0.8em 1em 30px; padding-bottom: 1em;}
.article-detail .single-img figcaption{ display: block; padding:10px 0;}

/*横並び画像設定*/
.article-detail .two-parallel-img,
.article-detail .three-parallel-img{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    -webkit-justify-content: space-between;
    justify-content:         space-between;
    padding-bottom: 2em;
}
    .article-detail .two-parallel-img>figure>img,
    .article-detail .three-parallel-img>figure>img{
        width: 100%;
        max-width: inherit;
    }

/*2列横並び画像*/
.article-detail .two-parallel-img>figure{
    padding: 0 1%;
    width: 50%;
}
    .article-detail .two-parallel-img>figure:nth-child(1){
        margin-right: 0%;
    }

/*3列横並び画像*/
.article-detail .three-parallel-img>figure{
    padding: 0 2%;
    width: 33.33%;
    display: block;
}

/*テキスト*/
.article-detail .block { overflow: hidden; margin-bottom: 2em;}
.article-detail .block .txt { padding: 0 12px;}
.article-detail .all-text{ line-height: 1.4em;}


/*リスト*/
.article-detail ul{ margin: 20px 0 0;}
.article-detail .all-text ul.maru li{ position: relative; padding-left: 1em;}
.article-detail .all-text ul.maru li::after{
    content: "・"; position: absolute; left: 0px; top:0px;}

.article-detail a{text-decoration: underline;}
.article-detail figure.f-right { max-width: 48%; margin: 0 0 0 20px;}
.article-detail figure.f-left  { max-width: 48%; margin: 0 20px 0px 0px;}


/*表組*/
.article-detail .all-text table{ width: 100%;
    margin: 20px 0 0;
}
.article-detail .all-text td,
.article-detail .all-text th{
    padding: 0.5em 1em;
    border-bottom: 1px solid #DDDDDD;
    font-size: 1.6rem;
    vertical-align: top;
}
.article-detail .all-text th {
    background: #F3F3F3;
}

.article-detail .spec{
    margin:60px 0 0;
}
.article-detail .spec .article-ttl{
    margin-bottom: 30px;
}

.data-tbl{ width: 100%; margin: 20px 0 0;}
.data-tbl td,
.data-tbl th{
    padding: 0.5em 1em;
    border-bottom: 1px solid #DDDDDD;
    font-size: 1.6rem;
    vertical-align: top;
}
.data-tbl th {
    width: 10%;
    text-align: left;
    white-space: nowrap;
}

.tbl-sm{ width: 100%;}
.tbl-sm tr{ border-bottom: 1px solid #DDDDDD;}
.tbl-sm tr:last-child{ border-bottom: none;}
.tbl-sm td,
.tbl-sm th{
    padding: 0.8em 1em;
    font-size: 1.6rem;
    vertical-align: top;
}
.tbl-sm th {
    text-align: left;
    width: 10%;
    white-space: nowrap;
}


/*service*/
.inr-block{
    max-width: 880px;
    margin:0 auto;
}
.service .inr-block{
    padding-bottom: 100px;
}


.service-list{
    margin-bottom: 60px;
}
.service-list>li{
    text-align: center;
}
.service-list>li img{}
.service-list>li p {
    padding: 10px 0;
}

.service-list>li{
    margin-right: 2%;
}
.service-list>li:nth-child(3n){
    margin-right: 0;
}

.service-ttl{
    font-size: 2.6rem;
    text-align: center;
    margin-bottom: 1.5em;
}

.oem-list>li{
    position: relative;
    padding-left: 1em;
    font-size: 2rem;
    margin-bottom: 0.5em;
}
.oem-list>li>i{
    position: absolute;
    left:0;
    top:0;
}


/*company*/
.company .inr-block{
    padding-bottom: 100px;
}

.company .headline-l{
    margin-bottom: 70px;
}

.company .data-tbl td,
.company .data-tbl th {
    padding: 0.8em 1emc}
/*company*/
.company .headline-m{
    text-align: center;
    margin-bottom: 25px;
}
.company .data-tbl{
    margin-top:40px;
    margin-bottom:100px;
}

.company address{
    margin-top: 0.5em;
    margin-bottom: 1.5em;
}

.map{
    position: relative;
    padding-top: 56%;
}
.map>iframe{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
}






/*
form 初期設定
---------------------------------*/
 input,
 button,
 textarea,
 select{
    width: 100%;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    -webkit-border-radius: none;
    border-radius: none;
    border-radius: 0;
    border:none;
    border:0;
}

 select::-ms-expand {
  display: none;
}

 label>select {
    position: relative;
    display: block;
    width: 133px;
    background: #fff;
    padding: 0 25px 0 18px;
    font-size: 1.6rem;
    line-height: 36px;
    height: 36px;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    box-sizing: border-box;
    border:1px solid #CCCCCC;
    z-index: 1;
}

 label.size-s,
 label.size-m,
 label.size-l{
    position: relative;
    display: inline-block;
    z-index: 1;
 }

 label.size-s>select{ width: 76px;}
 label.size-m>select{ width: 225px;}
 label.size-l>select{ width: 296px;}


 label.size-s::after,
 label.size-m::after,
 label.size-l::after{
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -3px;
    border: 5px solid transparent;
    border-top: 7px solid #000;
    z-index: 2;
}

input{
    width: 100%;
}

input[type="text"]{
    height: 36px;
    max-width:417px;
    background: #EEEEEE;
}

textarea {
    height: 162px;
    max-width: 600px;
    background: #EEEEEE;
}
#contact input.input-s{ width: 144px;}
#contact input.input-m{ width: 218px;}


#contact .exp{
    margin-bottom: 10px;
}

#contact .privacy{
    text-align: center;
    padding-bottom: 60px;
}
#contact .privacy a{
    text-decoration: underline;
}

#contact .submit-btn{
    background: #000;
    width: 280px;
    display: inline-block;
    color:#fff;
    padding: 1em 0;
    text-align: center;
    font-size: 1.6rem;
}

#contact .submit-btn.back{
    margin-right: 30px;
    background: #666;
}


#contact .btn-area{
    margin-bottom: 80px;

}
#contact .confirm .btn-area{
    margin-top: 50px;
}
#contact .caution{
    color:#ff0000;
    margin-bottom: 100px;
}


#contact .complete {
    padding-bottom: 100px;
    text-align:  center;
}

#contact .complete .headline-m{
    margin-bottom: 1.5em;
    font-size:  2rem;
}



#contact .complete p strong {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 0.5em;
}

#contact .complete p 


#contact .form-tbl{
    margin-bottom: 30px;
}

#contact .form-tbl table{
    width: 100%;
}

#contact .form-tbl table>tbody{}
#contact .form-tbl table>tbody>tr{
    border-bottom: 1px solid #DDDDDD;
}
#contact .form-tbl table>tbody>tr:first-child{
    border-top: 1px solid #DDDDDD;
}
#contact .form-tbl table>tbody>tr>th{
    width: 35%;
    padding: 1.2em 1em;

    font-size: 1.6rem;
    vertical-align: top;
    text-align: left;
}
#contact .form-tbl table>tbody>tr>td{
    width: 65%;
    padding: 1.2em 1em;
}

#contact .form-tbl table>tbody>tr>th>i,
#contact .form-tbl table>tbody>tr>th>span{
    float:right;
    display: inline-block;
    background: #FF0000;
    color:#fff:;
    padding: 0 0.5em;
    font-size: 1.4rem;
    font-weight: normal;
    color:#fff;
}

#contact .form-tbl table>tbody>tr>th>i{
    background: #BBBBBB;
}

#contact .inter-para{
    margin: 10px 0 15px;
}

.errBox ul{
    margin: 1.5em 0;
}
.errBox ul>li{
    color:#ff0000;
}
.policy .headline-m{
    margin-bottom: 50px;
}


.policy p{
    margin-bottom: 1.5em;
}
.policy h3{
    margin-bottom: 0.5em;
}

.modCheckList{
    margin-bottom: 1em;
}
.modCheckList>li{
    position: relative;
    padding-left:1em;
}

.modCheckList>li::after{
    content:"・";
    position: absolute;
    display: block;
    width: 1em;
    height: 1em;
    top:0;
    left:0;
}


/*#contact */



/***********************************************************************************************************************
* 横サイズ1200px以下
***********************************************************************************************************************/
@media screen and (max-width: 1350px){
    .top-message .block .txt-box .inr .ttl {
        font-size: 2.4rem;
    }

    .top-message .block .img-box {
        width: 40%;
        height: 533px;
        background-position: 100% center !important;
    }

    .top-message .block .txt-box {
    padding-left: 3%;
        width: 60%;
    }
        .top-message .block .txt-box .inr{
            width: 100%;
        }

    /*works*/
    .cate-nav {
        padding: 10px 10px;
        background: #F6F6F6;
        margin-bottom: 48px;
    }
    .cate-nav>li,
    .cate-nav>li:nth-child(5n) {
        width: 24%;
        margin-right: 1%;
    }
      .cate-nav>li:nth-child(5n) {
        margin-right: 1%;
      }


     .cate-nav>li:nth-child(4n) {
        margin-right: 0%;
    }

    .cate-nav>li{
        margin-top: 3px;
        margin-bottom: 3px;
    }


}