@charset "UTF-8";

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

 file name  :  mediaqueries.css

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

@media screen and (max-width: 768px){
    
    body{ min-width: 100%; font-size: 14px;}
    *, *:after, *:before{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    img{ max-width: 100%; width: auto; height: auto;}
    
    /* header */
    .header{ overflow: hidden; padding: 10px 0 10px 5px;}
    .header-inner{ position: relative; display: table; box-sizing: border-box; width: 100%;}
    .header h1{ display: table-cell; float: none; width: 20%; vertical-align: middle; text-align: center;}
    .header h1 img{ width: 100%;}
    .header nav{ display: table-cell; float: none; padding: 5px 0 0; width: 80%; background: none; vertical-align: middle; text-align: left;}
    .header nav .address{ float: none; padding: 0 0 0 5px; width: auto;}
    .header nav .address .name{ font-size: 12px;}
    .header nav .address .contact{ margin: 5px 0 0; font-size: 12px;}
    .header nav .address .contact li{ margin: 0 5px 0 0;}
    .header nav .address .access{ margin: 5px 0 0; font-size: 12px;}
    .header nav .gnav{ display: none;}
    .header #menu{ position: fixed; top: 0; right: 0; z-index: 999; display: block; text-align: center; font-size: 10px; line-height: 1; cursor: pointer;}
    .header #menu i{ display: inline-block; padding: 15px 10px 10px; font-size: 32px;}
    
    #overlay{ position: fixed; top: 0; left: 0; z-index: 9999; display: none; box-sizing: border-box; min-height: 100%; width: 100%; height: 100%; background: #f7f3ee; text-align: center;}
    #overlay ul{ overflow: hidden;}
    #overlay ul li a{ position: relative; display: block; padding: 11px 0 11px 30px; border-bottom: 1px solid #dbd7d3; text-align: left; line-height: 1;}
    #overlay ul li a:after{
        position: absolute;
        top: 50%;
        left: 10px;
        display: block;
        margin-top: -3px;
        width: 4px;
        height: 4px;
        border-right: 2px solid #241309;
        border-bottom: 2px solid #241309;
        content: '';
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    #overlay #close{ display: inline-block; margin: 20px 0 0; line-height: 1; cursor: pointer;}
    
    /* top */
    .top{ padding: 0;}
    .top-inner{ margin: 0; width: 100%;}
    
    .top .list-service{ width: 100%;}
    .top .list-service li{ margin: 0; width: 50%; height: auto;}
    .top .list-service .sp{ display: block;}
    .top .list-service .pc{ display: none;}
    .top .list-service li .box a{ padding: 40px 0 0;}
    .top .list-service .list-web .box a{ padding: 30px 0 0;}
    .top .list-service .list-svn .box a{ padding: 30px 0 0;}
    .top .list-service li h2{ letter-spacing: 0; font-size: 12px;}
    .top .list-service li .ttl{ letter-spacing: 1px; font-size: 22px;}
    .top .list-service .list-iibungaku .ttl{ font-size: 20px;}
    .top .list-service .list-character .ttl{ font-size: 20px;}
    .top .list-service li .more{ margin: 15px 0 0; padding: 0; border: none; font-weight: normal; font-size: 12px; line-height: 1;}
    
    .top .news{ margin: 0; width: 100%; background: #fff;}
    .top .news li{ float: none; margin: 0; width: 100%; height: auto;}
    .top .news li img{ display: none;}
    .top .news li .box-ttl{ position: relative; padding: 30px 0; width: 100%; height: auto; color: #241309;}
    .top .news li .box-ttl h2{ padding: 0; letter-spacing: 1px;}
    .top .news li .box-ttl .ttl{ margin: 10px 0 0; letter-spacing: 1px; font-size: 28px;}
    .top .news li .entry{ padding: 0; border-top: 1px solid #dbd7d3;}
    .top .news li .entry article{ padding: 0; border-bottom: 1px solid #dbd7d3;}
    .top .news li .entry article h1{ margin: 5px 0 0;}
    .top .news li .entry article a{ display: block; padding: 15px;}
    .top .news li .entry .more{ margin: 0; padding: 30px 15px; line-height: 1;}
    
    /* service */
    .service header{ display: inherit; height: auto;}
    .service header .ttl{ display: inherit; box-sizing: border-box; padding: 40px 0; height: auto;}
    .service header h1{ position: relative; box-sizing: border-box; padding: 0 15px; width: 100%; font-size: 22px; line-height: 1;}
    .service header h2{ margin: 15px 0 0; padding: 0 15px; text-align: left; font-size: 15px; line-height: 1.8;}
    .service .ctr{ box-sizing: border-box; padding: 30px 0; width: 100%;}
    .service section{ margin: 30px 0 0;}
    .service .lead{ padding: 0 15px; font-size: 15px;}
    .service section h2{ margin: 0 0 15px; padding: 0 15px; padding: 30px 0 0; border-top: 1px solid #dbd7d3; font-size: 17px;}
    
    .service .list-feature{ padding: 0 15px;}
    .service .list-feature h2{ padding: 30px 0 0; text-align: left; font-size: 17px;}
    .service .list-feature p{ padding: 0; text-align: left;}
    .service .list-feature li{ margin: 15px 0 0; padding: 0 0 30px; width: 100%;}
    .service .list-feature li:first-child{ margin: 15px 0 0;}
    .service .list-feature li:nth-child(even){ margin: 15px 0 0;}
    .service .list-feature li:nth-child(2){ margin: 15px 0 0;}
    .service .list-feature .exp{ box-sizing: border-box; padding: 15px; width: 100%;}
    .service .list-feature .exp h3{ display: inline-block; float: none; margin: 0; padding: 0; font-weight: bold;}
    .service .list-feature .exp p{ margin: 0; padding: 0; border: none;}
    .service .list-feature .fix{ min-height: 0;}
    .service .list-feature .point{ padding: 15px;}
    
    .service .flow{ margin: 0; padding: 30px 15px 0; background: #EDE9E4;}
    .service .flow h2{ padding: 0; border: none;}
    .service .flow .detail{ margin: 0; padding: 0;}
    .service .flow .detail .line{ position: relative; display: inherit; margin: 0; padding: 0; border: none;}
    .service .flow .detail .line h3{ display: inherit; box-sizing: border-box; padding: 15px 0; width: 100%; height: auto; border-top: 1px solid; border-bottom: 1px solid; font-size: 15px;}
    .service .flow .detail .line p{ display: inherit; box-sizing: border-box; padding: 15px 0 30px; width: 100%; height: auto;}
    
    .price{ margin: 0; padding: 0 15px 30px;}
    .price table{ box-sizing: border-box; box-sizing: border-box; margin: 15px 0 0;}
    .price table th br{ display: block;}
    .price table th span{ font-size: 12px;}
    .service .price h2{ margin: 0 -15px; padding: 30px 15px 0; border: none;}
    .price h3{ margin: 30px -15px 0; padding: 0 15px;}
    
    .service .contact{ margin: 0; padding: 30px 15px 0; border: none; text-align: left; font-size:14px; line-height: 1.8;}
    .service .contact a{ font-weight: bold;}
    .service .contact i{ display: inline-block; padding: 0 5px 0 0;}
    
    .service .portfolio{ padding: 30px 15px;}
    .service .portfolio section{ width: 100%;}
    .service .portfolio .more{ position: relative; top: 0; left: 0; margin: 15px 0 0; line-height: 1.8;}
    .service .portfolio h2{ padding: 0; border: none;font-size: 17px; }
    .service .portfolio ul{ margin: 0; width: 100%;}
    .service .portfolio ul li{ float: none; margin: 30px 0 0; padding: 30px 0 0; width: 100%; border-top: 1px dotted #dbd7d3;}
    .service .portfolio ul li h3{ margin: 15px 0 0;}
    .service .portfolio ul li h4{ margin: 5px 0 0;}
    .service .portfolio ul li p{ margin: 10px 0 0;}
    
    .service .innovate{ padding: 30px 15px;}
    .service .innovate section{ width: 100%;}
    .service .innovate .more{ position: relative; top: 0; left: 0; margin: 15px 0 0; line-height: 1.8;}
    .service .innovate h2{ padding: 0; border: none;font-size: 17px; }
    .service .innovate .entry{ overflow: hidden; margin: 30px 0 0; padding: 30px 0 0; border-top: 1px dotted #dbd7d3; border-bottom: none;}
    .service .innovate .entry-ttl{ float: none; width: 100%;}
    .service .innovate .entry-ttl h3{ font-weight: bold; font-size: 15px;}
    .service .innovate .entry-detail{ float: none; margin: 30px 0 0; width: 100%;}
    .service .innovate .entry-detail h4{ margin: 0;}
    .service .innovate .entry-detail p{ margin: 15px 0 0;}
    .service .innovate .entry-detail ul{ margin: 15px 0 0;}
    .service .innovate .entry-detail li{ box-sizing: border-box; margin: 0 4px 8px 0; padding: 8px;}
    
    /* footer */
    .footer{ padding: 0 0 15px; border-top: 1px solid #dbd7d3; background: none;}
    .footer-inner{ width: 100%;}
    .footer nav{ display: none;}
    .footer address{ margin: 0; text-align: left;}
    .footer address h2{ margin: 0 0 15px; padding: 15px; border-top: 1px solid #dbd7d3; border-bottom: 1px solid #dbd7d3; background: #ede9e4; line-height: 1;}
    .footer address p{ margin: 0; padding: 0 15px; line-height: 1.5;}
    .footer address p br{ display: block;}
    .footer .box-p{ position: relative; top: auto; right: auto; margin: 15px 0 0;padding: 0 15px; width: 100%; background: none;}
    .footer .box-p h3{ float: left; clear: left; font-weight: bold; line-height: 1.5;}
    .footer .box-p h3 span{ display: block; font-weight: normal;}
    .footer .box-p figure{ float: right; padding: 5px; width: 20%; background: #fff;}
    .footer .box-p figure img{ vertical-align: middle;}
    
    /* spnav */
    .spnav{ display: block; border-top: 1px solid #dbd7d3;}
    .spnav ul{ overflow: hidden;}
    .spnav ul li{ float: left; width: 50%;}
    .spnav ul li a{ position: relative; display: block; padding: 15px 0; background: #ede9e4; text-align: center; font-weight: bold; line-height: 1;}
    .spnav ul li:first-child a{ border-right: 1px solid #dbd7d3;}
    .spnav ul li a:after{
        position: absolute;
        top: 50%;
        left: 15px;
        display: block;
        margin-top: -3px;
        width: 4px;
        height: 4px;
        border-right: 2px solid #241309;
        border-bottom: 2px solid #241309;
        content: '';
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    
}