/* CSS Document */

/* Navigation */
#header {
	position: relative;
	height: auto;
	width: 100%;
	background-color: #ffffff;
	background-size: contain;
	background-repeat: repeat-x;
	background-position: bottom;
	display: table;
}

.header_table{
	display: table;
	vertical-align: bottom;
	width:100%;
}

.header_row{
	display: table-row;
	vertical-align: bottom;
	width:100%;
}

#header .header_title_cell{
	display: table;
	vertical-align: bottom;
	width:100%;
}

#header .header_title_cell span{
	display: table-cell;
	width:100%;
	padding-top:5px;
	padding-left:5%;
	font-size:0.8em;
	background-color:rgba(255,120,122,1.00);
	color:rgba(255,255,255,1.00);
}

.header_info_cell{
	display: table;
	vertical-align: bottom;
	width: 100%;
	margin-right: 0px;
	padding-top: 5px;
	padding-right: 0px;
	text-align: right;
}

.header_info_cell .header_tel{
	font-size: 1.8em;
	color: #5e2010;
	padding-right:5%;
}

.header_info_cell .header_address{
	font-size: 0.8em;
	color: rgba(255,120,122,1.00);
	padding-right:5%;
}


#header_logo{
	display: table-cell;
	vertical-align: bottom;
	width:120px;
}

.logo{
	margin:0px 0px 20px 10px;
	width:120px;
}

#panel-btn{
	display: none; 
}

#header_menu_Area{
	display: table-cell;
	vertical-align: top;
	width:100%;
	height:auto;
}

#header img{
	display:block;
	float: left;
}

/************************************ ヘッダメニュー *****************************************************/
#header_menu_Area .menu
{
	display:block;
	color:#ffffff;
	height:100%;
}

#header_menu_Area .header_menu{
	vertical-align: bottom;
	display: table;
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: auto;
	margin-bottom: 5px;
	background-color: rgba(255,125,125,1.00);
	padding-top: 2px;
	padding-bottom: 2px;
	border-top: 2px solid rgba(200,100,100,1.00);
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	box-shadow: 0px 3px 2px rgba(200,100,100,1.00);
	-moz-box-shadow: 0px 3px 2px rgba(200,100,100,1.00);
	-webkit-box-shadow: 0px 3px 2px rgba(200,100,100,1.00);
	color: #ffffff;
	padding-left: 0px;
}

#header_menu_Area .header_menu li:hover
{
	background-color: rgba(0,0,0,0.1);
	cursor:pointer;
}

/*
#header_menu_Area .header_menu li:active
{
	cursor:pointer;
	filter:alpha(opacity=80);
	opacity:0.8;
}
*/

#header_menu_Area .header_menu a:link{
	color:#ffffff;
	text-decoration:none;
}
#header_menu_Area .header_menu a:visited{
	color:#ffffff;
	text-decoration:none;
}
#header_menu_Area .header_menu a:hover{
	color:#ffffff;
	text-decoration:none;
}

#header_menu_Area .header_menu a:active{
	color:#ffffff;
	text-decoration:none;
}

#header_menu_Area .header_menu li{
	position: relative;
	display: table-cell;
	width: 20%;
	height: auto;
	float: left;
	padding-top: 5px;
	padding-bottom: 0px;
	font-weight: bold;
	cursor: pointer;
	color: #666;
	text-align: center;
	
}

/************************************ ヘッダメニュー：詳細メニュー *****************************************************/

#header_menu_Area .TopMenu_Detail {
	display:block;
	width:100%;
	padding:0px;
	margin:0px;
	position:absolute;
	z-index:99;
	left:0px;
	top:30px;
}

#header_menu_Area .header_menu .TopMenu_Detail li{
	display: block;
	clear: both;
	width: 100%;
	height: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: bold;
	cursor: pointer;
	color: #ff7d7d;
	border: 1px solid;
	background-color: rgba(255,209,209,1);
}

#header_menu_Area .header_menu .TopMenu_Detail li:hover
{
	color:rgba(255,255,255,1);
	background-color: rgba(255,109,109,1);
	cursor:pointer;
	transform:0s;	
}

