/* 基本設定 */
html {
  overflow: auto;
  scroll-behavior: smooth;
}

body {
  overflow: hidden;
  font-size: 14px;
  letter-spacing: 0.05em;
  font-family: sans-serif;
  line-height: 1.6em;
  color: #3C3C3C;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

li {
  list-style: none;
}

.wrapper {
  min-height: 100vh;
}

.read {
  font-size: 16px;
  font-weight: bold;
}

.show_pc {
  display: none !important;
}

.show_sp {
  display: block !important;
}

/* 標準ボタン */
.button {
  width: 80%;
  max-width: 450px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding: .7em 2em;
  background-color: #000;
  border-radius: 100px;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.button::after {
  position: absolute;
  top: 50%;
  right: 1.1em;
  content: '';
  display: block;
  width: .4em;
  height: .4em;
  margin-top: -.2em;
  border-top: solid .1em #fff;
  border-right: solid .1em #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.button:hover {
  background-color: #333;
  transition: all .3s;
}

.button:hover::after {
  right: 1em;
  transition: all .3s;
}

/* レイアウト用 */
.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}

.br_pc {
  display: none;
}

.br_sp {
  display: block;
}




/* 共通ヘッダー・フッター */
header {
  height: 60px;
  background-color: #fff:
}

header .logo_area {
  width: 293px;
  margin: 10px auto;
}

footer {
  background-color: #00003F;
  padding: 20px;
  text-align: center;
}

footer small {
  font-size: 14px;
  color: #fff;
}

/* LP共通 */
main {
  text-align: center;
  min-height: 92vh;
  background: #FFF;
}

p {
  text-align: left;
  margin: 2vh auto;
}

/* SPレイアウト */
body {
  text-align: center;
}

.inr {
  width: 90%;
  max-width: 1200px;
  margin: 30px auto 0;
}

#title_area {
  background-color: #E670B9;
}

#title_area h1 {
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
  padding: 25px 0;
}

#kv_area {
  position: relative;
  padding: 30px 0 55px;
}

#kv_area .part_number {
  position: relative;
  top: -45px;
}

#kv_area div.part_number {
  width: 30%;
  max-width: 100px;
  margin: 0 auto;
}

#kv_area h2 {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  padding: 10px 0 10px;
}

#kv_area p {
  max-width: 90%;
  display: inline-block;
  text-align: center;
  background-color: #FFF;
}

#part02 #kv_area p {
  background-color: #E9FEFE;
}

#part01 {
  background: url("../img/kv_area_bg01.svg") repeat top center;
  background-size: 70%;
}

#part02 {
  background: url("../img/kv_area_bg02.svg") repeat top center;
  background-size: 70%;
}

#part01 .scene {
  position: relative;
  background-color: #E670B9;
  padding: 10px 0 50px;
  margin-bottom: 120px;
}

#part01 #s_4 {
  margin-bottom: 0px;
}

#part01 .scene_number {
  position: relative;
  top: -40px;
  width: 80%;
  max-width: 300px;
  margin: 0 auto;
}

#part01 .scene .inr {
  background-color: #FFF;
}

#part01 .scene .button {
  background-color: #E670B9;
  margin: 20px 0 20px;
}

#part01 .scene .button::after {
  transform: rotate(135deg);
}

#part01 .scene .toggle_area {
  padding-bottom: 20px;
  display: none;
}

#part01 .scene p {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.8em;
  width: 90%;
  margin-bottom: 30px;
}

#part01 .scene p strong {
  font-size: 18px;
}

#part01 .scene img {
  width: 100%;
}

#part02 #buisiness {
  background-color: #4B4DFD;
  padding: 50px 0;
  color: #4B4DFD;
}

#part02 #girl {
  background-color: #FF71AD;
  padding: 50px 0;
  color: #3C3C3C;
}

#part02 #girl h4 {
  color: #FF71AD;
}

h3 {
  color: #FFF;
  font-size: 30px;
  line-height: 1.6em;
}

#part02 #buisiness .inr {
  background-color: #FFF;
  padding: 30px;
}

