@charset "utf-8";

/* .overflow
------------------------------------------------------*/
.overflow { overflow: auto; }
.overflow-x { overflow-x: auto; }
.overflow-y { overflow-y: auto; }

/* .sec & .baseWidth
------------------------------------------------------*/
#main,
#mainInner {
	position: relative;
    z-index: 0;
}
.sec { padding: 4em 0 10em; }
.sec:first-of-type { padding-top: 0; }
.sec.gray { background: #F6F6F6; }
.secBox { padding-bottom: 4em; }

.baseWidth {
	max-width: 1080px;
	margin: 0 auto;
}
.flex { display: flex; }
.flex.juCenter { justify-content: center; }
.flex.alCenter { align-items: center; }
.flex.column3 { justify-content: space-between; }
.flex.column3 .box {
	width: calc(33.333% - 2em);
	margin-bottom: 2em;
}
.flex.column3 .pic {
	margin-bottom: 1em !important;
	text-align: center;
}

.flex.border,
.borderBox {
	padding: 2em;
	border: 10px solid #DDD;
}

@media only screen and (max-width:1080px) {
	.sec {
		padding-right:1em;
		padding-left:1em;
	}
	.flex.column3 { justify-content: space-between; }
	.flex.column3 .box {
		width: calc(33.333% - 0.5em);
	}
	.flex.border,
	.borderBox {
		border-width: 5px;
	}

}
@media only screen and (max-width:768px) {
	.sec {
		min-width: 320px;
		padding:3em 1em;
	}
	.secBox { padding-bottom: 2em; }
	.flex.column3 {
		flex-direction: column;
	}
	.flex.column3 .box {
		width: 100%;
	}
	.flex.border,
	.borderBox {
		padding: 1em;
	}
}

/* txt color
------------------------------------------------------*/
.blue { color: #077fad !important; }

/* .headline
------------------------------------------------------*/
.secHead {
	display: flex;
	align-items: center;
	min-height: 50px;
	margin-bottom: 1em;
	padding: 0.25em 20px;
	background: #EEE;
	background: -moz-linear-gradient(top,  #EEEEEE 0%, #F6F6F6 100%);
	background: -webkit-linear-gradient(top,  #EEEEEE 0%, #F6F6F6 100%);
	background: linear-gradient(top,  #EEEEEE 0%, #F6F6F6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EEEEEE', endColorstr='#F6F6F6',GradientType=0 );
	border-bottom: 2px solid #CCC;
	line-height: 1.4;
	font-size: 1.5em;
	font-weight: 500;
}
.secHead:before {
	content: "\f0d7";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 0.5em;
	color:#077fad;
}
.subHead {
	display: flex;
	align-items: center;
	margin-bottom: 1em;
	padding: 0.25em 1em 0.25em 0;
	border-bottom: 2px solid #DDD;
	font-size: 1.3em;
	font-weight: 500;
}
.subHead:before {
	content: "■";
	margin-right: 0.5em;
	font-size: 0.875rem;
	color: #CCC;
}

.headline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	margin-bottom:1em;
	line-height: 1.6;
	font-size: 1.5em;
	font-weight: 500;
}
.headline.center {
	justify-content: center;
}
.headline.middle {
	margin-bottom: 1em;
	font-size: 1.3em;
}
.headline.small {
	margin-bottom: 0.5em;
	font-size: 1.1em;
}
.headline .pf {
	display: none;
	width: 100%;
	margin-bottom: 0.5rem;
}
.headline .pf span,
.headline .pf .tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	margin-right: 0.5em;
	padding: 0 1em;
	background: #888;
	font-size: 0.875rem;
	color: #FFF;
}
.headline .pf .sta { background: #077fad; }
.headline .pf .s3d { background: orange; }
.headline .pf .nano { background: green; }
.headline .pf .tag {
	margin-left: 0.5em;
	border: 1px solid #888;
	background: none;
	color: #888;
}

.headline .cap {
	margin-bottom: 1em;
	font-size: 1rem;
}
.headline .num {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	background: #333;
	line-height: 1;
	font-size: 1.4rem;
	color: #FFF;
}
@media only screen and (max-width:768px) {
	.secHead {
		min-height: 0;
		padding: 0.5em 0.8em;
		line-height: 1.6;
		font-size: 1.2em;
	}
	.secHead:before {
		margin-right: 0.6em;
	}
	.headline {
		font-size: 1.4em;
	}
	.headline.middle {
		font-size: 1.2em;
	}
	.headline.small {
		font-size: 1em;
	}
	
	.headline br { display: none; }
	.headline .pf span {
		height: 20px;
		font-size: 12px;
	}
	.headline .cap {
		margin-bottom: 1em;
		font-size: 12px;
	}
}

/* .bnrVpTrial
------------------------------------------------------*/
.bnrVpTrial {
	padding: 1em;
	text-align: center;
}
.bnrVpTrial a {
	display: inline-block;
	border: 1px solid #FFF;
	background: #000;
}
.bnrVpTrial img { transition: 0.3s; }
.bnrVpTrial a:hover img { opacity: 0.6; }

/* .new
------------------------------------------------------*/
.new {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 18px;
	margin-right: 5px;
	padding: 0 0.5em;
	background:#077fad;
	font-size: 12px;
	color:#FFF;
}
/* .pic
------------------------------------------------------*/
.pic.dummy {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 2em 0;
	padding: 2em;
	background: #EEE;
	color: #888;
}
.pic:empty {
	padding-top: 60%;
	background: #EEE;
}

/* pic side txt ver2
------------------------------------------------------*/
.imgTxt { display: flex; }
.imgTxt + .imgTxt { margin-top: 1em; }
.imgTxt.border {
	padding: 2em;
	border: 1px solid #DDD;
}
.imgTxt.alignC { align-items: center; }
.imgTxt .pic {
	margin-right: 1em;
	text-align: center;
}

@media only screen and (max-width:768px) {
	.imgTxt { display: block; }
	.imgTxt .pic { margin: 0 0 1em 0 !important; }
}


/* pic side txt
------------------------------------------------------*/
.picTxt {
	display: flex;
	align-items: flex-start;
}
.picTxt .pic {
	flex-shrink:1;
	flex-basis: 400px;
	margin-right: 1em;
}
.picTxt .pic p { padding-top: 1em; }
.picTxt .txt {
	flex-shrink:2;
	padding: 1em;
	border: 1px solid #888;
}
@media only screen and (max-width:768px) {
	.picTxt { display: block; }
	.picTxt .pic { margin-right: 0; }
}

/* .btn & .btns
------------------------------------------------------*/
.btn,
.btns {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.btn a,
.btns a {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 270px;
	height: 60px;
	margin: 0 1em;
	padding: 0 1em;
	border-radius: 10px;
	box-shadow: 0 5px 3px 0 rgba(0,0,0,0.2); 
	white-space: nowrap;
}

.detailBox .btn a,
.detailBox .btns a {
	padding: 0 2em;
	border: 1px solid #077fad;
	background: #077fad;
	color: #FFF;
}
@media only screen and (min-width:1025px) {
	.detailBox .btn a:hover,
	.detailBox .btns a:hover {
		background: #FFF;
		color: #077fad;
	}
}
@media only screen and (max-width:768px) {
	.btn a,
	.btns a {
		min-width: 180px;
		height: 50px;
	}
}

/* .dl-link
------------------------------------------------------*/
.dl-link {
	display: block;
	width: max-content;
	margin: 1em auto;
	font-size: 1em;
	font-weight: bold;
	color: inherit;
}
.dl-link:not(:hover) {
	text-decoration: underline;
	color: #077fad;
}
@media only screen and (max-width:768px) {
	.dl-link {
		font-size: 1em;
	}
}

/* .txtLink
------------------------------------------------------*/
.txtLink {
	border-bottom: 1px solid #000;
	color: inherit !important;
}
.txtLink:hover { border-bottom: 0; }

/* .downloadLink
------------------------------------------------------*/
.downloadLink {
	display: flex;
	justify-content: center;
	font-size: 1.2em;
}
.downloadLink a {
	display: inline-block;
	padding: 1em;
	background: #e4f7ff;
	border-radius: 10px;
}
.downloadLink a:not(:hover) {
	text-decoration: underline;
	color: #077fad;
}
/* .disc
------------------------------------------------------*/
/*
.disc { padding-left: 1em; }
.disc li { text-indent: -1em; }
.disc li:before { content: "・"; }
*/


/* .caution & .cautionBox
------------------------------------------------------*/
.caution,
.cautionBox { color: #C00; }
.cautionBox {
	display: flex;
	justify-content: center;
	padding: 2em 1em 2em 2em;
	border: 1px solid #C00;
}
.cautionBox li {
	margin-bottom: 0 !important;
	text-indent: -1em;
}
.cautionBox li:before { content: "※"; }
@media only screen and (max-width:1024px) {
	.cautionBox {
		padding-top: 1em;
		padding-bottom: 1em;
	}
}

/* #pageTitle
------------------------------------------------------*/
#pageTitle {
	max-width: 1080px;
    margin: 0 auto 1em;
	padding-top: 19px;
	border-top: 1px solid #CCC;
}
.pTitle {
	display: flex;
	margin-bottom: 19px;
	line-height: 1.4;
	font-size: 2em;
	font-weight: 500;
}
.pTitle:before {
	content: "";
	display: inline-block;
	width: 8px;
	margin-right: 20px;
	background: #099ec1;
    background: -moz-linear-gradient(top,#099ec1 0%,#055f99 100%);
    background: -webkit-linear-gradient(top,#099ec1 0%,#055f99 100%);
    background: linear-gradient(top bottom,#099ec1 0%,#055f99 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#099ec1',endColorstr='#055f99',GradientType=0);
}
#pageTitle .pf {
	width: 100%;
	margin-bottom: 0.5rem;
	display: none;
}
#pageTitle .pf span,
#pageTitle .pf .tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	margin-right: 0.5em;
	padding: 0 1em;
	background: #888;
	font-size: 0.875rem;
	color: #FFF;
}
#pageTitle .pf .sta { background: #077fad; }
#pageTitle .pf .s3d { background: orange; }
#pageTitle .pf .nano { background: green; }
#pageTitle .pf .tag {
	margin-left: 0.5em;
	border: 1px solid #888;
	background: none;
	color: #888;
}

#pageTitle .cap {
	margin-bottom: 1em;
	font-size: 1rem;
}
#pageTitle .num {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	background: #333;
	line-height: 1;
	font-size: 1.4rem;
	color: #FFF;
}
@media only screen and (max-width:768px) {
	#pageTitle { margin: 0 1em 1em; }
	.pTitle {
		font-size: 1.4em;
	}
	.pTitle:before {
		width: 6px;
		margin-right: 0.5em;
	}
	#pageTitle .pf span {
		height: 20px;
		font-size: 12px;
	}
	#pageTitle .cap {
		margin-bottom: 1em;
		font-size: 12px;
	}
}

/* .breadcrumbs
------------------------------------------------------*/
.breadcrumbs {
	overflow-x:auto; 
	display: flex;
	align-items: center;
	max-width: 1400px;
	height: 60px;
	margin: 0 auto;
	font-size: 0.875em;
}
.breadcrumbs,
.breadcrumbs a {
	white-space: nowrap;
	/*
	color: rgba(255,255,255,0.5);*/

}
.breadcrumbs .current-item {
	/*
	color: rgba(255,255,255,0.8);*/
}
.breadcrumbs > span + span:before {
	content: "\0bb";
	margin: 0 0.5em;
}
.breadcrumbs a { text-decoration: underline; }

.breadcrumbs a:hover { text-decoration: none; }

/*
#type2.breadcrumbs,
#type2.breadcrumbs a {
	color: rgba(255,255,255,0.6);
}
#type2.breadcrumbs .current-item {
	color: rgba(255,255,255,0.8);
}*/
#type2.breadcrumbs {
	position: absolute;
	top: 0;
	padding: 0 1em;
	z-index: 1;
}
@media only screen and (max-width:1400px) {
	.breadcrumbs {
		padding: 0 1em;
	}
}

