:root{
	--bg:#f4f6f9;
	--card:#ffffff;
	--text:#374151;
	--muted:#6b7280;
	--border:#e5e7eb;
	--accent:#2563eb;
	--accent-hover:#1d4ed8;
	--shadow:0 10px 30px rgba(15,23,42,.04);
	--radius:16px;

	--sidebar-width:250px;
/*	--content-width:940px;*/
	--layout-width:1260px;
}

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

html{
	scroll-behavior:smooth;
}

body{
	background:var(--bg);
	color:var(--text);
	font-family:
		Inter,
		"Noto Sans JP",
		sans-serif;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
}

h1,
h2,
h3,
h4{
	color:#111827;
}

img{
	display:block;
	max-width:100%;
}

a{
	color:var(--accent);
	font-weight:500;
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

button,
input,
textarea,
select{
	font:inherit;
}

button{
	cursor:pointer;
}

/*------------------------------------------------------------------共通--*/
.text-center{
	text-align:center;
}

.mt-0{
	margin-top:0 !important;
}

.mb-0{
	margin-bottom:0 !important;
}
.note{
	color:#64748b;
	font-size:14px;
}

.formula{
	padding:16px;
	margin:16px 0;
	background:#f8f8f8;
	border:1px solid #e5e5e5;
	border-radius:8px;
	font-weight:700;
	font-size:18px;
}
/*------------------------------------------------------------------全体--*/
.wrapper{
	min-height:100vh;
}

.layout-wrap{
	display:flex;
	justify-content:center;
}

.layout{
	width:100%;
	max-width:var(--layout-width);
	display:flex;
	position:relative;
}

/*------------------------------------------------------------------サイドバー--*/
.sidebar{
	width:var(--sidebar-width);
	flex-shrink:0;
	position:sticky;
	top:0;
	height:100vh;
	background:#fff;
	border-right:1px solid var(--border);
}

.sidebar-inner{
	height:100%;
	overflow:auto;
	padding:0 18px;
}

.sidebar-inner a{
	color:var(--text);
	text-decoration:none;
}

.sidebar-inner a:hover{
	text-decoration:none;
}

.logo{
	display:block;
	font-size:34px;
	font-weight:900;
	letter-spacing:-1px;
	margin-bottom:28px;
}

.logo span{
	color:var(--accent);
}

.sidebar-search{
	margin-bottom:28px;
}

.sidebar-search-input{
	width:100%;
	height:48px;
	border:1px solid var(--border);
	border-radius:14px;
	background:#fff;
	padding:0 14px;
}

.sidebar-search-input:focus{
	outline:none;
	border-color:var(--accent);
}

.sidebar-nav + .sidebar-nav{
	margin-top:32px;
}

.sidebar-title{
	font-size:12px;
	font-weight:800;
	color:var(--muted);
	letter-spacing:.08em;
	margin-bottom:12px;
	padding:0 12px;
}

.nav-item{
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 14px;
	border-radius:14px;
	font-weight:600;
	transition:.1s;
}

.nav-item:hover{
	background:#f3f4f6;
}

.nav-color{
	width:10px;
	height:10px;
	border-radius:50%;
	flex-shrink:0;
	background: var(--category-color);
}

.sidebar-subnav .nav-item{
	color:var(--muted);
}

/*------------------------------------------------------------------モバイル--*/
.mobile-header{
	display:none;
	height:64px;
	background:rgba(255,255,255,.92);
	backdrop-filter:blur(10px);
	border-bottom:1px solid rgba(229,231,235,.7);
	align-items:center;
	justify-content:space-between;
	padding:0 16px;
	position:sticky;
	top:0;
	z-index:1100;
}

.mobile-header a{
	color:var(--text);
	text-decoration:none;
}

.mobile-header a:hover{
	text-decoration:none;
}

.mobile-logo{
	font-size:28px;
	font-weight:900;
}

.mobile-logo span{
	color:var(--accent);
}

.menu-button{
	width:42px;
	height:42px;
	border:none;
	background:#fff;
	border-radius:14px;
	box-shadow:var(--shadow);
	font-size:20px;
}

.sidebar-overlay{
	position:fixed;
	inset:0;
	background:rgba(15,23,42,.45);
	opacity:0;
	visibility:hidden;
	transition:.25s;
	z-index:999;
}

.sidebar-overlay.is-show{
	opacity:1;
	visibility:visible;
}

/*------------------------------------------------------------------コンテンツ--*/
.content{
	flex:1;
	min-width:0;
	display:flex;
	justify-content:center;
	padding:24px;
}

.content-inner{
	width:100%;
	max-width:var(--content-width);
	background:var(--card);
	padding:32px;
	border-radius:24px;
	box-shadow:var(--shadow);
}

/*------------------------------------------------------------------メイン--*/
.content-page{}

/*>は直下だけ効く*/
.content-page header > * + *{
	margin-top:16px;
}

.content-page section > * + *{
	margin-top:16px;
}

.content-page header{
	margin-bottom:40px;
}

.content-page section + section{
	margin-top:56px;
}

.content-page p + p{
	margin-top:16px;
}

.content-page h1{
	font-size:36px;
	font-weight:800;
	line-height:1.35;
	letter-spacing:-0.02em;
}

.content-page h2{
	font-size:28px;
	font-weight:700;
	line-height:1.45;
	padding-bottom:12px;
	border-bottom:1px solid var(--border);
/*	margin-top:56px;*/
}

.content-page h3{
	font-size:22px;
	font-weight:700;
	line-height:1.5;
/*	margin-top:40px;*/
}

.content-page p{
	color:#374351;
}

.content-page strong{
	font-weight:700;
	color:#111827;
}

.content-page ul,
.content-page ol{
	padding-left:1.4em;
}

.content-page li + li{
	margin-top:10px;
}

.content-page table{
	width:100%;
	border-spacing:0;
	border-collapse:separate;
	border:1px solid var(--border);
	border-radius:18px;
	overflow:hidden;
	background:#fff;
}

.content-page th,
.content-page td{
	padding:14px 16px;
	border-bottom:1px solid var(--border);
	border-right:1px solid var(--border);
	text-align:left;
}

.content-page th{
	background:#f8fafc;
	font-weight:700;
}

.content-page tr > *:last-child{
	border-right:none;
}
.content-page tbody tr:last-child td{
	border-bottom:none;
}

.content-page blockquote{
	padding:20px 24px;
	background:#f8fafc;
	border-left:4px solid var(--accent);
	border-radius:18px;
	color:#374151;
}

.content-page .notice{
	padding:18px 22px;
	background:#eef2ff;
	border:1px solid #c7d2fe;
	border-radius:18px;
}

.button-group{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
}

.button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:48px;
	padding:0 22px;
	border:none;
	border-radius:14px;
	font-size:15px;
	font-weight:700;
	cursor:pointer;
	transition:
		background 0.2s,
		color 0.2s,
		transform 0.2s;
}

