@charset "UTF-8";
/*================================
 design.css
=================================*/

/*================================
 o/w
=================================*/

/*
-------------------------------- */
/*
.row_inner {
overflow: hidden;
max-width: 1580px;
min-width: 1240px;
width: 100%!important;
}
*/

/*
-------------------------------- */

.unit_intro {
text-align: center;
}

.unit_intro h3{
display: inline-block;
height: 50px;
margin: 30px auto 0;
padding: 0 70px;
line-height: 50px;
font-size: 22px;
font-weight: bold;
letter-spacing: 0.04em;
background-color: #EFEFEF;
}

.unit_intro h4{
margin: 30px auto 0;
font-size: 31px;
font-weight: bold;
letter-spacing: 0.08em;
}

.unit_intro h5{
margin: 30px auto 0;
font-size: 14px;
font-weight: bold;
color: #C8C9C9;
}

.unit_intro p{
margin: 30px auto 0;
}

.unit_intro ul.ancbox{
display: flex;
justify-content: start;
flex-wrap: wrap;
margin: 50px auto 0;
}

.unit_intro ul.ancbox li{
display: block;
width:384px;
height: 80px;
margin-right: 20px;
margin-bottom: 25px;
}

.unit_intro ul.ancbox li:nth-child(3n){
margin-right: 0;
}

.unit_intro ul.ancbox li a{
position: relative;
display: flex;
width: 100%;
height: 100%;
background-color: #1C1D1F;
padding: 20px 0;
transition: 0.2s;
}

.unit_intro ul.ancbox li a::after{
content: "";
background:url(../img/design/anc_li_arrow.png) no-repeat center center;
display: block;
width: 20px;
height: 20px;
position: absolute;
right: 20px;
top: 30px;
}

.unit_intro ul.ancbox li a:hover::after{
top: 33px;
}

.unit_intro ul.ancbox li a span{
display: block;
font-weight: bold;
line-height: 40px;
}

.unit_intro ul.ancbox li a span.num{
width: 80px;
font-family: 'Century Gothic', sans-serif;
font-size: 22px;
color: #87B9E4;
letter-spacing: 0.06em;
border-right: 1px solid #B7BBAC;
}

.unit_intro ul.ancbox li a span.tit{
width: 304px;
font-size: 18px;
color: #fff;
text-align: left;
text-indent: 30px;
}


/*
-------------------------------- */

.unit_block{
display: block;
height: 584px;
}

    .unit_block#why01{
    margin-top: 60px;
    }

    .unit_block#why03{
    height: 582px;
    }

.unit_block .ubox{
position: relative;
width: 420px;
margin-top: 90px;
color: #fff;
}
    .unit_block#why02 .ubox{ margin-top: 110px; }
    .unit_block#why03 .ubox{ margin-top: 80px; }

.unit_block.block_odd .ubox{ float:right; padding-right: 8px; }
.unit_block.block_even .ubox{ float:left; padding-left: 8px; }


.unit_block .ubox h3{
position: relative;
width: 220px;
height: 60px;
}

.unit_block#why01 .ubox h3{ background:url(../img/design/li01_tit.png) no-repeat left top; }
.unit_block#why02 .ubox h3{ background:url(../img/design/li02_tit.png) no-repeat left top; }
.unit_block#why03 .ubox h3{ background:url(../img/design/li03_tit.png) no-repeat left top; }

.unit_block .ubox h4{
font-size: 31px;
font-weight: bold;
margin-top:10px;
}

.unit_block .ubox h5{
font-size: 14px;
font-weight: bold;
color: #C8C9C9;
margin-top:10px;
}

.unit_block .ubox p{
margin-top:16px;
letter-spacing: 0.05em;
}

.unit_block#why01 .ubox a.btn_to {
background:url(../img/design/recent_btn_to.png) no-repeat center center;
display: block;
width: 304px;
height: 58px;
margin-top: 40px;
}


/*
-------------------------------- */

.unit_flow{
display: block;
}

    #page-logo-design .unit_flow{
    background:url(../img/design/flow_bg.jpg) no-repeat center top, #fff;
    }

    #page-graphic-design .unit_flow{
    background:url(../img/design/flow_bg.jpg) no-repeat center top, linear-gradient(360deg, #040000 0%, #040000 90px, #fff 90px);
    }


.unit_flow ul{
display: block;
width: 1210px;
margin: 30px auto 0;
padding: 40px;
color: #fff;
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100px, rgba(255,255,255, 0) 100px);
}

.unit_flow ul li{
position: relative;
display: block;
width: 100%;
margin: 0 auto 20px;
background-color: #1C1D1F;
line-height: 30px;
}

.unit_flow ul li::after{
content: "";
background:url(../img/design/flow_li_arrow.png) no-repeat center center;
display: block;
width: 10px;
height: 25px;
position: absolute;
left: 0;
right: 0;
bottom: -14px;
margin: auto;
}

.unit_flow ul li:last-child::after{
content: "";
background:none;
display: nonek;
}


.unit_flow ul li p{
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
padding: 15px 30px;
background-color: #1C1D1F;
}

.unit_flow ul li p .num{
display: flex;
width: 110px;
color: #86B9E6;
font-family: 'Century Gothic', sans-serif;
font-weight: bold;
font-size: 14px;
border-right: 1px solid #303133;
line-height: 15px;
vertical-align: middle;
}

.unit_flow ul li p .num em{
font-size: 14px;
}

.unit_flow ul li p .num b{
font-size: 28px;
margin-left: 8px;
}

.unit_flow ul li p .tit{
display: block;
width: 230px;
margin-left: 20px;
vertical-align: middle;
font-weight: bold;
letter-spacing: 0.08em;
}

.unit_flow ul li p .desc{
display: block;
width: 700px;
}

.unit_flow ul li p.note{
display: block;
width: 100%;
padding: 16px 20px;
color: #A8A9AB;
border-top: 1px solid #303133;
}

.unit_flow ul li p.note b{
display: inline-block;
padding: 4px 20px;
color: #fff;
border-radius: 18px;
background-color: #3E3A39;
margin-right: 16px;
}

/*
-------------------------------- */

.unit_price{
overflow: hidden;
background:linear-gradient(360deg, #fff 0%, #fff 70px, #040000 70px);
display: block;
}

.unit_price h3{
position: relative;
background:url(../img/design/price_tit.png) no-repeat center top;
display: block;
width: 600px;
height: 170px;
margin: 30px auto 25px;
}

.unit_price h4{
position: relative;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #fff;
background-color: #1C1D1F;
padding:14px 30px;
margin-bottom: 25px;
}


.unit_price h4::after{
content: "";
background:url(../img/design/price_li_arrow.png) no-repeat center center;
display: block;
width: 32px;
height: 20px;
position: absolute;
left: 0;
right: 0;
bottom: -16px;
margin: auto;
}

.unit_price ul{
overflow: hidden;
display: block;
width: 1200px;
margin: 0 auto 30px;
}

.unit_price ul li{
overflow: hidden;
display: block;
width: 100%;
background-color: #fff;
border: 5px solid #1C1D1F;
margin-bottom: 20px;
}

.unit_price ul li .cont{
padding: 15px 40px;
}

.unit_price ul li .tit{
font-size: 20px;
font-weight: bold;
}

.unit_price ul li .price{
float: right;
}

.unit_price ul li .price em{
font-size: 20px;
font-weight: bold;
}

.unit_price ul li .desc{
padding: 15px 40px;
background-color: #F3F3F3;
}




/*
-------------------------------- */