@charset "UTF-8";

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



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

定数

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

  .visible900 {

    display: block;

    margin: auto;

  }



  .hidden900 {

    display: none;

  }



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

定数（基本的に、全サイト共通に使えるもの）

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

  .margin100 {

    margin-bottom: 11%;

  }



  .margin90 {

    margin-bottom: 10%;

  }



  .margin80 {

    margin-bottom: 9%;

  }



  .margin70 {

    margin-bottom: 8%;

  }



  .margin60 {

    margin-bottom: 7%;

  }



  .margin50 {

    margin-bottom: 6%;

  }



  .margin40 {

    margin-bottom: 5%;

  }



  .margin30 {

    margin-bottom: 4%;

  }



  .margin20 {

    margin-bottom: 3%;

  }



  .margin10 {

    margin-bottom: 2%;

  }



  .padding_t100 {

    padding-top: 11%;

  }



  .padding_t90 {

    padding-top: 10%;

  }



  .padding_t80 {

    padding-top: 9%;

  }



  .padding_t70 {

    padding-top: 8%;

  }



  .padding_t60 {

    padding-top: 7%;

  }



  .padding_t50 {

    padding-top: 6%;

  }



  .padding_t40 {

    padding-top: 5%;

  }



  .padding_t30 {

    padding-top: 4%;

  }



  .padding_t20 {

    padding-top: 3%;

  }



  .padding_t10 {

    padding-top: 2%;

  }



  .padding_b100 {

    padding-bottom: 11%;

  }



  .padding_b90 {

    padding-bottom: 10%;

  }



  .padding_b80 {

    padding-bottom: 9%;

  }



  .padding_b70 {

    padding-bottom: 8%;

  }



  .padding_b60 {

    padding-bottom: 7%;

  }



  .padding_b50 {

    padding-bottom: 6%;

  }



  .padding_b40 {

    padding-bottom: 5%;

  }



  .padding_b30 {

    padding-bottom: 4%;

  }



  .padding_b20 {

    padding-bottom: 3%;

  }



  .padding_b10 {

    padding-bottom: 2%;

  }



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

サイト毎に変化のある定数

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

  .contents {

    width: 100%;

  }



  .img_center {

    margin-left: 0px;

  }



  img {

    width: 100%;

    max-width: 100%;

    height: auto;

  }



  /*--font系設定--*/

  .f34 {

    font-size: 4vw;

  }



  /*--font系設定-end--*/

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

フッター

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

  .copyright {

    padding: 3%;

  }



  .copyright,

  .copyright a {

    font-size: 2.5vw;

  }



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

  ↓↓↓ 各種レイアウト ↓↓↓

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

  /* --共通-- */

  /* --共通-- */

  /*--header--*/

  /*--header-end--*/

  /*--contents--*/

  .meter_wrap {

    top: 32%;

    padding: 6% 0 8%;

    width: 80%;

    font-size: 1.8vw;

  }



  .meter_reward {

    padding: 3% 0;

  }



  .meter_btn_wrap {

    margin-top: 3%;

  }



  .meter_btn,

  .back_btn {

    padding: 3% 8%;

    font-size: 5.5vw;

    border-radius: 2rem;

  }



  .meter_btn_shadow,

  .back_btn_shadow {

    box-shadow: 0px 10px 0px 0px #BA9602;

  }



  .meter_btn_shadow.active,

  .back_btn_shadow.active {

    transform: translateY(10px);

    box-shadow: 0px 0px 0px 0px #BA9602;

  }



  .meter_btn_shadow__pink,

  .back_btn_shadow__pink {

    box-shadow: 0px 10px 0px 0px #CC5468;

  }



  .taps_01_1 {

    padding: 3% 0;

    width: 80%;

  }



  .taps_01_2 {

    width: 60%;

  }



  .taps_01_3,

  .taps_01_3b {

    width: 42%;

  }



  .taps_03_1 {

    width: 23%;

  }



  .taps_04_2_op {

    width: 100%;

  }



  .taps_07_1 {

    width: 23%;

  }



  .taps_12 {

    padding-bottom: 3%;

  }



  .taps_12 img {

    width: 100%;

  }



  /*--contents-end--*/

  /*--footer--*/

  /*--footer-end--*/

  /* --背景設定-- */

  /* --背景設定-end-- */

  /* --画像位置設定-- */

  /* --画像位置設定-end-- */

  /* --プラポリ-- */

  .privacy_head {

    width: 90%;

    font-size: 4.3vw;

  }



  .privacy_contents_wrap {

    width: 90%;

    box-sizing: border-box;

    font-size: 2.5vw;

  }



  .privacy_contents_wrap p {

    padding-bottom: 6%;

  }



  .privacy_subtitle {

    font-size: 3vw;

  }



  /* --プラポリ-end-- */

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

  ↑↑↑ 各種レイアウト ↑↑↑

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

}



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

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

