@charset "UTF-8";


/*================================================
 *           ipad 向けデザイン
 ================================================*/

@media screen and (max-width:768px) {
body {
	font-size: 13px;	/* 全体の文字サイズ */
	line-height: 1.4em;	/* 行間 */
}

	.lock {
		overflow:hidden;
	}

	header {
		z-index:2;
		height: 95px;
		box-sizing:border-box;
		position:fixed;
		text-align:center;
		background:#fff;
		border-top:10px solid #2333A0;
		top:0;
		right:0;
		padding:8px 15px 8px; /* （上、左右、下） */
	}

	.summary {
  visibility:hidden; /* 要素ごと消去 */
	}

 img{
   max-width: 100%;
   height: auto;
 }

	nav {
		background:#A0A0A0;
	}
	nav ul {
		margin:0;
		padding:0;
		}

	nav .inner > ul {
		z-index:2;
		overflow:auto;
		position:fixed;
		top:80px;/* メニューが出てくる位置 */
		right:0;
		width:100%;
		height:88%;
		height:-webkit-calc(100% - 53px);
		height:calc(100% - 53px);
	}
	nav li {
		position:relative;
		width:100%;
		float:none;
		margin:0;
		text-align:left;
		list-style:none;
		border-bottom:1px solid #fff;
		background:#A0A0A0;
	}

	nav li:first-child {
		border-top:0;
	}
	nav li:last-child {
		border-bottom:0;
	}

	nav li a {
		display:block;
		padding:10px 30px;
		color:#fff;
		text-decoration:none;
		background:#000;　　　　/* メニューの色 */
	}
	nav li a:hover {
		color:#fff;
		background:#A0A0A0;
	}
	nav ul ul {
		display:none;
		position:relative;
	}
	nav li li a {
		box-sizing:border-box;
		width:100%;
		padding:10px 30px 10px 50px;
		text-align:left;
	}

	.subnav > a:before {
		display:block;
		content:"";
		position:absolute;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
		top:20px;
		right:30px;
		width:10px;
		height:10px;
		margin-top:-5px;
		background:#f1f1f1;
	}
	.subnav > a:after {
		display:block;
		content:"";
		position:absolute;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
		top:20px;
		right:30px;
		width:10px;
		height:10px;
		margin-top:-10px;
		background:#000;　　　/* ▼色（メニューの色と同じにする） */
	}
	.subnav a:hover:after {
	  background:#A0A0A0;
	}

	.active > a:before {
		margin-top:0;
	}
	.active > a:after {
		margin-top:5px;
	}

	.gnav {
		display:none;
	}

	#spMenu {
		display:block;
		z-index:2;
		position:fixed;
		top:25px;/* ハンバーガーの位置 */
		right:10px;
	}
	#spMenu:hover {
		cursor:pointer;
	}

	#navBtn {
		display:inline-block;
		position:relative;
		width:47px;
		height:47px;
		border-radius:5%;
		background:#F6F6F6;	/* ハンバーガーの色 */
	}
	#navBtnIcon {
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		width:25px;/* 真中ラインの長さ */
		height:2.2px;/* 真中ラインの太さ */
		margin:-1px 0 0 -13px;/* ライン全体の位置 */
		background:#000;/* 真中ラインの色 */
		transition:0.2s;
	}
	#navBtnIcon:before,
	#navBtnIcon:after {
		display:block;
		content:'';
		position:absolute;
		top:50%;
		left:0;
		width:25px;/* 上下ラインの長さ */
		height:2.2px;/* 上下ラインの太さ */
		background:#000;/* 上下ラインの色 */
		transition:0.3s;
	}
	#navBtnIcon:before {
		margin-top:-9px;/* 上ラインの位置 */
	}
	#navBtnIcon:after {
		margin-top:7px;/* ラインの空きスペース */
	}
	#navBtn .close {
		background:transparent;
	}
	#navBtn .close:before,
	#navBtn .close:after {
		margin-top:0;
	}
	#navBtn .close:before {
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
	}
	#navBtn .close:after {
		transform:rotate(-135deg);
		-webkit-transform:rotate(-135deg);
	}

	.col_two_one ul {
		margin-right:0;
	}
	.col_two_one li {
		width:100%;
	}
	.col_two_one li:nth-child(2n+1) {
		clear:both;
	}


	.inner {
		position:relative;
		width:100%;
		margin: 0;		/* 左右に[auto]を指定することで、真ん中に寄る */
	}



	.slide {
		margin:0px -20px 0px 0px;
	}
	.slidePrev {
	    display: none;
	}
	.slideNext {
	    display: none;
	}
.controlNav {
  visibility:hidden; /* 要素ごと消去 */
}
}



