@charset "UTF-8";
* {margin:0; padding:0;}

/** fadeIn **/
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: .1}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: .1}
    100% {opacity: 1}
}
/********************************************************************************
 font
********************************************************************************/
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");

@font-face {
    font-family: 'KoburinaW6';
    font-style: normal;
    font-weight: bold;
    src: local('KoburinaGoStd-W6'), 
    url('../font/KoburinaGoStd-W6.otf') format('opentype');
}

@font-face {
    font-family: 'JNRfont';
    font-style: normal;
    src: local('JNRfont'), 
    url('../font/JNRfont_n.ttf') format('truetype');
}

#luxbar a{
    font-family: 'JNRfont','Noto Sans Japanese';
}

/********************************************************************************
 common
********************************************************************************/
html {
	font-size: 62.5%;
}
body {
	margin:0;
	padding:0;
	_overflow:hidden;
	line-height:1.6;
	background-color:#fff/*#fbfaf5*/;
	font-size:1.0rem;
	color:#5a544b;
}
body,div,section,p,span,table,th,td {
	font-family:'KoburinaW6','Avenir','Verdana','Arial','Helvetica','メイリオ','Meiryo','serif';
    font-weight: 500;
}
embed,
iframe,
object{
	max-width: 100%;
	margin:auto;
}
#luxbar {
    display:none;
}

ul.text {
    width: 90%;
    list-style: none;
    margin: .5rem auto;
    padding : 1rem 1.5rem;
    background: #fff;
}
ul.text li {
    margin: .8rem 0;
}
ul.text li:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f00c';
    font-weight: 900;
    font-size: 100%;
    margin-right: .5rem;
}
.red {
    color:#8a3319;
}
.gray {
    color:#bdbdbd;
}
strong {
    background: linear-gradient(transparent 50%, #e6eae3 50%);
}

/********************************************************************************
    Link Color
********************************************************************************/
a {
	outline:none;
	transition: 0.5s;
}
a:link {
	text-decoration:none;
	color:#6b7b6e;
}
a:visited {
	color:#6b7b6e;
}
a:hover {
	color:#727171;
	border:none;
	transition: 0.5s;
}

.text a {
	text-decoration:none;
}
.text a:link {
	color:#6b7b6e;
}
.text a:visited {
	color:#6b7b6e;
}
.text a:hover {
	color:#5a544b;
    border-bottom:0px;
}

.textbox img a:hover {
    text-decoration:none;
}
.textbox a:active {
	color:#16160e;
}

#TOP .luxbar-navigation li:nth-child(2){
        background-color: #bdbdbd;
}
#SERVICE .luxbar-navigation li:nth-child(3){
        background-color: #bdbdbd;
}/*
#CAFE .luxbar-navigation li:nth-child(4){
        background-color: #bdbdbd;
}*/
#CONTACT .luxbar-navigation li:nth-child(5){
        background-color: #bdbdbd;
}
/********************************************************************************
    Logo
********************************************************************************/
.logo {
	margin:0;
	padding:.1em 0 0 0;
    letter-spacing: .05em;
	font-family:'JNRfont','KoburinaW6';
	height:1.8em;
}

.logo a {
    display: inline-block;
    margin-left: 3rem;
    margin-bottom: -3rem;
	color:#fbfaf5;
    border:none;
  	line-height:5rem;
	font-size:6rem;
}

.logo a:hover {
	color:#bdbdbd;
	transition: 1s;
}
.description {
    font-size: 1.6rem;
    margin-left: 3rem;
    color: #fff;
	font-family:'JNRfont','KoburinaW6';
}

/********************************************************************************
    h tag
********************************************************************************/
h1{
    font-family:'JNRfont','KoburinaW6';
    font-weight:normal;    
    font-size:2.4rem;
    text-align:left;
    color:#5a544b;
}
h2{
    font-family:'JNRfont','KoburinaW6';
    font-weight:normal;
    font-size:3rem;
    margin:0;
    text-align:left;
    color:#5a544b;
}
    h2:before {
        font-family: 'Font Awesome 5 Free';
    content: "\f142";/*3点リーダ縦*/
        font-weight: 900;
        font-size: 90%;
        margin-right: 1rem;
    }

