@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
:root {
	--body: #FBFCFD;
	/* --accent: #2C356A; */
	--accent: #202754;
	--text: #4D4535;
}

.bg-orange{
	background-color: var(--accent);
}

.text-denger{
	color: #dc3545;
}

body{
	font-family: "Noto Sans JP", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: var(--text);
	line-height: 1.5;
	padding-top: 55px; 
}

h1,h2,h3,h4,h5,h6{
	font-weight: 700;
	color: var(--text);
	margin: 0;
}

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

p{
	margin-bottom: 0;
}

.navbar{
	background-color: var(--accent);
	font-size: 14px;
	font-weight: 700;
}

.navbar-brand{
	text-align: center;
}

.navbar-dark .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.offcanvas {
	background-color: var(--accent);
}

.offcanvas.offcanvas-start {
	--bs-offcanvas-width: 65%;
}

.offcanvas-body .nav-link,
.offcanvas-body .nav-link i {
	color: #fff;
	opacity: 1 ;
}

.card-info{
	margin-bottom: 2px;
}

.card-body{
	padding: 10px;
}

.contents{
	/*background: linear-gradient(135deg,#ffe0b2,#ffffff);*/
	background-color: var(--body)
}

.btn-neutral {
    background-color: white;
    color: #555;
    border: 1px solid #ccc;
}
.btn-neutral:hover,
.btn-neutral:focus {
    background-color: #f5f5f5;
    color: #333;
}

/* 支持 */
.btn-good,
.btn-good:hover,
.btn-good:focus,
.btn-good:active {
    background-color: #28a745;
    color: white;
    border: 1px solid #28a745;
    box-shadow: none;
    transition: none;
}

/* 支持（未選択） */
.btn-outline-good,
.btn-outline-good:hover,
.btn-outline-good:focus,
.btn-outline-good:active {
    background-color: transparent;
    color: #28a745;
    border: 1px solid #28a745;
    box-shadow: none;
    transition: none;
}

/* 不支持 */
.btn-bad,
.btn-bad:hover,
.btn-bad:focus,
.btn-bad:active {
    background-color: #dc3545;
    color: white;
    border: 1px solid #dc3545;
    box-shadow: none;
    transition: none;
}

/* 不支持（未選択） */
.btn-outline-bad,
.btn-outline-bad:hover,
.btn-outline-bad:focus,
.btn-outline-bad:active {
    background-color: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
    box-shadow: none;
    transition: none;
}

/* 重要 */
.btn-important,
.btn-important:hover,
.btn-important:focus,
.btn-important:active {
    background-color: #007bff;
    color: white;
    border: 1px solid #007bff;
    box-shadow: none;
    transition: none;
}

/* 重要（未選択） */
.btn-outline-important,
.btn-outline-important:hover,
.btn-outline-important:focus,
.btn-outline-important:active {
    background-color: transparent;
    color: #007bff;
    border: 1px solid #007bff;
    box-shadow: none;
    transition: none;
}

/* 報告 */
.btn-misinfo,
.btn-misinfo:hover,
.btn-misinfo:focus,
.btn-misinfo:active {
    background-color: #ffc107;
    color: #212529;
    border: 1px solid #ffc107;
    box-shadow: none;
    transition: none;
}

/* 報告（未選択） */
.btn-outline-misinfo,
.btn-outline-misinfo:hover,
.btn-outline-misinfo:focus,
.btn-outline-misinfo:active {
    background-color: transparent;
    color: #ffc107;
    border: 1px solid #ffc107;
    box-shadow: none;
    transition: none;
}

@media (max-width: 767.98px) {
  h5.card-info {
    font-size: 1rem; /* スマホだけ小さく */
  }
}