@charset "UTF-8";
/**
 * FC加盟店舗募集エリアの地図（HTML/CSS版）
 *
 * 県の塗り分けは SVG の data-status を見て切り替える。
 * 募集状況を変えるときは app/Config/franchise_area.php だけを直せばよい。
 *
 * 座標は元画像と同じ寸法で持ち、％で配置しているため、
 * 幅が変わっても文字・指示線・県の位置関係は崩れない。
 */

.p-franchise-map {
	--fc-base: #59bfaf;
	--fc-dot: #8bd2c7;
	--fc-gray: #999999;
	--fc-gray-dot: #adadad;
	--fc-text: #002466;
	--fc-line: #000000;
	width: 100%;
	margin: 0 auto;
}
.p-franchise-map--chubu   { --fc-base: #aacd01; --fc-dot: #c4dc4e; }
.p-franchise-map--kinki   { --fc-base: #f9be00; --fc-dot: #fbd24d; }
.p-franchise-map--chugoku { --fc-base: #f28d00; --fc-dot: #f6af4d; }

/* 地方全体が終了している地図は、赤い文言を重ねるため淡いグレーにする */
.p-franchise-map.is-all-closed {
	--fc-gray: #cdcdcd;
	--fc-gray-dot: #d6d6d6;
}

/* 元画像と同じ縦横比の箱を作り、その中に地図と文字を重ねる */
.p-franchise-map__inner {
	container-type: inline-size;
	position: relative;
	width: 100%;
	height: 0;
}
.p-franchise-map__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* 水玉模様。パターンのidは同一ページ内での衝突を避けるため地方ごとに分けている */
.fc-dots-open rect           { fill: var(--fc-base); }
.fc-dots-open .dots circle   { fill: var(--fc-dot); }
.fc-dots-closed rect         { fill: var(--fc-gray); }
.fc-dots-closed .dots circle { fill: var(--fc-gray-dot); }

/* パターンのidは地方ごとに分けているため、参照も地方ごとに書く */
.p-franchise-map--tohoku .p-franchise-map__svg path[data-status="open"]   { fill: url(#fc-dots-tohoku-open); }
.p-franchise-map--tohoku .p-franchise-map__svg path[data-status="closed"] { fill: url(#fc-dots-tohoku-closed); }
.p-franchise-map--kanto .p-franchise-map__svg path[data-status="open"]   { fill: url(#fc-dots-kanto-open); }
.p-franchise-map--kanto .p-franchise-map__svg path[data-status="closed"] { fill: url(#fc-dots-kanto-closed); }
.p-franchise-map--chubu .p-franchise-map__svg path[data-status="open"]   { fill: url(#fc-dots-chubu-open); }
.p-franchise-map--chubu .p-franchise-map__svg path[data-status="closed"] { fill: url(#fc-dots-chubu-closed); }
.p-franchise-map--kinki .p-franchise-map__svg path[data-status="open"]   { fill: url(#fc-dots-kinki-open); }
.p-franchise-map--kinki .p-franchise-map__svg path[data-status="closed"] { fill: url(#fc-dots-kinki-closed); }
.p-franchise-map--chugoku .p-franchise-map__svg path[data-status="open"]   { fill: url(#fc-dots-chugoku-open); }
.p-franchise-map--chugoku .p-franchise-map__svg path[data-status="closed"] { fill: url(#fc-dots-chugoku-closed); }
.p-franchise-map--hokkaido .p-franchise-map__svg path[data-status="open"]   { fill: url(#fc-dots-hokkaido-open); }
.p-franchise-map--hokkaido .p-franchise-map__svg path[data-status="closed"] { fill: url(#fc-dots-hokkaido-closed); }
.p-franchise-map--shikoku .p-franchise-map__svg path[data-status="open"]   { fill: url(#fc-dots-shikoku-open); }
.p-franchise-map--shikoku .p-franchise-map__svg path[data-status="closed"] { fill: url(#fc-dots-shikoku-closed); }
.p-franchise-map--kyusyu_okinawa .p-franchise-map__svg path[data-status="open"]   { fill: url(#fc-dots-kyusyu_okinawa-open); }
.p-franchise-map--kyusyu_okinawa .p-franchise-map__svg path[data-status="closed"] { fill: url(#fc-dots-kyusyu_okinawa-closed); }

/* 指示線・区切り線 */
.p-franchise-map__line {
	fill: none;
	stroke: var(--fc-line);
	stroke-width: 1;
}
.p-franchise-map__line[data-status="closed"] {
	stroke: var(--fc-gray);
}
.p-franchise-map__separator {
	fill: none;
	stroke: #cccccc;
	stroke-linecap: round;
}

/* ラベル。指示線の下線に合わせて置き、県名を上・エリア文言を下に出す */
/* 元画像にならい、県名・文言とも指示線の中央に置く */
.p-franchise-map__label {
	position: absolute;
	transform: translateX(-50%);
	color: var(--fc-text);
	line-height: 1.25;
	text-align: center;
}
.p-franchise-map__pref {
	position: absolute;
	left: 50%;
	bottom: 3px;
	margin: 0;
	transform: translateX(-50%);
	font-size: max(10px, var(--fc-pref-size));
	font-weight: bold;
	white-space: nowrap;
}
.p-franchise-map__note {
	position: absolute;
	left: 0;
	top: 3px;
	width: 100%;
	margin: 0;
	text-align: center;
	font-size: max(8px, var(--fc-note-size));
}

/* 募集を終了した県は文字もグレーにする */
.p-franchise-map__note.is-nowrap {
	left: 50%;
	width: auto;
	transform: translateX(-50%);
	white-space: nowrap;
}

.p-franchise-map__label[data-status="closed"] {
	color: var(--fc-gray);
}

/* 地方全体が終了している場合の文言 */
.p-franchise-map__closed {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	margin: 0;
	color: #d3000a;
	font-size: max(12px, var(--fc-closed-size));
	font-weight: bold;
	line-height: 1.9;
	text-align: center;
	transform: translate(-50%, -50%);
	/* PCは元画像が1行。字形の差でわずかに溢れるため折り返さない。
	   SPは元画像が2行で、改行位置をテンプレート側で入れている */
	white-space: nowrap;
}
.p-franchise-map--sp .p-franchise-map__closed {
	white-space: normal;
	/* SPは地方ごとに元画像の幅が違い（北海道434 / 四国410 / 九州551）、
	   画面幅に合わせると同じ36pxでも25〜34pxとばらついていた。
	   地図の幅ではなく画面幅を基準にして、地方によらず同じ大きさにする */
	font-size: clamp(16px, 7.4vw, 36px);
}

/* SPは元画像の構図がPCと異なり、幅いっぱいに置く。
   文字サイズは地図の幅に比例するため、追加の縮小指定は要らない */
.p-franchise-map--sp {
	width: 100%;
}