@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 (width : 1368px) {

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

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

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

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

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

   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;
                               list-style-type : none;      /*----------  文字の装飾（下線・上線・取り消し線・点滅）を指定するプロパティ  ----------*/
                               margin : 0;
                               padding : 0;
                               line-height : 80px;
                              }

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

   .cb-header li a {
                    display : block;
                    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 295px;
          width : 100%;
          background-color : #1F2C37;
         }

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

   .project1 {
              display : block;
              margin-bottom : 20px;                         /*----------  項目間の隙間  ----------*/
              padding : 60px 100px;
              width : auto;
              background-color : #FFF;
             }

   .p1_title {
              display : flex;                               /*----------  要素を横並びに指定  ----------*/
              align-items : center;                         /*----------  子要素を上下中央で揃えるプロパテイ  ----------*/
              justify-content : center;                     /*----------  子要素を左右中央で揃えるプロパテイ  ----------*/
              margin-bottom : 30px;
              width : auto;
              height : 50px;
              background-color : #DDD;
             }

   .p1_title img { height : 40px; }

   .main_block1 {
                 display : block;
                 margin : 0 auto;
                }

   .main_block1 .p1_image {
                           overflow : hidden;               /*----------  要素のはみ出した所を消すプロパテイ  ----------*/
                           line-height : 0;                 /*----------  画像下の余白を消すため  ----------*/
                           margin-bottom : 30px;
                           max-width : 100%;
                           height : auto;                   /*----------  画像の高さは、必ず auto で指定。余白が空く原因となる  ----------*/
                          }

   .main_block1 .p1_text {
                          width : auto;
                          max-height : auto;
                         }

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

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

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

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

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

   .project2 {
              display : block;                              /*----------  ブロック要素として指定 また、縦並びに指定  ----------*/
              margin-bottom : 20px;                         /*----------  項目間の隙間  ----------*/
              padding : 60px 100px;
              width : auto;
              background-color : #ddd;
             }

   .project2 .main_block1,
   .project2 .main_block2 {
                           display : block;
                           margin : 0 auto 50px;
                           padding : 0;
                           width : auto;
                           max-height : auto;
                           border-bottom : 3px solid #1F2C37;
                          }

   .project2 .main_block3 {
                           display : block;
                           margin : 0 auto;
                           padding : 0;
                           width : auto;
                           max-height : auto;
                          }

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

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

   .main_block1 .p3_image, .main_block2 .p3_image,
   .main_block3 .p3_image {
                           overflow : hidden;
                           line-height : 8px;                 /*----------  画像下の余白を消すため  ----------*/
                           margin-bottom : 30px;
                           padding : 10px;
                           max-width : 100%;
                           height : auto;                   /*----------  画像の高さは、必ず auto で指定。余白が空く原因となる  ----------*/
                           background-color : #FFF;
                          }

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

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

   .main_block3 .p3_btn {
                         display : flex;
                         align-items : center;
                         justify-content : center;
                         width : auto;
                         height : 50px;
                        }

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

   .project3 {
              display : block;                              /*----------  ブロック要素として指定 また、縦並びに指定  ----------*/
              /*margin-bottom : 30px;                         /*----------  項目間の隙間  ----------*/
              padding : 60px 100px;
              width : auto;
              background-color : #DDD;
             }

   .project3 .main_block4 {
                           display : block;
                           margin : 0 auto 50px;
                           padding : 0;
                           width : auto;
                           height : auto;
                           border-bottom : 3px solid #1F2C37;
                          }

   .project3 .main_block5 {
                           display : block;
                           margin : 0 auto;
                           width : auto;
                           height : auto;
                          }

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

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

   .main_block4 .p3_image,
   .main_block5 .p3_image {
                           overflow : hidden;
                           line-height : 8px;
                           margin-bottom : 30px;
                           padding : 10px;
                           max-width : 100%;
                           height : auto;
                           background-color : #FFF;
                          }

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

   .main_block4 .p3_btn {
                         display : flex;                    /*----------  要素を横並びに指定  ----------*/
                         align-items : center;              /*----------  要素を上下中央に指定  ----------*/
                         justify-content : center;          /*----------  要素を左右中央に指定  ----------*/
                         margin-bottom : 60px;
                         width : auto;
                         height : 50px;
                        }

   .main_block5 .p3_btn {
                         display : flex;                    /*----------  要素を横並びに指定  ----------*/
                         align-items : center;              /*----------  要素を上下中央に指定  ----------*/
                         justify-content : center;          /*----------  要素を左右中央に指定  ----------*/
                         width : auto;
                         height : 50px;
                        }

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

   .btn_28 { display : none; }                              /*----------  PC用ボタンを非表示に指定  ----------*/

   .f_btn1, .f_btn2, .f_btn3,
   .f_btn4, .f_btn5 {
                     display : inline-block;
                     text-decoration : none;
                     text-align : center;
                     padding : 10px 24px;                     /*----------  0.8em  ----------*/
                     width : 120px;                           /*----------  100px  ----------*/
                     background-color : #FFF;
                     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_btn1_green:hover, .f_btn2_green:hover,
   .f_btn3_green:hover, .f_btn4_green:hover, .f_btn5_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);
                                                                 }

   .f_btn1 { color : #07caff; border : 2px solid #07caff; }           /*----------  シアン  ----------*/
   .f_btn2 { color : #b455a0; border : 2px solid #b455a0; }           /*----------  ダークマゼンタ 8b008b フクシャパープル----------*/
   .f_btn3 { color : #d4af37; border : 2px solid #d4af37; }           /*----------  メタリックゴールド  ----------*/
   .f_btn4 { color : #009d5b; border : 2px solid #009d5b; }           /*----------  マカライトグリーン  ----------*/
   .f_btn5 { color : #db7093; border : 2px solid #db7093; }           /*----------  淡い紫  ----------*/

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

   .footer {
            display : block;                                /*----------  ブロック要素 : 1つの固まり  ----------*/
            position : fixed;                               /*----------  画面 (ブラウザの表示画面) の左上を原点にして固定配置するプロパティ  ----------*/
            bottom : 0;
            left : 0;
            margin : 0 auto;
            width : 100%;
            min-height : auto;
            background-color : #1F2C37;
            z-index : -1;
           }

   .C-Box_3 { display : none; }

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

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

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

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

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

   .C-Box_1 ul {
                display : block;                            /*----------  ブロックレベル要素 ： 1つのブロックとして認識  ----------*/
                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 50px 40px;
              padding : 0;
              line-height : 1.2;                            /*----------  画像の下の隙間を消すために指定  ----------*/
              cursor : pointer;
             }

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

  /*---------------------------------------------------------------  C-Box2  -----------------------------------------------------------------------*/

   .C-Box_2 {
             display : block;                               /*----------  ブロックレベル要素 ： 1つのブロックとして認識  ----------*/
             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;                   /*----------  ブロック要素として指定 また、縦並びに指定  ----------*/
                       list-style : none;
                       margin-top : 30px;
                       width : atuo;
                       max-height : auto;
                      }

   .Copyright .points, .Copyright .points1 {
                                            text-align : center;
                                            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 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 --------------------*/
 /*-------------------------------------------------------------------------------------------------------------------------------------------------*/