@charset "UTF-8";


 .layout_video{
position: relative;
width: 100vw;
height: 100vh;
height: 100svh;
overflow: hidden;
}


 .layout_video video{
position: relative;
width: 100%;
height: 100%;
object-fit: cover; /* または contain */
display: block;
}



.index_main{
position: relative;
top: 0;
left: 0;

margin: 0;
padding: 0;

width: 100vw;
height: 100vh;
height: 100dvh;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


/*INDEXのビューワー----------------------------------------------------------*/
/*背景*/
.inter003 .bg_index{
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100svh;
height: 100dvh;
margin: 0;
padding: 0;

opacity: 0.0;
background: #000;
}



.inter003{
display: block;
position: relative;
width: 100%;
height: 100vh;
height: 100svh;
height: 100dvh;
}

.inter003 ul.imageviewer{
position: relative;
z-index: 1;

width: 100%;
height: 100vh;
height: 100svh;
height: 100dvh;

margin: 0;
padding: 0;

text-align: left;
overflow: hidden;
}

.inter003 ul.imageviewer li{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
opacity: 0;
overflow: hidden;
background: #fff;
}

.inter003 ul.imageviewer li .photo_zone{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}


.inter003 ul.imageviewer li img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}

.inter003 ul.imageviewer li:first-child img{
object-fit: contain;
}



