@charset "utf-8";

/* 共通変数の定義 */
:root {
	--sec-border: #dcdfeb;
	--color: #19a79e;
	--tab: #19a79e;
}

/* 外枠デザイン（幅を上のコンテンツと共通の1236pxに統一） */
.weather {
	padding-bottom: 0;
	background: #fff;
}

.weather__wrap {
	position: relative;
	margin: 40px auto 0;
	width: 100%;
	max-width: 1236px;
	box-sizing: border-box;
	padding: 40px 24px;
	background: #f5f5f5;
	border-radius: 8px;
}

.weather__wrap::before {
	content: "";
	position: absolute;
	top: -8px;
	left: -8px;
	width: 40px;
	height: 40px;
	border-top: solid 2px #d2e4df;
	border-left: solid 2px #d2e4df;
	pointer-events: none;
}

.weather__wrap::after {
	content: "";
	position: absolute;
	bottom: -8px;
	right: -8px;
	width: 40px;
	height: 40px;
	border-bottom: solid 2px #d2e4df;
	border-right: solid 2px #d2e4df;
	pointer-events: none;
}

/* 天気テーブル設定 */
.weather-table {
	width: 100%;
	margin-bottom: 32px;
}

.weather-table__wrap {
	width: 100%;
	background: #fff;
	table-layout: fixed;
	line-height: 1.5;
	border-collapse: collapse;
}

.weather-table th,
.weather-table td {
	padding: 6px 4px;
	text-align: center;
	border: solid 1px var(--sec-border);
}

.weather-table__wrap thead tr {
	background: linear-gradient(to right, #b0c4ff 0%, #f7b1cd 25%, #b2f4f4 50%, #ffd2a8 75%, #b0c4ff 100%);
	color: #000;
}

.weather-table__event-img img {
	max-width: 35px;
	height: auto;
}

.weather-table__event {
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.3;
}

.weather-table__event-img {
	margin-bottom: 4px;
}

/* 季節ごとのカラー定義 */
.weather-season.-spring { --season-color: #ef79a1; --season-border: #f9e2f0; }
.weather-season.-summer { --season-color: #00cfc1; --season-border: #cee7e7; }
.weather-season.-autumn { --season-color: #ff9800; --season-border: #eddfcb; }
.weather-season.-winter { --season-color: #3f51b5; --season-border: #cacee1; }

/* 季節ごとのブロック（カード全体の枠） */
.weather-season {
	margin-top: 32px;
	padding: 24px;
	background: #fdfdfd;
	border-radius: 8px;
	box-sizing: border-box;
}

/* 季節見出し（中央寄せ＋点線デザイン） */
.weather-season .page-title-h4__wrap {
	text-align: center;
	margin-bottom: 24px;
}

.weather-season .page-title-h4 {
	position: relative;
	display: inline-block;
	font-size: 2.2rem;
	font-weight: bold;
	color: var(--season-color);
	padding-bottom: 8px;
}

/* 見出し下の点線 */
.weather-season .page-title-h4::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 200px;
	height: 2px;
	background-image: radial-gradient(circle, var(--season-color) 1.5px, transparent 1.5px);
	background-size: 8px 2px;
	background-repeat: repeat-x;
}

.weather-season__ttl--fs {
	font-size: 1.6rem;
	font-weight: normal;
	margin-left: 4px;
}

/* 横並びコンテンツエリア */
.weather-season__block {
	display: flex;
	gap: 20px;
}

/* 気候・服装の白枠ボックス */
.weather-season__box {
	position: relative;
	flex: 1;
	margin: 0 !important;
	padding: 24px 20px 20px;
	background: #fff;
	border: solid 2px var(--season-border);
	border-radius: 4px;
	box-sizing: border-box;
}

/* タイトル（気候 / 服装）の切り欠き配置 */
.weather-season__ttl {
	position: absolute;
	left: 16px;
	top: 0;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	background: #fff;
	color: var(--season-color);
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1;
}

.weather-season__ttl-ico {
	font-size: 2.0rem;
	margin-right: 4px;
}

.weather-season__txt {
	font-size: 1.4rem;
	line-height: 1.7;
	color: #333;
	margin: 0;
}

/* スマホ対応（959px以下） */
@media screen and (max-width: 959px) {
	.weather-table {
		overflow-x: auto;
	}
	
	.weather-table__wrap {
		width: 800px; /* スクロール可能にする */
	}

	.weather-season {
		padding: 16px 12px;
	}

	.weather-season__block {
		flex-direction: column;
		gap: 20px;
	}

	.weather-season__box:not(:first-child) {
		margin-top: 12px !important;
	}
}