@charset "UTF-8";
/* CSS Document */

/*=======
  
2017autumn

========*/

#SPimg{display:none;}

/*スライドトップ*/
#slideTop {position:relative;}
#slideTop .mainView{
	margin:-75px auto 50px;
	padding:10px;
	width:674px;
	height:253px;
	background-color:#FFF;
	line-height:0;
}
#slideTop .mainView ul{
	width: 674px;
	height: 253px;
}
#slideTop .mainView li{
	position:absolute;
	list-style-type:none;
}
#slideTop .thumbNail{
	position:absolute;
	bottom: -30px;
    left: 351px;
}
#slideTop .thumbNail li{
	float:left;
	width: 20px;
	height: 20px;
    background: url(../../images/history/2017autumn/BtnPhotoList.png) no-repeat center center;
	list-style-type:none;
	cursor: pointer;
    transition: background 0.5s; 
    -webkit-transition: background 0.5s;
}
#slideTop .thumbNail li:hover{
	opacity:0.8;
	-ms-filter: "alpha(opacity=80)";  /* ie 8 */
	filter: alpha(opacity=80);        /* ie lt 8 */

	-moz-opacity:0.8;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.8;              /* Safari 1.x */
}
#slideTop .thumbNail li.active{
    background: url(../../images/history/2017autumn/BtnPhotoList_on.png) no-repeat center center;
}

.PhotoPut .mainView li{
	position:absolute;
	list-style-type:none;
}
.PhotoPut .thumbNail li:hover{
	opacity:0.8;
	-ms-filter: "alpha(opacity=80)";  /* ie 8 */
	filter: alpha(opacity=80);        /* ie lt 8 */

	-moz-opacity:0.8;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.8;              /* Safari 1.x */
}

/*各ブース*/
.PhotoCircle{
	position:absolute;
	list-style-type:none;
    border-radius: 50%;
    padding: 10px;
    background: #fff;
    -webkit-box-shadow:0px 0px 2px 2px rgba(0,0,0,0.1);
    -moz-box-shadow:0px 0px 2px 2px rgba(0,0,0,0.1);
    box-shadow:0px 0px 2px 2px rgba(0,0,0,0.1);
}
#ContentsInner {
	overflow:visible;
    padding-bottom: 0;
}
#ContentsMain{
    background:url(../../images/history/2017autumn/bg.png);
    overflow: hidden;
}

/*ページ内リンク*/
#BoothNav {
    display: flex;

    flex-wrap: wrap;
    justify-content:center;
}
#BoothNav li a{
    position: relative;
    display: block;
    margin: 0 10px;
    width: 230px;
    height: 50px;
    border-radius: 5px;
    background: rgba(153,204,240,0.5);
    list-style: none;
    text-indent: -999px;
    z-index: 0;
}
#BoothNav li a:before{
    position: absolute;
    bottom: -5px;
    left: 50%;
    display: block;
    margin-left: -3px;
    width: 15px;
    height: 15px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    content: "";
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    z-index: 2;
    transition: bottom 1s; 
    -webkit-transition: bottom 1s;
}
#BoothNav li a:after{
    position: absolute;
    bottom: -1px;
    left: -10px;
    display: block;
    width: 245px;
    height: 76px;
    background: url(../../images/history/2017autumn/BoothHM.png);
    content: "";
    z-index: 1;
}

#BoothNav li#NavFood a{background: rgba(178,176,55,0.5);}
#BoothNav li#NavFood a:after{
    left: 0;
    width: 234px;
    height: 64px;
    background: url(../../images/history/2017autumn/BoothFD.png);
}
#BoothNav li#NavWorkshop a{background: rgba(242,149,58,0.5);}
#BoothNav li#NavWorkshop a:after{
    left: 0;
    width: 243px;
    height: 92px;
    background: url(../../images/history/2017autumn/BoothWS.png);
}
/*hover*/
#BoothNav li:hover a{opacity: .8;}
#BoothNav li:hover a:before{bottom: -15px;}

/*概要*/
#OutlineBox{position:relative;}
#Outline2017autumn {
    position:relative;
    margin-top:20px;
    text-align:center;
}
#Outline2017autumn span{}
#Outline2017autumn span a{
    position: absolute;
    display: block;
    margin: 0 10px;
    width: 400px;
    height: 60px;
    border-radius: 5px;
    background: rgba(242,172,153,0.5);
    list-style: none;
    text-indent: -999px;
    z-index: 0;
    left: 16px;
    bottom: 0;
}
#Outline2017autumn span a:after{
    position: absolute;
    bottom: -1px;
    left: -10px;
    display: block;
    width: 410px;
    height: 87px;
    background: url(../../images/history/2017autumn/BoothCI.png);
    content: "";
    z-index: 1;
}
#Outline2017autumn span:hover{opacity:.8;}

/*ブース*/
h3{
	padding-top:58px;
	text-align:center;
}
#FoodBox h3{ padding-top:0px;}
#WorkshopBox h3{padding-top: 0px;}

#HandmadeBox,
#WorkshopBox,
#FoodBox{
	position:relative;
}
#HandmadeBox{
    margin: -2px 0 0 0px;
    padding: 0;
	height:1171px;
    background:url(../../images/history/2017autumn/Hbg.png) no-repeat center top;
}
#FoodBox {
	height:948px;
    background:url(../../images/history/2017autumn/Fbg.png) no-repeat center top;
}
#WorkshopBox{
	height:1158px;
    background:url(../../images/history/2017autumn/Wbg.png) no-repeat center top;
}
.PhotoPut{
	position:absolute;
	padding:10px;
	background-color:#FFF;
    -webkit-box-shadow:0px 0px 2px 2px rgba(0,0,0,0.1);
    -moz-box-shadow:0px 0px 2px 2px rgba(0,0,0,0.1);
	box-shadow:0px 0px 2px 2px rgba(0,0,0,0.1);
	list-style-type:none;
	line-height:0;
}

.Oblong{
	width:327px;
	height:253px;
}
.clImg{
	width:674px;
	height:255px;
    margin:0 auto;
}

.tapeL,.tapeR {
	position:absolute;
	width:32px;
	height:32px;
}
.tapeL {
	top:-10px;
	left:-10px;
}
.tapeR {
	right:-10px;
	bottom:-10px;
}

.PhotoPut .thumbNail{
	position:absolute;
	bottom:-30px;
	left:0;
}
.PhotoPut .thumbNail.thumbNailR{
	right:0;
	left:auto;
}
.PhotoPut .thumbNail li{
    background-position: center;
	float:left;
	width: 20px;
	height: 20px;
    background: url(../../images/history/2017autumn/BtnPhotoList.png) no-repeat center center;
	list-style-type:none;
	cursor: pointer;
    transition: background 0.5s; 
    -webkit-transition: background 0.5s;
}
.PhotoPut .thumbNail li.active{
    background: url(../../images/history/2017autumn/BtnPhotoList_on.png) no-repeat;
}