@media only screen and (max-width:768px) {
	.breadcrumbs {
		z-index: 1;
		padding: 0 1em;
		height: 30px;
		font-size: 12px;
	}
	.breadcrumbs,
	.breadcrumbs a {
		color: rgba(0,0,0,0.5);
	}
	.breadcrumbs .current-item {
		color: rgba(0,0,0,0.8);
	}
}

/* .pageTopLink
------------------------------------------------------*/
.pageTopLink{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1em;
}
.pageTopLink li{
	font-size: 0.9em;
	margin-right: 1em;
	margin-bottom: 1.5em;
}
.pageTopLink li a{
	border: 1px solid #CCC;
	border-radius: 4px;
	padding: 0.5em 1em 0.5em 0.5em;
}
.pageTopLink li a:hover{
	color: #FFF;
	background-color: #135AAC;
	border-color: #135AAC;
}

/* #column2 & #lNav
------------------------------------------------------*/
#column2 {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	/*width: fit-content;*/
	margin: 0 auto;
}
#column2 #mainInner {
	width: 100%;
	max-width: 1080px;
}
#lNav {
	flex-shrink: 0;
	width: 280px;
	margin-right: 40px;
}
#lNav > ul {
	/*
	position: sticky;
	top: calc(50px + 1em);
	*/
	padding-bottom: 2em;
}
#lNav .sideHead {
	display: flex;
    align-items: center;
    min-height: 80px;
    padding: 0 1em;
    background: #099ec1;
    background: -moz-linear-gradient(top,#099ec1 0%,#055f99 100%);
    background: -webkit-linear-gradient(top,#099ec1 0%,#055f99 100%);
    background: linear-gradient(top bottom,#099ec1 0%,#055f99 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#099ec1',endColorstr='#055f99',GradientType=0);
    font-size: 1.2em;
    font-weight: 500;
    color: #fff;
}
#lNav a {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0.5em 1em;
	border-bottom: 1px solid #CCC;
	background: #FFF;
}
#lNav a:before {
	box-sizing: border-box;
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	margin-right:0.5em;
	transform: rotate(45deg);
	transition: 0.2s;
}
#lNav a:hover,
#lNav a.active,
#lNav li.current_page_item a {
	background: #eaf2ff;
    color: #164FA4;
}

