@Charset "Shift_JIS";

  /*---------------------------------------------------------------------- Smart  Phone ----------------------------------------------------------------------*/

    @media only screen and (max-width : 540px) {

     /*----- @media (min-width : 〇〇〇px) … スクリーンが 〇〇〇px以上（ ～ から ） のときにCSSを適用。-----*/
     /*----- @media (max-width : 〇〇〇px) … スクリーンが 〇〇〇px以下（ ～ まで ） のときにCSSを適用。-----*/

  /*----------------------------------------------------------- ここから通常の CSS を記述 ----------------------------------------------------------*/

     body {
           line-height : 1.7;
           font-size : 100%;                                /*----- 100% ＝ 16px -----*/
           color : #333;                                    /* #000 */
           background-color : #FFF;
           text-size-adjust : 100%;                         /*----- Safari : iPhoneで、フォントサイズの自動調整機能を制御するCSSのプロパティ -----*/
           -webkit-text-size-adjust : 100%;                 /*-----                                    〃                                    -----*/
          }



  /*--------------------------------------------------------------------- wrap ---------------------------------------------------------------------*/

    .wrap {
           position: relative;
           margin : 0 auto;
           width : 100%;
           height : auto;
           min-height: 100vh;
           z-index: 1;
          }



  /*------------------------------------------------------- 背景画像をパララックス -------------------------------------------------------*/

     .STSD .Section {
                     height: 100vh;
                     padding: 5% 0 0;
                     text-align: center;
                     box-sizing : border-box;             /*----- 要素の幅 ( width )・高さ( height )に、paddingとborderを要素の幅と高さに含める -----*/
                    }

  /*------------------------------------------------------ コンテンツ部分 ------------------------------------------------------*/

     .STSD .section1, .STSD .section3,
     .STSD .section5 {
                      background: #fff;
                     }


  /*------------------------------------------------- 背景画像を表示させる部分 -------------------------------------------------*/

      .STSD .section2, .STSD .section4 {
                                        height : 300px;
                                       }



  /*-------------------------------------------------- スマホの背景画像の場合 --------------------------------------------------*/

    @media screen and (max-width: 540px) {

     .STSD .section2::before {
                        content : '';
                        display : block;
                        position : fixed;
                        top : 0;
                        right : 0;
                        left : 0;
                        width : 100%;
                        height : 100vh;
                        background-position : center center;
                        background-repeat : no-repeat;
                        background-size : cover;
                        z-index : -1;
                       }

  /*---------------------------------------- スマホの場合は同じ要素の背景画像を変更する ----------------------------------------*/

     .STSD .section2.bgA::before {
                                  background-image : url('../img/SP/miko.jpeg');
                                 }
 
     .STSD .section2.bgB::before {
                                  background-image : url('../img/SP/taki.jpeg');
                                 }

                                       }



  /*-------------------------------------------------------------------- footer --------------------------------------------------------------------*/

    .footer {
             background-color : #1F2C37;
             width: 100%;
             height: 200px;
            }










  /*----------------------------------------- 非表示指定 -----------------------------------------*/

     .Desktop { display : none; }

  /*---------------------------------------------------------------------- End ---------------------------------------------------------------------*/

                                               }               /*----- @media  ～ 540px  End -----*/
  /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/










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

  /*----------------------------------------------------------------------------  ----------------------------------------------------------------------------*/

  /*-----------------------------------------------------------------------  -----------------------------------------------------------------------*/

  /*------------------------------------------------------------------  ------------------------------------------------------------------*/

  /*-------------------------------------------------------------  -------------------------------------------------------------*/

  /*----------------------------------------------  ----------------------------------------------*/

  /*----------------------------------------------------------------------------------------------------------------------------------------------------------*/