@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%;
               }

    html {
          scroll-behavior: smooth;                          /* リンクなどを押して、ページ内の別の場所へ移動するときに、滑らかに移動させる設定 */
         }

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

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

      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;
        }

    /*--- アンカータグ指定 ---*/

      a {
         color: inherit;
         text-decoration: none;
        }

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

   body {
         margin: 0;
         font-family: 'YuKyokasho', 'Yu Kyokasho', 'UD Digi Kyokasho N-R', 'Yu Mincho', 'YuMincho', '游明朝', 'Roboto', 'Yu Gothic UI', 'Meiryo', serif;
/*       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; */
         font-size: 1rem;
         font-weight: 400;
         line-height: 1.8;
         color: #111;
         background-color: #FFF;
         background-image: url("../img/washi.webp");
         background-position: center;
         background-repeat: repeat;
        }

  /* =================================================================== Header =================================================================== */

    .header {
             display: flex;
             justify-content: space-between;                /* 左右に振り分ける */
             align-items: center;
             padding: 20px 30px;
             width: 100%;
             box-sizing: border-box;
             border-bottom: 1px solid #CCC;
            }

  /* ---------------------------------------------------------- ページタイトル ---------------------------------------------------------- */

    .header-title {
                   display: flex;
                   align-items: center;
                   gap: 50px;
                  }

    .header h1 {
                margin: 0;
/*              letter-spacing: 0.7em; */
                font-size: 30px;
               }

    .header p {
               margin: 0;
               font-size: 1.25rem;
              }

  /* ----------------------------------------------------------- TOP画面に戻る ---------------------------------------------------------- */

    .back-top img {
                   display: block;
                   width: 36px;
                   height: 36px;
                  }

    .back-top:hover {
                     text-decoration: underline;
                     text-underline-offset: 4px;
                    }

  /* =================================================================== wrapper ================================================================== */

    .wrapper {
              margin: 0 auto;
              width: 100%;
              max-width: 1200px;
             }

  /* ---------------------------------------------------------- Responsive Main --------------------------------------------------------- */

    .responsive-main {
                      padding: 60px 0;
                     }

  /* ----------------------------------------------------------- Section 共通 ----------------------------------------------------------- */

    .section-1,
    .section-2,
    .section-3 {
                display: flex;
                align-items: center;
                width: 100%;
                background-color: #faeeee;
               }

    .section-1,
    .section-2 {
                margin-bottom: 60px;
               }

/* ------------------------------------------------------------ Section 画像 ------------------------------------------------------------ */

    .section-image {
                    width: 40%;
                    aspect-ratio: 3 / 2;                    /* 3:2 の画像 */
                    background-color: #eeeeee;
                   }

 /* -------------------------------------------------------- Section Image / img -------------------------------------------------------- */

    .section-image img {
                        display: block;
                        width: 100%;
                        height: auto;
                        object-fit: cover;
                        padding: 8px;                       /* 白い枠を指定 */
                        background-color: #FFF;
                       }

/*  .section-image img.Xz {
                           padding: 8px;
                           background-color: #e5e5e5;
                          } */

  /* ---------------------------------------------------------- Section Content --------------------------------------------------------- */

    .section-content {
                      padding: 25px 20px;
                      width: 60%;
                     }

  /* ------------------------------------------------------- Section Content / h2 ------------------------------------------------------- */

    .section-content h2 {
                         margin: 0 0 20px;
                         font-size: 26px;
                        }

  /* -------------------------------------------------------- Section Content / p ------------------------------------------------------- */

    .section-content p {
                        margin: 0;
                        margin-bottom: 1em;
                       }

  /* ---------------------------------------------------------- Pege-Top 非表示 --------------------------------------------------------- */

    .page-top { display: none; }

  /* ------------------------------ marker（ 蛍光グリーン ）指定 ------------------------------ */

    .marker {                                               /* 数値 ％ を大きくするほど蛍光線は細くなる */
             background: linear-gradient(
                                         transparent 77%,   /* 上から65%の位置までは透明 */
                                         #b9f6ca 77%        /* 上から65%の位置からグリーン */
                                        );
            }

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





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

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

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

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

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

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

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

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