@charset "UTF-8";

/* ボディ全体の要素 */

body {
  font-family: "Helvetica Neue",
											    Arial,
											    "Hiragino Kaku Gothic ProN",
											    "Hiragino Sans",
											    Meiryo,
											    sans-serif;
	font-size: 15px;	/* 全体の文字サイズ */
	color: #333;	/*全体の文字色*/
	line-height: 1.6em;	/* 行間 */
	letter-spacing: 1px;	/* 文字間 */
	margin: 0px;
	padding: 0px;
	background: #fff ;			/* 背景色 */
}

/* 全体の基本要素 */

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure{
	margin: 0px;
	padding: 0px;
}

ul{
	list-style-type: none;
}

form {
	margin: 0px;
}

a {
	color: #0000FF;	/*リンクテキストの色*/
	text-decoration: none;	/*下線を消す*/
}

a:hover {
	color: #FF0000;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す*/
}

img {
	border: none;
	vertical-align: bottom;
}

br {
   letter-spacing:normal;
}

img {
   border:0;
   vertical-align:bottom;
}

input,textarea,select {
	font-size: 1em;
}

table {
	border-collapse:collapse;
	font-size: 100%;
	border-spacing: 0;
}

hr {
		 display:none;
		 overflow:hidden;
		 line-height:0; 
}

.cleaner {
		 clear: both;
		 font-size: 0;
		 line-height: 0;
}

.inner {
	position:relative;
	width:980px;
	margin:0 auto;
}

header {
	box-sizing:border-box;
	position:relative;
	width:100%;
	border-top:10px solid #01554F;
}


nav {
	width:100%;
	background:#fff;
	box-shadow:0 1px 2px #00274F;
	?zoom:1;
}
nav:after {
   content:'';
   display:block;
   clear:both;
}



/*================================================
 *  ヘッダー
 ================================================*/

header {
	height: 150px;
	padding:0px 0px 0px 0px; /* 内側のパディング（上右下左） */
}

.summary {
	position:absolute;
	top:0;
	right:0px;
	margin:0;
	z-index:-1;
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */

.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */

@media only screen and (max-width: 768px) {
.pc { display: none !important; }
.sp { display: block !important; }
}


/*================================================
 *  グローバルナビゲーション
 ================================================*/

@media print, screen and (min-width:769px) {
	nav {
		background:#5BB190;	/* メニューの色 */
		border-bottom:2px solid  #414141;	/* 下のライン色 */
		box-shadow:0 0px 0px #000;
		z-index:3;
	}
	nav ul {
		margin:0;
		padding:0;
	}
	nav li {
		position:relative;
		width:20%;
		float:left;
		margin:0;
		padding:0;
		text-align:center;
		list-style:none;
	}
	nav li:first-child {
		width:20%;
	}
	nav li:before {
		content:"";
		margin-top:-20px;
		position:absolute;
		top:50%;
		left:0;
		width:2px;	/* 縦ラインの太さ */
		height:42px;	/* 縦ラインの長さ */
		background:#fff;	/* 縦ラインの色 */
	}
	nav li:last-child:after {
		content:"";
		margin-top:-20px;
		position:absolute;
		top:50%;
		right:0;
		width:2px;	/* 縦ラインの太さ（最後） */
		height:42px;	/* 縦ラインの長さ（最後） */
		background:#fff;	/* 縦ラインの色（最後） */
	}
	nav li:hover:before,
	nav li:hover + li:before, 
	nav li:last-child:hover:after,
	nav li li:before,
	nav li li:after {
		display:none;
	}
	nav li:last-child li {
		left:-50%;
	}
	nav li a {
		display:block;
		padding:10px 0;
		color:#fff;
		font-weight:bold;
		text-decoration:none;
	}
	nav li ul {
		display:block !important;
		position:absolute;
		top:100%;
		left:0;
		margin:0;
		padding:0;
		border-radius:0 0 3px 3px;
		z-index:3;
	}
	nav li ul li {
		overflow:hidden;
		width:150%;
		height:0;
		-moz-transition:.2s;
		-webkit-transition:.2s;
		-o-transition:.2s;
		-ms-transition:.2s;
		transition:.2s;
	}
	nav li li:first-child {
		margin:1px 0px;
		width:150%;
	}
	nav li ul li a {
		margin:0px 0px;
		padding:10px 15px;
		background:#646464;	/* メニュー子の色 */
		border-top:2px solid #414141;	/* 下のライン色 */
		border-bottom:2px solid #414141;	/* 下のライン色 */
		text-align:left;
		font-weight:normal;
	}
	nav li:hover > a {
		background:#000;	/* オンマウスの色 */
		color:#fff;
	}
	nav li:hover > a:hover {
		background:#000;	/* オンマウスの色 */
	}

	.gnav {
		display:block !important;
	}

	#spMenu {
		display:none;
	}

	.showNav {
		background:#fff !important;
	}

	.showSub {
		overflow:visible;
		min-height:42px;
		border-bottom:2px solid #fff;
	}
	.showSub:last-child {
		border-bottom:0;
	}
	.showSub:last-child a {
		border-radius:0 0 3px 3px;
	}

	.fixed {
		position:fixed;
		top:0;
		left:0;
	}
}


}


