@charset "utf-8";
body {
  width: 100%;
  font-family: 'Klee One', cursive;  line-height: 1.7;
  background:url(../img/background.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}
@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.pc{
  display: block;
}
.sp{
  display: none;
}
@media screen and (max-width:768px) {
  .pc{   
    display: none;
  }
  .sp{
    display: block;
  }
}
.design{
  position: absolute;
  top:5%;
  left:0;
  animation:2s fuwafuwa infinite;
}
@media screen and (max-width:768px) {
  .design{
    width:70px;
    opacity:0.5;
  }
}
.design2{
  position: absolute;
  top:7%;
  right:10%;
  animation: 5s fuwafuwa infinite;
}
@media screen and (max-width:768px) {
  .design2{
    top:1%;
    width:70px;
    opacity:0.5;
  }
}
.design3{
  position: absolute;
  top:31%;
  right:7%;
  animation: 5s fuwafuwa infinite;
}
@media screen and (max-width:768px) {
  .design3{
    width:70px;
    top:25%;
    opacity:0.5;
  }
}
.design4{
  position: absolute;
  top:37%;
  left:0;
  animation: 3.5s fuwafuwa infinite;
}
@media screen and (max-width:768px) {
  .design4{
    top:10%;
    width:70px;
    opacity:0.5;
  }
}
.design5{
  position: absolute;
  top:11%;
  right:0;
  animation:3s fuwafuwa infinite;
}
@media screen and (max-width:768px) {
  .design5{
    width:70px;
    opacity:0.5;
  }
}
@media screen and (max-width:350px) {
  .design1,.design2,.design3,.design4,.design5{
    width:57px;
  }
}

.cyokkan_txt{
  position: absolute;
  width:150px;
  margin:0 auto;
  top:17%;
  right:0;
  left:0;
  z-index:11;
}
@media screen and (max-width:768px) {
  .cyokkan_txt{
    width:80px;
    top:14%;
  }
}
img {
  display: block;
  width: 100%;
}

header {
  max-width: 1000px;
  margin: 0 auto;
  line-height: 0;
}
img.top {
  max-width: 1000px;
  margin: 0 auto;
}
#main {
  max-width: 1000px;
  margin: 0 auto;
  
}

.back2 {
  max-width: 1000px;
  margin: 0 auto;
}
.contents {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
  box-sizing: border-box;
  /* height: 1700px; */
}
section p {
  font-size:2em;
  color: #000;
}
.btunder {
  padding-top: 50%;
}
@media screen and (max-width:768px) {
  .contents {
    padding: 5% 7px;
    /* height: 1150px; */
  }
  section p {
    font-size: 18px;
    color:#000;
  }
}
.annai{
  max-width:600px;
  margin:0 auto;
}
.annai img{
  margin:35% 0 10% 0;
}
@media screen and (max-width:768px) {
  .annai img{
    width:90%;
    margin:15% 0 10% 5%;
  }
}
.voice {
	max-width:800px;
	margin:0 auto;
}
.voice_block{
	max-width:1000px;
	margin:0 auto;
}

.uservoice_txt{
	max-width:500px;
	margin:0 auto;
 }
