:root{--bg:#f7fafc;--card:#fff;--accent:#2563eb;--muted:#6b7280}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Hiragino Kaku Gothic ProN',Meiryo,Arial;color:#111;background:var(--bg);margin:0;padding:0px}
.container{max-width:820px;margin:0 auto}
header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
h1{font-size:20px;margin:0}
.card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 6px 18px rgba(8,15,46,0.06);}
.page{display:none}
.page.active{display:block}
.question{margin-bottom:18px}
.question p{margin:0 0 8px 0;font-weight:600}
.choices{display:grid;gap:8px}
label.choice{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;border:1px solid #e6eef8;cursor:pointer}
input[type=radio]{accent-color:var(--accent)}
.btns{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}
button{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer}
button.ghost{background:transparent;color:var(--accent);border:1px solid rgba(37,99,235,0.12)}
.small{font-size:14px;color:var(--muted)}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.result-card{padding:14px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #eef6ff}
.bar{height:12px;background:#ffdd58;border-radius:8px;overflow:hidden}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#60a5fa);}
footer{margin-top:20px;text-align:center;color:var(--muted);font-size:13px}
@media (max-width:600px){.result-grid{grid-template-columns:1fr}}


div.footer1{margin-left:50px}
div.footer2{margin-left:50px}

/*フッター
---------------------------------------------------------------------------*/
footer * {margin: 0;padding: 0;}
footer ul {list-style: none;}

/*ブロック全体*/
footer {
	background: #222;	/*背景色*/
	color: #ccc;		/*文字色*/
	padding: var(--content-space);	/*フッター内の余白。css冒頭のcontent-spaceを読み込みます。*/
    text-align: left
}

/*フッター内のロゴ画像*/
footer .logo {
	width: 300px;	/*幅*/
}

/*ロゴやSNSアイコンが入ったブロック*/
footer div.footer1 {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*このブロック内のボックス同士の間に空ける余白。１文字分。*/
}

/*マップが入ったブロック*/
footer div.footer2 {
    flex: 1;
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ブロック全体*/
	footer {
		display: flex;
		gap: 2rem;		/*ロゴのブロックとメニューのブロックとの間の余白。2文字分。*/
	}

	/*ロゴやSNSアイコンが入ったブロック*/
	footer div.footer1 {
		text-align: left;
		width: 40%;	/*幅。40%。*/
	}

	}/*追加指定ここまで*/

/* 診断ページ */
    /* 🔹 すべて非表示 */
    .type-article { display: none; }

    /* 🔹 該当タイプだけ表示 */
    .type-article.active { display: block; }