@charset "Shift_JIS";

/* 要素リセット */
body{
    margin : 0px;
    padding: 0;
    text-align: center;
    font-size : 14px;
    font-family : メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Osaka, sans-serif;
    color : #000000; /* 標準文字色 */
    min-width: 940px;
    background-position: top left;
    background-repeat: repeat-x;
}
/* Safari用ハック 文字サイズ調整 */
/*\*/
html:first-child body{
    font-size: 70%;
}
/* end */

/*--------------------------------------------------------
  レイアウト設定
--------------------------------------------------------*/
#hpb-container{
    background-position: bottom left;
    background-repeat: repeat-x;
  font-size : 140%;
  text-align : left;
}

#hpb-header{
    width : 100%;
    margin-left: auto;
    margin-right: auto;
  position : fixed;
  background-color : white;
  z-index : 11;
  top : 0px;
  border-top-width : 2px;
  border-top-style : solid;
  border-top-color : #0080c0;
}

/*印刷時のヘッダーとナビゲーションの設定*/
@media print{
    #hpb-header{
    position: absolute !important; /* 印刷時はabsoluteにする */
    top: 0;
    left: 0;
    width: 100%;
    /* 必要であれば、背景色などを調整 */
  }
    #hpb-nav{
    position: absolute !important; /* 印刷時はabsoluteにする */
    top: 0;
    left: 0;
    width: 100%;
    margin-top : -128px;
    /* 必要であれば、背景色などを調整 */
  }
　　#hpb-headerLogo{
    /* background-image を使用している場合 */
    -webkit-print-color-adjust: exact; /* Chrome, Safari */
    color-adjust: exact; /* Firefox */
  }
}

#hpb-inner{
    width : 100%;
    margin-left: 0px;
    margin-right: 0px;
    position: relative;
    clear: both;
  margin-top : 124px;
}

/*スライドショー設定*/

#hpb-slideshow1{
	font-size : 350%;
box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3); /* 右上に影、ぼかし半径10px、色は半透明の黒 */
  font-weight : 700;
}

.caption{
   position: absolute;
  top: 50%; /* 元の位置から5%下に調整 */
  left:50%;
  transform: translate(-50%, -50%);
  width : 86%;
  color: white;
  background-color: rgba(0, 0, 0, 0.0);
  padding: 0px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
display: flex;
  justify-content: center; /* 水平方向中央揃え */
text-align: center;
}

#hpb-wrapper{
    padding-top : 20px;
}

.hpb-layoutset-01 #hpb-wrapper{
    width : 80%;
  margin-left : auto;
  margin-right : auto;
}

.hpb-layoutset-02 #hpb-wrapper{
    width : 80%;
  margin-left : auto;
  margin-right : auto;
}

*html #hpb-wrapper
{
    /*for IE6*/
}

*:first-child + html #hpb-wrapper
{
    /*for IE7*/
}

#hpb-main{
    width : 100%;
    float: right;
    text-align : left;
    padding-bottom: 20px;
    padding-top: 12px;
}

#hpb-aside{
    width: 219px;
    float: left;
    text-align: left;
    padding-top: 14px;
    padding-bottom: 14px;
}

.hpb-layoutset-02 #hpb-aside{
    margin-top: 50px;
}

#hpb-footer{
    width : 90%;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    padding-top: 5px;
}

#hpb-footer::after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#hpb-nav{
    width : 100%;
    position : fixed;
display: flex;
  justify-content: center; /* 水平方向中央揃え */
  z-index : 11;
  background-color : #eefcff;
  top : 88px;
  border-bottom-width : 2px;
  border-bottom-style : solid;
  border-bottom-color : #0080c0;
}
/*--------------------------------------------------------
  デザイン設定
--------------------------------------------------------*/
/* ヘッダー領域 */

#hpb-headerLogo{
    width : 440px;
  float : left;
}

/* コンテンツ配置領域 */

/* ナビゲーション */
#hpb-nav ul{
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0;
    padding-right: 0;
    padding-left: 1px;
    padding-bottom: 0;
    list-style-type: none;
    background-image : url(mainmenuItem_1Mb_02.png);
    background-position: top left;
    background-repeat: no-repeat;
    height : 43px;
    overflow: hidden;
}

#hpb-nav ul::after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#hpb-nav li{
    float: left;
    font-size : 14px;
    height : 43px;
    overflow: hidden;
    padding-right: 1px;
    background-image : url(mainmenuItem_1Mb_02.png);
    background-position: top right;
    background-repeat: no-repeat;
}

* html #hpb-nav li{
    /* ie6用ハック */
    width: 125px;
}

#hpb-nav li a{
    display: block;
    overflow: hidden;
    text-align: center;
    padding-left : 8px;
    padding-right : 8px;
    padding-top : 15px;
    height : 55px;
}

