/*
 *
 *
 *【 FMJ STUDIO & ONWARD　ORIGINAL IMAGE VIEWER 】
 * BY FMJ.Inc.
 * ©FMJ.Inc.All rights Reserved.
 * 2022.12.8update
 * 許可なく無断転載、改変、転用等は法律により罰せられます。
 *
 *
*/

@charset "UTF-8";
/*SEC01のイメージビューワー----------------------------------------------------------*/
/*基本*/
#inter01{
position: relative;
z-index: 2;
width: 100%;
margin: 0;
padding: 0;
}

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

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


.inter01 ul.imageviewer li:first-child .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/p03_01.jpg) no-repeat center center;
background-size: cover;
transform-origin: top left;
}

.inter01 ul.imageviewer li:nth-child(2) .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/p03_02.jpg) no-repeat center center;
background-size: cover;
transform-origin: top left;
}



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

z-index: 2;
width: 100vw;
height: 2px;
margin: 0;
padding: 0;
background: #ccc;
}


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

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






/*サークルUI*/
.inter01 .circle_ui{
position: relative;
z-index: 13;
/*消す*/
display: none;
opacity: 0;

display: block;
margin: 15px auto 0 auto;
padding: 0;
width: calc( 100vw - 30px );
width: -webkit-calc( 100vw - 30px );
height: auto;
font-size: 0px;
line-height: 0;
text-align: left;/*左右*/
}


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


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

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


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

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








/*イメージビューワー----------------------------------------------------------*/
/*基本*/
#inter02{
position: relative;
width: 100%;
margin: 0;
padding: 0;
}



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

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


.inter02 ul.imageviewer li:first-child .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/p07_01.jpg) no-repeat center center;
background-size: cover;
transform-origin: top left;
}

.inter02 ul.imageviewer li:nth-child(2) .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/p07_02.jpg) no-repeat center center;
background-size: cover;
transform-origin: top left;
}






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

z-index: 2;
width: 100vw;/*横幅*/
height: 2px;
margin: 0;
padding: 0;
background: #ccc;
}


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

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

/*サークルUI*/
.inter02 .circle_ui{
position: relative;
z-index: 13;
/*消す*/
display: block;
opacity: 0;

width: calc( 100vw - 30px );/*横幅*/
width: -webkit-calc( 100vw - 30px );/*横幅*/
margin: 15px auto 0 auto;
padding: 0;
height: auto;
font-size: 0px;
line-height: 0;
text-align: left;/*左右*/
}


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

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

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

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





/*スマホ終了
--------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
/*
全体の
min-width: 1100px;
max-width: 1400px;
の2つの条件を設定する必要ある。
*/



/*SEC01のイメージビューワー----------------------------------------------------------*/
/*基本*/
#inter01{
position: relative;
z-index: 2;
width: 100%;
margin: 0;
padding: 0;
}

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



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


@media screen and (min-width: 1400px) {

.inter01 ul.imageviewer, .inter01 ul.imageviewer li{
width: 574px;
height: -webkit-calc(574px / 1600 * 2400);
height: calc(574px / 1600 * 2400);
}

}/*end 1400px*/

@media screen and (max-width: 1100px) {

.inter01 ul.imageviewer, .inter01 ul.imageviewer li{
width: 451px;
height: -webkit-calc(451px / 1600 * 2400);
height: calc(451px / 1600 * 2400);
}

}/*end 1100px*/






.inter01 ul.imageviewer li:first-child .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/p03_01.jpg) no-repeat center center;
background-size: cover;
transform-origin: top left;
}

.inter01 ul.imageviewer li:nth-child(2) .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/p03_02.jpg) no-repeat center center;
background-size: cover;
transform-origin: top left;
}





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

z-index: 2;
width: 100%;/*幅*/
height: 2px;
margin: 0;
padding: 0;
background: #ccc;
}


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

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


/*サークルUI*/
.inter01 .circle_ui{
position: relative;
z-index: 13;
width: 100%;/*幅*/
text-align: right;/*左右*/

/*消す*/
display: none;
opacity: 0;

display: block;
margin: 15px auto 0 auto;
padding: 0;

height: auto;
font-size: 0px;
line-height: 0;
}


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


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

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


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

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








/*イメージビューワー----------------------------------------------------------*/
/*基本*/
#inter02{
position: relative;
width: 100%;
margin: 0;
padding: 0;
}



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

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


@media screen and (min-width: 1400px) {

.inter02 ul.imageviewer, .inter02 ul.imageviewer li{
width: 574px;
height: -webkit-calc(574px / 1600 * 2400);
height: calc(574px / 1600 * 2400);
}

.sec07_01 .photo_area{
position: relative;
flex-basis: 574px;
margin: 0 56px 0 154px;
padding: 0;
}

.sec07_01 .text_area{
width: auto;
flex-basis: 462px;
margin: 0 154px 0 0;
padding: 0;
}


}/*end 1400px*/




@media screen and (max-width: 1100px) {

.inter02 ul.imageviewer, .inter02 ul.imageviewer li{
width: 451px;
height: -webkit-calc(451px / 1600 * 2400);
height: calc(451px / 1600 * 2400);
}

.sec07_01 .photo_area{
position: relative;
flex-basis: 451px;
margin: 0 44px 0 121px;
padding: 0;
}

.sec07_01 .text_area{
width: auto;
flex-basis: 363px;
margin: 0 121px 0 0;
padding: 0;
}


}/*end 1100px*/





.inter02 ul.imageviewer li:first-child .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/p07_01.jpg) no-repeat center center;
background-size: cover;
transform-origin: top left;
}

.inter02 ul.imageviewer li:nth-child(2) .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/p07_02.jpg) no-repeat center center;
background-size: cover;
transform-origin: top left;
}


.inter02 ul.imageviewer li .photo_zone{

}



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

z-index: 2;
width: 100%;/*横幅*/
height: 2px;
margin: 0;
padding: 0;
background: #ccc;
}


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

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

/*サークルUI*/
.inter02 .circle_ui{
position: relative;
z-index: 13;
/*消す*/
display: block;
opacity: 0;

width: 100%;/*幅*/
text-align: right;/*左右*/

margin: 15px 0 0 0;
padding: 0;
height: auto;
font-size: 0px;
line-height: 0;
}


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

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

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

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









}
/*PC終了
--------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


/**/