h3{
    font-family:'JNRfont','KoburinaW6';
    font-size:2.6rem;
    font-weight: normal;
    line-height: 1.4;
    margin-top: 3rem;
    margin-bottom: .8rem;
    padding: 0;
    color:#5a544b;

}
    h3:before {
        font-family: 'Font Awesome 5 Free';
        content: "\f105"!important;
        font-weight: 900;
        font-size: 100%;
        margin-right: 0.8rem;
    }

/********************************************************************************
    section
********************************************************************************/

div {
    font-size:1.4rem;
    letter-spacing: 0.1em;
}
section {
    margin: 2.4em auto 0;
}
p {
    line-height: 1.4;
}
.textbox {
	margin:1.5rem 0 3rem;
	padding:0 0 1rem;
    height:auto;
}
.text {
	font-size:1.6rem;
    color:#5a544b;
    padding:1rem 2rem 0;
    margin-bottom:.4rem;
}
.graybg {
    width: 90%;
    background: #e8e5e5;
    padding:.5rem .5rem .5rem .8rem;
    margin: 1rem auto;
    text-align: center;
}


/********************************************************************************
    Image
********************************************************************************/

.headimg {
	overflow:hidden;
	margin:0;
    max-width: 800px;
    height: auto;
}

img {
	border:0; 
	transition: 0.5s;
    width: 100%;
}
.plf-img img {
    width: 200px;
    display: block;
    border-radius: 50%;
    margin: auto;
}
.plf-img + p {
    text-align: center;
}
/********************************************************************************
 Left MENU(PC)
********************************************************************************/
nav {
    font-size:1.2rem;
    margin-top: 13rem;
}

.leftmenulist li{
	padding:1rem 0 0 3rem;
	display:inline;
	color:#fffffc;
	transition: 0.5s;
}
.leftmenulist li a {
	text-decoration:none;
	color:#fffffc;
}
.leftmenulist li a:link {	
	color:#fffffc;
}
.leftmenulist li a:hover {
	color:#fffffc;
	transition:0.8s;
    background-color: #bdbdbd;
}

#TOP .leftmenulist li:nth-child(1) a{
    background: #bdbdbd;
    color: #727171;
}
#SERVICE .leftmenulist li:nth-child(2) a{
    background: #bdbdbd;
    color: #727171;
}
#CAFE .leftmenulist li:nth-child(3) a{
    background: #bdbdbd;
    color: #727171;
}
#CONTACT .leftmenulist li:nth-child(4) a{
    background: #bdbdbd;
    color: #727171;
}

#SNS {
    position:absolute;
    left:20px;
    bottom:20px;
}
#SNS span {
    display: inline-block;
    text-align: center;
    margin: auto;
}
#SNS span a:link,
#SNS span a:visited {
    display: inline-block;
    color: #fff;
    font-size: 6rem;
    margin: auto 1rem;
    transition: .5s;
}
#SNS span a:hover {
    color: #bdbdbd;
}

/********************************************************************************
 FOOTER
********************************************************************************/
#ftr-wrap { 	
	width:100%;
	margin:0;
	padding:0;
	background-color:#fff;
	color:#5a544b;
}
footer {
	margin:0;
}
hr {
	border:0;
	height:1px;
	background-color:#727171;
	margin:1em 0;
}
.copy, .copy a {
	text-align:center;
	margin-bottom:3em;
	color:#5a544b;
}

/********************************************************************************
 PAGE LAYOUT
********************************************************************************/

#content-wrap {
	margin:0 0 0 25em;
	padding:0;
	height:100%;
	overflow:auto;
}

#leftmenu-wrap {
	margin:0;
	padding:0;
    height:100%;
	width:25em;
	position:fixed;
	_position:absolute;
	left:0;
	top:0;
	overflow:auto;
	background-color:#727171;
   }