/* ========　モバイル用　電話　======== */

@media (min-width: 769px) {

#phon{
display: none;/* PCでは電話番号を消す*/
}
}



/* ========　 見出しタイトルライン　======== */

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

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

	font-size:1.2em;					/*テキストの補正*/
	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.5%;
	background:#008040;
	position:relative;

	font-size:1.2em;					/*テキストの補正*/
	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%;
}




/* h6（イメージ背景）　 */

h6 {
 margin-top:5px;
 margin-bottom:15px;
 padding:2px 0 0 35px;
 color:#000;
 font-size:1.00em;
 font-weight:bold;
 line-height:28px;
 border:1px solid #D8D8D8;
 background:url(../images/bg_h2.gif) 0 0 no-repeat;
}




/* ========　基本　本文エリア　======== */

/* --- コンテナ --- */

#container {
width: 100%; /* ページの幅 */
margin: 0 auto; /* センタリング */
background-color: #ffffff; /* ページの背景色 */
	}


/* --- ラッパー --- */

#wrapper{
	width: 960px ;
	background-color: #ffffff; /* ページの背景色 */
	background-position:center;
	margin: 0 auto ;		/* 左右に[auto]を指定することで、真ん中に寄る */
	padding: 12px 0px 0px 0px; /* パディング（上右下左） */
	overflow: hidden ;
}


/* ========　２カラム　本文エリア　======== */

#main
{
	float: left ;		/* 左に寄せる */
	background-color: #ffffff; /* ページの背景色 */
	width: 700px ;
	padding: 35px 30px 20px 0px;					/* 上右下左の余白 */
	border: 0px solid rgba(0,0,0,.1) ;		/* 枠線 */
}


#main p
{
	font-size:1.0em;	/* 全体の文字サイズ */
	color: #333;	/*全体の文字色*/
	line-height: 1.6em;	/* 行間 */
	letter-spacing: 1px;	/* 文字間 */
	margin: 0px;
	padding: 0px 8px 12px 18px; /* パディング（上右下左） */
}



/* ========　サイドスペース　======== */

/* --- サイドボックス --- */
#side .box {
				margin: 0px;
				padding: 0px 0px 0px 0px; /*  上右下左  */
				width: 220px; /* ボックスの幅 */
				background-color: #FFF; /* ボックスの背景色 */
				border: 1px #c0c0c0 solid; /* ボックスの境界線 */
				font-size: 14px; /* ボックスの文字サイズ */
				}

/* --- 見出し --- */
#side .box h3 {
				font-size:15px;
				font-weight:bold;
				color:#fff;
				padding:12px 3px 12px 12px; /*  上右下左  */
				background-color: #000; /* 見出しの背景色 */
				border-bottom: 1px #c0c0c0 solid; /* 見出しの下境界線 */
				}

