@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 (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {

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

     body {
           line-height: 1.7;                                /* 行間の指定。読みやすさ向上 */
           overflow-x: hidden;                              /* 横スクロールバー防止（はみ出し対策） */
           font-size: 100%;                                 /* デフォルトサイズ（1rem = 16px）を保持 */
           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 300px;
               width: 100%;
               min-height: 100vh;                           /* 要素の最低高さをブラウザのビューポート (表示領域) の高さの100%に設定 */
               background-color: #FFF;
               z-index: 10;                                 /* 要素の重なり順序を指定 */
              }

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

     .Tablet { display: block; }

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

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

      .above-t {
                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: 30px 15px;
                         background-color: #fff;
                        }

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

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

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

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

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

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

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

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

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



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

       .History {
                 display: block;                         /* h2 を上に単独表示 */
                 padding: 30px 15px;
                 width: 100%;
                 background-color: #fff;
                }

       .History h2 {
                    text-align: left;
                    margin-bottom: 20px;
                    font-size: 1.7rem;
                    color: #333;
                    -webkit-font-smoothing: antialiased;    /* Safari・Chrome 文字を滑らかにする*/
                    -moz-osx-font-smoothing: grayscale;     /* Firefox（Mac）         〃        */
                   }

  /*------------------------------ 横並び2カラムにするための囲いを flex にする ------------------------------*/
  
       .Flex {
              display: flex;                                /* 要素を柔軟なレイアウト（フレックスボックスレイアウト）で配置。子要素を横並びや縦並びに指定 */
              justify-content: space-between;               /* コンテナの両端に配置され、その間のアイテムは均等な間隔で配置 */
              gap: 30px;                                    /* カラム間の余白 */
              padding: 20px;
              background-color:  #B9E3EE;
              border-radius: 10px;
             }

       .Past-1 {
                display: flex;                              /* 要素を柔軟なレイアウト（フレックスボックスレイアウト）で配置。子要素を横並びや縦並びに指定 */
                flex-direction: column;                     /* Flexコンテナ内の子要素を縦方向に配置 */
                row-gap: 20px;                              /* 「 行と行の間 」の垂直方向の間隔を指定 */
                width: 50%;
               }

       .Past-2 {
                display: flex;                              /* 要素を柔軟なレイアウト（フレックスボックスレイアウト）で配置。子要素を横並びや縦並びに指定 */
                flex-direction: column;                     /* Flexコンテナ内の子要素を縦方向に配置 */
                row-gap: 20px;                              /* 「 行と行の間 」の垂直方向の間隔を指定 */
                padding-left: 20px;
                width: 50%;
               }

       .History a {
                   display: block;
                   font-size: 1.125rem;       /* 1.25rem = 20px */
                   line-height: 1.7;
                   text-decoration: none;
                   color: #333;
                  }

       @media (min-width : 821px) and (max-width : 1025px) and (orientation : portrait) {
                                                                                         .History a {
                                                                                                     font-size: 1.1875rem;        /* 19px */
                                                                                                     line-height: 1.8;
                                                                                                    }
                                                                                        }

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

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



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

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

      .category {
                 padding: 30px 15px;
                 width: 100%;
                 background-color: #e0e0e0;       /* #f5f5f5 */
                }

      .block {
              display: flex;                                /* 要素を柔軟なレイアウト（フレックスボックスレイアウト）で配置。子要素を横並びや縦並びに指定 */
              flex-direction: column;                       /* 子要素を縦並び（スマホ用） */
              row-gap: 30px;                                /* フレックスコンテナやグリッドコンテナ内の 行と行の間隔を指定 するために使用 */
              width: 100%;
             }

  /*---------- タイトルの設定 ----------*/

      .main-title {
                   display: block;
                   margin: 0 auto;                          /* アイテムを中央寄せ */
                   width: auto;                             /* 元画像サイズ */
                   max-width: 100%;                         /* はみ出さないために指定 */
                   height: auto;                            /* アスペクト比維持 */
                  }





      .Gallery {
                display: flex;                              /* 要素を柔軟なレイアウト（フレックスボックスレイアウト）で配置。子要素を横並びや縦並びに指定 */
                flex-direction: column;                     /* 子要素を縦並び（スマホ用） */
                width: 100%;
               }

  /*---------- 画像の指定 ----------*/

      .Gallery img {
                    display: block;
                    margin: 0 auto;
                    aspect-ratio: 16 / 9;
                    width: 100%;
                    height: auto;
                    object-fit: cover;
                    border: 10px solid #fff;        /* 白枠 */
                   }



  /*------------------------------ アイコンの設定 ------------------------------*/

      .Social {
               position: relative;                          /* 要素の配置方法を指定するプロパティ。元の位置を基準に相対的に移動させるために指定 */
               display: flex;                               /* 子要素を横並びにするために指定 */
               padding: 10px 0;
               gap: 10px;
               width: 100%;
               min-height: 180px;                           /* 要素の高さの最小値を指定。内容が、指定以上であれば、その内容の高さが適用 */
               background-color: #FFF;
               border-radius: 10px;
              }

      .PIG {
            position: absolute;                             /* 親要素（またはブラウザのウィンドウ）を基準に絶対的な位置に配置するためのプロパティ */
            display: block;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);               /* 要素をX軸（水平方向）とY軸（垂直方向）に移動させるため。絶対値（px）や相対値（%）で指定 */
            width: 80px;                                    /* 自分なりの大きさに指定するなら、画像の大きさを“ px ”で指定 */
            max-width: 100%;
            height: auto;
           }

      .Icon {
             display: flex;                                 /* 要素を柔軟なレイアウト（フレックスボックスレイアウト）で配置。子要素を横並びや縦並びに指定 */
             flex-direction: column;                        /* 子要素を縦並び（スマホ用） */
             align-items: center;                           /* 子要素をクロス軸（縦方向）の中央に配置する */
             padding: 10px 0;
             width: calc(50% - 5px);                        /* calc() : 計算式を記述できる関数 */
             min-height: 160px;
            }

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

       .Icon-title {
                    display: block;
                    text-align: center;                     /* テキストを水平方向の中央に配置する（ブロック要素 : <div>,<p>,<h1>など）*/
                    margin-bottom: 20px;
                    width: 30%;
                    max-width: 100%;
                    height: auto;
                   }

  /*---------- Icon ----------*/

       .centers {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                }

       .socials {
                 margin-bottom: 5px;
                 padding: 3px;
                 width: 90px;    /* 90px */
                 height: 90px;
                 border-radius: 50%;
                 background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
                 -webkit-backface-visibility: hidden;                                           /* 背面を隠して表示を滑らかに */
                 -webkit-transform: translateZ(0);                                              /* GPU描画を促してギザギザ回避 */
                 image-rendering: auto;
                }

       .socials img {
                     display: block;
                     width: 100%;
                     height: 100%;
                     border-radius: 50%;                  /* 真円 */
                     object-fit: cover;                   /* 画像や動画を指定された領域の大きさに合わせて、縦横比を保ったまま、全体を覆うように表示 */
                    }

  /*------------------------------ 星評価の設定 ------------------------------*/

       .evaluation {
                    display: flex;                          /* 要素を縦並びにするために指定 */
                    flex-direction: column;                 /* 要素を縦に並べる */
                    align-items: center;                    /* 要素を左右中央揃え */
                    justify-content: center;                /* 要素を上下中央揃え */
                    row-gap: 15px;                          /* 項目の“ 縦間隔 ” ← ここで調整して。 */
                    width: calc(50% - 5px);                 /* CSSで計算を行うための関数です。四則演算（+、-、*、/）が使用 */
                    min-height: 160px;
                   }

       .evaluation section {
                            display: flex;                  /* 要素を横並びにするために指定 */
                            flex-direction: row;            /* 要素を“ 左から右へ水平方向に配置 ”する指定。横並びにする */
                            align-items: center;            /* 要素を上下中央揃え */
                            column-gap: 10px;               /* 要素のカラム（列）間の間隔を指定。*/
                            margin: 0 auto;
                           }

       .label {
               margin: 0;
               font-size: 1.25rem;                /* 16px × 1.25 = 20px ← ここで文字を調整して。 */
               min-width: 3.5em;                            /* タイトルの文字幅を統一させるため。接客・味・価格 */
               text-align: left;                            /* テキストの水平方向の左配置を指定 */
               white-space: nowrap;                         /* 要素内のテキストを改行せずに1行で表示 */
              }

       .stars {
               display: inline-block;                       /* 要素の表示形式を指定するプロパティの値の一つで、要素をインライン要素のように横に並べつつ、ブロック要素のように幅や高さを指定できるようにするもの */
               text-align: left;
               font-size: 1.375rem;               /* 16px × 1.375 = 22px ← ここで文字を調整して。 */
               margin: 0;
               padding-bottom: 0;
               white-space: nowrap;                         /* 要素内のテキストを改行せずに1行で表示 */
               line-height: 1.4;
               letter-spacing: -0.05em;                     /* 文字と文字の間隔（字間）を指定 */
               color: #f5b301;
               border: none;                                /* 要素の枠線（ボーダー）を非表示 */
              }

  /*------------------------------ コメントの設定 ------------------------------*/

      .Comment {
                margin: 10px 0;
                width: 100%;
                height: auto;
               }

       .Comment p {
                   line-height: 1.6;                        /* 現状よりゆったり */
                   font-size: 1.125rem;                     /* (18px / 16 = 1.125rem) */
                  }

       .favorite { margin-bottom: 10px; }

       .favorite p {
                  line-height: 1.6;
                  font-size: 1.4rem;
                 }

  /*------------------------------ 余白・区切り線 ------------------------------*/

       .margins {
                 margin: 0;
                 width: 100%;
                 height: 15px;
                 background-color: #1F2C37;
                }





















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

     .footer {
              position: fixed;                              /* 要素をブラウザウィンドウに対して固定表示するために使用 */
              bottom: 0;                                    /* 一番下 */
              left: 0;
              display: flex;                                /* flex container (フレックスコンテナ) : 要素を 横並びや縦並び など、柔軟に配置できる */
              flex-direction: column;                       /* 縦方向に配置 */
              padding: 5px 10px;
              width: 100%;
              height: 300px;
              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.7;
                  width: 100%;
                  font-size: 14px;
                  background-color: #1F2C37;
                  color: white;
                 }










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

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









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

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

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

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

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

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

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

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