#content {
	width:90%;
    max-width:800px;
	height:100%;
	margin:auto;
	padding:4em 0 0 3em;
}

#leftmenu {
	width:100%;
	height:70%;
	margin:5em 0 0 0;
	padding:0;
	font-family:'JNRfont','KoburinaW6';
}

#leftmenu ul {
	margin:0; 
	padding:0 0 0 2.2em;  
	text-align:left;
}

#leftmenu li {
	font-size:1.8em;
	display:inline-block;
	padding:0; 
	margin:0; 
}

#leftmenu li a {
	margin:0 0;
	padding:.1em 0 .1em .5em;
	height:1.7em;
	width:8em;
	display:block;
}

#leftmenu li a:hover {
	margin:0 0;
	padding:.1em 0 .1em .5em;
	height:1.7em;
	width:8em;
	display:block;
}



/********************************************************************************
 SERVICE
********************************************************************************/
.btn-wr {
    text-align: center;
}
.svc-btn {
    display: inline-block;
    background: #727171;
    border-radius: 3px;
    padding: .5rem 1rem;
    margin: .3rem .2rem;
    -webkit-transition: .2s;
    transition: .2s;
	font-family:'KoburinaW6';
}
.svc-btn:hover {
    background: #6b7b6e;
}
.svc-btn a:link,
.svc-btn a:hover,
.svc-btn a:visited {
    color: #fff;
}
.prj-btn a,
.prj-btn a:link,
.prj-btn a:visited {
    color: #fff;
}
.prj-btn {
    display: block;
    width: 250px;
    height: 50px;
    margin: 1rem auto .5rem;
    text-align: center;
    line-height: 50px;
    background: #6b7b6e;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: .2s;
    transition: .2s;
}
.prj-btn a{ 
    position: relative;
    padding-left: 30px;
}
.prj-btn a::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-top: -5px;
}
.prj-btn:hover {
    background: #727171;
}

.service-table + p {/* .prj-btn */
    margin-top: -1rem;
    margin-bottom: 3rem;
}


#SERVICE caption {
    font-weight:normal;
}

#SERVICE table { 
    width: 100%;
	margin:1rem;
	border-collapse:separate;
	border-spacing:10px;
	line-height:1.3;
    font-family: 'KoburinaW6';
}
#SERVICE th {
    width: 3rem;
	white-space:nowrap;
    font-size: 2rem;
	padding:1rem;
    color:#727171;
    background:#e8e5e5;
    border:1px solid #e8e5e5;
    text-align: left;
}

#SERVICE #webdesign table th:before {/* webdesign */
    font-family: 'Font Awesome 5 Free';
    content: '\f108';
    font-weight: 900;
    font-size: 100%;
    margin-right: 1rem;
}
#SERVICE #dtpdesign table th:before {/* dtpdesign */
    font-family: 'Font Awesome 5 Free';
    content: '\f15c';
    font-weight: 900;
    font-size: 100%;
    margin-right: 1rem;
}
#SERVICE #writing table th:before {/* writing */
    font-family: 'Font Awesome 5 Free';
    content: '\f044';
    font-weight: 900;
    font-size: 100%;
    margin-right: 1rem;
}
#SERVICE #other table th:before {/* on-site */
    font-family: 'Font Awesome 5 Free';
    content: '\f0b1';
    font-weight: 900;
    font-size: 100%;
    margin-right: 1rem;
}

#SERVICE .th-s {
    padding: 1rem;
    border:1px solid #e8e5e5;
    text-align: center;
    font-family: 'KoburinaW6';
}
#SERVICE td {
	padding:.5rem;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #5a544b;
}
#SERVICE td span {
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1.2;
    color: #727171;
    margin-top: .2rem;
}


/********************************************************************************
 WORK
********************************************************************************/
.works-box h3 {
    margin-top: -1rem;
    border: none;
}
.works-box h3:before {
    display: none;
}
.works-box h3 a,
.works-box h3 a:visited {
    color: #727171;
}
.works-box h3 a:hover {
    color: #6b7b6e;
}