/* --- サイドボックス内の段落 --- */
#side .box p {
				margin: 0px;
				padding:12px 3px 12px 12px; /*  上右下左  */
				font-size:14px;
		  line-height : 150%;
				}


/* --- サイドボックス② --- */
#side .box2 {
				width: 220px; /* ボックスの幅 */
				background-color: #FFF; /* ボックスの背景色 */
				border: 1px #c0c0c0 solid; /* ボックスの境界線 */
				font-size: 13px; /* ボックスの文字サイズ */
				}

/* --- 見出し② --- */
#side .box2 h3 {
				font-size:13px;
				font-weight:bold;
				color:#fff;
				padding:6px 3px 6px 12px; /*  上右下左  */
				background-color: #808000; /* 見出しの背景色 */
				border-bottom: 1px #c0c0c0 solid; /* 見出しの下境界線 */
				}

/* --- サイドボックス②内の段落 --- */
#side .box2 p {
				margin: 0px;
				padding:12px 3px 12px 12px; /*  上右下左  */
				font-size:13px;
		  line-height : 150%;
				}


/* サイド　モバフレ消える */

#side
{
	float: right ;		/* 右に寄せる */
	width: 220px ;
	padding: 35px 0px 0px 0px;					/* （上右下左）  */
}





/* ========会社概要======== */

/* テーブル要素（table css） */

#campany table {
width: 95%; /* 概要リストの幅 */
font-size: 0.90em;
vertical-align:middle;
margin:0 auto;
table-layout:fixed;
border:1px solid #999999;
}
#campany th {
background-color:#D5D5D5;
padding:12px;
text-align:center;
color:#000000;
border:1px solid #999999;
}
#campany td {
padding:12px;
border:1px solid #999999;
}


/* ========フレーム各所======== */

/* アクセスマップ(iframe) */

div.iframe-map {
position: relative;
width: 100%;
padding-top: 75%; /* サイズ比(高さ÷幅) */
}

div.iframe-map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



/* ========業務の流れ======== */

/* --- リストエリア --- */
ol.flow {
width: 98%; /* エリアの幅 */
margin: 0;
padding: 9px 0px 7px;
list-style-type: none;
font-size: 14px;
}

/* --- リスト項目 --- */
ol.flow li {
margin-bottom: 12px; /* リスト項目の下マージン */
padding-bottom: 28px; /* リスト項目の下パディング */
background: url(../images/flow_back.gif) no-repeat center bottom; /* リスト項目の背景 */
}
/* --- 最後のリスト項目 --- */
ol.flow li.last {
margin-bottom: 0;
padding-bottom: 0;
background-image: none;
}

/* --- ボックス --- */
ol.flow dl {
margin: 0;
border: 1px #c0c0c0 solid; /* ボックスの境界線 */
}

/* --- タイトルエリア --- */
ol.flow dt {
padding: 9px 10px 7px; /* タイトルエリアのパディング（上、左右、下） */
background-color: #f9f9f9; /* タイトルエリアの背景色 */
border-bottom: 1px #c0c0c0 solid; /* タイトルエリアの下境界線 */
font-weight: bold;
color: #999999;
}
/* --- タイトル --- */
ol.flow dt strong {
margin-left: 3px;
color: #2b2b2b;
}

/* --- 本文エリア --- */
ol.flow dd {
margin: 0;
padding: 15px 10px; /* 本文エリアのパディング（上下、左右） */
background-color: #ffffff; /* 本文エリアの背景色 */
color: #2b2b2b;
line-height: 150%;
}




/* ========求人案内======== */

/* テーブル要素　table css */

#recruit01 table {
width: 95%; /* 概要リストの幅 */
font-size: 0.90em;
vertical-align:middle;
margin:0 auto;
table-layout:fixed;
border:1px solid #999999;
}
#recruit01 th {
background:#DFFFFF;
padding:12px;
text-align:center;
border:1px solid #999999;
}
#recruit01 td {
padding:12px;
border:1px solid #999999;
}

