@charset "UTF-8";

  /* ===================================================================== tablet 横向き ==================================================================== */


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

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

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

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

  /* -------------------------------------------------------------- Header -------------------------------------------------------------- */

    .header {
             padding: 18px 25px;
            }


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

    .header-title {
                   gap: 35px;
                  }

    .header h1 {
                font-size: 28px;
               }

    .header p {
               font-size: 1.125rem;                         /* 18px */
              }

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

    .responsive-main {
                      padding: 45px 25px;
                     }

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

    .section-1, .section-2,
    .section-3, .section-4 {
/*                          flex-direction: row; */                               /* 横並び */
                            align-items: center;
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);         /* 背景に影を指定 */
                           }

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

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

    .section-image {
/*                  order: 1; */                              /* 表示する順番を決める数字（画像を 1番）*/
                    width: 40%;
                   }

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

    .section-content {
/*                    order: 2; */                            /* 表示する順番を決める数字（文章を 2番）*/
                      padding: 20px;
                      width: 60%;
                     }

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

    .section-content h2 {
                         margin: 0 0 15px;
                         font-size: 22px;
                        }

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

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

  /* ========================================================== Page Top Button ========================================================= */

    .page-top {
               display: block;
               position: fixed;
               right: 25px;
               bottom: 30px;
               width: 50px;
               height: 50px;
               border: none;
               border-radius: 50%;
               font-size: 18px;                             /* フォントの大きさを指定 */
               color: #111;
               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);
                   }

                                                                                                                                            }          /*----- @media end -----*/ 



  /* ********************************************************** iPad mini 横向き ****************************************************************** */

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

     .responsive-main {
                       padding: 45px 45px;
                      }

     .section-1, .section-2,
     .section-3, .section-4 {
                             flex-direction: column;        /* 縦並び */
                            }

     .section-image {
                     order: 1;                              /* 表示する順番を決める数字（画像を 1番）*/
                     width: 100%;
                    }

     .section-content {
                       order: 2;                            /* 表示する順番を決める数字（文章を 2番）*/
                       padding: 30px;
                       width: 100%;
                      }

                                                                                                                                            }

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





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

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

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

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

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

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

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

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