↓↓↓ 各種レイアウト ↓↓↓

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

  /* --共通-- */

  /* --共通-- */

  /*--header--*/

  /*--header-end--*/

  /*--contents--*/

  /*--contents-end--*/

  /*--footer--*/

  /*--footer-end--*/

  /* --背景設定-- */

  /* --背景設定-end-- */

  /* --画像位置設定-- */

  /* --画像位置設定-end-- */

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

↑↑↑ 各種レイアウト ↑↑↑

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

}



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

  .visible600 {

    display: block;

    margin: auto;

  }



  .hidden600 {

    display: none;

  }



  body {

    font-size: 1.6rem;

  }



  /*todo 要調査*/

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

サイト毎に変化のある定数

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

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

フッター

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

  .copyright,

  .copyright a {

    font-size: 1.2rem;

  }



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

↓↓↓ 各種レイアウト ↓↓↓

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

  /* --共通-- */

  /* --共通-- */

  /*--header--*/

  /*--header-end--*/

  /*--contents--*/

  .meter_wrap {

    top: 31%;

    padding: 6% 0 8%;

    width: 80%;

    font-size: 1.8vw;

  }



  .meter_reward {

    padding: 3% 0;

  }



  .meter_btn_wrap {

    margin-top: 3%;

  }



  .meter_btn {

    padding: 3% 8%;

    font-size: 5.5vw;

    border-radius: 1rem;

  }



  .meter_btn_shadow {

    box-shadow: 0px 5px 0px 0px #BA9602;

  }



  .meter_btn_shadow.active {

    transform: translateY(5px);

    box-shadow: 0px 0px 0px 0px #BA9602;

  }



  .taps_01_1 {

    padding: 3% 0;

    width: 80%;

  }



  .taps_01_2 {

    width: 60%;

  }



  .taps_01_3,

  .taps_01_3b {

    width: 44%;

  }



  /*--contents-end--*/

  /*--footer--*/

  /*--footer-end--*/

  /* --背景設定-- */

  /* --背景設定-end-- */

  /* --画像位置設定-- */

  /* --画像位置設定-end-- */

  /* --プラポリ-- */

  .privacy_head {

    width: 90%;

    font-size: 5vw;

  }



  .privacy_contents_wrap {

    width: 90%;

    font-size: 1.6rem;

  }



  .privacy_subtitle {

    font-size: 2rem;

  }



  /* --プラポリ-end-- */

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

↑↑↑ 各種レイアウト ↑↑↑

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

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

↓↓↓ フォーム部分 ↓↓↓

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

  form {

    /* font-size: 1.2rem; */

    line-height: 1.5;

  }



  /********

チェックボックス

********/

  .checkbox-parts {

    padding-left: 35px;

    /* font-size: 1.2rem; */

    line-height: 1.7;

  }



  .checkbox-parts::before {

    top: -2px;

    width: 20px;

    height: 20px;

  }



  .checkbox-input:checked+.checkbox-parts::after {

    top: -9px;

    left: 7px;

    width: 11.2px;

    height: 22.4px;

    border-bottom: 4px solid red;

    border-right: 4px solid red;

  }



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

↑↑↑ フォーム部分 ↑↑↑

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

}



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

  .visible500 {

    display: block;

    margin: auto;

  }



  .hidden500 {

    display: none;

  }



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

  ↓↓↓ 各種レイアウト ↓↓↓

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

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

  ↑↑↑ 各種レイアウト ↑↑↑

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

}



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

  .visible400 {

    display: block;

    margin: auto;

  }



  .hidden400 {

    display: none;

  }

}



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

  .visible320 {

    display: block;

    margin: auto;

  }



  .hidden320 {

    display: none;

  }

}



/* 319px以下の場合　これ以上小さくしたくない場合は横スクロール対応 */

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

  body {

    overflow-x: visible;

  }



  .contents {

    min-width: 320px;

  }



  .contents1800 {

    min-width: 320px;

  }



  header {

    min-width: 320px;

  }



  footer {

    min-width: 320px;

  }

}