@charset 'UTF-8';

/**********************************************************

reset

**********************************************************/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body {line-height: 1; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } nav ul {list-style: none; } blockquote, q {quotes: none; } blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; } a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } /* change colours to suit your needs */ ins {background-color: #ff9; color: #000; text-decoration: none; } /* change colours to suit your needs */ mark {background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del {text-decoration: line-through; } abbr[title], dfn[title] {border-bottom: 1px dotted; cursor: help; } table {border-collapse: collapse; border-spacing: 0; } /* change border colour to suit your needs */ hr {display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } ul,ol {list-style-type: none; } input, select {vertical-align: middle; } input[type="checkbox"], input[type="radio"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; border: 0; outline: none; padding: 12px; background: transparent; } a {text-decoration: none; }
/**********************************************************

Common

**********************************************************/
html {
	color: #333;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Arial ", sans-serif;
	font-size: 62.5%;
	position: relative;
	letter-spacing: 1px;
}

body {
	background-color: #f2dfc2;
	font-size: 1.8rem;
	line-height: 1.8;
}

img {
	max-width: 100%;
	height: auto;
}
sup {
	font-size: 1.3rem;
}

.notice {
	font-size: 1.2rem;
	color: #666;
	margin-top: 5px;
}
.notice-area {
	margin-top: 20px;
}


@media screen and (max-width: 750px) {
	body {
		font-size: 1.4rem;
		font-size: 3.733vw;
	}
	sup {
		font-size: 1.1rem;
		font-size: 2.933vw
	}
	.notice-area {
		margin-top: 15px;
	}
	.notice {
		font-size: 1rem;
		font-size: 2.667vw;
		margin-top: 0;
	}
}

/**********************************************************

MV

**********************************************************/
.mv-area h1 {
	line-height: 0;
}

/**********************************************************

Layout

**********************************************************/

.wrapper {
	max-width: 750px;
	width: 100%;
	margin: 0 auto;
}

.section {
	max-width: 750px;
	position: relative;
	margin: 0 auto;
	padding: 0 0 12%;s
	z-index: 100;
	background: #fff;
}

.section-inner {
}
.section-first {
}


@media screen and (max-width: 750px) {
	.section {
	}
	.section-first {
	}
	.section-inner {
\	}
	.section-first .section-inner {
	}
}

/**********************************************************

Layout Question

**********************************************************/
.q-area {
	padding: 0;
	position: relative;
}
.q-movie-area {
}

.q-area .step {
	margin: 0 auto;
	text-align: center;
}
.q-area .step img {
}
.q-area .q-txt {
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1.8;
	margin-top: 20px;
}
.q-area .q-txt .marker {
	display: inline;
	background: -moz-linear-gradient(transparent 72%, #FFD753 0%); 
	background: -webkit-linear-gradient(transparent 72%, #FFD753 0%); 
	background: linear-gradient(transparent 72%, #FFD753 0%);
	color: #FF6600;
}
.q-area figure.q-fig {
}
.q-area .q-txt .q-txt-notice {
	font-size: 2rem;
}

#q03 .q-area {
}
#q03 .cv-campaign {
}


@media screen and (max-width: 750px) {
	.q-area,
	#q03 .q-area {
		padding: 0 5px;
	}
	#q03 .cv-campaign {
		padding: 0;
	}
	.q-area .step {
		
	}
	.q-area .step img {
		max-width: 49.6vw;
	}
	.q-area .q-txt {
		font-size: 1.5rem;
		font-size: 4vw;
		line-height: 1.6;
		margin-top: 4px;
	}
	.q-area figure.q-fig {
		margin-top: 15px;
	}
	.q-area .q-txt .q-txt-notice {
		font-size: 1rem;
	}
	
}

/**********************************************************

Header

**********************************************************/
header {
	background-color: #f0f0f0;
}
@media screen and (max-width: 750px) {
	header {
		background-color: #fff;
	}
}