/*ライン*/
.inter003 .line_ui{
display: none;
visibility: hidden;

position: absolute;
z-index: 3;
bottom: 10px;
right: 4vw;


width: 92vw;
margin: 0;
padding: 0;

/*全体 子要素を折り返しせず、1行に配置（wrapが複数行OK）*/
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
cursor: pointer;

overflow: visible;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


.inter003 .line_ui .hit_area{
position: absolute;
z-index: 5;
bottom: 0px;
left: 0;
width: 100%;
height: 27px;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


/*01の数字とライン*/
.inter003 .line_ui .line_first_layout{
position: relative;
flex-basis: 22%;
margin: 0 4% 0 0;
padding: 0;
overflow: visible;
}

.line_first{
height: 1px;
background: #ccc;
}

/*02ラインとヒットエリア*/
.line_second{
height: 1px;
background: #ccc;
}

.inter003 .line_ui .line_second_layout{
position: relative;
flex-basis: 22%;
margin: 0 4% 0 0;
padding: 0;
overflow: visible;
}



/*03ラインとヒットエリア*/
.line_third{
height: 1px;
background: #ccc;
}


.inter003 .line_ui .line_third_layout{
position: relative;
flex-basis: 22%;
margin: 0 4% 0 0;
padding: 0;
overflow: visible;
}



/*04ラインとヒットエリア*/
.line_fourth{
height: 1px;
background: #ccc;
}


.inter003 .line_ui .line_fourth_layout{
position: relative;
flex-basis: 22%;
margin: 0 0 0 0;
padding: 0;
overflow: visible;
}

/*05ラインとヒットエリア*/
.line_fifth{
height: 1px;
background: #ccc;
}


.inter003 .line_ui .line_fifth_layout{
position: relative;
flex-basis: 22%;
margin: 0 0 0 0;
padding: 0;
overflow: visible;
}




/*ライン　中*/
.inter003 .line_inner01, .inter003 .line_inner02, .inter003 .line_inner03, .inter003 .line_inner04, .inter003 .line_inner05{
position: relative;
z-index: 3;
background: #000;/*色*/
margin: 0;
padding: 0;
width: 100%;
height: 1px;
}



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



/*テキストシャッフル*/
.text_shuffle_area{
position: fixed;
z-index: 3;
bottom: 10px;
left: 10px;

width: 96vw;
height: 14px;

font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

color: #fff;
font-size: 12px;
font-feature-settings: "kern";
letter-spacing: 0.0em;

-webkit-mix-blend-mode: difference;
mix-blend-mode: difference;
}






.text_shuffle_area .layout01{
position: absolute;
z-index: 3;
top: 0;
left: 0;
opacity: 0;
}
.text_shuffle_area .layout02{
position: absolute;
z-index: 3;
top: 0;
left: 0;
opacity: 0;
}
.text_shuffle_area .layout03{
position: absolute;
z-index: 3;
top: 0;
left: 0;
opacity: 0;
}
.text_shuffle_area .layout04{
position: absolute;
z-index: 3;
top: 0;
left: 0;
opacity: 0;
}
.text_shuffle_area .layout05{
position: absolute;
z-index: 3;
top: 0;
left: 0;
opacity: 0;
}



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



.index_main{
position: relative;
top: 0;
left: 0;

margin: 0;
padding: 0;

width: 100%;
height: 100vh;
height: 100dvh;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


.inter003{
display: block;
position: relative;
width: 100%;
height: 100vh;
box-sizing: border-box;
}

/*ipadハック*/
body#ipad .inter003{
height: 100dvh;
}


.inter003 ul.imageviewer{
position: relative;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: left;
overflow: hidden;
}


.inter003 ul.imageviewer li{
position: absolute;
top: 0;
left: 0;
z-index: 1;

width: 100%;
height: 100%;

margin: 0;
padding: 0;

opacity: 0;
overflow: hidden;
}

.inter003 ul.imageviewer li img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}


.inter003 ul.imageviewer li:nth-child(2) img{
object-position: center center;
}




/*ライン PC*/
.inter003 .line_ui{
display: none;
visibility: hidden;

position: absolute;
z-index: 2;
right: 20px;
bottom: 20px;

width: 260px;/*全体*/
margin: 0;
padding: 0;

/*全体 子要素を折り返しせず、1行に配置（wrapが複数行OK）*/
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
cursor: pointer;

overflow: visible;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


.inter003 .line_ui .hit_area{
position: absolute;
z-index: 5;
bottom: 0px;
left: 0;
width: 100%;
height: 27px;
/*
background: red;
opacity: 0.5;
*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}




/*01の数字とライン*/
.inter003 .line_ui .line_first_layout{
position: relative;
flex-basis: 60px;
margin: 0 10px 0 0;
padding: 0;
overflow: visible;
}

.line_first{
height: 1px;
background: #ccc;
}


/*02のラインとヒットエリア*/
.inter003 .line_ui .line_second_layout{
position: relative;
flex-basis: 60px;
margin: 0 10px 0 0;
padding: 0;
overflow: visible;
}

.line_second{
height: 1px;
background: #ccc;
}



/*03のラインとヒットエリア*/
.inter003 .line_ui .line_third_layout{
position: relative;
flex-basis: 60px;
margin: 0 10px 0 0;
padding: 0;
overflow: visible;
}

.line_third{
height: 1px;
background: #ccc;
}




/*04のラインとヒットエリア*/
.inter003 .line_ui .line_fourth_layout{
position: relative;
flex-basis: 60px;
margin: 0 0 0 0;
padding: 0;
overflow: visible;
}

.line_fourth{
height: 1px;
background: #ccc;
}



/*05のラインとヒットエリア*/
.inter003 .line_ui .line_fifht_layout{
position: relative;
flex-basis: 60px;
margin: 0 0 0 0;
padding: 0;
overflow: visible;
}

.line_fifht{
height: 1px;
background: #ccc;
}


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








/*テキストシャッフル*/
.text_shuffle_area{
position: fixed;
z-index: 3;
top: 45px;
left: 20px;

width: calc( 100% - 40px );
width: -webkit-calc( 100% - 40px );
height: 16px;

font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

color: #fff;
font-size: 14px;
letter-spacing: 0.0em;
font-feature-settings: "kern";

-webkit-mix-blend-mode: difference;
mix-blend-mode: difference;
}

.text_shuffle_area .layout01{
position: absolute;
z-index: 3;
top: 0;
left: 0;
opacity: 0;
}
.text_shuffle_area .layout02{
position: absolute;
z-index: 3;
top: 0;
left: 0;
opacity: 0;
}
.text_shuffle_area .layout03{
position: absolute;
z-index: 3;
top: 0;
left: 0;
opacity: 0;
}

.text_shuffle_area .layout04{
position: absolute;
z-index: 3;
top: 0;
left: 0;
opacity: 0;
}

.text_shuffle_area .layout05{
position: absolute;
z-index: 3;
top: 0;
left: 0;
opacity: 0;
}












}
/*PC終了*/








/**/