.button:hover{
	text-decoration:none;
}

.button-primary{
	background:var(--accent);
	color:#fff;
}

.button-primary:hover{
	background:var(--accent-hover);
}

.button-outline{
	background:#fff;
	border:1px solid var(--border);
	color:var(--text);
}

.button-outline:hover{
	background:#f8fafc;
}

.card{
	display:block;
	background:#f8fafc;
	border:1px solid #e5e7eb;
	border-radius:12px;
	padding:12px;
}

.card > * + *{
	margin-top:12px;
}

.card-link{
	background:#fff;
/*	border-left:4px solid var(--accent);*/
	display:block;
/*
	transition:
		transform 0.2s,
		background 0.2s,
		border-color 0.2s,
		box-shadow 0.2s;
*/
}

.card-link:hover{
	border-color:#cbd5e1;
/*	border-left-color:var(--accent-hover);*/
	background:#FCFCFC;
/*
	transform:translateY(-2px);
	box-shadow:0 12px 30px rgba(15,23,42,0.06);
*/
	text-decoration:none;
}

.card h3{
	margin:0;
	margin-bottom: 5px;
	font-size:20px;
	font-weight:700;
	line-height:1.5;
	color:#111827;
}

.card p{
	margin:0;
	color:#6b7280;
	font-size:15px;
	line-height:1.7;
}

