/* charset */
@charset "UTF-8";

/* Body Setting */
body {
	margin: 0;
	padding: 0;
	color: #222222;
	text-align: center;
	font-family:Verdana, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	letter-spacing: 0;
	background-color: #FFFFFF;
	background-image: URL(../images/bg.gif);
	background-repeat: repeat-x;
	background-attachment: fixed;
}

img { border-width: 0px; vertical-align:text-bottom; }
p { margin: 0; padding-bottom: 10px; line-height: 160%; }
i { margin-left: 3px; margin-right: 3px; }

/* ----- 端末ごとの表示 ----- */
@media screen and (max-width: 480px) {
	.pc { display: none; }
}
@media screen and (min-width: 481px) and (max-width: 899px) {
	.pc { display: none; }
}
@media screen and (min-width:900px) {
	.sp { display: none; }
}

/* ----- テキスト設定 ----- */
a:link { color: #114499; text-decoration: none; }
a:visited { color: #114499; text-decoration: none; }
a:hover { color: #EEAC33; text-decoration: underline; }
a:active { color: #F3CC33; text-decoration: underline; }

.fontSS { font-size: 70%; line-height: 140%; }
.fontS { font-size: 85%; line-height: 140%; }
.fontL { font-size: 120%; line-height: 140%; }
.fontLL { font-size: 180%; line-height: 140%; }

.alignLeft { text-align: left; }
.alignCenter { text-align: center; }
.alignRight { text-align: right; }

.clear { clear: both; height: 0; display:block; visibility: hidden; }

.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* ----- 見出し設定 ----- */
h1 {
	margin: 0;
	padding: 0;
}
@media screen and (max-width: 480px) {
	h1 { margin-left: 20px; }
}
@media screen and (min-width: 481px) and (max-width: 899px) {
	h1 { margin-left: 40px; }
}
@media screen and (min-width:900px) {
	h1 { margin-left: 80px; }
}


h2 {
	margin: 20px 0px 5px 0px;
	padding: 4px 20px;
	background-image: URL(../images/bg_h2.gif);
	background-repeat: repeat-y;
	font-size: 1.2em;
	font-weight: bold;
}

h3 {
	margin:10px 0;
	padding-bottom: 1px;
	font-size: 1em;
	font-weight: bold;
	color: #3355AA;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #CCCCCC;
}
h3:before {
	content: "■";
	margin-right: 5px;
}

.hidden {
	font-size: 75%;
	color: #DDDDDD;
}
.hidden a:link { color: #DDDDDD; }
.hidden a:visited { color: #DDDDDD; }

/* ----- フォーム設定 ----- */
form {
	margin: 0;
	padding: 0;
}

.button {
	width: 80px;
	padding: 1px 5px;
	color: #222222;
	border-width: 1px;
	border-style: solid;
	border-color: #777777;
	background-image: URL(../images/button.gif);
	background-repeat: repeat-x;
}

/* ----- リスト設定 ----- */
ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

li {
	margin: 0;
	padding: 0;
}

/* ----- テーブル設定 ----- */
.table1 {
	border-collapse: collapse;
}
@media screen and (max-width: 480px) {
	.table1 { width: 100%; }
}
@media screen and (min-width: 481px) and (max-width: 899px) {
	.table1 { width: 100%; }
}
@media screen and (min-width:900px) {
	.table1 { width: 80%; }
}

.table1 th, td {
	border: 1px solid #777777;
	padding: 5px 7px;
}

.table1 th {
	font-weight: normal;
	background-color: #EEEEFF;
}

/* ----- レイアウト ----- */
/* ヘッダー */
#header {
	height: 100px;
	background-color: #FFFFFF;
	background-image: URL(../images/bg_header.gif);
}

#headerWrap {
	position: relative;
	margin: 0 auto;
	height: 100px;
	text-align: left;
	background-position: right;
	background-repeat: no-repeat;
}

#headerText {
	height: 20px;
	text-align: center;
	font-size: 11px;
	font-weight: normal;
}

@media screen and (max-width: 480px) {
	#headerWrap { width: 100%; background-image: URL(../images/header2.jpg); }
	#header h1 { margin-left: 20px; }
}
@media screen and (min-width: 481px) and (max-width: 899px) {
	#headerWrap { width: 100; background-image: URL(../images/header.jpg); }
	#header h1 { margin-left: 40px; }
}
@media screen and (min-width:900px) {
	#headerWrap { width: 960px; background-image: URL(../images/header.jpg); }
	#header h1 { margin-left: 80px; }
}

/* グローバルメニュー */
#global {
	background-image: URL(../images/bg_global.gif);
	border-width: 0 0 10px 0;
	border-style: solid;
	border-color: #0055AA;
}
#global ul {
	margin: 0 auto;
	position: relative;
	border-left: 1px solid #999999;
	display: flex;
	flex-wrap: wrap;
}
#global li {
	padding-top: 6px;
	height: 40px;
	background-repeat: repeat-x;
	box-sizing: border-box;
}

