@charset "UTF-8";

/*マウスフォロー----------------------------------------------*/
#mouse_follow{
visibility: hidden;
transition:all 0.3s cubic-bezier(.18,.34,.57,.79);
-webkit-transition:all 0.3s cubic-bezier(.18,.34,.57,.79);

pointer-events: none;
position: fixed;
z-index: 9999;

transform: translateX(-50%) translateY(-50%) scale(1);
width: 120px;
height: 120px;
border-radius: 50%;
background: url(../img/mouse.svg) no-repeat center center;
opacity: 0.0;
border: none;
}

#mouse_follow.hover_mouse{
transition:all 0.6s cubic-bezier(.18,.34,.57,.79);
-webkit-transition:all 0.6s cubic-bezier(.18,.34,.57,.79);

transform: translateX(-50%) translateY(-50%) scale(1);
width: 120px;
height: 120px;
background: url(../img/mouse.svg) no-repeat center center;
opacity: 1.0;
border: none;
}








/*Loop基本 PC-----------------------------------*/
#loop_js_last_layout{
position: relative;
z-index: 3;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 0 0;
overflow: hidden;
background: #fff;
}

/*横タイトル*/
.yoko_title_loop{
position: relative;
width: 90%;
margin: 120px auto 20px auto;
text-align: left;
}

.yoko_title_loop img{
width: 88%;
height: auto;
}





/*最後のLOOP
-----------------------------------------------------------------*/
/*重要*/
.wrapper02{
width: 100%;
height: 420px;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;

cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none; /* リンク長押しのポップアップを無効化 */
-webkit-user-select: none; /* テキスト長押しの選択ボックスを無効化 */
}


/*各要素*/
.b-slider02{
width: 100%;
min-width: 100%;
height: 420px;
outline: 0;
margin: 0;
padding: 0;
}

.b-slider__slide02{
position: relative;
text-align: left;
width: 280px;
height: 420px;
margin: 0;
padding: 0;

user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none; /* リンク長押しのポップアップを無効化 */
-webkit-user-select: none; /* テキスト長押しの選択ボックスを無効化 */
}

.b-slider__slide02 img{
width: 100%;
height: auto;

user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none; /* リンク長押しのポップアップを無効化 */
-webkit-user-select: none; /* テキスト長押しの選択ボックスを無効化 */
pointer-events: none;
}

/*各リンク　画像エリアごとに設定する必要あり*/
a.mouse_over{
position: absolute;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



/*各要素*/
.b-slider__slide02 ul{
font-size: 0px;
letter-spacing:0;
}

.b-slider__slide02 ul li{
position: absolute;
overflow: hidden;
display: block;
width: 280px;
height: 420px;
margin: 0;
padding: 0;

display: inline-block;
vertical-align: top;
font-size: 0px;
letter-spacing:0;

user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none; /* リンク長押しのポップアップを無効化 */
-webkit-user-select: none; /* テキスト長押しの選択ボックスを無効化 */
pointer-events: none;
}


/*各要素 Inner*/
.b-slider__slide02 ul li .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 280px;
height: 420px;
transform-origin: top left;
}







/*01------*/
ul.loop_01 li:first-child .photo_zone{
z-index: 2;
background: url(../img/p05_01.jpg) no-repeat top left;
background-size: cover;
}

ul.loop_01 li:nth-child(2) .photo_zone{
z-index: 1;
background: url(../img/p05_02.jpg) no-repeat top left;
background-size: cover;
}


/*02------*/
ul.loop_02 li:first-child .photo_zone{
z-index: 2;
background: url(../img/p06_01.jpg) no-repeat top left;
background-size: cover;
}

ul.loop_02 li:nth-child(2) .photo_zone{
z-index: 1;
background: url(../img/p06_02.jpg) no-repeat top left;
background-size: cover;
}

/*03------*/
ul.loop_03 li:first-child .photo_zone{
z-index: 2;
background: url(../img/p07_01.jpg) no-repeat top left;
background-size: cover;
}

ul.loop_03 li:nth-child(2) .photo_zone{
z-index: 1;
background: url(../img/p07_02.jpg) no-repeat top left;
background-size: cover;
}

/*04------*/
ul.loop_04 li:first-child .photo_zone{
z-index: 2;
background: url(../img/p08_01.jpg) no-repeat top left;
background-size: cover;
}

ul.loop_04 li:nth-child(2) .photo_zone{
z-index: 1;
background: url(../img/p08_02.jpg) no-repeat top left;
background-size: cover;
}

