@charset "UTF-8";

  /*---------------------------------------------------------------------- 共通リセット ----------------------------------------------------------------------*/

   html, body {
               margin: 0;
               padding: 0;
/*             height: 100%; */
              }

   * {                                                      /* ユニバーサルセレクタ（universal selector）*/
      margin: 0;
      padding: 0;
     }

  /*-------------------------------------------- スクロールバーを非表示にしつつ、スクロールは有効にする --------------------------------------------*/

    *, *::before, *::after {
                            margin: 0;
                            padding: 0;
                            box-sizing: border-box;         /* 要素の width(幅)とheight(高さ) に、paddingとborderのサイズを含めるかどうかを指定するCSSプロパティ */
                           }

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

    h1, h2, h3 {
                font-family : 'YU Mincho', 'YUMincho', '游明朝', 'ヒラギノ明朝 Pro W3', serif, sans-serif;    /*--- sans-serifを追加 ---*/
                font-weight : 700;                          /* 太字の太さを指定 */
                -webkit-font-smoothing : antialiased;       /* Webkitブラウザ用 */
               }

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



    @media (min-width: 1369px) and (orientation: landscape) and (pointer: fine) {

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

    #container {
                overflow: hidden;
                margin: 0 auto;
                width: 100%;
                height: 100%; /* 全画面高さを確保 */
               }

    .header {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 250px;
             background-color: #1F2C37;
             z-index: -1;
            }

    .wrapper {
              position: relative;                           /* 原則 : z-index を指定する時は必ず "position" を指定しておく事 */
              width: 100%;
              min-height: 100vh;                            /* 親要素に無関係で、単一の要素に完結して指定。 最低限画面サイズ分は確保し、内容に応じて伸びる（自然な挙動）*/
              margin: 250px auto;
              z-index: 10;
             }

    .Personal-Computer { display: block; }

    #Column {
             display: flex;
             flex-direction: row;                           /* 横並びにするプロパティ */
             overflow: hidden;
             width: 100%;
             height: 2000px;
             background-color: #FFF;
            }

    .C-left {
             display: flex;
             flex-direction: column;
             overflow-y: scroll;
             margin-right: auto;
             margin-left: 0;
             width: 40%;
             height: auto;
             background-color: #ADE0EE;
            }

    .C-right {
              display: flex;
              flex-direction: column;                       /* 縦並びにするプロパティ */
              margin-left: auto;                            /* 右寄せ */
              margin-right: 0;                              /* 完全に右端に配置 */
              width: 60%;
              height: auto;
background-color: pink;         /* 仮設定 */
             }



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

    .footer {
             position: fixed;                       /* 表示領域の最下部に固定 */
             bottom: 0;
             left: 0;
             display: flex;
             flex-direction: column;
             padding: 10px;
             width: 100%;
             height: 250px;
             background-color: #1F2C37;
             color: #FFF;
             z-index: -1;                           /* 最背面に配置 */
            }

     .footer-inner {
                    overflow: hidden;
                    width: 100%;
                    height: 100%;
                   }

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

     .Copyright {
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 line-height: 1.6;
                 width: 100%;
                 font-size: 14px;
                 background-color: #1F2C37;
                 color: white;
                }





  /*------------------------------------------------------------------- CSS  End -------------------------------------------------------------------*/

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









  /*-------------------------------------------------------------------------- LINE --------------------------------------------------------------------------*/

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

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

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

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

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

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

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