@charset "utf-8";
/* ===================================================================
 *ツールチップのCSS
 * =================================================================== */

.invisible{
	display: none;
}

a.clickToolTip{
	font-size: 12px;
}

p.toolTip{
	margin: 0;
	padding: 10px;
	width: 250px;
	min-height: 30px;
	background-color: #336600;
	border-radius: 5px;
	-moz-border-radius: 5px;
	color: #FFF;
	position: absolute;
	top: 100px;
	left: 20px;
	border-right: 20px solid #336600;
	font-size:80%;
	opacity: 0.9;
}

/* ===================================================================
 *ポップアップのCSS
 * =================================================================== */

#popup-background{
    position:fixed; /* 位置の固定 */
    top: 0; /* 表示位置 */
    left: 0; /* 表示位置 */
    height: 100%; /* 画面全体に表示 */
    width: 100%; /* 画面全体に表示 */
    background:#000; /* 背景色 */
    opacity: 1.00; /* 透明度 */
    margin: 0; /* 余白の削除 */
    padding: 0; /* 余白の削除 */
    z-index:1000; /* 要素のz座標 */
}

/*  5/16  画像＋キャプションに対応するようID変更 */
#items{
    position:fixed; /* 位置の固定 */
    top: 50%; /* 表示位置(真ん中に表示) */
    left: 50%; /* 表示位置(真ん中に表示) */
    margin: 0; /* 余白の削除 */
    padding: 0; /* 余白の削除 */
    z-index:1001; /* 要素のz座標 */
    max-height: 80%;
    max-width: 100%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

#caption {
    color: white;
    text-align: center;
}



/* ===================================================================
 *全文HTML用
 * =================================================================== */

.panelWrapper .panel {
	margin-top: 30px;
	padding: 0 10px;
}

.allHtml {
	background-color: #fff;
}

.allHtml .section {
	margin-bottom: 2em;
}
.allHtml h2.main-title {
	font-size: 113%;
	font-weight: bold;
	margin-bottom: 6px;
}
.allHtml .fig.panel {
	width: 90%;
	text-align: center;
	margin: 20px auto 10px;
}
.allHtml .fig.panel a {
	display: block;
}
.allHtml .fig.panel a.popupimg {
	width: 30%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.allHtml .fig.panel img {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
    zoom: 0.7;
}

/*===============================================
タブレット用
===============================================*/
@media screen and (max-width:1000px){

    .allHtml .fig.panel a.popupimg {
        width: 30%;
        text-align: center;
    }

    p.toolTip{
        width: 220px;
    }

}

/*===============================================
スマホ用
===============================================*/
@media screen and (max-width:600px){


    #popup-background {
        width: 100%;
    }

    p.toolTip{
        width: 180px;
    }

    .allHtml .fig.panel a.popupimg {
        width: 50%;
        text-align: center;
    }

}