#part02 #buisiness .inr {
  background-color: #FFF;
  padding: 5%;
}

#part02 #girl .inr {
  background-color: #FFF;
  padding: 5%;
}

#part02 .question h4 {
  font-size: 24px;
  line-height: 1.6em;
  font-weight: bold;
}

#part02 .question h4::before {
  content: "Q.";
  display: block;
  font-size: 50px;
  margin-bottom: 20px;
}

#part02 .question h5 {
  font-size: 18px;
  background-color: #EDEDFF;
  padding: 5px 0;
  margin: 5vh 0 4vh;
}

#part02 #girl .question h5 {
  background-color: #FFEAF7;
}

#part02 .question img {
  max-width: 100%;
  margin: 0 auto;
}

#part02 .question img.wide {
  width:100%;
  max-width: 1000px;
  margin: 0 auto;
}

#part02 .question img.rank1 {
  display: block;
  margin: 30px auto 15px;
}

#part02 .question .clearfix .fr {
  width: 48%;
}

#part02 .question .clearfix .fl {
  width: 48%;
}

#part02 .question .clearfix img {
  max-width: 100%;
}

#part02 #buisiness .comment {
  font-size: 16px;
  font-weight: bold;
  background-color: #EDEDFF;
  margin: 0px auto 10px;
  line-height: 1.6em;
}

#part02 #girl .comment {
  font-size: 16px;
  font-weight: bold;
  background-color: #FFEAF7;
  margin: 0px auto 30px;
  line-height: 1.6em;
}

#part02 #buisiness .outline {
  text-align: left;
  color: #FFF;
  background-color: transparent;
}

#part02 #girl .outline {
  text-align: left;
  color: #FFF;
  background-color: transparent;
}

#next_page .inr {
  max-width: 500px;
  padding-bottom: 30px;
}

.questionnaire_area{
  background-color: #ECECEC;
  height: auto;
  padding: 20px 0;
  text-align: center;
}

.questionnaire_btn {
  display: block;
  width: 90%;
  max-width: 400px;
  background-color: #FF5900;
  border-radius: 5px;
  margin: 0 auto;
  padding: 10px;
  line-height: 1;
  transition: 0.2s;
}

.questionnaire_btn img{
  max-width: 280px;

}

.questionnaire_btn:hover {
  background-color: #FF3D00;
  border-radius: 0px;
  transition: 0.2s;
}

  .fadeInDown {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -ms-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    visibility: visible !important;
  }

  @-webkit-keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
    }
  }

  @keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }


@media only screen and (min-width: 950px) {
  .show_pc {
    display: block !important;
  }

  .show_sp {
    display: none !important;
  }

  .br_pc {
    display: block;
  }

  .br_sp {
    display: none;
  }

  .question h4 {
    font-size: 30px;
  }

  #part01 .scene .button {
    font-size: 25px;
    margin: 35px auto 35px;
  }

  #part01 .scene .button:hover {
    font-size: 25px;
    background-color: #000;
  }

  #part01 .scene p {
    font-size: 20px;
    text-align: center;
  }

  #part01 .scene p strong {
    font-size: 24px;
  }

  #part01 {
    background-size: 40%;
  }

  #part02 {
    background-size: 40%;
  }

  #part02 .question img {
    max-width: 500px;
  }

  #part02 .question .clearfix img {
    max-width: 200px;
  }


  #part02 #buisiness .comment {
    font-size: 20px;
  }

  #part02 #buisiness h3 {
    font-size: 40px;
    margin: 60px 0 40px;
  }

  #part02 #girl h3 {
    font-size: 40px;
    margin: 60px 0 40px;
  }

  #part02 #girl .comment {
    font-size: 20px;
  }

  #next_page a:hover img {
    opacity: 0.8;
    transition: 0.5s;
  }

  @media only screen and (min-width: 1280px) {
    #part01 {
      background-size: 25%;
    }

    #part02 {
      background-size: 25%;
    }

    #part02 #buisiness .inr {
      padding: 3%;
    }

    #part02 #girl .inr {
      padding: 3%;
    }
  }