/* ======================================================================================================================
◆共通◆
====================================================================================================================== */


body,html, button, input, select, textarea {
    font-family: sans-serif;
}

h1,h2,h3,h4,h5,p {
  margin: 0;
  padding: 0;
}

html, body { 
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  color: #333;
  background: ;
  font-family: "メイリオ",Meiryo,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
  word-break: normal;
  word-wrap: break-word;
}


/*スマホの文字サイズ調整*/
body {
    -webkit-text-size-adjust: 100%;
}

figure {margin: 0;}

ul {list-style: none;}

ul li {float: left;}

/*a:hover {opacity: 0.5;}*/

#wrapper {
  overflow: hidden;
}

.btn{
  background: transparent;
  color: #F2F2F2;

  /* CSS Transition */
  -webkit-transition: background .2s ease-in-out, border .2s ease-in-out;
  -moz-transition: background .2s ease-in-out, border .2s ease-in-out;
  -ms-transition: background .2s ease-in-out, border .2s ease-in-out;
  -o-transition: background .2s ease-in-out, border .2s ease-in-out;
  transition: background .2s ease-in-out, border .2s ease-in-out;
}


/* ==========================================================================
モジュール（レスポンシブ設定）
========================================================================== */


/*スマホサイズ（480px以下の場合）*/
@media (max-width: 480px){
.containers {
  margin: 0 10px;
  }
    }

/*タブレットサイズ（481px〜767pxの場合）*/

 @media (min-width: 481px) {
.containers {
  margin: 0 15px;
    }
}

 @media (max-width: 767px) {
.containers {
  margin: 0 15px;
    }
}

/*大型タブレットサイズ（768px〜1024pxの場合）*/

 @media (min-width: 768px) {
.containers {
  margin: 0 20px;
    }
}

@media (max-width: 1024px){
.containers {
  margin: 0 20px;
  }
    }

/*PCサイズ*/

@media (min-width: 1025px){
.containers {
    width: 965px;
    margin: 0 auto;
    padding: 0 30px;
  }
    }  


/* ==========================================================================
カラム（レスポンシブ設定）
========================================================================== */

@media (min-width: 1025px){
  .col-pc-10 {width:100%;}
  .col-pc-9 {width:90%;}
  .col-pc-8 {width:80%;}
  .col-pc-7 {width:70%;}
  .col-pc-6 {width:60%;}
  .col-pc-5 {width:50%;}
  .col-pc-4 {width:40%;}
  .col-pc-3 {width:30%;}
  .col-pc-2 {width:20%;}
  .col-pc-1 {width:10%;}
}
  


/* ==========================================================================
スマホ設定
========================================================================== */


@media (max-width: 480px){
/*br { display: none; }*/ /*改行打ち消し*/
.kaigyo {display: block;} /*改行*/
.sp img {max-width: 100%;} /*画像*/
    }


/* ==========================================================================
bootstrap_gridのgutter調整
========================================================================== */


.row-0{
    margin-left:0px;
    margin-right:0px;

    > div{
        padding-right:0px;
        padding-left:0px;
    }
}
.row-10{
    margin-left:-5px;
    margin-right:-5px;

    > div{
        padding-right:5px;
        padding-left:5px;
    }
}
.row-20{
    margin-left:-10px;
    margin-right:-10px;

    > div{
        padding-right:10px;
        padding-left:10px;
    }
}
.row-30{
    margin-left:-15px;
    margin-right:-15px;

    > div{
        padding-right:15px;
        padding-left:15px;
    }
}
.row-40{
    margin-left:-20px;
    margin-right:-20px;

    > div{
        padding-right:20px;
        padding-left:20px;
    }
}


/* ==========================================================================
微調整
========================================================================== */
  .ml-col-4 {margin-left: 40%;}
  .ml-col-3 {margin-left: 30%;}
  .ml-col-2 {margin-left: 20%;}
  .ml-col-1 {margin-left: 10%;}

  .mt-180 {margin-top: 180px;}
  .mt-120 {margin-top: 120px;}
  .mt-80 {margin-top: 80px;}
  .mt-60 {margin-top: 60px;}
  .mt-50 {margin-top: 50px;}
  .mt-40 {margin-top: 40px;}
  .mt-30 {margin-top: 30px;}
  .mt-20 {margin-top: 20px;}
  .mt-10 {margin-top: 10px;}

  .mb-60 {margin-bottom: 60px;}
  .mb-50 {margin-bottom: 50px;}
  .mb-40 {margin-bottom: 40px;}
  .mb-30 {margin-bottom: 30px;}
  .mb-20 {margin-bottom: 20px;}
  .mb-10 {margin-bottom: 10px;}

  .ml-40 {margin-left: 40px;}
  .ml-30 {margin-left: 30px;}
  .ml-20 {margin-left: 20px;}
  .ml-10 {margin-left: 10px;}

  .mr-40 {margin-right: 40px;}
  .mr-30 {margin-right: 30px;}
  .mr-20 {margin-right: 20px;}
  .mr-10 {margin-right: 10px;}

  .text-l {text-align: left;}
  .text-r {text-align: right;}

  .fl-r {float: right;}
  .fl-l {float: left;}