@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url(https://indestructibletype-fonthosting.github.io/renner.css);
.box {
  opacity: 0;
}
.pc{
	display: block;
}
.sp{
	display: none;
}
@media only screen and (max-width: 750px) {
	.pc{
	display: none;
}
.sp{
	display: block;
}
}
p {
  color: #231f20;
}
a{
	  transition: all .3s ease-in-out;
}
.slideUp {
  opacity: 1;
  animation: slideUp .5s ease-in-out forwards;
}
@keyframes slideUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15%, 0);
    transform: translate3d(0, 15%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/*===================================================================================================*/
#kv {
  background: url("../images/labo/new-gallery/main-kv.jpg") no-repeat center 50% fixed;
  background-size: cover;
  height: 100vh;
  position: relative;
}
@media only screen and (max-width: 750px) {
	#kv {
		height:90vh;
		 background: url("../images/labo/new-gallery/main-kv.jpg") no-repeat center 50% scroll !important;
  background-size: cover !important;
	}
	
}
#kv .present {
  position: absolute;
  top:0;
  right:0;
width: 30vw;
}
@media only screen and (max-width: 750px) {
	#kv .present {
		width:50vw;  
		top:0;
  right:0;
	}
}
#kv .present img{
	width:100%;
}
#kv .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 800px;
	width:50%;
}
@media only screen and (max-width: 750px) {
	#kv .title {
		width:calc(100% - 40px);
		top:45%;
	}
}
#kv .title p {
  width: 76%;
  margin: 0 auto;
  position: relative;
  top: 20px;
}
@media only screen and (max-width: 750px) {
#kv .title p {
  top: 10px;
	}
}
#kv .title:before {
  content: "";
  display: block;
  background: url("../images/labo/new-gallery/acc.svg") no-repeat;
  background-size: 100%;
  width: 150px;
  height: 60px;
  margin: 0 auto 25px auto;
  animation: acc 1s ease-in-out infinite;
}
@keyframes acc {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
  1000% {
    opacity: 1;
  }
}
#kv .title h2 {
  margin: 15px 0 0 0;
}
#kv .title .text p {
  width: auto;
  margin: 0 auto;
  position: static;
  color: #FFF;
  line-height: 1.7;
  text-align: center;
  font-size: 20px;
  letter-spacing: .1em;
}
@media only screen and (max-width: 1270px) {
	#kv .title .text p {
		  font-size: 1.5vw;
	}
}
@media only screen and (max-width: 750px) {
	#kv .title .text p {
				  font-size: 2.75vw;
	}
}
#kv .title .text {
  border-top: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
  padding: 15px 0;
  margin: 15px 0 0 0;
}
#kv .scroll {
  position: absolute;
  bottom: 15%;
  left: 48.5%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 750px) {
	#kv .title .text {
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
	}
	#kv .scroll {
		left:45%;
		bottom:23%;
	}
}
#kv .scroll p {
  position: relative;
  color: #FFF;
  font-family: 'Renner*' !important;
  letter-spacing: .1em;
  font-size: 13px;
  top: 10px;
}
#kv .scroll p a{
	  color: #FFF;
}
#kv .scroll p:before {
  content: "";
  display: block;
  background: url("../images/labo/new-gallery/pointer2.svg") no-repeat;
  background-size: 100%;
  width: 7px;
  height: 18px;
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  animation: up-down 1s ease-in-out infinite;
}
@keyframes up-down {
  0% {
    bottom: -40px;
  }
  50% {
    bottom: -35px;
  }
  1000% {
    bottom: -40px;
  }
}
#kv .scroll p:after {
  content: "";
  display: block;
  background: url("../images/labo/new-gallery/kakoi.svg") no-repeat;
  background-size: 100%;
  width: 33px;
  height: 28px;
  position: absolute;
  bottom: -55px;
  left: 50%;
  transform: translateX(-50%);
}
/*===================================================================================================*/
#gallery-btns ul {
  display: flex;
  justify-content: space-between;
	flex-wrap:wrap;
}
#gallery-btns ul li {
  width: 25%;
  text-align: center;
}

