@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 #01554F;
		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: 30px 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%;
	}



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

	.child3			/*タイトルh3*/
	{
		width:98%;
		background:#008040;
		position:relative;

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

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


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

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


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

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

	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: 35px; /* コメントエリアの高さ */
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: #01554F;
  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: #01554F;
		  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;
  }
}




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

@media screen and (max-width:768px){
.float-left  { float: none; }
.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% ; }
}