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

.areaFrame {
	width:100%;
	overflow:hidden;
	position:relative;
	box-sizing:border-box;
}

.areaFrame .inframe {
	box-sizing:border-box;
}

#areaP01 {
	background:#ccc;
}
#areaP02 {
	background:#eee;
}
#areaP03 {
	background:#ecc;
}
#areaP04 {
	background:#eef;
}


/************************************************
スライド項目のサンプル設定例
***********************************************/
#listPhoto {
	max-width:1000px;
	margin:auto;
	position:relative;
}

#listPhoto .photo{
	text-align:center;
	line-height:0;
	background:#333;
	position:relative;
	width:100%;
	height:100%;
}
#listPhoto .photo img{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

/*セレクトボタンの設定*/
#listPhoto .slidesjs-pagination {
	display:flex;
	justify-content: center;
}
#listPhoto .slidesjs-pagination li{
	padding:0 1.0em;
}
#listPhoto .slidesjs-pagination li a{
	display:block;
	width:25px;
	height:0;
	padding:25px 0 0 0;
	overflow:hidden;
	background:#eee;
	border-radius: 25px;        /* CSS3草案 */  
	-webkit-border-radius: 25px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 25px;   /* Firefox用 */
}
#listPhoto .slidesjs-pagination li a.active{
	background-color:#333;
}

/*NEXT・PREVボタン設定*/
#listPhoto .slidesjs-navigation {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:10;
	color:#fff;
	background:#666;
	padding:0.2em 0.6em;
	display:block;
}
#listPhoto .slidesjs-next {right:0;}
#listPhoto .slidesjs-previous {left:0;}
#listPhoto .slidesjs-next:after {content:" >>";}
#listPhoto .slidesjs-previous::before {content:"<< ";}
#listPhoto .slidesjs-play,
#listPhoto .slidesjs-stop {display:none!important;}




/************************************************
#areaHoileShow
***********************************************/
#areaHoileShow{
	min-height: 100vh;
	background:rgb(194, 232, 235);
	position: relative;
}

#areaHoileShow p {
	transform: translateX(5px);
}

#areaHoileShow .boxPointTurn{
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	width:100%;
	height:100%;
	max-width:120px;
	max-height: 80px;
	background:#f00;
}


/************************************************
#areaFadePicture
***********************************************/

#areaFadePicture #listImg{
	/*display: flex;
	justify-content: center;
	flex-wrap: wrap;*/
	position: relative;
	padding:0;
}

#areaFadePicture #listImg .slick-track{
	width:100%!important;
	padding: 100% 0 0 0;
}

#areaFadePicture #listImg li.itemImg{
	padding: 0;
	position: absolute!important;
	left:50%!important;
	top:50%!important;
	transform: translate(-50%,-50%);
}

#areaFadePicture #listImg a{
	padding: 100% 0 0 0;
	position: relative;
	height:0;
	overflow: hidden;
	display: block;
	background:#aaa;
}
#areaFadePicture #listImg a img{
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}

.slick-dots li{
	background:#eee;
}

@media screen and ( min-width:768px ){

	#areaFadePicture #listImg .slick-track{
		/*max-width: 1200px;
		margin: auto;*/
	}

	#areaFadePicture #listImg li.itemImg{
		/*height:300px;
		width:100%!important;
		left:0!important;*/
	}

}


/************************************************
#ancBox・・（アンカーポイントのテスト）
***********************************************/

#scrAncer{
	padding:80px 0;
}
#scrAncer p{
	margin-bottom: 30px;
}

#ancBox01,#ancBox02,#ancBox03,#ancBox04{
	height:50vh;
	text-align: center;
}
#ancBox01{background-color:#ccc;}
#ancBox02{background-color:#b6e8f3;}
#ancBox03{background-color:#ffec97;}
#ancBox04{background-color:#e6e4ff;}



#areYoko .frameTable{
	margin-bottom: 3.0em;
}