#popup_container {
	font-family: box-sizing: border-box;
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 1em;
	min-width: 300px; /* Dialog will be no smaller than this */
	max-width: 600px; /* Dialog will wrap after this width */
	background: #FFF;
	border: solid 1px #0C60D1;
	color: #333;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#popup_title {
	font-size: 1.25em;
	font-weight: bold;
	text-align: center;
	line-height: 1.75em;
	color: #0C60D1;
	cursor: default;
	padding: 1em 0 0 0;
	margin: 0em;
}

#popup_content {
	background: 16px 16px no-repeat url(images/info.gif);
	padding: 1em 1.5em;
	margin: 0em;
}

/*
 * .alert .confirm の順を変更
 *　ie6から閲覧した場合に確認時のアイコンがinfoになってしまうので
 *　importantを表示させる為の対応
 *　詳細は以下サイトを参照
 * http://css-el.seesaa.net/article/108157845.html
 * http://css.evol-ni.com/example/ie_bug_01/index.html
 */
#popup_content.confirm {
	background-image: url(images/important.gif);
}

#popup_content.alert {
	background-image: url(images/info.gif);
}

#popup_content.prompt {
	background-image: url(images/help.gif);
}

#popup_message {
	padding-left: 48px;
}

#popup_panel {
	text-align: center;
	margin: 1em 0em 0em 1em;
	display: flex;
    justify-content: center;
}

#popup_prompt {
	margin: .5em 0em;
}

#popup_ok {
	background-color: #2366c3;
	display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    text-align: center;
	color: #fff;
	border-radius: 0.8rem;
	margin-right: 0.5rem;
	border-bottom-color: none;
}


#popup_ok:hover {
    background-color: #3985eb;
}


#popup_cancel {
	background-color: #fff;
    border: 0.1rem solid #ccc;
	display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    text-align: center;
	color: #333;
	border-radius: 0.8rem;
}


#popup_cancel:hover {
    color: #0c60d1;
    border-color: #0c60d1;
}


@media screen and (max-width: 767px) {
#popup_container {
	max-width: 90%; /* Dialog will wrap after this width */
	
}
	
	
}