@charset "utf-8";

h1 {
	color: #c00;
	margin: 0 0 10px 0;
}
ruby > rt {
	font-size: 10px;
}


/* ヘッダー黒帯の折りたたみ */
.header
{
	transition: all 1s ease 0s;
}
.header:not(.close)
{
	height: 88px;
}
.header.close
{
	height: 5px;
}



#copyright
{
	color: #aaa;
	font-size: 14px;
	margin-top: 60px;
	margin-bottom: 30px;
	text-align: center;
}


#mt_desc {
	border-collapse: collapse;
}
#mt_desc,
#mt_desc th,
#mt_desc td {
	border: 1px solid #555;
}
#mt_desc th,
#mt_desc td {
	font-size: 14px;
	padding: 1px 10px;
}
#mt_desc th{	background: #eee;	}
#mt_desc td{	background: #fff;		}


#chip_container {
	position: relative;
}
#chip_container > #chip {
	position: absolute;
	background: #f00;
	border-radius: 50%;
	border: 3px solid #000;
	width: 10px;
	height: 10px;
}
#chip_container > #text {
	color: #ff0;
	text-shadow: 1.5px 1.5px 1.5px #000;
}


:root {
	--bg_color_mt: #fdfdf0;
}
.photo_and_text {
	background: var(--bg_color_mt);
	margin: 25px 0;
	padding: 15px;
	border-radius: 4px;
	box-shadow: 3px 3px 6px #777;
}
.photo_and_text td.text {
	padding: 10px 0 0 20px;
	font-size: 16px;
	
	width: calc(50%);
	position: relative;
	vertical-align: top;
}
.photo_and_text td.text div:has(.iine) {
	position: absolute;
	bottom: 0;
	right: 0;
}

details.trail {
	background: var(--bg_color_mt);
	border-radius: 4px;
	margin-top: 30px;
	box-shadow: 2px 2px 6px #777;
}
details.trail > summary {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	color: #ff0;
	text-shadow: 1px 1px 2px #000;
	background: #777 !important;
	list-style: none;
	padding: 10px 15px;
}
details.trail > p {
	text-align: center;
	padding-top: 20px;
}


iframe[src^="https://www.yamareco.com/modules/yamareco/include/ymap_iframe"]{
	height: 460px;
}

.link_to_googlemap {
	text-decoration-line: none;
}


.tooltip { /* 補足説明するテキストのスタイル */
	position: relative;
	cursor: pointer;
	padding: 0 5px;
	font-size: 0.9em;
	color: #4682b4;
} 
.balloon { /* ツールチップのスタイル */
	visibility: hidden; /* ツールチップを非表示に */
	width: 350px; /* 横幅 */
	position: absolute;
	top: 80%; /* Y軸の位置 */
	left: 50%;
	transform: translateX(-50%);
	margin-top: 15px; /* テキストとの距離 */
	padding: 12px;
	/*border: 1px solid #000;*/
	box-shadow: 1px 1px 3px #000;
	border-radius: 10px; /* 角の丸み */
	background-color: #FFFCDF; /* ツールチップの背景色 */
	color: #000;
	font-size: 1.0em;
	font-weight: normal;
	text-align: left;
	opacity: 0; /* 不透明度を0％に */
	z-index: 1;
	/*transition: 0.5s all;  マウスオーバー時のアニメーション速度 */
} 
.balloon::before { /* 吹き出しの「しっぽ」のスタイル */
	content: "▲";
	color: #FFFCDF;
	font-size: 2.0rem;
	text-align: center;
	text-shadow: 1px -1px 0px #000;
	top: -2.0rem;
	width: 0;
	height: 0;
	/*
	border: 10px solid transparent;
	border-bottom: 12px solid #FFFCDF;	*/ /* 最後の値は「ツールチップの背景色」と合わせる */
	position: absolute;
	bottom: 99%;
	left: calc(50% - 2.5rem / 2);
	transform: translateX(-50%);
} 
.tooltip:hover .balloon { /* マウスオーバー時のスタイル */
	visibility: visible !important; /* ツールチップを表示 */
	top: 150%; /* Y軸の位置 */
	opacity: 1; /* 不透明度を100％に */
	transition: 0.5s all;
}