/*====================================================================================*/
/* Common
/*====================================================================================*/

/*====================================================================================*/
/* PC 
/*====================================================================================*/
html,body {
    height: 100%;
	
transition: 
        translate 2s ease,
        background-color 2s ease;	
}
.pageWrapper{
	padding: 100px 50px;
}
.pageWrapper > .title{
	font-size: 200%;
    text-align: center;
    margin-bottom: 80px;
}
.contentsWrapper{
	width:100%;
}
.contentsWrapper > .notice{
	margin-bottom:50px;
	
}
.contentsWrapper > .contents{
	width:calc(100% - 340px);
    display: inline-block;
    vertical-align: top;
}
.contentsWrapper > .contents > a{
	color:black;
}
.contentsWrapper > .contents > .list{
	margin-bottom:20px;
}
.contentsWrapper > .contents > .list  > a > .image{
	width:300px;
    margin-right: 15px;
    display: inline-block;
    vertical-align: top;
}
.contentsWrapper > .contents > .list  > a > .image img{
	width:100%;
	aspect-ratio:3/2;
	object-fit:cover;
}
.contentsWrapper > .contents > .list > .caption{
	display:inline-block;
}
.contentsWrapper > .contents > .list > .caption > .parts{
	margin-bottom: 5px;
}
.contentsWrapper > .contents > .list > .caption > .parts > .label{
	width:100px;
	display:inline-block;
}
.contentsWrapper > .contents > .list > .caption > .parts > .data{
	display:inline-block;
}
.contentsWrapper > .orderSummry{
    width: 250px;
    padding: 30px;
    border: solid 1px;
    position: sticky;
    top: 180px;
    display: inline-block;
}
.orderSummry > .title{
	font-size: 140%;
    margin-bottom: 20px;
}
.orderSummry > .parts{
	border-bottom:solid 1px #CCCCCC;
	margin-bottom:5px;
	padding-bottom:5px;}
.orderSummry > .parts > .label{
	width:120px;
	display:inline-block;
}
.orderSummry > .parts > .data{
	display:inline-block;
}
.attention{
	color: #606060;
	line-height: normal;
    margin-bottom: 20px;
    padding-top: 20px;
}
select {
    font-size:90%;
	padding: 3px 30px 3px 6px;
}
/*====================================================================================*/
/* スマフォ縦表示
/*====================================================================================*/
/* ipad pro? */
@media only screen and (max-width: 1024px) and (orientation:portrait){
	.pageWrapper {
		padding-bottom: 0;
	}
	.contentsWrapper > .contents{
		width:calc(100% );
	}
	
	.contentsWrapper > .orderSummry{
		position: initial;
        width: 100%;
        box-sizing: border-box;
	}
	.contentsWrapper > .contents > .list > a > .image {
		width: 100%;
		margin-right: 0;
	}
	.orderSummry{
		margin-bottom:60px;
	}
}
/*====================================================================================*/
/* スマフォ　横表示
/*====================================================================================*/
@media only screen and (max-width: 1024px) and (orientation:landscape){
}