/* CSS */
/* 全体 */
body
{
	margin: 0px;
	background-color: rgb(41, 41, 41);
    user-select: none;
       overflow: hidden;
}

h1{
	text-align: center;
}

#wrapper{
	margin: 0px auto 0px auto;
	width: 100%; 
}

#msg{
	margin: 0px; 
	text-align: center;
}

#canvas{
	width: 100%; 
	height: 95.2vh;
	object-fit:cover;
}
/* ヘッダー */
.help_area
{
	position: absolute;
	width: 450px;
	height: 75px;
	background-color: #536E83;
	font-size: 25px;
	text-align: center;
	line-height: 75px;
    right: 0;
}
.home-icon
{
    border-radius: 50%;
    position: absolute;
	width: 75px;
	height: 75px;
	background-color: #536E83;
	text-align: center;
    line-height: 95px;
    top: 10px;
    left: 10px;
}
.home-icon img
{
    width: 35px;
    margin-top: 25%;
}
.help_area div
{
    text-decoration:underline;
	color:#ffffff;
}
.help_area div img
{
	width: 30px;
}

#help-id-input
{
    width: 332px;
    height: 45px;
    font-size: 30px;
    background-color: #D9D9D9;
    border: solid 2px black;
    text-align: center;
    border-radius: 5px;
}
#id-not-found
{
    color: red;
}
.not-found-none
{
    display: none;
}


/* モーダルの部分 */
.modal-title
{
	font-size: 28px;
	margin-bottom: 10px;
}
.modal-url,.help-modal-url
{
	text-align: center;
	margin-top: 20px;
    margin-bottom: 20px;
}
.help-modal-url
{
    margin-left: 65px;
    display: flex;
}
.modal-url a ,.help-modal-url a
{
	padding: 13px 50px;
	background-color: #8BA7BD;
	text-decoration: none;
    color: #000000;
    font-size: 20px;
    width: 160px;
    border-radius: 5px;
}
.help-modal-url p
{
	background-color: #8BA7BD;
	text-decoration: none;
    color: #000000;
    font-size: 20px;
    width: 160px;
    padding-top: 10px;
    border-radius: 5px;
}
#js-modal-close, .help-modal-url button
{
	padding: 13px 45px;
	background-color: #D9D9D9;
    font-size: 20px;
    border: none;
    width: 160px;
    margin-left: 20px;
    border-radius: 5px;

}
#js-result{
	margin-bottom: 10px;
	font-size: 28px;
}
.help_btn_table
{
    margin: 20px auto 5px;
}
.help-btn_td
{
    width: 160px;
    height: 50px;
    font-size: 20px;
    vertical-align:middle;
    padding: 0px 10px;

}
.help-btn_td p, a
{
    text-decoration: none;
    color: #000;
    border-radius: 5px;
}
.blue
{
    background-color: #8BA7BD;
    padding: 12px 60px;
}
.gray
{
    background-color: #D9D9D9;
    padding: 12px 50px;
}
/* モーダル全体のスタイル */
.modal {
    background-color: #3f3f3f;
    /* 画面全体に */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 前面表示 */
    z-index: 999;
    /* 子要素を中央配置 */
    display: flex;
    align-items: center;
	text-align: center;
    justify-content: center;
}
/* モーダル内ウィンドウのスタイル */
.modal-content {
    width: 515px;
    max-width: 700px;
    max-height: 500px;
    background-color: #fefefe;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 20px;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.75);
    font-size: 1rem;
    /* コンテンツがウィンドウからはみ出した場合にスクロールバーを表示 */
    overflow-y: auto;
}


.close:hover {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* フェードイン（アニメーション前） */
.fade-in {
    transform: translateY(100%); /* 一旦非表示にしておく */
}

/* ボタンが押されたら付与するクラス */
.is-show {
    /* 縦方向の移動 */
    transform: translateY(0);
    transition: transform 0.5s ease-in-out; /* アニメーション時間、開始前後の時間 */
}
.fede_out
{
	transform: translateY(100%);
    transition: transform 0.5s ease-in-out; /* アニメーション時間、開始前後の時間 */
}