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

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

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

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

  /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/

   @media only screen and (min-width : 1282px) and (max-width : 1368px), screen and (min-width : 1369px) {

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

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

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

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

   .main_img {
              position : absolute;
              top : 0;
              left : 0;
              width : 100%;
              height : 500px;
              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 : 500px;
                      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(255,105,180), rgb(255,105,180));       /*----- 単色の場合は同じ色、グラデーションさせる場合は別々の色  -----*/

  /*------------------------------------------------------  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 --------------------*/
 /*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/