@charset "utf-8";
/* CSS Document */
* {
	box-sizing: border-box;
}
html, * {
	font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Verdana","Osaka","ＭＳ Ｐゴシック",sans-serif;
	font-size: 16px;
}
.content {
	width: 768px;
	margin: 0 auto;
	padding: 0 30px;
}
a:hover {
	/*opacity: 0.8;*/
}

/* ------------------------
ヘッダー
------------------------ */
header {
	height: 40px;
	background: #095697;
}
header .logo {
	height: 40px;
	line-height: 40px;
}
header .logo img {
	vertical-align: baseline;
}

/* ------------------------
メインコンテンツ
------------------------ */
main {
	display: block;
	background: url(../images/bg_main.gif);
	background-size: 9px 9px;
	min-height: calc(100vh - 90px);
}
.main-title {
	background: #fff;
	border-bottom: 5px solid #d1dfec;
}
/* 基本ページのタイトル */
.title {
	height: 80px;
	line-height: 80px;
	background: url(../images/analysis_img.png) bottom 0px right 20px no-repeat;
	background-size: 140px 75px;
}
.title .forSP {
	display: none;
}
.title img {
	vertical-align: middle;
}
/* トップページのタイトル */
.top-title {
	text-align: center;
	padding: 20px 0 40px;
}
.top-title img {
	width: 522px;
	height: 176px;
}
article {
	padding: 20px 0;
}
.article-box {
	background: #fff;
	border-radius: 8px;
	padding: 25px 30px;
	margin-bottom: 20px;
}
.article-text {
	margin-bottom: 10px;
}
.article-text span {
	font-weight: bold;
}
.article-note {
	margin-bottom: 10px;
	font-size: 12px;
	text-indent: -1em;
	margin-left: 1em;
}
.article-text.article-last,
.article-note.article-last {
	margin-bottom: 0;
}
.text-box {
	background: #fff;
	border-radius: 8px;
	padding: 5px 30px;
	margin-bottom: 20px;
	font-size: 14px;
	text-align: center;
}
/* 見出し */
h2.page-heading {
	text-align: center;
	font-size: 27px;
	font-weight: bold;
	margin-bottom: 5px;
}
/* ボタンのスタイル */
.button {
	display: inline-block;
	text-align: center;
	color: #fff;
	font-weight: bold;
	padding: 20px 0;
	border-radius: 8px;
	background-color: #f44510;
	box-shadow: 0px 6px 0px 0px #af310b;
	border: none;
	line-height: 1.2;
	cursor: pointer;
}
.button.close {
	background-color: #a0a0a0;
	box-shadow: 0px 6px 0px 0px #8c8c8c;
	cursor: default;
	pointer-events: none;
	color: #d2d2d2;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
/* ------------------------
フッター
------------------------ */
footer {
	height: 50px;
	background: #095697;
}
footer p {
	height: 50px;
	color: #fff;
	font-size: 12px;
	line-height: 50px;
	text-align: center;
}

/* ------------------------
トップページ
------------------------ */
.start-button {
	margin: 45px 0;
}
.start-button img {
	width: 100%;
}
.disclaimer {
	height: 180px;
	overflow-y: scroll;
	background: #fff;
	font-size: 12px;
	padding: 20px;
	margin-bottom: 20px;
}
.disclaimer > p.heading {
	font-size: 14px;
	font-weight: bold;
}
.disclaimer > p {
	margin-bottom: 10px;
}
.disclaimer > p:last-child {
	margin-bottom: 20px;
}
.disclaimer > p.disclaimer-list {
	text-indent: -1em;
	padding-left: 1em;
}

/* ------------------------
質問ページ
------------------------ */
.progress {
	margin-bottom: 10px;
}
.progress span {
	display: inline-block;
	width: 80px;
	height: 30px;
	line-height: 30px;
	font-size: 17px;
	font-weight: bold;
}
.progress span.progress-bar {
	position: relative;
	background: #fff;
	width: calc(100% - 80px);
	height: 16px;
	overflow: hidden;
}
/* 回答状況の進捗メーター */
.progress span.progress-bar::after {
	content: '';
	display: block;
	width: 0%;
	height: 100%;
	background: #f44510;
}
.progress span.progress-bar.progress1::after {
	width: calc(100% / 12 * 1);
}
.progress span.progress-bar.progress2::after {
	width: calc(100% / 12 * 2);
}
.progress span.progress-bar.progress3::after {
	width: calc(100% / 12 * 3);
}
.progress span.progress-bar.progress4::after {
	width: calc(100% / 12 * 4);
}
.progress span.progress-bar.progress5::after {
	width: calc(100% / 12 * 5);
}
.progress span.progress-bar.progress6::after {
	width: calc(100% / 12 * 6);
}
.progress span.progress-bar.progress7::after {
	width: calc(100% / 12 * 7);
}
.progress span.progress-bar.progress8::after {
	width: calc(100% / 12 * 8);
}
.progress span.progress-bar.progress9::after {
	width: calc(100% / 12 * 9);
}
.progress span.progress-bar.progress10::after {
	width: calc(100% / 12 * 10);
}
.progress span.progress-bar.progress11::after {
	width: calc(100% / 12 * 11);
}
/* 質問文言 */
h2.question {
	display: table;
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 15px;
	border-bottom: 2px solid #a0a0a0;
}
h2.question span {
	display: table-cell;
}
h2.question span:first-child {
	padding-right: 10px;
}
/* 回答リスト */
.question-panel {
	margin: 20px 0 10px;
}
.question-panel a {
	position: relative;
	display: block;
	color: #000;
	font-size: 18px;
	background: #eee;
	border: 4px solid #a0a0a0;
	border-radius: 8px;
	margin: 10px 0;
	padding: 20px 35px 20px 50px;
}
.question-panel a span {
	position: absolute;
	display: inline-block;
	width: 30px;
	font-weight: bold;
	top: 20px;
	left: 20px;
}
.question-panel a::after {
	content: '';
	display: inline-block;
	width: 15px;
	height: 24.5px;
	position: absolute;
	right: 10px;
	top: 50%;
	background: url(../images/panel_arrow_off.png) no-repeat;
	background-size: contain;
	transform: translateY(-50%);
}
.question-panel a:hover {
	color: #fff;
	background: #095697;
	border-color: #095697;
	transition: all 0.3s;
}
.question-panel a:hover::after {
	background-image: url(../images/panel_arrow_on.png);
	transition: all 0.3s;
}

/* ------------------------
診断結果ページ
------------------------ */
.result-box {
	background: #fff06e;
	color: #095697;
	border: 4px solid #095697;
	border-radius: 8px;
	padding: 10px 30px;
	margin-bottom: 20px;
}
.result-box p:first-child {
	font-size: 20px;
	line-height: 20px;
	margin-bottom: 5px;
	animation: showChart 0.5s 2.5s both;
}
.result-type {
	text-align: center;
	font-weight: bold;
	font-size: 0px;
	line-height: 1.2;
}
.result-type > span {
	display: inline-block;
	font-size: 40px;
	animation: showType 0.3s both;
}
.result-type > span:nth-child(1) { animation-delay: 3.10s;}
.result-type > span:nth-child(2) { animation-delay: 3.15s;}
.result-type > span:nth-child(3) { animation-delay: 3.20s;}
.result-type > span:nth-child(4) { animation-delay: 3.25s;}
.result-type > span:nth-child(5) { animation-delay: 3.30s;}
.result-type > span:nth-child(6) { animation-delay: 3.35s;}
.result-type > span:nth-child(7) { animation-delay: 3.40s;}
.result-type > span:nth-child(8) { animation-delay: 3.45s;}
.result-type > span:nth-child(9) { animation-delay: 3.50s;}
.result-type > span:nth-child(10) { animation-delay: 3.55s;}
.result-type > span:nth-child(11) { animation-delay: 3.60s;}
.result-type > span:nth-child(12) { animation-delay: 3.65s;}
.result-type > span:nth-child(13) { animation-delay: 3.70s;}
.result-type > span:nth-child(14) { animation-delay: 3.75s;}
.result-type > span:nth-child(15) { animation-delay: 3.80s;}
.result-type > span:nth-child(16) { animation-delay: 3.85s;}
.result-type > span:nth-child(17) { animation-delay: 3.90s;}
.result-type > span:nth-child(18) { animation-delay: 3.95s;}
.result-type > span:nth-child(19) { animation-delay: 4.00s;}
.result-type > span:nth-child(20) { animation-delay: 4.05s;}
.result-type > span:nth-child(21) { animation-delay: 4.10s;}
.result-type > span:nth-child(22) { animation-delay: 4.15s;}
.result-type > span:nth-child(23) { animation-delay: 4.20s;}
.result-type > span:nth-child(24) { animation-delay: 4.25s;}
.result-type > span:nth-child(25) { animation-delay: 4.30s;}

@keyframes showType {
	0% {
		transform: scale(1.5);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
/* 診断結果チャート */
.chart-wrapper {
	position: relative;
	width: 100%;
	height: auto;
	background: #fff;
	border-radius: 8px;
	border: 4px solid #d1dfec;
	margin-bottom: 20px;
}
.bg-chart {
	position: relative;
	line-height: 1;
}
.bg-chart > img {
	width: 100%;
	vertical-align: bottom;
}
.load-text {
	position: absolute;
	opacity: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	animation: loadHide 2.5s;
}
@keyframes loadHide {
	0%, 90% {
		opacity: 1;
	}
	95% {
		opacity: 0;
	}
}
.result-chart {
	position: relative;
	padding: 15px 10px;
/*	opacity: 0;*/
	animation: showChart 0.5s 3.5s both;
}
@keyframes showChart {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.chart-wrapper p[class^="type-tag"] {
	position: absolute;
	/*border-radius: 5px;*/
	/*padding: 5px 10px;*/
	font-weight: bold;
	z-index: 10;
}
/*.chart-wrapper p[class^="type-tag"] > br {
	display: none;
}*/
.chart-wrapper p.type-tag1 {
	top: 5px;
	left: 4%;
	color: #1e4362;
	/*background: #b3d9f6;*/
}
.chart-wrapper p.type-tag2 {
	top: 5px;
	right: 5%;
	color: #af4600;
	text-align: right;
	/*background: #ffce9a;*/
}
.chart-wrapper p.type-tag3 {
	bottom: 5px;
	left: 4%;
	color: #723262;
	/*background: #f8aee6;*/
}
.chart-wrapper p.type-tag4 {
	bottom: 5px;
	right: 5%;
	color: #20673e;
	text-align: right;
	/*background: #9ee6bc;*/
}
.chart-wrapper p.star-img {
	position: absolute;
	display: block;
	content: '';
	width: 50px;
	height: 50px;
	background: url(../images/star.png) no-repeat 0 0;
	background-size: contain;
	transform: translate(-50%, -50%);
	z-index: 20;
}
/* 星の位置調整 */
.chart-wrapper p.star-img.x-1 {
	left: 10%;
}
.chart-wrapper p.star-img.x-2 {
	left: 20%;
}
.chart-wrapper p.star-img.x-3 {
	left: 30%;
}
.chart-wrapper p.star-img.x-4 {
	left: 40%;
}
.chart-wrapper p.star-img.x-5 {
	left: 60%;
}
.chart-wrapper p.star-img.x-6 {
	left: 70%;
}
.chart-wrapper p.star-img.x-7 {
	left: 80%;
}
.chart-wrapper p.star-img.x-8 {
	left: 90%;
}

.chart-wrapper p.star-img.y-1 {
	top: 20%;
}
.chart-wrapper p.star-img.y-2 {
	top: 30%;
}
.chart-wrapper p.star-img.y-3 {
	top: 40%;
}
.chart-wrapper p.star-img.y-4 {
	top: 60%;
}
.chart-wrapper p.star-img.y-5 {
	top: 70%;
}
.chart-wrapper p.star-img.y-6 {
	top: 80%;
}
/* タイプ吹出し */
.chart-wrapper div.result-text {
	position: absolute;
	width: 100%;
	z-index: 20;
	font-size: 13px;
	line-height: 1.4;
	padding: 0 5%;
}
.chart-wrapper div.result-text p {
	background: rgba(9,86,151, 0.9);
	padding: 10px;
	border-radius: 10px;
	color: #fff;
}
.chart-wrapper div.result-text span {
	display: block;
	font-weight: bold;
}
.chart-wrapper div.result-text::after {
	content: '';
	position: absolute;
	z-index: 20;
	border: 15px solid transparent;
	transform: translateX(-50%);
}
/* タイプ吹出しの位置調整 */
.chart-wrapper div.result-text.x-1::after {
	left: 10%;
}
.chart-wrapper div.result-text.x-2::after {
	left: 20%;
}
.chart-wrapper div.result-text.x-3::after {
	left: 30%;
}
.chart-wrapper div.result-text.x-4::after {
	left: 40%;
}
.chart-wrapper div.result-text.x-5::after {
	left: auto;
	right: 40%;
	transform: translateX(50%);
}
.chart-wrapper div.result-text.x-6::after {
	left: auto;
	right: 30%;
	transform: translateX(50%);
}
.chart-wrapper div.result-text.x-7::after {
	left: auto;
	right: 20%;
	transform: translateX(50%);
}
.chart-wrapper div.result-text.x-8::after {
	left: auto;
	right: 10%;
	transform: translateX(50%);
}
.chart-wrapper div.result-text p {
	width: calc(50% - 15px);
	border-radius: 5px;
}
.chart-wrapper div.result-text.x-5 p,
.chart-wrapper div.result-text.x-6 p,
.chart-wrapper div.result-text.x-7 p,
.chart-wrapper div.result-text.x-8 p {
	float: right;
}
.chart-wrapper div.result-text.y-1 {
	top: calc(20% + 45px);
}
.chart-wrapper div.result-text.y-2 {
	top: calc(30% + 45px);
}
.chart-wrapper div.result-text.y-3 {
	top: calc(40% + 45px);
}
.chart-wrapper div.result-text.y-4 {
	bottom: calc(40% + 45px);
}
.chart-wrapper div.result-text.y-5 {
	bottom: calc(30% + 45px);
}
.chart-wrapper div.result-text.y-6 {
	bottom: calc(20% + 45px);
}
.chart-wrapper div.result-text.y-1::after,
.chart-wrapper div.result-text.y-2::after,
.chart-wrapper div.result-text.y-3::after {
	border-bottom-color: rgba(9,86,151, 0.9);
	top: -30px;
}
.chart-wrapper div.result-text.y-4::after,
.chart-wrapper div.result-text.y-5::after,
.chart-wrapper div.result-text.y-6::after {
	border-top-color: rgba(9,86,151, 0.9);
	bottom: -30px;
}
.chart-wrapper div.result-text.noresult {
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}
.chart-wrapper div.result-text.noresult p {
	display: inline-block;
	width: auto;
	font-size: 27px;
}
.chart-wrapper div.result-text p.no-text {
	display: inline-block;
	width: auto;
	padding: 10px;
	font-size: 18px;
}
/* 詳細ボタン */
.more-btn {
	text-align: center;
	margin-bottom: 10px;
}
.more-btn .all-type {
	position: relative;
	display: inline-block;
	height: 25px;
	line-height: 25px;
	font-size: 18px;
	color: #000;
	padding-left: 30px;
}
.more-btn .all-type::before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	display: block;
	width: 25px;
	height: 25px;
	background: url(../images/link_mark.png) no-repeat 0 0;
	background-size: contain;
}
.more-btn .button {
	display: block;
	width: 500px;
	margin: 20px auto;
	font-size: 32px;
}
main.more-info {
	background: #fff;
}
main.more-info article {
	background: url(../images/bg_main.gif);
	background-size: 9px 9px;
	padding-bottom: 10px;
}
/* ------------------------
詳細診断結果ページ
------------------------ */
h3.interpretation-heading {
	position: relative;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	padding-left: 25px;
}
h3.interpretation-heading::after {
	position: absolute;
	display: block;
	content: '';
	width: 20px;
	height: 20px;
	top: 5px;
	left: 0;
	background-size: contain;
}
h3.interpretation-heading.icon-advice::after {
	background-image: url(../images/icon_advice.png);
}
h3.interpretation-heading.icon-interpretation::after {
	background-image: url(../images/icon_interpretation.png);
}
.interpretation-list {
	table-layout: fixed;
}
.interpretation-list tr {
	border-top: 1px solid #a0a0a0;
}
.interpretation-list tr:last-child {
	border-bottom: 1px solid #a0a0a0;
}
.interpretation-list th,
.interpretation-list td {
	padding: 10px 0;
}
.interpretation-list th {
	position: relative;
	width: 40%;
	text-align: left;
	padding-right: 80px;
	vertical-align: middle;
	font-weight: bold;
}
.interpretation-list th::after {
	position: absolute;
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	top: 50%;
	right: 20px;
	background-size: contain;
	transform: translateY(-50%);
}
.interpretation-list th.interpretation1::after {
	background-image: url(../images/interpretation1.png);
}
.interpretation-list th.interpretation2::after {
	background-image: url(../images/interpretation2.png);
}
.interpretation-list th.interpretation3::after {
	background-image: url(../images/interpretation3.png);
}
.interpretation-list td {
	width: 60%;
}
main.more-info {
	background: #fff;
}
main.more-info article {
	background: url(../images/bg_main.gif);
	background-size: 9px 9px;
	padding-bottom: 10px;
}
/* ------------------------
もっと詳しく知りたい方へ
------------------------ */
.company-info .content {
	padding: 15px 30px 20px;
}
.company-info .content:nth-child(n+2) {
	padding-top: 0;
}
.company-info h2 {
	margin-bottom: 20px;
}
.company-img {
	width: 130px;
	height: 80px;
	float: left;
}
.company-img img {
	width: 130px;
	height: 80px;
}
.company-text {
	width: 550px;
	float: right;
	font-size: 18px;
}
.company-text a {
	color: #000;
}
.company-text span {
	font-weight: bold;
}
/* ------------------------
回答表
------------------------ */
.answer-table {
	width: 100%;
	margin: 20px 0;
	table-layout: fixed;
	empty-cells: show;
}
.answer-table th,
.answer-table td {
	padding: 5px 0;
	border: 1px solid #000;
	vertical-align: middle;
}
.answer-table th {
	width: 12%;
}
.answer-table td {
	width: 8%;
	text-align: center;
}

.answer-table caption {
	text-align: left;
}

.answer-table caption span {
	font-weight: bold;
}

/* ------------------------
スマートフォン表示
------------------------ */
@media screen and (max-width: 768px) {
	/* ヘッダー */
	header .logo {
		text-align: center;
	}
	/* メインコンテンツSP */
	.content {
		width: 100%;
		padding: 0 20px;
	}
	.title {
		background: none;
		text-align: center;
	}
	.title .forPC,
	.content br.forPC {
		display: none;
	}
	.title .forSP {
		display: inline-block;
		width: 85%;
		max-width: 300px;
	}
	.article-box {
		padding: 20px 15px;
	}
	.text-box {
		padding: 5px 15px;
	}
	.article-text {
		margin-bottom: 20px;
	}
	h2.page-heading {
		font-size: 20px;
		margin-bottom: 10px;
	}
	/* トップページ */
	.top-title {
		padding: 15px 15px 30px;
	}
	.top-title img {
		width: 100%;
		height: auto;
	}
	.start-button {
		margin: 30px 0;
	}
	.disclaimer {
		height: 230px;
	}
	/* 質問ページ */
	h2.question {
		font-size: 18px;
	}
	.question-panel a {
		font-size: 16px;
		padding: 10px 35px 10px 40px;
		border-width: 3px;
	}
	.question-panel a span {
		top: 10px;
		left: 10px;
	}
	/* 診断結果ページ */
	.result-box {
		padding: 5px 15px 10px;
	}
	.result-box p:first-child {
		font-size: 14px;
		line-height: 18px;
	}
	.result-type {
		height: auto;
	}
	.result-type > span {
		font-size: 22px;
	}
	.result-chart {
		padding: 20px 10px;
	}
	.chart-wrapper p[class^="type-tag"] {
		line-height: 1.2;
	}
/*	.chart-wrapper p[class^="type-tag"] > br {
		display: inline;
	}*/
	.chart-wrapper div.result-text p {
		padding: 5px;
		width: 300px;
	}
/*	.chart-wrapper div.result-text.y-3 p,
	.chart-wrapper div.result-text.y-4 p {
		width: 300px;
	}*/
	.chart-wrapper div.result-text.noresult p {
		width: auto;
		font-size: 20px;
		padding: 10px;
	}
	.more-btn .button {
		width: 100%;
	}
	/* 詳細診断結果ページ */
	.interpretation-list th {
		display: block;
		width: 100%;
		max-width: 250px;
		margin-top: 20px;
		padding-top: 0;
		padding-bottom: 0;
	}
	.interpretation-list td {
		display: block;
		width: auto;
		padding-bottom: 20px;
	}
	/* もっと詳しく知りたい方へ */
	.company-info .content {
		padding: 20px 20px 30px;
	}
	.company-img {
		width: 40%;
		height: auto;
	}
	.company-img img {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	.company-text {
		width: 57%;
		font-size: 16px;
		word-break: break-all;
	}
	/* フッター */
	footer {
		height: auto;
		padding: 15px 0;
	}
	footer p {
		height: auto;
		line-height: 1.5;
	}
}
@media screen and (max-width: 480px) {
	.result-chart {
		padding: 20px 10px;
	}
	.chart-wrapper p[class^="type-tag"] {
		font-size: 11px;
		line-height: 1.1;
		/*text-indent: -2em;*/
		/*padding: 5px;*/
	}
/*	.chart-wrapper p.type-tag1 {
		top: 5px;
		left: 4%;
	}
	.chart-wrapper p.type-tag2 {
		top: 5px;
		right: 15px;
	}
	.chart-wrapper p.type-tag3 {
		bottom: 5px;
		left: 15px;
	}
	.chart-wrapper p.type-tag4 {
		bottom: 5px;
		right: 15px;
	}*/
	.chart-wrapper p.star-img {
		width: 35px;
		height: 35px;
	}
	.chart-wrapper div.result-text.y-1 {
		top: calc(20% + 30px);
	}
	.chart-wrapper div.result-text.y-2 {
		top: calc(30% + 30px);
	}
	.chart-wrapper div.result-text.y-3 {
		top: calc(40% + 30px);
	}
	.chart-wrapper div.result-text.y-4 {
		bottom: calc(40% + 30px);
	}
	.chart-wrapper div.result-text.y-5 {
		bottom: calc(30% + 30px);
	}
	.chart-wrapper div.result-text.y-6 {
		bottom: calc(20% + 30px);
	}
	.chart-wrapper div.result-text::after {
		border-width: 10px;
	}
	.chart-wrapper div.result-text.y-1::after,
	.chart-wrapper div.result-text.y-2::after,
	.chart-wrapper div.result-text.y-3::after {
		top: -20px;
	}
	.chart-wrapper div.result-text.y-4::after,
	.chart-wrapper div.result-text.y-5::after,
	.chart-wrapper div.result-text.y-6::after {
		bottom: -20px;
	}
	.chart-wrapper div.result-text p {
		font-size: 10px;
		padding: 3px 10px;
	}
	.chart-wrapper div.result-text p {
		width: 225px;
	}
	.chart-wrapper div.result-text.noresult p {
		width: auto;
		font-size: 14px;
	}
	.chart-wrapper div.result-text p.no-text {
		font-size: 13px;
	}
	.more-btn .all-type {
		font-size: 14px;
	}
	.more-btn .button {
		font-size: 18px;
	}
}
/* ------------------------
clearfix
------------------------ */
.clearfix::after {
	display: block;
	content: '';
	clear: both;
}
.mb0 {
	margin-bottom: 0 !important;
}
.mb10 {
	margin-bottom: 10px !important;
}