@charset "UTF-8";

  /* ================================================== リセット部（ブラウザデフォルトの余白や挙動を整える） ================================================== */

  /* ============================== 共通変数 ============================== */

    :root {
           --gap: 24px;
           --card-radius: 18px;
           --border: #ddd;
           --shadow: 0 10px 24px rgba(0,0,0,.15);
          }

    *, *::before, *::after {
                            margin: 0;
                            padding: 0;
                            box-sizing: border-box;         /* padding / border を幅と高さに含める */
                           }

    html, body {
                width: 100%;
                height: 100%;
               }

  /* ============================== 基本指定（サイト全体で共通するスタイル）============================== */

    /*--- 画像は親要素に収まるように調整 ---*/

      img {
           display: block;                                  /* ブロック要素に指定。画像の下の余白対策 */
           max-width: 100%;
           height: auto;
           border: 0;                                       /* デフォルトの“枠線”を削除 */
          }

    /*--- 見出し（h1, h2, h3）の基本スタイル ---*/

      h1, h2, h3 {
                  font-family: 'YuKyokasho', 'Yu Kyokasho', 'UD Digi Kyokasho N-B', 'YU Mincho', 'YUMincho', '游明朝', 'ヒラギノ明朝 Pro W3', serif;
                  font-weight: 600;                         /* 太字 */
                  line-height: 1.4;
                  margin: 0 0 1em;                          /* 下に余白だけを付ける */
                 }

    /*--- 段落テキスト と 文面の左右を揃える ---*/

      p {
         text-align: justify;                               /* 文面の左右を揃える */
         margin: 0 0 1em;
         line-height: 1.7;
        }


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

    body {
          font-family: 'YuKyokasho', 'Yu Kyokasho', 'UD Digi Kyokasho N-R', 'Yu Mincho', 'YuMincho', '游明朝', 'Roboto', 'Yu Gothic UI', 'Meiryo', serif;
          font-size: 1rem;                                  /* 16px相当 : rem 指定なので、ベースフォントサイズに応じて拡縮する */
          font-weight: 400;
          line-height: 1.8;
          color: #111;
          -webkit-font-smoothing: antialiased;             /* Mac 等でのフォントのにじみ対策 */
          -moz-osx-font-smoothing: grayscale;              /* Firefox（Mac）         〃        */
          text-size-adjust: 100%;                          /* iOS 等でフォントサイズ自動調整を抑制 */
          -webkit-text-size-adjust: 100%;                  /* Safari等のベンダープレフィックス対応 */
          background-color: #FFF;
         }

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

    #container {
                margin: 0 auto;
                width: 100%;
               }

  /* ------------------------------------------------------------------- wrapper ------------------------------------------------------------------ */

    .wrapper {
              overflow-x: clip;                             /* 横方向にはみ出した部分を、表示せずに切り取る（スクロール領域を作らない） */
              margin: 0 auto;
              width: 100%;
              min-height: 100vh;                            /* 古いブラウザ向けに設定 */
              min-height: 100svh;                           /* 現在のブラウザ向けに設定 */
             }

  /* ========================================================= TOPS（画像＋ロゴ / 100vh） ========================================================= */

    .TOPS {
           position: relative;                              /* absolute の位置決めの基準 */
           display: flex;                                   /* 子要素を Flexbox で配置 */
           flex-direction: column;                          /* 子要素を縦方向に並べる */
           min-height: 100vh;
           min-height: 100svh;
           background-image: url('../img/All/washi.webp');
           background-position: center center;
           background-repeat: no-repeat;
           background-size: cover;
          }

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

    .TOPS .main-image {
                       flex: 1;                             /* 親要素に display: flex; の場合に「残っている空間を使って、この要素を伸ばす」という指定 */
                       width: 100%;
                       margin-bottom: 20px;                 /* メイン画像と説明文・掲示板の隙間 */
                      }

    .TOPS .main-image picture {
                               display: block;
                               width: 100%;
                               height: 100%;
                              }

    .TOPS .main-image img {
                           display: block;
                           width: 100%;
                           height: 100%;
                           object-fit: cover;
                           opacity: 0.6;
                           transition: opacity 0.3s ease;
                          }

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

    .TOPS .LOGO {
                 position: absolute;
                 top: 10%;
                 left: 5%;
                 transform: translate(-5%, -10%);
                 text-align: left;
                 width: 35%;
                 height: auto;
                }

    .TOPS .LOGO img {
                     display: block;
                     max-width: 100%;
                     height: auto;
                    }

    .TOPS .LOGO h1 {
                    margin-bottom: 6px;
                    padding: 0;
                    width: 100%;
                    max-width: 30em;
                    line-height: 1.6;
                    letter-spacing: 0.01em;
                    font-size: clamp(20px, 3.5vw,32px);
                    font-weight: 500;
                    text-shadow: 1px 1px 2px #FFF;
                   }

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

    .TOPS .Preface {
                    display: flex;
                    justify-content: space-between;
                    align-items: stretch;
                    column-gap: 30px;                       /* 横方向の隙間 : row-gap（縦方向の隙間）*/
                    flex: 1;
                    padding: 0 30px;
                    width: 100%;
                    min-height: 220px;
                   }

    .TOPS .Info, .TOPS .news {
                              position: relative;
                              flex: 1;
                              padding : 10px 20px;
                              max-width: 100%;
                              height: 90%;
                              min-height: 220px;
                              border-radius: 10px;
                              box-shadow: 0 6px 12px rgba(50, 50, 50, 0.12);    /* ← ここで影を追加 */
                             }

    .Info h2, .news h2 { font-size: 20px; }

    .Info {
           text-align: left;
           background-color: rgba(230, 242, 244, 0.85);     /* Info の背景色 */
          }

    .Info p {
             margin: 0 0 0.7em;                             /* 段落と段落の間を指定 */
             line-height: 1.7;                              /* 行間の指定 */
            }

    .news {
           text-align: center;
           background-color: rgba(230, 242, 244, 0.85);     /* news の背景色 */
          }

    .news p { line-height: 1.5; }

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

    .TOPS-2P, .TOPS-3P {
                        display: flex;
                        align-items: center;
                        height: 100vh;
                        background-image: url('../img/All/washi.webp');
                        background-position: center center;
                        background-repeat: no-repeat;
                        background-size: cover;
                       }

    /* 100vh を基準に階段配置を成立させるため、画面高さを確保 */

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

    .TOPS-2P_inner, .TOPS-3P_inner {
                                    display: flex;
                                    gap: var(--gap);
                                    margin: 0 auto;
                                    width: min(1920px, 96vw);
                                    height: 100%;
                                    padding-top: 30px;      /* ← 上に 30px */
                                    padding-bottom: 30px;   /* ← 下に 30px */
                                   }

    /* 3カラム（高さ100%を持たせる） */

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

    .col {
          display: flex;
          flex: 1;
          height: 100%;
         }

    /* 階段表示 */

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

    .col-middle { align-items: center; }                    /* 修験道：中央 */

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

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

    .card {
           text-align: center;
           padding: 24px;
           width: 100%;
           background-color: #fff;
           border-radius: var(--card-radius);
           box-shadow: var(--shadow);
          }

    .col-middle .card { background-color: rgba(235, 235, 210); }

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

    .card_title {
                 text-align: center;
                 margin: 0 0 14px 0;
                 line-height: 1.3;
                 font-size: 22px;
                }

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

    .card_img {                                             /* 画像を入れる“ 箱 ”の指定 */
               display: block;                              /* 画像をブロック要素にすることで、auto が効く */
               margin: 0 auto 20px;
               aspect-ratio: 3 / 2;                         /* 3:2 の画像 */
               width: 100%;
               background-color: #eee;
               border-radius: 12px;
              }

    .card_img img {                                         /* 画像の指定 */
                   display: block;
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                   border-radius: 12px;
                  }

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

    .card_text {
                text-align: center;
                margin: 0 0 20px 0;
                font-size: 15px;
               }

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

    .card_btn {
               display: inline-block;
               text-decoration: none;
               text-align: center;
               padding: 10px 30px;
               font-weight: bold;
               font-size: 1rem;
               color: #fff;
               background-color: #92735d;
               border-radius: 12px;
               box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
              }

  /* ===================================== ヌルっと表示（入るたび毎回）==================================== */

    .reveal {
             opacity: 0;
             transform: translateY(40px);
             transition:
             opacity 0.8s ease,
             transform 0.8s ease;
            }

    .reveal.is-show {
                     opacity: 1;
                     transform: translateY(0);
                    }

  /* ================================= 表示順ディレイ （左 → 中央 → 右）================================= */

    .delay-1{ transition-delay: 0.10s; }
    .delay-2{ transition-delay: 0.30s; }
    .delay-3{ transition-delay: 0.50s; }

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

    .Block {
            display: block;
            text-align: center;
            min-height: 100vh;
            min-height: 100svh;
           }

    .Parallax-1, .Parallax-2 {
                              min-height: 540px; /* 0 */
                              height: 540px;     /* 500px */
                              transition: background 0.8s ease, opacity 0.8s ease;
                             }

    @media (min-width: 1369px) {
                                .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 {
             position : relative;
             display : flex;
             flex-direction : row;                          /* 横並び */
             justify-content : center;
             align-items : center;
             padding : 20px;
             width: 100%;
             min-height: 200px;
             background-color: #1F2C37;
             box-sizing : border-box;
             z-index: 1;
            }

    .footer-contact {
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     gap: 40px;
                     width: 100%;
                    }

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

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

    .footer .SNS a { display: block; }

    .footer .SNS img {
                      display: block;
                      width: 42px;
                      height: 42px;
                      object-fit: contain;
                     }

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

    .footer .contact-info {
                           display: flex;
                           flex-direction: column;
                           justify-content: center;
                           align-items: flex-start;
                          }

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

    .contact-info a {
                     display: inline-block;
                     text-decoration: none;
                     color: white;
                    }

    .contact-links {
                    display: flex;
                    align-items : center;
                    gap: 30px;
                   }

    .contact-info .tel-link, .contact-info .mail-link,
    .contact-info .sms-link {
                             text-decoration: underline;
                             text-underline-offset: 4px;
                            }

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

    .footer .copyright {
                        position: absolute;
                        left: 0;
                        bottom: 5px;
                        text-align: center;
                        margin: 0;
                        width: 100%;
                        color: white;
                        font-size: 14px;
                       }

  /* --------------------------------------------------------------- 上に戻るボタン --------------------------------------------------------------- */

    .page-top {
               display: block;
               position: fixed;
               right: 20px;
               bottom: 25px;
               width: 48px;
               height: 48px;
               border: none;
               background-color: transparent;              /* 背景を透明にする */
               cursor: pointer;
               z-index: 1000;

               opacity: 0;
               visibility: hidden;
               transform: translateX(80px);
               transition: opacity 0.4s ease,
                           transform 0.4s ease,
                           visibility 0.4s;
              }

    .page-top.show {
                    opacity: 1;
                    visibility: visible;
                    transform: translateX(0);
                   }

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





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

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

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

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

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

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

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

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