@charset "Shift_JIS";

/* **************************************************

Name: floating_banner.css

Description: 閉じるボタン付き追随ウィンドウ（フローティングバナー）

***************************************************** */


/* [-] 追随ウィンドウ*/
.DocWindow{
	width:280px;
	padding:0;
	position:fixed;
	right:0;
	bottom:auto;
	z-index:10;
	box-sizing:border-box;
	border: 2px solid #c00000;
	background-color:#fff;
	opacity: 0;
}

.DocWindow.active {
	z-index: 100;
	opacity: 1;
}

.DocWindow .close a{
	display:block;
	width:10px;
	height:10px;
	position:absolute;
	top:5px;
	right:5px;
	text-decoration:none;
	border:1.5px solid #fff;
	background-color:#c00000;
	padding:3px;
	color:#fff;
	font-size:20px;
	line-height:1em;
}

.DocWindow h2 {
	display: block;
	position: static;
	background:none !important;
	border:none;
	font-size: 100%;
	margin:0 !important;
	padding:0 !important;
}
.DocWindow h2:before {
	content:none;
}
.DocWindow h2 span{
	color:#fff;
	text-align:center;
	font-weight:normal;
	font-size:90%;
	line-height: 80%;
	background-color:#2a2a2a;
	padding-right: 35px;
}
.DocWindow h2 span.OnLine{
	background-color:#AD001D;
}
.DocWindow h2 span.OnDemand{
	background-color:#c00000;
}

.DocWindow a.floatIMG:hover {
	opacity: .8;
}

.DocWindow a:link {
	text-decoration: none;
}

.DocWindow a:active{
	text-decoration: none;
}

DocWindow a:visited {
	text-decoration: none;
}

.DocWindow a.floatIMG img {
	width:100%;
}

/* [-] レスポンシブ対応
=========================================================================================== */

/* for 995px -
=========================================================================================== */
@media screen and (min-width: 995px) {
.DocWindow{
top:300px !important;
}
}

/* for - 994px
=========================================================================================== */
@media screen and (max-width: 995px) {
.DocWindow{
top:280px !important;
}
}

/* for - 768px
=========================================================================================== */
@media screen and (max-width: 767px) {
.DocWindow{
top:400px !important;
}

.DocWindow h2 {
    width: 300px;
    margin:0 0 0 auto;
}

}

/* for - 580px
=========================================================================================== */
@media screen and (max-width: 579px) {
.DocWindow{
    margin-left:-15px;
top:360px !important;
}
.DocWindow h2 {
    width: 100%;
    margin:0;
}

}

/* for - 400px
=========================================================================================== */
@media screen and (max-width: 399px) {
.DocWindow{
top:400px !important;
}