#gallery-btns ul li a {
  display: block;
}
#gallery-btns ul li a img {
  margin: 20px 0;
  height: 25px;
}
@media only screen and (max-width: 750px) {
	#gallery-btns ul li a img {
  margin: 15px 0;
	}
	#gallery-btns ul li:nth-child(1){
		width:100%;
	}
	#gallery-btns ul li:nth-child(1) a img{
		height:20px !important;
	}
	#gallery-btns ul li {
  width:33.3%;
	}
	#gallery-btns ul li a img{
		height:17px;
	}
}
#gallery-btns ul li a {
  padding: 30px 0;
	box-shadow: 0px 10px 10px -3px rgb(1 24 54 / 10%);
}
#gallery-btns ul li.quiz-btn a {
  background: #f7941e;
}
#gallery-btns ul li.role-btn a {
  background: #1c75bc;
}
#gallery-btns ul li.safety-btn a {
  background: #da1c5c;
}
#gallery-btns ul li.drama-btn a {
  background: #662d91;
}
#gallery-btns ul li a:before {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  margin: 0 auto;
}
@media only screen and (max-width: 750px) {
	#gallery-btns ul li a:before {
		  width: 20px;
  height: 20px;
	}
}
#gallery-btns ul li.quiz-btn a:before {
  background: url("../images/labo/new-gallery/icon1.svg") no-repeat;
  background-size: 100%;
}
#gallery-btns ul li.role-btn a:before {
  background: url("../images/labo/new-gallery/icon2.svg") no-repeat;
  background-size: 100%;
}
#gallery-btns ul li.safety-btn a:before {
  background: url("../images/labo/new-gallery/icon3.svg") no-repeat;
  background-size: 100%;
}
#gallery-btns ul li.drama-btn a:before {
  background: url("../images/labo/new-gallery/icon4.svg") no-repeat;
  background-size: 100%;
}
#gallery-btns ul li a p {
  font-family: 'Renner*' !important;
  color: #FFF;
  letter-spacing: .1em;
  font-size: 14px;
}
@media only screen and (max-width: 750px) {
	#gallery-btns ul li a p {
	font-size:11px;
	}
	}
/*===================================================================================================*/
#character {
  background: url("../images/labo/new-gallery/bk-character.jpg") no-repeat center 50% fixed;
  background-size: cover;
  padding: 100px 0;
}
@media only screen and (max-width: 750px) {
#character {
	padding: 60px 20px;
  background: url("../images/labo/new-gallery/bk-character.jpg") no-repeat center 50% scroll !important;
  background-size: cover !important;
	}
}
#character .intro {
  max-width: 980px;
  margin: 0 auto;
  padding: 50px;
  box-sizing: border-box;
  background: #FFF;
  box-shadow: 0px 10px 10px -3px rgb(1 24 54 / 10%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 750px) {
	#character .intro {
		padding: 40px 20px;
	}
}
#character .intro .pic {
  width: 25%;
}
#character .intro .pic img{
	display: block;
	margin: 0 auto;
	width:70%;
}
#character .intro .text {
  width: 70%;
}
#character .intro .text i {
  font-family: 'Renner*' !important;
  display: block;
  color: rgb(0 148 68 / 30%);
  font-size: 14px;
  letter-spacing: .1em;
}
@media only screen and (max-width: 750px) {
	#character .intro .text i {
		font-size: 11px;
	}
}
#character .intro .text h2 {
  color: rgb(0 148 68 / 100%);
  font-size: 28px;
  font-weight: bold;
  margin: 25px 0;
  letter-spacing: .1em;
}
@media only screen and (max-width: 750px) {
#character .intro .text h2 {
		font-size:20px;
	margin: 10px 0;
	}
}
#character .intro .text p {
  line-height: 1.7;
  letter-spacing: .1em;
}
@media only screen and (max-width: 750px) {
	#character .intro .text p {
		font-size:13px;
	}
}
/*===================================================================================================*/

h2.title{
	font-size:42px;
	text-align: center;
	letter-spacing: .1em;
	font-weight: bold;
}
@media only screen and (max-width: 750px) {
	h2.title{
		font-size:20px;
	}
}
h2.title.left{
	text-align: left;
	font-size:32px;
}
@media only screen and (max-width: 750px) {
h2.title.left{
		font-size:20px;
	}
}
h2.title.white{
	color: #FFF;
}
h2.title span{
	  font-family: 'Renner*' !important;
	display: block;
	font-size:16px;
		letter-spacing: .1em;
}
@media only screen and (max-width: 750px) {
h2.title span{
		font-size:13px;
	}
}
h2.title span:after{
	content:"";
	display: block;
	width:40px;
	height:1px;
	background: #666;
	margin: 15px auto ;
}
@media only screen and (max-width: 750px) {
h2.title span:after{
		width:25px;
	}
}
h2.title.left span:after{
	margin: 15px 0;
}
h2.title.white span:after{
	background: #FFF;
}
/*===================================================================================================*/
#quiz{
	background: url("../images/labo/new-gallery/bk-quiz.jpg") no-repeat center 50% fixed;
	background-size:cover;
	position: relative;
	padding: 100px 0;
}
@media only screen and (max-width: 750px) {
	#quiz{
		padding: 60px 20px;
		  background: url("../images/labo/new-gallery/bk-quiz.jpg") no-repeat center 50% scroll !important;
  background-size: cover !important;
	}
	}
#quiz:before{
	content:"";
	 background: rgb(249 237 77 / 90%);
	width:100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 1;
}
#quiz h2, #quiz p{
	position: relative;
	z-index: 9;
}

