@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 : 1282px) and (max-width : 1367px),
   screen and (min-width : 1369px) {

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

   body {
         margin : 0;
         padding : 0;
         line-height : 1.6;
         font-family : "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "Hiragino Sans", "メイリオ", "sans-serif";
         font-size : 16px;
         font-weight : normal;
         background-color : #1F2C37;
         color : #333;                                      /*----------  一般的に使われている文字色  ----------*/
        }

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

   #container {
               margin : 0 auto;
               width : 100%;
               background-color : #1F2C37;
              }

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

   .cb-headers { display : none; }

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

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

   .cb-header .header-logo {
                            display : block;                /*----------  ブロック要素 : 1つの固まり  ----------*/
                            line-height : 0;
                           }

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


   .cb-header .header-navList {
                               display : block;             /*----------  block要素 一つの個体として指定  ----------*/
                               position : absolute;         /*----------  相対位置を指定する （子要素）----------*/
                               top : 1px;
                               right : 10px;
                               list-style : 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;
                    font-weight : bold;
                    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% {                             /*----------  スライドしたら 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% {                          /*----------  100%  ----------*/
                             top : -100px;
                            }
                      }

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

   .warp {
          margin : 500px auto 330px;
          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 107px;
              width : 600px;
              height : 50px;
              border-bottom : 1px solid #000;
             }

   .p1_title img { height : 40px; }

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

   .main_block1 .p1_image {
                           overflow : hidden;
                           line-height : 0;
                           width : 600px;
                           height : 337px;
                          }

   .main_block1 .p1_text {
                          padding : 0 10px;
                          width : 800px;
                          height : 337px;
                        }

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

   .p1_text .p1_substance1 {
                            margin-top : 10px;
                            line-height : 2;
                            width : auto;
                            height : auto;
                           }


   .p1_text .p1_substance2 {
                            margin-top : 20px;
                            line-height : 2;
                            width : auto;
                            height : auto;
                           }

   .p1_text .p1_substance3 {
                            margin-top : 40px;
                            width : auto;
                            height : auto;
                           }

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

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

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

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

   .main_block1 .p3_title img, .main_block2 .p3_title img,
   .main_block3 .p3_title img { height : 30px; }            /*----------  タイトルの大きさを Height（ハイト） で指定  ----------*/

   .main_block1 .p3_image, .main_block2 .p3_image,
   .main_block3 .p3_image {
                           overflow : hidden;
                           margin-bottom : 30px;
                           padding : 10px;
                           width : 513px;
                           height : 289px;
                           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 : 20px;
                          width : 533px;
                          height : 40px;
                         }

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

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

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

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

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

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

   .main_block4 .p3_image,
   .main_block5 .p3_image {
                           overflow : hidden;
                           margin-bottom : 30px;
                           padding : 10px;
                           width : 513px;
                           height : 289px;
                           background-color : #FFF;
                          }

   .main_block4 .p3_info,
   .main_block5 .p3_info {
                          display : flex;                   /*----------  要素を横並びに指定  ----------*/
                          align-items : center;             /*----------  子要素を上下中央で揃えるプロパテイ  ----------*/
                          justify-content : center;         /*----------  子要素を左右中央で揃えるプロパテイ  ----------*/
                          margin-bottom : 30px;
                          width : 533px;
                          height : 40px;
                         }

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

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

   .f_btn1, .f_btn2, .f_btn3, .f_btn4, .f_btn5 { display : none; }    /*----------  SP用のボタンを非表示に指定  ----------*/

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

   .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 : 2px 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;                          /*----------  はみ出た要素の左右の表示方法を指定する  ----------*/
              width : 100%;
              height : 331px;
              background-color : #1F2C37;
              z-index : -1;
             }

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

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

  /*---------------------------------------------------------------  C-Box1  -----------------------------------------------------------------------*/

   .C-Box_1 {
             margin : 0 100px;
             width : 400px;
             height : 280px;
            }

  /*----------------------------------------------------------  appli  -------------------------------------------------------------------*/

   .C-Box_1 ul {
                display : block;                            /*----------  ブロックレベル要素 ： 1つのブロックとして認識  ----------*/
                list-style : none;                          /*----------  マーカーは、リスト内の各項目の先頭に表示される●や■のような記号を非表示  ----------*/
                text-align : center;
               }

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

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

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

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

   .C-Box_2 {
             margin : 0 100px;
             width : 400px;
             height : 280px;
            }

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

   .C-Box_2 ul {
                display : block;                            /*----------  ブロックレベル要素 ： 1つのブロックとして認識  ----------*/
                list-style : none;                          /*----------  マーカーは、リスト内の各項目の先頭に表示される●や■のような記号を非表示  ----------*/
               }

   .C-Box_2 .title_2 {
                      display : flex;                       /*----------  横並びのレイアウトを指定  ----------*/
                      align-items : center;                 /*----------  子要素を上下中央で揃えるプロパティ  ----------*/
                      justify-content : center;             /*----------  子要素を左右中央で揃えるプロパティ  ----------*/
                      list-style : none;                    /*----------  マーカーは、リスト内の各項目の先頭に表示される●や■のような記号を非表示  ----------*/
                      padding : 5px 0;
                      width: 395px;
                      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 : 400px;
                    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);
                      }

  /*---------------------------------------------------------------  C-Box3  -----------------------------------------------------------------------*/

   .C-Box_3 {
             margin : 0 100px;
             width : 400px;
             height : 280px;
            }

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

  /*-----------------------------------------------------------  Link  -------------------------------------------------------------------*/

   .C-Box_3 ul {
                display : block;                            /*----------  ブロックレベル要素 ： 1つのブロックとして認識  ----------*/
                list-style : none;                          /*----------  マーカーは、リスト内の各項目の先頭に表示される●や■のような記号を非表示  ----------*/
               }

   .C-Box_3 .name {
                   display : flex;                          /*----------  横並びのレイアウトを指定  ----------*/
                   align-items : center;                    /*----------  子要素を上下中央で揃えるプロパティ  ----------*/
                   margin : 0 0 5px 5px;
                   padding : 2px 0;
                   width : 395px;
                   height : auto;
                   border-bottom : 1px solid #009D5B;
                   cursor : pointer;
                  }

   .C-Box_3 .name a {
                     text-decoration : none;                /*----------  リンクテキストの下線を消す  ----------*/
                     font-size : 1em;
                     color : white;
                    }

  /*-------------------------------------------------------------  Copyright  ----------------------------------------------------------------------*/

   .footer .Copyright {
                       display : block;                     /*----------  block要素 一つの個体として指定  ----------*/
                       text-align : center;                 /*----------  要素を寄せる位置を中央に変更するプロパティ  ----------*/
                       list-style : none;                   /*----------  マーカーを非表示に設定するプロパティ  ----------*/
                       width : auto;
                       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;
                       }

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

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