@charset "UTF-8";
/*
 *
 *
 * BY REGAL CORPORATION / FMJ.Inc.
 * ©REGAL CORPORATION All Rights Reserved.
 * 許可なく転用、無断転載、改変等は法律により罰せられます。
 *
 *
*/




/*イメージビューワー----------------------------------------------------------*/
#main_photo_anima{
position: relative;
z-index: 99;
width: 100vw;
height: 100vh;
height: 100svh;
height: 100lvh;
margin: 0;
}



.main_photo_anima ul.imageviewer{
position: relative;
width: 100vw;
height: 100vh;
height: 100svh;
height: 100lvh;
text-align: left;
margin: 0;
padding:0;
z-index: 11;
overflow: hidden;

}

.main_photo_anima ul.imageviewer li{
opacity: 0;
position: absolute;
z-index: 1;
width: 100vw;
height: 100vh;
height: 100svh;
height: 100lvh;
margin: 0;
padding: 0;
top:0;
left: 0;
overflow: hidden;
}


.main_photo_anima ul.imageviewer li:first-child .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100svh;
height: 100lvh;

background: url(/cms/images/brand/order-shoes/bespoke-2404/main01_sp.jpg) no-repeat center center;
background-size: cover;
}

.main_photo_anima ul.imageviewer li:nth-child(2) .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100svh;
height: 100lvh;

background: url(/cms/images/brand/order-shoes/bespoke-2404/main02_sp.jpg) no-repeat center center;
background-size: cover;
}


.main_photo_anima ul.imageviewer li:nth-child(3) .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100svh;
height: 100lvh;

background: url(/cms/images/brand/order-shoes/bespoke-2404/main03_sp.jpg) no-repeat left top;
background-size: cover;
}


.main_photo_anima ul.imageviewer li:nth-child(4) .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100svh;
height: 100lvh;

background: url(/cms/images/brand/order-shoes/bespoke-2404/main04_sp.jpg) no-repeat top center;
background-size: cover;
}



.main_photo_anima ul.imageviewer li .photo_zone{
transform-origin: top left;
}


.main_photo_anima ul.imageviewer li img{
width: 100%;
height: auto;
}


/*ライン
---------------------------------------------------------------------*/
.main_photo_anima .line_ui{
position: absolute;
right: calc( 1vw + 13px );
right: -webkit-calc( 1vw + 13px );

top: calc( 100vh - 40px - 60px );/*bottomにしないのはiPad対策*/
top: -webkit-calc( 100vh - 40px - 60px );
top: calc( 100svh - 40px - 60px );/*bottomにしないのはiPad対策*/
top: -webkit-calc( 100svh - 40px - 60px );

/*消す
display: none;
opacity: 0;
*/
z-index: 999;
width: 1px;
height: 70px;
margin: 0;
padding: 0;
background: #ddd;
}


/*ライン　中*/
.main_photo_anima .line_inner01, .main_photo_anima .line_inner02{
position: absolute;
z-index: 4;
top:0;
left:0;
background: #b50f18;/*色*/
width: 1px;
height: 0px;

margin: 0;
padding: 0;

opacity: 1;
transition: all 0.0s linear;
-webkit-transition: all 0.0s linear;
}


.main_photo_anima .ugoke{
height: 100%;
opacity: 1.0;
transition: all 6.5s;
}











/*カウンター
---------------------------------------------------------------*/
.counter{
position: absolute;
z-index: 999;
bottom: auto;

top: calc( 100vh - 40px + 15px );/*bottomにしないのはiPad対策*/
top: -webkit-calc( 100vh - 40px + 15px );
top: calc( 100svh - 40px + 15px );/*bottomにしないのはiPad対策*/
top: -webkit-calc( 100svh - 40px + 15px );


right: calc( 0.8vw + 0px );
right: -webkit-calc( 0.8vw + 0px );
width: 20px;
height: 20px;

user-select: none;
}

.counter ul{
position: absolute;
top: 0;
left: -11px;
width: 20px;
height: 20px;
overflow: hidden;
}

.counter ul li{
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;

font-size: 11px;
color: #fff;

/*Garamond Premier Pro Display*/
font-family: "garamond-premier-pro-display", serif;
font-weight: 400;
font-style: normal;

display: flex;
justify-content: center;
align-items: center;
}

.counter_amount{
position: absolute;
top: 0;
right: 0px;

width: 20px;
height: 20px;

font-size: 11px;
color: #fff;

/*Garamond Premier Pro Display*/
font-family: "garamond-premier-pro-display", serif;
font-weight: 400;
font-style: normal;

display: flex;
justify-content: center;
align-items: center;

}






/*サークルUI*/
.main_photo_anima .circle_ui{
position: relative;
/*消す*/
display: none;
opacity: 1;

display: block;
margin: 12px 0 0 0;
padding: 0;
width: 100vw;/*幅*/
height: auto;
font-size: 0px;
line-height: 0;
text-align: right;/*左右*/
}


