﻿
 @charset "UTF-8";

  /* ====================================================================== Smartphone ====================================================================== */


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

    @media screen and (max-width: 767px) and (orientation: portrait) {

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

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

  /* -------------------------------------------------------------- header -------------------------------------------------------------- */

    .header {
             padding: 15px 20px;
            }

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

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

    .header p {
               display: none;
              }

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

    .responsive-main {
                      padding: 30px 12px;
                     }

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

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

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

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

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

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

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

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

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

    .section-content .Oshi {
                            top: 10px;
                            left: 170px;
                            width: 55px;                    /* 大きさの指定 */
                           }

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

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

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

    .page-top {
               display: block;
               position: fixed;
               right: 20px;
               bottom: 25px;
               width: 48px;
               height: 48px;
               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 -----*/ 

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





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

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

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

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

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

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

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

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

