:root {
	--keyImageWidth:calc((100vw - 180px ) / 5 - 10px);
}

html{
	margin:0;
}
.pageWrapper{

}
.pageWrapper > .contentsWrapper{
    text-align: center;
}
.pageWrapper > .contentsWrapper > .contents{
}
.pageWrapper > .contentsWrapper > #top{
	width:calc(100vw - 180px);
	height:100vh;
	overflow:hidden;	
	text-align:left;
}
.pageWrapper > .contentsWrapper > #top > .thumbnailWrapper{
	width:calc(100vw + var(--keyImageWidth));
	height:calc(100vh + var(--keyImageWidth));
	padding: 10px;
	
	opacity:0;
	
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.pageWrapper > .contentsWrapper > #top > .thumbnailWrapper > .linePats{
 
    display: inline-block;
	width:var(--keyImageWidth);
	padding: 0 20px;
}
.pageWrapper > .contentsWrapper > #top > .thumbnailWrapper > .linePats > .aLink > .block{
	width:100%;
	height:calc(var(--keyImageWidth) * 0.6666);
	margin-bottom: 40px;
    padding-top: 10px;
    position: relative;
	opacity: 1;
	/* for animation */
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

/* 画像がすべて読み込まれた後に適用するクラス */
.block.is-loaded {
    opacity: 1 !important;
}

.pageWrapper > .contentsWrapper > #top > .thumbnailWrapper > .linePats > .aLink > .block > .image{
	width:100%;
	height:100%;
    position: absolute;
}

.pageWrapper > .contentsWrapper > #top > .thumbnailWrapper > .linePats > .aLink > .block > .image img{
	width:100%;
	height:100%;
    object-fit: cover;
}
.thumbnailImg{
	opacity:1;
	
	/* for animation */
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

#about{
    padding: 120px;
	padding-right:200px;
    margin-bottom: 80px;
}
#about > .logo{
	text-align: left;
    margin-bottom: 50px;
}
#about > .logo > .image{
	width:100%;
    margin-bottom: 25px;
}
#about > .logo > .image img{
	width:90px;
}
#about > .logo > .subTitle{
	    padding-right: 15px;
}
#about > .logo > .subTitle > .horizontal{
	
}
#about > .logo > .subTitle > .vertical{
	
}
#about > .message{
    width: 100%;
    /* height: calc(100vh - 450px); */
    margin-bottom: 50px;
    position: relative;
    text-align: center;
}
#about > .message > .concept{
    text-align: left;
    margin-bottom: 75px;
}
#about > .message >  .vertical{
	writing-mode: vertical-rl;
    display: inline-block;
    position: absolute;
    right: 10px;
    height: calc(100vh - 400px);
    padding-top: 100px;
}
#about > .message >  .horizontal{

}
#about > .message > #exhibitorInfo{
	
}
#about > .message > #exhibitorInfo > .instroduction{
	    text-align: left;
}
#about > .message > #exhibitorInfo > .instroduction > .teamName{
	font-size:120%;
	margin-bottom:5px;
}
#about > .message > #exhibitorInfo > .instroduction > .concept{
	margin-bottom:15px;
}

#exhibitorInfo{
	
} 
#exhibitorInfo > .title{
	margin-bottom:100px;
	text-align: center;
}
#exhibitorInfo .parts{
    margin-bottom: 10px;
    writing-mode: vertical-rl;
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;		
} 
.parts > .genre{
    display: inline-block;
    margin-right: px;
	} 
.parts > .exhibitorName{
    display: inline-block;

} 
.parts > .brandName{
    display: inline-block;	
} 
.parts > .aLink > .genre{
    display: inline-block;
} 
.parts > .aLink > .exhibitorName{
    display: inline-block;

} 
.parts > .aLink > .brandName{
    display: inline-block;	
} 
.parts > .subExhibitor{
/*	border-left: solid 1px;	*/
    padding-top: 35px;

}
.subExhibitor > .parts{
	display: block !important;
}
.hasLine::before{
	content:" ";
	display:inline-block;
	width:1px;
	height:10px;
	margin-bottom:5px;
	background:black;
}
#exhibitorInfo{
	display: inline-block;
    bottom: 20px;
    text-align: left;
    margin-bottom: 120px;
	padding-top: 160px;
	height:100vh;
}

#exhibitorInfo > .instroduction{
	width:500px;
	margin-bottom:30px;

}

#exhibitorInfo > .instroduction > .teamName{

}

#exhibitorInfo > .instroduction > .concept{

}
#exhibition,#contact{
	padding:80px;
	text-align:center;
    padding-top: 160px;
}
.contents > .title{
    font-size: 200%;
    margin-bottom: 30px;

}
.contents > .title > .vLine{
	content:" ";
    position: absolute;
    left: 50%;	
	background:black;
	width:1px;
	height:80px;
}
#exhibition > .captionArea{
	padding-top: 100px;
    display: inline-block;
    text-align: left;
    margin-bottom: 25px;
}
#exhibition > .captionArea> .logo{
	display:inline-block;
	vertical-align:middle;
    margin-right: 30px;
}
#exhibition > .captionArea> .logo img{
    width: 120px;
}
#exhibition > .captionArea > .caption{
	display:inline-block;
	vertical-align:middle;
	margin-bottom:5px;
}
#exhibition > .captionArea > .caption > .text{
	margin-bottom:15px;
}
#exhibition > .captionArea > .caption > .text a{
	color:gray;
	border-bottom:solid 1px;
}