/*05------*/
ul.loop_05 li:first-child .photo_zone{
z-index: 2;
background: url(../img/p01_01.jpg) no-repeat top left;
background-size: cover;
}

ul.loop_05 li:nth-child(2) .photo_zone{
z-index: 1;
background: url(../img/p01_02.jpg) no-repeat top left;
background-size: cover;
}


/*06------*/
ul.loop_06 li:first-child .photo_zone{
z-index: 2;
background: url(../img/p02_01.jpg) no-repeat top left;
background-size: cover;
}

ul.loop_06 li:nth-child(2) .photo_zone{
z-index: 1;
background: url(../img/p02_02.jpg) no-repeat top left;
background-size: cover;
}


/*07------*/
ul.loop_07 li:first-child .photo_zone{
z-index: 2;
background: url(../img/p03_01.jpg) no-repeat top left;
background-size: cover;
}

ul.loop_07 li:nth-child(2) .photo_zone{
z-index: 1;
background: url(../img/p03_02.jpg) no-repeat top left;
background-size: cover;
}

/*08------*/
ul.loop_08 li:first-child .photo_zone{
z-index: 2;
background: url(../img/p04_01.jpg) no-repeat top left;
background-size: cover;
}

ul.loop_08 li:nth-child(2) .photo_zone{
z-index: 1;
background: url(../img/p04_02.jpg) no-repeat top left;
background-size: cover;
}









/*最後のCheck all item（スマホ）
---------------------------------------------------------------*/
.more-btn{
position: relative;
overflow: hidden;
margin: 35px auto 0 auto;
padding: 0;

width: 90vw;
height: calc( 90vw / 325 * 65 );
height: -webkit-calc( 90vw / 325 * 65 );


box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
border-radius: 2px;
border: 1px solid #808080;

-webkit-transition-delay: .1s;
transition-delay: .1s;
-webkit-transition: all .2s;
transition: all .2s;
cursor: pointer;

opacity: 1;
-webkit-tap-highlight-color: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transition: all .6s ease .0s;
transition: all .6s ease .0s;
}


/*
.more-btn::before{
content: '';
position: absolute;
border: none;
padding:0;
margin: 0;
top: 0;
left: 0;
display: block;

width: 90vw;
height: calc( 90vw / 325 * 65 );
height: -webkit-calc( 90vw / 325 * 65 );

background: #BFBFBF;
-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
opacity: 0;
}

.more-btn:hover{
border: 1px solid #BFBFBF;
}

.more-btn:hover .text_area{
color: #fff;
}

.more-btn:hover::before{
-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
opacity: 1;
}


.more-btn:hover .arrow{
opacity: 0;
}

.more-btn:hover .arrow_white{
opacity: 1;
}
*/


/*矢印*/
.more-btn .arrow{
position: absolute;
top: 0;
right: 0;
-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
}

.more-btn .arrow img{
height: calc( 90vw / 325 * 65 );
height: -webkit-calc( 90vw / 325 * 65 );
width: auto;
}

/*矢印　白 hover用*/
.more-btn .arrow_white{
position: absolute;
top: 0;
right: 0;
opacity: 0;
-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
}
.more-btn .arrow_white img{
height: calc( 90vw / 325 * 65 );
height: -webkit-calc( 90vw / 325 * 65 );
width: auto;
}

.more-btn .text_area{
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;

height: calc( 90vw / 325 * 65 );
height: -webkit-calc( 90vw / 325 * 65 );

line-height: calc( 90vw / 325 * 65 );
line-height: -webkit-calc( 90vw / 325 * 65 );

font-size: 13px;
color: #575757;
/*フォント句読点、約物は詰めない*/
-moz-font-feature-settings: "pkna" 1;
-webkit-font-feature-settings: "pkna" 1;
font-feature-settings: "pkna" 1;
letter-spacing: 0.1em;

-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
}



#loop_js_last_layout .more-btn a{
position: absolute;
top: 0;
left: 0;
z-index: 12;
width: 100%;
height:100%;
}

.check_all_item .more-btn a{
position: absolute;
top: 0;
left: 0;
z-index: 12;
width: 100%;
height:100%;
}







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

#mouse_follow{
visibility: visible;
transition:all 0.3s cubic-bezier(.18,.34,.57,.79);
-webkit-transition:all 0.3s cubic-bezier(.18,.34,.57,.79);

pointer-events: none;
position: fixed;
z-index: 9999;

