@charset "UTF-8";

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

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

    * {
       margin: 0;
       padding: 0;
      }

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

    html, body {
                overflow-y: scroll;                         /* 常に縦スクロールを有効にする */
                scrollbar-width: none;                      /* Firefox : スクロールバーを非表示 */
                -ms-overflow-style: none;                   /* IE/Edge : スクロールバーを非表示 */
               }

    body::-webkit-scrollbar {
                             display: none;       /* ChromeやSafari : など、Webkit系でスクロールバーを非表示 */
                            }

  /*------------------------------------------------------------------- 基本設定 -------------------------------------------------------------------*/

    *, *::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 (max-width: 360px) and (orientation: portrait) {

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

     body {
           line-height: 1.7;                                /* 行間の指定。読みやすさ向上 */
           overflow-x: hidden;                              /* 横スクロールバー防止（はみ出し対策） */
/*         font-size: 0.875rem; */
           font-size: clamp(0.875rem, 1.5vw, 1rem);         /* 画面幅によってフォントを選択 */
           color: #333;                                     /* ダークグレー */
           -webkit-font-smoothing: antialiased;             /* Mac 等でのフォントのにじみ対策 */
           -moz-osx-font-smoothing: grayscale;              /* Firefox（Mac）         〃        */
           background-color: #FFF;
           text-size-adjust: 100%;                          /* iOS 等でフォントサイズ自動調整を抑制 */
           -webkit-text-size-adjust: 100%;                  /* Safari等のベンダープレフィックス対応 */
          }

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

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

  /*-------------------------------------------------------------- wrapper (ラッパー) --------------------------------------------------------------*/

     .wrapper {
               position: relative;                          /* z-index を指定するために position を指定。*/
               margin: 0 auto 250px;
               width: 100%;
               min-height: 100vh;                           /* 要素の最低高さをブラウザのビューポート (表示領域) の高さの100%に設定 */
               background-color: #FFF;
               z-index: 10;                                 /* 要素の重なり順序を指定 */
              }

  /*------------------------------------------------------------ スマホの設定 ------------------------------------------------------------*/

     .mobile { display: block; }

     #S_Column {
                display: flex;                              /* 要素を柔軟なレイアウト（フレックスボックスレイアウト）で配置。子要素を横並びや縦並びに指定 */
                flex-direction: column;                     /* 子要素を縦並び（スマホ用） */
                width: 100%;
                height: 100%;                               /* コンテンツの高さに応じて自然に伸ばす */
                background-color: #1F2C37;
               }

  /*----------------------------------------------------- 上カラム（above）-----------------------------------------------------*/

      .above {
              display: flex;                                /* 要素を柔軟なレイアウト（フレックスボックスレイアウト）で配置。子要素を横並びや縦並びに指定 */
              flex-direction: column;                       /* 子要素を縦並び（スマホ用） */
              order: 1;                                     /* フレックスコンテナ内のアイテムの表示順序を指定し制御するため */
              margin : 0 auto;
              width: 100%;
              height: auto;
              background-color: #77787B;          /* #ade0ee */
             }

  /*------------------------------ information ------------------------------*/

       .Info-1, .Info-2 {
                         display: block;
                         margin: 0 auto;
                         padding: 15px 8px;
                         background-color: #fff;
                        }

  /*------------------------------ Title ------------------------------*/

       .Title {
               display: flex;                               /* 要素を柔軟なレイアウト（フレックスボックスレイアウト）で配置。子要素を横並びや縦並びに指定 */
               flex-direction: column;                      /* Flexコンテナ内の子要素を縦方向に配置 */
               line-height: 1.5rem;
               font-size: 1.3rem;
               -webkit-font-smoothing: antialiased;         /* Safari・Chrome 文字を滑らかにする*/
               -moz-osx-font-smoothing: grayscale;          /* Firefox（Mac）         〃        */
              }

       .Title .Seireki {
                        align-self: flex-end;               /* フレックスアイテム (子要素) の垂直方向の位置を、コンテナの末尾 (下部) に揃える */
                        font-size: 0.95rem;
                       }

  /*------------------------------ 画像の設定 ------------------------------*/

       .Info-1 img,
       .Info-2 img {
                    display: block;
                    aspect-ratio: 16 / 9;                   /* アスペクト比 16:9 とは、画面の横幅と縦幅の比率が 16 : 9 */
                    object-fit: cover;
                    margin-bottom: 30px;
                    width: 100%;
                   }

  /*------------------------------ 感想と説明文の設定 ------------------------------*/

       .Info-1 p, .Info-2 p {
                             line-height: 1.7;
/*                             font-size: 0.95rem;  /* 0.8125rem */
                            }

  /*------------------------------ 区切り線 ------------------------------*/

       .borders {
                 margin: 0;
                 width: 100%;
                 height: 8px;
                }

  /*-------------------------------------------------- 履歴とコメント --------------------------------------------------*/

       .History {
                 display: flex;
                 flex-direction: column;
                 margin: 0 auto;
                 padding: 20px 5px;
                 width: 100%;
                 flex-grow: 1;
                 background-color: #fff;            /* f5f5f5 */
                }

       .Past {
/*            margin-bottom: 10px; */
              padding: 10px 5px;
              width: 100%;
              height: auto;
              background-color: #B9E3EE;
              border-radius: 10px;
             }

       .Past h2 {
                 margin-bottom: 20px;
                 line-height: 1.5rem;
                 font-size: 1.3rem;
                 -webkit-font-smoothing: antialiased;       /* Safari・Chrome 文字を滑らかにする*/
                 -moz-osx-font-smoothing: grayscale;        /* Firefox（Mac）         〃        */
                }

       .Past a {
                display: block;                             /* ブロック要素にして上下余白を有効に */
                text-decoration: none;                      /* アンダーラインを削除 */
                margin-bottom: 8px;                         /* 他のリンクとの間隔を空ける */
                padding: 10px 16px;                         /* タップしやすいように内側の余白を追加 */
                line-height: 1.5;                           /* 複数行になった時の行間 */
                font-size: 16px;                            /* スマホでも読みやすい文字サイズ */
                color: #333;
               }


























  /*--------------------------------------------------------- 区切り線 ---------------------------------------------------------*/

      .partition {
                  order: 2;                                 /* フレックスコンテナ内のアイテムの表示順序を指定し制御するため */
                  width: 100%;
                  height: 10px;
                 }

  /*----------------------------------------------------- 下カラム（under）-----------------------------------------------------*/

      .under {
              display: flex;                                /* 要素を柔軟なレイアウト（フレックスボックスレイアウト）で配置。子要素を横並びや縦並びに指定 */
              flex-direction: column;                       /* 子要素を縦並び（スマホ用） */
              order: 3;                                     /* フレックスコンテナ内のアイテムの表示順序を指定し制御するため */
              margin : 0 auto;                              /* 中央に配置*/
              width: 100%;
              height: 500px;             /* auto */
              background-color: pink;    /* #FFF */
             }

























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

     .footer {
              position: fixed;                              /* 要素をブラウザウィンドウに対して固定表示するために使用 */
              bottom: 0;                                    /* 一番下 */
              left: 0;
              display: flex;                                /* flex container (フレックスコンテナ) : 要素を 横並びや縦並び など、柔軟に配置できる */
              flex-direction: column;                       /* 縦方向に配置 */
              padding: 5px 10px;
              width: 100%;
              height: 250px;
              background-color: #1F2C37;
              z-index: -1;                                  /* 要素を重ねる順序を指定。通常表示より 1段階下 */
             }

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

      .Copyright {
                  display: flex;                            /* flex container (フレックスコンテナ) : 要素を 横並びや縦並び など、柔軟に配置できる */
                  justify-content: center;                  /* 要素を主軸（ 通常は水平方向 ）の中央に配置 */
                  align-items: center;                      /* 要素を主軸（ 通常は縦方向 ）の中央に配置 */
                  line-height: 1.6;
                  width: 100%;
                  font-size: 13px;
                  background-color: #1F2C37;
                  color: white;
                 }










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

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









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

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

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

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

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

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

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

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