#lNav a:hover:before,
#lNav a.active:before,
#lNav .current_page_item a:before {
	border-color: #164FA4;
}
#lNav .childNav a {
	padding-left: 2.4em;
	font-size: 0.875em;
	font-weight: 500;
}
#lNav .childNav a:before {transform: rotate(135deg);}
@media only screen and (min-width:769px) {
	/*
	#lNav .child a:before,
	#lNav .page_item a:before {
		content: "-";
		margin:0 6px;
	}*/
}
@media only screen and (max-width:1400px) {
	#column2 #mainInner {
		padding-right: 20px;
	}
	#column2 .sec {
		padding-left: 0;
		padding-right: 0;
	}
	#lNav {
		margin:0 20px;
	}
}
@media only screen and (max-width:1080px) {
}
@media only screen and (max-width:768px) {
	#column2 {
		display: block;
		padding-right: 0;
	}
	#column2 #mainInner {
		padding-right: 0;
	}
	#column2 .sec {
		padding: 3em 1em;
	}
	#column2 .sec:first-of-type {
    padding-top: 0;
	}
	#lNav {
		width: auto;
		margin:0 1em;
		border-right:0;
	}
	#lNav .sideHead {
		justify-content: center;
		min-height: 40px;
		font-size: 1rem;
	}
	#lNav li:last-child a { border-bottom: 0; }
}

