@charset "UTF-8";

  /* ********************************************************** ここから通常の CSSを記載 ******************************************************************** */

    @media screen and (min-width: 768px) and (max-width: 1032px) and (orientation: portrait) {

  /* -------------------------------------------------------------------- body -------------------------------------------------------------------- */

    body {
/*        font-size: 1rem; */                               /* 16px */
          font-size: 1.0625rem                              /* 17px */
         }

  /* ===================================================================  TOPS  =================================================================== */

    .TOPS { padding: 5px 10px 20px; }

  /* -------------------------------------------------- メイン画像 -------------------------------------------------- */

    .TOPS .main-image {
/*                     flex-shrink: 0; */                   /* 「スペースが足りなくても、この要素を勝手に縮めないでください」という指定 */
                       flex: none;                          /* flex: none; を指定すると flex-shrink: 0; も含まれる */
                       width: 100%;
                       margin: 0 auto 15px;
                      }

    .TOPS .main-image img {opacity: 0.55;}

  /* -------------------------------------------------- main-logo -------------------------------------------------- */

    .TOPS .LOGO {
                 top: 4.5%;
                 left: 7.5%;
                 transform: translate(-4.5%, -7.5%);        /* translate(○○% top, ○○% left) */
                 width: 38%;
                }

    .TOPS .LOGO h1 {
                    max-width: 18em;
                    font-size: clamp(16px, 2.3vw, 21px);
                   }

  /* -------------------------------------------------- 説明文と掲示板 -------------------------------------------------- */

    .TOPS .Preface {
/*                  flex: none; */                          /* Preface 自体の伸縮を止める */
                    flex: 1;                                /* Preface 余った高さを flex で自動配分する */
                    flex-direction: column;                 /* Info と news を縦並びにする */
                    gap: 20px;                              /* Info と news の間の隙間 */
                    padding: 0 10px;
                    width: 100%;
                   }

    .TOPS .Info, .TOPS .news {
/*                            flex: none; */                /* 要素を勝手に伸ばしたり縮めたりしない */
                              flex: 1;                      /* 余った高さを flex で自動配分（伸びる）する */
                              padding: 15px 10px;
                              width: 100%;
                              height: auto;
                              min-height: 180px;
                             }

  /* =============================================================  TOPS-2P : TOPS-3P  ============================================================ */

    .TOPS-2P, .TOPS-3P {
                        height: auto;                       /* style.css の height: 100vh; を解除 */
                        min-height: 100vh;
                        min-height: 100svh;
                       }

/* -------------------------------------------------- ヌルっと表示 -------------------------------------------------- */

    .TOPS-2P_inner, .TOPS-3P_inner {
                                    flex-direction: column;           /* 3カラム → 縦並び */
                                    gap: 40px;
                                    width: 100%;
                                    height: auto;
                                    padding: 30px 40px;
                                   }

  /* ============================================== 各 カラム ============================================= */

    .col {
          flex: none;
          width: 100%;
          height: auto;
         }

    /* PC用の階段配置を解除 */

    .col-top, .col-middle, .col-bottom { align-items: stretch; }

  /* =============================================== カード =============================================== */

    .card {
           padding: 24px 20px;
           width: 100%;
           border-radius: 16px;
          }

  /* ========================================== title（タイトル） ========================================= */

    .card_title {
                 margin: 0 0 16px 0;
                 font-size: 24px;
                }

  /* ================================================ 画 像 =============================================== */

    .card_img {
               margin: 0 auto 24px;
               height: auto;
              }

    .card_img img {
                   height: auto;
                  }

  /* =============================================== 解説文 =============================================== */

    .card_text {
                margin: 0 0 18px 0;
                font-size: 1rem;
               }

  /* ================================================ ボタン ============================================== */

    .card_btn {
               padding: 9px 28px;
               font-size: 1rem;
              }

  /* ===========================================================  Parallax-1 : Parallax-2 ========================================================= */

    .Block {
            display: block;
            text-align: center;
           }

    .Parallax-1, .Parallax-2 {
                              width: 100%;
                              height: 300px;
                              min-height: 300px;
                              transition: background 0.8s ease, opacity 0.8s ease;
                             }

  /* -------------------------------------------------- パララックス画像 -------------------------------------------------- */

    .Parallax-1 {
                 background: url("../img/tablet/miko.webp") no-repeat fixed center center /cover;
                }

    .Parallax-2 {
                 background: url("../img/tablet/P-Taki.webp") no-repeat fixed center center /cover;
                }

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

    .footer {
             flex-direction: column;                        /* 横並び → 縦並び */
             padding: 30px 20px 10px;
             min-height: 200px;
            }

    .footer-contact {
                     flex-direction: column;                 /* SNS・お問い合わせを縦並び */
                     justify-content: center;
                     align-items: center;
                     gap: 20px;
                    }


  /* =============================================== SNS =============================================== */

    .footer .SNS {
                  justify-content: center;
                  gap: 34px;                                /* app と app との間隔 */
                 }

    .footer .SNS img {
                      width: 40px;
                      height: 40px;
                     }


  /* =========================================== お問い合わせ ========================================== */

    .footer .contact-info {
                           align-items: center;               /* 中央揃え */
                           text-align: center;
                          }

    .contact-info p {
                     margin: 0 0 6px;
                    }


  /* ============================================= Copyright =========================================== */

    .footer .copyright {
                        position: static;                    /* absolute を解除 */
                        margin-top: 20px;
                        font-size: 14px;
                       }

                                                                                             }          /* @media end */

  /* ********************************************************** ここから通常の CSSは終了 ******************************************************************** */





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

  /* ---------------------------------------------------------------------------  --------------------------------------------------------------------------- */   /* 160 */

  /* ----------------------------------------------------------------------  ---------------------------------------------------------------------- */  /* 150 */

  /* -----------------------------------------------------------------  ----------------------------------------------------------------- */  /* 140 */

  /* ------------------------------------------------------------  ------------------------------------------------------------ */  /* 130 */

  /* -------------------------------------------------------  ------------------------------------------------------- */  /* 120 */

  /* --------------------------------------------------  -------------------------------------------------- */  /* 110 */

  /* ---------------------------------------------  --------------------------------------------- */  /* 100 */