@charset "UTF-8";

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?wwdqai');
  src:  url('fonts/icomoon.eot?wwdqai#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?wwdqai') format('truetype'),
    url('fonts/icomoon.woff?wwdqai') format('woff'),
    url('fonts/icomoon.svg?wwdqai#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-bubble2:before {
  content: "\e96e";
}



    html, body {
      margin: 0;
      padding: 0;
      font-family: 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック','ＭＳ ゴシック', Osaka, Osaka-等幅,'Yu Gothic',YuGothic, 游ゴシック体, 游ゴシック, sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 100%;
        margin: 0 auto;
        max-height: 600px;
    }

body{
		background: #282828;
		color: #fff;
		background: url(../img/bg.jpg) center bottom no-repeat #282828;
		background-size: cover;
		background-attachment: fixed;
}



body:before {
  background: url(../img/bg.jpg) no-repeat center bottom;
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding-bottom: 108px;
  content: "";
  z-index: -1;
}

@media(max-height:300px){
body:before {
  background:url(../img/bgd.png) no-repeat center center;
  background-size: cover ;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 108px;
  content: "";
  z-index: -1;
}	
}



a{color: #fff;}
a:hover{color: #ccc;}

/*div{border: 1px solid #fff;box-sizing: border-box;}*/

    .slick-slider {
	    top: 0;
/*	background: url(../img/bg.jpg) center center no-repeat #282828;*/
}
    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      height: auto;
      max-height: 600px;
      margin: 0 auto;
      width: auto;
      max-width: 90%;
      padding-bottom: 20px;
    }

    .slick-prev:before,
    .slick-next:before {
        color: #fff;
    }
    
    .box{display: block;
    }
    
    
	.ttl_area{
	display: block;
	position: relative;
	min-height: 60px;
	background: #000000;
	z-index: 5;
	}
	.w980{display: block;width: 100%;max-width: 980px;margin: 0 auto;position: relative;}
	.zone0{
		display: block;
		position: relative;
		min-height: 60px;
		padding: 20px 0 0;
	}
    .zone1{
	    position: relative;
	    z-index: 1;
	    /* background: url(../img/bg.jpg) center top no-repeat #282828; */
	    padding: 50px 0;
	   }
    .zone2{position: relative;z-index: 10;background: #ffffff;padding: 20px 0 0;margin-top: 20px;}

.zone3{background: url(../img/bg03.png) center top repeat-y #D7D7D7;padding-bottom: 30px;background-attachment: fixed;}
.zone4{background: url(../img/bg04.jpg) center top repeat-y #282828;padding-bottom: 30px;background-attachment: fixed;}
.zone5{	    background: #5d5d5d;padding: 20px;}

*:focus {  outline: none;}
.center{display: block;margin: 0 auto 30px;text-align: center;max-width: 100%;overflow: hidden;/* background: #696969; */padding: 10px;}
.pd50{padding: 100px 0;background: transparent;}

.trans{background: transparent;}


.full{display: flex;margin: 0 auto;text-align: center;max-width: 100%;overflow: hidden;width: 100vw;/* height: 100vh; */vertical-align: middle;align-items: center; /* 縦方向の中央揃え *//* justify-content: center; */ /* 横方向の中央揃え */flex-direction: column; /* 子要素の並びを上から下にする（要素の改行に対応） */}

.full{margin-top: -60px;}

.center img{max-width: 680px;width: 90%;height: auto;}
img{/* max-width: 680px; */width: 100%;height: auto;}

.ttl_logo{display: block;width: 40px ; height: 40px;background: url(../img/fineboys_shoe_logo.png);text-indent: -9999px;overflow: hidden;position: absolute;right: 0;top: 0;margin: 10px;}

.slider div{position: relative;}
.slider div span{/*display: block;opacity: 0;transition: 0.5s;position: absolute;bottom: 0;left: 50%;color: #fff;width: 80%;margin-left: -40%;background: rgba(0, 0, 0, 0.55);padding: 10px;*/text-decoration: none;}
.slider div:hover span{/*display: block;opacity: 1;*/}
.slider div.mark{position: absolute;bottom:0;left:50%;margin-left: -16px;width: 35px;height: 35px;}

.pt30{padding-top: 30px;}

.btnset{display: block;margin: 0 auto;text-align: center;font-size: 0;line-height: 0;}
.btnset a{display: inline-block;margin: 0;border: 3px solid #FFF;transition: 0.5s;box-sizing: border-box;}
.btnset a:first-child{margin-right: 5px;}
@media(max-width:525px){
	.btnset a{display: inline-block;margin: 0;border: 3px solid #FFF;transition: 0.5s;box-sizing: border-box;clear:both;float:none;}
	.btnset a:first-child{margin-right: 0;margin-bottom: 10px;}
}

.btnset a img{display: block;width: 100%;max-width: 255px;}
.btnset a:hover img{opacity: 0.6;}

.boxset{font-size: 0;margin: 30px 0;padding: 30px 0 0 ;line-height: 0;display: table-cell;}

.box{display: inline-block;width: calc(50%);height: auto;box-sizing: border-box;border: none;background: #000;margin: 0;letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */position: relative;overflow: hidden;}

@media(max-width:800px){
.box{width: 50%;height: auto;}	
}

.box:before{display: block;
    content: '';
    padding-top: 0;}

.box.scene1:before{position:absolute;top:0;left: 0;z-index: 10;font-size: 20px;line-height: 1;display: inline-block;width: 30%;height: 30%;background: url(../img/scene1.png) no-repeat right top;background-size: contain;}
.box.scene2:before{position:absolute;top:0;left: 0;z-index: 10;font-size: 20px;line-height: 1;display: inline-block;width: 30%;height: 30%;background: url(../img/scene2.png) no-repeat right top;background-size: contain;}
.box.scene3:before{position:absolute;top:0;left: 0;z-index: 10;font-size: 20px;line-height: 1;display: inline-block;width: 30%;height: 30%;background: url(../img/scene3.png) no-repeat right top;background-size: contain;}
.box.scene4:before{position:absolute;top:0;left: 0;z-index: 10;font-size: 20px;line-height: 1;display: inline-block;width: 30%;height: 30%;background: url(../img/scene4.png) no-repeat right top;background-size: contain;}


.box img{transition: 0.5s;z-index: 0;margin: 0 auto;display: block;max-width: 100%;height: auto;}

.box:hover img{
	transform: scale(1.3,1.3);
}
.txt{display: block;width: 80%;max-width: 600px;margin: 0 auto;text-align: left;color: #000;padding-top: 20px;}

.foot{display: block;
    text-align: center;
    font-size: 12px;
    background: #000000;
    color: #fff;
    padding: 20px;}

.banner{    display: block;
    margin: 0 auto;}
.banner:hover{opacity: 0.7;}

.bnr{max-width: 600px;height: auto;width: 90%;}


@media(min-width:1200px){
.box{width: calc(25%);height: auto;box-sizing: border-box;border: none;}
}




/*ツールチップ*/
.mark {
}
.mark abbr {
    height: 100%;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    text-shadow: 0 1px rgba( 0, 0, 0, .25 );
    color: #fff;
    border-radius: 50%;
    border: none;
    cursor: help;
    display: block;
    text-decoration: none;
}

.box abbr {
    height: 25px;
    width: 25px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    text-shadow: 0 1px rgba( 0, 0, 0, .25 );
    color: #fff;
    border-radius: 50%;
    border: none;
    cursor: help;
    display: block;
    z-index: 1;
    font-size: 20px;
    text-decoration: none;
}


.slick-initialized .slick-slide{text-align: center;}

#tooltip
{
    text-align: left;
    color: #fff;
    background: rgba(53, 53, 53, 0.8);
    position: absolute;
    z-index: 100;
    padding: 15px 15px;
    line-height: 1.5;
    left: 50%!important;
    margin-left: -40%;
    border-radius: 10px;
    width: 80%;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.7);
}


.fancybox-caption {
    font-size: 14px;
}

@media(max-width:800px){
.fancybox-caption {
    font-size: 12px;
}
}

.fancybox-button--fullscreen,.fancybox-button--share{display: none;}

@media(max-width:800px){
#tooltip{
	font-size: 12px;
}
}


u{text-align: center;text-decoration: none;display: block;}


.alink{font-size: 12px;text-decoration: none;}

strong{text-align: center;display: block;margin: 0 auto;}
 
        #tooltip.top:after
        {
            border-top-color: transparent;
            border-bottom: 10px solid #111;
            top: -20px;
            bottom: auto;
        }
 
        #tooltip.left:after
        {
            left: 10px;
            margin: 0;
        }
 
        #tooltip.right:after
        {
            right: 10px;
            left: auto;
            margin: 0;
        }

a:hover {opacity: 0.8;}