* html #hpb-nav li a{
    /* ie6用ハック */
    padding-left: 5px;
}

#hpb-nav li span.en{
    display: none;
}

#hpb-nav a:link
{
}
#hpb-nav a:visited
{
}
#hpb-nav a:hover{
    background-image : url(mainmenu_1Mb_02_on.png);
    background-position: left top;
    background-repeat: no-repeat;
}
#hpb-nav a:active{
    background-image : url(mainmenu_1Mb_02_on.png);
    background-position: left top;
    background-repeat: no-repeat;
}


/* トップページ デザイン定義 */

.hpb-layoutset-01 #hpb-title h2{
    margin : 90px 0px 0px;
    overflow: hidden;
    text-indent: -9999px;
    background-image : url(top_mainimg_1Mc_02.png);
    background-position: top center;
    background-repeat: no-repeat;
  height : 298px;
}

/* =======================================================
  レスポンシブ設定
======================================================= */
@media screen and (max-width: 768px) {

	body{
		min-width: 100%;
		background-image : none;
		border-top-width: 9px;
		border-top-color : #0080c0;
		border-top-style: solid;
	}

	/*--------------------------------------------------------
	  レイアウト設定
	--------------------------------------------------------*/
	#hpb-container{
		background-image : none;
	}
	#hpb-header{
		width: 100%;
		padding-bottom: 10px;
		position: relative;
	}
	#hpb-inner{
		width: 100%;
		margin-top: 0;
	}
	#hpb-wrapper{
		padding-top: 0;
	}
	.hpb-layoutset-01 #hpb-wrapper{
		width: 100%;
	}
	.hpb-layoutset-02 #hpb-wrapper{
		width: 100%;
		float: none;
	}
	#hpb-main{
		width: 96%;
		float: none;
		padding-top: 0;
		margin-left: auto;
		margin-right: auto;
	}
	.hpb-layoutset-02 #hpb-main{
		padding-top: 12px;
	}
	#hpb-aside{
		max-width: 96%;
		float: none;
		margin-left: auto;
		margin-right: auto;
		padding-top: 0;
		padding-bottom: 20px;
	}
	.hpb-layoutset-02 #hpb-aside{
		margin-top: 0;
	}
	#hpb-footer{
		width: 100%;
		padding-top: 0;
		border-top-width: 1px;
		border-top-color: #a2a2a2;
		border-top-style: solid;
		background-color: #d3d3d3;
	}
	#hpb-nav{
		width: 100%;
		float: none;
		border-top-width: 1px;
		border-top-color: #d8d8d8;
		border-top-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #d8d8d8;
		border-bottom-style: solid;
		position: relative;
		top : 0px;
	}

	/*スライドショー設定*/

	#hpb-slideshow1{
		font-size : 150%;
		box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3); /* 右上に影、ぼかし半径10px、色は半透明の黒 */
  		font-weight : 700;
	}

	.caption{
   		position: absolute;
  		top: 50%; /* 元の位置から5%下に調整 */
  		left:50%;
 		transform: translate(-50%, -50%);
 		width : 86%;
  		color: white;
  		background-color: rgba(0, 0, 0, 0.0);
  		padding: 0px;
		text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
		display: flex;
  		justify-content: center; /* 水平方向中央揃え */
		text-align: center;
	}

	/*--------------------------------------------------------
	  デザイン設定
	--------------------------------------------------------*/
	/* ヘッダー領域 */
	#hpb-headerLogo{
		width: 98%;
		float: none;
		margin-left: auto;
		margin-right: auto;
	}

	/* コンテンツ配置領域 */
	/* ナビゲーション */
	#hpb-nav ul{
		display: none;
		padding-left: 0;
		height: auto;
	}
	#hpb-nav ul.toggled-on{
		display: block;
	}
	#hpb-nav li{
		float: none;
		height: auto;
		padding-right: 0;
		
		border-top-width: 1px;
		border-top-color: #d8d8d8;
		border-top-style: solid;
	}
	#hpb-nav li a{
		text-align: left;
		padding-top: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		height: auto;
	}
	#hpb-nav a:hover,
	#hpb-nav a:active{
		background-image: none;
	}
	#hpb-nav a:hover,
	#hpb-nav a:active{
		border-top-width: 5px;
		border-top-color:#1654af;
		border-top-style: solid;
		padding-top: 5px;
	}

	/* トップページ デザイン定義 */
	.hpb-layoutset-01 #hpb-title h2{
		height: 180px;
		background-size: contain;
	}
	img{
       display: block;
	margin-left : auto;
       margin-right : auto;	
	}
	/*スマホ画面でのスライドショー設定*/
	p.slide{
       font-size : 90%;
	text-align: center;
	}

}