@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }

html {
	min-height: 100%;
	/* height: 100%; */
}

.question-image {
    max-width: 450px;
}

body {
	position: relative;
	width: 100%;
	height: 100%;
	color: #302b29;
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	/* -webkit-transform: translate3d(0,0,0); */
	-webkit-text-size-adjust: 100%;
}

ul,
ol,
li,
h3,
h4,
h5 {
	margin:0;
	padding:0;
	list-style:none;
}

a, a:hover {
	cursor: pointer;
	text-decoration: none;
	outline: none;
}

a:link, a:visited {
	color: #21944b;
	text-decoration: none;
}

p, li, th, td, span {
	font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 20px;
	line-height: 1.4;
}

.wrapper {
	position: relative;
	height: 100%;
}

.scroll {
	position: absolute;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh !important;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

div.scroll > * {
	-webkit-transform: translateZ(0px);
}

.lead01 {
	width: 100%;
	height: 300px;
	padding-top: 5rem;
	color: #fff;
	background: url(../img/01.png) no-repeat center top;
	background-size: contain;
}

.lead02 {
	width: 100%;
	height: 350px;
	padding-top: 8rem;
	color: #fff;
	background: url(../img/02.png) no-repeat center top;
	background-size: contain;
}

.lead01 p,
.lead02 p {
	font-size: 200%;
	font-weight: 800;
	text-align: center;
	line-height: normal;
}

input {
	display: none;
	font-size: 0;
}

label {
	margin: 0 4px;
	padding: 0;
}

#q1-yes + label:after,
#q2-yes + label:after,
#q3-yes + label:after,
#q4-yes + label:after {
	cursor: pointer;
	display: inline-block;
	width: 178px;
	height: 89px;
	content: "";
	background: url(../img/yes02.png) no-repeat;
	background-size: cover;
}

#q1-yes:checked + label:after,
#q2-yes:checked + label:after,
#q3-yes:checked + label:after,
#q4-yes:checked + label:after {
	cursor: pointer;
	display: inline-block;
	width: 178px;
	height: 89px;
	content: "";
	background: url(../img/yes01.png) no-repeat;
	background-size: cover;
}

#q1-no + label:after,
#q2-no + label:after,
#q3-no + label:after,
#q4-no + label:after {
	cursor: pointer;
	display: inline-block;
	width: 178px;
	height: 89px;
	content: "";
	background: url(../img/no02.png) no-repeat;
	background-size: cover;
}

#q1-no:checked + label:after,
#q2-no:checked + label:after,
#q3-no:checked + label:after,
#q4-no:checked + label:after {
	cursor: pointer;
	display: inline-block;
	width: 178px;
	height: 89px;
	content: "";
	background: url(../img/no01.png) no-repeat;
	background-size: cover;
}
#q1-2-yes + label:after,
#q2-2-yes + label:after,
#q3-2-yes + label:after,
#q4-2-yes + label:after {
	cursor: pointer;
	display: inline-block;
	width: 178px;
	height: 89px;
	content: "";
	background: url(../img/lp/yes_off.gif) no-repeat;
	background-size: cover;
}

.yes_btn + label:after {
	background-image: url(../img/stylia/yes_off.png)!important;
}

#q1-2-yes:checked + label:after,
#q2-2-yes:checked + label:after,
#q3-2-yes:checked + label:after,
#q4-2-yes:checked + label:after {
	cursor: pointer;
	display: inline-block;
	width: 178px;
	height: 89px;
	content: "";
	background: url(../img/lp/yes_on.gif) no-repeat;
	background-size: cover;
}

.yes_btn:checked + label:after {
	background-image: url(../img/stylia/yes_on.png)!important;
}

#q1-2-no + label:after,
#q2-2-no + label:after,
#q3-2-no + label:after,
#q4-2-no + label:after {
	cursor: pointer;
	display: inline-block;
	width: 178px;
	height: 89px;
	content: "";
	background: url(../img/lp/no_off.gif) no-repeat;
	background-size: cover;
}

.no_btn + label:after {
	background-image: url(../img/stylia/no_off.png)!important;
}

