@charset "UTF-8";

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

    @media screen and (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {

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

    body {
          font-size: 0.9375rem;                             /* 15px */
         }

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

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

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

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

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

    .TOPS .LOGO {
                 top: 6.5%;
                 left: 6.2%;
                 transform: translate(-6.5%, -6.2%);        /* translate(○○% = top, ○○% = left) */
                 width: 36%;
                }

    .TOPS .LOGO h1 {
                    max-width: 18em;
                    font-size: clamp(16px, 2.3vw, 20px);    /* font-size: clamp( 最小サイズ, 基本となる可変サイズ, 最大サイズ ) */
                   }

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

    .TOPS .Preface {
                    flex: none;                             /* Preface 自体の伸縮を止める */
                    flex-direction: column;                 /* Info と news を縦並びにする */
                    gap: 20px;                              /* Info と news の間の隙間 */
                    padding: 0 10px;
                   }

    .TOPS .Info, .TOPS .news {
                              flex: none;                   /* 要素を勝手に伸ばしたり縮めたりしない */
                              width: 100%;
                              height: auto;
                              min-height: auto;
                             }

    .TOPS .info p, .TOPS .news p {
                                  line-height: 1.7;         /* 行間の指定 */
                                 }

    .TOPS .Info p:last-child,
    .TOPS .news p:last-child {
                              margin-bottom: 0;
                             }

  /* =============================================================  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: 30px;
                                    width: 100%;
                                    height: auto;
                                    padding: 20px 20px;
                                   }

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

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

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

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

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

    .card {
           padding: 20px 10px;
/*         border-radius: 0; */                               /* 角丸をなくす */
           border-radius: 24px;
          }

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

    .card_title {
                 font-size: 20px;
                }

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

    .card_img {
               margin: 0 auto 20px;
               width: 100%;
               height: auto;
              }

    .card_img img {                                         /* 画像の指定 */
                   width: 100%;
                   height: auto;
                  }

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

    .card_btn {
               padding: 7px 24px;
              }

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

    .Parallax-1, .Parallax-2 {
                              width: 100%;
                              height: 300px;
                              min-height: 300px;
                             }

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

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

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

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

    .footer {
             flex-direction: column;
             padding: 20px 15px 10px;
             min-height: auto;
            }

    .footer-contact {
                     flex-direction: column;
                     gap: 18px;
                    }

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

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

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

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

    .footer .contact-info {
                           align-items: center;
                           text-align: center;
                          }

    .contact-info p {
                     text-align: left;
                     margin: 0 0 8px;
                     font-size: 14px;
                    }

    .contact-info a {
                     font-size: 15px;
                    }

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

    .footer .copyright {
                        position: static;                   /* absolute を解除して通常の配置に戻す */
                        margin-top: 20px;                   /* 隙間を指定 */
                        font-size: 12px;
                       }

                                                                                               }          /* @media end */



  /* ================================================================  小型スマホ  ================================================================ */

    @media screen and (max-width: 667px) and (max-height: 600px) and (orientation: landscape) {

    .TOPS .LOGO {
                 top: 5%;
                 left: 5.4%;
                 transform: translate(-5%, -5.4%);        /* translate(○○% = top, ○○% = left) */
                 width: 35%;
                }

    .TOPS .LOGO h1 {
                    max-width: 18em;
                    font-size: clamp(16px, 2.3vw, 20px);    /* font-size: clamp( 最小サイズ, 基本となる可変サイズ, 最大サイズ ) */
                   }

                                                                                              }          /* 小型スマホ @media end */

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





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

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

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

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

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

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

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

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