#quiz p{
	text-align: center;
	margin:25px auto 50px auto;
	line-height: 1.7;
	font-size:20px;
	letter-spacing: .1em;
	position: relative;
	max-width: 1080px;
}
#quiz p .balloon1-left {
  position: absolute;
  display: inline-block;
  margin:0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
	z-index: 99;
	border-radius:10px;
    top: -30px;
   left:77%;
	width:260px;
	box-shadow: 0px 10px 10px -5px rgb(0 0 0 / 20%);
}

#quiz p .balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 15px solid #FFF;
}

#quiz p .balloon1-left em {
  margin: 0;
  padding: 0;
	font-size:14px;
	line-height: 1.7;
	display: block;
	letter-spacing: .05em;
}
@media screen and (max-width: 750px) {
#quiz p	.balloon1-left{
		right:auto;
		left:50%;
		transform: translateX(-50%);
		width:240px;
		top: -140px;
	}
#quiz p .balloon1-left:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
	margin-top: -5px;
  border: 10px solid transparent;
  border-top: 15px solid #FFF;
}
#quiz p	.balloon1-left em {
		font-size:12px;
	}
}
#quiz .character{
	max-width: 1024px;
	margin: 0 auto;
	position: relative;
}
#quiz .character p{
	margin: 0;
	position: absolute;
	right:0;
	top:-240px;
	width:120px;
}
@media only screen and (max-width: 750px) {
	#quiz p{
		font-size:13px;
		margin: 20px 0;
	}
	#quiz .character p{
		margin: 0;
		width:50px;
		top:-185px;
	}
	.all-quiz li{
		font-size:11px;
	}
}
#quiz ul{
	max-width: 1024px;
	margin: 0 auto 60px;
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 9
}
@media only screen and (max-width: 750px) {
	#quiz ul{
		display: block;
	}
}
#quiz ul li{
	width:48%;
}
@media only screen and (max-width: 750px) {
	#quiz ul li{
		width:auto;
	}
	#quiz ul li:not(:last-child){
		margin-bottom: 30px;
	}
}
#quiz ul li h3{
	font-size: 20px;
	font-weight:bold;
	text-align: center;
	margin: 25px 0 0 0;
	letter-spacing: .1em;
}
@media only screen and (max-width: 750px) {
	#quiz ul li h3{
		font-size:16px;
		margin: 15px 0 0 0;
	}
}
.video .pic i{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width:60px;
}
@media only screen and (max-width: 750px) {
	.video .pic i{
		width:50px;
	}
	
}
.video .pic{
		position: relative;
	border: 7px solid #FFF;
	border-radius:20px;
		box-shadow: 0px 10px 10px -3px rgb(1 24 54 / 10%);
	line-height: 0;
}
.video .pic img{
		border-radius:13px;
}
#quiz p a{
	background: #ef4136;
	padding: 20px 60px;
			box-shadow: 0px 10px 10px -3px rgb(1 24 54 / 10%);
	border-radius:50px;
	color: #FFF;
	text-decoration: none;
	font-size:20px;
	font-weight:bold;
	letter-spacing: .1em;
	display: block;
	max-width:635px;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
	text-align: center;
}
#quiz p a:before{
	content:"";
	display: inline-block;
	width:50px;
	height:50px;
	background: url("../images/labo/new-gallery/icon-quiz.svg") no-repeat;
	background-size:100%;
	margin: 0 15px 0 0;
	position: absolute;
top: 30px;
    left: 90px;
}
#quiz p a:after{
	content:"";
	display: inline-block;
	width:100px;
	height:114px;
	background: url("../images/labo/new-gallery/present2.png") no-repeat;
	background-size:100%;
	margin: 0 15px 0 0;
	position: absolute;
	top:-27px;
	right:20px;
}
@media only screen and (max-width: 750px) {
	#quiz p a{
		font-size:4.75vw;
		display: block;
		padding:30px 20px 20px 20px;
		margin-top: 175px;
		border-radius:70px;
	}
#quiz p a:before{
			display: none;
	}
	#quiz p a:after{
	content:"";
	display: inline-block;
	width:60px;
	height:68px;
		right:auto;
		top:-45px;
		left:50%;
		transform: translateX(-50%);
	}
}
/*===================================================================================================*/
#role-safety{
		background: url("../images/labo/new-gallery/bk-role.jpg") no-repeat center 50% fixed;
	background-size:cover;
	position: relative;
	padding: 100px 0;
}
@media only screen and (max-width: 750px) {
#role-safety{
		padding: 60px 20px;
		  background: url("../images/labo/new-gallery/bk-role.jpg") no-repeat center 50% scroll !important;
  background-size: cover !important;
	}
}

#role-safety > section{
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1024px;
	margin: 0 auto;
}
@media only screen and (max-width: 750px) {
#role-safety > section{
	display: block;
	}
}


#role-safety > section.row{
	flex-direction: row-reverse;
	margin: 50px auto 0 auto;
}
#role-safety > section >  div{
	width:48%;
}
@media only screen and (max-width: 750px) {
	#role-safety > section.row{
		margin-top: 30px;
	}