/* .detailBox
------------------------------------------------------*/
.detailBox .pic,
.detailBox .txt p,
.detailBox .txt dt,
.detailBox .txt dd,
.detailBox .txt table {
	margin-bottom: 2em;
}
.detailBox .txt + .txt { margin-top: 3em; }

.detailBox .imgTxt .pic,
.detailBox .imgTxt .txt * { margin-bottom: 0; }
.detailBox .imgTxt .txt .headline { margin-bottom: 1em; }

@media only screen and (max-width:768px) {
	.detailBox .txt + .txt { margin-top: 2em; }
}

/* .decimal & .disc
------------------------------------------------------*/
.decimal,
.disc {
	padding-left: 1em;
}
.decimal { list-style: inside decimal; }
.disc { list-style: inside disc; }

.decimal li,
.disc li {
	text-indent: -1em;
}

/* .pointBox & .minusBox
------------------------------------------------------*/
.pointBox,
.minusBox {
	display: flex;
	justify-content: center;
	margin-bottom: 2em;
	padding: 1em;
	border: 1px solid #888;
}
.minusBox {
	background: #eee;
	border:0;
	font-style: italic;
	color:#666;
}

/* .compSheet
------------------------------------------------------*/
.compSheet { overflow: auto; }
.compSheet table {
	width: 100%;
	font-size: 0.875em;
}
.compSheet .pcStyle { display: table-cell; }
.compSheet th,
.compSheet td {
	width: 33%;
	padding: 0.5em 1em;
	border: 1px solid #CCC;
	vertical-align: top;
}
.compSheet th {
	width: 1%;
	background: #EEE;
	white-space: nowrap;
}
.compSheet th .txtLink { border-color: #FFF;}
.compSheet thead th {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	background: #888;
	color: #FFF;
}
.secHead {
	display: flex;
	align-items: center;
	min-height: 50px;
	margin-bottom: 1em;
	padding: 0.25em 20px;
	background: #EEE;
	background: -moz-linear-gradient(top,  #EEEEEE 0%, #F6F6F6 100%);
	background: -webkit-linear-gradient(top,  #EEEEEE 0%, #F6F6F6 100%);
	background: linear-gradient(top,  #EEEEEE 0%, #F6F6F6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EEEEEE', endColorstr='#F6F6F6',GradientType=0 );
	border-bottom: 2px solid #CCC;
	line-height: 1.4;
	font-size: 1.5em;
	font-weight: 500;
}
.secHead:before {
	content: "\f0d7";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 0.5em;
	color:#164fa4;
}
.compSheet thead th.sta { background: #077fad; }
.compSheet thead th.s3d { background: orange; }
.compSheet thead th.nano { background: green; }
.compSheet .tag {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 60px;
	padding: 0 0.5em;
	background: #888;
	font-size: 12px;
	color: #FFF;
}

@media only screen and (max-width:768px) {
	.compSheet .pcStyle { display: none; }
	.compSheet .spStyle { display: table-row; }
	.compSheet .spStyle th span {
		position: sticky;
		left: 3em;
	}
	.compSheet tbody th:before {
		content: "";
		display: inline-block;
		position: sticky;
		left: 1em;
		margin-right: 1em;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 6px 0;
		border-color: #000 transparent transparent;
	}
	.compSheet table { font-size: 12px; }
}

/* .faq
------------------------------------------------------*/
.faq .quest {
	display: flex;
	align-items: center;
	position: relative;
	margin-bottom: 1em;
	padding: 1em 2em 1em 1em;
	border: 1px solid #888;
	cursor: pointer;
}
.faq .quest.active { background: #EEE; }
.faq .quest:before {
	content: "Q";
	margin-right: 0.5em;
	font-size: 1.2em;
	color: #888;
}
.faq .quest:after {
	content: "";
	position: absolute;
	right: 1em;
	width: 10px;
	height: 10px;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	transform: rotate(45deg);
	transition: 0.2s;
}
.faq .quest.active:after {
	margin-top: 5px;
	transform: rotate(-135deg);
}

.faq .answer {
	display: none;
	margin-bottom: 1em;
	padding: 0 1em 1em;
}
.faq .answer p { margin-bottom: 1em; }
.faq .quest.active + .answer { display: block; }

/* .boneList
------------------------------------------------------*/
.boneList {
	min-width: 200px;
	margin: 0 20px;
}
.boneList li {
	display: flex;
	justify-content: center;
	margin-bottom: 4px;
}
.boneList span {
	display: inline-block;
	margin: 0 2px;
	padding: 10px 1em;
	background: #EEE;
	line-height: 1;
	font-size: 14px;
	color: #000 !important;
}
.boneList .blue { background: rgba(68,138,202,0.1); }
.boneList .lBlue { background:rgba(19,181,177,0.1); }
.boneList .pink { background:rgba(228,0,177,0.1); }
.boneList .yellow { background:rgba(255,241,0,0.1); }
.boneList .purple { background:rgba(137,87,161,0.1); }
.boneList .red { background:rgba(230,0,18,0.1); }
.boneList .green { background:rgba(34,172,56,0.1); }
.boneList .orange { background:rgba(232,119,28,0.1); }

@media only screen and (max-width:1024px) {
	#f2.sec .flex {
		justify-content: center;
	}
	#f2.sec .pic {
		max-width: 288px;
		min-width:0;
	}
	.boneList {
		display: none;
		min-width: 165px;
		margin: 0 0 0 20px;
	}
	.boneList li {
		margin-bottom: 2px;
	}
	.boneList span {
		margin: 0 1px;
		padding: 5px 1em;
		font-size: 12px;
	}
}

/* youtube in movie
------------------------------------------------------*/
.movie {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* .flexMovie
------------------------------------------------------*/
.flexMovie {
	display: flex;
	flex-direction: row-reverse;
  justify-content: flex-end;
  margin-bottom: 2em;
  padding: 2em 0;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
.flexMovie + .flexMovie {
  margin-top: -2em;
  border-top: 0;
}
.flexMovie .yt {
	flex-shrink: 0;
	width: 40%;
	margin-right: 2em;
}
.flexMovie .caption {
  flex-grow: 1;
  padding-top: 1em;
}
.flexMovie .caption a:not(:hover) {
	text-decoration: underline;
	color: #077fad;
}
.capHead {
	margin-bottom: 0.5em;
	font-size: 1.2em;
  font-weight: 500;
}
@media only screen and (max-width:1080px) {
	.flexMovie {
		display: block;
    padding: 1em 0;
	}
  .flexMovie .caption { padding-top: 0; }
	.flexMovie .yt {
		width: auto;
		margin: 1em auto;
	}
}

/* .simpleMovie
------------------------------------------------------*/
.simpleMovie {
	max-width: 800px;
	margin-bottom: 2em;
	/*
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.6);
	*/
}
.simpleMovie.w600 {
	max-width: 600px;
}
.simpleMovie .caption { padding-top: 1em; }

/* movie change
------------------------------------------------------*/
.movieChange {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 20px;
	background: #222;
	background: -moz-linear-gradient(left, #222 0%, #444 100%);
	background: -webkit-linear-gradient(left, #222 0%,#444 100%);
	background: linear-gradient(to right, #222 0%,#444 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#444',GradientType=1 );
}
.movieChange .inner {
	overflow: hidden;
	width: 50%;
	padding: 1em 0 1em 1em;
}
.movieChange .txt {
	display: none;
	margin-top: 0 !important;
	padding-top: 1em;
	color: #FFF;
}
.movieChange .txt.active { display: block; }
.movieChange .txt p { margin-bottom: 0; }

.movieChange .nav {
	width: 50%;
	padding: 1em;
}
.movieChange .nav li { margin-bottom: 0.5em !important; }
.movieChange .nav li:last-child { margin-bottom: 0 !important; }
.movieChange .nav a {
	display: block;
	padding: 0.5em;
	background: #111;
	color: #FFF;
}
.movieChange .nav a.active { background:#077fad; }
.movieChange .nav a.active:before {
	display: inline-block;
	content: "";
	width: 8px;
	height: 8px;
	border-top:2px solid #FFF;
	border-left:2px solid #FFF;
	margin:0 0.5em;
	transform: rotate(-45deg);
}
.movieChange .nav .num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-right: 0.5em;
	border: 1px solid #FFF;
	font-size: 0.875em;
}

.movieChange .movie {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.movieChange .movie.no {
	height: auto;
	padding-top: 0;
}
.movieChange .movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media only screen and (min-width:1025px) {
	.movieChange .nav a:hover {
		transition: 0.2s;
		background: #888;
	}
}
@media only screen and (max-width:1080px) {
	.movieChange {
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
		background: #444444;
		background: -moz-linear-gradient(top, #444444 0%, #222222 100%);
		background: -webkit-linear-gradient(top, #444444 0%,#222222 100%);
		background: linear-gradient(to bottom, #444444 0%,#222222 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
	}
	.movieChange .inner {
		width: 100%;
		padding-right: 1em;
	}
	.movieChange .txt { padding: 1em 1em 0; }
	.movieChange .nav {
		padding-top: 0;
		width:100%;
	}
	.movieChange .nav a.active:before {
		margin:0 1em 0 0.5em;
		transform: rotate(45deg);
	}
}

/* slide movie
------------------------------------------------------*/
.slideMovie {
	display: flex;
	flex-wrap: wrap;
	margin: 2em 0;
	background: #222;
	background: -moz-linear-gradient(left, #222 0%, #444 100%);
	background: -webkit-linear-gradient(left, #222 0%,#444 100%);
	background: linear-gradient(to right, #222 0%,#444 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#444',GradientType=1 );
}
/*
.slideMovie iframe { display: none; }
*/
.slideMovie .slide {
	overflow: hidden;
	width: 50%;
	padding: 1em 0 1em 1em;
}
.slideMovie .box {
	display: none;
	outline: none;
	left: 0 !important;
	width: auto !important;
}
.slideMovie .box.slick-active { display: block; }
/* .slideMovie .box.slick-active iframe { display: block; } */
.slideMovie .box p {
	margin: 0 !important;
	padding-top: 1em;
	color: #FFF;
}
.slideMovie .nav {
	width: 50%;
	padding: 1em;
}
.slideMovie .slick-track {
	width: auto !important;
	transform:none !important;
}
.slideMovie .nav .slick-slide {
	outline: none;
	width: auto !important;
	margin-bottom: 0.5em;
	padding: 0.5em;
	background: #111;
	transform:none !important;
	cursor: pointer;
	color: #FFF;
}
.slideMovie .nav .slick-slide .num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-right: 0.5em;
	border: 1px solid #FFF;
	font-size: 0.875em;
	color: #FFF;
}
.slideMovie .nav .slick-slide:last-child { margin-bottom: 0; }
.slideMovie .nav .slick-active { background:#077fad; }
.slideMovie .nav .slick-active:before {
	display: inline-block;
	content: "";
	width: 8px;
	height: 8px;
	border-top:2px solid #FFF;
	border-left:2px solid #FFF;
	margin:0 0.5em;
	transform: rotate(-45deg);
}
.slideMovie .nav p {
	margin-bottom: 0;
	color: #FFF;
}
@media only screen and (min-width:1025px) {
	.slideMovie .nav .slick-slide:hover {
		transition: 0.2s;
		background: #888;
	}
}
@media only screen and (max-width:1080px) {
	.slideMovie {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #444444;
		background: -moz-linear-gradient(top, #444444 0%, #222222 100%);
		background: -webkit-linear-gradient(top, #444444 0%,#222222 100%);
		background: linear-gradient(to bottom, #444444 0%,#222222 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
	}
	.slideMovie .slide {
		width: 100%;
		padding-right: 1em;
	}
	.slideMovie .box p { padding: 1em; }
	.slideMovie .nav { width:100%; }
	.slideMovie .nav .slick-active:before {
		margin:0 1em 0 0.5em;
		transform: rotate(45deg);
	}
}

/* colorbox main
------------------------------------------------------*/
#cboxLoadingOverlay,
#cboxLoadingGraphic { display: none !important; }

#colorbox,
#cboxWrapper,
#cboxContent,
#cboxLoadedContent,
#cboxMain {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 320px;
	background: none !important;
	cursor: pointer;
}
#cboxMain,
#cboxInner {
	display: flex;
	justify-content: center;
	align-items: center;
}
#cboxInner {
	position: relative;
	width: 80%;
	height: 80%;
	max-width: 1120px;
	max-height: 730px;
}
#cboxInner .youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
#cboxInner .youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#cboxMain #close {
	position:absolute;
	top: 17px;
	right:20px;
	width:50px;
	height:50px;
	cursor: pointer;
}
#cboxMain #close:before,
#cboxMain #close:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 40px;
	margin: -20px 0 0 -1px;
	background: #FFF;
}
#cboxMain #close:before { transform: rotate(45deg); }
#cboxMain #close:after { transform: rotate(-45deg); }
@media only screen and (max-width:768px) {
	#cboxInner {
		width: calc(100% - 20px);
		height: calc(100% - 20px);
	}
	#cboxMain #close {
		top: 0;
		right:0;
		width:50px;
		height:50px;
	}
	#cboxMain #close:before,
	#cboxMain #close:after {
		height: 27px;
		margin: -14px 0 0 -1px;
	}
}

/* #contactArea
------------------------------------------------------*/
#contactArea {
	padding: 5em 0;
	text-align: center;
	background-image: url("../img/vp2020/common/bg_contact.jpg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
#contactArea * { color: #FFF; }
#contactArea .btns a {
	margin-top: 2em;
	border: 1px solid #FFF;
}
#contactArea .headline,
#contactArea p,
#contactArea .btns {
	justify-content: center;
	position: relative;
	z-index: 1;
}
@media only screen and (min-width:1025px) {
	#contactArea .btns a:hover {
		background: #FFF;
		color: #077fad;
	}
}
@media only screen and (max-width:768px) {
	#contactArea { padding: 3em 1em; }
	#contactArea p { padding: 0 1em; }
	#contactArea .btns { margin-top: 1em; }
	#contactArea .btns a {
		margin-top: 1em;
	}
}

/* #recentArea
------------------------------------------------------*/
#recentArea {
	display: flex;
	justify-content: center;
}
#recentArea .box {
	width: 50%;
	max-width: 500px;
	border-right: 1px solid #CCC;
}
#recentArea .box:first-of-type {
	border-left: 1px solid #CCC;
}
#recentArea a {
	display: block;
	padding: 2em;
}
#recentArea .pic {
	margin-bottom: 1em;
	text-align: center;
}
#recentArea .date span {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	min-width: 60px;
	margin-right:1em;
	background: #333;
	font-size: 12px;
	color: #FFF;
}
@media only screen and (min-width:1025px) {
	#recentArea a:hover {
		background: #EEE;
		color: #077fad;
	}
	#recentArea a:hover .date span {
		transition: 0.2s;
		background: #077fad;
	}
}
@media only screen and (max-width:768px) {
	#recentArea {
		display: block;
		justify-content: center;
	}
	#recentArea .box {
		width: 100%;
		max-width: none;
		border-right: 0;
		border-top: 1px solid #CCC;
	}
	#recentArea .box:first-of-type {
		border: 0;
	}
	#recentArea a {
		display: flex;
		padding: 1em;
	}
	#recentArea .pic {
		width: 30%;
		min-width:100px;
		margin-bottom:0;
	}
	#recentArea .txt {
		width: 70%;
		padding: 0 1em;
	}
}

