@charset "UTF-8";

/* ★″
 * EXTRA.css
 *
 * このディレクトリ内だけに適用したいスタイル
 */



/* =========================================================
	強調部分
========================================================= */


	.note{
		display: block;
		text-align: center;

		padding: 16px;
		border: 4px solid #ccc;

		background: white;
	}
		.note.attention{
			border: 4px solid #E55C72;
		}

		.note.attention strong{
			font-size: 1.4em;
		}




/* =========================================================
	リスト部分
========================================================= */

	#shopList{

	}

		#shopList ul{
			display: flex;
				align-items: stretch;
				justify-content: space-between;
				flex-wrap: wrap;
			list-style: none;
		}



			#shopList ul li{
				width: 49.5%;
				display: flex;
				align-items: center;


				position: relative;
				padding: 8px 24px 8px 16px;
				margin: 0 0 8px 0;

				background: white;
				border: 1px solid #ddc8b1;
				box-shadow: 0 0 4px rgba(0,0,0,0.1);
				font-size: 0.9em;
				line-height: 1.4;
			}


				#shopList ul li.LINK{
					padding: 0;
					background: RGBA(229, 92, 114, 0.05);
					border: 1px solid RGBA(229, 92, 114, 0.5);
					overflow: hidden;
				}

				#shopList ul li a{
					display: block;
					padding: 8px 24px 8px 16px;
					width: 100%;
				}




			#shopList ul li i{
				position: absolute;
				top: 6px; right: -2px; bottom: auto; left: auto;
				font-size: 0.7em;
				transform: rotate(45deg);
				font-weight: bold;
				color: white;
				z-index: 50;
				line-height: 1;
				text-align: center;
				font-style: normal;
			}

			#shopList ul li::after{
				position: absolute;
				top: 0; right: 0; bottom: auto; left: auto;
				content: "";
				width: 0;
				height: 0;
				border: 16px solid transparent;
				border-top: 16px solid #9a4440;
				border-right: 16px solid #9a4440;
			}
			#shopList ul.after_none li::after{
				border-top: none;
				border-right: none;


			}


			#shopList ul li.dan2 i{
				top: 3px; right: 2px; bottom: auto; left: auto;
			}

			#shopList ul li.dan2::after{
				border: 21px solid transparent;
				border-top: 21px solid #9a4440;
				border-right: 21px solid #9a4440;
			}



/* =========================================================
	マップ部分
========================================================= */

	#Map{
		position: relative;
		display: none;
		text-align: center;
		background: white;
		border: 4px solid #eee;
		box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
		margin: 0 0 64px 0;
	}

	#Map:before{
		content: "";
		display: block;
		width: 100%;
		padding-top: 64%;
	}

		#Map svg{
			/*max-width: 720px;*/
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

			#Map svg a path{
				transition: all 0.3s ease 0;
			}
				#Map svg a:hover path{
					fill: #E55C72;
				}

			#Map svg a text{
				font-family: "quasimoda", "fot-tsukuardgothic-std"; font-weight: 700;
				fill: white;
				text-anchor: middle;
				text-shadow: 0px 1px 2px black;
				font-size: 0.9em;
			}
				#Map svg a.Kyushu7 text{
					transition: all 0.3s ease 0;
					fill: #684221;
					text-shadow: none;
					font-size: 0.8em;
				}
					#Map svg a.Kyushu7:hover text{
						fill: #E55C72;
					}

@media screen and (min-width: 768px){

	#Map{
		display: block;
	}

}