#header_menu_Area .header_menu .TopMenu_Detail li:active
{
	background-color: rgba(255,255,255,1);
	opacity:0.8;
	transform:0s 0.5s;	
}

/* クリックで開くメニュー */

input[type="checkbox"].on-off{
	visibility:visible;
	position: absolute;
	opacity:0;
	transition:0s;
	height:0px;
	margin:0px;
	padding:0px;
}

/************************** メニュー1 **********************************/
/*
#TopMenu1 > .TopMenu1
{
	position:relative;
	visibility:hidden;
	clear:both;
	overflow:hidden;
	opacity:0;
	margin:0px;
	padding:0px;
	height:0px;
	width:0px;
	transition: .5s;
}

#TopMenu1:hover > .TopMenu1 {
	position:relative;
	visibility:visible;
	overflow:visible;
	opacity:1;
	transition: .5s;
}
#TopMenu1 > .TopMenu1 li{
	position:relative;
	visibility:hidden;
	clear:both;
	overflow:hidden;
	opacity:0;
	margin:0px;
	padding:0px;
	height:0px;
	width:0px;
	transition: .5s;
}

#TopMenu1:hover > .TopMenu1 li{
	position: relative;
	clear:both;
	border-top: 1px solid #ff7d7d;  
	border-right: 0px;  
	border-bottom: 1px solid #ff7d7d;
	border-left: 0px;  
	cursor: pointer;  
	
	height:auto;

	visibility:visible;
	overflow:visible;

	cursor: pointer;  
	opacity:1;
}
*/

input[type="checkbox"].TopMenu_Detail1_onoff ~ .TopMenu1{
	position:relative;
	visibility:hidden;
	clear:both;
	overflow:hidden;
	opacity:0;
	margin:0px;
	padding:0px;
	height:0px;
	width:0px;
	transition: .5s;
}


input[type="checkbox"].TopMenu_Detail1_onoff:checked ~ .TopMenu1{
	position:relative;
	visibility:visible;
	overflow:visible;
	opacity:1;
	transition: .5s;
}

input[type="checkbox"].TopMenu_Detail1_onoff + .TopMenu1 li{
	position:relative;
	visibility:hidden;
	clear:both;
	overflow:hidden;
	opacity:0;
	margin:0px;
	padding:0px;
	height:0px;
	width:0px;
	transition: .5s;
}

input[type="checkbox"].TopMenu_Detail1_onoff:checked + .TopMenu1 li{
	position: relative;
	clear:both;
	border-top: 1px solid #ff7d7d;  
	border-right: 0px;  
	border-bottom: 1px solid #ff7d7d;
	border-left: 0px;  
	cursor: pointer;  
	
	height:auto;

	visibility:visible;
	overflow:visible;

	cursor: pointer;  
	opacity:1;
}

/************************** メニュー2 **********************************/
input[type="checkbox"].TopMenu_Detail2_onoff + .TopMenu2{
	position:relative;
	visibility:hidden;
	clear:both;
	overflow:hidden;
	opacity:0;
	margin:0px;
	padding:0px;
	height:0px;
	width:0px;
	transition: .5s;
}


input[type="checkbox"].TopMenu_Detail2_onoff:checked + .TopMenu2{
	position:relative;
	visibility:visible;
	overflow:visible;
	opacity:1;
	transition: .5s;
}


input[type="checkbox"].TopMenu_Detail2_onoff + .TopMenu2 li{
	position:relative;
	visibility:hidden;
	clear:both;
	overflow:hidden;
	opacity:0;
	margin:0px;
	padding:0px;
	height:0px;
	width:0px;
	transition: .5s;
}

input[type="checkbox"].TopMenu_Detail2_onoff:checked + .TopMenu2 li{
	display:table-cell;
	position: relative;
	clear:both;
	border-top: 1px solid #ccc;  
	border-right: 0px;  
	border-bottom: 1px solid #ccc;
	border-left: 0px;  
	cursor: pointer;  
	background-color: rgba(255,244,216,0.8);


	visibility:visible;
	overflow:visible;

	heigth:auto;

	cursor: pointer;  
	opacity:1;
}

