@charset "utf-8";
/* ============================================
   fx-mt4ea.com レスポンシブ対応CSS
   追加方法:
   template/__head.html と template/__head2.html の
   </head> 直前に以下2行を追加する

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="/newcss/responsive.css">
   ============================================ */

@media screen and (max-width: 960px) {

  /* ---- ヘッダー ---- */
  header div.inner {
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 8px;
  }

  header div.inner div.left {
    width: 100% !important;
    float: none !important;
  }

  header div.inner div.right {
    width: 100% !important;
    float: none !important;
  }

  header div.inner div.right ul {
    text-align: left;
    letter-spacing: normal;
  }

  /* ---- フッター ---- */
  footer div.inner {
    width: 100% !important;
    box-sizing: border-box;
    padding: 18px 8px 27px;
  }

  /* ---- メインコンテンツ ---- */
  #main {
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 8px;
  }

  #main2 {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
    padding: 8px;
  }

  #main3 {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
    padding: 8px;
  }

  /* ---- サイドバー ---- */
  #left,
  #left2 {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
    padding: 8px;
  }

  /* ---- ランキング3カラム ---- */
  .col {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-bottom: 16px;
    box-sizing: border-box;
  }

  .col2 {
    width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box;
  }

  /* ---- 工房テーブル ---- */
  .kinou_in {
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 8px;
  }

  .kinou_in2 {
    width: 100% !important;
    box-sizing: border-box;
  }

  .kinou2k {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ---- テーブル全般 ---- */
  table,
  table.kouinfo {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ---- kouinfoテーブルをスマホで縦並び ---- */
  table.kouinfo tr {
    display: block;
    margin-bottom: 8px;
    border-bottom: 2px solid #666;
  }

  table.kouinfo td,
  table.kouinfo th {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    white-space: normal !important;
  }

  /* ---- 画像 ---- */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---- YouTube等iframe ---- */
  iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 200px;
  }

  /* ---- ページャー ---- */
  .pageinfo {
    margin-left: 0 !important;
    margin-top: 16px;
    font-size: 100%;
    white-space: normal !important;
  }

  /* ---- 検索ボックス ---- */
  #search {
    width: 100% !important;
    box-sizing: border-box;
  }

  #searchTextBox {
    width: 75% !important;
    box-sizing: border-box;
  }

  /* ---- lists（サムネ一覧） ---- */
  .lists {
    float: none !important;
    width: 100% !important;
  }

}