@charset "UTF-8";
/* 全体共通CSS */
@import url('https://fonts.googleapis.com/css?family=Coda+Caption:800');
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
.sp{
    display: none!important;
}
.pc{
    display: block!important;
}
.txt{
    padding: 30px 40px 60px 40px;
}
h4{
font-family: 'Coda Caption', sans-serif!important;
margin: 100px 0 60px!important;
font-size: 40px!important;
}
@media screen and (min-width: 1001px) {
    html,
    body,
    main,
    article {
        width: 100%;
        height: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        position: static;
        background-color: #ecece8;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",     "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",           "ＭＳ 明朝", serif;
    }

    section {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        position: static;
        background-color: #ecece8;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",     "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",           "ＭＳ 明朝", serif;
    }
.gothic{
  font-family: "Yu Gothic";
}
    h1 {
        margin: 0;
        font-size: 24pt !important;
        letter-spacing: -4px;
    }
    #loader{
        width: 659px;
        height: 202px;
        display: none;
        position: fixed;
        _position: absolute;     /* IE6対策 */
        top: 50%;
        left: 50%;
        margin-top: -101px;       /* heightの半分のマイナス値 */
        margin-left: -330px;      /* widthの半分のマイナス値 */
        z-index: 10;             /* #fadeより多い値を入れて下さい */
    }
    #fade{
        width: 100%;
        height: 100%;
        display: none;
        background-color: #DFE3DC;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 5;              /* #loaderより少ない値を入れて下さい */
    }

    /* ナビゲーションバー */
    nav {
        width: 200px;
        height: 100%;
        padding: 58px 0 0;
        position: fixed;
        top: 0;
        left: -200px;
        background: rgba(0,0,0,0.7);
        z-index: 100;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }

    nav ul {
        width: 100%;
        list-style: none;
        top: 0;
        margin: 0;
        padding: 0;
    }

    nav ul li {
        padding-bottom: 5px;
        left: -2px;
    }
 header nav ul li a{
    color: #fff;
    font-family: 'Coda Caption', sans-serif!important;
    font-size: 25px;
    display: block;
    padding: 10px 10px 5px 0;
    text-align:right;
    border-top:1px dotted #fff;
 }
  header nav ul li a:hover{
    text-decoration: none;
    color:#F7921C;
  }
  header nav ul li a span{
    color:#F7921C;
    font-family: "Yu Gothic";
    font-size: 15px;

 }
    header nav ul li a,
    header.fixed nav ul li a {

        -webkit-transition: .1s ease-in-out;
        -moz-transition: .1s ease-in-out;
        transition: .1s ease-in-out;
    }

    

    .inner:after {
        content: "";
        clear: both;
        display: block;
    }

    header {
        top: 0;
        left: 0;
        position: fixed;
        width: 58px;
        height: 100%;
        margin: 0 auto;
        padding: 0;
        line-height: 1;
        z-index: 999;
    }

    header a,
    header {
        color: #fff;
        text-decoration: none;
    }


    header.fixed {
        margin-top: 0;
        top: 0;
        position: fixed;
        padding-top: 0;
        height: 55px;
        background: transparent;
        transition: top 0.65s ease-in;
        -webkit-transition: top 0.65s ease-in;
        -moz-transition: top 0.65s ease-in;
    }

    #head {
        background: none;
        width: 58px;
        height: 100%;
        z-index: 999;
        position: relative;
    }

    /* ナビゲーションボタン */
    #navbtn {
        display: block;
        position: fixed;
        left: 10px;
        top: 10px;
        width: 38px;
        height: 38px;
        cursor: pointer;
        z-index: 100;
    }
    #navbtn div { position: relative;}

    #navbtn span {
        display: block;
        position: absolute;
        height: 4px;
        width: 100%;
        background: #f7921c;
        left: 0;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
    }

    #navbtn span:nth-child(1) { top: 0;}
    #navbtn span:nth-child(2) { top: 11px;}
    #navbtn span:nth-child(3) { top: 22px;}

    /* ナビゲーションバーアニメーション */
    .open #navbtn span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }

    .open #navbtn span:nth-child(2) {
        width: 0;
        left: 50%;
    }

    .open #navbtn span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }

    .open nav{
        -moz-transform: translateX(200px);
        -webkit-transform: translateX(200px);
        transform: translateX(200px);
    }

    /* メイン */
    section {
        width: 100%;
        min-width:100%;
    }

    section div {
        display: block;
        width: 1000px;
    }

    /* sectin top */
    #top {    
        background-image: url('../img/bg-book.png');
        background-size: 350px;
        background-repeat: no-repeat;
        background-position: right top;
    }

    .top {
        text-align: center;
        margin: 0 auto;
    }

    .top img {
        display: inline-block;
    }

    #coffee {
        margin: 30px 0;
        padding: 0;
    }

    /* section aboutus */
    .aboutus {
        text-align: center;
        margin: 0 auto;
    }

    .aboutus img {
        display: inline-block;
        margin: 0 auto;
    }

	#aboutusimg2 {
		display:none;
	}

    .aboutus ul {
        list-style: none;
        padding: 0;
        margin: 20px 0 50px 0;
    }

    .aboutus ul li:nth-child(2),
    .aboutus ul li:nth-child(3),
    .aboutus ul li:nth-child(4) {
        font-size: 14pt;
    }
    .aboutus ul li:nth-child(2){letter-spacing: -0.6px;}
    .aboutus ul li:nth-child(3){letter-spacing: 0px;}
    .aboutus ul li:nth-child(4){letter-spacing: 0px;}

    /* section service */
    #service {
        background-image: url("../img/penstand.png");
        background-position: right bottom;
        background-repeat: no-repeat;
    }

    .service {
        text-align: center;
        margin: 0 auto;
    }

    .service img:nth-child(1) {
        display: block;
		margin: 0 auto;
    }

    .service table {
        width: 1000px;
        margin: 0;
        padding: 0;
		display: block;
    }
	
	.mobiletable {
		display: none;
	}
	
    .service table td,
    .service table th {
        width: 500px;
    }

    .service table thead th {
        font-size: 20pt;
        text-align: center;
    }

    .service table tbody th  {
        padding: 0;
		margin: 0;
    }

    .service table span {
        font-weight: bolder;
        color: #d12525;
    }
	
	#unfixcontact {
		display:block;
		margin: 0 auto;
	}

    /* section skills */
    .skills {
        text-align: center;
        margin: 0 auto;
    }

    .skills img {
        display: inline-block;
        margin-bottom: 20px;
    }
    .works th{
        padding: 0 0 30px;
    }
    .works tbody{
        padding: 0 0 30px;
    }
    .works thead th{
        padding: 30px 0 30px;
    }
    .works thead th{
        font-size: 30px;
    }
    .skills table,
    .skills table tr,
    .skills table thead {
        width: 90%;
        margin: 0 auto;
    }

    .skills table tr {
        margin: 15px 0 !important;
    }

    .skills table th {
        text-align: center;
        width: 30%;
        vertical-align: top;
    }

    .skills table thead th {
        font-size: 16pt;
    }

    .skills table td {
        text-align: left;
        vertical-align: bottom;
    }

    .skills table td ul {
        margin-bottom: 70px;
    }

    .skills table td ul li {
        border-bottom: 1px solid #252624;
    }

    /* section contact us */
    .contact {
        text-align: center;
        margin: 0 auto;
        font-family: arial, sans-serif;
    }

    .contact img:first-child {
        display: inline-block;
    }

    #contactfix {
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

    .contactfix {
        position: fixed;
        bottom: -810px;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

    .contactfix:hover {
        bottom : -720px;
        z-index: 100;
    }

    .contactfixed {
        position: fixed;
        z-index: 100;
        bottom: -50px !important;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

    #contactbg {
        background-image: url('../img/contactform.png');
        background-size: 1000px 900px;
        background-repeat: no-repeat;
        position: relative;
        width: 1000px;
        height: 900px;
    }

    #closecontact {
        position: fixed;
        right: 200px;
        top: 30px;
        display: none;
        cursor: pointer;
        z-index: 101;
        width: 64px;
        height: 64px;
        background-image: url('../img/circle.png');
        background-position: center;
        background-repeat: no-repeat;
        border: none;
        background-color: transparent;
    }

    #mailformpro {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        text-align: left;
        padding: 150px  250px 0!important;
    }

    #mailformpro div {
        width: auto;
        margin-bottom: 10px;
    }

    #mailformpro div p {
        padding: 0 10px;
    }

    #mailformpro div input {
        width: 100%;
        height: 50px;
        border: none;
        border-bottom: 1px solid #dddddd !important;
        background-color: transparent;
        font-size: 12pt;
        font-weight: 100;
    }
    input::-webkit-input-placeholder {
        color: #999;
        font-weight: 100;
    }
    input:-ms-input-placeholder {
        color: #999;
        font-weight: 100;
    }
    input::-moz-placeholder {
        color: #999;
        font-weight: 100;
    }

    .select-box select {
        position: relative;
        width: 100%;
        padding: 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        border-bottom: 1px solid #dddddd !important;
        border-radius: 0;
    }

    .select-box label {
        position: relative;
    }

    .select-box label:after {
        display: block;
        content: " ";
        position: absolute;
        top: 200%;
        left: 470px;
        width: 20px;
        height: 20px;
        margin-top: -8px;
        background: url('../img/arrows.png') 0 0 no-repeat;
        background-size: 20px;
        pointer-events: none;
        z-index: 1;
    }

    /* footer */
    footer {
        width: 100%;
        position: static;
        background-color: #242527;
        color: #fff;
        box-shadow: 0 -6px 30px #a1a1a1;
        font-family: arial, sans-serif;
    }

    .footer {
        height: 100%;
        width: 1000px;
        display: block;
        margin: 0 auto;
        padding: 30px 0 0;
        text-align: center;
    }

    .footer ul {
        display: inline-block;
        text-align: left;
        right: 0;
        font-weight: bold;
        list-style: none;
        padding: 0 0 30px;
        width:230px;
    }