#role-safety > section >  div{
	width: auto;
	}
	#role-safety h2{
		text-align: center;
		margin-bottom: 30px;
	}
	#role-safety h2 span:after{
		margin-right:auto;
		margin-left: auto;
	}
}
#role-safety > section >  div.text{
	text-align: left;
}
#role-safety > section >  div.text p{
	margin: 25px 0 0 0;
	line-height: 1.7;
	letter-spacing: .1em;
}
/*===================================================================================================*/
#drama{
	background: url("../images/labo/new-gallery/bk-drama.jpg") no-repeat center 50% fixed;
	background-size:cover;
	position: relative;
	padding: 100px 0;
	border-bottom: 3px solid #FFF;
}
@media only screen and (max-width: 750px) {
	#drama{
		padding: 60px 20px;
				  background: url("../images/labo/new-gallery/bk-drama.jpg") no-repeat center 50% scroll !important;
  background-size: cover !important;
	}
}
#drama:before{
	content:"";
	 background: rgb(39 170 225 / 90%);
	width:100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 1;
}
#drama h2, #drama ul{
	position: relative;
	z-index: 9;
}
#drama ul{
	display: flex;
	max-width: 1024px;
	margin: 50px auto 0 auto;
	flex-wrap:wrap;
	justify-content: space-between;
	}
@media only screen and (max-width: 750px) {
#drama ul{
		display: block;
	margin: 30px 0 0 0;
	}
}
#drama ul li{
	width:48%;
}
@media only screen and (max-width: 750px) {
#drama ul li{
		width:auto;
	}
}
#drama ul li:nth-child(n +2){
	margin-bottom: 25px;
}
@media only screen and (max-width: 750px) {
	#drama ul li{
	margin-bottom:30px !important;
}
}
#drama ul li h3{
	text-align: center;
	font-size:20px;
	letter-spacing: .1em;
	color: #FFF;
	font-weight:bold;
	margin: 25px 0 0 0;
	line-height: 1.7;
}
@media only screen and (max-width: 750px) {
#drama ul li h3{
font-size:16px;
	margin: 15px 0 0 0;
}
}
#drama ul li:nth-child(1) h3{
	margin: 40px 0 0 0;
}
@media only screen and (max-width: 750px) {
#drama ul li:nth-child(1) h3{
	margin: 15px 0 0 0;
}
}
/*===================================================================================================*/
.lock {
  overflow: hidden;
}
#modal-target {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
}
.modal-content {
  display: none;
}
.modal-overlay {
  z-index: 9998;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
}
.modal-overlay.yellow{
  background: rgba(249, 237, 77, .9);
}
.modal-overlay.white{
  background: rgba(255,255,255, .9);
}
.modal-overlay.blue{
  background: rgba(39,170,225, .9);
}
.modal-wrap {
  z-index: 9999;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch
}
.modal-open {
  text-decoration: none;
}
.modal-open:hover {
  cursor: pointer;
}
p.closemodal {
  position: fixed;
  top: 30px;
  right: 40px;
}
p.closemodal a:hover {
  color: #333;
}
@media only screen and (max-width:736px) {
  p.closemodal {
    top: 15px;
    right: 15px;
  }
}
.modal-close {
  background: #333;
  color: #FFF;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  vertical-align: middle;
  display: block;
  font-size: 20px;
}
@media only screen and (max-width:736px) {
  .modal-close {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
  }
}
.modal-close:hover {
  cursor: pointer;
}
.modal-content > .textarea {
  width: 800px;
  box-shadow: 0px 10px 10px -5px rgba(0,0,0, 0.2);
  box-sizing: border-box;
  background: #FFF;
  border-radius: 10px;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 0;
}
.modal-content > .textarea.sc{
	max-height: 80vh;
	overflow-y:scroll;
}
@media only screen and (max-width: 750px) {
	.modal-content > .textarea {
		width:calc(100% - 40px);
	}
}
.modal-content > .textarea.move {
	  transition: all .5s ease-in-out;
}
.modal-content.appear > .textarea.move {
  padding: 50px 100px;
  min-height: 400px;
}
@media only screen and (max-width: 750px) {
	.modal-content.appear > .textarea.move {
		padding: 20px 20px 40px 20px;
	}
}
.modal-content > div img {
  max-width: 100%;
}