#recruit02 table {
width: 95%; /* 概要リストの幅 */
font-size: 0.90em;
vertical-align:middle;
margin:0 auto;
table-layout:fixed;
border:1px solid #999999;
}
#recruit02 th {
background:#FFE6FF;
padding:12px;
text-align:center;
border:1px solid #999999;
}
#recruit02 td {
padding:12px;
border:1px solid #999999;
}

#recruit03 table {
width: 95%; /* 概要リストの幅 */
font-size: 0.90em;
vertical-align:middle;
margin:0 auto;
table-layout:fixed;
border:1px solid #999999;
}
#recruit03 th {
background:#eeeeee;
padding:12px;
text-align:center;
border:1px solid #999999;
}
#recruit03 td {
padding:12px;
border:1px solid #999999;
}




/* ========リスト（マーク●画像）======== */

/* --- リストエリア --- */
ul.list {
margin: 0;
padding: 0 0 15px 0px;
list-style-type: none;
}

/* --- リスト項目 --- */
ul.list li {
padding: 0 30px 5px 30px; /* 項目のパディング（上右下左） */
background: url(../images/disc.gif) no-repeat 20px 0.4em; /* マーカー画像 */
font-size:0.95em;
line-height: 150%;
}

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



/* ========リスト（◎赤）======== */

.list_01-wrap {
		list-style:  none;  /* デフォルトのアイコンを消す */
		margin:  0px 12px 12px 20px;    /* （上右下左） */
		padding: 0px 0px 0px 0px;       /* （上右下左） */
  line-height: 170%; 　　　　　　 /* 文字間 */
}


.list_01:before {
		content:  "";     /* 空の要素作成 */
		width:  5px;               /* リストサイズ幅 */
		height:  5px;              /* リストサイズ高 */
		display:  inline-block;     /* インラインブロックにする */
		border-radius:  50%;        /* 要素を丸くする（下記要素より優先） */
		border: double 4px #F44336;　/* ◎色 */
		position:  relative;        /* 位置調整 */
		top: 1px;                  /* 位置調整 */
		margin-right: 10px;          /* 余白指定 */
}



/* ========リスト（マーク♪画像）======== */

.list_02-wrap {
		list-style:  none;              /* デフォルトのアイコンを消す */
		margin:  0px 12px 0px 20px;    /* （上右下左） */
		padding: 0px 0px 0px 0px;       /* （上右下左） */
  line-height: 170%; 　　　　　　 /* 文字間 */
}


.list_02 {
		padding: 0 0px 0px 30px; /* 項目のパディング（上右下左） */
		background: url(../images/onp.png) no-repeat 0px 2px; /* 画像調整 */
}



/* ========丸数字のリスト======== */

ol.cc_list {
  counter-reset: my-counter;
  list-style: none;
		margin: 0px 12px 12px 20px;				/* （上右下左） */
		padding: 0px 0 0; /* リストエリアのパディング（上、左右、下） */
}
 
ol.cc_list li {
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
		font-size:0.98em;
}

ol.cc_list li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #bada55;
  color: #222;
  display: block;
  float: left;
  line-height: 22px;
  margin-left: -30px;
  text-align: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}



/* ========業務内容エリア======== */


/* --- ２行エリア全体 --- */

#update2 {
width: 98%; /* 新着情報エリアの幅 */
font-size: 14px;
padding: 9px 20px 7px;
padding-bottom: 3px; /* ボックスの下パディング */
margin-right: 0px; /* メインカラムの右マージン（サイドバーの幅以上） */
}

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

/* --- リスト --- */
#update2 dl {
width: 95%; /* リストの幅 */
height: auto; /* リストの高さ */
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px; /* ボックス内パディング（上右下左） */
background-color: #fff; /* 新着リストの背景色 */
border-top: 0px #000080 dotted; /* 新着リストの上境界線 */
border-bottom: 0px #000080 dotted; /* 新着リストの下境界線 */
}

/* --- 左エリア --- */
#update2 dt {
width: 220px; /* 左エリアの幅 */
float: left;
margin: 0px 0px 0px 0px;
padding: 3px 0px 3px 3px; /* 左エリアのパディング（上右下左） */
line-height: 150%;
}

