/*====================================================================================*/
/* Common
/*====================================================================================*/
.pageWrapper{
	padding:80px;
	text-align:center;
}
.pageWrapper > .body{
	width:100%;
}
.pageWrapper > .body > .parts{
	margin-bottom:80px;
}
.pageWrapper > .body > .parts > .captionArea{
	display:inline-block;
	vertical-align:middle;
	width:calc(40% - 150px);
	padding:60px;
}
.pageWrapper > .body > .parts > .captionArea > .title{
	font-size: 160%;
	margin-bottom: 50px;
	text-align: left;
}
.pageWrapper > .body > .parts > .captionArea > .text {
	text-align: left;
}
.pageWrapper > .body > .parts > .imageArea{
	width:60%;
	display:inline-block;
	vertical-align:middle;
}
.rightImageLayout{
	text-align:left;
}
.rightImageLayout > .captionArea{
	padding: 60px 80px 60px 20px !important;
}
.rightImageLayout > .imageArea{
	width: 56% !important;
}
.leftImageLayout{
	
}
.leftImageLayout > .captionArea{
}
.leftImageLayout > .imageArea{
}
	

.online{
	margin: 0 -20px;
	text-align:left;
}
.online > .caption{
	padding: 0 20px;
	margin-bottom: 20px;
	font-size:150%;
}
.online > .wrapper{
	
}
.online > .wrapper > .aLink{
	text-decoration: none;
	color: black;
}
.online > .wrapper > .aLink > .list{
	width:calc(33% - 70px);
	padding:0 20px;
	margin-bottom:50px;
    display: inline-block;
    vertical-align: top;
}
.online > .wrapper > .aLink > .list > .image{
	width:100%;
	margin-bottom:10px;
	position:relative;
	

}
.online > .wrapper > .aLink > .list > .image > img{
	width:100%;
}
.online > .wrapper > .aLink > .list > .image  > .blackMask{
	position:absolute;
	display:inline-block;
	width:100%;
	aspect-ratio:1;
	background:black;
	top: 0;
	left: 0;
	opacity:0;
	
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}	
.online > .wrapper > .aLink > .list > .image > .title{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	opacity:0;
	color:white;
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.hoverList > .image{
	width:500px;
}
.hoverList > .image > .title{
	opacity:1 !important;
}	
.hoverList > .image > .blackMask{
	opacity:0.3 !important;
}	
.online > .wrapper > .aLink > .list > .title{
	
}
	
/*====================================================================================*/
/* スマフォ縦表示
/*====================================================================================*/
/* ipad pro? */
@media only screen and (max-width: 1024px) and (orientation:portrait){
	.pageWrapper {
		padding: 60px 40px;
	}
	.pageWrapper > .body > .parts > .captionArea > .title {
		font-size: 160%;
		margin-bottom: 20px;
	}
	.pageWrapper > .body > .parts > .captionArea{
		width:100%;
        padding: 0 !important;
	}
	.pageWrapper > .body > .parts > .imageArea {
		width: 100% !important;;
	}
	.online > .wrapper > .aLink > .list {
		width: calc(50% - 24px);
		padding: 0px 10px;
	}
	.online > .wrapper > .aLink > .list > .title{
		width:100%;
	}
}
/*====================================================================================*/
/* スマフォ　横表示
/*====================================================================================*/
@media only screen and (max-width: 1024px) and (orientation:landscape){

}