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

/*====================================================================================*/
/* PC 
/*====================================================================================*/
.captionArea a{
	color:black;
	border-bottom:solid 1px;
	padding-bottom:3px;
}
.aBoxLink{
	border: solid 1px;
    padding: 10px !important;
	margin-right:10px;
	
	/* animation */	
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
	transition: all 0.5s;	
}
.aBoxLink:hover{
	color:white;
	background:black;
}
.addToCartAfterView{
	
}
.addToCartAfterView >.caption{
	margin-bottom:20px;
	
}

.pageWrapper{
	padding:60px;
    padding-top: 100px;
}
.pageWrapper > .imageArea{
	width:45%;
	margin-right:50px;
	display:inline-block;
	vertical-align:top;
	position: sticky;
    top: 80px;
}
.pageWrapper > .imageArea > .mainImage{
}
.pageWrapper > .imageArea > .mainImage img{
	margin-bottom: 5px;
}
.pageWrapper > .imageArea > .subImage{
	margin: 0 -5px;
}
.pageWrapper > .imageArea > .subImage img{
		width: calc(20% - 10px);
		aspect-ratio: 3 / 2;
		object-fit: cover;
		margin: 0 5px 5px 5px;
		cursor:pointer;
}
.subImage > .selected{
    border: solid 4px #ffff00;
    box-sizing: border-box;
}

.pageWrapper > .captionArea{
	width:calc(55% - 80px);
	display:inline-block;
	vertical-align:top;
}
.pageWrapper > .captionArea > .title{
	margin-bottom:10px;
	font-size:150%;
}
.pageWrapper > .captionArea > .productCaption{
	margin-bottom:30px;
}

.pageWrapper > .captionArea > .productPrice{
	font-size:150%;
	margin-bottom:30px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad){
	
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .paymentParts {
	
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .paymentParts >.parts{
	margin-bottom:20px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .paymentParts >.parts > label{
	margin-right:10px;
}

.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option{

}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .title{
	margin-bottom: 20px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content{
	border-left: solid 1px;
    padding-left: 40px;
    margin-left: 20px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .texture{
	margin-bottom:30px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .personalization{
	margin-bottom:30px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .personalization .link{
	display:inline-block;
}

.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .texture > .textureCaption{
	margin-bottom:10px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .texture > .textureCaption > .list{
	display:none;
	margin-bottom:5px;

}

.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .texture > .title{
	margin-bottom:10px;
	transform: translateX(-24px);
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .personalization > .title{
	margin-bottom:10px;
	transform: translateX(-24px);
}
.personalization > .notice > .attention{
	margin-bottom:15px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .texture > .title:before{
	content:" ";
	display:inline-block;
    width: 24px;
    height: 1px;
    background: black;
    transform: translate(-16px, -4px);

}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .personalization > .title:before{
	content:" ";
	display:inline-block;
    width: 24px;
    height: 1px;
    background: black;
    transform: translate(-16px, -4px);

}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .texture > .parts{
	width:100%;
	margin-bottom:10px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .texture .caption{
	padding-left:30px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .texture .selectList{
	padding:20px 0;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .texture .selectList .list{
	margin-bottom:10px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .gift{
	margin-bottom:10px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .gift > .title{
	margin-bottom:10px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .gift > .title:before{
}

.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .gift > .type{
	margin-bottom: 30px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .gift > .type > .title{
	margin-bottom:5px;
	transform: translateX(-24px);
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .gift > .type > .caption{
	 margin-bottom:10px;
}

.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .gift > .type > .title:before{
	content:" ";
	display:inline-block;
    width: 24px;
    height: 1px;
    background: black;
    transform: translate(-16px, -4px);
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .gift > .type > .parts{
	width:150px;
	display: inline-block;
	margin-right:10px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .gift > .type > .parts *{
	margin-bottom:5px;
}
.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .gift > .type > .description{
	margin-bottom:5px;
}
input[type="text"] {
  width:30px;
  padding: 8px;          /* 内側の余白 */
  font-size: 1.2rem;     /* 文字の大きさ */
  text-align: center;    /* 数値を中央に表示 */
  border: 1px solid #ccc;
  outline: none;         /* フォーカス時の青い枠線を消す場合 */
}

input[name="personalizationVal"] {
	width: 280px;
	display: block;
	text-align: left;
	padding: 15px;
	font-family: YuMincho, 'Yu Mincho', serif;
	letter-spacing: 0.2rem;
}

input[name="addMaxCharCount"] {
	
}
/* 入力中に枠線の色を変える */
input[type="text"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

button{

	font-family: YuMincho, 'Yu Mincho', serif;
	padding:8px;
	display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    /* width: 150px; */
    border-style: solid;
    border-width: 0.5px;
    background-color: black;
    border: solid 1px #dddddd;
    color: white;
    text-align: center;
    transition: background-color 0.75s ease;
    transition: color 0.75s ease;
    letter-spacing: 0.1em;
	cursor: pointer;
	
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
button:hover{
	background-color: white;
    color: black;
}
select{
	all: unset;
	padding: 10px 40px 10px 15px;
	border: solid 1px #aaaaaa;
}
.selectWrapper{
	margin-bottom:10px;
}
.selectWrapper > .mark{
    display: inline-block;
    transform: translateX(-28px);
    font-size: 80%;
    pointer-events: none;

}
/*====================================================================================*/
/* スマフォ縦表示
/*====================================================================================*/
/* ipad pro? */

@media only screen and (max-width: 1350px){
	.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .texture > .parts{
		width:120px;
	}
}
@media only screen and (max-width: 1024px) and (orientation:portrait){
	.pageWrapper {
		padding: 60px 30px;
	}	
	.pageWrapper > .title{
		font-size:130%;
		margin-bottom:10px;
	}
	.pageWrapper > .imageArea {
		width: 100%;
		margin-right:0;
        position: initial;
	}
	.pageWrapper > .imageArea > .mainImage{
	}
	.pageWrapper > .imageArea > .mainImage img{
	    margin-bottom: 5px;
	}
	.pageWrapper > .imageArea > .subImage{
        margin: 0 -5px;
	}
	.pageWrapper > .imageArea > .subImage img{
		width: calc(20% - 10px);
		aspect-ratio: 3 / 2;
		object-fit: cover;
        margin: 0 5px 5px 5px;
	}
	.pageWrapper > .captionArea {
		width: 100%;
	}
	.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content {
		border-left: solid 1px;
		padding-left: 20px;
		margin-left: 5px;
	}
	.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .texture > .title {
		margin-bottom: 10px;
		transform: translateX(-4px);
	}
	.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .texture > .parts {
		width: calc(50% - 20px);
		margin-right: 15px;
	}
	.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .gift > .type > .title {
		margin-bottom: 5px;
		transform: translateX(-4px);
	}
	.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .gift > .type > .parts {
		width: calc(50% - 15px);
	}
	#lineup .productListWrapper {
		width: 100%;
	}
	select{
		width: calc(100% - 100px) !important;
	}
	input[name="personalizationVal"] {
		width: 280px;
	}
	.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .personalization .link {
		padding-left: 27px;
	}
	.pageWrapper > .captionArea > :is(.productForm, .productFormAbroad) > .option > .content> .personalization > .title {
		transform: translateX(-4px);
	}
	
	.personalizationLabel{
	}

}

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