#exhibition > .captionArea > .caption > .info{

}
#exhibition > .captionArea > .caption > .info > .parts{
	margin-bottom:15px;
}
#exhibition > .captionArea > .caption > .info > .parts > .label{
    display: inline-block;
	margin-right:10px;
	padding-right:10px;
	border-right:solid 1px;
}
#exhibition > .captionArea > .caption > .info > .parts > .text{
    display: inline-block;
}
#exhibition > .mapImage{
	padding:0 60px;
}
#contact{

}
#contact > .formArea{
	padding-top: 100px;

}
#contact > .formArea > .contactForm{
display: inline-block;
    text-align: left;
}
#contact > .formArea > .contactForm > .caption{
}
#contact > .formArea > .contactForm > .parts{
	margin-bottom:25px;

}
#contact > .formArea > .contactForm > .parts > .label{
	margin-bottom:10px;
}
#contact > .formArea > .contactForm > .parts > .data{

}
#contact > .formArea > .contactResultSucess{

}
#contact > .formArea > .contactResultSucess > .text{

}

display: inline-block;
    text-align: left;
}
/* form style*/
input.text {
    width: 400px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    border-radius: 0;
    border: 1px solid #000000;
    border-color: #dddddd;
    background-color: white !important;
    color: #555555;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
    margin-right: 20px;
    font-size: 12pt;
    letter-spacing: 0.1em;
}

textarea {
    width: 400px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    border-radius: 0;
    border: 1px solid #000000;
    border-color: #dddddd;
    background-color: white !important;
    color: #555555;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
    margin-right: 20px;
    font-size: 12pt;
    letter-spacing: 0.1em;
    /* overflow: auto; */
    padding: 2px 6px;
    line-height: 1.42857143;
    resize: vertical;
    width: 400px;
    height: 250px;
    margin-bottom: 5px;
}

button {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    /* width: 150px; */
    border-style: solid;
    border-width: 0.5px;
    background-color: black;
    border: solid 1px #dddddd;
    color: white !important;;
    text-align: center;
    transition: background-color 0.75s ease;
    transition: color 0.75s ease;
    font-size: 10pt;
    letter-spacing: 0.1em;
}

/* スマホ縦画面用 */
@media only screen and (max-width: 1024px) and (orientation:portrait){
	:root {
		--keyImageWidth:calc(((100vw - 10px) / 3) - 10px);
	}
	#top{
		position:relative;
	}
	#top > .logo{
		position:absolute;
		width:60px;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
	}
	#top > .logo img{
	
	}
	
	.pageWrapper > .contentsWrapper > #top{
		width:100vw;
	}
	.pageWrapper > .contentsWrapper > #top > .thumbnailWrapper {
		width: 100vw;
		height: 100vh;
        padding: 5px;
	}
	.pageWrapper > .contentsWrapper > #top > .thumbnailWrapper > .linePats {
		display: inline-block;
		width: var(--keyImageWidth);
		padding: 0;
		margin: 0 5px;
	}
	.pageWrapper > .contentsWrapper > #top > .thumbnailWrapper > .linePats > .aLink > .block {
		width: 100%;
		height: calc(var(--keyImageWidth) * 0.6666);
		margin-bottom: 10px;
	}
	
	/*form parts*/
	textarea {
		width:100%;
	}
	input.text {
		width: 100%;
	}
	#about {
		padding: 40px;
        padding-top: 80px;
	}
	#about > .logo {
		text-align: center;
        margin-bottom: 65px;
	}
	
	#about > .logo > .image img{
		width:70px;
	}
	#about > .logo > .subTitle {
		padding-right: 15px;
		width: 150px;
		display: inline-block;
	}
	#exhibitorInfo{
		padding-top:80px !important;
	}
	#exhibitorInfo .parts {
    	writing-mode: initial;
        font-size: 80%;
		display:block;
	}
	#exhibition > .captionArea {
		padding-top: 80px;
	}
	#exhibition > .captionArea> .logo img {
		width: 150px;
        opacity: 80%;
	}
	.hasLine::before {
		contents:"";
		height:0;
	}
	.parts > .subExhibitor {
		border-left: solid 1px;
		padding-left: 10px;
		margin-left: 17px;
		padding-top: 5px;
	}
	.subExhibitor > .parts{
        font-size: 100% !important;
	}
	#exhibitorInfo {
		display: inline-block;
		bottom: 20px;
		text-align: left;
		margin-bottom: 120px;
		padding: 0 30px;
	}
	#exhibition, #contact {
		padding: 30px;
		text-align: center;
	}
	#exhibition > .mapImage {
		padding: 0px;
	}
	#contact > .formArea > .contactForm {
		width: 80%;
	}
	#exhibition > .captionArea> .logo {
		display: inline-block;
		vertical-align: middle;
		margin-right: 30px;
		text-align: center;
		width: 100%;
        margin-bottom: 15px;
	}	
	.parts > .genre{
		display: inline-block;
		margin-right: 7px;
	}
	.parts > .aLink > .genre{
		display: inline-block;
		margin-right: 7px;
	}
	
}