@charset "utf-8";
@import url(reset.css);
@import url(normalize.css);
@import url(animation.css);
@import url(https://fonts.googleapis.com/css?family=Prompt:100,200,300,400,500,600,700,800,900|Kanit:900|Noto+Sans+JP&display=swap);

/*-----------------------------
	初期設定
------------------------------*/

html,body {
	width: 100%;
	height: 100% !important;
	font-family: 'Prompt', 'Noto Sans JP', sans-serif;
	background: #fff !important;
	margin: 0 auto;
	word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*/
* {
    margin:0;
    padding:0;
}
a,
a:active,
a:visited,
a:focus  {
	color: #666;
	text-align: justify;
	text-decoration: none;
	outline: none;
	transition: all .3s;
}
a:hover {
	color: #666;
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
	transition: all .3s;
}

a.catch,
a.catch:active,
a.catch:visited  {
	color: #fff;
	text-align: center;
	text-decoration: none;
}

::selection,
::-moz-selection {
	background: #000;
	color: #fff;
}
img a {
	border: none;
}
h1,h2,h3,h4,p,ul,li {
	font-family: 'Prompt', 'Noto Sans JP', sans-serif;
	color: #666;
	margin: 0px;
	padding: 0px;
	text-align: inherit;
	list-style: none;
}
h1,h2 {
	font-size: 24px;
	font-weight: bold;
}
h2 {
	font-size: 18px;
}
h3 {
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid #999;
}
h4 {
	font-size: 20px;
	font-weight: 500;
}
p {
	font-size: 16px;
	line-height: 2em;
	font-weight: 300;
}
li {
	margin: 12px 0px;
	font-size: 16px;
	text-align: left;
	font-weight: 300;
}

input[type=radio] {
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: sub;
}

.none {
	display: none !important;
}



/*-----------------------------
	共通
------------------------------*/

#container {
	position: relative;
	width: calc(100% - 100px);
	max-width: 800px;
	height: 100%;
	margin: 40px auto;
}

.header p {
	margin: 40px 20px;
	padding-bottom: 40px;
	border-bottom: 1px dotted #ccc;
	text-align: center;
}

.content {
	width: calc(100% - 40px);
	margin: 0 20px;
}

.question {
	margin-bottom: 40px;
}

.question input,
.question label {
	cursor: pointer;
}

.results {
	display: flex;
	justify-content: space-around;
	margin-bottom: 40px;
}

.result {
	width: 100%;
	text-align: center;
	border-top: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
}
.result:first-of-type {
	border-left: 1px solid #999;
}

.result h4 {
	padding: 10px 0;
	background: #eee;
	border-bottom: 1px solid #999;
	font-family: 'Prompt', serif;
	font-size: 30px;
}

.result_a,
.result_b,
.result_c {
	margin: 10px 0;
	font-family: 'Prompt', serif;
	font-size: 30px;
	color: #666;
}

p.attention {
	display: block;
	width: calc(100% - 140px);
	max-width: 500px;
	color: #000;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	padding: 20px 40px;
	margin: 0 auto;
	margin-bottom: 20px;
	border: 3px solid #000;
	white-space: nowrap;
}

.bn {
	position: relative;
}
.bn:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
	transition: all .3s;
}
.bn.selected:after {
	background: rgba(0, 0, 0, 0);
}
.bn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.back {
	text-align: center;
}
.back a {
	display: inline-block;
	border: 3px solid #000;
	padding: 20px 40px;
	margin-bottom: 40px;
	color: #000;
	font-size: 16px;
	font-weight: bold;
}
.back a:hover {
	background: #000;
	color: #fff;
}


/*-----------------------------
	PC設定
------------------------------*/

@media screen and (min-width: 641px)
{

.smp {
	display: none !important;
}

}






/*-----------------------------
	タブレットスマホ設定
------------------------------*/

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

.pc {
	display: none !important;
}

#container {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	margin-bottom: 40px;
}

.header p {
	text-align: justify;
}


p.attention {
	width: calc(100% - 50px);
}
p.attention,
.back a {
	font-size: 14px;
	padding: 10px 20px;
}

.bn {
	display: none;
}
.bn.selected {
	display: block;
}

}




/*-----------------------------
	スタイル調整
------------------------------*/

/* パディング用 */
.p0 { padding: 0 !important; }
.p20 { padding: 20px 0 !important; }
.p40 { padding: 40px 0 !important; }
.p60 { padding: 60px 0 !important; }
.p80 { padding: 80px 0 !important; }

.pt0 { padding-top: 0px !important; }
.pt20 { padding-top: 20px !important; }
.pt40 { padding-top: 40px !important; }
.pt60 { padding-top: 60px !important; }
.pt80 { padding-top: 80px !important; }

.pb0 { padding-bottom: 0px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb60 { padding-bottom: 60px !important; }
.pb80 { padding-bottom: 80px !important; }

/* マージン用 */
.m0 { margin: 0 !important; }
.m20 { margin: 20px 0 !important; }
.m40 { margin: 40px 0 !important; }
.m60 { margin: 60px 0 !important; }
.m80 { margin: 80px 0 !important; }

.mt0 { margin-top: 0px !important; }
.mt20 { margin-top: 20px !important; }
.mt40 { margin-top: 40px !important; }
.mt60 { margin-top: 60px !important; }
.mt80 { margin-top: 80px !important; }

.mb0 { margin-bottom: 0px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb80 { margin-bottom: 80px !important; }