/*====================================================================================*/
/* Common
/*====================================================================================*/
.pageWrapper{
	
}
.pageWrapper > .contents{
	
}
#top{
    width: 100vw;
    height: 100vh;	
	padding: 100px;
	
	position:relative;
}

#top > .image{
	width: 100%;
    height: 100%;
	overflow:hidden;
	opacity:0;
}
#top video{
	width: 100%;
    height: 100%;
	overflow:hidden;
}
#top > .image img{
	width: 100%;
    height: 100%;
    object-fit: cover;
	
}

#top > .title{
	writing-mode: tb-rl;
	display: inline;
	text-align: left;
	vertical-align: top;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
    letter-spacing: 0.3em;
	opacity:0;

}
#top > .title > .JpTxt{
    font-size: 150%;
}
#top > .title > .EnTxt{
    font-size: 17px;
    text-align: left;
	
}
#message{
    width: 100vw;
    padding: 40px;
    margin-bottom: 100px;
    text-align: center;	
}
#message > .subTitle{
    writing-mode: tb-rl;
    display: inline;
    text-align: right;}

#message > .subTitle > .EnTxt{
	
}
#message  >  .captionArea{
	text-align:center;
}
#message  >  .captionArea> .caption{
	text-align:left;
	display:inline-block;
    max-width: 800px;
}
#message > .captionArea> .caption a{
	color: black;/*rgba(0, 0, 0, 0.5) !important;*/
}
#message > .captionArea> .caption > .aLink > .divLink{
	border: solid 0.5px;
	padding: 5px 15px 8px 15px;
    display: inline-block;
}

#body{
	padding: 0 120px;
}
#body > .imageArea{
	
}
#body > video{
	width: 100%;
    height: 100%;
    object-fit: cover;
	margin-bottom: 120px;
}

#body > .imageArea > .image{
    width: 60%;
	margin-bottom: 120px;
}
#body > .imageArea > .image img{
	
}
#body > .imageArea > .leftLayout{
}
#body > .imageArea > .rightLayout{
	padding-left: calc(40% - 20px);
    width: 100%;
	
}

/* for online Area*/

#onlineInfo{
	padding: 100px;
	margin-bottom: 100px;
}

#onlineInfo > .title{
	margin-bottom:20px;
	padding-left: 30px;

}
#onlineInfo > .title > .textEn{
	font-size:80%;
}
#onlineInfo > .listWrapper{
}
#onlineInfo > .listWrapper > .aLink >.list{
	width: calc((100%) / 3);
	padding: 0 30px;
	display:inline-block;
	vertical-align:top;
	margin-bottom: 30px;
}
#onlineInfo > .listWrapper > .aLink{
	color:black;
}
#onlineInfo > .listWrapper > .aLink > .list > .imageArea{

}
#onlineInfo > .listWrapper > .aLink > .list > .imageArea img{

}
#onlineInfo > .listWrapper > .aLink > .list > .name{

}
#onlineInfo > .listWrapper > .aLink > .list > .option{
	text-align:right;
	color:#bc4242;
}

/*====================================================================================*/
/* スマフォ縦表示
/*====================================================================================*/
/* ipad pro? */
@media only screen and (max-width: 1024px) and (orientation:portrait){
	#top {
		width: 100vw;
		height: 100vh;
		padding: 0px;
	}
	#top video{

		padding: 30px;
	}
	#message {
		width: 100vw;
        margin-bottom: 0;
		padding: 80px 30px;
		text-align: center;
	}
	#body {
		padding: 40px;
        padding-top: 0;
	}
	#body > .imageArea > .image {
		width: 	100%;
		margin-bottom: 40px;
	}
	#body > .imageArea > .rightLayout {
		padding-left: 0;
		width: 100%;
	}
	#body > video {
		margin-bottom: 80px;
	}

	/* for online Area*/
	
	#onlineInfo{
		padding: 0 20px;
		margin-bottom: 60px;
	}
	#onlineInfo > .listWrapper > .aLink >.list {
		width: calc((100%) / 2);
		padding: 0 10px;
	}
	#top > .title {
		writing-mode: tb-rl;
		display: inline;
		text-align: left;
		vertical-align: top;
		margin-bottom: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, calc(-50% - 40px));
		letter-spacing: 0.3em;
	}
}
/*====================================================================================*/
/* スマフォ　横表示
/*====================================================================================*/
@media only screen and (max-width: 1024px) and (orientation:landscape){

}