@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", "游ゴシック体", "Hiragino Sans", "メイリオ", "sans-serif"; }

   input,textarea,select { font-family : "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "Hiragino Sans", "メイリオ", "sans-serif"; }

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

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

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

  @media only screen and (min-width : 1025px) and (max-width : 1281px) {

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

   body {
         margin : 0;
         padding : 0;
         line-height : 1.6;
         font-family : "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "Hiragino Sans", "メイリオ", "sans-serif";
         font-size : 16px;
         color : #333;
        }

  /*------------------------------------------------------------------  container  ---------------------------------------------------------------------------*/

   #container {
               margin : 0 auto;                             /*----------  ブロックレベル要素を中央揃えにするプロパティ  ----------*/
               width : 100%;
               /*background-color : #1F2C37;*/
              }

  /*--------------------------------------------------------------------  header  ----------------------------------------------------------------------------*/

   .cb-headers { display : none; }

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

   .cb-header {
               display : block;                             /*----------  ブロック要素 : 1つの固まり  ----------*/
               position : fixed;                            /*----------  要素を固定させる値  ----------*/
               top : -100px;                                /*----------  headerの縦幅分を画面外に表示  ----------*/
               left : 0;                                    /*----------  要素を左端に指定  ----------*/
               width : 100%;                                /*----------  横幅いっぱいに表示  ----------*/
               line-height : 100px;                         /*----------  ※ 行間として上下均等に割り振られます  ----------*/
               background-color : #1F2C37;
               z-index : 999;                               /*----------  要素の重なり順を指定  ----------*/
              }

   .cb-header div {
                   position : relative;                     /*----------  現在位置を指定 （親要素）----------*/
                   display : flex;                          /*----------  要素を横並びに指定  ----------*/
                   justify-content : left;                /*----------  要素を中央に指定するプロパテイ  ----------*/
                   overflow-x : hidden;                     /*----------  要素のボックスからはみ出た部分を隠す  ----------*/
                   margin : 10px 0 10px 20px;
                   width : auto;
                   line-height : 80px;
                  }

   .cb-header .header-logo {
                            display : block;
                            line-height : 0;
                           }

   .cb-header .main-logoImg {
                             width : auto;
                             height : 80px;
                            }

   .cb-header .header-navList {
                               position : absolute;         /*----------  相対位置を指定する （子要素）----------*/
                               top : 1px;
                               right : 10px;
                               display : block;             /*----------  block要素 一つの個体として指定  ----------*/
                               list-style-type : none;      /*----------  文字の装飾（下線・上線・取り消し線・点滅）を指定するプロパティ  ----------*/
                               margin : 0;
                               padding : 0;
                               line-height : 80px;
                              }

   .cb-header li {
                  line-height : 26px;
                  width : auto;
                 }

   .cb-header li a {
                    text-decoration : none;                 /*----------  文字の装飾（下線）を指定するプロパティ  ----------*/
                    font-size : 14px;
                    color : #a9abae;
                   }

  /*---------------------------------------------------------------  スライド  ダウン  -----------------------------------------------------------------------*/

   .slide-down {
                top : 0;
                animation-name : slideDown;
                animation-timing-function : ease-in;
                animation-iteration-count : 1;
                animation-delay : 0s;
                transform-origin : 50% 50% 0;
                animation-duration : 0.5s;
                z-index : 10;
               }

   @keyframes slideDown {
                           0% {
                               top : -100px;                 /*----------  スライドするまでは、画面外に指定  幅の変化可  ----------*/
                              }

                         100% {                             /*----------  スライド後は、一番上に固定させる  ----------*/
                               top : 0;
                              }
                        }

  /*---------------------------------------------------------------  スライド  アップ  -----------------------------------------------------------------------*/

   .slide-up {
              top : -100px;
              animation-name : slideUp;
              animation-timing-function : ease-in;
              animation-iteration-count : 1;
              animation-delay : 0s;
              transform-origin : 50% 50%  0;
              animation-duration : 0.5s;
              z-index : 10;
             }

   @keyframes slideUp {
                         0% {
                             top : 0;                       /*----------  スライドが画面トップにくるまでは、一番上に表示  ----------*/
                            }

                       100% {                               /*----------  スライドがトップに来ると、画面外に指定  ----------*/
                             top : -100px;
                            }
                      }

  /*---------------------------------------------------------------------  warp  -----------------------------------------------------------------------------*/

   .warp {
          margin : 500px auto 255px;
          width : 100%;
          background-color : #1F2C37;
          z-index : 5;
         }

  /*----------------------------------------------------------  project1  ----------------------------------------------------------------*/

   .project1 {
              padding : 100px 0;
              width : auto;
              height : 437px;
              background-color : #FFF;
             }

   .p1_title {
              display : flex;                               /*----------  要素を横並びに指定  ----------*/
              align-items : center;                         /*----------  子要素を上下中央で揃えるプロパテイ  ----------*/
              justify-content : center;                     /*----------  子要素を左右中央で揃えるプロパテイ  ----------*/
              margin : 0 0 50px 20px;
              width : 576px;
              height : 58px;
              border-bottom : 1px solid black;
             }

   .p1_title img { height : 38px; }

   .main_block1 {
                 display : flex;                            /*----------  要素を横並びに指定するプロパテイ  ----------*/
                 justify-content : space-around;            /*----------  それぞれの要素に均等な余白をつける指定  要素どうしの余白は両端の余白の2倍の大きさ  ----------*/
                }

   .main_block1 .p1_image {
                           overflow : hidden;
                           line-height : 0;
                           width : 576px;
                           height : 324px;
                          }

   .main_block1 .p1_text {
                          padding : 0 10px;
                          width : 600px;
                          height : 324px;
                         }

  /*--------------------------------------------------------  substance  -----------------------------------------------------------------*/

   .p1_text .p1_substance1 {
                            margin-bottom : 30px;
                            line-height : 1.9;
                            width : auto;
                            min-height : auto;
                           }

   .p1_text .p1_substance2 {
                            margin-bottom : 30px;
                            line-height : 1.9;
                            width : auto;
                            min-height : auto;
                           }

   .p1_text .p1_substance3 {
                            width : auto;
                            min-height : auto;
                           }

  /*---------------------------------------------------------  project2  -----------------------------------------------------------------*/

   .project2 {
              display : flex;                               /*----------  要素を横並びに指定  ----------*/
              justify-content : space-around;               /*----------  それぞれの要素に均等な余白をつける指定  要素どうしの余白は両端の余白の2倍の大きさ  ----------*/
              margin-top : 20px;
              padding : 100px 0;
              width : auto;
              height : 436px;
              background-color : #DDD;
             }

   .project2 .main_block1, .project2 .main_block2,
   .project2 .main_block3 {
                           display : block;
                           margin : 0 auto;
                           padding : 0;
                           width : 384px;
                           height : 446px;
                          }

   .main_block1 .p3_title, .main_block2 .p3_title,
   .main_block3 .p3_title {
                           display : flex;                  /*----------  要素を横並びに指定  ----------*/
                           align-items : center;            /*----------  要素を上下中央に指定  ----------*/
                           justify-content : center;        /*----------  要素を左右中央に指定  ----------*/
                           margin-bottom : 30px;
                           width : 384px;
                           height : 48px;
                          }

   .main_block1 .p3_title img, .main_block2 .p3_title img,
   .main_block3 .p3_title img { height : 28px; }

   .main_block1 .p3_image, .main_block2 .p3_image,
   .main_block3 .p3_image {
                           overflow : hidden;
                           margin-bottom : 30px;
                           padding : 8px;
                           width : 368px;
                           height : 207px;
                           background-color : #FFF;
                          }

   .main_block1 .p3_info, .main_block2 .p3_info,
   .main_block3 .p3_info {
                          text-align : center;
                          margin-bottom : 30px;
                          width : 384px;
                          height : 40px;
                         }

   .main_block1 .p3_btn, .main_block2 .p3_btn,
   .main_block3 .p3_btn {
                         display : flex;
                         align-items : center;
                         justify-content : center;
                         width : 384px;
                         height : 50px;
                        }

  /*----------------------------------------------------------  project3  ----------------------------------------------------------------*/

   .project3 {
              display : flex;                               /*----------  要素を横並びに指定するプロパテイ  ----------*/
              justify-content : space-around;               /*----------  それぞれの要素に均等な余白をつける指定  要素どうしの余白は両端の余白の2倍の大きさ  ----------*/
              margin-top : 20px;
              padding : 100px 0;
              width : auto;
              height : 436px;
              background-color : #DDD;
             }

   .project3 .main_block4,
   .project3 .main_block5 {
                           display : block;
                           margin : 0 auto;
                           padding : 0;
                           width : 384px;
                           height : 446px;
                          }

   .main_block4 .p3_title,
   .main_block5 .p3_title {
                           display : flex;                  /*----------  要素を横並びに指定  ----------*/
                           align-items : center;            /*----------  要素を上下中央に指定  ----------*/
                           justify-content : center;        /*----------  要素を左右中央に指定  ----------*/
                           margin-bottom : 30px;
                           width : 384px;
                           height : 48px;
                          }

   .main_block4 .p3_title img,
   .main_block5 .p3_title img { height : 28px; }

   .main_block4 .p3_image,
   .main_block5 .p3_image {
                           overflow : hidden;
                           margin-bottom : 30px;
                           padding : 8px;
                           width : 368px;
                           height : 207px;
                           background-color : #FFF;
                          }

   .main_block4 .p3_info,
   .main_block5 .p3_info {
                          text-align : center;
                          margin-bottom : 30px;
                          width : 384px;
                          height : 40px;
                         }

   .main_block4 .p3_btn,
   .main_block5 .p3_btn {
                         display : flex;
                         align-items : center;
                         justify-content : center;
                         width : 384px;
                         height : 50px;
                        }

  /*----------------------------------------------------------  button  ------------------------------------------------------------------*/

   .f_btn1, .f_btn2, .f_btn3, .f_btn4, .f_btn5 { display : none; }

   .p3_btn a.btn_28 {
                     position : relative;
                     display : block;
                     overflow : hidden;
                     text-align : center;
                     vertical-align : middle;
                     text-decoration : none;
                     letter-spacing : 2px;
                     margin : auto;
                     padding : 10px 24px;                    /*----------  元のサイズ ： 1rem 4rem  1rem = 16px  ----------*/
                     width : 100px;
                     font-weight : bold;
                     background-color : transparent;
                     color : #27acd9;
                     border : 1px solid #27acd9;
                     border-radius : 5px;
                     -webkit-transition: all 0.2s ease-in;
                     -moz-transition: all 0.2s ease-in;
                     transition: all 0.2s ease-in;
                    }

   .p3_btn a.btn_28:hover {
                            background-color : #27acd9;
                            color : #fff;
                           -webkit-transition : all 0.2s ease-out;
                           -moz-transition : all 0.2s ease-out;
                           transition : all 0.2s ease-out;
                          }

   .p3_btn a.btn_28:hover::before {
                                   -webkit-animation : sh02 0.5s 0s linear;
                                   -moz-animation : sh02 0.5s 0s linear;
                                   animation : light 0.5s 0s linear;
                                  }

   .p3_btn a.btn_28::before {
                             content: '';
                             position : absolute;
                             top : 7%;
                             left : 0%;
                             display : block;
                             width : 0px;
                             height : 86%;
                             background : #fff;
                             opacity : 0;
                             box-shadow : 0 0 50px 30px #fff;
                             -webkit-transform : skewX(-20deg);
                             -moz-transform : skewX(-20deg);
                             -ms-transform : skewX(-20deg);
                             -o-transform : skewX(-20deg);
                             transform : skewX(-20deg);
                            }

   @keyframes light {
                     from { opacity : 0; left : 0%; }
                     50% { opacity : 1; }
                     to { opacity : 0; left : 100%; }
                    }

  /*--------------------------------------------------------------------  footer  ----------------------------------------------------------------------------*/

   .footer {
            position : fixed;                               /*----------  要素を固定させる値  ----------*/
            left : 0;
            bottom : 0;
            overflow-x : hidden;                            /*----------  はみ出た要素の左右の表示方法を指定する  ----------*/
            margin : auto;
            width : 100%;
            height : auto;
            background-color : #1F2C37;
            z-index : -1;
           }

  /*----------------------------------------------------------------  Box  -------------------------------------------------------------------------*/

   .Box {
         display : flex;                                    /*----------  要素を横並びに指定  ----------*/
         justify-content : space-around;                    /*----------  それぞれの要素に均等な余白をつける指定  要素どうしの余白は両端の余白の2倍の大きさ  ----------*/
         margin : 20px 0;
         width : auto;
         min-height : auto;
        }

   .C-Box_3 { display : none; }

  /*---------------------------------------------------------  C-box_1  ------------------------------------------------------------------*/

   .C-Box_1 {
             display : block;
             width : 400px;
             margin : 0;
            }

  /*-----------------------------------------------------  title  --------------------------------------------------------------*/

   .C-Box_1 ul {
                list-style : none;
                text-align : center;
               }

   ul .title_1 {
                display : flex;                             /*----------  横並びのレイアウトを指定  ----------*/
                align-items : center;                       /*----------  子要素を上下中央で揃えるプロパティ  ----------*/
                justify-content : center;                   /*----------  子要素を左右中央で揃えるプロパティ  ----------*/
                margin : 0 0 20px;
                padding : 5px 0;
                width : auto;
                height : 26px;
                font-size : 1em;
                font-weight : bold;
                color : #FFF;
                border-left : 5px solid #FF6347;
                border-bottom : 1px solid #FF6347;
               }

   ul .appli {
              display : inline-block;
              margin : 0 30px 30px 40px;
              padding : 0;
              line-height : 1.2;                            /*----------  画像の下の隙間を消すために指定  ----------*/
              cursor : pointer;
             }

   ul .appli p {
                text-decoration : none;                     /*----------  テキストに装飾を付けることができるプロパティ  ----------*/
                padding : 0;
                font-size : 12px;
                color : #FFF;
               }

  /*---------------------------------------------------------  C-box_2  ------------------------------------------------------------------*/

   .C-Box_2 {
             display : block;
             margin : 0;
             width : 400px;
            }

  /*-----------------------------------------------------------  Btn  --------------------------------------------------------------------*/

   .C-Box_2 ul {
                list-style : none;                          /*----------  マーカーは、リスト内の各項目の先頭に表示される●や■のような記号を非表示  ----------*/
               }

   .C-Box_2 .title_2 {
                      display : flex;                       /*----------  横並びのレイアウトを指定  ----------*/
                      align-items : center;                 /*----------  子要素を上下中央で揃えるプロパティ  ----------*/
                      justify-content : center;             /*----------  子要素を左右中央で揃えるプロパティ  ----------*/
                      list-style : none;                    /*----------  マーカーは、リスト内の各項目の先頭に表示される●や■のような記号を非表示  ----------*/
                      padding : 5px 0;
                      width: auto;
                      height : 26px;
                      font-size : 1em;
                      color : #FFF;
                      border-left : 5px solid #1E90FF;
                      border-bottom : 1px solid #1E90FF;
                      background-color : #1F2C37;
                     }

   .C-Box_2 .substance {
                        margin : 20px 5px;
                        font-size : 1em;
                        color : #FFF;
                        border-bottom : 1px solid #1E90FF;
                       }

   .C-Box_2 .G_btn {
                    display : flex;                         /*----------  横並びのレイアウトを指定  ----------*/
                    align-items : center;                   /*----------  子要素を上下中央で揃えるプロパティ  ----------*/
                    justify-content : center;               /*----------  子要素を左右中央で揃えるプロパティ  ----------*/
                    padding : 5px 0;
                    width : auto;
                    height : auto;
                   }

   .f_btn {
           display : inline-block;
           text-decoration : none;
           text-align : center;
           padding : 10px 24px;                     /*----------  0.8em  ----------*/
           width : 100px;                           /*----------  100px  ----------*/
           color : #FFF;
           background-color : #07caff;              /*----------  #40C659  ----------*/
           border-radius : 4px;
           box-shadow : 0 5px 10px 0 rgba(0,0,0,0.12),
                        0 3px 20px 0 rgba(0,0,0,0.12), 
                        0 5px 6px -2px rgba(0,0,0,0.2); 
           -webkit-tap-highlight-color : transparent;
           transition : 0.3s ease-out;
          }

   .f_btn_green:hover {
                       cursor : pointer;
                       text-decoration : none;
                       box-shadow : 0 2px 2px 0 rgba(0,0,0,0.12),
                                    0 1px 5px 0 rgba(0,0,0,0.12),
                                    0 3px 1px -2px rgba(0,0,0,0.2);
                      }

  /*-------------------------------------------------------------  Copy right  ---------------------------------------------------------------------*/

   .footer .Copyright {
                       display : block;                   /*----------  ブロック要素として指定 また、縦並びに指定  ----------*/
                       text-align : center;
                       list-style : none;
                       width : atuo;
                       line-height : 30px;
                      }

   .Copyright .points {
                       display : inline-block;
                       margin : 0 10px 0 0;
                       color : #FFF;
                      }

   .Copyright .points1 {
                        display : inline-block;
                        margin : 0 0 0 10px;
                        color : #FFF;
                       }

  /*------------------------------------------------------------------  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 70%, rgb(255,105,180) 80%);           /*-----  蛍光ピンク  -----*/
           color : #333;
          }

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

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

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

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

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

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

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