@Charset "Shift_JIS";
 /*-------------------------------------------------------------------------------------------------------------------------------------------------*/
  /*------------------------------ 見 出 し ------------------------------*/

   article,aside,canvas,details,figcaption,figure,header,footer,menu,nav,section,summary {
                                                                                          display : block;
                                                                                         }

   h1, h2, h3, h4, h5, h6 { font-family : "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "ヒラギノ角ゴ", "メイリオ", "sans-serif"; }

   input,textarea,select { font-family : "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "ヒラギノ角ゴ", "メイリオ", "sans-serif"; }

   html, body *{
                margin : 0;
                padding : 0;
               }

   img {
        max-width : 100%;
        height : auto;
       }

 /*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media only screen and (min-width : 279px) and (max-width : 650px) {

  /*------------------------------------------------  ここから通常の CSS を記述  ---------------------------------------------------------*/

   @media only screen and (width : 280px) {

                                           body { font-size : 14px }

                                           .cb-headers .headers-logo {
                                                                      text-align : left;
                                                                      margin : 11px 10px;
                                                                      height : 34px;
                                                                     }

                                           .cb-headers .main-logoImg { height : 34px; }

                                           .h-menuCheckbox {
                                                            top : 21px;
                                                            right : 16px;
                                                           }

                                           .h-menu_icon {
                                                         top : 8px;
                                                         right : 10px;
                                                        }

                                           .h-menu p {
                                                      top : 29px;
                                                      right : 10px;
                                                     }

                                          .warp { margin : 216px auto 202px; }

                                          .footer .Copyright { font-size : 12px; }

                                          }

  /*--------------------------------------------------------  メイン画像  ----------------------------------------------------------------*/

   .fv { display : none; }                                  /*----------  PC画像を非表示設定  ----------*/

   .S_fv {                                                    /*----------  画像がスライドアップ  ----------*/
        position : fixed;
        top : 0;
        left : 0;
        width : 100%;
        height : 216px;
        z-index : -1;
       }

   .main_imgBox {
                 position : relative;
                 overflow : hidden;
                 height : 216px;
                }

   .main_img {
              position : absolute;
              top : 0;
              left : 0;
              width : 100%;
              height : 216px;
              background-position : center center;
              background-repeat : no-repeat;
              background-size : cover;
              opacity : 0;
              z-index : 10;
              -webkit-animation : anime 36s 0s infinite;
              animation : anime 36s 0s infinite;
             }

   .main_img:nth-of-type(2) {
                             -webkit-animation-delay : 6s;
                             animation-delay : 6s;
                            }

   .main_img:nth-of-type(3) {
                             -webkit-animation-delay : 12s;
                             animation-delay : 12s;
                            }

   .main_img:nth-of-type(4) {
                             -webkit-animation-delay : 18s;
                             animation-delay : 18s;
                            }

   .main_img:nth-of-type(5) {
                             -webkit-animation-delay : 24s;
                             animation-delay : 24s;
                            }

   .main_img:nth-of-type(6) {
                             -webkit-animation-delay : 30s;
                             animation-delay : 30s;
                            }

   @keyframes anime {
                       0% {
                           opacity : 0;
                          }

                       8% {
                           opacity : 1;
                          }

                      17% {
                           opacity : 1;
                          }

                      25% {
                           opacity : 0;
                           transform : scale(1.2);
                           z-index : 9;
                          }

                     100% { opacity : 0 }
                    }

   @-webkit-keyframes anime {
                               0% {
                                   opacity : 0;
                                  }

                               8% {
                                   opacity : 1;
                                  }

                              17% {
                                   opacity : 1;
                                  }

                              25% {
                                   opacity : 0;
                                   -webkit-transform : scale(1.2);
                                   z-index : 9;
                                  }

                             100% { opacity :  0 }
                            }

  /*-------------------------------------------------------  コーティング  -----------------------------------------------------*/

/*   .main_img::before {
                      content : '';
                      display : block;
                      position : absolute;
                      top : 0;
                      right : 0;
                      bottom : 0;
                      left : 0;
                      width : 100%;
                      height : 216px;
                      background-color : rgba(0,0,0,0.2);
                      z-index : -1;
                     }*/

  /*------------------------------------------------------------------  js-marker  ---------------------------------------------------------------------------*/

  /*------------------------------------------------  アニメーション前のスタイル  --------------------------------------------------------*/

   .js-marker {
               display : inline;
               position : relative;
               background-image : linear-gradient(90deg, rgb(85,255,0), rgb(85,255,0));       /*----- 単色の場合は同じ色、グラデーションさせる場合は別々の色  -----*/

  /*------------------------------------------------------  yellow,  yellow  蛍光イエロー  -----------------------------------------------*/

               background-repeat : no-repeat;
               background-position : bottom left;
               background-size : 0 22%;                                         /*----- '30%'の部分にマーカーの太さを記入 -----*/
               transition : all 2s ease-in-out;                                 /*----- マーカーを引く速度を調整 -----*/
             /*font-weight: bold;*/                                             /*----- ついでに太字にしたい場合 -----*/
              }

  /*---------------------------------------------------  アニメーション発火時  -----------------------------------------------------------*/

   .js-marker.inview {
                      background-size : 100% 22%;                               /*----- '30%'の部分は上で設定した太さに合わせる -----*/
                     }

  /*--------------------------------------------------------------------  marker  ----------------------------------------------------------------------------*/

    .mark1 {
            background : linear-gradient(transparent 80%, rgb(255,105,180) 80%);          /*-----  蛍光ピンク  -----*/
            color : #333;
           }

  /*----------  transparent : 線の太さ指定（ ％を大きくする程、細くなる ） , 色の指定と色の濃さ  ----------*/

    .mark2 {
            background : linear-gradient(transparent 80%, yellow 80%);                    /*-----  蛍光イエロー  -----*/
            color : #333;
           }

    .mark3 {
            background : linear-gradient(transparent 80%, rgb(85,255,0) 80%);             /*-----  蛍光グリーン  -----*/
            color : #333;
           }

    .mark4 {
            background : linear-gradient(transparent 80%, rgb(0,213,255) 80%);            /*-----  蛍光ブルー  -----*/
            color : #333;
           }

    .mark5 {
            background : linear-gradient(transparent 80%, rgb(255,170,0) 80%);            /*-----  蛍光オレンジ  -----*/
            color : #333;
           }

    .mark6 {
            background : linear-gradient(transparent 40%, yellow 80%);            /*-----  蛍光イエロー 太い  -----*/
            color : #333;
           }

  /*--------------------------------------------------------------------------------------------------------------------------------------*/
                                                                      }          /*-------------------- @media End --------------------*/
  /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/