#global a {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	line-height: 90%;
}

#global span {
	font-size: 0.6em;
	color: #999999;
	font-weight: normal;
}

@media screen and (max-width: 480px) {
	#global { height: 160px; }
	#global ul { width: 100%; }
	.globalL { width: 100%; }
	.globalS { width: 50%; }
	#global li { border-width: 1px; border-color: #FFFFFF #999999 #999999 #FFFFFF; border-style: solid; }
}
@media screen and (min-width: 481px) and (max-width: 899px) {
	#global { height: 40px; }
	#global ul { width: 100%; }
	.globalL { width: 23%; }
	.globalS { width: 15%; }
	#global li { border-width: 0 1px; border-color: #FFFFFF #999999 #999999 #FFFFFF; border-style: solid; }
	#global a { font-size: 0.92em; }
}
@media screen and (min-width:900px) {
	#global { height: 40px; }
	#global ul { width: 1000px; }
	.globalL { width: 23%; }
	.globalS { width: 15%; }
	#global li { border-width: 0 1px; border-color: #FFFFFF #999999 #999999 #FFFFFF; border-style: solid; }
}

#global_system_page { background-image: URL(../images/bg_global_system.gif); }
#global_system { background-image: URL(../images/bg_global_system_off.gif); }
#global_system:hover { background-image: URL(../images/bg_global_system_on.gif); }
#global_system_page span { color: #FFFFFF; }

#global_website_page { background-image: URL(../images/bg_global_website.gif); }
#global_website { background-image: URL(../images/bg_global_website_off.gif); }
#global_website:hover  { background-image: URL(../images/bg_global_website_on.gif); }
#global_website_page span { color: #FFFFFF; }

#global_instruct_page { background-image: URL(../images/bg_global_instruct.gif); }
#global_instruct { background-image: URL(../images/bg_global_instruct_off.gif); }
#global_instruct:hover { background-image: URL(../images/bg_global_instruct_on.gif); }
#global_instruct_page span { color: #FFFFFF; }

#global_company_page { background-image: URL(../images/bg_global_sub.gif); }
#global_company:hover { background-image: URL(../images/bg_global_sub_on.gif); }
#global_company_page span { color: #FFFFFF; }

#global_contact_page { background-image: URL(../images/bg_global_sub.gif); }
#global_contact:hover { background-image: URL(../images/bg_global_sub_on.gif); }
#global_contact_page span { color: #FFFFFF; }

/* 内容全体 */
#page {
	background-color: #FFFFFF;
	box-shadow: 2px 2px 5px #666666;
}
@media screen and (max-width: 480px) {
	#page { margin: 0 5px; }
}
@media screen and (min-width: 481px) and (max-width: 899px) {
	#page { margin: 0 10px; }
}
@media screen and (min-width:900px) {
	#page { margin: 0 20px; }
}

