@charset "utf-8";

body {
  
}
main {
  background: #fff;
	color: #333333;
  width: 100%;
  font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
  line-height: 1.5;
  text-align: center;
}
img {
  width: 100%;
}
.blue {
  color: #005bc9;
}
.orange {
  color: #fd8700;
}
.water {
  color: #5ac4f0;
}
.small {
  font-size: 0.9rem;
  font-weight: 500;
}
.header {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1rem;
}
.header .h_logo{
	width: 34%;
}
.header p{
	font-size: 0.6rem;
	line-height: 1;
}
h1 {
	
}
.box {
  background: #eaebed;
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
  padding: 3rem 0.5rem 1.2rem;
  width: 91%;
  margin: 0 auto 3rem;
}

/*.box:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 25px solid #fff9ef;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.08));
}*/

.number {
	width: 15%;
	position: absolute;
	left: 0;
	right: 0;
	top: -1.8rem;
	margin: auto;
}
.question {
  font-weight: 700;

  font-size: 1.25rem;
}
.answer {
  margin-top: 1.5rem;
}
input {
  display: none;
}
input + label {
  display: block;
  cursor: pointer;
  width: 90%;
  height: 3.5rem;
  background: #ffffff;
  margin: 0 auto 1rem;
  font-size: 1rem;
  color: #333333;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
	border: 2px solid #005bc9;
}

input:checked + label {
  background: #005bc9;
	color: #fff;
}

.answer.check-mark label {
  height: 5.2rem;
}
.answer.check-mark label p {
  padding-left: 2.4rem;
  width: 94%;
}
.answer.check-mark input + label {
  justify-content: center;
  padding-left: 0;
  position: relative;
}

.answer.check-mark input + label:before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: #d7d7d9;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
	border-radius: 4px;
}
.answer.check-mark input:checked + label:before{
	background: #fff;
}
.answer.check-mark input:checked + label:after {
  content: "";
  width: 0.5rem;
  height: 1rem;
  border: solid #005bc9;
  border-width: 0 3px 3px 0;
  position: absolute;
  left: 1.55rem;
  top: 48%;
  transform: translateY(-50%) rotate(45deg);
}
.thanks {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.cta {
  background: white;
  padding: 1rem 0;
  font-weight: 700;
}
.cta .bg {
  background: #eaebed;
  padding: 2rem 5%;
  font-size: 1.1rem;
	border-radius: 50px;
}
.cta .bg .large {
  color: #005bc9;
background:linear-gradient(transparent 60%, #ffe100 60%);
  font-size: 1.5rem;
}
.cta .text {
  font-size: 1rem;
  margin: 1.5rem 0 1rem;
}

.btn {
  margin: 1rem auto;
  position: relative;
}

.btn a {
  display: block;
  background: #005bc9;
  color: white;
  text-decoration: none;
  padding: 1rem;
  border-radius: 100px;
  position: relative;
  font-size: 1.2rem;
}
.btn a:hover {
  background: #fd8700;
}

footer {
	background: #fff;
	border-top: 1px solid #637884;
  font-size: 0.7rem;
  padding: 1rem 0;
}
footer .f_inner {
	display: table;
	margin: auto;
}

footer a {
  margin: 0 0.5rem;
}

@media screen and (min-width: 751px) {
  html {
    font-size: 27px;
  }
  body {
	  background:url("../img/pc_bg.jpg") center no-repeat;
	  background-size: cover;
	  background-attachment: fixed;
  }
  main {
    width: 700px;
    margin: auto;
  }
.box {
  border-radius: 100px;
}
.cta .bg {
	border-radius: 100px;
}
}