/************************** メニュー3 **********************************/
input[type="checkbox"].TopMenu_Detail3_onoff + .TopMenu3{
	position:relative;
	visibility:hidden;
	clear:both;
	overflow:hidden;
	opacity:0;
	margin:0px;
	padding:0px;
	height:0px;
	width:0px;
	transition: .5s;
}

input[type="checkbox"].TopMenu_Detail3_onoff:checked + .TopMenu3{
	position:relative;
	visibility:visible;
	overflow:visible;
	opacity:1;
	transition: .5s;
}
input[type="checkbox"].TopMenu_Detail3_onoff + .TopMenu3 li{
	position:relative;
	visibility:hidden;
	clear:both;
	overflow:hidden;
	opacity:0;
	margin:0px;
	padding:0px;
	height:0px;
	width:0px;
	transition: .5s;
}

input[type="checkbox"].TopMenu_Detail3_onoff:checked + .TopMenu3 li{
	display:table-cell;
	position: relative;
	clear:both;
	border-top: 1px solid #ccc;  
	border-right: 0px;  
	border-bottom: 1px solid #ccc;
	border-left: 0px;  
	cursor: pointer;  
	background-color: rgba(255,244,216,0.8);


	visibility:visible;
	overflow:visible;

	width:150px;
	height:50px;

	cursor: pointer;  
	opacity:1;
}

/************************** メニュー4 **********************************/
input[type="checkbox"].TopMenu_Detail4_onoff + .TopMenu4{
	position:relative;
	visibility:hidden;
	clear:both;
	overflow:hidden;
	opacity:0;
	margin:0px;
	padding:0px;
	height:0px;
	width:0px;
	transition: .5s;
}

input[type="checkbox"].TopMenu_Detail4_onoff:checked + .TopMenu4{
	position:relative;
	visibility:visible;
	overflow:visible;
	opacity:1;
	transition: .5s;
}

input[type="checkbox"].TopMenu_Detail4_onoff + .TopMenu4 li{
	position:relative;
	visibility:hidden;
	clear:both;
	overflow:hidden;
	opacity:0;
	margin:0px;
	padding:0px;
	height:0px;
	width:0px;
	transition: .5s;
}

input[type="checkbox"].TopMenu_Detail4_onoff:checked + .TopMenu4 li{
	display:table-cell;
	position: relative;
	clear:both;
	border-top: 1px solid #ccc;  
	border-right: 0px;  
	border-bottom: 1px solid #ccc;
	border-left: 0px;  
	cursor: pointer;  
	background-color: rgba(255,244,216,0.8);


	visibility:visible;
	overflow:visible;

	width:150px;
	height:50px;

	cursor: pointer;  
	opacity:1;
}

/************************** メニュー5 **********************************/
input[type="checkbox"].TopMenu_Detail5_onoff + .TopMenu5{
	position:relative;
	visibility:hidden;
	clear:both;
	overflow:hidden;
	opacity:0;
	margin:0px;
	padding:0px;
	height:0px;
	width:0px;
	transition: .5s;
}

input[type="checkbox"].TopMenu_Detail5_onoff:checked + .TopMenu5{
	position:relative;
	visibility:visible;
	overflow:visible;
	opacity:1;
	transition: .5s;
}

input[type="checkbox"].TopMenu_Detail5_onoff + .TopMenu5 li{
	display:block;
	position:relative;
	visibility:hidden;
	clear:both;
	overflow:hidden;
	opacity:0;
	margin:0px;
	padding:0px;
	height:0px;
	width:0px;
	transition: .5s;
}

input[type="checkbox"].TopMenu_Detail5_onoff:checked + .TopMenu5 li{
	display:block;
	position: relative;
	clear:both;
	border-top: 1px solid #ccc;  
	border-right: 0px;  
	border-bottom: 1px solid #ccc;
	border-left: 0px;  
	cursor: pointer;  
	background-color: rgba(255,244,216,0.8);


	visibility:visible;
	overflow:visible;

	width:150px;
	height:50px;

	cursor: pointer;  
	transition: .5s;
	opacity:1;
}