/* トップページ */
#top {
	margin: 0 auto;
	min-height: 280px;
	text-align: left;
	background-image: URL(../images/bg_top.jpg);
	background-position: right;
	background-repeat: no-repeat;
}

#topButton {
	margin: 10px auto 20px auto;
	list-style: none;
}

#topButton a {
	display: block;
	height: 160px;
	background-repeat: no-repeat;
	border: 1px solid #0055AA;
	box-sizing: border-box;
}

#topButton span {
	display: none;
}

@media screen and (max-width: 480px) {
	#top { width: 100%; }
	#top p { padding: 100px 5px 15px 10px; }
	#top img { margin-left: 10px; }
	#topButton { width: 350px; height: 560px; }
	#topButton li { margin: 20px 3px 10px 3px; }
	#top_system a { width: 97%; background-image: URL(../images/top_system2.png); }
	#top_website a { width: 97%; background-image: URL(../images/top_website.png);}
	#top_instruct a { width: 97%; background-image: URL(../images/top_instruct.png); }
}
@media screen and (min-width: 481px) and (max-width: 899px) {
	#top { width: 100%; }
	#top p { padding: 110px 5px 15px 10px; }
	#top img { margin-left: 10px; }
	#topButton { width: 350px; height: 390px; }
	#topButton li { margin: 20px 3px 10px 3px; float: left; }
	#top_system a { width: 345px; background-image: URL(../images/top_system2.png); }
	#top_website a { width: 345px; background-image: URL(../images/top_website.png);}
	#top_instruct a { width: 345px; background-image: URL(../images/top_instruct.png); }
}
@media screen and (min-width:900px) {
	#top { margin-top: 30px; width: 720px; }
	#top p { padding: 120px 0 15px 0; }
	#topButton { width: 710px; height: 390px; }
	#topButton li { margin: 20px 5px 10px 5px; float: left; }
	#top_system a { width: 700px; background-image: URL(../images/top_system.png); }
	#top_website a { width: 345px; background-image: URL(../images/top_website.png);}
	#top_instruct a { width: 345px; background-image: URL(../images/top_instruct.png); }
}

/* アドレス */
#address {
	margin: 0 auto;
	padding: 7px;
	color: #114499;
	background-color: #F3F3F9;
}

/* フッター */
#footer {
	clear: both;
	margin: 0 auto;
	padding: 2px;
	text-align: center;
	font-size: 0.8em;
	color: #FFFFFF;
	background-color: #0055AA;
}

/* パンくずリスト */
#navi {
	margin: 0 15px;
	padding: 2px;
	font-size: 0.75em;
	color: #CCCCCC;
	text-align: right;
}
#navi a:link { color: #777777; }
#navi a:visited { color: #777777; }

#navi strong {
	font-weight: normal;
	color: #000099;
}

/* メイン */
#main {
	position :relative;
	margin: 0 auto;
	text-align: left;
}

@media screen and (max-width: 480px) {
	#main { width: 100%; }
}
@media screen and (min-width: 481px) and (max-width: 899px) {
	#main { width: 100%; }
}
@media screen and (min-width:900px) {
	#main { width: 1000px; }
}

/* ローカルメニュー */
@media screen and (max-width: 480px) {
	#local { display: none; }
}
@media screen and (min-width: 481px) and (max-width: 899px) {
	#local { display: none; }
}
@media screen and (min-width:900px) {
	#local { width: 200px; text-align: left; float: left; }
	#local li { width: 180px; }
}

#local li {
	position: relative;
	padding: 15px 0.5em 0 0.5em;
	font-size: 0.8em;
	line-height: 140%;
	border-bottom: 1px solid #DDDDDD;
	background-image: URL(../images/bg_local_off.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	vertical-align: middle;
}
#local li:before {
	margin-right: 5px;
	display: inline-block;
	content: "■";
	color: #8899AA;
	font-size: 1.2em;
	vertical-align: middle;
}
#local a {
	display: inline-block;
	color: #222222;
	text-decoration: none;
}

