@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;       /* Safari・Chrome 文字を滑らかにする*/
                -moz-osx-font-smoothing: grayscale;        /* Firefox（Mac）         〃        */
               }

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



    @media (min-width : 361px) and (max-width : 767px) 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 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.8;
                             font-size: 0.95rem;
                            }

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

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

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

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

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

       .Past h2 {
                 margin-bottom: 15px;
                 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: auto;
              background-color: #FFF;
             }

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

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

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

      .main-title {
                   display: block;
                   margin: 0 auto;
                   width: auto;
                   max-width: 80%;
                   height: auto;
                  }

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

/*    .Gallery h2 {
                   text-align: center;
                   margin: 5px 0 15px;
                   line-height: 1.7rem;
                   font-size: 1.5rem;
                   color: #222;
                  } */

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

      .Gallery img {
                    display: block;                         /* 画像がブロックレベル要素として扱われるようになり、画像の周りの余白を排除 */
                    margin: 0 auto;
                    width: 100%;
                    height: auto;
                    aspect-ratio: 16 / 9;                   /* アスペクト比 “ 16 : 9 ” とは、画面の横幅と縦幅の比率が 16 : 9 であることを指定 */
                    object-fit: cover;                      /* 画像の縦横比を維持したまま、要素の表示領域を覆うように拡大縮小する指定 */
                   }



  /*------------------------------ アイコンと星評価 の設定 ------------------------------*/

      .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: 40px;                                    /* 自分なりの大きさに指定するなら、画像の大きさを“ 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: 50%;
                    height: auto;
                   }

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

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

       .socials {
/*               margin-bottom: 5px; */
                 padding: 3px;
                 width: 80px;
                 height: 80px;
                 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: 10px;                /* 評価項目の縦間隔 */
  width: calc(50% - 5px);       /* 左の .Icon と幅を揃える */
  min-height: 160px;                /* 仮の高さ（必要に応じて調整） */
}

.evaluation section {
  display: flex;
  flex-direction: column;      /* ラベルと星を縦並び */
  align-items: flex-start;     /* 左寄せ（中の文字を） */             /* 修正してください */
  row-gap: 3px;                /* ラベルと星の間の余白 */
  margin: 0 auto;              /* セクション全体を中央に配置 */       /* 追加してください */
}

.label {
  font-size: 0.9375rem;             /* 読みやすいサイズ 1rem */
/*  font-weight: bold;          /* 太字で強調 */
  margin: 0;                   /* 上下の不要な余白を排除 */
  text-align: left;            /* 左寄せを明示 */           /* 追加してください */
}

.stars {
  display: inline-block;       /* 描画のズレ防止、下線対策 */         /* 追加してください */
  font-size: 1rem;             /* ラベルと揃えるサイズ */
  margin: 0;
  line-height: 1.2;            /* 下に出る余計なラインを防ぐために調整 */  /* 修正してください */
  white-space: nowrap;         /* 星が折り返さないように */
  letter-spacing: -0.05em;     /* 星の間隔を少し詰める */
  color: #f5b301;              /* 任意：金色にする */
  text-align: left;            /* 明示的に左揃え */                    /* 追加してください */
  border: none;                /* 念のため強制的に下線除去 */         /* 追加してください */
  padding-bottom: 0;           /* ベースラインの下線対策 */           /* 追加してください */
}




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

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

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

       .favorite { margin-bottom: 10px; }

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

      @media (width: 375px) and (orientation: portrait) {
                                                          .Comment p {
                                                                      line-height: 1.6;
                                                                      font-size: 0.9375rem;
                                                                     }

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

                                                        }
















  /*-------------------------------------------------------------------- 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 --------------------------------------------------------------------------*/

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

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

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

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

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

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

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