/**********************************************************

Ans Button

**********************************************************/
input[type=radio], input[type=checkbox] {
	display: none;
}
ul.answer-list {
}
#q02 ul.answer-list {
	width: 90%;
	margin: auto;
}
ul.answer-list li {
	line-height: 1.5;
}
#q02 ul.answer-list {}
#q02 ul.answer-list li {
	margin-top: 15px;
}
#q02 ul.answer-list li:first-child {
	margin-top: 0;
}
/* ************* 
q3
**************/
#q03 ul.answer-list {
	width: 90%;
	margin: auto;
}
#q03 ul.answer-list li {
	line-height: 1.5;
}
#q03 ul.answer-list {}
#q03 ul.answer-list li {
	margin-top: 15px;
}
#q03 ul.answer-list li:first-child {
	margin-top: 0;
}
#q03 ul.answer-list li label.ans-checkbox {
  display: flex;
		align-items: center;
}
ul.answer-list li label.ans-checkbox {
	width: 100%;
	height: 100%;
	position: relative;
	display: inline-block;
	background: #fff;
	color: #7f5406;
	border: 2px solid #7f5406;
	box-shadow: 0px 5px 0px 0px #7f5406;
	font-weight: bold;
	font-size: 20px;
	padding: 24px 18px 24px 50px;
	border-radius: 6px;
	vertical-align: middle;
	box-sizing: border-box;
	cursor: pointer;
	transition: .3s;
}
ul.answer-list li label.ans-checkbox strong {
	color: #FF6600;
}

input[type=checkbox]:checked + label.ans-checkbox {
	background: #FFD753;
	box-shadow: none;
	position: relative;
	top: 5px;
}

ul.answer-list li label.ans-checkbox::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 15px;
	display: block;
	margin-top: -10px;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border: 1px solid #7f5406;
	transition: .3s;
}