/*================================================
 *           ipad 向けデザイン
 ================================================*/

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

		#container{
			width:100%;
			margin: 0 auto ;
			overflow: hidden;
		}

		#wrapper	{
			width: auto ;
			padding: 10px 10px 18px 10px; /* パディング（上右下左） */
			border: none ;		/* 枠線 */
			float: none ;
		}

		#main
		{
			width: auto ;
			margin: 10px 0px 10px 0px; /* マージン（上右下左） */
			padding: 0px 0px 30px 0px; /* パディング（上右下左） */
			border: none ;		/* 枠線 */
			float: none ;
		}

  #pan-url{
	  display: none;
  }
  #pan-list{
	  display: none;
  }


/* h2（左下矢印タイトルライン） */

	.child			/*タイトルh2*/
	{
		width:98%;
		background:#A00E15;
		position:relative;

		font-size:1.1em;					/*テキストの補正*/
		line-height : 200%;
		font-weight:bold;
		color:#fff;
		margin:0px 0px 18px 0px; /* 外側のパディング（上右下左） */
		padding:5px 0px 0px 10px; /* 内側のパディング（上右下左） */
	}

	.child:after			/*擬似要素:after*/
	{
		content: ' ';
		width:0;
		height: 0;
		position:absolute;
		border:10px solid transparent;
		border-top-color:#A00E15;
		top:100%;
		left:3%;
	}


/* ========tableＣＳＳ======== */

/* --- 表全体 --- */
table.example {
width: 100%; /* 表の幅 */
}



/* --- 表全体（時間割） --- */

table.example2 {
width: 100%; /* 表の幅 */
margin-bottom: 0px; /* 表の下マージン */
border: 1px #c0c0c0 solid; /* 大枠の境界線 */
border-collapse: collapse;
font-size: 0.75em;
}

/* --- 見出しセル --- */
table.example2 th {
padding: 6px 3px; /* セルのパディング（上下、左右） */
border: 1px #c0c0c0 solid; /* セルの境界線 */
background-color: #FFFF80; /* データセルの背景色 */
}

/* --- セル --- */
table.example2 td {
padding: 6px 3px; /* セルのパディング（上下、左右） */
border: 1px #c0c0c0 solid; /* セルの境界線 */
}

/* --- データセル --- */
table.example2 tbody td {
background-color: #ffffff; /* データセルの背景色 */
}




/* ========メールフォーム======== */

/* --- フォームエリア --- */

	form.contact {
	width: 100%; /* フォームエリアの幅 */
	font-size: 10px;
	padding:0px 0px 0px 0px;
	}
	/* --- フォームエリア内の段落 --- */
	form.contact p {
	line-height: 110%;
	}
	/* --- 段落内の「必須」画像 --- */
	form.contact p.attention img {
	vertical-align: middle;
	}

	/* --- テーブル --- */
	form.contact table {
	width: 100%; /* テーブルの幅 */
	background-color: #f9f9f9; /* テーブルの背景色 */
	border: 1px #c0c0c0 solid; /* テーブルの境界線 */
	}
	/* --- データセル（th） --- */
	form.contact th {
	width: 30%; /* thの幅 */
	}
	/* --- データセル（td） --- */
	form.contact td {
	padding: 10px 5px 7px; /* データセルのパディング（上、左右、下） */
	background-color: #ffffff; /* データセルの背景色 */
	border-bottom: 1px #c0c0c0 dotted; /* データセルの下境界線 */
	}
	/* --- データセル内の補足テキスト --- */
	form.contact td span.supplement {
	color: #808080;
	}

	form.contact td span.supplement2 {
	color: #FF0000;
	}

	/* --- 必須項目セル --- */
	form.contact td.required {
	width: 10%; /* 必須項目セルの幅 */
	padding: 10px 3px; /* 必須項目セルのパディング（上下、左右） */
	background-color: #FFF0F8; /* 必須項目セルの背景色 */
	text-align: center;
	}
	/* --- 任意項目セル --- */
	form.contact td.arbitrary {
	background-color: #f5f5f5; /* 任意項目セルの背景色 */
	}

	/* --- フォーム部品 --- */
	form.contact input,
	form.contact select,
	form.contact textarea {
	margin-bottom: 2px; /* フォーム部品の下マージン */
	}
	/* --- フォーム部品のサイズ --- */
	/* --- （長めのテキスト入力欄） --- */
	#company, #section, #name, #name1,
	#email,#address {
	width: 90%; /* フォーム部品の幅 */
	}
	/* --- （中めのテキスト入力欄） --- */
	#tel,#fax1 {
	width: 60%; /* フォーム部品の幅 */
	}
	/* --- （短めのテキスト入力欄） --- */
	#zip1, {
	width: 40%; /* フォーム部品の幅 */
	}
	/* --- （複数行のテキスト入力欄） --- */
	#message {
	width: 90%; /* フォーム部品の幅 */
	height: 10em; /* フォーム部品の高さ */
	}

}