.main_photo_anima .circle_ui .circle01{
display: inline-block;
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
margin: 0 8px 0 0;
padding: 0;
background: #fff;
cursor: pointer;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

.main_photo_anima .circle_ui .circle01:hover{
background: #999;
}

.main_photo_anima .circle_ui .circle02{
display: inline-block;
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
margin: 0;
padding: 0;
background: #fff;
cursor: pointer;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

.main_photo_anima .circle_ui .circle02:hover{
background: #999;
}

.main_photo_anima .inner_circle{
position: absolute;
z-index: 2;
top:0;
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
margin: 0;
padding: 0;
background: #b50f18;/*色*/
opacity: 0;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
cursor: pointer;
}

/*ボタンのhover反応させない*/
.main_photo_anima .btn_disabled{
pointer-events: none;
opacity:1.0;
}




/*スマホ終了
--------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {






/*イメージビューワー----------------------------------------------------------*/
#main_photo_anima{
position: relative;
z-index: 99;
width: 100%;
height: 100vh;
height: 100svh;
height: 100lvh;
margin: 0;
padding: 0;
}



.main_photo_anima ul.imageviewer{
position: relative;
width: 100%;

height: 100%;
height: 100vh;
height: 100svh;
height: 100lvh;


text-align: left;
margin: 0;
padding:0;
z-index: 11;
overflow: hidden;
}

.main_photo_anima ul.imageviewer li{
opacity: 0;
position: absolute;
z-index: 1;
width: 100%;
height: 100vh;
height: 100svh;
height: 100lvh;
margin: 0;
padding: 0;
top:0;
left: 0;
overflow: hidden;
}


.main_photo_anima ul.imageviewer li:first-child .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100svh;
height: 100lvh;

background: url(/cms/images/brand/order-shoes/bespoke-2404/main01.jpg) no-repeat center center;
background-size: cover;
}

.main_photo_anima ul.imageviewer li:nth-child(2) .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100svh;
height: 100lvh;
background: url(/cms/images/brand/order-shoes/bespoke-2404/main02.jpg) no-repeat center center;
background-size: cover;
}



.main_photo_anima ul.imageviewer li:nth-child(3) .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100svh;
height: 100lvh;

background: url(/cms/images/brand/order-shoes/bespoke-2404/main03.jpg) no-repeat center center;
background-size: cover;
}


.main_photo_anima ul.imageviewer li:nth-child(4) .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100svh;
height: 100lvh;

background: url(/cms/images/brand/order-shoes/bespoke-2404/main04.jpg) no-repeat center center;
background-size: cover;
}



.main_photo_anima ul.imageviewer li .photo_zone{
transform-origin: top left;
}


.main_photo_anima ul.imageviewer li img{
width: 100%;
height: auto;
}


/*ライン*/
.main_photo_anima .line_ui{
position: absolute;
z-index: 999;

bottom: auto;
right: 30px;

top: calc( 100svh - 122px );/*bottomにしないのはiPad対策*/
top: -webkit-calc( 100svh - 122px );


width:1px;
height: 80px;

margin: 0;
padding: 0;
background: #ddd;
}


/*ライン　中*/
.main_photo_anima .line_inner01, .main_photo_anima .line_inner02{
position: absolute;
z-index: 4;
top:0;
left:0;
background: #b50f18;/*色*/

width: 1px;
height: 0%;

margin: 0;
padding: 0;
opacity: 1.0;

transition: all 0.0s linear;
-webkit-transition: all 0.0s linear;
}


.main_photo_anima .ugoke{
height: 100%;
opacity: 1.0;
transition: all 6.5s;
}



/*カウンター
---------------------------------------------------------------*/
.counter{
position: absolute;
z-index: 999;
bottom: auto;
top: calc( 100svh - 36px );/*bottomにしないのはiPad対策*/
top: -webkit-calc( 100svh - 36px );


right: 40px;
width: 10px;
height: 10px;

user-select: none;
}

.counter ul{
position: relative;
top: auto;
left: auto;
width: 20px;
height: 20px;
overflow: hidden;
}

.counter ul li{
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;

font-size: 15px;
color: #fff;

/*Garamond Premier Pro Display*/
font-family: "garamond-premier-pro-display", serif;
font-weight: 400;
font-style: normal;

display: flex;
justify-content: center;
align-items: center;
}

.counter_amount{
position: absolute;
top: 0;
right: -25px;

width: 20px;
height: 20px;

font-size: 15px;
color: #fff;

/*Garamond Premier Pro Display*/
font-family: "garamond-premier-pro-display", serif;
font-weight: 400;
font-style: normal;

display: flex;
justify-content: center;
align-items: center;

}



/*サークルUI*/
.main_photo_anima .circle_ui{
position: relative;
/*消す*/
display: none;
opacity: 1;

display: block;
margin: 12px 0 0 0;
padding: 0;

width: 100%;
/*幅*/

height: auto;
font-size: 0px;
line-height: 0;
text-align: right;/*左右*/
}


.main_photo_anima .circle_ui .circle01{
display: inline-block;
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
margin: 0 8px 0 0;
padding: 0;
background: #fff;
cursor: pointer;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

.main_photo_anima .circle_ui .circle01:hover{
background: #999;
}

.main_photo_anima .circle_ui .circle02{
display: inline-block;
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
margin: 0;
padding: 0;
background: #fff;
cursor: pointer;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

.main_photo_anima .circle_ui .circle02:hover{
background: #999;
}

.main_photo_anima .inner_circle{
position: absolute;
z-index: 2;
top:0;
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
margin: 0;
padding: 0;
background: #b50f18;/*色*/
opacity: 0;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
cursor: pointer;
}

/*ボタンのhover反応させない*/
.main_photo_anima .btn_disabled{
pointer-events: none;
opacity:1.0;
}



}/*PC終了*/



/**/