.category-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--category-bg);
	color: var(--category-color);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition:
		transform .15s,
		opacity .15s;
}

.category-badge::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--category-color);
}

.category-badge:hover {
	text-decoration:none;
	opacity: .85;
/*	transform:
		translateY(-1px);*/
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.tag-item {
	display: inline-flex;
	align-items: center;
	padding: 10px 14px;
	border-radius: 999px;
	background: #f5f7fb;
	color: #555;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition:
		background .15s,
		transform .15s;
}

.tag-item:hover {
	background: #edf2fa;
	text-decoration: none;
	transform:
		translateY(-1px);
}

/*------------------------------------------------------------------グリッド--*/
.grid-2{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:24px;
}

.grid-3{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:24px;
}

.grid-auto{
	display:grid;
	grid-template-columns:
		repeat(
			auto-fit,
			minmax(240px,1fr)
		);
	gap:24px;
}

.grid-auto-small{
	display:grid;
	grid-template-columns:
		repeat(
			auto-fill,
			minmax(220px,1fr)
		);
	gap:16px;
}

/*------------------------------------------------------------------フッター--*/
.footer{
	margin-top:60px;
	padding-top:24px;
	border-top:1px solid var(--border);
}

.footer-inner{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:24px;
}

.footer-logo{
	font-size:28px;
	font-weight:900;
}

.footer-logo span{
	color:var(--accent);
}

.footer-text{
	margin-top:8px;
	color:var(--muted);
}

.footer-links{
	display:flex;
	gap:18px;
	flex-wrap:wrap;
}

.footer-links a{
	color:var(--muted);
}

.footer-links a:hover{
	text-decoration:none;
}

.footer-copyright{
	margin:32px 0px 0px 0px;
	font-size:12px;
	color:#9ca3af;
	text-align:center;
}
/*------------------------------------------------------------------フォーム--*/
.form{
	margin-top:32px;
}

.form-group + .form-group{
	margin-top:24px;
}

.form-label{
	display:block;
	margin-bottom:10px;
	font-size:14px;
	font-weight:700;
	color:#334155;
}

.form-input,
.form-select,
.form-textarea{
	width:100%;
	border:1px solid #dbe3ee;
	border-radius:16px;
	background:#fff;
	padding:14px 16px;
	font-size:16px;
	line-height:1.7;
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus{
	outline:none;
	border-color:#93c5fd;
	box-shadow:0 0 0 4px rgba(37,99,235,0.10);
}

.form-textarea{
	min-height:180px;
	resize:vertical;
}

.form-submit-wrap{
	margin-top:32px;
}

.form-submit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:180px;
	height:52px;
	border:none;
	border-radius:999px;
	background:var(--accent);
	padding:0 28px;
	color:#fff;
	font-size:15px;
	font-weight:700;
	cursor:pointer;
	transition:
		transform 0.2s,
		box-shadow 0.2s,
		opacity 0.2s;
}
/*hoverできるなら中身を実行する。スマホだとタップ後にhover状態が残ることあるので他のhoverも入れた方がいいかも*/
@media(hover:hover){
	.form-submit:hover{
		transform:translateY(-1px);
		box-shadow:0 10px 24px rgba(37,99,235,0.18);
	}
	.form-back:hover{
		text-decoration:none;
	}
}
/*bot対策用、入っていたらbot*/
.hp-input{
	position:absolute;
	left:-9999px;
	opacity:0;
	pointer-events:none;
}

.confirm-box{
	margin-top:32px;
	border:1px solid #dbe3ee;
	border-radius:24px;
	background:#fff;
}

.confirm-row + .confirm-row{
	border-top:1px solid #e5e7eb;
}

.confirm-label{
	padding:18px 24px 10px;
	font-size:13px;
	font-weight:700;
	color:#64748b;
}

.confirm-value{
	padding:0 24px 18px;
	line-height:1.8;
}

.confirm-message{
	white-space:pre-wrap;
}

.form-back{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:180px;
	height:52px;
	border-radius:999px;
	background:#f1f5f9;
	padding:0 28px;
	color:#334155;
	font-weight:700;
	text-decoration:none;
	transition:
		transform 0.2s,
		box-shadow 0.2s;
}

/*------------------------------------------------------------------ツールフォーム--*/
.tool-form-group {
	margin-top: 24px;
}

.tool-label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.tool-input-wrap,
.tool-select-wrap,
.tool-range-wrap {
	position: relative;
}

.tool-input[type="number"]::-webkit-outer-spin-button,
.tool-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.tool-input[type="number"] {
	-moz-appearance: textfield;
}

.tool-input,
.tool-select,
.tool-textarea {
	width: 100%;
	border: 1px solid #dcdcdc;
	border-radius: 12px;
	background: #fff;
	font-size: 16px;
	transition:
		border-color .2s,
		box-shadow .2s;
}

.tool-input,
.tool-select {
	height: 48px;
	padding: 0 14px;
}

.tool-textarea {
	padding: 14px;
	line-height: 1.7;
	resize: vertical;
}

.tool-input:focus,
.tool-select:focus,
.tool-textarea:focus {
	border-color: #4f8cff;
	box-shadow: 0 0 0 4px rgba(79,140,255,.15);
	outline: none;
}

.tool-suffix {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	font-size: 14px;
	color: #777;
	pointer-events: none;
}

.tool-input.has-suffix {
	padding-right: 56px;
}

.tool-help {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.6;
	color: #777;
}

.tool-checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.tool-checkbox-input {
	display: none;
}

.tool-checkbox-ui {
	position: relative;
	width: 22px;
	height: 22px;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	background: #fff;
	transition:
		background .2s,
		border-color .2s;
}

.tool-checkbox-input:checked
+ .tool-checkbox-ui {
	background: #4f8cff;
	border-color: #4f8cff;
}

.tool-checkbox-input:checked
+ .tool-checkbox-ui::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 7px;
	width: 5px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.tool-checkbox-label {
	font-size: 15px;
	line-height: 1.5;
}

.tool-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.tool-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid #dcdcdc;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
/*	transition:
		border-color .2s,
		background .2s,
		box-shadow .2s;*/
}