#q1-2-no:checked + label:after,
#q2-2-no:checked + label:after,
#q3-2-no:checked + label:after,
#q4-2-no:checked + label:after {
	cursor: pointer;
	display: inline-block;
	width: 178px;
	height: 89px;
	content: "";
	background: url(../img/lp/no_on.gif) no-repeat;
	background-size: cover;
}

.no_btn:checked + label:after {
	background-image: url(../img/stylia/no_on.png)!important;
}

button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

#button:disabled {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	cursor: default;
}

@media screen and (min-width: 768px) {
    p, li, th, td, span {
        font-size: 26px;
    }
}

@media screen and (max-width: 600px) {
	.lead01 {
		height: 200px;
		padding-top: 3rem;
	}
	
	.lead02 {
		height: 240px;
		padding-top: 5rem;
	}
	
	.lead01 p,
	.lead02 p {
		font-size: 160%;
	}
	
	#q1-yes + label:after,
	#q1-yes:checked + label:after,
	#q1-no + label:after,
	#q1-no:checked + label:after,
	#q2-yes + label:after,
	#q2-yes:checked + label:after,
	#q2-no + label:after,
	#q2-no:checked + label:after,
	#q3-yes + label:after,
	#q3-yes:checked + label:after,
	#q3-no + label:after,
	#q3-no:checked + label:after,
	#q4-no + label:after,
	#q4-no:checked + label:after {
		width: 178px;
		height: 57px;
	}
	#q1-2-yes + label:after,
	#q1-2-yes:checked + label:after,
	#q1-2-no + label:after,
	#q1-2-no:checked + label:after,
	#q2-2-yes + label:after,
	#q2-2-yes:checked + label:after,
	#q2-2-no + label:after,
	#q2-2-no:checked + label:after,
	#q3-2-yes + label:after,
	#q3-2-yes:checked + label:after,
	#q3-2-no + label:after,
	#q3-2-no:checked + label:after,
	#q4-2-no + label:after,
	#q4-2-no:checked + label:after {
		width: 178px;
		height: 89px;
	}
}

@media screen and (max-width: 500px) {
	.lead01 {
		height: 170px;
		padding-top: 1.7rem;
	}
	
	.lead02 {
		height: 210px;
		padding-top: 5rem;
	}
}

@media screen and (max-width: 400px) {
	.lead01 {
		height: 140px;
		padding-top: 1.6rem;
	}
	
	.lead02 {
		height: 180px;
		padding-top: 4rem;
	}
	
	.lead01 p,
	.lead02 p {
		font-size: 120%;
	}
	
	#q1-yes + label:after,
	#q1-yes:checked + label:after,
	#q1-no + label:after,
	#q1-no:checked + label:after,
	#q2-yes + label:after,
	#q2-yes:checked + label:after,
	#q2-no + label:after,
	#q2-no:checked + label:after,
	#q3-yes + label:after,
	#q3-yes:checked + label:after,
	#q3-no + label:after,
	#q3-no:checked + label:after,
	#q4-yes + label:after,
	#q4-yes:checked + label:after,
	#q4-no + label:after,
	#q4-no:checked + label:after{
		width: 122px;
		height: 39px;
	}
	#q1-2-yes + label:after,
	#q1-2-yes:checked + label:after,
	#q1-2-no + label:after,
	#q1-2-no:checked + label:after,
	#q2-2-yes + label:after,
	#q2-2-yes:checked + label:after,
	#q2-2-no + label:after,
	#q2-2-no:checked + label:after,
	#q3-2-yes + label:after,
	#q3-2-yes:checked + label:after,
	#q3-2-no + label:after,
	#q3-2-no:checked + label:after,
	#q4-2-yes + label:after,
	#q4-2-yes:checked + label:after,
	#q4-2-no + label:after,
	#q4-2-no:checked + label:after{
		width: 122px;
		height: 61px;
	}
}

.page-title {
  width: 100%;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/bu_bg.png) left top repeat #EFEBE9;
  background-size: 6px auto;
  font-size: 225%;
  font-weight: 500;
	margin-top: 50px;
}

.page-title span {
	font-size: 36px;
}

.page-title span a {
	color: #333;
}

@media screen and (max-width: 768px) {
	.page-title span {
		font-size: 26px;
	}	
}