#element {
  width: 100%;
  margin:-20% 0 0 0;
  /* position: relative; */
}
/* #element .contents {
  position: absolute;
  top: 0;
} */
img.elimg {
  max-width: 1000px;
  margin: 0 auto;
}
#svbox_all {
  width: 100%;
  margin: 0 auto;
  padding: 4% 1%;
  box-sizing: border-box;
}
@media screen and (max-width:768px) {
  #svbox_all {
    padding:3% 5%;
  }
}
/*=============== 感想 ===============*/
.borderbox {
  margin: 6% auto;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.4);
  border-left: 3px solid #c4af22;
  border-right: 3px solid #c4af22;
  position: relative; /*.lastboxの背景より前面に出す*/
  z-index: 100;
}
.borderbox:before, .borderbox:after {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: -moz-linear-gradient(120deg, #c4af22, #c4af22);
  background: -webkit-linear-gradient(120deg, #c4af22, #c4af22);
  background: linear-gradient(120deg, #c4af22, #c4af22);
}
.reviews {
  background: #fff;
  width: 100%;
  margin: 0 auto;
  padding: 5%;
  box-sizing: border-box;
  text-align: left;
  color: #000;
}
.reviews p.cmnt {
  padding: 20px 0;
  color: #000;
}
.reviews_box {
  width: 100%;
  margin: 0px auto;
  padding: 2% 1%;
  box-sizing: border-box;
  border-bottom: 1px solid #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.reviews_box img {
  max-width: 150px;
  padding-right: 3%;
  box-sizing: border-box;
}
.reviews_box span {
  background: #ffff00;
  color: #cc0000;
  padding: 5px 10px;
}
.reviews_box p.initial {
  font-weight: bold;
  margin-top: 10px;
  color: #000;
}
.bme04 {
  max-width: 770px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width:480px) {
  .reviews_box img {
    width: 40%;
  }
  .reviews_box p.initial {
    font-size: 16px;
  }
  .reviews p.cmnt {
    font-size: 14px;
  }
}
.lastbox {
  width: 100%;
  height: 0;
  background-size: cover;
  padding-top: 92%;
  position: relative;
  margin-top: -2%;
}
.lastbox img {
  max-width: 1000px;
  position: absolute;
  top: 2%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
/*===== エレメント・性別選択 =====*/
.sv_box, .gender {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
/*
.sv_box a {
	padding: 2%;
}*/
.sv_box img {
  margin: 3% 2%;
}
.sv_box img:hover {
  transform: scale(0.9);
  transition-duration: 0.5s;
}
.sv_box p {
  text-align: left;
}
.animation {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}
.sv_box {
  animation-name: anim_v;
}
@keyframes anim_v {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, -15px);
  }
}
@media screen and (max-width:768px) {
  img.elimg {
    padding: 0 0;
  }
  .sv_box img {
    width: 50%;
  }
}

#select_form {
  max-width: 1000px;
  margin: 0 auto;
}
.queall {
  width: 100%;
  padding: 2%;
  box-sizing: border-box;
}
.queall img {
  margin: 0 auto;

}
.queall p{
  font-size:2.3em;
  color:#000;
  text-align:center;
  margin:5% 0 0 0;
}
@media screen and (max-width:768px) {
  .queall p{
    font-size:1.17em;
  }
}

#select_item img {
  width: 95%;
  margin: 0 auto;
}
.select_box {
  width: 100%;
  text-align: center;
  margin-top: 6%;
  padding: 3% 20px;
  box-sizing: border-box;
}
select {
  font-size: 30px;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 5px;
  background: #fff;
}
.form_name {
  max-width: 600px;
  width: 100%;
  font-size: 22px;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 5px;
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 1px solid #ccc;
}
#form_area {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.8);
  border: 5px solid #c4af22;
  padding: 30px 20px;
  box-sizing: border-box;
}
.data {
  color: #663300;
  margin: 0 auto;
  font-size: 120%;
}
.data th {
  text-align: right;
  padding: 0 10px;
  box-sizing: border-box;
}
.data td {
  box-sizing: border-box;
}
@media screen and (max-width:768px) {
  #form_area p, .select_box p {
    font-size: 20px;
  }
  select {
    font-size: 16px;
    padding: 4px;
  }
  .check {
    width: 82%;
    margin: 0 auto;
    text-align: left;
  }
  .select_box {
    /* padding: 0; */
  }
  .form_name {
    font-size: 12px;
  }
}

