@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;
width: 100%;
height: auto;
margin: 0;
padding: 0;
overflow: hidden;
background: #fff;
}






/*最後の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/p01_01.jpg) no-repeat top left;
background-size: cover;
}

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


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

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

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

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

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

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

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

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


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

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


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

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

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

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



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

ul.loop_09 li:nth-child(2) .photo_zone{
z-index: 1;
background: url(../img/p09_01.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: 88px;


box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
border-radius: 2px;
background: #74b5a1;

-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;
bottom: 8px;
right: 10px;
-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: 88px;
width: auto;
}

.more-btn .text_area{
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
height: 88px;
line-height: 88px;
-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
}


.more-btn .text_area img{
width: auto;
height: auto;
margin: 0 auto;
}

#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;
}






/*最後の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: 0px;
left: 0px;
width: 670px;
height: 100px;
line-height: 100px;

background: #74b5a1;/*色*/

border-radius: 2px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;

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

opacity: 1;

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

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

/*テキスト*/
.more-btn .text_area{
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
line-height: 100px;
height: 100px;

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

/*矢印*/
.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;
}









#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・タブレット終了*/



















/**/