.works-box p {
    margin-top: -1rem;
    padding: 0;
    text-align: center;
}
.works-box p span {
    position: relative;
    display: inline-block;
    background: #6b7b6e;
    border-radius: 0 3px 3px 0;
    color: #fff;
    height: 18px;
    line-height: 18px;
    padding: 0 .5em;
    margin: 0 8px;
    font-size: .7em;
    -webkit-transition: .2s;
    transition: .2s;
}
.works-box p span::before {
  position: absolute;
  top: 0;
  left: -9px;
  content: '';
  width: 0;
  height: 0;
  border-color: transparent #6b7b6e transparent transparent;
  border-style: solid;
  border-width: 9px 9px 9px 0;
}
.works-box p span::after {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: block;
  content: '';
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  background-color: #fff;
  border-radius: 100%;
}

.works-box img {
	transition:0.5s;
    -webkit-filter: blur(0px);
    filter: blur(0px);
}
.works-box img:hover {/*
	opacity:0.6;
	filter:alpha(opacity=60);*/
    -webkit-filter: blur(1px);
    filter: blur(1px);
}

/***** Flex Box *****/
.works-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.works-box {
	margin-bottom: 3rem;
	padding: 3rem;
	width: 24%;/* 49% */
    background:#e8e5e5;
}
.works-box img {
	display: block;
	margin-bottom: 3rem;
	width: 100%;
	height: auto;
}
.works-box h3 {
	margin-bottom: 2rem;
	font-size: 2.2rem;
	text-align: center;
    line-height: 1;
}
.works-box p {
	font-size: 1.7rem;
}

@media screen and (max-width: 768px){/*PC small*/
    .works-box {
	   width: 37%;
    }
    .works-box p {
        margin-top: .5rem;
    }
}

@media screen and (max-width: 480px){/*スマホ縦*/
	.works-wrap {/*
		flex-direction: column;*/
	}
	.works-box {
		width: 100%;
	}
    .works-box h3 {
        margin-bottom: .5rem;
    }
}


/********************************************************************************
 CONTACT
********************************************************************************/
fieldset {
    border:none;
    padding:1rem;
    margin:.5rem;
}
 /* テキストエリアの設定 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,select{
    width:95%;
    color:#5a544b;
    padding:10px 0 10px 10px;
    margin:3px 0;
    border:1px solid #727171;
    font-size: 110%;
    font-family: 'KoburinaW6';
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
    textarea:focus,select:focus{
    background-color:#fffffc;
    border:1px solid #727171;
}

.button {
    margin: auto;
    text-align: center;
}
.submit{
    margin-top: 1rem;
    padding: 1.4rem 2rem;
    display: inline-block;
    font-size: 2rem;
    font-family: 'KoburinaW6';
    color: #fff;
    background: #727171;
    border-radius: 3px;
    border: none;
	transition:0.5s;
}
.submit:hover{
    cursor: pointer;
    background: #6b7b6e;
}

/********************************************************************************
 PAGETOP
********************************************************************************/
#page-top {
		z-index:999;
	    position:fixed;
	    bottom:20px;
	    right:20px;
	    font-size:1.8rem;
		font-family:'JNRfont','KoburinaW6';
    	filter:alpha(opacity=80);
   		 -moz-opacity:0.8;
    	opacity:0.8;
}

#page-top a {
	    background:#727171;
	    text-decoration:none;
	    color:#fffffc;
	    padding:20px;
	    text-align:center;
	    display:block;
	    width:30px;
	    height:auto;
	    border-radius:50%;
    	border-bottom:none;
}

#page-top a:hover {
	    text-decoration: none;
	    background:#8a978f;
}


