@charset "utf-8";

:root {

}

@media (prefers-color-scheme: dark) {
	:root {

	}
}

@media screen and (max-width:480px) {
	:root {
		
		--MapList_A_flex-basis: 100%;
		--MapList_Figure_height: var(--Size_80);
		
		--MapDetailLeft_flex-basis: 100%;
		--MapDetailRight_flex-basis: 100%;
	}
}

@media screen and (min-width:481px) and (max-width: 768px) {
	:root {
		
		--MapList_A_flex-basis: calc( calc( 100% - var(--Size_12) ) / 2 );
		--MapList_Figure_height: var(--Size_64);
		
		--MapDetailLeft_flex-basis: 100%;
		--MapDetailRight_flex-basis: 100%;
	}
}

@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {
		
		--MapList_A_flex-basis: calc( calc( 100% - var(--Size_12) ) / 2 );
		--MapList_Figure_height: var(--Size_64);
		
		--MapDetailLeft_flex-basis: calc( 100% - var(--Size_12) - var(--Size_200) );
		--MapDetailRight_flex-basis: var(--Size_140);
	}
}

@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {
		
		--MapList_A_flex-basis: calc( calc( 100% - var(--Size_24) ) / 3 );
		--MapList_Figure_height: var(--Size_64);
		
		--MapDetailLeft_flex-basis: calc( 100% - var(--Size_12) - var(--Size_200) );
		--MapDetailRight_flex-basis: var(--Size_200);
	}
}

@media screen and (min-width:1440px) {
	:root {
		
		--MapList_A_flex-basis: calc( calc( 100% - var(--Size_24) ) / 3 );
		--MapList_Figure_height: var(--Size_120);
		
		--MapDetailLeft_flex-basis: calc( 100% - var(--Size_12) - var(--Size_400) );
		--MapDetailRight_flex-basis: var(--Size_200);
	}
}



/* ゲイバーマップ */

figure#map {
	margin: var(--Size_12) 0 var(--Size_24);
}

figure#map img {
	width: 100%;
}



/* ゲイバーマップ リスト*/

article section#center ul.map_list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--Size_06);
	margin: var(--Size_08) 0 var(--Size_12);
	padding: 0;
	list-style: none;
}

article section#center ul.map_list li a {
	position: relative;
	padding: var(--Size_04) var(--Size_02) var(--Size_04) var(--Size_18);
	font-size: var(--Size_10);
	border-radius: var(--Border-radius_S);
}

article section#center ul.map_list li a {
	color: var(--Color_FF100);
	background: var(--Color_FF000);
	border: 1px var(--Color_FF100) solid;
}

article section#center ul.map_list.cat li a:hover {
	color: var(--Color_FF100);
	background: var(--Color_A100);
	border: 1px var(--Color_A100) solid;
}

article section#center ul.map_list.tag li a:hover {
	color: var(--Color_FF100);
	background: var(--Color_C100);
	border: 1px var(--Color_C100) solid;
}

article section#center ul.map_list li a::before {
	position: absolute;
	top: var(--Size_02);
	left: var(--Size_02);
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--Size_14);
	height: var(--Size_14);
	color: var(--Color_FF100);
	font-family: "Font Awesome 5 Free";
	font-size: var(--Size_08);
	font-weight: 900;
}

article section#center ul.map_list li a::before {
	content: '\f57b';
}







/* ゲイバーマップ 一覧*/

div#map_list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--Size_12);
	margin: var(--Size_12) 0;
}

div#map_list a {
	flex-basis: var(--MapList_A_flex-basis);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
}

div#map_list a figure {
	flex-grow: 0;
	flex-shrink: 0;
	padding: var(--Size_12) 0;
	width: 100%;
	border-radius: var(--Border-radius_T);
}

div#map_list a figure img {
	max-height: var(--MapList_Figure_height);
}

div#map_list a div.map_list_wrap {
	flex-grow: 1;
	flex-shrink: 1;
	margin: 0;
	padding: var(--Size_12);
	width: 100%;
	background: var(--Color_1D080);
	border-radius: var(--Border-radius_B);
	
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}

div#map_list a:hover div.map_list_wrap {
	background: var(--Color_1D100);
}

div#map_list a div.map_list_wrap div.area1 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

div#map_list a div.map_list_wrap div.area1 p {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--Size_04);
	margin: 0;
	padding: 0;
}

