@charset "UTF-8";

/*=========================================================
   Break Point
==========================================================*/

/* スマホで見たときは"sp"のclassがついたコンテンツを表示 */
.sp {
   display: block !important;
}

.sp_only {
   display: block !important;
}

.tablet {
   display: none !important;
}

.tab_only {
   display: none !important;
}

.pc {
   display: none !important;
}

.pc_only {
   display: none !important;
}

/* 680px～の場合"tablet"のclassがついたコンテンツを表示 */
@media only screen and (min-width: 680px) {
   .sp_only {
      display: none !important;
   }

   .tablet {
      display: block !important;
   }
}

/* 768px～の場合"tab_only"と"pc"のclassがついたコンテンツを表示 */
@media only screen and (min-width: 768px) {
   .pc {
      display: block !important;
   }

   .tab_only {
      display: block !important;
   }

   .sp {
      display: none !important;
   }
}

/* 1080px～の場合"pc_only"のclassがついたコンテンツを表示 */
@media only screen and (min-width: 1080px) {
   .pc_only {
      display: block !important;
   }

   .tab_only {
      display: none !important;
   }
}


/*-------------content box---------------*/

.inner {
   margin: auto;
   width: 92%;
   max-width: 550px;
}

/*---------------margin top-----------------*/

.mt10 {
   margin-top: 10px;
}

.mt15 {
   margin-top: 15px;
}

.mt20 {
   margin-top: 20px;
}

.mt25 {
   margin-top: 25px;
}

.mt30 {
   margin-top: 30px;
}

.mt35 {
   margin-top: 35px;
}

.mt40 {
   margin-top: 40px;
}

.mt45 {
   margin-top: 45px;
}

.mt50 {
   margin-top: 50px;
}

.mt55 {
   margin-top: 55px;
}

.mt60 {
   margin-top: 60px;
}

.mt65 {
   margin-top: 65px;
}

.mt70 {
   margin-top: 70px;
}

.mt75 {
   margin-top: 75px;
}

.mt80 {
   margin-top: 80px;
}

.mt85 {
   margin-top: 85px;
}

.mt90 {
   margin-top: 90px;
}

.mt95 {
   margin-top: 95px;
}

.mt100 {
   margin-top: 100px;
}

/*---------------margin bottom-----------------*/

.mb10 {
   margin-bottom: 10px;
}

.mb15 {
   margin-bottom: 15px;
}

.mb20 {
   margin-bottom: 20px;
}

.mb25 {
   margin-bottom: 25px;
}

.mb30 {
   margin-bottom: 30px;
}

.mb35 {
   margin-bottom: 35px;
}

.mb40 {
   margin-bottom: 40px;
}

.mb45 {
   margin-bottom: 45px;
}

.mb50 {
   margin-bottom: 50px;
}

.mb55 {
   margin-bottom: 55px;
}

.mb60 {
   margin-bottom: 60px;
}

.mb65 {
   margin-bottom: 65px;
}

.mb70 {
   margin-bottom: 70px;
}

.mb75 {
   margin-bottom: 75px;
}

.mb80 {
   margin-bottom: 80px;
}

.mb85 {
   margin-bottom: 85px;
}

.mb90 {
   margin-bottom: 90px;
}

.mb95 {
   margin-bottom: 95px;
}

.mb100 {
   margin-bottom: 100px;
}

/*---------------padding top-----------------*/
.pt10 {
   padding-top: 10px;
}

.pt15 {
   padding-top: 15px;
}

.pt20 {
   padding-top: 20px;
}

.pt25 {
   padding-top: 25px;
}

.pt30 {
   padding-top: 30px;
}

.pt35 {
   padding-top: 35px;
}

.pt40 {
   padding-top: 40px;
}

.pt45 {
   padding-top: 45px;
}

.pt50 {
   padding-top: 50px;
}

.pt55 {
   padding-top: 55px;
}

.pt60 {
   padding-top: 60px;
}

.pt65 {
   padding-top: 65px;
}

.pt70 {
   padding-top: 70px;
}

.pt75 {
   padding-top: 75px;
}

.pt80 {
   padding-top: 80px;
}

.pt85 {
   padding-top: 85px;
}

.pt90 {
   padding-top: 90px;
}

.pt95 {
   padding-top: 95px;
}

.pt100 {
   padding-top: 100px;
}

/*---------------padding bottom-----------------*/
.pb10 {
   padding-bottom: 10px;
}

.pb15 {
   padding-bottom: 15px;
}

.pb20 {
   padding-bottom: 20px;
}

.pb25 {
   padding-bottom: 25px;
}

.pb30 {
   padding-bottom: 30px;
}

.pb35 {
   padding-bottom: 35px;
}

.pb40 {
   padding-bottom: 40px;
}

.pb45 {
   padding-bottom: 45px;
}

.pb50 {
   padding-bottom: 50px;
}

.pb55 {
   padding-bottom: 55px;
}

.pb60 {
   padding-bottom: 60px;
}

