.breadcrumbs{
	margin-bottom:100px;
}


.score-block {
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center;    /* 左右中央 */
    justify-content: center; /* 上下中央 */
}

.score-main {
    text-transform: uppercase;
	font-weight:bold;
	text-align:center;
	
}

.score-value {
    font-family: 'Slackside One', cursive, sans-serif;
    font-size: 12rem;
    margin: 0 auto;
    width: 300px;  /* 固定サイズ */
    height: 250px; /* 固定サイズ */

    /* トップ配置に固定 */
    display: flex;
    justify-content: center; /* 左右は中央 */
    align-items: flex-start; /* 上端（トップ）に配置 */
    
    line-height: 1;
    overflow: hidden;        /* はみ出し防止 */
}

.score-value span {
    display: block;
    margin-top: 0;           /* 上に張り付かせる */
}


.score-cta {
    background: #fffcf9;         /* 限りなく白に近い、非常に薄いオレンジ（温かみと清潔感） */
    border: 1px solid #f3e5d8;   /* 背景より少し濃いベージュ系の境界線 */
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(230, 126, 34, 0.05);
    width:70%;
    padding:20px 50px;
}

/* サブコンテナ */
.score-cta-sub {
    margin: 0 auto;
}

.score-cta h3 {
	text-align:center;
    background: #ff7f50;
    color:#fff;
    border-radius:10px;
    padding:10px 0;
    margin-bottom:20px;
}



.score-cta-sub-title{
	text-align:center;
	color:#ff7f50;
	font-weight: bold;
	margin-bottom:20px;
}


/* 強調部分：少しだけ彩度を上げたオレンジのアンダーライン */
.score-cta-sub strong {
    color: #2c1810;
    background: linear-gradient(transparent 60%, #ffe0b2 60%); 
    font-weight: 700;
}

.score-comment{
	margin-bottom:20px;
	background:#f1f5f9;
	padding:20px 50px;
	border-radius:20px;
	width:70%;
}

.score-comment h3{
	margin-bottom:10px;
}

.score-comment-sub{
	margin-bottom:30px;
}

.score-river{
	width:70%;
	padding:20px 50px;
}

.score-river ul {
    list-style: none;
    padding: 0;
	margin-top:20px;
}

.score-river li {
    background: #fff;
    margin-bottom: 12px;
    padding: 8px 20px;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    display: flex;
    justify-content: space-between;
}

.score-river li.gray {
    color: #555;
    border-bottom: 1.5px dashed #cbd5e1;
    
}

.score-river .over {
    font-size: 0.75rem;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
	color:#000;
}

/* データカード */
.data-card {
	border: none;
	margin-top:100px;
}

.card-body {
	display: flex;
	gap: 50px;
	align-items: flex-start;
}

.data-card-left {
    flex: 1;
}

.data-card-left h3 {
    font-size: 16px;
    color: var(--text-sub);
    margin-bottom:20px;
}

.card-header {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 800;
	padding: 4px 12px;
	color: #fff;
	border-radius: 3px;
	letter-spacing: 0.1em;
	margin-bottom:30px;
}

.earthquake{
	background: #e03131;
}
.tsunami{
	background: #1971c2; 
}
.landslide{
	background: #f08c00;
}
.rivers{
	background:#00bfff;
}




.floods{
	margin-bottom:80px;
}

.scores{
	font-size:28px;
	font-weight:bold;
}

.notice{
	font-size:14px;
	margin-bottom:20px;
}


/* 津波 */
.tsunami_img{
	margin-top:100px;
	text-align:center;
	
}

.tsunami_img img{
	width: 80%;
	height:auto;
}

.tsunami_img ul{
	width:80%;
	margin: 20px auto 0;
}


.explains {
	font-size:14px;
	list-style: none;
	padding-left: 0;
	text-align: left;
}

.explains li::before {
	content: "※";
	margin-right: 4px;
}



.data-card-right {
    flex: 1.5;
}

.data-card-right p{
	margin-bottom:20px;
}


.data-list {
    list-style: none;
    padding: 0;
}

.data-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 0.9rem;
}

.data-list li span {
    color: var(--text-sub);
}

.data-list li strong {
    color: var(--primary-color);
}


.downlinks {
	display: flex;

	width: fit-content;
	max-width: 100%;

	margin: 30px auto 0;

	align-items: center;
	justify-content: center;

	background: #1a365d;
	color: #fff;

	padding: 18px 36px;

	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.5;
	text-align: center;

	border: none;
	border-radius: 10px;

	cursor: pointer;

	transition: all 0.25s ease;

	box-shadow: 0 6px 18px rgba(0,0,0,0.12);

	appearance: none;
	-webkit-appearance: none;
}

.downlinks:hover {
	background: #274a78;

	transform: translateY(-2px);

	box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}




/* レスポンシブ対応 */
@media (max-width: 768px) {
    .card-body {
        flex-direction: column;
    }
    .data-card-left {
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
    }
    header h1 {
        font-size: 1.4rem;
    }
}