/*QUIZ*/
.quiz_area {
  position: relative;
  display: none;
}
/* 回答後に上に被せてタップできなくするための要素（デフォルト非表示、回答後に一時的に表示） */
.quiz_area .quiz_area_bg {
  position: absolute;
  width: 100%;
  height: 105%;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;

  display: none;
  color: #FFF;
  text-align: center;
}
/* 画面に〇、×を表示するための要素（デフォルト非表示、回答後に一時的に表示） */
.quiz_area .quiz_area_icon {
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  z-index: 9999;
  transform: translate(-50%, -50%);
  color: red;
  display: none;
  font-size: 10em;
  font-weight: bold;
  -webkit-text-stroke: 4px #FFF;
  text-stroke: 4px #FFF;
}
/* .trueまたは.falseのクラスが付与されたら表示するものとみなす */
.quiz_area .quiz_area_icon.true, .quiz_area .quiz_area_icon.false {
  display: block;
}
/* .trueは正解（〇を表示） */
.quiz_area .quiz_area_icon.true:before {
  content: '〇';
  color: #ef4136;
  font-weight: bold;
}
/* .falseは不正解（×を表示） */
.quiz_area .quiz_area_icon.false:before {
  content: '×';
  color: #27aae1;
  font-weight: bold;
}
.quiz_area h3 {
  text-align: center;
  position: absolute;
  top: -85px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #FFF;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 30px;
  vertical-align: middle;
  z-index: 9999;
  font-family: 'Renner*' !important;
}
@media only screen and (max-width:736px) {
  .quiz_area h3 {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 25px;
    top: -65px;
  }
}
.quiz_area h3 span {
  font-family: 'Renner*' !important;
}
/* 問題文と回答後の結果（デザインは使いまわし） */
.quiz_area .quiz_question, .quiz_result {
  box-sizing: border-box;
  padding: 15px 0;
  font-size: 20px;
  letter-spacing: .1em;
  line-height: 1.7;
}
.prize-wrap{
	background: url("../images/labo/new-gallery/back-prize.svg") no-repeat;
	background-size:cover;
}
@media only screen and (max-width:736px) {
  .quiz_area .quiz_question, .quiz_result {
    padding: 15px 0;
    font-size: 16px;
  }
}
/* 回答後の結果は初期非表示 */
.quiz_area .quiz_result {
  display: none;
  text-align: center;
}
.quiz_area .quiz_result span {
  background: linear-gradient(transparent 75%, rgba(241, 90, 41, .2) 75%);
  font-size: 32px;
  letter-spacing: .15em;
	font-weight:bold;
	position: relative;
}
.quiz_area .quiz_result span:after{
    content: "";
    background: url(../images/labo/new-gallery/sample2.svg) no-repeat right bottom;
    background-size: 100%;
    width: 75px;
    height: 80px;
    display: block;
    position: absolute;
    right: -105px;
    bottom: 0;
}
.quiz_area .quiz_result span i {
  color: #ef4136;
  font-size: 130%;
  font-family: 'Renner*' !important;
	font-weight:bold;
}
@media only screen and (max-width:736px) {
	.quiz_area .quiz_result span:after{
		width:60px;
		height:57px;
		right:-70px;
		
	}
  .quiz_area .quiz_result span {
    font-size: 22px;
  }
}
.quiz_result .gold {
  background: url("../images/labo/new-gallery/medal-gold.png") no-repeat;
  background-size: 100%;
  width: 135px;
  height: 206px;
  margin: 25px auto 0 auto;
}
@media only screen and (max-width:736px) {
	.quiz_result .gold {
		width: 100px;
    height: 165px;
	}
}
.quiz_result .silver {
  background: url("../images/labo/new-gallery/medal-silver.png") no-repeat;
  background-size: 100%;
  width: 135px;
  height: 206px;
  margin: 25px auto 0 auto;
}
@media only screen and (max-width:736px) {
.quiz_result .silver {
		width: 100px;
    height: 165px;
	}
}
.quiz_result .bronze {
  background: url("../images/labo/new-gallery/medal-bronze.png") no-repeat;
  background-size: 100%;
  width: 135px;
  height: 206px;
  margin: 25px auto 0 auto;
}
@media only screen and (max-width:736px) {
.quiz_result .bronze {
		width: 100px;
    height: 165px;
	}
}

.all-quiz{
	padding:  30px 0 15px 0;
}
.all-quiz ul{
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 9999;
}
.all-quiz ul:after{
content:"";
	background: #EEE;
	position: absolute;
	width:90%;
	height:1px;
	top:50%;
	left:5%;
	z-index: -1;
}
.all-quiz li{
background: #EEE;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
	font-size: 13px;
	font-family: 'Renner*' !important;
}
.all-quiz li.active{
background: #F9ED32;
    color: #666;
}
/* 以下クイズの選択肢のデザイン */
.quiz_area .quiz_ans_area ul {
  margin: 10px 0 0 0;
  padding: 0;
  display: block;
	position: relative;
}