/* #recentCase
------------------------------------------------------*/
#recentCase {
	background: #FFF;
}
#recentCase .inner {
	display: flex;
	flex-wrap: wrap;
	max-width: 1400px;
	margin: 0 auto;
}
#recentCase .box {
	width: 33.333%;
	background: #FFF;
}
#recentCase a {
	display: flex;
	align-items: center;
	padding: 10px;
}
#recentCase .pic {
	overflow: hidden;
	flex-shrink: 0;
	width: 100px;
}
#recentCase .txt { padding: 0 1em; }
#recentCase .title img {
	display: block;
	display: none;
	height: auto;
	max-height: 20px;
	margin-bottom: 1em;
}

#recentCase #nec .title img {
	max-height: 50px;
	margin: -1em 0 0.2em;
}
#recentCase #anybody .title img {
	max-height: 30px;
	margin: -0.2em 0 0.2em;
}
#recentCase #spo-labo .title img {
	max-height: 46px;
	margin: -0.2em 0 0.2em;
}
#recentCase #avex-dc .title img {
	max-height: 26px;
	margin: 0 0 0.5em;
}
#recentCase .date span {
	display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    min-width: 90px;
    margin-right: 1em;
    background: #333;
    font-size: 12px;
    color: #fff;
}
@media only screen and (min-width:1025px) {
	#recentCase .box a:hover,
	#recentCase .box a:hover .date {
		transition: 0.2s;
		color: #077fad;
	}
	#recentCase .box a:hover .date span {
		transition: 0.2s;
		background: #077fad;
	}
	#recentCase .box a:hover img {
		transition: 0.2s;
		opacity: 0.7;
	}
}
@media only screen and (max-width:768px) {
	#recentCase .box {
		width: 50%;
	}
	#recentCase .box a {
		align-items: flex-start;
	}
	#recentCase .pic { width: 80px; }
}
@media only screen and (max-width:590px) {
	#recentCase .box {
		width: 100%;
	}
	#recentCase .box a {
		align-items: center;
	}
}