@charset "UTF-8";

div#di-external-dialog-wrapper{
	position:absolute;
	z-index:100;
	top:30px;
	width:100%;
	/* background: url("/common/images/bg_main.png"); */
	background-color: #fff;
}

div#di-external-dialog {
	display:block;
	border:none;
	border-radius:6px;
	height:700px;
	width:1000px;
	margin:0 auto;
	box-shadow:6px 6px 6px #444;
	background-color: #fff;
}

div.di-external-dialog-toolbar {
	text-align: right;
	padding: 4px;
}


/** 外部のQAサイトへの遷移 **/
div.di-external-popup-banner-wrapper {
	background-color: #e1e9f6;
	padding: 0.7em 1em 0.7em 1em;
	margin: 0 auto 1.5em auto;
	display: flex;   
	border-radius: 0.5em;
	width: 94%;
}
h2.di-external-popup-banner {   
   font-size: 1.3em;
   text-align: center;   
   width: 100%;
   
}

div.di-external-popup-caution {
	text-align: center;
	font-size: 1.15em;
	padding: 0.2em 1em 0.2em 1em;
}

div.di-external-popup-caution .accent {
	font-size: 1.3em;
	margin-top: 1.5em;
	margin-bottom: 2em;
}

div.di-external-popup-navigation-container {
	margin: 0 auto 1.8em auto;
	display: flexbox;
	width: 90%;
}

div.di-external-popup-navigation-container a.btn-primary {
	display: block;
    padding: 18px 0;
    border: 2px solid #0070c0;
    border-radius: 8px;
    color: #fff;    
	font-size: 1.6em;
    line-height: 1;
    text-align: center;
    text-decoration: none !important;
	background-color: #0070c0;
	margin-bottom: 0.8em;
	width: 100%;	
	min-height: 55px;
}
div.di-external-popup-navigation-container a.btn-primary.narrow {
	min-height: 25px;
	padding: 10px 0 6px 0;
}

div.di-external-popup-navigation-container a.btn-primary:hover {
	color: #fff;
	background-color: #2090f0;
}

div.di-external-popup-navigation-container a.btn-outline {
	display: block;
    padding: 10px 0;
    border: 2px solid #0070c0;
    border-radius: 8px;
    color: #0070c0;    
	font-size: 1.2em;
    line-height: 1;
    text-align: center;
    text-decoration: none !important;
	width: 100%;
	min-height: 55px;
}
div.di-external-popup-navigation-container a.btn-outline:hover {
	background-color: #e1e9f6;	
}

div.di-external-popup-navigation-container a.btn-outline.narrow {
	min-height: 35px;
	padding: 10px 0 6px 0;
	font-size: 1.6em;
	min-height: 25px;
}

div.di-external-popup-navigation-container a.btn-outline > span.bt-description {
	display:block;
	padding-top: 0.3em;
	font-size: 0.8em;    
}

@media screen and (min-width:521px) {


	div.di-external-popup-navigation-container {
		display: flex;
		width: 80%;		
		max-width: 520px;
		margin: 0 auto auto auto;
	}

	div.di-external-popup-navigation-container a.btn-primary {
		width: 240px;
		padding: 18px 0 10px 0;
		margin: 0 auto 0 0;
	}
	div.di-external-popup-navigation-container a.btn-primary.narrow {
		width: 240px;
		padding: 10px 0 6px 0;
		margin: 0 auto 0 0;
	}
			
	div.di-external-popup-navigation-container a.btn-outline {
		margin: 0 0 0 auto;
		width: 240px;
	}
	div.di-external-popup-navigation-container a.btn-outline.narrow {
		margin: 0 0 0 auto;
		padding: 10px 0 6px 0;
		width: 240px;
	}
}