/* --- 右エリア --- */
#update2 dd {
margin: 0px 0px 20px 0px;
padding: 0px 3px 20px 220px; /* 右エリアのパディング（上右下左） */
border-bottom: 1px #000080 dotted; /* 右エリアの下境界線 */
line-height: 150%;
}

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


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

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

/* --- 表タイトル --- */
table.example caption {
padding-bottom: 5px; /* 表タイトルの下パディング */
font-size: 13px;
font-weight:bold;
color:#000094;
text-align: left;
}

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

/* --- 見出しセル --- */
table.example thead th {
background-color: #deefff; /* 見出しセルの背景色 */
text-align: center;
}

/* --- フッタセル --- */
table.example tfoot td {
background-color: #f5f5f5; /* フッタセルの背景色 */
}

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




/* ========FlexBox ２列書き　レスポンシブ======== */

.container02 {
  display: flex;
  flex-wrap: wrap;
}
.column {
  width: 100%;
}

@media (min-width: 768px) {
  .column {
    width: 50%;
  }
}



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

/* --- リストエリア --- */
ul.thumbnail {
width: 100%; /* リストエリアの幅 */
margin: 0px 0px 0;
padding: 0px 0 0; /* リストエリアのパディング（上、左右、下） */
list-style-type: none;
}

/* --- リスト項目 --- */
ul.thumbnail li {
width: 230px; /* 項目の幅 */
float: left;
}

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

/* --- 写真エリア --- */
ul.thumbnail dt {
/* height: 180px; */ /* 写真エリアの高さ（dt要素の高さを指定する場合） */
margin-bottom: 5px; /* 写真エリアの下マージン */
}
ul.thumbnail dt img {
border: 0px #808080 solid; /* 写真の境界線 */
}

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

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




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

/* --- リストエリア --- */
ul.thumbnail01 {
width: 100%; /* リストエリアの幅 */
margin: 0px 0px 0;
padding: 0px 0 0; /* リストエリアのパディング（上、左右、下） */
list-style-type: none;
}

/* --- リスト項目 --- */
ul.thumbnail01 li {
width: 350px; /* 項目の幅 */
float: left;
}

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

/* --- 写真エリア --- */
ul.thumbnail01 dt {
/* height: 230px; */ /* 写真エリアの高さ（dt要素の高さを指定する場合） */
margin-bottom: 5px; /* 写真エリアの下マージン */
}
ul.thumbnail01 dt img {
border: 0px #808080 solid; /* 写真の境界線 */
}

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

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




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

/* --- リストエリア --- */
ul.thumbnail02 {
width: 100%; /* リストエリアの幅 */
margin: 0px 6px 0;
padding: 0px 0 0; /* リストエリアのパディング（上、左右、下） */
list-style-type: none;
}

/* --- リスト項目 --- */
ul.thumbnail02 li {
width: 340px; /* 項目の幅 */
float: left;
}

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

/* --- 写真エリア --- */
ul.thumbnail02 dt {
margin-bottom: 5px; /* 写真エリアの下マージン */
}
ul.thumbnail02 dt img {
border: 0px #808080 solid; /* 写真の境界線 */
}

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

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



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


/* --- フォームエリア --- */
form.contact {
width: 95%; /* フォームエリアの幅 */
font-size: 90%;
padding:0px 0px 0px 12px;
}
/* --- フォームエリア内の段落 --- */
form.contact p {
line-height: 150%;
}
/* --- 段落内の「必須」画像 --- */
form.contact p.attention img {
vertical-align: middle;
padding:0px 8px 3px 0px;/* 「必須」画像 パディング（上右下左） */
}

