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



/*02のイメージビューワー----------------------------------------------------------*/

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

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


.inter01 ul.imageviewer li:first-child .photo_zone{
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 90vw;
height: -webkit-calc(90vw / 1000 * 1333);
height: calc(90vw / 1000 * 1333);

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

.inter01 ul.imageviewer li:nth-child(2) .photo_zone{
position: absolute;
opacity: 0;
top: 0;
left: 0;
width: 90vw;
height: -webkit-calc(90vw / 1000 * 1333);
height: calc(90vw / 1000 * 1333);
background: url(../../img/p02_02.jpg) no-repeat center center;
background-size: cover;
}


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


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




/*ライン*/
.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: #ddbeac;/*色*/
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: #ddbeac;/*色*/
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: 12px 0 0 0;
padding: 0;
width: 100%;
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: #ddbeac;/*色*/
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;
}







/*02のイメージビューワー----------------------------------------------------------*/
.inter02 ul.imageviewer{
position: relative;
width: 88vw;
height: -webkit-calc(88vw / 1000 * 1333);
height: calc(88vw / 1000 * 1333);
text-align: left;
margin: 0;
padding:0;
z-index: 11;
overflow: hidden;
}

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


.inter02 ul.imageviewer li:first-child .photo_zone{
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 88vw;
height: -webkit-calc(88vw / 1000 * 1333);
height: calc(88vw / 1000 * 1333);

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

.inter02 ul.imageviewer li:nth-child(2) .photo_zone{
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 88vw;
height: -webkit-calc(88vw / 1000 * 1333);
height: calc(88vw / 1000 * 1333);
background: url(../../img/p07_02.jpg) no-repeat center center;
background-size: cover;
}


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


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




/*ライン*/
.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: #ddbeac;/*色*/
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: #ddbeac;/*色*/
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: none;
opacity: 0;

display: block;
margin: 30px 0 0 0;
padding: 0;
width: 100%;
height: auto;
font-size: 0px;
line-height: 0;
text-align: right;
}


.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: #ddbeac;/*色*/
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開始（横幅768px以上）------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {






/*SEC01のイメージビューワー-*/

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

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


.inter01 ul.imageviewer li:first-child .photo_zone{
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 44vw;
height: -webkit-calc(44vw / 1000 * 1333);
height: calc(44vw / 1000 * 1333);

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

.inter01 ul.imageviewer li:nth-child(2) .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 44vw;
height: -webkit-calc(44vw / 1000 * 1333);
height: calc(44vw / 1000 * 1333);
background: url(../../img/p02_02.jpg) no-repeat center center;
background-size: cover;
}


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


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




/*ライン*/
.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: #ddbeac;/*色*/
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: #ddbeac;/*色*/
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: 12px 0 0 0;
padding: 0;
width: 100%;
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: #ddbeac;/*色*/
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;
}







/*SEC03のイメージビューワー----------------------------------------------------------*/
.inter02 ul.imageviewer{
position: relative;
width: 44vw;
height: -webkit-calc(44vw / 1000 * 1333);
height: calc(44vw / 1000 * 1333);
text-align: left;
margin: 0;
padding:0;
z-index: 11;
overflow: hidden;
}

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


.inter02 ul.imageviewer li:first-child .photo_zone{
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 44vw;
height: -webkit-calc(44vw / 1000 * 1333);
height: calc(44vw / 1000 * 1333);

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

.inter02 ul.imageviewer li:nth-child(2) .photo_zone{
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 44vw;
height: -webkit-calc(44vw / 1000 * 1333);
height: calc(44vw / 1000 * 1333);
background: url(../../img/p07_02.jpg) no-repeat center center;
background-size: cover;
}


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


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




/*ライン*/
.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: #ddbeac;/*色*/
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: #ddbeac;/*色*/
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: none;
opacity: 0;

display: block;
margin: 12px 0 0 0;
padding: 0;
width: 42vw;/*幅*/
text-align: left;/*左右*/
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: #ddbeac;/*色*/
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;
}








}/*768px以上終了！*/