@charset "shift_jis";
@media screen and (min-width:768px) {

	/* CSS Document */
	#spot_conts {
		width: 1100px;
		margin: 150px auto 100px auto;
	}

	#spot_conts .spot_name {
		margin: 0 0 55px 0;
		font-weight: bold;
		text-align: center;
	}

	#spot_conts .spot_name p {
		display: inline-block;
		margin: 0 0 30px 0;
		padding: 10px 20px;
		background: #607594;
		border-radius: 3px;
		font-size: 16px;
		line-height: 20px;
		color: #FFF;
		letter-spacing: 0.8px;
	}

	#spot_conts .spot_name h2 {
		margin: 0;
		font-size: 30px;
		line-height: 36px;
		letter-spacing: 1.5px;
	}

	#spot_conts .spot_detail {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0 30px;
		margin: 0 0 60px 0;
	}

	#spot_conts .spot_detail div {
		max-width: 500px;
		box-sizing: border-box;
		padding: 25px;
		background: #ebf3f8;
		border-radius: 5px;
	}

	#spot_conts .spot_detail div:empty {
		display: none;
	}

	#spot_conts .spot_detail div img {
		min-width: 250px;
		max-width: 450px;
	}

	#spot_conts .spot_detail table {
		width: 100%;
		word-break: break-all
	}

	#spot_conts .spot_detail table,
	#spot_conts .spot_detail tr,
	#spot_conts .spot_detail td,
	#spot_conts .spot_detail th {
		border-spacing: 0;
	}

	#spot_conts .spot_detail table tr {
		display: flex;
		padding: 23px 0;
		border-radius: 3px;
	}

	#spot_conts .spot_detail table tr:nth-of-type(2n-1) {
		background: #f5f5f5;
	}

	#spot_conts .spot_detail table th {
		display: flex;
		align-items: center;
		width: 120px;
		box-sizing: border-box;
		padding: 0 0 0 20px;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0.8px;
		text-align: left;
	}

	#spot_conts .spot_detail table td {
		width: calc(100% - 120px);
		box-sizing: border-box;
		padding: 0 10px 0 0;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0.8px;
	}

	#spot_conts .spot_detail table td a {
		display: flex;
		align-items: center;
		gap: 0 10px;
		color: #607594;
		text-decoration: none;
	}

	#spot_conts .spot_detail table td a span {
		text-decoration: underline;
	}

	#spot_conts .spot_detail table td a:hover span {
		text-decoration: none;
	}

	#spot_conts .spot_tl {
		margin: 0 0 20px 0;
		padding: 15px 0 15px 20px;
		background: #607594;
		border-radius: 3px;
		font-size: 22px;
		line-height: 25px;
		color: #FFF;
		letter-spacing: 1.1px;
	}

	#spot_conts #spot_map {
		margin: 0 0 60px 0;
	}

	#spot_conts #spot_map iframe {
		width: 100%;
		height: 350px;
		box-sizing: border-box;
		margin: 0 0 0 0;
		border: 5px solid #ebf3f8;
	}

	#spot_conts #spot_map p {
		margin: 0;
		font-size: 14px;
		line-height: 20px;
		color: #607594;
		font-weight: bold;
		text-align: center;
		letter-spacing: 0.7px;
	}

	#spot_conts #spot_map p br {
		display: none;
	}

	#spot_conts #spot_map table tr a {
		display: flex;
	}

	#spot_conts #spot_bukken ul {
		margin: 0;
		padding: 0;
		list-style: none;
		border: 1px solid #cccccc;
	}

	#spot_conts #spot_bukken ul:empty {
		display: none;
	}

	#spot_conts #spot_bukken ul li a {
		display: flex;
		box-sizing: border-box;
		font-size: 14px;
		line-height: 20px;
		color: #607594;
		font-weight: bold;
		text-align: center;
		letter-spacing: 0.7px;
		text-decoration: none;
		transition: all 0.3s;
	}

	#spot_conts #spot_bukken ul li:nth-child(2n-1) a {
		background: #f0f0f0;
	}

	#spot_conts #spot_bukken ul li a:hover {
		background: #607594;
		color: #FFF;
	}

	#spot_conts #spot_bukken ul li:not(:last-child) a {
		border-bottom: 1px solid #cccccc;
	}

	#spot_conts #spot_bukken ul li a p {
		margin: 0;
		padding: 20px 0;
	}

	#spot_conts #spot_bukken ul li a p:first-of-type {
		text-decoration: underline;
	}

	#spot_conts #spot_bukken ul li a p:not(:last-of-type) {
		width: 300px;
		box-sizing: border-box;
		border-right: 1px solid #cccccc;
	}

	#spot_conts #spot_bukken ul li a p:last-of-type {
		width: 200px;
	}
}

