@charset "UTF-8";

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

    @media screen and (min-width: 933px) and (max-width: 1376px) and (orientation: landscape) and (pointer: coarse) {

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

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

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

    .TOPS { padding: 5px 30px 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: 5.5%;
                 left: 7%;
                 transform: translate(-5.5%, -7%);
                 width: 34%;
                }

    .TOPS .LOGO h1 {
                    max-width: 18em;
                    font-size: clamp(18px, 2.2vw, 23px);    /* translate(○○% top, ○○% left) */
                   }

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

    .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: 20px 15px;
                              width: 100%;
                              height: auto;
                              min-height: auto;
                             }

    .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: 30px;
                                   }

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

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

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

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

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

    .card {
           padding: 24px 20px;
          }

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

    .card_title {
                 margin-bottom: 10px;
                 font-size: 20px;
                }

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

    .card_img {
               margin-bottom: 20px;
               height: auto;
              }

    .card_img img {
                   height: auto;
                  }

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

    .card_text {
                margin-bottom: 18px;
                font-size: 16px;
               }

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

    .card_btn {
               padding: 9px 26px;
               font-size: 16px;
              }

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

    .Block {
/*          display: block;
            text-align: center; */
            min-height: initial;
           }

    .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/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: 36px;
                      height: 36px;
                     }

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

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

    .contact-info p {
                     text-align: left;
                     margin: 0 0 8px;
                     font-size: 16px;
                     line-height: 1.7;
                    }

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

/*  .contact-info .tel-link {
                             text-decoration: underline;
                             text-underline-offset: 4px;
                            } */

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

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

                                                                                                                    }          /* @media end */



  /* ************************************************************ 大型タブレット 横向き *********************************************************** */

    @media screen and (min-width: 1200px) and (max-width: 1376px) and (orientation: landscape) and (pointer: coarse) {


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

    .TOPS {
           min-height: auto;
          }

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

    .TOPS-2P, .TOPS-3P {
                         height: 100vh;
                         min-height: 100vh;
                        }

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

    .TOPS-2P_inner, .TOPS-3P_inner {
                                     flex-direction: row;        /* 縦並びを解除して横並び */
                                     gap: 24px;
                                     margin: 0 auto;
                                     width: 96vw;
                                     height: 100%;
                                     padding: 30px 0;
                                    }

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

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

  /* ============================================== 階段表示 ============================================== */

    .col-top {
              align-items: flex-start;                          /* 一番上 */
             }

    .col-middle {
                 align-items: center;                           /* 中央 */
                }

    .col-bottom {
                 align-items: flex-end;                         /* 一番下 */
                }

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

    .card {
           padding: 20px;
          }

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

    .card_title {
                 margin-bottom: 12px;
                 font-size: 20px;
                }

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

    .card_img {
               margin: 0 auto 18px;
               aspect-ratio: 3 / 2;
               height: auto;
              }

    .card_img img {
                   height: 100%;
                   object-fit: cover;
                  }

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

    .card_text {
                margin-bottom: 16px;
                font-size: 14px;
               }

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

    .card_btn {
               padding: 9px 26px;
               font-size: 14px;
              }

                                                                                                                     }   /* 大型タブレット 横向き @media end */

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





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

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

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

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

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

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

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

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