#local li:hover {
	background-image: URL(../images/bg_local_on.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}

#local a:hover {
	color: #114499;
}

/* コンテンツ */
#contents {
	float: left;
}

@media screen and (max-width: 480px) {
	#contents { width: 100%; }
}
@media screen and (min-width: 481px) and (max-width: 899px) {
	#contents { width: 100%; }
}
@media screen and (min-width:900px) {
	#contents { width: 800px; }
}

.block {
	margin: 10px 10px 0 20px;
}

.block ul {
	margin: 5px 0 10px 20px;
	list-style-type: square;
}

.block li {
	margin: 7px 0;
}

.prev {
	margin: 5px auto;
	text-align: right;
	font-size: 0.8em;
}
.prev a { text-decoration: none; }
.prev a:link { color: #777777; }
.prev a:visited { color: #777777; }
.prev a:hover { color: #EEAC33; }
.prev a:active { color: #F3CC33; }

@media screen and (max-width: 480px) {
	.blockLeft { }
	.blockRight { }
}
@media screen and (min-width: 481px) and (max-width: 899px) {
	.blockLeft { width: 45%; float: left; }
	.blockRight { width: 55%; float: left; }
}
@media screen and (min-width:900px) {
	.blockLeft { width: 300px; float: left; }
	.blockRight { width: 360px; float: left; }
}

.contact {
	margin: 15px 0 10px 0;
}

.back {
	margin: 5px 10px;
	font-size: 0.9em;
}
.back a { text-decoration: none; }

/* メール */
@media screen and (max-width: 480px) {
	#mail_table th, #mail_table td { display: block; }
	#mail_table th { border-width: 0 1px; }
	#mail_table tr:first-child th { border-top-width: 1px; }
	#mail_table input[type="text"] { width: 95%; }
	#mail_table textarea { width: 95%; }
	.mail_phone { width: 70% !important; }
}
@media screen and (min-width: 481px) and (max-width: 899px) {
	#mail_table input[type="text"] { width: 95%; }
	#mail_table textarea { width: 95%; }
	.mail_phone { width: 70% !important; }
}
@media screen and (min-width:900px) {
	#mail_table input[type="text"] { width: 400px; }
	#mail_table textarea { width: 400px; }
	.mail_phone { width: 180px !important; }
}

.mail_alart {
	margin: 0 0 10px 20px;
	padding: 10px;
	color: #CC3333;
	line-height: 150%;
}

.mail_error {
	margin-bottom: 15px;
	display: block;
	font-weight: bold;
	color: #CC0000;
}

/* ----- レイアウト：現在不使用 ----- */
/* Counter */
#count {
	margin-top: 30px;
	padding: 1px 15px;
	text-align: right;
	font-size: 0.8em;
	color: #777777;
}

/* Column */
#column {
	margin: 40px auto 10px auto;
	width: 750px;
	text-align: left;
	background-image: URL(../images/bg_def_column.gif);
	background-repeat: no-repeat;
	background-position: top;
}

#column h2 {
	background-image: none;
	margin: 0px 25px;
	padding: 0;
}

#column span.hitokoto_sub {
	margin: 0 0 7px 25px;
	font-weight: bold;
}

#column span.hitokoto_time {
		font-size: 85%;
		color: #777777;
}

#column div.hitokoto_com {
		margin: 8px 15px 10px 25px;
		line-height: 130%;
}

#columnLog {
	margin: 0 80px;
	text-align: right;
	font-size: 85%;
}

.hitokoto {
	clear: both;
	margin: 10px 0 40px 0;
}

.hitokoto_time {
	margin: 2px 0 7px 10px;
	font-size: 90%;
	color: #999999;
}

.hitokoto_img {
	float: left;
	margin: 10px 15px 5px 25px;
	border: 4px solid #FFFFFF;
	box-shadow: 1px 1px 2px 2px #CCCCCC;
}

.hitokoto_com {
	line-height: 150%;
}