/* --- テーブル --- */
form.contact table {
width: 100%; /* テーブルの幅 */
background-color: #f9f9f9; /* テーブルの背景色 */
border: 1px #c0c0c0 solid; /* テーブルの境界線 */
}
/* --- 見出しセル（th） --- */
form.contact th {
width: 30%; /* 見出しセルの幅 */
padding: 10px 10px; /* 見出しセルのパディング（上下、左右） */
background-color: #fff; /* 見出しセルの背景色 */
border-bottom: 1px #c0c0c0 dotted; /* 見出しセルの下境界線 */
text-align: left;
line-height: 150%;
}
/* --- 見出しセル内の補足テキスト --- */
form.contact th span.supplement {
font-weight: normal;
}
/* --- データセル（td） --- */
form.contact td {
padding: 10px 10px 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: 7%; /* 必須項目セルの幅 */
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: 6px; /* フォーム部品の下マージン */
}
/* --- フォーム部品のサイズ --- */
/* --- （長めのテキスト入力欄） --- */
#company, #section, #name, #name1,
#email,#address {
width: 300px; /* フォーム部品の幅 */
}
/* --- （中めのテキスト入力欄） --- */
#tel,#fax1 {
width: 180px; /* フォーム部品の幅 */
}
/* --- （短めのテキスト入力欄） --- */
#zip1, {
width: 80px; /* フォーム部品の幅 */
}
#age, {
width: 30px; /* フォーム部品の幅 */
}
/* --- （複数行のテキスト入力欄） --- */
#message {
width: 350px; /* フォーム部品の幅 */
height: 10em; /* フォーム部品の高さ */
}

/* --- ボタン --- */
form.contact p.button {
margin: 20px 0 0; /* ボタンのマージン（上、左右、下） */
text-align: center;
}



/* ======== フッターＣＳＳ ======== */

@media print, screen and (min-width:769px) {

/*フッター全体*/

footer {
	clear: both;
	text-align: center;
	background: #000;	/*背景色*/
	color: #FFF;			/*文字色*/
	padding-top: 15px;
	padding-bottom: 15px;
}

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


footer a {
	color: #FFF;	/*文字色*/
	text-decoration: none;
	margin:20px 20px 20px 0px; /* 余白（上右下左） */
 padding:0px 0px 0px 15px; /* 余白（上右下左） */
 background: url(../images/bg_footmenu.gif) 0 50% no-repeat;

}
footer a:hover {
	color: #FC0;	/*マウスオン時の文字色*/
}


/*フッターメニュー*/

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


/* ======== フッター固定ボトムメニュー ======== */

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

/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
			border-bottom:15px solid #584007;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 100%;
   padding:0;
   margin:0;
   font-size: 14px;
   border-right: 1px solid #fff;
}

/*スタートメニュー（左）*/
#sp-fixed-menu li:first-child{
   background: #000000;
}

/*中間メニュー*/
#sp-fixed-menu li{
   background: #000000;
}

/*エンドメニュー（右）*/
#sp-fixed-menu li:last-child{
   background: #000000;
   border-right: 0px solid #fff;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:18px 0; /* メニューのパディング（上下、左右） */
}
}


/* ========ページトップへの戻り======== */

.totop {
	position:fixed;
	bottom:15px;
	right:25px;
}
.totop a {
	display:block;
	text-decoration:none;
}
.totop img {
	background:#A4A4A4;
}
.totop img:hover {
	background:#C2C2C2;
}

@media only screen and (max-width: 768px) {
.totop {
	bottom:90px;
	right:10px;
}
}



/* ========矢印のＣＳＳ======== */

.arrow{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
.arrow::before,
.arrow::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}

.sankaku::before{
left: 4px;
box-sizing: border-box;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #FF0000;
}



/* ========次ページ送り======== */


/* --- ページングエリア --- */
div.paging {
	margin: 20px 0;
}

/* --- メニューエリア --- */
div.paging ul.nl {
	margin: 0;
	padding: 4px 0; /* メニューのパディング（上下、左右） */
	list-style-type: none;
	text-align: center; /* メニューのセンタリング */
	font-size: 80%; /* メニューの文字サイズ */
}

/* --- メニュー項目 --- */
div.paging ul.nl li {
	display: inline;
	margin-right: -1px; /* 項目の右マージン */
}

/* --- リンク --- */
div.paging ul.nl li a {
	display: inline-block;
	padding: 4px 8px; /* リンクエリアのパディング（上下、左右） */
	background-color: #ffffff; /* リンクエリアの背景色 */
	border: 1px #c0c0c0 solid; /* リンクエリアの境界線 */
	text-decoration: none; /* テキストの下線（なし） */
}

