@charset "UTF-8";

html	{background: #dddddd;}

body	{margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	background: #ffffff;}


/* ヘッダーキャッチコピー */
.header-catch	{margin: 0;
	padding: 0;
	background-color: #003333;}

.header-catch p	{margin: 0;
	font-size: 14px;
	color: #eeffff;}


/* サイト名 */
.site	{text-align: center;}

.site h1 a	{color: #003333;
	text-decoration: none;}

.site h1	{margin: 0;
	font-size: 30px;
	font-weight: normal;}


/* 連絡先 */
.header-contact	{text-align: center;}

.header-contact a	{text-decoration: none;}

.header-contact p	{margin:5px;
	color: #003333;
	font-size: 25px;}

.top-contact	{max-width: 100%;
	height: auto;
	vertical-align: bottom;}

.header-botton a:hover	{opacity: 0.7;}


/* ナビゲーション */
.menu ul	{margin: 0;
	padding: 0;
	list-style: none;}

.menu li a	{display: block;
	padding: 15px;
	color: #ffffff;
	font-size: 16px;
	text-decoration: none;}

.menu li a:hover	{color: #003333;
	background-color: #d7e4bd;}

.menu li a:hover	{color: #003333;
	background-color: #d7e4bd;}


.menu ul:after	{content: "";
	display: block;
	clear: both;}

.menu li	{float: left;
	width: auto;}


/* ヘッダー画像 */
.top-img	{max-width: 100%;
	height: auto;
	vertical-align: bottom;}

/* キャッチコピー */
.catch	{margin: 0;
	padding: 15px;
	background-color: rgba(255,255,255,0.7);
	font-size: 26px;}


/* ヘッダー画像にキャッチコピーを重ねる */
.top	{position: relative;}

.catch	{position: absolute;
	bottom: 7%;
	left: 3%;}


/* ピックアップ（業務案内） */
.pickup	{margin-top: 15px;
	margin-bottom: 30px;}

.pickup i	{margin-right: 5px;
	margin-left: 5px;
	font-size: 20px;}

.pickup h1	{margin-top: 10px;
	margin-bottom: 5px;
	font-size: 24px;
	color: #003333;
	font-weight: normal;}

.pickup h2	{margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	border-bottom: solid 1px #dddddd;
	font-size: 19px;
	color: #003333;
	font-weight: normal;}

.pickup h2 a	{display: block;
	padding: 0px;
	color: #003333;
	font-size: 19px;
	text-decoration: none;}

.pickup h2 a:hover
	{background-color: #d7e4bd;}

.pickup ul	{margin: 0;
	padding-left: 10px;
	list-style: none;}

.pickup li i	{margin-right: 5px;
	margin-left: 10px;
	font-size: 20px;}

.pickup li a	{display: block;
	padding: 5px;
	color: #003333;
	font-size: 16px;
	text-decoration: none;}

.pickup li a:hover	{background-color: #d7e4bd;}


/* 業務案内 */
.work	{margin-top: 20px;
	margin-bottom: 30px;}

.work i	{margin-right: 5px;
	margin-left: 10px;
	font-size: 20px;}

.work h1	{margin-top: 0;
	margin-bottom: 5px;
	padding: 5px;	
	font-size: 20px;
	color: #003333;
	font-weight: normal;
	border-bottom: solid 1px #dddddd;}

.work h2	{margin-top: 0;
	margin-bottom: 5px;
	border-bottom: solid 1px #dddddd;
	font-size: 18px;
	color: #003333;
	font-weight: normal;}

.work h2 a	{display: block;
	text-decoration: none;}

.work h2 a:hover	{background-color: #d7e4bd;} 

.work ul	{margin: 0;
	padding-left: 10px;
	list-style: none;}

.work li a	{display: block;
	padding: 5px;
	color: #003333;
	font-size: 16px;
	text-decoration: none;}

.work li a:hover	{background-color: #d7e4bd;}

.work-img	{padding-bottom: 5px;}


/* 会社案内 */
.company	{margin-top: 10px;
	margin-bottom: 30px;}

.company i	{margin-right: 5px;
	margin-left: 10px;
	font-size: 20px;}

.company h1	{margin-top: 0;
	margin-bottom: 5px;
	padding: 5px;	
	font-size: 20px;
	color: #003333;
	font-weight: normal;
	border-bottom: solid 1px #dddddd;}

.company h2	{margin-top: 0;
	margin-bottom: 5px;
	border-bottom: solid 1px #dddddd;
	font-size: 18px;
	color: #003333;
	font-weight: normal;}

.company ul	{margin: 0;
	padding-left: 10px;
	list-style: none;}

.company li a	{display: block;
	padding: 5px;
	color: #003333;
	font-size: 16px;
	text-decoration: none;}

.company li a:hover	{background-color: #d7e4bd;}


/* お問い合わせ */
.contact	{margin-top: 10px;
	margin-bottom: 30px;}

.contact i	{margin-right: 5px;
	margin-left: 10px;
	font-size: 20px;}

.contact h1	{margin-top: 0;
	margin-bottom: 5px;
	font-size: 20px;
	color: #003333;
	font-weight: normal;
	border-bottom: solid 1px #dddddd;}

.contact h2	{margin-top: 0;
	margin-bottom: 5px;
	border-bottom: solid 1px #dddddd;
	font-size: 18px;
	color: #003333;
	font-weight: normal;}

.contact ul	{margin: 0;
	padding-left: 10px;
	list-style: none;}

.contact li a	{display: block;
	padding: 5px;
	color: #003333;
	font-size: 16px;
	text-decoration: none;}

.contact li a:hover	{background-color: #d7e4bd;}


/* BOX6の調整 */
.box6	{margin-top: 10px;
	margin-bottom: 30px;}


/* 通常の内容 */
.main-inner-normal	{margin: 10px;}

.main-inner-normal h1	{margin-top: 15px;
	margin-bottom: 15px;
	padding-left: 5px;
	font-size: 24px;
	color: #003333;
	font-weight: normal;
	border-left: solid 5px #336666;}

.main-inner-normal h2	{margin-top: 10px;
	margin-bottm: 0;
	font-size: 18px;
	color: #003333;
	font-weight: normal;}

.main-inner-normal h2 a	{margin-top: 5px;
	margin-bottm: 0;
	font-size: 18px;
	color: #003333;
	text-decoration: none;}

.main-inner-normal h3	{margin-top: 0;
	margin-bottm: 0;
	padding-left: 20px;
	font-size: 16px;
	color: #003333;
	font-weight: normal;}

.main-inner-normal h3 a	{margin-top: 0;
	margin-bottm: 0;
	font-size: 16px;
	color: #003333;
	text-decoration: none;}

.main-inner-normal ul	{list-style: none;}

.main-inner-normal li	{margin-top: 0;
	margin-bottm: 0;
	padding-left: 0;
	font-size: 14px;
	color: #003333;
	font-weight: normal;}

.main-inner-normal li a	{margin-top: 0;
	margin-bottm: 0;
	font-size: 16px;
	color: #003333;
	text-decoration: none;}

.main-inner-normal p	{margin-top: 0px;
	margin-bottom: 15px;
	color: #333333;
	padding-left: 10px;}

.main-inner-normal p a	{padding: 5px;
	color: #333333;
	text-decoration: none;}

.main-inner-normal a:hover	{background-color: #d7e4bd;}


/* メインコンテンツ */
.main-contents	{margin: 0
	padding: 0;}

.main-contents h2	{
	font-size: 18px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.main-contents i	{margin-right: 5px;
	font-size: 20px;}

.main-contents p	{font-size:16px;}


/* サイドメニュー */
.side-menu	{margin-top: 30px;
	padding: 0;
	border: solid 5px #dddddd;}

.side-menu i	{margin-left: 10px;
	margin-right: 5px;}

.side-menu h2	{margin: 0;
	padding: 0;}

.side-menu h2 a	{display: block;
	padding: 5px;
	color: #003333;
	font-size: 14px;
	border-bottom: dotted 1px #dddddd;
	text-decoration: none;}

.side-menu ul	{margin: 0;
	padding: 0;
	list-style: none;}

.side-menu li a	{display: block;
	padding: 5px;
	color: #003333;
	font-size: 14px;
	text-decoration: none;}

.pagetop	{display: none;
	position: fixed;
	bottom: 30px;
	right: 30px;}
	
.pagetop a	{display: block;
	background-color: #ccc;
	text-align: center;
	color: #222;
	font-size: 12px;
	text-decoration: none;
	padding: 20px 10px;}
 
.pagetop a:hover	{display: block;
	background-color: #222;
	text-align: center;
	color: #fff;
	font-size: 12px;
	text-decoration: none;
	padding:20px 10px;}


/* 業務内容 */
.work-contents	{margin: 0;
	padding: 10px;
	border-bottom: dotted 1px #336666;}

.work-img	{max-width: 100%;
	height: auto;
	vertical-align: bottom;}


/* テーブル */
table	{border-collapse: collapse;
	margin-top: 10px;
	width:100%;
	color: #003333;}

th	{border-top: dotted 1px #336666; 
	text-align: left;
	font-size: 16px;
	padding: 10px;
	font-weight: normal;}

.tag	{border-top: solid 1px #ffffff;
	border-bottom: solid 1px #ffffff;
	margin-top: 50px;
	padding-left: 16px;
	font-size: 22px;
	color: #ffffff;
	background-color: #669999;}

td	{border-top: dotted 1px #336666;
	text-align: left;
	font-size: 16px;
	padding: 10px;}

td input	{width: 100%;}

td textarea	{width: 100%;}

.red	{color: #ff0000;}


/* フッターナビ */
.footer-nav ul	{margin: 5px;
	padding: 5px;
	list-style: none;}

.footer-nav li a	{display: block;
	padding: 5px;
	color: #000000;
	border-left: solid 2px #999999;
	font-size: 14px;
	text-decoration: none;}

.footer-nav li a:hover	{background-color: #eeeeee;}

.footer-nav ul:after	{content: "";
	display: block;
	clear: both;}

.footer-nav li	{float: left;
	width: auto;}


/* パンくずリスト */
.bread	{margin-bottom: 0;}

.bread ol	{margin: 0;
	padding: 0;
	list-style: none;}

.bread li a	{display: inline-block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none;}

.bread li a:hover	{background-color: #eeeeee;}

.bread ol:after	{content: "";
	display: block;
	clear: both;}

.bread li	{float: left;
	width: auto;}

.bread li:after	{content: '\003e';
	margin-left: 10px;
	margin-right: 10px;
	color: #888888;}


/* コピーライト */
.copyright p	{margin: 5px;
	color: #666666;
	font-size: 14px;}


/* ヘッダーナビに帯をつける */
.header-nav	{background-color: #003333;}


/* ナビゲーションをバー状にする */
.header-menu	{background-color: #336666;}


/* フッターをバーの形にする */
.footer	{padding: 5px;
	text-align: right;
	background-color: #dddddd;}


/* ########### 359px以下 ########### */
@media (max-width: 359px) {

/* サイト名 */
.site img	{width: 225px;
	height: auto}

}


/* ########### 599px以下 ########### */
@media (max-width: 599px) {

.catch	{padding: 5px 10px;
	font-size: 12px;}

.menu li a	{display: block;
	padding: 5px;
	color: #ffffff;
	font-size: 10px;
	text-decoration: none;}

.footer-nav li a	{display: block;
	padding: 5px;
	color: #000000;
	font-size: 10px;
	text-decoration: none;}

.copyright p	{margin: 5px;
	color: #666666;
	font-size: 10px;}

.work h2	{margin-top: 0;
	margin-bottom: 5px;
	border-bottom: solid 1px #dddddd;
	font-size: 16px;
	color: #003333;
	font-weight: normal;}

.work li a	{display: block;
	padding: 5px;
	color: #003333;
	font-size: 12px;
	text-decoration: none;}

.main-inner-normal h1	{font-size: 18px;}

.tag	{font-size: 14px;}

th	{font-size: 14px;}

td	{font-size: 14px;}

}


/* ########### 768px以上 ########### */
@media (min-width: 768px) {

/* header-logoとheader-bottonを横に並べる設定 */
.header-site:after	{content: "";
	display: block;
	clear: both;}

.headr-logo	{float: left;
	width: 40%;}

.header-botton	{float: left;
	width: 60%;}

/* top-workとtop-sideを横に並べる設定 */
.top-menu:after	{content: "";
	display: block;
	clear :both;}

.top-work	{float: left;
	width: 70%;}

.top-side	{float: left;
	width: 30%;}

/* top-workとBOX6の左右の間隔 */
.top-work	{padding-right: 30px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;}

/* top-work-01とtop-work-02を横に並べ左右の間隔を設定する */
.top-work:after	{content: "";
	display: block;
	clear: both;}

.top-work-01	{float: left;
	width: 50%;
	padding-right: 15px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;}

.top-work-02	{float: left;
	width: 50%;
	padding-left: 15px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;}

/* work01とwork02を横に並べ左右の間隔を設定する */
.work:after	{content: "";
	display: block;
	clear: both;}

.work01	{float: left;
	width: 50%;
	padding-right: 15px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;}
	
.work02	{float: left;
	width: 50%;
	padding-left: 15px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;}

/* main-contentsとside-menuを横に並べ左右の間隔を設定する */
.contents:after	{content: "";
	display: block;
	clear: both;}

.main-contents	{float: left;
	width: 75%;
	padding-right: 30px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;}

.side-menu	{float: left;
	width: 25%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;}


/* ########### 1190px以上 ########### */
@media (min-width: 1190px) {

/* 全体の横幅を固定 */
.header-catch, .header-menu, .header-site, .main-inner, .footer-inner
	{width: 1140px;
	margin-left: auto;
	margin-right: auto}

}