/*====================================================================================*/
/* Common
/*====================================================================================*/
.pageWrapper{
	padding:80px;
	text-align:center;
}
.pageWrapper > .main{
	margin-bottom:80px;
}
.pageWrapper > .main > .title{
	
    width: 260px;
    display: inline-block;
    margin-bottom: 80px;
}
.pageWrapper > .main > .title img{
	
}
.pageWrapper > .main > .body{
	
}	
.pageWrapper > .main > .body > .imageArea{
	width:calc(50% - 40px);
	display:inline-block;
	vertical-align:top;
}	
.pageWrapper > .main > .body > .imageArea > .mainImage{
	padding:0 20px 20px 20px;
}	
.pageWrapper > .main > .body > .imageArea > .mainImage img{
	aspect-ratio:1;
	object-fit:cover;
}
.pageWrapper > .main > .body > .imageArea > .mainImage > .copyright{
	text-align:left;
}
.pageWrapper > .main > .body > .imageArea > .thumbnail{
	padding:0 10px;
	text-align:left;
}	
.pageWrapper > .main > .body > .imageArea > .thumbnail img{
	padding:0 10px;
	margin-bottom:10px;
	display:inline-block;
	width:calc(20% - 25px);
    cursor: pointer;
	
	aspect-ratio:1;
	object-fit:cover;
	
}	
.pageWrapper > .main > .body > .imageArea > .copyright{
	text-align:left;
    padding-left: 20px;
}
.pageWrapper > .main > .body > .captionArea{
	font-size:110%;
	
	width: calc(50% - 130px);
	display: inline-block;
	text-align: left;
	padding: 0 80px;
	
}	
.pageWrapper > .main > .body > .captionArea > .title{
	font-size:150%;
}
.pageWrapper > .craft{
	
}
.pageWrapper > .craft > .title{
	font-size:150%;
	margin-bottom:30px;
}

.pageWrapper > .craft > .body{

}
.pageWrapper > .craft > .body >.listWrapper{
	    margin-bottom: 80px;
}
.pageWrapper > .craft > .body >.listWrapper > .list{
	margin-bottom:20px;
}
.pageWrapper > .craft > .body >.listWrapper > .list > .imageArea{
	width:35%;
	display:inline-block;
	vertical-align:top;
    position: sticky;
    top: 50px;
}
.pageWrapper > .craft > .body >.listWrapper > .list > .imageArea img{
}
.pageWrapper > .craft > .body >.listWrapper > .list > .captionArea{
	width: calc(60% - 160px);
	display:inline-block;
    text-align: left;
    padding: 5px 80px;
}
.pageWrapper > .craft > .body >.listWrapper > .list > .captionArea > .wrapper{
    margin-bottom: 50px;
}
.pageWrapper > .craft > .body >.listWrapper > .list > .captionArea > .wrapper > .title{
	font-size:120%;
    margin-bottom: 5px;
    border-bottom: solid 1px #bbbbbb;
    padding-bottom: 10px;
}
.pageWrapper > .craft > .body >.listWrapper > .list > .captionArea > .wrapper > .text{
}
.pageWrapper > .craft > .body >.listWrapper > .list > .captionArea > .wrapper > .text > .parts{
	margin-bottom: 15px;
	
}
.pageWrapper > .craft > .body >.listWrapper > .list > .captionArea > .wrapper > .text > .parts > .title{
	margin-bottom:5px;
}
.pageWrapper > .craft > .body >.listWrapper > .list > .captionArea > .wrapper > .text > .parts > .title:before{
	content:" ";
	display:inline-block;
	width:10px;
	height:1px;
	background:black;
    transform: translateY(-3px);
}
.pageWrapper > .craft > .body >.listWrapper > .list > .captionArea > .wrapper > .text > .parts > .list{
	margin-bottom:5px;
	padding-left: 15px;
}

/*====================================================================================*/
/* スマフォ縦表示
/*====================================================================================*/
/* ipad pro? */
@media only screen and (max-width: 1024px) and (orientation:portrait){
	.pageWrapper {
		padding: 40px;
	}
	.pageWrapper > .main > .body > .imageArea {
		width: 100%;
	}
	.pageWrapper > .main > .body > .imageArea > .thumbnail {
		padding: 0 15px;
	}
	.pageWrapper > .main > .body > .imageArea > .thumbnail img {
		padding: 0 5px;
		margin-bottom: 5px;
		display: inline-block;
		width: calc(25% - 15px);
	}
	.pageWrapper > .main > .body > .captionArea {
		width: 100%;
		padding: 0;
	}
	.pageWrapper > .craft > .body >.listWrapper > .list > .imageArea {
		width: 100%;
        position: initial;
        margin-bottom: 10px;
	}
	.pageWrapper > .craft > .body >.listWrapper > .list > .captionArea {
		width: 100%;
		padding:0;
	}
		
		

}
/*====================================================================================*/
/* スマフォ　横表示
/*====================================================================================*/
@media only screen and (max-width: 1024px) and (orientation:landscape){

}