@charset "utf-8";
@media screen and (min-width: 980px) {
  /* PC用の記述 */
  /*モーダルウィンドウ*/
  #boxer.mobile {
    background: rgba(0,0,0,.8) !important;
  }
  #boxer.mobile .boxer-meta,
  #boxer.mobile .boxer-container,
  #boxer.mobile .boxer-content {
    background: transparent !important;
  }
}

@media screen and (max-width: 979px) {
  /* タブレット用の記述 */
  #container,
  #header,
  #main,
  #footer,
  #header > .inner,
  #main > .inner,
  #footer > .inner {
    width:100%;
  }
}
@media screen and (max-width: 800px) {
    /* スマートフォン・タブレット縦用の記述 */
    #main > .inner {
      display:block;
    }
    #main #main_content,
    #main #sidebar {
      width:100%;
      padding-left:0;
      padding-right:0;
      margin-left:0;
      margin-right:0;
      float:none;
    }

    .text {
        overflow:visible;
    }

    /*テーブルスクロール
    -----------------------------*/
    
    .scroll_box {
      overflow-x: auto;
      margin-bottom: 20px;
      width: 100%; /*20201211Add：横幅いっぱいにならない内包要素の場合に、横幅が狭くなる不具合に対応*/
      /*-webkit-overflow-scrolling: touch; スクロールバーが表示されなくなる*/
    }
    .scroll_box::-webkit-scrollbar {
      height: 5px;
    }
    .scroll_box::-webkit-scrollbar-track {
      border-radius: 5px;
      background: #eee;
    }
    .scroll_box::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #666;
    }
}
@media screen and (max-width: 481px) {
    /*スマホのみの記述*/

    /*フォーム関連
    -----------------------------*/
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    textarea,
    select[multiple="multiple"],
    .dropdown select {
        font-size: 16px;
    }
    /*お問い合わせフォーム*/
    #contactform .contact-form-field {
      display: block;
    }
    /*ラベルと入力部分*/
    #contactform .form-label,
    #contactform .form-element {
      display: block;
      width: auto;
      margin-bottom: 0 !important;
    }
    #contactform .form-element {
      padding-left: 0;
      padding-right: 0;
    }
    /*画像スタイル
    -----------------------------*/
    figure.side:not(.sp_same),
    figure.mirror:not(.sp_same) {
      max-width: 100%;      
      float:none;
      margin-left:auto;
      margin-right:auto;
    }

    /*カラムレイアウトスタイル
    -----------------------------*/
    .col_2 > *,
    .col_3 > * {
      width:calc(100%);
    }
    .col_4 > * {
      width:calc(100% / 2);
    }
    .col_5 > *,
    .col_6 > * {
      width:calc(100% / 3);
    }

    /*初心者用　画像の配置
    -----------------------------*/
    img.mt-image-right,
    img.mt-image-left,
    img.mt-image-center {
        float: none !important;
        display: block;
        margin: 0 auto 20px !important;
        width: auto;
    }
}