@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 : 651px) and (max-width : 1023px) {

  /*----------------------------------------------------  ここから通常の 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-header { display : none; }                           /*----------  PCメニューを非表示にする  ----------*/

  /*--------------------------------------------------------  cb-headers  ----------------------------------------------------------------*/

   .cb-headers {
                display : block;                            /*----------  ブロック要素 : 1つのブロック化  ----------*/
                position : fixed;                           /*----------  要素を固定させるプロパテイ  ----------*/
                top : -64px;                                /*----------  headerの縦幅分を画面外に表示  ----------*/
                left : 0;                                   /*----------  要素を左端に指定  ----------*/
                width : 100%;                               /*----------  横幅いっぱいに表示  ----------*/
                height : 64px;
                background-color : #1F2C37;
                z-index : 100;                              /*----------  要素の重なり順を指定  ----------*/
               }

   .cb-headers .headers-logo {
                              text-align : center;          /*----------  要素を左右中央に指定するプロパテイ  ----------*/
                              margin : 11px 10px;           /*----------  隙間を指定  14px----------*/
                              padding : 0;
                              width : 100%;
                              height: 42px;
                             }

   .cb-headers .main-logoImg {
                              margin : 0;
                              padding : 0;
                              width : auto;
                              height : 42px;                 /*----------  ロゴの大きさを指定  32----------*/
                             }

   .h-menu { display : relative; }

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

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

   @keyframes slideDown {
                           0% {
                               top : -64px;                 /*----------  縦幅の変化可  ----------*/
                              }

                         100% {                             /*----------  100%  ----------*/
                               top : 0;
                              }
                        }

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

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

   @keyframes slideUp {
                         0% {
                             top : 0;
                            }

                       100% {                               /*----------  100%  ----------*/
                             top : -64px;
                            }
                      }

  /*---------------------------------------------------------  Checkbox  -----------------------------------------------------------------*/

  /*----------------------------------------------------  inputのcheckboxは非表示に  -----------------------------------------------------*/

   .h-menuCheckbox {
                    position : absolute;
                    display : none;                         /*----------  Check box を非表示にするプロパテイ  ----------*/
                    top : 18px;
                    right : 19px;
                   }

  /*-------------------------------------------------------  ハンバーガーメニュー  -------------------------------------------------------*/

   .h-menu_icon {
                 position : absolute;
                 top : 10px;
                 right : 10px;
                 display : inline-block;
                 width : 30px;
                 height : 30px;
                 vertical-align : middle;
                }

   .h-menu p {                                              /*----------  ハンバーガーメニューの下の メニュー 表示  ----------*/
              position : absolute;
              top : 38px;
              right : 10px;
              font-size : 12px;
              color : #FFF;
             }

  /*-------------------------------------------------------------  3 本 線  --------------------------------------------------------------*/

   .hamburger-icon, .hamburger-icon::before, .hamburger-icon::after {
                                                                     content : '';
                                                                     display : block;
                                                                     position : absolute;
                                                                     top : 3px;
                                                                     bottom : 0;
                                                                     width : 30px;
                                                                     height : 3px;
                                                                     background-color : white;
                                                                     cursor : pointer;
                                                                     z-index : 100;
                                                                    }

   .hamburger-icon:before { top : 10px; }

   .hamburger-icon:after { top : 20px; }

  /*------------------------------------------------------  メニュー以外を暗くする  ------------------------------------------------------*/

   #h-menu_black {
                  display : none;
                  position : fixed;
                  top : 0;
                  left : 0;
                  width : 100%;
                  height : 100%;
                  background-color : black;
                  opacity : 0;
                  transition : 0.7s ease-in-out;
                  z-index : 98;
                 }

  /*--------------------------------------------------------------  中  身  --------------------------------------------------------------*/

   #h-menu_content {
                    position : fixed;
                    top : 0;
                    left : 0;
                    width : 100%;
                    max-width : 300px;
                    height : 100vh;
                    padding : 14px 16px 42px;
                    font-size : 1em;
                    background-color : #1F2C37;
                    overflow : auto;
                    transition : 0.3s ease-in-out;
                    -webkit-transform : translateX(-105%);
                    transform : translateX(-105%);
                    z-index : 99;
                   }

  /*---------------------------------------------  チェックボックスにチェックが入ったら表示  ---------------------------------------------*/

   input:checked ~ .h-menu_icon .hamburger-icon {
                                                 background : transparent;
                                                }

   input:checked ~ .h-menu_icon .hamburger-icon::before {
                                                         -webkit-transform : rotate(-45deg);
                                                         transform : rotate(-45deg);
                                                         top : 10px;
                                                         z-index : 999;
                                                        }

   input:checked ~ .h-menu_icon .hamburger-icon::after {
                                                        -webkit-transform : rotate(45deg);
                                                        transform : rotate(45deg);
                                                        top : 10px;
                                                        z-index : 999;
                                                       }

   input:checked ~ #h-menu_black {
                                  display : block;
                                  opacity : 0.8;
                                 }

   #h-menu_checkbox:checked ~ #h-menu_content {
                                               -webkit-transform : translateX(0%);
                                               transform : translateX(0%);
                                               box-shadow : 6px 0 25px rgba(0,0,0,0.15);
                                              }

   .h-menu_icon .hamburger-icon,
   .h-menu_icon .hamburger-icon::before,
   .h-menu_icon .hamburger-icon::after,
   #h-menu_black,
   #h-menu_content {
                    -webkit-transition : all 0.3s;
                    transition : all 0.3s;
                   }

   #h-menu_content ul {
                       list-style : none;
                       margin : 0;
                       padding : 0;
                      }

   #h-menu_content .h-menu_logo {                           /*----------  メニュー内 ロゴ  ----------*/
                                 margin-bottom : 31px;
                                 width : auto;
                                 height : 32px;
                                }

   #h-menu_content ul li {
                          border-bottom : solid 1px white;
                         }

   #h-menu_content li a {
                         display : block;
                         color : white;
                         font-size : 15px;
                         padding : 30px 24px;
                         text-decoration : none;
                         transition-duration : 0.2s;
                        }

   #h-menu_content li a:hover {
                               background-color : #455b6d;
                              }

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

   .warp {
          margin : 360px auto 0;                            /*----------  top と footer のマージンを設定  ----------*/
          width : 100%;
          background-color : #1F2C37;
         }

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

   .project1 {
              display : block;                              /*----------  ブロック要素 : 1つの固まり  ----------*/
              margin-bottom : 20px;                         /*----------  項目間の隙間  ----------*/
              padding : 50px;
              width : auto;
              background-color : #FFF;
             }

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

   .p1_title img { height : 38px; }

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

   .main_block1 .p1_image {
                           overflow : hidden;               /*----------  要素のはみ出した所を消すプロパテイ  ----------*/
                           line-height : 0;                 /*----------  画像下の余白を消すため  ----------*/
                           margin-bottom : 20px;
                           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.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 : block;                              /*----------  ブロック要素として指定 また、縦並びに指定  ----------*/
              margin-bottom : 20px;                         /*----------  項目間の隙間  ----------*/
              padding : 50px;
              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 : 48px;
                          }

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

   .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 : 50px;
                                               width : auto;
                                               height : 50px;
                                              }

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

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

   .project3 {
              display : block;                              /*----------  ブロック要素として指定 また、縦並びに指定  ----------*/
              padding : 50px;
              width : auto;
              background-color : #DDD;
             }

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

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

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

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

   .main_block4 .p3_image,
   .main_block5 .p3_image {
                           overflow : hidden;               /*----------  要素のボックスからはみ出た部分を隠すプロパテイ  ----------*/
                           line-height : 8px;               /*----------  画像下の空白を消す  ----------*/
                           margin-bottom : 30px;
                           padding : 10px;
                           max-width : 100%;
                           height : auto;                   /*----------  画像の高さは、必ず 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;
                          min-height : auto;                /*----------  要素の高さの最小値を指定するプロパティ  ----------*/
                         }

   .main_block4 .p3_btn {
                         display : flex;                    /*----------  要素を横並びに指定  ----------*/
                         align-items : center;              /*----------  要素を上下中央に指定  ----------*/
                         justify-content : center;          /*----------  要素を左右中央に指定  ----------*/
                         margin-bottom : 50px;
                         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 {
            margin : 0 auto;
            width : 100%;
            min-height : auto;
            background-color : #1F2C37;
           }

   .C-Box_2, .C-Box_3 { display : none; }

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

   .Box {
         display : block;
         margin : 20px 10px;
         width : auto;
         min-height : auto;
        }

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

   .C-Box_1 {
             display : block;
             width : auto;
            }

  /*----------------------------------------------------------  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 10px 40px;
              padding : 0;
              line-height : 1.2;                            /*----------  画像の下の隙間を消すために指定  ----------*/
              cursor : pointer;
             }

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

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

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

   .Copyright .points, .Copyright .points1 {
                                            text-align : center;
                                            color : #FFF;
                                           }

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

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