.tool-radio-input {
	display: none;
}

.tool-radio-ui {
	position: relative;
	width: 18px;
	height: 18px;
	border: 2px solid #c8c8c8;
	border-radius: 50%;
	flex-shrink: 0;
/*	transition:
		border-color .2s,
		background .2s;*/
}

.tool-radio-ui::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4f8cff;
	transform:
		translate(-50%, -50%)
		scale(0);
/*	transition: transform .2s;*/
}

.tool-radio-input:checked
+ .tool-radio-ui {
	border-color: #4f8cff;
}

.tool-radio-input:checked
+ .tool-radio-ui::after {
	transform:
		translate(-50%, -50%)
		scale(1);
}

.tool-radio-input:checked
+ .tool-radio-ui
+ .tool-radio-label {
	font-weight: 700;
}

.tool-radio:has(
	.tool-radio-input:checked
) {
	border-color: #4f8cff;

	background:
		rgba(79,140,255,0.05);

	box-shadow:
		0 0 0 4px
		rgba(79,140,255,0.12);
}

.tool-radio-label {
	font-size: 15px;
	line-height: 1.5;
}

.tool-range {
	width: 100%;
	margin: 0;
}

.tool-range-value {
	margin-top: 10px;
	font-size: 14px;
	font-weight: 700;
	text-align: right;
}

.tool-error {
	display: none;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #e53935;
}

.tool-error.is-show {
	display: block;
}