div#map_list a div.map_list_wrap div.area1 p span {
	display: inline-block;
	margin: 0;
	padding: var(--Size_02) var(--Size_04);
	color: var(--Color_FF080);
	font-size: var(--Size_08);
	border: 1px var(--Color_FF080) solid;
	border-radius: var(--Border-radius_S);
	
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}

div#map_list a:hover div.map_list_wrap div.area1 p span {
	color: var(--Color_FF100);
	border: 1px var(--Color_FF100) solid;
}

div#map_list a div.map_list_wrap div.area1 time {
	color: var(--Color_FF040);
	font-size: var(--Size_08);
}

div#map_list a div.map_list_wrap div.area1 time::before {
	content: '\f017';
	padding: 0 var(--Size_04) 0 0;
	color: var(--Color_FF040);
	font-family: "Font Awesome 5 Free";
	font-size: var(--Size_08);
	font-weight: 900;
}

div#map_list a div.map_list_wrap div.area2 {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	padding: var(--Size_04) 0 var(--Size_10);
	border-bottom: 1px var(--Color_C040) solid;
}

div#map_list a div.map_list_wrap div.area2 p:nth-of-type(1) {
	margin: 0;
	padding: var(--Size_06) 0;
	color: var(--Color_C100);
	font-size: var(--Size_12);
	font-weight: 600;
}

div#map_list a div.map_list_wrap div.area2 p:nth-of-type(2) {
	margin: 0;
	padding: 0;
	color: var(--Color_FF100);
	font-size: var(--Size_08);
	white-space: normal;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

div#map_list a > div > div  {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--Size_04);
	margin: 0;
	padding: var(--Size_08) 0 0;
}

div#map_list a > div > div span {
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}






/* ゲイバーマップ 詳細 */
/* 左 */

div#map_detail {
	display: flex;
	flex-direction: var(--Flex-direction_CCRR);
	flex-wrap: nowrap;
	gap: var(--Size_12);
}




/* ゲイバーマップ 詳細 */
/* 左 */

div#map_detail div#map_detail_left {
	flex-basis: var(--MapDetailLeft_flex-basis);
	flex-grow: 1;
	padding: var(--Size_12);
}


div#map_detail div#map_detail_left div.category {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--Size_04);
	margin: 0;
	padding: var(--Size_08) 0 0;
}

div#map_detail div#map_detail_left div.category span {
	display: inline-block;
	margin: 0;
	padding: var(--Size_02) var(--Size_08);
	font-size: var(--Size_08);
	background: var(--Color_A100);
	border-radius: var(--Border-radius_L);
}

div#map_detail div#map_detail_left div.category span a {
	font-size: var(--Size_08);
	color: var(--Color_FF100);
}

div#map_detail div#map_detail_left div.title {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: var(--Size_08) 0  var(--Size_12);
}

div#map_detail div#map_detail_left div.title p {
	white-space: nowrap;
}

div#map_detail div#map_detail_left div.title p:nth-of-type(1) {
	flex-grow: 1;
	font-size: var(--Size_14);
	color: var(--Color_C100);
}

div#map_detail div#map_detail_left div.title p:nth-of-type(2) {
	text-align: right;
	font-size: var(--Size_08);
}

div#map_detail div#map_detail_left figure.map {
	padding: var(--Size_12) 0;
	border-radius: var(--Border-radius_T);
}

div#map_detail div#map_detail_left figure.map img {
	max-height: var(--Size_140);
}

div#map_detail div#map_detail_left > div > p {
	flex-basis: var(--Size_80);
	margin: 0;
	padding: 0;
	font-size: var(--Size_08);
}

div#map_detail div#map_detail_left > div > div.area_wrap {
	flex-basis: calc( 100% - var(--Size_80) );
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--Size_04);
	margin: 0;
}

div#map_detail div#map_detail_left div.area_age,
div#map_detail div#map_detail_left div.area_sexuality,
div#map_detail div#map_detail_left div.area_type,
div#map_detail div#map_detail_left div.area_drink,
div#map_detail div#map_detail_left div.area_facility {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0;
	padding: var(--Size_12) 0;
	border-bottom: 1px var(--Color_FF020) solid;
}




/* ゲイバーマップ 詳細 */
/* 右 */

div#map_detail div#map_detail_right {
	flex-basis: var(--MapDetailRight_flex-basis);
	flex-grow: 0;
	flex-shrink: 0;
	padding: var(--Size_12);
}