.footer ul li {
        color: #999;
    }
    .footer p {
        text-align: center;
    }
}

@media screen and (max-width: 1249px){
    #top {
        background: none;
    }
}
@media screen and (max-width: 1000px) and (min-width: 751px) {
    html,
    body,
    main,
    article {
        width: 100%;
        height: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        position: static;
        background-color: #ecece8;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",     "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",           "ＭＳ 明朝", serif;
    }

    section {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        position: static;
        background-color: #ecece8;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",     "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",           "ＭＳ 明朝", serif;
    }

    h1 {
        margin: 0;
        font-size: 24pt !important;
        letter-spacing: -4px;
    }
    
    img {
        max-width: 100%;
    }
        #loader{
        width: 659px;
        height: 202px;
        display: none;
        position: fixed;
        _position: absolute;     /* IE6対策 */
        top: 50%;
        left: 50%;
        margin-top: -101px;       /* heightの半分のマイナス値 */
        margin-left: -330px;      /* widthの半分のマイナス値 */
        z-index: 10;             /* #fadeより多い値を入れて下さい */
    }
    #fade{
        width: 100%;
        height: 100%;
        display: none;
        background-color: #DFE3DC;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 5;              /* #loaderより少ない値を入れて下さい */
    }

    /* ナビゲーションバー */
    nav {
        width: 58px;
        height: 100%;
        padding: 58px 0 0;
        position: fixed;
        top: 0;
        left: -58px;
        background: #666665;
        z-index: 100;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        overflow-y: scroll;
    }

    nav ul {
        width: 100%;
        list-style: none;
        position: relative;
        top: 0;
        margin: 0;
        padding: 0;
        font-size: 0;
    }

    nav ul li {
        position: relative;
        padding-bottom: 5px;
        left: -2px;
    }

    header nav ul li a,
    header.fixed nav ul li a {
        width: 100%;
        height: 100%;
        position: relative;
        -webkit-transition: .1s ease-in-out;
        -moz-transition: .1s ease-in-out;
        transition: .1s ease-in-out;
    }

    .inner {
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
    }

    .inner:after {
        content: "";
        clear: both;
        display: block;
    }

    header {
        top: 0;
        left: 0;
        position: fixed;
        width: 58px;
        height: 100%;
        margin: 0 auto;
        padding: 0;
        line-height: 1;
        z-index: 999;
        overflow:hidden;
    }

    header a,
    header {
        color: #fff;
        text-decoration: none;
    }

    header .inner { position: relative;}

    header.fixed {
        margin-top: 0;
        top: 0;
        position: fixed;
        padding-top: 0;
        height: 100%;
        background: transparent;
        transition: top 0.65s ease-in;
        -webkit-transition: top 0.65s ease-in;
        -moz-transition: top 0.65s ease-in;
    }
    
        #head {
        background: none;
        width: 58px;
        height: 100%;
        z-index: 999;
        position: relative;
    }

    #navbtn {
        display: block;
        position: fixed;
        left: 10px;
        top: 10px;
        width: 38px;
        height: 38px;
        cursor: pointer;
        z-index: 100;
    }
    #navbtn div { position: relative;}

    #navbtn span {
        display: block;
        position: absolute;
        height: 4px;
        width: 100%;
        background: #f7921c;
        left: 0;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
    }

    #navbtn span:nth-child(1) { top: 0;}
    #navbtn span:nth-child(2) { top: 11px;}
    #navbtn span:nth-child(3) { top: 22px;}

    /* ナビゲーションバーアニメーション */
    .open #navbtn span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }

    .open #navbtn span:nth-child(2) {
        width: 0;
        left: 50%;
    }

    .open #navbtn span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }

    .open nav{
        -moz-transform: translateX(58px);
        -webkit-transform: translateX(58px);
        transform: translateX(58px);
    }

    /* メイン */
    section {
        width: 100%;
        min-width:100%;
    }

    section div {
        display: block;
        width: 100%;
    }

    /* sectin top */
    #top {    
        background: none;
    }

    .top {
        text-align: center;
        margin: 0 auto;
    }

    .top img {
        display: inline-block;
    }

    #coffee {
        margin: 30px 0;
        padding: 0;
    }

    /* section aboutus */
    .aboutus {
        text-align: center;
        margin: 0 auto;
    }

    .aboutus img {
        display: inline-block;
    }

	#aboutusimg2 {
		display:none;
	}

    .aboutus ul {
        list-style: none;
        padding: 0;
        margin: 20px 0 50px 0;
    }

    .aboutus ul li:nth-child(2),
    .aboutus ul li:nth-child(3),
    .aboutus ul li:nth-child(4) {
        font-size: 14pt;
    }
    .aboutus ul li:nth-child(2){letter-spacing: -0.6px;}
    .aboutus ul li:nth-child(3){letter-spacing: 0px;}
    .aboutus ul li:nth-child(4){letter-spacing: 0px;}

    /* section service */
    #service {
        background: none;
    }

    .service {
        text-align: center;
        margin: 0 auto;
    }

    .service img {
        display: inline-block;
    }

    .service table {
        width: 100%;
        margin: 0;
        padding: 0;
    }
	
	.mobiletable {
		display: none;
	}

    .service table td,
    .service table th {
        width: 50%;
        margin: 0;
    }

    .service table thead th {
        font-size: 20pt;
        text-align: center;
    }

    .service table tbody th  {
        padding: 0 7%;
    }

    .service table span {
        font-weight: bolder;
        color: #d12525;
    }

    /* section skills */
    .skills {
        text-align: center;
        margin: 0 auto;
    }

    .skills img:nth-child(1) {
        display: inline-block;
        margin-bottom: 70px;
    }

    .skills table,
    .skills table tr,
    .skills table thead {
        width: 90%;
        margin: 0 auto;
    }

    .skills table tr {
        margin: 15px 0 !important;
    }

    .skills table th {
        text-align: center;
        width: 30%;
    }

    .skills table thead th {
        font-size: 16pt;
    }

    .skills table td {
        text-align: left;
        vertical-align: bottom;
    }

    .skills table td ul {
        margin-bottom: 70px;
    }

    .skills table td ul li {
        border-bottom: 1px solid #252624;
    }

    /* section contact us */
    .contact {
        text-align: center;
        margin: 0 auto;
        font-family: arial, sans-serif;
    }

    .contact img:first-child {
        display: inline-block;
    }

    #contactbg {
        background-image: url('../img/contactform.png');
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
        width: 100%;
        height: 1255px;
    }

    #closecontact {
        display:none;
    }

    #mailformpro {
        position: relative;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        text-align: left;
        padding: 90px  24% 0!important;
    }

    #mailformpro div {
        width: auto;
        margin-bottom: 10px;
    }

    #mailformpro p {
        padding: 0 10px;
        display: none;
    }

    #mailformpro div input {
        width: 100%;
        height: 50px;
        border: none;
        border-bottom: 1px solid #dddddd !important;
        background-color: transparent;
        font-size: 12pt;
        font-weight: 100;
    }
    input::-webkit-input-placeholder {
        color: #999;
        font-weight: 100;
    }
    input:-ms-input-placeholder {
        color: #999;
        font-weight: 100;
    }
    input::-moz-placeholder {
        color: #999;
        font-weight: 100;
    }

    .select-box select {
        position: relative;
        width: 100%;
        padding: 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        border-bottom: 1px solid #dddddd !important;
        border-radius: 0;
    }

    .select-box label {
        position: relative;
    }

    .select-box label:after {
        display: block;
        content: " ";
        position: absolute;
        left: 101%;
        top: 8px;
        width: 20px;
        height: 20px;
        margin-top: -8px;
        background: url('../img/arrows.png') 0 0 no-repeat;
        background-size: 20px;
        pointer-events: none;
        z-index: 1;
    }

    /* footer */
    footer {
        width: 100%;
        position: static;
        background-color: #242527;
        color: #fff;
        box-shadow: 0 -6px 30px #a1a1a1;
        font-family: arial, sans-serif;
    }

    .footer {
        height: 100%;
        width: 100%;
        display: block;
        margin: 0 auto;
        padding: 30px 0 0;
        text-align: right;
    }

    .footer ul {
        display: inline-block;
        text-align: left;
        right: 0;
        font-weight: bold;
        list-style: none;
        padding: 0;
    }

    .footer p {
        text-align: center;
    }
}
@media screen and (max-width: 750px) {
    html,
    body,
    main,
    article {
        width: 100%;
        height: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        position: static;
        background-color: #ecece8;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",     "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",           "ＭＳ 明朝", serif;
    }

    section {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        position: static;
        background-color: #ecece8;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",     "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",           "ＭＳ 明朝", serif;
    }

    h1 {
        margin: 0;
        font-size: 20pt !important;
        letter-spacing: -4px;
    }
    
    img {
        max-width: 100%;
    }
    
    #loader{
        width: 100%;
        height: auto;
        display: none;
        position: fixed;
        _position: absolute;     /* IE6対策 */
        top: 50%;
        left: 50%;
        margin-top: -101px;       /* heightの半分のマイナス値 */
        margin-left: -330px;      /* widthの半分のマイナス値 */
        z-index: 10;             /* #fadeより多い値を入れて下さい */
    }
    #fade{
        width: 100%;
		max-width:100%;
        height: 100%;
        display: none;
        background-color: #DFE3DC;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 5;              /* #loaderより少ない値を入れて下さい */
    }
    /* ナビゲーションバー */
    nav {
        width: 58px;
        height: 100%;
        padding: 58px 0 0;
        position: fixed;
        top: 0;
        left: -58px;
        background: #666665;
        z-index: 100;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        overflow-y: scroll;
    }

    nav ul {
        width: 100%;
        list-style: none;
        position: relative;
        top: 0;
        margin: 0;
        padding: 0;
        font-size: 0;
    }

    nav ul li {
        position: relative;
        padding-bottom: 5px;
        left: -2px;
    }

    header nav ul li a,
    header.fixed nav ul li a {
        width: 100%;
        height: 100%;
        position: relative;
        -webkit-transition: .1s ease-in-out;
        -moz-transition: .1s ease-in-out;
        transition: .1s ease-in-out;
    }

    .inner {
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
    }

    .inner:after {
        content: "";
        clear: both;
        display: block;
    }

    header {
        top: 0;
        left: 0;
        position: fixed;
        width: 58px;
        height: 100%;
        margin: 0 auto;
        padding: 0;
        line-height: 1;
        z-index: 999;
        overflow:hidden;
    }

    header a,
    header {
        color: #fff;
        text-decoration: none;
    }

    header .inner { position: relative;}

    header.fixed {
        margin-top: 0;
        top: 0;
        position: fixed;
        padding-top: 0;
        height: 100%;
        background: transparent;
        transition: top 0.65s ease-in;
        -webkit-transition: top 0.65s ease-in;
        -moz-transition: top 0.65s ease-in;
    }
    
        #head {
        background: none;
        width: 58px;
        height: 100%;
        z-index: 999;
        position: relative;
    }

    #navbtn {
        display: block;
        position: fixed;
        left: 10px;
        top: 10px;
        width: 38px;
        height: 38px;
        cursor: pointer;
        z-index: 100;
    }
    #navbtn div { position: relative;}

    #navbtn span {
        display: block;
        position: absolute;
        height: 4px;
        width: 100%;
        background: #f7921c;
        left: 0;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
    }

    #navbtn span:nth-child(1) { top: 0;}
    #navbtn span:nth-child(2) { top: 11px;}
    #navbtn span:nth-child(3) { top: 22px;}

    /* ナビゲーションバーアニメーション */
    .open #navbtn span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }

    .open #navbtn span:nth-child(2) {
        width: 0;
        left: 50%;
    }

    .open #navbtn span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }

    .open nav{
        -moz-transform: translateX(58px);
        -webkit-transform: translateX(58px);
        transform: translateX(58px);
    }

    /* メイン */
    section {
        width: 100%;
        min-width:100%;
    }

    section div {
        display: block;
        width: 100%;
    }

    /* sectin top */
    #top {    
        background: none;
    }

    .top {
        text-align: center;
        margin: 0 auto;
    }

    .top img {
        display: inline-block;
    }
	
	#logo {
		width:80%;
		margin: 0 auto;
	}
	
    #coffee {
        margin: 30px 0;
        padding: 0;
    }
	
	.wbr {
		display: block;
		text-align: center;
	}
    /* section aboutus */
    .aboutus {
        text-align: center;
        margin: 0 auto;
    }

    .aboutus img {
        display: inline-block;
    }

	#aboutusimg {
		display:none;
	}

    .aboutus ul {
        list-style: none;
        padding: 0;
        margin: 20px 0 50px 0;
    }

    .aboutus ul li:nth-child(2),
    .aboutus ul li:nth-child(3),
    .aboutus ul li:nth-child(4) {
        font-size: 14pt;
    }
    .aboutus ul li:nth-child(2){letter-spacing: -0.6px;}
    .aboutus ul li:nth-child(3){letter-spacing: 0px;}
    .aboutus ul li:nth-child(4){letter-spacing: 0px;}

    /* section service */
    #service {
        background: none;
    }

    .service {
        text-align: center;
        margin: 0 auto;
    }

    .service img {
        display: inline-block;
    }

    .service table {
        width: 100%;
        margin: 0;
        padding: 0;
    }

	.pctable,
	.pctable img {
		display: none !important;
	}

    .service table td,
    .service table th {
        width: 100%;
        margin: 0;
    }

    .service table thead th {
        font-size: 20pt;
        text-align: center;
    }

    .service table tbody th  {
        padding: 0 7%;
    }

    .service table span {
        font-weight: bolder;
        color: #d12525;
    }

    /* section skills */
    .skills {
        text-align: center;
        margin: 0 auto;
    }

    .skills img:nth-child(1) {
        display: inline-block;
        margin-bottom: 70px;
    }

    .skills table,
    .skills table tr,
    .skills table thead {
        width: 90%;
        margin: 0 auto;
    }

    .skills table tr {
        margin: 15px 0 !important;
    }

    .skills table th {
        text-align: center;
        width: 100%;
		display: block;
		margin: 0 auto;
    }

    .skills table thead th {
        font-size: 16pt;
    }

    .skills table td {
        text-align: left;
        vertical-align: bottom;
        text-align: center;
        width: 100%;
		display: block;
		margin: 0 auto;
    }