/********************************************************************************
 Media Query
********************************************************************************/
@media screen and ( max-width:1200px) {    /*　for PC small 　*/
    body {
	-webkit-text-size-adjust: 100%;
        margin: 0;
        padding: 0;
    }
    #content-wrap {
        margin:0;
        padding-top:6em;
        max-width: 100%;
    }
    #content {
        width:96%;
        height:100%;
        float: none;
        padding:0;
    }
    #leftmenu-wrap {/* PC menu */
        display: none;
    }
    #luxbar {
        display: block;
    }
    .luxbar-item a {
        font-size: 1.8rem;
    }
    .luxbar-fixed { /* Top menu bar */
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

    .luxbar-hamburger span, .luxbar-hamburger span::before, .luxbar-hamburger span::after {
      display: block;
      height: 2px;
      width: 26px;
      transition: 0.6s ease; }

    .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span {
      background-color: transparent; }
      .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::before, .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::after {
        margin-top: 0; }

    .luxbar-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 58px; }

    .luxbar-menu-left .luxbar-navigation, .luxbar-menu-left .luxbar-header {
      justify-content: flex-start; }

    .luxbar-menu-right .luxbar-hamburger {
      margin-left: auto; }

    .luxbar-brand {
      font-size: 1.6em;
      padding: 18px 24px 18px 24px; }

    .luxbar-menu {
      min-height: 58px;
      transition: 0.6s ease;
      width: 100%; }

    .luxbar-navigation {
      display: flex;
      flex-direction: column;
      list-style: none;
      padding-left: 0;
      margin: 0; }

    .luxbar-menu a,
    .luxbar-item a {
      text-decoration: none;
      color: inherit;
      cursor: pointer; }

    .luxbar-item {
      height: 58px; }
      .luxbar-item a {
        padding: 18px 24px 18px 24px;
        display: block; }

    @media screen and (min-width: 768px) {/* luxbar for PC small */
    .luxbar-checkbox {
      display: none; }
        
      .luxbar-navigation {
        flex-flow: row;
        justify-content: flex-end; }

      .luxbar-hamburger {
        display: none; }

      .luxbar-checkbox:not(:checked) ~ .luxbar-menu {
        overflow: visible; }
      .luxbar-checkbox:checked ~ .luxbar-menu {
        height: 58px; }

      .luxbar-menu .luxbar-item {
        border-top: 0; }

      .luxbar-menu-right .luxbar-header {
        margin-right: auto; }

      .dropdown {
        height: 58px; }
        .dropdown:hover > ul {
          position: absolute;
          left: 0;
          top: 58px;
          padding: 0; }
        .dropdown > ul {
          display: none; }
          .dropdown > ul .luxbar-item {
            padding: 5px 10px; }
            .dropdown > ul .luxbar-item a {
              white-space: nowrap; } }
    
    /******* color variables *******/
    /******* default light *******/
    .luxbar-menu-light,
    .luxbar-menu-light .dropdown ul {
      background-color: #727171;
      color: #fff; }

    .luxbar-menu-light .active,
    .luxbar-menu-light .luxbar-item:hover {
      background-color: #bdbdbd; }
    .luxbar-menu-light .luxbar-hamburger span,
    .luxbar-menu-light .luxbar-hamburger span::before,
    .luxbar-menu-light .luxbar-hamburger span::after {
      background-color: #fff;}
}

@media screen and ( max-width:768px) {    /*　for iPad以下 　*/
    h1 {
        display:block;
        font-size: 3rem;
        width:100%;
        height:100%;
        color:#727171;
        text-align:center;
        padding:0 0 .5rem 0;
        margin:0;
    }
    h2 {
        padding-left:.7rem;
        text-align: center;
        font-size: 3rem;
        background:none;
        color:#727171;
    }
    h3 {
        margin-left: 2rem;
    }
    .textbox {
        margin:0;
        border:none;
    }
    img {
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }
    table,tr,td {
        margin: auto;
        padding: 0;
        box-sizing: border-box;
    }
    
    .luxbar-hamburger {/* luxbar for ipad */
      padding: 18px 24px 18px 24px;
      position: relative;
      cursor: pointer; }
      .luxbar-hamburger span::before, .luxbar-hamburger span::after {
        content: '';
        position: absolute; }
      .luxbar-hamburger span::before {
        margin-top: -8px; }
      .luxbar-hamburger span::after {
        margin-top: 8px; }

    .luxbar-item a {
      font-size: 2rem;}
    
    .luxbar-checkbox {
      display: none; }
      .luxbar-checkbox:not(:checked) ~ .luxbar-menu {
        overflow: hidden;
        height: 58px; }
      .luxbar-checkbox:checked ~ .luxbar-menu {
        transition: height 0.6s ease;
        height: 100vh;
        overflow: auto; }

    .dropdown {
      position: relative;
      height: auto;
      min-height: 58px; }
      .dropdown:hover > ul {
        position: relative;
        display: block;
        min-width: 100%; }
      .dropdown > a::after {
        position: absolute;
        content: '';
        right: 10px;
        top: 25px;
        border-width: 5px 5px 0;
        border-color: transparent;
        border-style: solid; }
      .dropdown > ul {
        display: block;
        overflow-x: hidden;
        list-style: none;
        padding: 0; }
        .dropdown > ul .luxbar-item {
          min-width: 100%;
          height: 29px;
          padding: 5px 10px 5px 40px; }
          .dropdown > ul .luxbar-item a {
            min-height: 29px;
            line-height: 29px;
            padding: 0; }    
    .luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-doublespin span::before {
      transform: rotate(225deg); }
    .luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-doublespin span::after {
      transform: rotate(-225deg); }

    .luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-spin span::before {
      transform: rotate(45deg); }
    .luxbar-checkbox:checked + .luxbar-menu .luxbar-hamburger-spin span::after {
      transform: rotate(-45deg); }
    
    h1 {
        margin-top: -36px;
    }
    }


@media screen and ( max-width:480px) {    /*　for スマホ 　*/
    #content-wrap {
        padding-top:4.5em;
    }
    #content {
        width:100%;
    }
    .text{
        margin-top: .5rem;
        margin-bottom: 0;
        font-size:1.5rem;
    }
    table,tr,td,h1,h2 {
        margin: auto;
        padding: 0;
        width: auto;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }
    h2 {
        color: #fffffc;
        background: #727171;
        line-height: 2.2;
        padding: .5rem auto;
        font-size: 1.6em;
    }
    h2:before {
        font-size:2rem;
    }
    h3 {
        border: none;
        text-align: center;
        margin-top: 2rem;
        margin-bottom: .2rem;
    }
    #TOP h1 {
        display: none!important;
    }
    #TOP .headimg {
        margin-top: -22px;
        margin-bottom: -40px;
    }
    #TOP .concept {
        width: 80%;
        margin: 1rem auto;
    }
    #SERVICE table { 
        width: 100%;
        table-layout: fixed;
        white-space: normal;
        margin:0 0 1.8em 0;
        border-collapse:collapse;
        border-spacing: 0;
    }
    #SERVICE th {
        width: auto;
        display: block;
        white-space: normal;
        width: auto;
        text-align: center;
        font-size: 1.8rem;
        margin: 0;
    }
    #SERVICE .th-s {
        width: 100%;
        text-align: center;
        white-space: normal;
        font-size: 1.7rem;
        border: none;
        position: relative;
        display: inline-block;
    }
    #SERVICE .th-s:before {
        content: '';
        position: absolute;
        bottom: 7px;
        display: inline-block;
        width: 35px;
        height: 2px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: #5a544b;
        border-radius: 2px;
    }
    #SERVICE td {
        width: 96%;
        display: block;
        padding: 0 .5em;
        font-size: 1.5rem;
    }
    #SERVICE td span {
        display: inline-block;
        margin-top: .4rem;
        padding: 3px auto;
        font-size: 1.4rem;
        line-height: 1.4;
        letter-spacing: 1.5;
    }
    .prj-btn {
        width: 100%;
        margin: auto;
    }
    .graybg {
        width: 85%;
        margin: 2rem auto;
        padding: .5rem;
    }
    
    #CONTACT .button {
        margin: 0 auto 2rem;
    }
    #CONTACT input.submit{
        -webkit-appearance: none;
    }

}