.quiz_area .quiz_ans_area ul::after {
  content: "";
  background:url(../images/labo/new-gallery/sample2.svg) no-repeat right bottom;
	background-size:100%;
	width:75px;
	height:80px;
	display: block;
	position: absolute;
    right: -105px;
    bottom: -50px;
}
.quiz_area .quiz_ans_area ul li {
  box-sizing: border-box;
  list-style: none;
  width: 100%;
  padding: 12px 30px;
  border: 2px solid #333;
  margin: 0 0 -2px 0;
  cursor: pointer;
  text-align: center;
  border-radius: 50px;
  font-size: 18px;
  letter-spacing: .1em;
	line-height: 1.7;
transition: all .3s ease-in-out;
	
}
.correct{
	background:#C00;
	color: #FFF;
	border:2px solid #C00;
}
@media only screen and (max-width:736px) {
	.all-quiz{
	padding:  15px 0 0 0;
}
	.quiz_area .quiz_ans_area ul li:last-child{
		margin-bottom: 25px;
	}
	.quiz_area .quiz_ans_area ul::after{
		    right: -25px;
    bottom: -65px;
		width: 60px;
    height: 57px;
	}
  .quiz_area .quiz_ans_area ul li {
    font-size: 15px;
  }

}
.quiz_area .quiz_ans_area ul li:not(:last-child) {
  margin-bottom: 15px;
}

.quiz_area .quiz_ans_area ul li.selected {
	 background: rgb(249 237 77 / 90%);
}
.button-wrap{
	position: relative;
}
.quiz_restart {
  background: none;
  border: 2px solid #333;
border-radius: 70px;
    padding: 22px 160px 22px 50px;
  margin: 35px auto 0 auto;
	font-weight:bold;
	font-size: 18px;
	cursor: pointer;
	transition: all .3s ease-in-out;
	position: relative;
	line-height: 1.7
}
.quiz_restart:hover{
	opacity: .7;
}
.quiz_restart:after {
  content: "";
  display: block;
  background: url("../images/labo/new-gallery/present2.png") no-repeat;
  background-size: 100%;
width: 100px;
    height: 114px;
  position: absolute;
  top: -25px;
	right:50px;
}

form#sendmail .text-box {
  padding: 10px;
  background: #f1f2f2;
  width: 80%;
  box-sizing: border-box;
  border: none;
  border-radius: 5px;
  margin-left: 10px
}
@media screen and (max-width: 750px) {
	.quiz_restart{
		padding: 35px 20px 20px 20px;
		margin: 140px 0 0 0;
		display: block;
    width: 100%;
		box-sizing: border-box;
		font-size:4.5vw;
	}
	.quiz_restart:after {
		right:auto;
		left:50%;
		transform: translateX(-50%);
		width: 60px;
    height: 68px;
		top:-35px;
	}
  form#sendmail .text-box {
    width: 70%;
    margin: 0
  }
}
form#sendmail h2{
	font-size:24px;
	font-weight:bold;
	text-align: center;
}
form#sendmail p {
  margin: 25px 0 0 0;
	font-size:14px;
line-height: 1.7;
}
@media screen and (max-width: 750px) {
	form#sendmail h2{
		font-size:20px;
	}
  form#sendmail p {
    margin: 15px 0 0 0;
    font-size: 12px !important
  }
}
form#sendmail p small {
  font-size: 12px;
}
form#sendmail p#alert {
  text-align: center;
  background:#ef4136;
  color: #FFF;
	margin-bottom: 15px;
}
form#sendmail h3 {
  font-size: 18px;
  margin: 25px 0;
  text-indent: -1.8em;
  padding-left: 1.8em;
	line-height: 1.7;
}
@media screen and (max-width: 750px) {
  form#sendmail h3 {
    font-size: 16px;
    text-indent: -1.3em;
    padding-left: 1.3em
  }
}
form#sendmail h3 small {
  display: block;
  font-size: 14px;
  margin-left: 30px
}
@media screen and (max-width: 750px) {
  form#sendmail h3 small {
    margin-left: 20px;
    font-size: 12px
  }
}
form#sendmail h3 + p {
  font-size: 16px
}
form#sendmail input[type=text]{
	  padding: 10px;
  background: #f1f2f2;
  width: 100%;
	  box-sizing: border-box;
  border: none;
  border-radius: 5px
}
form#sendmail textarea {
  padding: 10px;
  background: #FFF;
  width: 100%;
  height: 200px;
  box-sizing: border-box;
  border: 2px solid #999;
  border-radius: 5px
}
form#sendmail ul.list li {
  margin-bottom: 15px;
  text-indent: -1.2em;
  padding-left: 1.2em
}
form#sendmail ul.list li:last-child {
  margin-bottom: 0
}