.skills th p{
    margin: -50px 0 30px;
}
    .skills table td ul {
        margin-bottom: 70px;
    }

    .skills table td ul li {
        border-bottom: 1px solid #252624;
    }

    /* section contact us */
    .contact {
        text-align: center;
        margin: 0 auto;
        font-family: arial, sans-serif;
		position: relative;
		overflow-x: hidden !important;
        z-index: 9999;
    }

    .contact img:first-child {
        display: inline-block;
    }

    #contactbg {
        background-image: url('../img/contactform.png');
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
        width: 150%;
		height: 100%;
		left: -28%;
		overflow-x: hidden !important;
    }

    #closecontact {
        display:none;
    }

    #mailformpro {
        position: relative;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        text-align: left;
        padding: 90px  24% 0!important;
    }

    #mailformpro div {
        width: auto;
        margin-bottom: 10px;
    }

    #mailformpro p {
        padding: 0 10px;
        display: none;
    }

    #mailformpro div input {
        width: 100%;
        height: 50px;
        border: none;
        border-bottom: 1px solid #dddddd !important;
        background-color: transparent;
        font-size: 12pt;
        font-weight: 100;
    }
    input::-webkit-input-placeholder {
        color: #999;
        font-weight: 100;
    }
    input:-ms-input-placeholder {
        color: #999;
        font-weight: 100;
    }
    input::-moz-placeholder {
        color: #999;
        font-weight: 100;
    }

    .select-box select {
        position: relative;
        width: 100%;
        padding: 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        border-bottom: 1px solid #dddddd !important;
        border-radius: 0;
    }

    .select-box label {
        position: relative;
    }

    .select-box label:after {
        display: block;
        content: " ";
        position: absolute;
        left: 101%;
        top: 8px;
        width: 20px;
        height: 20px;
        margin-top: -8px;
        background: url('../img/arrows.png') 0 0 no-repeat;
        background-size: 20px;
        pointer-events: none;
        z-index: 1;
    }

    /* footer */
    footer {
        width: 100%;
        position: static;
        background-color: #242527;
        color: #fff;
        box-shadow: 0 -6px 30px #a1a1a1;
        font-family: arial, sans-serif;
    }

    .footer {
        height: 100%;
        width: 100%;
        display: block;
        margin: 0 auto;
        padding: 30px 0 0;
        text-align: left;
    }

    .footer ul {
        display: inline-block;
        text-align: left;
        right: 0;
        font-weight: bold;
        list-style: none;
        padding: 0;
    }

    .footer p {
        text-align: center;
    }
}