/*
 *
 * 2023.10.5update
 *【 URBAN RESEARCH　ORIGINAL IMAGE VIEWER 】
 * BY URBAN RESEARCH Co., Ltd. / FMJ.Inc.
 * ©FMJ.Inc.All rights Reserved.
 * ©URBAN RESEARCH Co., Ltd.All rights Reserved.
 * 許可なく無断転載、改変、転用等は法律により罰せられます。
 *
 *
*/
@charset "UTF-8";



/*イメージビューワー----------------------------------------------------------*/
#inter04{
position: relative;
z-index: 99;
width: 74vw;
margin: 0 auto 55px auto;
}


#inter04 ul.only_si{
width: 100%;
position: relative;
display: inline-block;
text-align: left;
margin: 0;
}

#inter04 ul.only_si li a{
color: #fff;
}

#inter04 ul.only_si li.styling_items .styling_under::after{
background: #fff;
}

/*数字*/
#inter04 .ti_number{
position: absolute;
z-index: 9998;
top: 10px;
left: 13px;
}

.inter04 .ti_number img{
width: auto;
height: auto;
}



.inter04 ul.imageviewer{
position: relative;
width: 74vw;
height: -webkit-calc(74vw / 1600 * 2399);
height: calc(74vw / 1600 * 2399);
text-align: left;
margin: 0;
padding:0;
z-index: 11;
overflow: hidden;
}

.inter04 ul.imageviewer li{
position: absolute;
z-index: 1;
width: 74vw;
height: -webkit-calc(74vw / 1600 * 2399);
height: calc(74vw / 1600 * 2399);
margin: 0;
padding: 0;
top:0;
left: 0;
opacity: 1;
overflow: hidden;
}


.inter04 ul.imageviewer li:first-child .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 74vw;
height: -webkit-calc(74vw / 1600 * 2399);
height: calc(74vw / 1600 * 2399);

background: url(../img/p07_03.jpg) no-repeat center center;
background-size: cover;
}

.inter04 ul.imageviewer li:nth-child(2) .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 74vw;
height: -webkit-calc(74vw / 1600 * 2399);
height: calc(74vw / 1600 * 2399);

background: url(../img/p07_04.jpg) no-repeat center center;
background-size: cover;
}


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


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


/*ライン*/
.inter04 .line_ui{
position: relative;
/*消す*/
display: none;
opacity: 0;

z-index: 2;
width: 74vw;
height: 2px;
margin: 10px 0 0 0;
padding: 0;
background: #fff;
}


/*ライン　中*/
.inter04 .line_inner01, .inter04 .line_inner02{
position: absolute;
z-index: 4;
top:0;
left:0;
background: #ffff00;/*色*/
height: 2px;
margin: 0;
padding: 0;
width: 0%;
opacity: 0;
transition: all 0.0s linear;
-webkit-transition: all 0.0s linear;
}


.inter04 .ugoke{
width: 100%;
opacity: 1.0;
transition: all 3.4s;
}

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

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


.inter04 .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;
}

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

.inter04 .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;
}

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

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

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




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






/*イメージビューワー----------------------------------------------------------*/
#inter04{
position: relative;
z-index: 99;

width: calc( 100vh / 900 * 512 * 0.74 );
width: -webkit-calc( 100vh / 900 * 512 * 0.74 );

margin: 0 auto;
}


#inter04 ul.only_si{
width: 100%;
position: relative;
display: inline-block;
text-align: left;
margin: 0;
}

#inter04 ul.only_si li a{
color: #fff;
}

#inter04 ul.only_si li.styling_items .styling_under::after{
background: #fff;
}



.inter04 ul.imageviewer{
position: relative;
width: calc( 100vh / 900 * 512 * 0.74 );
width: -webkit-calc( 100vh / 900 * 512 * 0.74 );

height: calc( 100vh / 900 * 512 * 0.74 / 1600 * 2399 );
height: -webkit-calc( 100vh / 900 * 512 * 0.74 / 1600 * 2399 );



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

.inter04 ul.imageviewer li{
position: absolute;
z-index: 1;
width: calc( 100vh / 900 * 512 * 0.74 );
width: -webkit-calc( 100vh / 900 * 512 * 0.74 );

height: calc( 100vh / 900 * 512 * 0.74 / 1600 * 2399 );
height: -webkit-calc( 100vh / 900 * 512 * 0.74 / 1600 * 2399 );
margin: 0;
padding: 0;
top:0;
left: 0;
opacity: 1;
overflow: hidden;
}


.inter04 ul.imageviewer li:first-child .photo_zone{
position: absolute;
top: 0;
left: 0;
width: calc( 100vh / 900 * 512 * 0.74 );
width: -webkit-calc( 100vh / 900 * 512 * 0.74 );

height: calc( 100vh / 900 * 512 * 0.74 / 1600 * 2399 );
height: -webkit-calc( 100vh / 900 * 512 * 0.74 / 1600 * 2399 );

background: url(../img/p07_03.jpg) no-repeat center center;
background-size: cover;
}

.inter04 ul.imageviewer li:nth-child(2) .photo_zone{
position: absolute;
top: 0;
left: 0;
width: calc( 100vh / 900 * 512 * 0.74 );
width: -webkit-calc( 100vh / 900 * 512 * 0.74 );

height: calc( 100vh / 900 * 512 * 0.74 / 1600 * 2399 );
height: -webkit-calc( 100vh / 900 * 512 * 0.74 / 1600 * 2399 );
background: url(../img/p07_04.jpg) no-repeat center center;
background-size: cover;
}


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


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


/*ライン*/
.inter04 .line_ui{
position: relative;
/*消す*/
display: none;
opacity: 0;

z-index: 2;
width: calc( 100vh / 900 * 512 * 0.74 );
width: -webkit-calc( 100vh / 900 * 512 * 0.74 );

height: 2px;
margin: 10px 0 0 0;
padding: 0;
background: #fff;
}


/*ライン　中*/
.inter04 .line_inner01, .inter04 .line_inner02{
position: absolute;
z-index: 4;
top:0;
left:0;
background: #ffff00;/*色*/
height: 2px;
margin: 0;
padding: 0;
width: 0%;
opacity: 0;
transition: all 0.0s linear;
-webkit-transition: all 0.0s linear;
}


.inter04 .ugoke{
width: 100%;
opacity: 1.0;
transition: all 3.4s;
}

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

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

width: calc( 100vh / 900 * 512 * 0.74 );
width: -webkit-calc( 100vh / 900 * 512 * 0.74 );
/*幅*/

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


.inter04 .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;
}

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

.inter04 .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;
}

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

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

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



}/*PC終了*/



/**/