.tool-input.is-error,
.tool-select.is-error,
.tool-textarea.is-error,
.tool-radio.is-error {
	border-color: #e53935;
	background: #fff5f5;
}

.result-area {
	margin-top: 32px;
}

.result-hero {
	padding: 40px 24px;
	border-radius: 24px;
	background:
		linear-gradient(
			135deg,
			#4f8cff,
			#7a5cff
		);
	color: #fff;
	text-align: center;
	box-shadow:
		0 12px 30px rgba(0,0,0,.08);
}

.result-hero-value {
	font-size: 52px;
	font-weight: 800;
	line-height: 1.1;
}

.result-hero-label {
	margin-top: 10px;
	font-size: 16px;
	opacity: .92;
}

.result-hero-subtext {
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.7;
	opacity: .85;
}

.result-grid {
	display: grid;
	grid-template-columns:
		repeat(
			auto-fit,
			minmax(220px,1fr)
		);
	gap: 16px;
	margin-top: 20px;
}

.result-card {
	padding: 22px;
	border: 1px solid #ececec;
	border-radius: 20px;
	background: #fff;
	box-shadow:0 6px 18px rgba(0,0,0,.04);
}

.result-card-label {
	font-size: 14px;
	color: #666;
}

.result-card-value {
	margin-top: 10px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.result-card-subtext {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.7;
	color: #777;
}

.result-message {
	margin-top: 20px;
	padding: 18px 20px;
	border-radius: 16px;
	background: #f6f8fb;
	font-size: 15px;
	line-height: 1.9;
	color: #444;
}

.result-comparison {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
	padding: 24px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid #ececec;
}

.result-comparison-item {
	flex: 1;
	text-align: center;
}

.result-comparison-label {
	font-size: 14px;
	color: #666;
}

.result-comparison-value {
	margin-top: 8px;
	font-size: 28px;
	font-weight: 700;
}

.result-comparison-arrow {
	font-size: 28px;
	color: #888;
}

.result-progress {
	margin-top: 20px;
}

.result-progress-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.result-progress-label {
	font-size: 14px;
	font-weight: 700;
}

.result-progress-value {
	font-size: 14px;
	color: #666;
}

.result-progress-bar {
	height: 14px;
	border-radius: 999px;
	background: #e9edf5;
	overflow: hidden;
}

.result-progress-fill {
	height: 100%;
	border-radius: 999px;
	background:
		linear-gradient(
			90deg,
			#4f8cff,
			#7a5cff
		);
}

.result-progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;

	font-size: 13px;
	color: #6b7280;
}

.result-progress-left {
	text-align: left;
}

.result-progress-right {
	text-align: right;
}

.result-chart {
	margin-top: 24px;
	padding: 20px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid #ececec;
	height: 300px;
	position:relative;
}

.result-share {
	margin-top: 24px;
}

.result-share-textarea {
	width: 100%;
	height: 120px;
	padding: 16px;
	border: 1px solid #ddd;
	border-radius: 16px;
	background: #fafafa;
	font-size: 14px;
	line-height: 1.8;
	resize: none;
}

.result-timeline {
	position: relative;
	margin-top: 24px;
}

.result-timeline-item {
	position: relative;
	padding-left: 36px;
	padding-bottom: 28px;
}

.result-timeline-item:last-child {
	padding-bottom: 0;
}

.result-timeline-item::before {
	content: '';
	position: absolute;
	top: 20px;
	left: 9px;
	width: 2px;
	height: calc(100% + 8px);
	background: #dfe6f5;
}

.result-timeline-item:last-child::before {
	display: none;
}

.result-timeline-dot {
	position: absolute;
	top: 4px;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #4f8cff;
	border: 4px solid #fff;
	box-shadow:
		0 0 0 2px #4f8cff;
}

.result-timeline-content {
	padding-top: 1px;
}

.result-timeline-label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: #666;
}

.result-timeline-value {
	margin-top: 4px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #222;
}
/*------------------------------------------------------------------ツールページ--*/
.tool-page {}