ul.answer-list li label.ans-checkbox::after {
	position: absolute;
	top: 50%;
	left: 21px;
	display: block;
	margin-top: -9px;
	width: 8px;
	height: 12px;
	content: '';
	opacity: 0;
	transition: .3s;
	border-right: 3px solid #7f5406;
	border-bottom: 3px solid #7f5406;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
input[type=checkbox]:checked + label.ans-checkbox {
	color: #fff;
	background-color: #7f5406;
}
input[type=checkbox]:checked + label.ans-checkbox:before {
	background-color: #FFD753;
}
input[type=checkbox]:checked + label.ans-checkbox:after {
	opacity: 1;
}
#q03 ul.answer-list li {box-sizing: border-box;}
#q03 ul.answer-list li:nth-child(3),
#q03 ul.answer-list li:nth-child(4) {margin-top:15px;}
#q03 ul.answer-list li label.ans-checkbox {
  /* padding: 16px; */
		padding: 8px 16px;
}
/* #q03 ul.answer-list li label.ans-checkbox::before {
	 top: 11%; 
} */
#q03 ul.answer-list li label .q-03-txt{
	position: relative;
	left: 3rem;
	width: 90%;
	vertical-align: middle;
	/* min-height: 62px;
	display: block; */
}
#q03 ul.answer-list li label .q-03-fig{
	width: 30%;
}
.sp-only {
	display: none;
}
@media screen and (max-width: 750px) {
.sp-only {
	display: block;
}
	#q03 ul.answer-list li label .q-03-fig{
	width: 45%;
}
}
ul.answer-list-2col {
	display: flex;
  justify-content: space-evenly;
	padding-right: 5px;
	box-sizing: border-box;
}
ul.answer-list-2col li {
	width: 42%;
	box-sizing: border-box;
}
ul.answer-list-2col li:first-child {
}
ul.answer-list-2col li:last-child {
}
.answer-list-colum {
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.answer-list-colum li {
  width: 46%;
}

@media screen and (max-width: 750px) {
	ul.answer-list li {
		margin-top: 10px;
	}
	ul.answer-list {
		margin-top: 0;
	}
	ul.answer-list li label.ans-checkbox {
		font-size: 1.5rem;
		font-size: 4vw;
		box-shadow: 0px 3px 0px 0px #7f5406;
		padding: 15px 15px 15px 43px;
	}

	ul.answer-list li label.ans-checkbox::before {
		width: 20px;
		height: 20px;
		margin-top: -10px;
	}
	ul.answer-list li label.ans-checkbox::after {
		width: 6px;
		height: 14px;
		margin-top: -11px;
		left: 22px;
	}
}

/**********************************************************

動画

**********************************************************/
.q-area .q-txt.q-txt-movie {
	text-align: center;
	margin: 0 0 10px;
}
video {
  width: 90%;
  margin: auto;
  display: block;
}

@media screen and (max-width: 750px) {
	.q-area .q-txt.q-txt-movie {
		margin: 10px 0 0;
	}
}

/**********************************************************

CV Button

**********************************************************/
.btn-area {
	margin-top: 20px;
}
.btn-cv {
	display: block;
	height: auto;
	background-color: #FF6600;
	border: 1px solid #7B2A0B;
	/*border-bottom: 8px solid #673909;*/
	border-radius: 20px;
	padding: 16px 0 17px 0;
	box-shadow: 0 7px 0 0 rgba(123,42,11,1),
	0px 12px 0px 0px rgba(113,113,113,.5);
	overflow: hidden;
	position: relative;
	transition: .3s;
	cursor: pointer;
}
.btn-cv .btn-txt {
	position: relative;
	font-size: 2.6rem;
	color: #fff;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
	z-index: 999;
}
.btn-cv .btn-txt > span {
	display: block;
	color: #FFEE69;
	font-size: 2rem;
}
.btn-cv::before {
	content: "";
	position: absolute;
	background-color: rgba(255,215,83,.4);
	width: 100%;
	height: 50px;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	border: none;
	top: 1px;
	right: 0;
	left: 1px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-left-radius: 50% 60%;
	border-bottom-right-radius: 50% 60%;
	margin-top: 0;
}
.btn-cv .arw {
	position: absolute;
	top: 50%;
	right: 40px;
	margin-top: -5px;
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.btn-disable {
	background-color: #999;
	border: 1px solid #666;
	box-shadow: none;
}
.btn-disable::before {
	display: none;
}
.btn-disable .btn-txt {
	color: #ddd;
}
.btn-disable .btn-txt > span {
	color: #ddd;
}
.btn-disable .arw {
	border-top: 2px solid #ddd;
	border-right: 2px solid #ddd;
}

@media screen and (max-width: 750px) {
	.btn-area {
		margin-top: 20px;
	}
	.btn-cv {
		border-radius: 15px;
	}
	.btn-cv::before {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.btn-cv .btn-txt {
		font-size: 1.8rem;
		font-size:  4.8vw;
		letter-spacing: 0;
		line-height: 1.3;
	}
	.btn-cv .btn-txt > span {
		font-size: 1.4rem;
		font-size: 3.733vw;
	}
	.btn-cv .arw {
		right: 15px;
		width: 10px;
		height: 10px;
		right: 6vw;
		width: 2.667vw;
		height: 2.667vw;
	}
}

@media screen and (min-width: 1025px) {
	.btn-cv:hover {
		opacity:0.8;
	}
}

/**********************************************************

動画スキップボタン

**********************************************************/
.btn-skip {
	position: relative;
	display: block;
	width: 320px;
	background: #fff;
	color: #7f5406;
	text-align: center;
	border: 2px solid #7f5406;
	box-shadow: 0px 5px 0px 0px #7f5406;
	font-weight: bold;
	font-size: 20px;
	padding: 24px 18px 24px 18px;
	border-radius: 6px;
	vertical-align: middle;
	box-sizing: border-box;
	margin:  0 auto;
	cursor: pointer;
	transition: .3s;
}
.btn-skip::before {
	content: "";
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 7px solid transparent;
	border-left: 14px solid #7f5406;
	right: 0;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
}
.btn-skip::after {
	content: "";
	width: 3px;
	height: 20px;
	background-color: #7f5406;
	right: 0;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}
.btn-skip:active {
	background: #7f5406;
	color: #fff;
	box-shadow: none;
	top: 5px;
}
.btn-skip:active::before {
	border-left: 14px solid #fff;
}
.btn-skip:active::after {
	background-color: #fff;
}



@media screen and (max-width: 750px) {
	.btn-area-skip {
		margin-top: 10px;
	}
	.btn-skip {
		font-size: 1.5rem;
		font-size: 4vw;
		box-shadow: 0px 3px 0px 0px #7f5406;
		padding: 15px;
	}
}

@media screen and (min-width: 1025px) {
	.btn-skip:hover {
		opacity: .8;
	}
}


/**********************************************************

Animation

**********************************************************/
/*.section-animate::after {
	display: block;
	content: "";
	position:fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	transform: scaleX(0);
	background-color: #7f5406;
	animation-name:page-switch-anim;
	animation-duration:1.3s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}*/

@keyframes page-switch-anim {
	0% {
		transform-origin:right;
		transform:scaleX(0);
		background-color: #4AD556;
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
		background-color: #4AD556;
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}


.hide {
	display: none;
}