.pb65 {
   padding-bottom: 65px;
}

.pb70 {
   padding-bottom: 70px;
}

.pb75 {
   padding-bottom: 75px;
}

.pb80 {
   padding-bottom: 80px;
}

.pb85 {
   padding-bottom: 85px;
}

.pb90 {
   padding-bottom: 90px;
}

.pb95 {
   padding-bottom: 95px;
}

.pb100 {
   padding-bottom: 100px;
}










/*================================================================
 タブレット（画面幅768px以上で読み込む）
================================================================*/
@media screen and (min-width:768px) {

   /*-------------content box---------------*/

   .inner {
      max-width: 900px;
   }

   /*---------------margin top-----------------*/

   .mt20 {
      margin-top: 25px;
   }

   .mt25 {
      margin-top: 30px;
   }

   .mt30 {
      margin-top: 40px;
   }

   .mt35 {
      margin-top: 50px;
   }

   .mt40 {
      margin-top: 60px;
   }

   .mt45 {
      margin-top: 70px;
   }

   .mt50 {
      margin-top: 80px;
   }

   .mt55 {
      margin-top: 90px;
   }

   .mt60 {
      margin-top: 100px;
   }

   .mt65 {
      margin-top: 110px;
   }

   .mt70 {
      margin-top: 120px;
   }

   .mt75 {
      margin-top: 130px;
   }

   .mt80 {
      margin-top: 140px;
   }

   .mt85 {
      margin-top: 150px;
   }

   .mt90 {
      margin-top: 160px;
   }

   .mt95 {
      margin-top: 170px;
   }

   .mt100 {
      margin-top: 180px;
   }

   /*---------------margin bottom-----------------*/

   .mb20 {
      margin-bottom: 25px;
   }

   .mb25 {
      margin-bottom: 30px;
   }

   .mb30 {
      margin-bottom: 40px;
   }

   .mb35 {
      margin-bottom: 50px;
   }

   .mb40 {
      margin-bottom: 60px;
   }

   .mb45 {
      margin-bottom: 70px;
   }

   .mb50 {
      margin-bottom: 80px;
   }

   .mb55 {
      margin-bottom: 90px;
   }

   .mb60 {
      margin-bottom: 100px;
   }

   .mb65 {
      margin-bottom: 110px;
   }

   .mb70 {
      margin-bottom: 120px;
   }

   .mb75 {
      margin-bottom: 130px;
   }

   .mb80 {
      margin-bottom: 140px;
   }

   .mb85 {
      margin-bottom: 150px;
   }

   .mb90 {
      margin-bottom: 160px;
   }

   .mb95 {
      margin-bottom: 170px;
   }

   .mb100 {
      margin-bottom: 180px;
   }

   /*---------------padding top-----------------*/

   .pt20 {
      padding-top: 25px;
   }

   .pt25 {
      padding-top: 30px;
   }

   .pt30 {
      padding-top: 40px;
   }

   .pt35 {
      padding-top: 50px;
   }

   .pt40 {
      padding-top: 60px;
   }

   .pt45 {
      padding-top: 70px;
   }

   .pt50 {
      padding-top: 80px;
   }

   .pt55 {
      padding-top: 90px;
   }

   .pt60 {
      padding-top: 100px;
   }

   .pt65 {
      padding-top: 110px;
   }

   .pt70 {
      padding-top: 120px;
   }

   .pt75 {
      padding-top: 130px;
   }

   .pt80 {
      padding-top: 140px;
   }

   .pt85 {
      padding-top: 150px;
   }

   .pt90 {
      padding-top: 160px;
   }

   .pt95 {
      padding-top: 170px;
   }

   .pt100 {
      padding-top: 180px;
   }

   /*---------------padding bottom-----------------*/

   .pb20 {
      padding-bottom: 25px;
   }

   .pb25 {
      padding-bottom: 30px;
   }

   .pb30 {
      padding-bottom: 40px;
   }

   .pb35 {
      padding-bottom: 50px;
   }

   .pb40 {
      padding-bottom: 60px;
   }

   .pb45 {
      padding-bottom: 70px;
   }

   .pb50 {
      padding-bottom: 80px;
   }

   .pb55 {
      padding-bottom: 90px;
   }

   .pb60 {
      padding-bottom: 100px;
   }

   .pb65 {
      padding-bottom: 110px;
   }

   .pb70 {
      padding-bottom: 120px;
   }

   .pb75 {
      padding-bottom: 130px;
   }

   .pb80 {
      padding-bottom: 140px;
   }

   .pb85 {
      padding-bottom: 150px;
   }

   .pb90 {
      padding-bottom: 160px;
   }

   .pb95 {
      padding-bottom: 170px;
   }

   .pb100 {
      padding-bottom: 180px;
   }


}


/*================================================================
 PC（画面幅1080px以上で読み込む）
================================================================*/

@media screen and (min-width:1080px) {

   /*-------------content box---------------*/

   .inner {
      max-width: 950px;
   }

}