/* --- ポイント時の設定 --- */
div.paging ul.nl li a: hover {
	background-color: #e0e0e0; /* ポイント時の背景色 */
	border: 1px #999999 solid; /* ポイント時の境界線 */
	text-decoration: underline; /* テキストの下線（あり） */
}

/* --- アクティブな項目 --- */
div.paging ul.nl li strong {
	display: inline-block;
	padding: 4px 8px; /* 項目のパディング（上下、左右） */
	background-color: #e0e0e0; /* 項目の背景色 */
	border: 1px #c0c0c0 solid; /* 項目の境界線 */
	color: #cc0000; /* 項目の文字色 */
	}

/* --- リンクしない項目（前へ・次へ） --- */
div.paging ul.nl li span {
	display: inline-block;
	padding: 4px 8px; /* 項目のパディング（上下、左右） */
	background-color: #ffffff; /* 項目の背景色 */
	border: 1px #c0c0c0 solid; /* 項目の境界線 */
	color: #808080; /* 項目の文字色 */
}




/* ========動画ＣＳＳ======== */

/* YouTube iframeのレスポンシブ */

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}



/* ========商品テキスト横並びレイアウトＣＳＳ======== */

.shoplist article img {
		width: 30%;
		height: auto;
		margin: 0;
		padding:0px 20px 20px 0px; /* 余白（上右下左） */
		float: left;
}

.shoplist article h3 {
		font-size: 0.9em ;
		font-weight: bold;
		margin: 0;
		padding-left: 15px;
}

.shoplist article p {
		text-align: left;
		font-size: 0.7em;
		line-height: 2.0em;
		padding: 0 15px;
		margin: 0;
}

/*clearfix*/	

.clearfix, .shoplist article {
		zoom: 1;
}

.clearfix:after, .shoplist article:after {
		content: "";
		display: block;
		clear: both;	
}



/* ========オリジナルＣＳＳ======== */

.fun-button{ float:right; padding:0px 8px 0px 0px; vertical-align:middle; }


div#pan-url       { width:100%; display:block; overflow:hidden; margin:0px 12px 6px 12px; auto 0; }
div#pan-list      { float:left; margin:3px 0; }
div#pan-list  ul  { margin:0; padding:0; font-size:13px; }
div#pan-list  li  { 	display:inline; line-height:120%; list-style-type:none; }
div#pan-list  li a{ 	padding-right:10px; background:url(../images/topicpath.gif) no-repeat right; }


.strong{ font-weight:bold; }
.white  { color : #ffffff ; }
.black  { color : #000000 ; }
.blue   { color : #000094 ; }
.green  { color : #008000 ; }
.red    { color : #FF0F0F; }	 

.text10 {font-size: 10px; line-height : 150% ; }
.text10w {font-size: 10px; line-height : 150% ; }
.text12 {font-size: 12px; line-height : 150% ; }
.text12w {font-size: 12px; line-height : 160% ; }
.text14 {font-size: 14px; line-height : 150% ; }
.text14w {font-size: 14px; line-height : 200% ; }
.text16 {font-size: 16px; line-height : 150% ; }
.text18 {font-size: 18px; line-height : 150% ; }
.text20 {font-size: 20px; line-height : 150% ; }
.text26 {font-size: 26px; line-height : 150% ; }
.text30 {font-size: 30px; line-height : 150% ; }

.float-left  { float:left; }
.float-center{ float:center; }
.float-right { float:right; }
.align-center { text-align:center; }
.align-left  { text-align:left; margin-left:10px ; }
.align-right  { text-align:right; margin-right:10px ; }


.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; }


/* 改行の指示（ＰＣとスマホ） */

@media screen and (min-width: 680px){   
  .bpc { display:inline-block; }
  .bsm { display:none; }
}
@media screen and (max-width: 680px){   
  .bpc { display:none; }
  .bsm { display:inline-block; }
}