@charset "utf-8";
/* CSS Document */

/*
------------------------------------------------------------------------------*/

main #map_pc{ display: block; }
main #map_sp{ display: none; }

#area_menu .link_border { background-color: white; }



/*============================================================================*/






/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ // Mobile // */
@media screen and (max-width: 767px) {
/*============================================================================*/

	main #map_pc{display: none;}
	main #map_sp{display: block;}
	main .f_box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.6rem 1rem;
		margin-top: 1rem;
	}
	main .f_box_item {
		width: calc( calc( 100% - 1rem * 1 ) / 2 );
	}
	main .f_box_item > a {
		display: block;
	}
	main .f_box_item .link_border--m {
		width: 100%
	}

	main #map_sp .selectButton {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 0.2rem solid #c0c4c7;
		position: relative;

		height: 7.5rem;
		border-radius: 1rem;
		margin-top: 0px;
		font-size: 1.7rem;
	}
	main #map_sp .selectButton::after {
		content: "";
		display: block;
		background-color: #e4e6e9;
		width: 0.4rem;
		height: 5rem;
		border-radius: 1rem;
		position: absolute;
		top: 1rem;
		left: 1rem;
}
	main #map_sp .selectButton::before {
		display: block;
		position: absolute;
		top: 50%;
		aspect-ratio: 1/1;
		content: "";
		mask: url(/-/media/Project/globeride/daiwa_com_jp/top/arrow_normal_s_bf98141f.svg) center/contain no-repeat;
		background: var(--base_black);
		/*transform: rotate(90deg);*/

		margin-top: -0.75rem;
		width: 1.2rem;
		right: 1.5rem;
	}
	main #map_sp .selectButton > select {
		width: 100%;
		height: 100%;
		padding-left: 3.4rem;
	}
	main #map_sp .selectButton > select > .noLink {
		color: #e4e6e9;
	}

	main #map_sp .selectButton:has( select option[value="m1"]:checked)::after {background-color: #9edfd3;}
	main #map_sp .selectButton:has( select option[value="m2"]:checked)::after {background-color: #98d2ef;}
	main #map_sp .selectButton:has( select option[value="m3"]:checked)::after {background-color: #b8aaca;}
	main #map_sp .selectButton:has( select option[value="m4"]:checked)::after {background-color: #ff687e;}
	main #map_sp .selectButton:has( select option[value="m5"]:checked)::after {background-color: #bdd45c;}
	main #map_sp .selectButton:has( select option[value="m6"]:checked)::after {background-color: #ffc631;}
	main #map_sp .selectButton:has( select option[value="m7"]:checked)::after {background-color: #87d698;}
	main #map_sp .selectButton:has( select option[value="m8"]:checked)::after {background-color: #67d0c7;}
	main #map_sp .selectButton:has( select option[value="m9"]:checked)::after {background-color: #cf80bd;}
	main #map_sp .selectButton:has( select option[value="m10"]:checked)::after {background-color: #8094e8;}

	main #map_sp > .map_area {
		margin-top: 2rem;
	}

/*============================================================================*/
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ // PC // */
@media screen and (min-width: 768px) {
/*============================================================================*/

	main #map_pc {
		min-height: 77rem;
		position: relative;
	}
	main #map_pc .map_area {
		position: absolute;
		top: 0;
		right: 0;
		width: 91.8rem;
		height: 77rem;
	}


	main #container #map_pc ul {
		display: none;
		position: absolute;
		left: 43.8rem;
		list-style: none;
		z-index: 10;
	}


	main #area_menu {}
	main #area_menu > div {
		position: relative;
		width: fit-content;
	}
	main #area_menu > div + div {
		margin-top: 0.8rem;
	}
	main #area_menu > div::after {
		content: "";
		display: block;
		background-color: #e4e6e9;
		width: 0.4rem;
		height: 5rem;
		border-radius: 1rem;
		position: absolute;
		top: 1rem;
		left: 1rem;
	}

	main #area_menu > div.Hokkaido:has(> .selected)::after { background-color: #9edfd3; }
	main #area_menu > div.Hokkaido > .map_menu_sub { top: calc(-7.8rem * 0); }
	main #area_menu > div.Tohoku:has(> .selected)::after { background-color: #98d2ef; }
	main #area_menu > div.Tohoku > .map_menu_sub { top: calc(-7.8rem * 1); }
	main #area_menu > div.Kanto:has(> .selected)::after { background-color: #b8aaca; }
	main #area_menu > div.Kanto > .map_menu_sub { top: calc(-7.8rem * 2) }
	main #area_menu > div.Koshinetsu-Hokuriku:has(> .selected)::after { background-color: #ff687e; }
	main #area_menu > div.Koshinetsu-Hokuriku > .map_menu_sub { top: calc(-7.8rem * 3) }
	main #area_menu > div.Tokai:has(> .selected)::after { background-color: #bdd45c; }
	main #area_menu > div.Tokai > .map_menu_sub { top: calc(-7.8rem * 4) }
	main #area_menu > div.Kinki:has(> .selected)::after { background-color: #ffc631; }
	main #area_menu > div.Kinki > .map_menu_sub { top: calc(-7.8rem * 5) }
	main #area_menu > div.Chugoku:has(> .selected)::after { background-color: #87d698; }
	main #area_menu > div.Chugoku > .map_menu_sub { top: calc(-7.8rem * 6) }
	main #area_menu > div.Shikoku:has(> .selected)::after { background-color: #67d0c7; }
	main #area_menu > div.Shikoku > .map_menu_sub { top: calc(-7.8rem * 7) }
	main #area_menu > div.Kyushu:has(> .selected)::after { background-color: #cf80bd; }
	main #area_menu > div.Kyushu > .map_menu_sub { top: calc(-7.8rem * 8) }
	main #area_menu > div.Okinawa:has(> .selected)::after { background-color: #8094e8; }
	main #area_menu > div.Okinawa > .map_menu_sub { top: calc(-7.8rem * 9) }


	main #area_menu > .noLink { color: #e4e6e9; }
	main #area_menu > .noLink .link_border:hover {}
	main #area_menu > .noLink .link_border:hover { border-color: #e8eaed;}
	main #area_menu > .noLink .link_border:hover .text:after { display: none; }
	main #area_menu > .noLink .link_border:hover .arrow_bg .bg { opacity: 0; }
	main #area_menu > .noLink .link_border:hover .arrow_bg .arrow {
		background: #0a0a14;
		animation: none;
	}
	main #area_menu > .noLink .arrow_bg { display: none; }


	main #area_menu .link_border.selected .arrow_bg .bg {
        opacity: 1;
        transform: scale(1)
    }
    main #area_menu .link_border.selected .arrow_bg .arrow {
        background: #fff;
        animation: arrow_run .3s 1 forwards linear
    }
	main #area_menu > div > .link_border--l {
		min-width: 35.8rem;
		width: 35.8rem;
		padding-left: 3.4rem;
	}
	main #area_menu > div > .map_menu_sub {}
	main #area_menu > div > .map_menu_sub > li + li {
		margin-top: 0.8rem;
	}

/*============================================================================*/
}


/* - - - - - - - - - - - - - - - - - - -
/-/media/Project/globeride/daiwa_com_jp/partner/fishingmap/css/fmap_top_css
{}
- - - - - - - - - - - - - - - - - - - */