/*================================================
 *       サイド  ipad 向けデザイン
 ================================================*/

@media screen and (max-width:768px)
{
	#side
	{
  display: none;
	}
	#side01
	{
		float: none;
		width: 100%; /* エリアの幅 */
}

}



/* ========2つ横並び写真レイアウト======== */

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

/* --- リスト項目 --- */
ul.thumbnail01 li {
width: 100%; /* 項目の幅 */
}

/* --- 項目内容 --- */
ul.thumbnail01 dl {
width: 98%; /* 内容の幅 */
font-size: 16px;
}

/* --- コメントエリア --- */
ul.thumbnail01 dd {
margin: 0 auto; /* 内容のセンタリング */
padding: 0px 0px 0px; /* リストエリアのパディング（上、左右、下） */
height: 40px; /* コメントエリアの高さ */
line-height: 150%;
}

}


/* ========トップ３つ並びリンク======== */

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

/* --- リスト項目 --- */
ul.thumbnail li {
width: 100%; /* 項目の幅 */
float: center;
}

/* --- 項目内容 --- */
ul.thumbnail dl {
width: 230px; /* 内容の幅 */
margin: 0 auto; /* 内容のセンタリング */
font-size: 14px;
}

/* --- コメントエリア --- */
ul.thumbnail dd {
margin: 0 0 0px; /* コメントエリアのマージン（上、左右、下） */
padding: 0px 0px 20px; /* リストエリアのパディング（上、左右、下） */
height: 0px; /* コメントエリアの高さ */
line-height: 150%;
}

}


/* ========３つ横並び写真レイアウト======== */

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

/* --- リスト項目 --- */
ul.thumbnail03 li {
width: 100%; /* 項目の幅 */
float: center;
}

/* --- 項目内容 --- */
ul.thumbnail03 dl {
width: 230px; /* 内容の幅 */
margin: 0 auto; /* 内容のセンタリング */
font-size: 14px;
}

/* --- コメントエリア --- */
ul.thumbnail03 dd {
margin: 0 0 0px; /* コメントエリアのマージン（上、左右、下） */
padding: 0px 0px 20px; /* リストエリアのパディング（上、左右、下） */
height: 50px; /* コメントエリアの高さ */
line-height: 150%;
}

}



/*================================================
 *      フッター  ipad 向けデザイン
 ================================================*/

@media screen and (max-width:768px)
{
.footermenu {
	text-align: left;
	width: 95%;
	margin: 0px auto;
	margin-bottom: 20px;
 padding:0px 0px 0px 20px; /* 余白（上右下左） */
	overflow: hidden;
	font-size: 11px;	/*文字サイズ*/
}
.footermenu ul {
float: left;
width: auto;	/*１列あたりの幅*/
height: 100px;	/*１列あたりの高さ。※メニュー量に応じて調整して下さい。*/
border-right: 0px solid #fff;	/*列ごとの右側に入る線の設定*/
padding-left: 40px;	/*境界線との間にとるスペース*/
list-style:none;
}
/*一番左の線*/

.footermenu ul:first-child {
	border-left: 0px solid #fff;
}
.address{
	clear: both;
 padding:30px 0px 20px 0px; /* 余白（上右下左） */
 font-size:0.75em;
 color:#fff;
 text-align:center;
}
}



/* ================ スマフォＴＥＬ ================ */

#tel-hero {
  margin-top: 0px;
  margin-bottom: 0px;
  background: #000;
  opacity: .97;
}
#tel-hero .tel-hero-wrap {
  padding:10px 0px 10px 0px; /* 余白（上右下左） */
  display: table;
  width: 100%;
  z-index: 99;
}
@media screen and (max-width: 768px) {
		#tel-hero {
		  margin-top: 0px;/* 開始位置 */
		  margin-bottom: 0px;
		  background: #0080C0;/* モバイル時の電話番号の背景色 */
		  opacity: .77;
		}
  #tel-hero .tel-hero-wrap {
  padding-top: 1.0em;/* モバイル時のテキスト開始位置 */
  }
}
#tel-hero .tel-hero-wrap .tel-hero-intro {
  vertical-align: middle;
  text-align: center;
}