/*------------------------------------------------------------------カテゴリページ--*/
.category-page {}

.category-page .category-hero {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:6px;
}

.category-hero-content {
	flex:1;
	min-width:0;
}

.category-hero-image {
	width:clamp(
		140px,
		22vw,
		280px
	);
	flex-shrink:0;
	display:block;
}

.category-hero-image img {
	display:block;
	width:100%;
	height:auto;
}

.category-page h1 {
	margin-top: 20px;
	line-height: 1.25;
}

.category-page .category-description {
	margin-top: 18px;
	line-height: 2;
}

/*------------------------------------------------------------------トップページ--*/
.home-page {}

.home-page .home-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 40px;
	background: #fff;
	border: 1px solid #e8edf5;
	border-radius: 24px;
}

.home-hero-content {
	flex: 1;
	min-width: 0;
}

.home-hero h1 {
	margin-top: 16px;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.1;
	color: #222;
}

.home-description {
	margin-top: 16px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	color: #333;
}

.home-subtext {
	margin-top: 12px;
	max-width: 640px;
	font-size: 15px;
	line-height: 1.8;
	color: #666;
	display:block;
}

.home-hero-image {
	flex-shrink: 0;
	width: clamp(
		180px,
		25vw,
		360px
	);
}

.home-hero-image img {
	display: block;
	width: 100%;
	height: auto;
}

.category-card{
	display:block;
	padding:20px;
	border:1px solid var(--border);
	border-radius:12px;
	background:#fff;
	text-decoration:none;
	color:inherit;
	transition:.15s;
}

.category-card:hover{
	text-decoration:none;
	transform:
		translateY(-2px);
}

.category-card-image{
	aspect-ratio:1200 / 630;
	overflow:hidden;
	margin-bottom: 8px;
}

.category-card-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.category-card-color{
	width:48px;
	height:6px;
	border-radius:999px;
	margin-bottom:12px;
}

.category-card-name{
	font-size:20px;
	font-weight:700;
	margin-bottom:8px;
}

.category-card-description{
	font-size:14px;
	color:#666;
	line-height:1.6;
}

/*------------------------------------------------------------------切り替え--*/
@media (max-width:960px){
	.mobile-header{display:flex;}
	.layout{display:block;}
	.sidebar{
		position:fixed;
		left:0;
		top:0;
		width:280px;
		height:100vh;
		background:#f4f6f9;
		z-index:1000;
		transform:translateX(-100%);
		transition:.25s;
	}
	.sidebar.is-open{
		transform:translateX(0);
	}
	.content{
		padding:18px;
	}
	.content-inner{
		padding:24px;
		border-radius:20px;
	}
}

@media (max-width:640px){
	.content{
		padding:0px;
	}
	.content-inner{
		padding:16px;
		border-radius:0px;
	}
	.footer-inner{
		flex-direction:column;
	}

	.content-page h1{
		font-size:30px;
	}

	.content-page h2{
		font-size:24px;
	}

	.content-page h3{
		font-size:20px;
	}

	.button-group{
		flex-direction:column;
	}

	.button{
		width:100%;
	}

	.grid-2,
	.grid-3{
		grid-template-columns:1fr;
	}

	.form-submit,
	.form-back{
		width:100%;
	}

	.result-hero {
		padding: 32px 18px;
	}

	.result-hero-value {
		font-size: 42px;
	}

	.result-comparison {
		flex-direction: column;
	}

	.home-page .home-hero {
		padding: 8px 14px 14px 14px;
		gap:12px;
	}

	.home-hero-image {
		width:100px;
		flex-shrink: 0;
		margin-right: -10px;
	}

	.home-hero h1 {
		font-size: 30px;
	}

	.home-description {
		font-size: 16px;
	}

	.home-subtext{
		display:none;
	}

	.category-hero-image{
		display:none;
	}

	.category-page .category-page h1{
		font-size:28px;
		margin-top: 14px;
	}

	.category-page .category-description{
		font-size:14px;
		line-height:1.8;
		margin-top: 12px;
	}



}