/*------------------------
トヨタレンタリース釧路
trlkushiro.com
--
2024-03-15	Rewrite
2017-07-05	ドライブガイド用
------------------------*/

/*
h3	{ clear: both; margin-top: 2rem; padding: .5em 0; font-size: 1.0em; }
p	{ margin-top: 0; }
*/
h4	{ padding: 0; color: #333; background: none; }

/*------------------------
View Spot
------------------------*/
.vspot	{ margin: 1em auto; }
.vspot	{ display: flex; flex-wrap: wrap; align-items: center; gap: 2em; }

/* Responsive */
@media only screen and (min-width: 480px) {
	.vspot:nth-child(odd)	{ flex-direction: row-reverse; }
	.vspot >*	{ flex: 1 0 40%; margin: 0; padding: 0; }
	.vspot .ph	{ max-width: 38%; }	/* 黄金比 61.5 + 38.5 = 100 */
}

/*------------------------
Table
------------------------*/
.range		{ font-size: 1rem; }
.range tr	{ text-align: center; }
.range th,
.range td	{ border: 1px solid #aaa; }
.range td:first-child { background-color: #f8f0c8; }
.range .h	{ text-align: center; background-color:#cde; }
.range .ng	{ color:#666; text-decoration: line-through; background-color:#f8f8f8; }


/*------------------------
Map position
------------------------*/
#map_point		{ position: relative; margin: 1em auto; }
#map_point img	{ display: block; width: 100%; }
#map_point a	{ padding: 0 !important; background-image: none; }
#map_point a	{ position: absolute; display:block; transition: .2s; }
#map_point a:hover { background-color: rgba(255, 255, 255, .5); }
/* orignal 1440x800 */
.pt01	{ top: 61.9%; left: 41.6%; width: 12.5%; height: 19.9%; }	/* 釧路・釧路湿原 */
.pt02	{ top: 45.4%; left: 37.8%; width: 11.3%; height: 14.5%; }	/* 阿寒・たんちょう */
.pt03	{ top: 28.6%; left: 44.5%; width: 11.4%; height: 14.6%; }	/* 摩周・屈斜路 */
.pt04	{ top:  8.5%; left: 58.3%; width: 15.9%; height: 35.4%; }	/* 知床・標津・中標津 */
.pt05	{ top: 47.0%; left: 69.2%; width: 15.4%; height: 22.3%; }	/* 根室・納沙布 */
.pt06	{ top: 61.9%; left: 55.4%; width: 12.5%; height: 19.8%; }	/* 厚岸・霧多布 */

.pt_ksr01	{ left:  3.13%; top: 32.63%; width: 23.06%; height: 27.63%; }	/* 釧路湿原 */
.pt_ksr02	{ left:  6.53%; top: 65.00%; width: 21.39%; height: 29.00%; }	/* 湿原展望台 */
.pt_ksr03	{ left: 68.89%; top: 39.63%; width: 23.19%; height: 27.63%; }	/* 『MOO』(ムー) */
.pt_ksr04	{ left: 62.92%; top: 71.88%; width: 22.22%; height: 26.63%; }	/* 和商市場 */
.pt_ksr05	{ left: 63.47%; top:  7.38%; width: 22.85%; height: 27.50%; }	/* 細岡展望台 */
.pt_ksr06	{ left: 36.11%; top: 13.13%; width: 22.92%; height: 28.25%; }	/* タンチョウ */
.pt_akn01	{ left: 53.47%; top: 71.25%; width: 22.36%; height: 26.88%; }	/* 釧路市丹頂鶴自然公園 */
.pt_akn02	{ left:  8.33%; top: 64.75%; width: 22.22%; height: 26.63%; }	/* 阿寒国際ツルセンター */
.pt_akn03	{ left: 36.74%; top:  4.13%; width: 21.67%; height: 26.75%; }	/* 阿寒湖 */
.pt_akn04	{ left: 53.33%; top: 36.50%; width: 20.83%; height: 28.25%; }	/* マリモ */
.pt_akn05	{ left:  3.61%; top: 34.63%; width: 22.36%; height: 22.63%; }	/* オンネトー湖 */
.pt_msh01	{ left: 61.04%; top: 67.25%; width: 20.42%; height: 22.75%; }	/* 摩周湖 */
.pt_msh02	{ left:  6.60%; top: 70.63%; width: 20.21%; height: 24.25%; }	/* 屈斜路湖 */
.pt_msh03	{ left: 61.18%; top: 34.50%; width: 20.21%; height: 24.25%; }	/* 硫黄山 */
.pt_msh04	{ left:  3.13%; top: 39.00%; width: 20.21%; height: 24.25%; }	/* 美幌峠 */
.pt_msh05	{ left: 35.97%; top: 18.25%; width: 20.21%; height: 27.25%; }	/* 川湯温泉 */
.pt_nem01	{ left: 19.38%; top: 38.38%; width: 21.67%; height: 21.75%; }	/* 風連湖 */
.pt_nem02	{ left: 37.85%; top: 67.13%; width: 21.67%; height: 28.00%; }	/* 春国岱 */
.pt_nem03	{ left: 35.76%; top:  5.63%; width: 19.79%; height: 26.13%; }	/* 明治公園 */
.pt_nem04	{ left: 72.85%; top:  9.38%; width: 21.67%; height: 21.75%; }	/* 納沙布岬 */
.pt_nem05	{ left: 72.78%; top: 59.50%; width: 21.67%; height: 21.75%; }	/* 車石 */
.pt_sbt01	{ left: 55.56%; top: 33.38%; width: 18.96%; height: 25.50%; }	/* 標津サーモンパーク */
.pt_sbt02	{ left: 63.40%; top:  2.75%; width: 19.79%; height: 26.38%; }	/* クジラの見える丘公園 */
.pt_sbt03	{ left: 25.83%; top:  2.00%; width: 20.76%; height: 26.38%; }	/* 熊の湯 */
.pt_sbt04	{ left:  3.19%; top: 35.63%; width: 33.33%; height: 29.75%; }	/* 開陽台 */
.pt_sbt05	{ left:  3.19%; top: 35.63%; width: 33.33%; height: 29.75%; }	/* ミルクロード */
.pt_sbt06	{ left:  6.25%; top: 69.50%; width: 20.83%; height: 27.75%; }	/* 北海道立ゆめの森公園 */
.pt_sbt07	{ left: 77.78%; top: 40.00%; width: 18.61%; height: 25.00%; }	/* トドワラ */
.pt_sbt08	{ left: 74.44%; top: 69.38%; width: 20.83%; height: 28.00%; }	/* 野付半島原生花園 */
.pt_ake01	{ left: 42.78%; top: 21.13%; width: 21.11%; height: 25.25%; }	/* 『コンキリエ』 */
.pt_ake02	{ left: 29.38%; top: 59.13%; width: 21.11%; height: 25.25%; }	/* 愛冠岬 */
.pt_ake03	{ left: 71.88%; top: 21.25%; width: 21.11%; height: 25.25%; }	/* 琵琶瀬展望台 */


/*------------------------
Photo list
index.html
------------------------*/
ul.dpoint	{ margin: 1em auto; padding: 0; list-style: none; }
ul.dpoint	{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em; }
.dpoint li	{ flex: 1 0 20%; margin: 0; padding: 0; }
.dpoint li	{ background-position: center; background-size: cover; }
.dpoint a	{ position: relative; display: block; aspect-ratio: 1/1; min-width: 10em; padding: .5em; transition: .3s; }
.dpoint a:hover	{ background-color: rgba(0,0,0,.5); }
.dpoint span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .5em;
	color: #fff;
	text-shadow: 1px 1px 8px rgba(0,0,0,1);
	background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .6));
}
.ksr01	{ background-image: url(./ph/shitsugen.jpg); }	/* 釧路湿原 */
.ksr02	{ background-image: url(./ph/shitsugentenboudai.jpg); }	/* 湿原展望台 */
.ksr03	{ background-image: url(./ph/moo.jpg); }	/* 釧路フィッシャーマンズワーフ『MOO』(ムー) */
.ksr04	{ background-image: url(./ph/washo.jpg); }	/* 和商市場 */
.ksr05	{ background-image: url(./ph/hosooka.jpg); }	/* 細岡展望台 */
.ksr06	{ background-image: url(./ph/tancho.jpg); }	/* タンチョウ */
.akn01	{ background-image: url(./ph/tsurupark.jpg); }	/* 釧路市丹頂鶴自然公園 */
.akn02	{ background-image: url(./ph/akantsrucenter.jpg); }	/* 阿寒国際ツルセンター */
.akn03	{ background-image: url(./ph/akanko.jpg); }	/* 阿寒湖 */
.akn04	{ background-image: url(./ph/marimo.jpg); }	/* マリモ */
.akn05	{ background-image: url(./ph/onneto.jpg); }	/* オンネトー湖 */
.msh01	{ background-image: url(./ph/mashu.jpg); }	/* 摩周湖 */
.msh02	{ background-image: url(./ph/kussharo.jpg); }	/* 屈斜路湖 */
.msh03	{ background-image: url(./ph/io.jpg); }	/* 硫黄山 */
.msh04	{ background-image: url(./ph/bihoro.jpg); }	/* 美幌峠 */
.msh05	{ background-image: url(./ph/taihou.jpg); }	/* 川湯温泉 */
.nem01	{ background-image: url(./ph/furen.jpg); }	/* 風連湖 */
.nem02	{ background-image: url(./ph/shunkunitai.jpg); }	/* 春国岱 */
.nem03	{ background-image: url(./ph/meiji.jpg); }	/* 明治公園 */
.nem04	{ background-image: url(./ph/nosappu.jpg); }	/* 納沙布岬 */
.nem05	{ background-image: url(./ph/kurumaishi.jpg); }	/* 車石 */
.sbt01	{ background-image: url(./ph/salmonpark.jpg); }	/* 標津サーモンパーク */
.sbt02	{ background-image: url(./ph/kujirano.jpg); }	/* クジラの見える丘公園 */
.sbt03	{ background-image: url(./ph/kumanoyu.jpg); }	/* 熊の湯 */
.sbt04	{ background-image: url(./ph/kaiyodai.jpg); }	/* 開陽台 */
.sbt05	{ background-image: url(./ph/milkroad.jpg); }	/* ミルクロード */
.sbt06	{ background-image: url(./ph/yumenomori.jpg); }	/* 北海道立ゆめの森公園 */
.sbt07	{ background-image: url(./ph/todowara.jpg); }	/* トドワラ */
.sbt08	{ background-image: url(./ph/notsuke.jpg); }	/* 野付半島原生花園 */
.ake01	{ background-image: url(./ph/konkirie.jpg); }	/* 厚岸味覚ターミナル『コンキリエ』 */
.ake02	{ background-image: url(./ph/aicup.jpg); }	/* 愛冠岬 */
.ake03	{ background-image: url(./ph/biwase.jpg); }	/* 琵琶瀬展望台 */