@charset "UTF-8";
/* *******************************************************
 * LINK MODAL CSS
******************************************************** */
/* --------------------------------------------
 * Base
--------------------------------------------- */
.overlay {
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	opacity: 0;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3000;
	transition: opacity 0.3s ease;
}

.overlay.in {
	opacity: 1;
}

/* --------------------------------------------
 * modal
--------------------------------------------- */
#pageModal {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5000;
	opacity: 0;
	-ms-transform: scale(0);
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}

#pageModal.in {
	background-color: rgba(255,255,255,0.7);
	opacity: 1;
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
}

#pageModal.open {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

#pageModal .modal {
	margin: 60px 43px 30px 43px;
	padding-top: 17px;
	background-color: #231815;
	max-width: -webkit-fill-available;
	width: 100%;
	min-height: 230px;
	position: relative;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}

#pageModal .modal .close {
	width: 17px;
	height: 17px;
	cursor: pointer;
	position: absolute;
	top: 3px;
	right: 3px;
	z-index: 1;
	background-image: url(../img/popup_close.png);
	background-size: 13px 13px;
	background-repeat: no-repeat;
	background-position: center;
}

#pageModal .modal .close:hover {
	background-color: #777;
	color: #fff;
}

#pageModal .modal #headUti {
	position: absolute;
	top: 17.5px;
	width: calc(100% - 33.5px - 33.5px);
	margin: 0 33.5px 0 33.5px;
}

#pageModal .modal #headUti #modalarea_star {
	float: right;
	margin-right:11px;
}

#pageModal .modal #headUti .newPage {
	border: none;
	background-color: transparent;
	line-height: 35px;
	color: #717171;
	cursor: pointer;
	position: relative;
}

#pageModal .modal #headUti .nowprint{
	float: right;
	border: none;
	background-color: transparent;
	cursor: pointer;
	position: relative;
	width: 34px;
	height: 34px;
}

#pageModal .modal #headUti .nowprint:after,
#pageModal .modal #headUti .newPage:after {
	content: '';
	background-repeat: no-repeat;
	background-size: 34px;
	border-radius: 20px;
	width: 34px;
	height: 34px;
	position: absolute;
	top: 0;
}


#pageModal .modal #headUti .nowprint:hover,
#pageModal .modal #headUti .newPage:hover {
	color: #4ca5ff;
}

#pageModal .modal #headUti .nowprint:hover:after {
    background-image: url(../img/print_mouseover.png);
}
#pageModal .modal #headUti .newPage:hover:after {
    background-image: url(../img/open_new_window_mouseover.png);
}

#pageModal .modal #headUti .newPage span {
	white-space: nowrap;
	padding-left: calc(5.5px + 35px);
}

#pageModal .modal #headUti .nowprint:after {
	background-image: url(../img/print.png);
	right: 0;
}

#pageModal .modal #headUti .newPage:after {
  background-image: url(../img/open_new_window.png);
	left: 0;
}

#pageModal .modal .header {
	margin: 0px 28px 0 10px;
}

#pageModal .modal .header .tabs {
	/* min-width: 650px; */
	width: 100%;
	white-space: nowrap;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	height: 29.5px;
}

#pageModal .modal .header .tabs .tab {
	margin: 0 7px 0 10px;
	background-image: linear-gradient(#cacaca, #c8c8c8 80%, #999999);
	display: inline-block;
	height: 30px;
	/* min-height: 25px; */
	min-width: 24px;
	max-width: 140px;
	width: 140px;
	line-height: 30px;
	cursor: pointer;
	position: relative;
	z-index: 0;
	-ms-flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

#pageModal .modal .header .tabs .tab:before,
#pageModal .modal .header .tabs .tab:after {
	content: '';
	background-image: linear-gradient(#cacaca, #c8c8c8 80%, #999999);
	width: 15px;
	height: 100%;
	display: inline-block;
	position: absolute;
	top: 0px;
	z-index: -1;
	box-sizing: border-box;
	
}

#pageModal .modal .header .tabs .tab:before {
	border-top-left-radius: 3px;
	left: -8px;
	-ms-transform: skewX(0deg);
	-webkit-transform: skewX(0deg);
	transform: skewX(0deg);
	height: 30px;
}

#pageModal .modal .header .tabs .tab:after {
	border-top-right-radius: 3px;
	right: -8px;
	-ms-transform: skewX(0deg);
	-webkit-transform: skewX(0deg);
	transform: skewX(0deg);
	height: 30px;
}