@media screen and (max-width: 750px) {
  form#sendmail ul.list li label {
    font-size: 14px
  }
}
form#sendmail ul.list li label small {
  font-size: 12px;
}
form#sendmail ul.list li input[type=text] {
  padding: 10px;
  background: #f1f2f2;
  width: 70%;
  box-sizing: border-box;
  border: none;
  border-radius: 5px;
  margin-left: 10px
}
form#sendmail ul.list2 {
  display: flex
}
@media screen and (max-width: 750px) {
  form#sendmail ul.list2 {
    display: block
  }
}
form#sendmail ul.list2 li {
  margin-right: 20px
}
form#sendmail ul.list2 li:last-child {
  margin-right: 0
}
form#sendmail ul.list2 li label {
  font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important
}
@media screen and (max-width: 750px) {
  form#sendmail ul.list2 li label {
    font-size: 14px
  }
}
form#sendmail ul.list2 li label small {
  font-size: 12px;
}
form#sendmail table.table2 {
  width: 100%;
  margin-bottom: 25px
}
form#sendmail table.table2 th {
  width: 60%;
  border-bottom: 1px solid #EEE;
  padding: 10px 0;
  text-indent: -1em;
  padding-left: 1em;
  vertical-align: top
}
@media screen and (max-width: 750px) {
  form#sendmail table.table2 th {
    width: auto;
    border-bottom: none;
    padding-bottom: 0
  }
}
form#sendmail table.table2 td {
  border-bottom: 1px solid #EEE;
  padding: 10px 0
}
form#sendmail table.table3 {
  width: 100%;
  margin-bottom: 25px
}
form#sendmail table.table3 th {
  width: 20%;
  padding: 10px 0;
  vertical-align: top
}
@media screen and (max-width: 750px) {
  form#sendmail table.table3 th {
    padding-bottom: 0;
    width: auto
  }
}
form#sendmail table.table3 td {
  padding: 10px 0
}
form#sendmail table.table3 td select {
  padding: 10px;
  background: #f1f2f2;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 5px;
  margin-bottom: 10px;
}
form#sendmail h4 {
  font-size: 18px;
}
form#sendmail table {
  width: 100%
}
form#sendmail table th {
  padding-bottom: 15px;
  vertical-align: middle;
  width: 100px
}
@media screen and (max-width: 750px) {
  form#sendmail table th {
    width: auto;
    display: block;
    padding-bottom: 5px;
    font-size: 14px
  }
}
form#sendmail table td {
  padding-bottom: 15px
}
@media screen and (max-width: 750px) {
  form#sendmail table td {
    display: block
  }
}
form#sendmail table td input[type=text], form#sendmail table td input[type=email] {
  padding: 10px;
  background: #f1f2f2;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 5px;
}
span.error {
  color: #C00;
  font-weight: bold;
  font-size: 14px;
	display: block;
	margin: 20px 0 0 0;
	text-indent: -1.8em;
    padding-left: 1.8em;
    line-height: 1.5;
}
@media screen and (max-width: 750px) {
  span.error {
    font-size: 12px
  }
}
  form#sendmail label {
  cursor: pointer;
  padding-left: 40px;
  position: relative;
}


  form#sendmail label::before,
  form#sendmail label::after {
  content: "";
  display: block; 
  position: absolute;
}

  form#sendmail label::before {
  background-color: #fff;
  border-radius: 0%;
  border: 2px solid #999;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  top: 50%;
  left: 5px;
}

  form#sendmail label::after {
  border-bottom: 2px solid #C00;
  border-left: 2px solid #C00;
  opacity: 0;
  height: 5px;
  width: 10px;
  transform: rotate(-45deg);
  top: 5px;
  left: 10px;
}

  form#sendmail input:checked + label::after {
  opacity: 1;
}
#thanks{
	background: rgb(249 237 77 / 100%);
	padding: 100px 0;
}
#thanks #inside{
	max-width: 800px;
	margin: 0  auto;
	background: #FFF;
	padding:100px 50px;
	box-sizing: border-box;
	box-shadow:0px 10px 10px -5px rgb(0 0 0 / 20%);
	border-radius:10px;
	position: relative;
}
@media screen and (max-width: 750px) {
	#thanks{
		padding: 60px 20px;
	}
	
	#thanks #inside{
		width: auto;
		padding: 20px 20px 40px 20px;
	}
}
#thanks #inside:before{
	content:"";
	display: block;
	position: absolute;
	top:0;
	left:0;
	background: url("../images/labo/new-gallery/flag1.svg") no-repeat;
	background-size:100%;
	width:169px;
	height:94px;
}

#thanks #inside:after{
	content:"";
	display: block;
	position: absolute;
	top:0;
	right:0;
	background: url("../images/labo/new-gallery/flag2.svg") no-repeat;
	background-size:100%;
	width:169px;
	height:94px;
}
@media screen and (max-width: 750px) {
	#thanks #inside:before,
		#thanks #inside:after{
		width:100px;
	height:55px;
}
}
#thanks #inside i{
	display: block;
	width:60%;
	margin: 0 auto 25px auto;
}
@media screen and (max-width: 750px) {
	#thanks #inside i{
		margin: 50px auto 25px auto;
	}
}
#thanks #inside h2{
	color: #ef4136;
	font-weight:bold;
	text-align: center;
	font-size:40px;
	line-height:1.5;
	text-indent: .1em;
	margin-bottom: 25px;
}
#thanks #inside p{
	font-size:20px;
	text-align: center;
	line-height: 1.7;
	letter-spacing: .1em;
}
#thanks #inside p.btn{
	position: relative;
}
#thanks #inside h3{
	text-align: center;
	margin:0 0 0 0;
	position: relative;
	top:50px;
		font-size:18px;
}
#thanks #inside h3 span{
	position: relative;
	color: #ef4136;	font-weight:bold;
}
#thanks #inside h3 span:before{
	content:"";
	display: inline-block;
	background: #ef4136;
	width:25px;
	height:1px;
	transform: rotate(-125deg);
}
#thanks #inside h3 span:after{
	content:"";
	display: inline-block;
	background: #ef4136;
	width:25px;
	height:1px;
	transform: rotate(-55deg);
}
@media screen and (max-width: 750px) {
	#thanks #inside h3{
		position: static;
		margin: 25px 0 0 0;
		font-size:14px;
	}