transform: translateX(-50%) translateY(-50%) scale(1);
width: 120px;
height: 120px;
border-radius: 50%;
background: url(../img/mouse.svg) no-repeat center center;
opacity: 0.0;
border: none;
}

#mouse_follow.hover_mouse{
transition:all 0.6s cubic-bezier(.18,.34,.57,.79);
-webkit-transition:all 0.6s cubic-bezier(.18,.34,.57,.79);

transform: translateX(-50%) translateY(-50%) scale(1);
width: 120px;
height: 120px;
background: url(../img/mouse.svg) no-repeat center center;
opacity: 1.0;
border: none;
}




/*Loop基本 PC-----------------------------------*/
#loop_js_last_layout{
position: relative;
z-index: 3;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 2px 0;
overflow: hidden;
}

/*横タイトル*/
.yoko_title_loop{
position: relative;
width: 95%;
margin: 120px auto 20px auto;
}


.yoko_title_loop img{
width: auto;
height: auto;
}





/*最後のLOOP
-----------------------------------------------------------------*/
/*重要*/
.wrapper02{
width: 100%;
height: 540px;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}


/*各要素*/
.b-slider02{
width: 100%;
min-width: 100%;
height: 540px;
outline: 0;
margin: 0;
padding: 0;
}

.b-slider__slide02{
position: relative;
text-align: left;
width: 360px;
height: 540px;
margin: 0;
padding: 0;
}

.b-slider__slide02 img{
width: 100%;
height: auto;
}

/*各リンク　画像エリアごとに設定する必要あり*/
a.mouse_over{
position: absolute;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



/*各要素*/
.b-slider__slide02 ul{

}
.b-slider__slide02 ul li{
position: absolute;
overflow: hidden;
display: block;
width: 360px;
height: 540px;
margin: 0;
padding: 0;

display: inline-block;
vertical-align: top;
font-size: 0px;
letter-spacing:0;
}


/*各要素 Inner*/
.b-slider__slide02 ul li .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 360px;
height: 540px;
transform-origin: top left;
background-size: cover;
}
























































/*最後のCheck all item
---------------------------------------------------------------*/
.more-btn{
position: relative;
overflow: visible;
margin: 35px auto 0 auto;
padding: 0;

top:1px;
left: 1px;
width: 682px;
height: 80px;
line-height: 80px;


box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
border-radius: 2px;
border: 1px solid #808080;

-webkit-transition-delay: .1s;
transition-delay: .1s;
-webkit-transition: all .2s;
transition: all .2s;
cursor: pointer;

opacity: 1;
-webkit-tap-highlight-color: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transition: all .6s ease .0s;
transition: all .6s ease .0s;
}

.more-btn::before{
content: '';
position: absolute;
border: none;
padding:0;
margin: 0;
top: 0;
left: 0;
width: 682px;
height: 82px;
/*大きくするのはEdge対策*/

display: block;
background: #BFBFBF;/*色*/
-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
opacity: 0;
}

.more-btn:hover{
border: 1px solid #BFBFBF;
}

.more-btn:hover .text_area{
opacity: 0;
}

.more-btn:hover::before{
-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
opacity: 1;
}







/*白テキスト*/
.pc_text_hover{
position: absolute;
opacity: 0;
top:0;
left: 0;
width: 100%;
text-align: center;
-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
}

.more-btn:hover .pc_text_hover{
opacity: 1;
-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
}



.more-btn:hover .arrow{
opacity: 0;
}

.more-btn:hover .arrow_white{
opacity: 1;
}

/*矢印*/
.more-btn .arrow{
position: absolute;
top: 0;
right: 0;
-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
}

.more-btn .arrow img{
height: auto;
width: auto;
}


/*矢印　白 hover用*/
.more-btn .arrow_white{
position: absolute;
top: 0;
right: 0;
opacity: 0;
-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
}

.more-btn .arrow_white img{
height: auto;
width: auto;
}


.more-btn .text_area{
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
line-height: 80px;
height: 80px;

font-size: 16px;
color: #575757;
/*フォント句読点、約物は詰めない*/
-moz-font-feature-settings: "pkna" 1;
-webkit-font-feature-settings: "pkna" 1;
font-feature-settings: "pkna" 1;
letter-spacing: 0.1em;

-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
}



#loop_js_last_layout .more-btn a{
position: absolute;
top: 0;
left: 0;
z-index: 12;
width: 100%;
height:100%;
}

.check_all_item .more-btn a{
position: absolute;
top: 0;
left: 0;
z-index: 12;
width: 100%;
height:100%;
}





}/*PC・タブレット終了*/



















/**/