/* ------------------- Base ------------------- */
  :root {
  	--pin-size: 5px;
  	/*  */
  	--pin-ring: 3px;
  	/*  */
  	--pin-color: #0ea5e9;
  	/*  */
  }

  body {
  	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans JP", sans-serif;
  	line-height: 1.6;
  	color: #222;
  	margin: 0;
  }

  /* ------------------- Map ------------------- */
  .map-wrap {
  	/* max-width: 780px; */
  	margin: 0px auto 24px;
  	/* padding: 12px; */
  }

  .map {
  	position: relative;
  	width: 100%;
  	/* aspect-ratio: 768/811; */
  	/*  */
  	background: #ffffff url(../images/map3.png?20250926) no-repeat center / contain;
  	/* border-radius: 8px; */
  	z-index: 1;
  }

  /*  =  */
  .marker {
  	position: absolute;
  	/*  .map  */
  	transform: translate(-50%, -50%);
  }

  /*  */
  .marker .pin-radio {
  	position: absolute;
  	inset: 0;
  	opacity: 0;
  	pointer-events: none;
  }

  /* -------------------  ------------------- */
  .pin {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: var(--pin-size);
  	height: var(--pin-size);
  	border-radius: 50%;
  	box-shadow: 0 0 0 var(--pin-ring) #fff, 0 0 0 calc(var(--pin-ring)*2) currentColor;
  	background: #fff;
  	color: var(--pin-color);
  	transform: translate(-50%, -50%);
  	display: block;
  	outline: none;
  }

  .pin:hover {
  	filter: brightness(.9);
  	cursor: pointer;
  }

  .pin:focus-visible {
  	outline: 3px solid rgba(59, 130, 246, .6);
  	outline-offset: 2px;
  }

  /*  */
  .pin.blue {
  	color: #2563eb;
  }

  .pin.cyan {
  	color: #06b6d4;
  }

  .pin.green {
  	color: #16a34a;
  }

  .pin.lime {
  	color: #65a30d;
  }

  .pin.orange {
  	color: #f97316;
  }

  .pin.pink {
  	color: #ec4899;
  }

  .pin.purple {
  	color: #7c3aed;
  }

  /* ------------------- Bubble（吹き出し） ------------------- */
  .bubble {
  	position: absolute;
  	top: 0;
  	left: 0;
  	min-width: 180px;
  	max-width: 240px;
  	background: #fff;
  	border: 1px solid #e5e7eb;
  	border-radius: 10px;
  	padding: 10px 12px;
  	box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
  	transform: translate(-50%, calc(-100% - 28px));
  	/*  */
  	opacity: 0;
  	pointer-events: none;
  	transition: opacity .18s ease, transform .18s ease;
  	z-index: 9999;
  	/*  */
  }

  .bubble::after {
  	content: "";
  	position: absolute;
  	left: 50%;
  	bottom: -8px;
  	width: 14px;
  	height: 14px;
  	background: #fff;
  	border-left: 1px solid #e5e7eb;
  	border-bottom: 1px solid #e5e7eb;
  	transform: translateX(-50%) rotate(45deg);
  	/* クリックをマークへ透過 */
  	pointer-events: none;
  }

  .bubble h4 {
  	margin: 0 0 6px;
  	font-size: 15px;
  }

  .bubble .meta {
  	font-size: 12px;
  	color: #6b7280;
  }

  .bubble a.go {
  	display: inline-block;
  	font-weight: 600;
  	text-decoration: none;
  	border-bottom: 1px solid currentColor;
  }

  /* -none  */
  .bubble .close {
  	position: absolute;
  	inset: 6px 8px auto auto;
  	font-size: 18px;
  	line-height: 1;
  	color: #9ca3af;
  	cursor: pointer;
  }

  .bubble .close:hover {
  	color: #4b5563;
  }

  /*  */
  .marker .pin-radio:checked~.bubble {
  	opacity: 1;
  	pointer-events: auto;
  	transform: translate(-50%, calc(-100% - 24px));
  }

  /* ------------------- Target  ------------------- */
  .section {
  	max-width: 780px;
  	margin: 40px auto;
  	padding: 24px;
  	border: 1px solid #eee;
  	border-radius: 10px;
  	background: #fff;
  }

  .section h2 {
  	margin-top: 0;
  	font-size: 22px;
  }

  .section .to-top {
  	font-size: 13px;
  	color: #555;
  }

  /*  [id]  */
  [id] {
  	scroll-margin-top: 12px;
  }


  /* ===  === */
  .map-board {
  	/* max-width: 1000px; */
  	/*  */
  	margin: 0 auto 24px;
  	display: grid;
  	grid-template-columns: 1fr minmax(520px, 780px) 1fr;
  	/* 左//右 */
  	column-gap: 16px;
  	align-items: start;
  	max-width: 1000px;
  	margin: 24px auto;
  	display: grid;
  	grid-template-columns: 15% 60% 20%;
  	column-gap: 16px;
  	align-items: start;
  }

  /*  */
  .side-list {
  	font-size: 14px;
  	line-height: 1.6;
  }

  .side-list p {
  	margin: 0 0 8px;
  }

  /*    */
  .side-link {
  	display: block;
  	padding: 6px 1px;
  	border-radius: 5px;
  	cursor: pointer;
  	font-size: 1em;
  	color: #0b63c7;
  	/* text-decoration: underline; */
  	text-underline-offset: 3px;
  }

  .side-link:hover {
  	background: #f3f6fb;
  	text-decoration: none;
  }

  /*  */
  .side-link.close-all {
  	color: #555;
  	text-decoration: none;
  	opacity: .8;
  }

  .side-link.close-all:hover {
  	background: #f3f3f3;
  }

  /* */
  @media (max-width: 980px) {
  	.map-board {
  		grid-template-columns: 1fr;
  		row-gap: 16px;
  	}
  }



  /* % + % */
  .map-board {
  	/* max-width: 1000px; */
  	/* ページ幅に合わせる */
  	margin: 5px auto;
  	display: grid;
  	grid-template-columns: 17% 65% 17%;
  	column-gap: 0.1em;
  	align-content: space-between;
  	align-items: start;
  }

  /* 事業所リスト */
  .side-list {
  	font-size: 14px;
  	line-height: 1.8;
  }

  .side-list h3 {
  	font-size: 15px;
  	text-align: center
  }

  .side-list p {
  	margin: 0 0 8px;
  	text-align: center;
  }

  .side-list p {
  	text-decoration: none;
  }




  .side-link {
  	cursor: pointer;
  	color: #ffffff;
  	/* text-decoration: underline; */
  	background: #3F51B5;
  	padding: 5px;
  }

  .side-link:hover {
  	background: #405b88;
  }

  .side-link.close-all {
  	color: #555;
  	text-decoration: none;
  }


  .side-link.chubu {
  	/* text-decoration: underline; */
  	background: #b60005;
  	padding: 5px;
  }

  .side-link.honsha {
  	/* text-decoration: underline; */
  	background: #16a34a;
  	padding: 5px;
  }

  .side-link.system {
  	/* text-decoration: underline; */
  	background: #06b6d4;
  	padding: 5px;
  }


  .side-link.unsou {
  	/* text-decoration: underline; */
  	background: #2563eb;
  	padding: 5px;
  }

  .side-link.tohoku {
  	/* text-decoration: underline; */
  	background: #ec4899;
  	padding: 5px;
  }

  .side-link.kanto {
  	/* text-decoration: underline; */
  	background: #f97316;
  	padding: 5px;
  }



  .side-link:hover {
  	background: #606060;
  }




  /*    */
  .map {
  	position: relative;
  	width: 100%;
  	/* aspect */
  	/* aspect-ratio: 1158 / 1182; */
  	/* aspect-ratio: 1000 / 1000; */
  	/* background: #ffffff url("../images/map3.png?2025") no-repeat center/contain; */
  	/* パス要確認 */
  	/* border-radius: 8px; */
  	isolation: isolate;
  	/* 他のz-index干渉を遮断 */
  }

  /* -ratioé*/
  .map::before {
  	content: "";
  	display: block;
  	padding-top: calc(1000 /1100 * 100%);
  	/* 高さ = 幅×比率 */
  }

  .map>* {
  	position: absolute;
  }

  /*  */

  .marker {
  	position: absolute;
  	transform: translate(-50%, -50%);
  }

  /*  */
  .pin-radio {
  	position: absolute;
  	inset: 0;
  	opacity: 0;
  	pointer-events: none;
  }

  /*  .blue .cyan .green .lime .orange .pink .purple） */
  .pin {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 6px;
  	height: 6px;
  	/* */
  	border-radius: 50%;
  	box-shadow: 0 0 0 3px #fff, 0 0 0 6px currentColor;
  	background: #fff;
  	transform: translate(-50%, -50%);
  	cursor: pointer;
  	z-index: 2;
  }

  .pin.blue {
  	color: #2563eb;
  }

  .pin.cyan {
  	color: #06b6d4;
  }

  .pin.green {
  	color: #16a34a;
  }

  .pin.lime {
  	color: #65a30d;
  }

  .pin.orange {
  	color: #f97316;
  }

  .pin.kantou {
  	color: #f97316;
  }

  .pin.red {
  	color: #d62d2d;
  }



  .pin.pink {
  	color: #ec4899;
  }

  .pin.purple {
  	color: #7c3aed;
  }

  /* */
  .bubble {
  	position: absolute;
  	top: 0;
  	left: 0;
  	min-width: 180px;
  	max-width: 240px;
  	background: #fff;
  	border: 1px solid #e5e7eb;
  	border-radius: 10px;
  	padding: 10px 12px;
  	box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
  	transform: translate(-50%, calc(-100% - 16px));
  	opacity: 0;
  	visibility: hidden;
  	pointer-events: none;
  	transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
  	z-index: 3;
  }

  .bubble::after {
  	content: "";
  	position: absolute;
  	left: 50%;
  	bottom: -8px;
  	width: 14px;
  	height: 14px;
  	background: #fff;
  	border-left: 1px solid #e5e7eb;
  	border-bottom: 1px solid #e5e7eb;
  	transform: translateX(-50%) rotate(45deg);
  }

  .bubble h4 {
  	margin: 0 0 6px;
  	font-size: 15px;
  }

  .bubble .meta {
  	font-size: 12px;
  	color: #6b7280;
  }

  .bubble .go {
  	font-weight: 600;
  	text-decoration: none;
  	border-bottom: 1px solid currentColor;
  }

  /*  */
  .bubble .close {
  	position: absolute;
  	inset: 6px 8px auto auto;
  	font-size: 18px;
  	line-height: 1;
  	color: #9ca3af;
  	cursor: pointer;
  }

  .bubble .close:hover {
  	color: #4b5563;
  }

  /*  */
  .pin-radio:checked~.bubble {
  	opacity: 1;
  	visibility: visible;
  	pointer-events: auto;
  	transform: translate(-50%, calc(-100% - 12px));
  	transition: opacity .18s ease, transform .18s ease, visibility 0s 0s;
  }

  /*  */
  @media (max-width: 980px) {
  	.map-board {
  		/* grid-template-columns: 1fr; */
  		/* row-gap: 16px; */
  	}
  }


  /* ======  ====== */
  .map {
  	position: relative;
  	isolation: isolate;
  	z-index: 0;
  }

  /*  */
  .map .marker {
  	position: absolute;
  	transform: translate(-50%, -50%);
  	z-index: 0;
  }


  .map .marker.p_honsha {
  	top: 83%;
  	left: 78%;
  }

  .map .marker.p_ss {
  	top: 72%;
  	left: 64.3%;
  }

  /* chubu */
  .map .marker.p_tg {
  	top: 72%;
  	left: 60.5%;
  }

  .map .marker.p_ngc {
  	top: 66%;
  	left: 64%;
  }

  .map .marker.p_kg {
  	top: 42%;
  	left: 85%;
  }

  /* unsou */
  .map .marker.p_ku {
  	top: 75%;
  	left: 71.5%;
  }

  .map .marker.p_kbc {
  	top: 38%;
  	left: 90%;
  }

  .map .marker.p_hbc {
  	top: 75%;
  	left: 75.2%;
  }

  .map .marker.p_nu {
  	top: 73%;
  	left: 83.5%;
  }

  /* touhoku */

  .map .marker.p_sgt {
  	top: 55%;
  	left: 79.5%;
  }

  .map .marker.p_ngt {
  	top: 55%;
  	left: 83.4%;
  }

  .map .marker.p_ygt {
  	top: 46%;
  	left: 76%;
  }

  .map .marker.p_kg {
  	top: 84%;
  	left: 64%;
  }

  .map .marker.p_ke {
  	top: 38%;
  	left: 86%;
  }


  /* kannto */
  .map .marker.p_ug {
  	top: 83%;
  	left: 85%;
  }

  .map .marker.p_yg {
  	top: 75%;
  	left: 78.9%;
  }

  .map .marker.p_og {
  	/* top: 69%; */
  	/* left: 60%; */
  	top: 83%;
  	left: 74%;
  }

  .map .marker.p_sgk {
  	top: 92.5%;
  	left: 77%;
  }


  /* !important  */
  .map .pin {
  	z-index: 10 !important;
  }

  .map .bubble {
  	z-index: 10000 !important;
  	/*   */
  	opacity: 0;
  	visibility: hidden;
  	pointer-events: none;
  	transform: translate(-50%, calc(-100% - 16px));
  	transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
  }

  /* ホバー/選択時は吹き出しを最前面、ピンは背面＆クリック不可に */
  .map .marker:hover {
  	z-index: 2147483647;
  }

  .map .marker:hover .pin,
  .map .marker:has(.pin-radio:checked) .pin {
  	z-index: 1 !important;
  }

  .map .marker:hover .bubble,
  .map .marker:has(.pin-radio:checked) .bubble {
  	z-index: 10001 !important;
  }

  /*  */
  .map .pin-radio:checked~.bubble {
  	opacity: 1;
  	visibility: visible;
  	pointer-events: auto;
  	transform: translate(-50%, calc(-100% - 12px));
  	transition: opacity .18s ease, transform .18s ease, visibility 0s 0s;
  }

  /* hover 表示（山形営業所のみ） */
  .map .marker.p_ygt:hover .bubble {
  	opacity: 1;
  	visibility: visible;
  	pointer-events: auto;
  	transform: translate(-50%, calc(-100% - 12px));
  	transition: opacity .18s ease, transform .18s ease, visibility 0s 0s;
  }

  /* hover 表示（他の拠点も同様に） */
  .map .marker.p_honsha:hover .bubble,
  .map .marker.p_ss:hover .bubble,
  .map .marker.p_yg:hover .bubble,
  .map .marker.p_ug:hover .bubble,
  .map .marker.p_sgk:hover .bubble,
  .map .marker.p_og:hover .bubble,
  .map .marker.p_sgt:hover .bubble,
  .map .marker.p_ngt:hover .bubble,
  .map .marker.p_ke:hover .bubble,
  .map .marker.p_tg:hover .bubble,
  .map .marker.p_ngc:hover .bubble,
  .map .marker.p_kg:hover .bubble,
  .map .marker.p_ku:hover .bubble,
  .map .marker.p_kbc:hover .bubble,
  .map .marker.p_hbc:hover .bubble {
  	opacity: 1;
  	visibility: visible;
  	pointer-events: auto;
  	transform: translate(-50%, calc(-100% - 12px));
  	transition: opacity .18s ease, transform .18s ease, visibility 0s 0s;
  }

  /*  */
  .map .marker:has(.pin-radio:checked) {
  	z-index: 2147483647;
  	/**/
  }

  .map .pin {
  	z-index: 10 !important;
  }

  .map .bubble {
  	z-index: 10000 !important;
  }