#thanks #inside h2{
		font-size:22px;
	margin-bottom: 15px;
	}
	#thanks #inside p{
		font-size:14px;
	}
}
#thanks #inside p.btn{
	margin: 90px 0 0 0;
}

#thanks #inside p.btn a{
	background: #ef4136;
	padding: 25px 170px 25px 120px;
	color: #FFF;
	border-radius:50px;
	font-weight:bold;
	box-shadow: 0px 10px 10px -3px rgb(1 24 54 / 10%);
	font-size:24px;
	position: relative;
}


#thanks #inside p.btn a:after{
  content: "";
  display: block;
  background: url("../images/labo/new-gallery/present2.png") no-repeat;
  background-size: 100%;
width: 100px;
    height: 114px;
  position: absolute;
  top: -38px;
	right:50px;
}
#thanks #inside p.btn a:before{
	content:"";
	display: inline-block;
	background: url("../images/labo/new-gallery/icon-pdf.svg") no-repeat;
	background-size:100%;
	width:30px;
	height:37px;
	margin-right: 15px;
	position: relative;
	top:5px;
}
@media screen and (max-width: 750px) {
	#thanks #inside p.btn a:after{
		top:-42px;
		left:50%;
		width: 50px;
    height: 55px;
		right:auto;
		transform: translateX(-50%);
	}
	#thanks #inside p.btn{
	margin:160px 0 0 0;
}
#thanks #inside p.btn a{
	display: block;
	padding:25px 20px 20px 20px;
	font-size:18px;
}
#thanks #inside p.btn a:before{
	width:20px;
	height:25px;
	margin-right: 15px;
	position: relative;
	top:5px;
}
}
ul.list li:not(:last-child){
	margin-bottom:10px;
}
.submit_btn{
	margin: 25px 0 0;
}
.loading{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}
.confirm-btn{
	background: #ef4136;
    padding: 20px 60px;
    box-shadow: 0px 10px 10px -3px rgb(1 24 54 / 10%);
    border-radius: 50px;
    color: #FFF;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: .1em;
	display: block;
	width:100%;
	box-sizing: border-box;
}
@media screen and (max-width: 750px) {
	.confirm-btn{
		padding: 20px;
		font-size:14px;
	}
}
.loading{
	display: none;
}
.button-wrap .balloon1-left {
  position: absolute;
  display: inline-block;
  margin:0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
	z-index: 99;
	border-radius:10px;
    bottom: 60px;
    left:79%;
	width:260px;
	box-shadow: 0px 10px 10px -5px rgb(0 0 0 / 20%);
}

.button-wrap .balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 15px solid #FFF;
}

.button-wrap .balloon1-left p {
  margin: 0;
  padding: 0;
	font-size:14px;
	line-height: 1.7;
	display: block;
	letter-spacing: .05em;
}
@media screen and (max-width: 750px) {
.button-wrap	.balloon1-left{
		right:auto;
		left:50%;
		transform: translateX(-50%);
    bottom: auto;
    top: -250px;
	width:240px;
	}
.button-wrap .balloon1-left:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
	margin-top: -5px;
  border: 10px solid transparent;
  border-top: 15px solid #FFF;
}
.button-wrap	.balloon1-left p {
		font-size:12px;
	}
}


#thanks #inside .balloon1-left {
  position: absolute;
  display: inline-block;
  margin:0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
	z-index: 99;
	border-radius:10px;
    top: -60px;
left: 82%;
    width: 260px;
	box-shadow: 0px 10px 10px -5px rgb(0 0 0 / 20%);
}

#thanks #inside .balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 15px solid #FFF;
}

#thanks #inside .balloon1-left em {
  margin: 0;
  padding: 0;
	font-size:14px;
	line-height: 1.7;
	display: block;
	letter-spacing: .05em;
}
#thanks #inside .balloon1-left em i{
	margin: 0;
	display: initial;
}
@media screen and (max-width: 750px) {
#thanks #inside	.balloon1-left{
		right:auto;
		left:50%;
		transform: translateX(-50%);
		width:240px;
		top: -140px;
	}
#thanks #inside .balloon1-left:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
	margin-top: -5px;
  border: 10px solid transparent;
  border-top: 15px solid #FFF;
}
#thanks #inside .balloon1-left em {
		font-size:12px;
	}
}