@charset "Shift_JIS";

/* **************************************************

Name: popup.css

Description: CSS for PopUp Window

Create: 2016.11.04
Update: 

Copyright 2016 Hitachi, Ltd.

***************************************************** */


/* usecase
=========================================================================================== */
/*modal window*/
#modal-contents {
	position: fixed;
	background-color: #fff;
	z-index: 100;
	display: none;
	width: 768px;
}

#modal-contents iframe {
	width: 100%;
	overflow-y: scroll;
}

#modal-contents p.noframe {
	max-width : 935px;
	margin-left: auto;
	margin-right: auto;
	width: calc(100% - 30px);
	height: 25px;
	padding: 15px;
}

#modal-overlay {
	z-index: 10;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-color: #000;
	-ms-filter: "alpha(opacity=75)";
	filter: alpha(opacity=75);
	opacity: 0.75;
}

#modal-close .CloseButtonStyle a:focus {
	outline-style: none;
}

/* PopUp Pages
=========================================================================================== */
#PopUpContents #Contents {
	min-width: 720px;
}

#PopUpContents .GridSet {
	width: 720px;
}


/* 通常モジュールより大きめに設定されているので、コメントアウト
#PopUpContents .PageTitleStyle3 h1 {
	position: relative;
}

#PopUpContents .PageTitleStyle3 h1 img {
	width: 100%;
}

#PopUpContents .PageTitleStyle3 h1 span {
	position: absolute;
	top: 35%;
	left: 0;
	display: block;
	width: 100%;
	padding: 15px 30px 8px;
	box-sizing: border-box;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff); 
	background-color: rgba(255, 255, 255, 0.3);
	text-align: center;
	font-size: 250%;
}
#PopUpContents .PageTitleStyle3 h1 span:not(:target){
	filter: none;
}
#PopUpContents .PageTitleStyle3 h1 span.TwoRow {
	top: 30%;
}

#PopUpContents .PageTitleStyle3 h1 span strong {
	display: inline-block;
	line-height: 110%;
}

#PopUpContents h3 {
	font-size: 105%;
}

#PopUpContents .TextStyle1,
#PopUpContents .ListStyle1,
#PopUpContents .LinkListStyle1,
#PopUpContents .LinkListStyle5 {
	font-size: 100%;
}

#PopUpContents .Column2 {
	width: 353px;
	margin-left: 14px;
}
#PopUpContents .Column2.FirstItem {
	margin-left: 0;
}

#PopUpContents .Column2 .ImgOnlyStyle {
	font-size: 76%;
}

*/


/* for Responsive Web Design
=========================================================================================== */
@media screen and (max-width: 994px) {
	/*modal window*/
	.JS #modal-contents {
		width: calc(100% - 30px);
		max-width: 768px;
	}

	/*PopUp Pages*/
	.JS #PopUpContents #Contents {
		min-width: 290px;
		padding-left: 0;
		padding-right: 0;
	}

	.JS #PopUpContents .GridSet {
		width: auto;
		max-width: 720px;
		margin: 0 auto;
	}

	.JS #PopUpContents .Grid4 {
		padding-left: 0;
	}

	.JS #PopUpContents .Grid4 .Column2 {
		float: left;
		width: 50%;
		margin: 0;
	}
}

@media screen and (max-width: 767px) {
	.JS #PopUpContents .PageTitleStyle3 h1 span {
		padding: 15px 20px 8px;
		font-size: 210%;
	}
}

@media screen and (max-width: 579px) {
	.JS #PopUpContents .PageTitleStyle3 h1 span {
		padding: 10px 15px 5px;
		font-size: 130%;
	}
	.JS #PopUpContents .PageTitleStyle3 h1 span.TwoRow {
		padding-bottom: 3px;
	}

	.JS #PopUpContents .Grid4 .Column2 {
		float: none;
		width: auto;
	}

	.JS #PopUpContents .Grid4 .Column2.FirstItem .ListStyle1 {
		margin-bottom: 0;
	}
}

@media screen and (max-width: 399px) {
	.JS #PopUpContents .PageTitleStyle3 h1 span {
		padding: 8px 10px 3px;
		font-size: 110%;
	}
	.JS #PopUpContents .PageTitleStyle3 h1 span.TwoRow {
		padding-bottom: 1px;
	}
}