@media screen and (max-width:767px) {
	#spot_conts {
		width: 90%;
		margin: 8% auto 15% auto;
	}

	#spot_conts .spot_name {
		margin: 0 0 5% 0;
		font-weight: bold;
		text-align: center;
	}

	#spot_conts .spot_name p {
		display: inline-block;
		margin: 0 0 5% 0;
		padding: 2% 5%;
		background: #607594;
		border-radius: 3px;
		font-size: clamp(11px, 3.2vw, 15px);
		line-height: clamp(14px, 5vh, 22px);
		font-weight: bold;
		color: #FFF;
		letter-spacing: 0.05em;
	}

	#spot_conts .spot_name h2 {
		margin: 0;
		font-size: clamp(12px, 4vw, 16px);
		line-height: clamp(16px, 6vh, 24px);
		font-weight: bold;
		letter-spacing: 0.05em;
	}

	#spot_conts .spot_detail {
		margin: 0 0 10% 0;
	}

	#spot_conts .spot_detail div {
		max-width: 100%;
		box-sizing: border-box;
		margin: 0 0 5% 0;
		padding: 5%;
		background: #ebf3f8;
		border-radius: 5px;
		text-align: center;
	}

	#spot_conts .spot_detail div:empty {
		display: none;
	}

	#spot_conts .spot_detail table {
		width: 100%;
		word-break: break-all
	}

	#spot_conts .spot_detail table,
	#spot_conts .spot_detail tr,
	#spot_conts .spot_detail td,
	#spot_conts .spot_detail th {
		border-spacing: 0;
	}

	#spot_conts .spot_detail table tr {
		display: flex;
		padding: 3% 0;
		border-radius: 3px;
	}

	#spot_conts .spot_detail table tr:nth-of-type(2n-1) {
		background: #f5f5f5;
	}

	#spot_conts .spot_detail table th {
		display: flex;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
		padding: 0 0 0 5%;
		font-size: clamp(11px, 3.2vw, 15px);
		line-height: clamp(14px, 5vh, 22px);
		font-weight: bold;
		letter-spacing: 0.05em;
		text-align: left;
	}

	#spot_conts .spot_detail table td {
		width: 75%;
		font-size: clamp(11px, 3.2vw, 15px);
		line-height: clamp(14px, 5vh, 22px);
		letter-spacing: 0.05em;
	}

	#spot_conts .spot_detail table td a {
		display: flex;
		align-items: center;
		gap: 0 8px;
		color: #607594;
		text-decoration: none;
	}

	#spot_conts .spot_detail table td a span {
		display: block;
		max-width: 90%;
		text-decoration: underline;
	}

	#spot_conts .spot_tl {
		margin: 0 0 3% 0;
		padding: 3% 0 3% 3%;
		background: #607594;
		border-radius: 3px;
		font-size: clamp(12px, 4vw, 16px);
		line-height: clamp(16px, 6vh, 24px);
		color: #FFF;
		font-weight: bold;
		letter-spacing: 0.05em;
	}

	#spot_conts #spot_map {
		margin: 0 0 15% 0;
	}

	#spot_conts #spot_map iframe {
		width: 100%;
		height: 400px;
		box-sizing: border-box;
		margin: 0 0 0 0;
		border: 5px solid #ebf3f8;
	}

	#spot_conts #spot_bukken ul {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#spot_conts #spot_bukken ul.spot_bukken_list {
		gap: 20px 0;
	}

	#spot_conts #spot_bukken ul li.spot_bukken_part a {
		display: block;
		box-sizing: border-box;
		padding: 20px;
		border: 1px solid #f0f0f0;
		border-radius: 5px;
		box-shadow: 0px 1px 3px 1px #f1f1f1;
		color: #607594;
	}

	#spot_conts #spot_bukken ul li a p.spot_bukken_name {
		margin: 0 0 15px 0;
		padding: 5% 0;
		background: #f5f5f5;
		border-radius: 5px;
		font-size: clamp(11px, 3.7vw, 15px);
		line-height: clamp(14px, 5vh, 22px);
		font-weight: bold;
		text-align: center;
	}

	#spot_conts #spot_bukken ul li a ul {
		gap: 8px 0;
	}

	#spot_conts #spot_bukken ul li a ul li {
		display: flex;
		align-items: flex-start;
		gap: 0 10px;
		font-weight: bold;
	}

	#spot_conts #spot_bukken ul li a ul li span {
		display: inline-block;
		width: 60px;
		padding: 3px 0;
		background: #607594;
		border-radius: 2px;
		font-size: 12px;
		line-height: 16px;
		color: #FFF;
		text-align: center;
	}

	#spot_conts #spot_bukken ul li a ul li p {
		width: calc(100% - 70px);
		font-size: 14px;
		line-height: 20px;
	}
}