#tel-hero .tel-hero-wrap .tel-hero-intro > h5 {
  font-family: 'arial black'; テキストのフォント指定
  font-size: 36px;
  color: #005BAC;/* 文字色 */
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #tel-hero .tel-hero-wrap .tel-hero-intro > h5 a{
  font-size: 24px;
  color: #fff;/* 文字色 */
  font-weight: bold;
  }
}




/* ========プロフィール沿革======== */

#update-p {
width: 100%; /* 概要リストの幅 */
font-size: 0.90em;
padding: 9px 20px 7px;
padding-bottom: 12px; /* ボックスの下パディング */
margin-right: 0px; /* メインカラムの右マージン（サイドバーの幅以上） */
}

/* --- 見出し --- */
#update-p h3 {
margin: 0 0 5px; /* 見出しのマージン（上、左右、下） */
font-size: 100%;
}

/* --- 沿革リスト --- */
#update-p dl {
width: 100%; /* 新着リストの幅 */
height: 100%; /* 新着リストの高さ */
margin: 0;
padding: 0px; /* ボックス内パディング */
background-color: #fff; /* 新着リストの背景色 */
border-top: 1px #000080 dotted; /* 新着リストの上境界線 */
border-bottom: 1px #000080 dotted; /* 新着リストの下境界線 */
}

/* --- 日付エリア --- */
#update-p dt {
width: 15%; /* 日付エリアの幅 */
float: left;
padding: 17px 0px 16px 3px; /* 日付エリアのパディング（上右下左） */
line-height: 150%;
}

/* --- 本文エリア --- */
#update-p dd {
margin: 0;
padding: 17px 3px 16px 5.6em; /* 本文エリアのパディング（上右下左） */
border-bottom: 1px #000080 dotted; /* 本文エリアの下境界線 */
line-height: 150%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}






/* ========新着情報データ======== */


@media screen and (max-width:768px)
{
	div.update_new dl {
	width: auto; /* 新着リストの幅 */
	height: 100px; /* 新着リストの高さ */
	overflow-y: auto;
	margin: 0;
	background-color: #FFF7FF; /* 新着リストの背景色 */
	border-top: 0px #00557D dotted; /* 新着リストの上境界線 */
	border-bottom: 0px #00557D dotted; /* 新着リストの下境界線 */
	}

	/* --- スマホのスクロール --- */
	div.update_new dl::-webkit-scrollbar{
	width: 5px;
	background: #9aadfc;
	}
	div.update_new dl::-webkit-scrollbar-thumb{
	background: #435295;
	border-radius: 2px;
	}
}




/* ---ＣＳＳの要素 --- */


@media screen and (max-width:768px){
.float-left  { float: none !important; display: block; margin: 0 auto; width: 230px; }/* ---画像を中央にするためにwidth: 230px --- */
.float-center{ float: none; }
.float-right { float: none !important; display: block; margin: 0 auto; width: 230px; }/* ---画像を中央にするためにwidth: 230px --- */
}


@media screen and (max-width:768px){
.text14 {font-size: 0.88em; line-height : 140% ; }
.text16 {font-size: 1.08em; line-height : 140% ; }
.text18 {font-size: 1.08em; line-height : 140% ; }
.text20 {font-size: 1.08em; line-height : 140% ; }
.text26 {font-size: 1.2em; line-height : 140% ; }
.text30 {font-size: 1.2em; line-height : 140% ; }
}


@media screen and (max-width:768px){
.strong{ font-weight:bold; }
.white  { color : #ffffff ; }
.black  { color : #000000 ; }
.blue   { color : #000094 ; }
.green  { color : #008000 ; }
.red    { color : #FF0F0F; }	 

.padding-6px{ padding:6px; }
.padding6   { padding:6px; }
.padding12  { padding:12px; }
.padding16  { padding:16px; }
.padding20  { padding:20px; }
.padding30  { padding:30px; }
.padding-b6 { padding-bottom:6px; }
.padding-b12{ padding-bottom:12px; }
.padding-b20{ padding-bottom:20px; }
.padding-b30{ padding-bottom:30px; }
.padding-t6 { padding-top:6px; }
.padding-t12{ padding-top:12px; }
.padding-t20{ padding-top:20px; }
.padding-t30{ padding-top:30px; }
.margin6   { margin:6px; }
.margin12  { margin:12px; }
.margin20  { margin:20px; }
.margin30  { margin:30px; }
.margin-b6 { margin-bottom:6px; }
.margin-b12{ margin-bottom:12px; }
.margin-b20{ margin-bottom:20px; }
.margin-b30{ margin-bottom:30px; }
.margin-t6 { margin-top:6px; }
.margin-t12{ margin-top:12px; }
.margin-t20{ margin-top:20px; }
.margin-t30{ margin-top:30px; }

.margin-b-20{ margin-bottom:-20px; }

}