@charset "UTF-8";
/* CSS Document */


#who_am_i .cnt_frame {
	position: relative;
}

#who_am_i #result_feild {
	position: relative;
}

#who_am_i .shindan_title {
	position: absolute;
	top: 0;
	left: 5%;
	width: 85%;
	margin-top: 5%;
}

#who_am_i .result_set {
  position: absolute;
  top: 17%;
  left: 18%;
  width: 64%;
	background-color: rgba(255,255,255,.9);
	border-radius: 12px;
}

#who_am_i #result_feild .info {
	width: 100%;
}

#who_am_i #result_feild .info h1 {
}

#who_am_i #result_feild .info h1 img {
  height: 100%;
}

#who_am_i #result_feild .info .txt {
  width: 100%;
}

#who_am_i #result_feild .info .btn_online_shop {
	padding-bottom: 11%;
	text-align: center;
  width: 100%;
  margin: 0 auto;
}

#who_am_i #result_feild .info .btn_online_shop img {
	display: inline-block;
  width: 38%;
}

#who_am_i #result_feild .info .btn_online_shop ul {
  list-style: none;
  display:flex;
  justify-content:center;
  padding-top: 3%;
}

#who_am_i #result_feild .info .btn_online_shop ul li:first-child {
  margin-right: 6%;
}

#who_am_i #result_feild .info .btn_online_shop ul a {
 color: #60745b;
 display: block;
 position: relative;
 padding-right: 9px;
 font-weight: bold;
}

#who_am_i #result_feild .info .btn_online_shop ul a::after{
  content: '';
  width: 7px;
  height: 7px;
  border-top: solid 2px #60745b;
  border-right: solid 2px #60745b;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -3%;
  transform: rotate(45deg);
}

#who_am_i #result_feild .photo {
	width: 70%;
  margin: 12% auto 7%;
}




#who_am_i #wallpaper_dl  #logo {
  position: absolute;
  left: 0;
  top: 0;
	width: 100%;
	margin: 0;
  padding: 2% 0;
	background-color: rgba(255,255,255,.5);
  text-align: center;
}

#who_am_i #wallpaper_dl  #logo img {
	width: 21%;
  height: auto;
}


/* ---- wallpaper ---- */
#who_am_i #wallpaper_dl {
	position: relative;
}

#who_am_i #wallpaper_dl .wallpaper_inner {
	width: 60.54%;
  position: absolute;
  top: 0;
  left: 19.73%;
}

#who_am_i #wallpaper_dl .h {
	width: 100%;
	margin: 0 auto;
  padding: 30% 0 12%;
}

#who_am_i #wallpaper_dl .h img {
	filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, .5));
}

#who_am_i #wallpaper_dl .phone {
	display: block;
	width: 88.55%;
	margin: 0 auto 10%;
}

#who_am_i #wallpaper_dl .btn_download {
	text-align: center;
}

#who_am_i #wallpaper_dl .btn_download a {
	display: inline-block;
	width: 88.55%;
}

#who_am_i .btn_back_top {
	width: 100%;
	margin: 0;
  position: absolute;
  left: 0;
  bottom: 20px;
  text-align: center;
}


#who_am_i .btn_back_top a {
 color: #fff;
 display: inline-block;
 position: relative;
 padding-right: 15px;
 font-weight: bold;
 margin: 0 auto;
 font-size: 1.4em;
}

#who_am_i .btn_back_top a::after{
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -3%;
  transform: rotate(45deg);
}





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

  #who_am_i #result_feild .info .btn_online_shop ul a {
    font-size: 0.95em;
  }

  #who_am_i #result_feild .info .btn_online_shop ul a::after{
    content: '';
    width: 6px;
    height: 6px;
  }
  
  #who_am_i .btn_back_top a {
   font-size: 1.2em;
  }


  #who_am_i .btn_back_top a::after{
    content: '';
    width: 8px;
    height: 8px;
  }

}

/* ---- animation ---- */
#who_am_i #result_feild .info {
	transition: all 0.5s 1.5s;
	backface-visibility: hidden;
	opacity: 0;
	transform: translateX(-8%);
}

#who_am_i #result_feild .loaded .info {
	opacity: 1;
	transform: translateX(0%);
}

#who_am_i #result_feild .photo img {
	transition: all 1.2s;
	backface-visibility: hidden;
	opacity: 0;
	transform: scale(1.3);
}

#who_am_i #result_feild .loaded .photo img {
	opacity: 1;
	transform: scale(1);
}

#who_am_i #result_feild .info .btn_online_shop {
	transition: all 0.6s 2.1s;
	backface-visibility: hidden;
	opacity: 0;
	transform: translateY(18%);
}

#who_am_i #result_feild .loaded .info .btn_online_shop {
	opacity: 1;
	transform: translateY(0%);
}


#who_am_i #wallpaper_dl.anm {
	transition: all 1s;
	backface-visibility: hidden;
	opacity: 0;
	transform: translateY(10%) rotate(0.0001deg);
}

#who_am_i #wallpaper_dl.visible {
	opacity: 1;
	transform: translateY(0%) rotate(0.0001deg);
}


#who_am_i #wallpaper_dl .btn_download img.anm2 {
	transition: all 0.6s 0.5s;
	backface-visibility: hidden;
	opacity: 0;
	transform: translateY(18%);
}

#who_am_i #wallpaper_dl .btn_download img.visible {
	opacity: 1;
	transform: translateY(0%);
}


#who_am_i .btn_back_top.anm2 {
	transition: all 0.6s 0.5s;
	backface-visibility: hidden;
	opacity: 0;
	transform: translateY(18%);
}

#who_am_i .btn_back_top.visible {
	opacity: 1;
	transform: translateY(0%);
}