@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: 5;
width: 100%;
height: auto;
margin: 110px 0 0 0;
padding: 0;
}

/*横タイトル*/
.yoko_title_loop{
position: relative;
z-index: 3;
width: 86vw;
margin: 0 0 15px 2vw;
padding: 110px 0 0 0;
text-align: left;
}

.yoko_title_loop img{
width: 300px;
height: auto;
max-width: 86vw;
}


#loop_js_last_layout .bg01{
position: absolute;
z-index: 2;
width: 86vw;
height: 700px;
background: #aed1c7;
}

#loop_js_last_layout .bg02{
position: absolute;
z-index: 1;
right: 0;
top: 95px;
width: 84vw;
height: 760px;
background: #d9ede6;
}




/*最後のLOOP
-----------------------------------------------------------------*/
/*重要*/
.wrapper02{
position: relative;
z-index: 4;
width: 100%;
height: 470px;
overflow: hidden;
margin: 0 0 40px 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: 470px;
outline: 0;
margin: 0;
padding: 0;
}

.b-slider__slide02{
position: relative;
text-align: left;
width: 313px;
height: 470px;
margin: 0 15px 0 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: 313px;
height: 470px;
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;
}


.b-slider__slide02 a{
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


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



/*01------*/
ul.loop_01 li:first-child .photo_zone{
z-index: 2;
background: url(../img/p01_01_sp.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_other.jpg) no-repeat top left;
background-size: cover;
}


/*02------*/
ul.loop_02 li:first-child .photo_zone{
z-index: 2;
background: url(../img/p02_01.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_sp.jpg) no-repeat top left;
background-size: cover;
}

/*04------*/
ul.loop_04 li:first-child .photo_zone{
z-index: 2;
background: url(../img/p04_01_other.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_other.jpg) no-repeat top left;
background-size: cover;
}

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

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


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

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


/*07------*/
ul.loop_07 li:first-child .photo_zone{
z-index: 2;
background: url(../img/p07_01.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_01.jpg) no-repeat top left;
background-size: cover;
}

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


/*09------*/
ul.loop_09 li:first-child .photo_zone{
z-index: 2;
background: url(../img/p09_01.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;
}



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

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




/*最後のCheck all item
---------------------------------------------------------------*/
.more-btn{
position: relative;
z-index: 3;

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

margin: 0 auto 0 auto;
display: block;

-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 .text_area{
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: calc( 90vw / 335 * 90 );
height: -webkit-calc( 90vw / 335 * 90 );
text-align: center;
-webkit-transition: opacity .6s ease .0s;
transition: opacity .6s ease .0s;
}


.more-btn .text_area img{
width: 100%;
height: auto;
}


/*背景色*/
.hover_bg{
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height:100%;
background: #74b5a1;
-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 a:hover ~ .hover_bg{
background: #239670;/*色*/
-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 a{
position: absolute;
top: 0;
left: 0;
z-index: 5;
width: 100%;
height:100%;
}





/*HOVER*/
.wrapper02 .check_hover{
position: absolute;
z-index: 5;
bottom:12px;
left: 12px;
opacity: 0.0;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
}

.wrapper02 .bg_black{
position: absolute;
z-index: 4;
bottom: 0;
left: 0;
opacity: 1;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
}


.wrapper02 a:hover + .check_hover{
opacity: 1.0;
}








/*スマホ終了
--------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@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;
z-index: 3;
width: 95%;
margin: 45px auto 20px auto;
padding: 0;
}


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


#loop_js_last_layout .bg01{
position: absolute;
z-index: 2;
width: 60vw;
height: 700px;
background: #aed1c7;
}

#loop_js_last_layout .bg02{
position: absolute;
z-index: 1;
right: 0;
top: 130px;
width: 60vw;
height: 625px;
background: #d9ede6;
}

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


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

.b-slider__slide02{
position: relative;
text-align: left;
width: 353px;
height: 530px;
margin: 0 20px 0 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: 353px;
height: 530px;
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: 353px;
height: 530px;
transform-origin: top left;
background-size: cover;
}






/*最後のCheck all item
---------------------------------------------------------------*/
.more-btn{
position: relative;
z-index: 3;

overflow: visible;
margin: 35px auto 0 auto;
padding: 0;

top:1px;
left: 1px;
width: 670px;
height: 100px;
line-height: 100px;


-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 .text_area{
position: absolute;
z-index: 3;
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;
}


/*背景色*/
.hover_bg{
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height:100%;
background: #74b5a1;
-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 a:hover ~ .hover_bg{
background: #239670;/*色*/
-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 a{
position: absolute;
top: 0;
left: 0;
z-index: 5;
width: 100%;
height:100%;
}







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



















/**/