#pageModal .modal .header .tabs .tab + .tab {
	padding-right: 8px;
}

#pageModal .modal .header .tabs .tab span {
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-size: 14px;
}

#pageModal .modal .header .tabs .tab .span-symbol {
	display: inline;
}

#pageModal .modal .header .tabs .tab .tabclose {
	width: 13px;
	height: 13px;
	position: absolute;
	top: 9px;
	right: -3px;
	z-index: 1;
	background-image: url(../img/popup_tab_close.png);
	background-size: 13px 13px;
	background-repeat: no-repeat;
	background-position: center;
}

#pageModal .modal .header .tabs .tab.active .tabclose {
	background-image: url(../img/popup_tab_close_white.png);
}

#pageModal .modal .header .tabs .tab .tabclose:hover {
	background-color: #777;
	color: #fff;
}

#pageModal .modal .header .tabs .tab.active {
	margin-bottom: -1px;
	background-image: linear-gradient(#3d79c4, #3d79c4);
	z-index: 1;
	color: #fff;
}

#pageModal .modal .header .tabs .tab.active:before,
#pageModal .modal .header .tabs .tab.active:after {
	border-color: #3d79c4;
	background-image: linear-gradient(#3d79c4, #3d79c4);
}

#pageModal .modal .modalContents {
	height: 100%;
	background-color: #fff;
	display: -ms-flexbox;
	display: flex;
	display: -webkit-flex;
	padding	: 1px 9px 18px 0;
	border-top: 2.5px solid #3d79c4;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

#pageModal .modal .modalContents .tabContents {
	min-width: 100%;
	max-width: 100%;
	display: none;
	position: relative;
	overflow-y: scroll;
	overflow-x: auto;
	flex: 1 0 100%;
}

#pageModal .modal .modalContents .tabContents.active {
	display: block;
}

#pageModal .modal .modalContents .tabContents .page {
	padding: 0 51.5px 0 33.5px;
}

#pageModal .modal .modalContents main {
	padding-top: 0;
	margin-top: 0;
}

#pageModal .modal .modalContents main>h2:first-child {
	padding-top: 70px;
	margin-top: 0;
}

body.openModal #wrapper {
	width: 100%;
	min-width: 1000px;
	max-width: 1600px;
	position: fixed;
}

#pageModal .modal .modalContents .headingList {
	margin-top: 16px;
}

#pageModal .modal .modalContents .headingList li:before {
	content: url("../img/bullet_shikaku.png");
	position: absolute;
}

#pageModal .modal .modalContents .headingList .sectionHeading {
	margin-left: 2em;
	line-height: 1em;
}

#pageModal .modal .modalContents .headingList p {
	margin-bottom: 6px;
}

#pageModal .modal .modalContents .headingList li  {
		line-height: 1em;
}

#pageModal .modal .modalContents .subHeading {
	margin-left: 40px;
}

/* PC表示のみ */
@media (min-width:769px) {
	#pageModal .modal .modalContents {
		height: calc(-30px + 100%);
	}

	#pageModal .modal .header .tabs {
		width: calc(-124px + 98vw);
	}
}

/* モバイルのみ */
@media screen and (max-width: 768px) {
	#pageModal .modal {
		margin: 22.5px 5px;
		width: 98%;
	}

	#pageModal .modal .header {
		margin: 0 0 0 5.5px;
	}

	#pageModal .modal .modalContents {
		padding-bottom: 9px;
	}

	#pageModal .modal .modalContents .tabContents .page {
    padding: 0 8.5px 0 7.5px;
	}

	#pageModal .modal #headUti {
		top: 8px;
		width: calc(100% - 7.5px);
		margin: 0 0 0 7.5px;
	}
	
	#pageModal .modal #headUti .nowprint {
		display: none;
	}

	#pageModal .modal .header .tabs {
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
	}

	#pageModal .modal .header .tabs .tab {
		width: 140px;
		min-width: 140px;
	}

	#pageModal .modal .header .tabs .tab + .tab {
		padding-right: 13px;
	}

	#pageModal .modal #headUti #modalarea_star {
		margin-right: 0px;
	}

}

/**********************
Safari6-10
**********************/
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ @media {
  #pageModal .modal {
        height: 90vh;
  }
}}

/**********************
Safari10.1 only
**********************/
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {

  #pageModal .modal {
        height: 90vh;
  }
}}