/*トップページのスライドショー
---------------------------------------------------------------------------*/
#slideshow {
	display:block;
}

#slideshow_moblie {
	display:none;
}

.slideshowDiv{
	position:relative;
	clear: left;
	width: 100%;
	heigth: auto;
}

.slideshowDiv img {
   position: absolute;
   width: 100%;
   height: auto;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}

.slideshowDiv img.TopImage {
   position: relative;
}

.slideshowDiv img.active {
   z-index: 10;
   opacity: 1.0;
}
.slideshowDiv img.last-active {
   z-index: 9;
}

/***********************************************************************************************/

/* Small Desktops */
@media (min-width: 769px) and (max-width: 1096px) {

	/* Navigation */
	#header {
		height:75pt;
	}
	
	#header_icon_Area{
		margin-bottom:20px;
	}
	
	#header_icon{
		margin-bottom:20px;
	}
}
/* Small Tablets */
@media (min-width: 481px) and (max-width: 768px) {
	
	#header_banner {
		display: none;
	}


}
/* Mobile */
@media (max-width: 480px) {

	#header .header_title_cell{
		display:none;
	}

	#header .header_info_cell{
		display:none;
	}
	
	#header_menu_Area{
		display:block;
		
	}

	/******************************************/

/* メニューリストのO表示非表示ボタン関連 */
	#panel-btn{
	  display: inline-block;
	  position: absolute;
	  width: 55px;
	  height: 55px;
	  margin: 5px 10px ;
	  border-radius: 50%;
	  background: #ffd1d1;
	  color:#ffffff;
	  right: 0px;
	  z-index:100;
	}
	#panel-btn:hover{
	  background: #ff7d7d;
	}
	#panel-btn-icon{
	  display: block;
	  position: absolute;
	  top: 40%;
	  left: 50%;
	  width: 30px;
	  height: 4px;
	  margin: -2.5px 0 0 -15px;
	  background: #ffffff;
	  transition: .2s;
	  padding-top:0px;
	}
	#panel-btn-icon:before, #panel-btn-icon:after{
	  display: block;
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 0;
	  width: 30px;
	  height: 4px;
	  background: #ffffff;
	  transition: .3s;
	}
	#panel-btn-icon:before{
	  margin-top: -10px;
	}
	#panel-btn-icon:after{
	  margin-top: 6px;
	}
	#panel-btn .close{
	  background: transparent;
	}
	#panel-btn .close:before, #panel-btn .close:after{
	  margin-top: 0;
	}
	#panel-btn .close:before{
	  transform: rotate(-45deg);
	  -webkit-transform: rotate(-45deg);
	}
	#panel-btn .close:after{
	  transform: rotate(-135deg);
	  -webkit-transform: rotate(-135deg);
	}

	#panel-btn-string
	{
	  display: block;
	  position: absolute;
	  top: 55%;
	  left: 18%;
	  width: 30px;
	  font-weight:bold;	
	}

	input[type="checkbox"].TopMenu_onoff ~ #header_menu_Area{
		display:none;
	}
	
	input[type="checkbox"].TopMenu_onoff:checked ~ #header_menu_Area{
		display:table;
	}
/******************************************/
	
/* メニューリスト表示 */
	#header_menu_Area{
		position:absolute;
		top:62px;
		right:0px;
		z-index:99;
		width:40%;
	}
	
	#header_menu_Area .header_menu li{
		position: relative;
		display: table-cell;
		width: 100%;
		height: 20pt;
		padding-top: 8px;
		padding-bottom: 3px;
		font-weight: bold;
		cursor: pointer;
		color: #666;
		text-align: center;
		
	}
	
	#headr_menu_Area .header_menu .menu
	{
		display:block;
		height:100%;
	}


	#header_menu_Area .TopMenu_Detail {
		position:relative;
		top:0px;
	}
	
	/* ヘッダースライドショー表示 */
	
	#slideshow {
		display:none;
	}
	
	#slideshow_moblie {
		display:block;
	}

	/******************************************/
	
}