.main_btn a {
  max-width: 950px;
  width: 100%;
  margin: 0 auto;
}
.gender a {
  max-width: 300px;
  width: 100%;
  margin: 1%;
}
.nextBox a {
  max-width: 550px;
  width: 100%;
  margin: 12% auto 0;
}
.con_btn a {
  max-width: 550px;
  width: 100%;
  margin: 8% auto 0;
}
.main_btn a, .gender a.woman, .gender a.man, .nextBox a, .con_btn a {
  display: block;
  position: relative;
}
.main_btn a::before, .gender a.woman::before, .gender a.man::before, .nextBox a::before, .con_btn a::before {
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  position: absolute;
  margin: auto;
  opacity: 0;
}
.main_btn a::before {
  background: url(../img/br3.png) no-repeat;
  background-size: cover;
}
.gender a.woman::before {
  background: url(../img/woman_on.png) no-repeat;
  background-size: contain;
}
.gender a.man::before {
  background: url(../img/man_on.png) no-repeat;
  background-size: contain;
}
.nextBox a::before {
  background: url(../img/next_on.png) no-repeat;
  background-size: cover;
}
.con_btn a::before {
  background: url(../img/confirm_on.png) no-repeat;
  background-size: cover;
}
.main_btn a.click::before, .main_btn a:hover::before, .nextBox a.click::before, .nextBox a:hover::before, .con_btn a.click::before, .con_btn a:hover::before, .gender a.woman.click::before, .gender a.woman:hover::before, .gender a.man.click::before, .gender a.man:hover::before {
  opacity: 1;
}
.support {
  width: 100%;
  padding: 5% 0 12%;
}
.support_btn {
  position: relative;
  display: block;
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
  padding: 14px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.62);
  border: 3px solid #c4af22;
  color: #82612c;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .4s;
  margin-top: 2%;
}
.support_btn:hover {
  font-size: 20px;
  color: #422901;
  border: 3px solid #f6f49c;
}
@media screen and (max-width:768px) {
  .support_btn {
    width: 60%;
    font-size: 14px;
  }
}
/*====================================
フッター
======================================*/
footer {
  position: sticky;
  top: 100vh;
  width: 100%;
  background: #000;
}
footer p {
  color: #fff;
  padding: 10px 0;
  text-align: center;
  font-size: 11px;
}
.m-frame {
  display: block;
  margin: -5% auto 0;
  width: 76%;
  height: 26px;
  position: relative;
  border-radius: 15px;
  box-sizing: border-box;
  border: 4px solid #fff;
  z-index: 5;
}
.m-frame {
  height: 30px;
}
.meter {
  width: 0%;
  height: 100%;
  position: absolute;
  background: -webkit-linear-gradient(#b8ffb8 0%, #1bff18 34%, #02b500 77%, #017b00 100%);
  background: -o-linear-gradient(#b8ffb8 0%, #1bff18 34%, #02b500 77%, #017b00 100%);
  background: linear-gradient(#b8ffb8 0%, #1bff18 34%, #02b500 77%, #017b00 100%);
  border-radius: 25px;
  box-shadow: 0 0 5px #018000 inset;
  z-index: 3;
}
.step2 {
  text-align: center;
  color: #fff;
  font-weight: bold;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 110%;
  z-index: 6;
  text-shadow: #018000 2px 0px 0px, #018000 -2px 0px 0px, #018000 0px -2px 0px, #018000 0px 2px 0px, #018000 2px 2px 0px, #018000 -2px 2px 0px, #018000 2px -2px 0px, #018000 -2px -2px 0px, #018000 1px 2px 0px, #018000 -1px 2px 0px, #018000 1px -2px 0px, #018000 -1px -2px 0px, #018000 2px 1px 0px, #018000 -2px 1px 0px, #018000 2px -1px 0px, #018000 -2px -1px 0px, #018000 1px 1px 0px, #018000 -1px 1px 0px, #018000 1px -1px 0px, #018000 -1px -1px 0px;
}
.step2 span {
  font-weight: bold;
}

.gender_box,.birt_box,.name_box,.end_box{
  display: none;
}

.gender_img{
  width: 50%;
  margin: 0 auto;
}

.pr_item{
  margin: 0 0 8% 0;
}