div#map_detail div#map_detail_right ul {
	list-style: none;
	padding: 0 0 var(--Size_20) var(--Size_20);
}

div#map_detail div#map_detail_right ul li {
	position: relative;
}

div#map_detail div#map_detail_right ul li::before {
	position: absolute;
	left: -2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--Size_14);
	height: var(--Size_14);
	color: var(--Color_C100);
	font-family: "Font Awesome 5 Free";
	font-size: var(--Size_08);
	font-weight: 900;
	background: var(--Color_FF100);
	border-radius: var(--Border-radius_L);
}

div#map_detail div#map_detail_right ul li.address::before {
	content: '\f3c5';
}

div#map_detail div#map_detail_right ul li.tel::before {
	content: '\f095';
}

div#map_detail div#map_detail_right ul li a {
	color: var(--Color_FF100);
}

div#map_detail div#map_detail_right iframe {
	margin: 0 0 var(--Size_20);
	width: 100%;
	border-radius: var(--Border-radius_S);
	aspect-ratio: 9 / 16;
}








/* ゲイバーマップ 共通 */

/* ゲイバーマップ ロゴ */

figure.map {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0;
}

figure.map img {
	border-radius: var(--Border-radius_S);
	aspect-ratio: var(--Aspect-ratio_01-01);
}


/* ゲイバーマップ 年齢 */

div.area_age span {
	display: inline-block;
	margin: 0;
	padding: var(--Size_02) var(--Size_04);
	font-size: var(--Size_08);
	border-radius: var(--Border-radius_S);
}

div.area_age span.yes {
	color: var(--Color_FF100);
	background: var(--Color_1D000);
	border: 1px var(--Color_FF100) solid;
}

div.area_age span.no {
	color: var(--Color_FF040);
	border: 1px var(--Color_FF040) solid;
}


/* ゲイバーマップ セクシャリティ */

div.area_sexuality span {
	display: inline-block;
	margin: 0;
	padding: var(--Size_02) var(--Size_04);
	font-size: var(--Size_08);
	border-radius: var(--Border-radius_S);
}

div.area_sexuality span.yes {
	color: var(--Color_C100);
	background: var(--Color_FF000);
	border: 1px var(--Color_C100) solid;
}

div.area_sexuality span.no {
	color: var(--Color_C020);
	border: 1px var(--Color_C020) solid;
}


/* ゲイバーマップ タイプ */

div.area_type span {
	display: inline-block;
	margin: 0;
	padding: var(--Size_02) var(--Size_04);
	font-size: var(--Size_08);
	border-radius: var(--Border-radius_S);
}

div.area_type span.yes {
	color: var(--Color_C100);
	background: var(--Color_FF000);
	border: 1px var(--Color_C100) solid;
}

div.area_type span.no {
	color: var(--Color_C020);
	border: 1px var(--Color_C020) solid;
}


/* ゲイバーマップ ドリンク */

div.area_facility span {
	display: inline-block;
	margin: 0;
	padding: var(--Size_02) var(--Size_04);
	font-size: var(--Size_08);
	border-radius: var(--Border-radius_S);
}

div.area_facility span.yes {
	color: var(--Color_FF100);
	border: 1px var(--Color_FF100) solid;
}

div.area_facility span.no {
	color: var(--Color_FF040);
	border: 1px var(--Color_FF040) solid;
}


/* ゲイバーマップ 更新日*/

div.area_time {
	justify-content: flex-end;
	padding: var(--Size_12) 0 0;
	text-align: right;
}

div.area_time time {
	color: var(--Color_FF040);
	font-size: var(--Size_08);
}

div.area_time time::before {
	content: '\f017';
	padding: 0 var(--Size_04) 0 0;
	color: var(--Color_FF040);
	font-family: "Font Awesome 5 Free";
	font-size: var(--Size_08);
	font-weight: 900;
}


/* ゲイバーマップ タグ*/

div.area_tag {
	padding: var(--Size_20) 0 0;
	text-align: center;
}

div.area_tag span a {
	padding: var(--Size_04) var(--Size_08);
	color: var(--Color_FF100);
	font-size: var(--Size_08);
	background: var(--Color_A100);
	border-radius: var(--Border-radius_S);
	border: 1px var(--Color_A100) solid;
}