@charset "utf-8";

@media only screen and (max-width: 768px) {
  /* ========================================

  * ページ共通

  ======================================= */
  html {
  }
  body {
    -webkit-text-size-adjust: 100%; /* iphone safari ランドスケープ文字サイズ処理 */
  }
  /* レスポンシブ表示・非表示切り替え */
  .pc-show {
    display: none !important;
  }
  .tab-show {
    display: block !important;
  }
  .sm-show {
    display: none !important;
  }
  .tab-sm-show {
    display: block;
  }
  .sm-img {
    width: 100%;
    height: auto
  }

  /* ページ幅 */
  #container {
  /*	background: url(../images/bg_img_left.png) no-repeat 2% 141px,
                url(../images/bg_img_right.png) no-repeat 98% 141px;*/
    min-width: inherit;
  }
  .index #container {
    background-size: 25% auto,
                      25% auto;
  }
  /* ページ幅 */
  .inner {
    width: 100%;
    padding: 0 20px;
  }



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

  * header

  ======================================= */
  #header {
  }
  #header header .header-cont-wrap {
    padding-top: 20px;
  }
  /* ========================================

  * gnav

  ======================================= */
  #gnav {
    padding: 0 20px;
  }
  #gnav nav li {
    border: none;
    width: 100%;
    margin: 0 0 0px 0;
    padding: 0;
  }
  #gnav nav li:last-child {
    border-right: none;
  }
  #gnav nav li a {
    color: #fff;
  }
  /* ========================================

  * sm-nav

  ======================================= */
  .sm-nav {
  }
  .sm-nav .drawer-nav {
      /*padding-top: 6rem;
      padding-right: 1.5em;
      padding-left: 1.5em;*/
      background: #7e5933;
  }
  .sm-nav .drawer-nav ul.drawer-menu  {
    margin-top: 30px;
    margin-bottom: 1.5em;
    padding-top: 15px;
    padding-right: 20px;
    padding-left: 20px;
  }
  .sm-nav .drawer-nav ul.drawer-menu li   {
      padding-top: 1em;
      padding-bottom: 1em;
      border-bottom: 1px dotted #fff;
  }
  .sm-nav .drawer-nav ul.drawer-menu li a {
    display: block;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dotted #fff;
  }
  .sm-nav .drawer-nav ul.drawer-menu li:first-child a {
    padding-top: 15px;
    border-top: 1px dotted #fff;
  }
  .sm-nav .drawer-nav ul.drawer-menu li:last-child {
      padding-bottom: 0;
      border-bottom: none;
  }
  .sm-nav .drawer-nav ul.drawer-menu a {
      color: #fff;
      font-size: 14px;
  }
  .sm-nav .drawer-hamburger {
      top: 30px;
      right: 20px;
      border: 1px solid #7e5933;
      padding-top: 16px;
      padding-bottom: 26px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      background: #fff;
  }
  .drawer--right .sm-nav .drawer-hamburger .drawer-hamburger-icon,
  .drawer--right .sm-nav .drawer-hamburger .drawer-hamburger-icon:before,
  .drawer--right .sm-nav .drawer-hamburger .drawer-hamburger-icon:after {
      background: #7e5933;
  }
  .drawer--right.drawer-open .sm-nav .drawer-hamburger {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: none;
    background-color: transparent;
  }
  .drawer--right.drawer-open .sm-nav .drawer-hamburger .drawer-hamburger-icon {
    background-color: transparent;
  }
  .drawer--right.drawer-open .sm-nav .drawer-hamburger .drawer-hamburger-icon:before,
  .drawer--right.drawer-open .sm-nav .drawer-hamburger .drawer-hamburger-icon:after {
      background: #fff;
  }
  .drawer-overlay {
    background-color: rgba(0,0,0,0.3)
  }
  /* ========================================

  * contents

  ======================================= */
  #contents .mainimg02 {
    width: 100%;
    background: url(../images/index/tab_mainbg.png) 50% 91% no-repeat;
  }
  /* ===== テクノアイについて ===== */
  #contents .inner {
    width: 100%;
  }
  /* ===== できること ===== */
  #contents #service .service-wrap.flex-s-sb {
    display: block;
  }
  #contents #service .service-wrap .service-box {
    margin-right: auto;
    margin-left: auto;
  }
  #contents #service .service-wrap .service-box:first-child {
    margin-bottom: 30px;
  }
  #contents #service .service-des-wrap {
    background: none;
    margin-top: 30px;
    margin-bottom: 0;
    min-height: auto;
  }
  /* ===== 開発実績 ===== */
  #contents #works {
    padding-right: 20px;
    padding-left: 20px;
    margin-bottom: 30px;
  }
  #contents #works .inner {
    width: 100%;
    background: none;
    background-color: #fff;
    border: 1px solid #7e5933;
    border-radius: 10% 10% 10% 14%/5% 5% 7% 6%;
  }
  #contents #works .remore-img {
    width: 100%;
  }
  #contents #works .remore-img li {
    width: 48%;
  }
  #contents #works .remore-des {
    width: 100%;
  }
  #contents #works .remore-des .left,
  #contents #works .remore-des .right {
    width: 100%;
  }
  #contents #works .remore-des .left {
    margin-bottom: 20px;
  }
  #contents #works .remore-des.flex-s-sb {
    display: block;
  }
  #contents #works .remore-des .right .device ul.flex-s-sb {
    justify-content: center;
  }
  #contents #works .remore-des .right .device ul li {
    border-radius: 50%;
    width: 150px;
    height: 150px;
  }
  #contents #works .remore-des .right .device ul li:nth-child(2) {
    margin-right: 2em;
    margin-left: 2em;
  }
  #contents #works .remore-bnr p.btn-wrap img {
    max-width: 100%;
    height: auto;
  }
  /* ===== 下層ページ wrap ===== */
  #contents .contents-wrap {
    padding: 20px;
  }

  /* ===== 一覧テーブル ===== */
  #contents .contents-wrap .list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #contents .contents-wrap .list table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #contents .contents-wrap .list table th {
    white-space: nowrap;
  }
  #contents .contents-wrap .list table td {
    white-space: nowrap;
  }
  /* ========================================

  * リモールのご購入について

  ======================================= */
  #contents #purchase {
    padding-right: 20px;
    padding-left: 20px;
  }
  #purchase .purchase-list li {
    width: 100%;
    margin-bottom: 30px;
  }

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

  * お問い合わせ

  ======================================= */
  #contents #contacts {
    padding-right: 20px;
    padding-left: 20px;
  }
  #contents #contacts.comp .btn {
    width: 100%;
  }
  .register-form table th {
    text-align: center;
    width: 100%;
    display: block;
    border-bottom: none;
    border: solid 1px #cccccc;
  }
  .register-form table td {
    width: 100%;
    display: block;
    padding: 15px;
    border-top: none;
    border-bottom: none;
  }
  .register-form table tr:last-child td {
    border-bottom: solid 1px #cccccc;
  }
  /* 名前・ふりがな欄 */
  .register-form table tr.name td label,
  .register-form table tr.furigana td label {
    display: block;
  }
  .register-form table tr.name td label:first-child,
  .register-form table tr.furigana td label:first-child {
    margin-bottom: 1em;
  }
  .register-form table tr.name td,
  .register-form table tr.furigana td {
  }

  .register-form table tr.name td input[type="text"],
  .register-form table tr.furigana td input[type="text"] {
    width: 100%;
  }
  p.form-btn1 input[type="submit"],
  p.form-btn1 a {
    width: 100%;
  }


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

  * footer

  ======================================= */	
  #footer {
    min-width: inherit;
  }

  #footer .footer-bg {
    text-align: center;
    background: url(../images/footer_img_left.png) no-repeat 0 20px/25% auto,
                url(../images/footer_img_right.png) no-repeat 99% 10px/40% auto,
                url(../images/footer_top_bd.png) 0 bottom repeat-x;
    min-height: 162px;
    margin-bottom: -15px;
  }
  #footer .footer-bg p.contacts-text {
    padding-top: 0;
  }
  #footer footer .footer-nav {
    text-align: center;
    float: none;
    margin-bottom: 20px;
    padding-top: 0;
  }
  #footer footer .footer-nav ul.footer-logo {
    float: none;
  }
  #footer footer .footer-nav ul.footer-link {
    float: none;
    padding-top: 6px;
  }

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

  * 会社概要

  ======================================= */
  #contents #company {
    padding-right: 20px;
    padding-left: 20px;
  }
  .info-table .company-img img {
    max-width: 100%;
    height: auto;
  }
  .info-table table {
    width: 100%;
  }
  .info-table table th {
    width: 100%;
    display: block;
    border-top: none;
    border-bottom: none;
  }
  .info-table table tr:first-child th {
    border-top: solid 1px #cccccc;;
  }
  .info-table table td {
    width: 100%;
    display: block;
  }
  .info-table table td:last-child {

  }

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

  * プライバシーポリシー

  ======================================= */
  #contents #privacy {
    padding-right: 20px;
    padding-left: 20px;
  }	
}