@charset "utf-8";
/* -- design.css -- */
/*******************************************
全体設定
********************************************/
body{
	margin: 0 auto;
	background-color: #fff;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, ArialMT, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6', 'Droid Sans Japanese';
	font-size: 15px;
	line-height: 1.7em;
	color: #555;
	-webkit-text-size-adjust: none;
}

/*リンク色*/
a{ color: #777; }
a:link{ color: #777; }
a:visited{ color: #777; }
a:hover{ color: #999; }

/*******************************************
ヘッダー,ナビゲーション
********************************************/
#header{
	position: relative;
	width: 100%;
	top: 0;
	margin: 0;
	text-align: center;
}
#header #top{
	margin: 0;
	padding: 20px 0 30px;
}
#header #logo{
	margin-bottom: 60px;
}

.link01{
	padding: 15px 0;
}
.link01 ul{
	border-top: 1px solid #e8e4de;
	border-bottom: 1px solid #e8e4de;
	max-width: 900px;
	margin: 0 auto;
}

.link01 ul li{
	float: left;
	width: 16.666665%;
	text-align: center;
	box-sizing: border-box;
}

.link01 ul li a{
	display: block;
	padding: 4px 0 14px;
	background: #fff;
}
.link01 ul li a:hover{ background: #fdfbf7; }
.link01 ul li a:hover img{ opacity: 0.65; filter: alpha(opacity=65); -ms-filter: "alpha(opacity=65)"; }

/*******************************************
コンテンツ
********************************************/
#contentColumn{
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
}

.contents-a, .contents-b, .contents-c, .contents-d{
	position: relative;
	width: 100%;
	margin: 0;
}
.contents-a,.contents-c{ background: url(../images/bg/pattern01.png) 0 0 repeat #fff; }
.contents-b{ background: #fff; }

.contents{
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 0 50px;
	text-align: left;
}

h2{
	margin: 0 0 25px;
	padding: 0 0 8px 0;
	background: url(../images/bg/line/03.png) left bottom repeat-x;
	font-weight: bold;
	font-size: 20px;
}
h2.p2{ margin: 0 10px 30px 10px; padding-left: 0; border-bottom: 0 none; background: url(../images/bg/line/02.png) 0 50% repeat-x; }
h2.p2 img{ padding-right: 15px; background-color: #fcfcfc; }

p{ margin: 0 0 25px; padding: 0; }
.text{ margin: 0 6%; }
.text2{ margin: 0 4%; }

/* toppage */
.link02 ul li{
	float: left;
	width: 32%;
	min-height: 220px;
	margin: 0 0 17px 2%;
	padding: 10px 1.8% 0;
	border: 1px solid #e8e4de;
	box-sizing: border-box;
}
.link02 ul li:nth-child(1),
.link02 ul li:nth-child(4){ margin-left: 0; }
.link02 ul li .img{ margin-bottom: 10px; text-align: center; }
.link02 ul li .desc{ margin: 0 1%; font-size: 12.5px; line-height: 1.6em; color: #666; }
.link02 ul li a:hover img{ opacity: 0.60; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)"; }

.link03 ul{ padding-top: 10px; }
.link03 ul li{
	float: left;
	width: 19%;
	margin: 0 0 0 1.25%;
	text-align: center;
	border: 1px solid #e8e4de;
	box-sizing: border-box;
}
.link03 ul li:nth-child(1){ margin-left: 0; }
.link03 ul li a:hover img{ opacity: 0.40; filter: alpha(opacity=40); -ms-filter: "alpha(opacity=40)"; }

/* activity */
.message{
	margin: 0;
	padding: 35px 10px 15px;
	border: 3px double #900;
	background-color: #fcfcfc;
}
.sign{ width: 150px; }

.company{ margin: 0 4%; }
.company ul li{
	float: left;
	width: 48%;
	min-height: 235px;
	margin: 0 0 17px 4%;
	padding: 15px 3% 0;
	border: 1px solid #e8e4de;
	background-color: #fff;
	box-sizing: border-box;
}
.company ul li:nth-child(1){ margin-left: 0; }

.company ul li .img{ margin-bottom: 10px; text-align: center; }
.company ul li .img img{ border: 1px solid #eee; }
.company ul li .desc{ margin: 0 3%; font-size: 12.5px; line-height: 1.6em; color: #666; }

.company ul li a:hover img{ opacity: 0.60; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)"; }

/* about */
.schedule a{ color: #5498cb; text-decoration: underline; }
.schedule a:link{ color: #5498cb; }
.schedule a:visited{ color: #5498cb; }
.schedule a:hover{ color: #7bbeec; }

/* 拡張 */
.box01{
	padding: 25px 5% 1px;
	border: 3px double #999;
	background-color: #fcfcfc;
}
.box02{
	margin-bottom: 25px;
	padding: 25px 5% 1px;
	border: 1px solid #e8e4de;
	background-color: #fcfcfc;
}
.box03{
	margin-bottom: 25px;
	padding: 25px 5% 1px;
	border: 1px dotted #535150;
}
.form-area{
	margin: 40px 0 0;
	padding: 25px;
	background-color: #fff;
}
.form-area table{ margin: 0 auto; }
.form-area table th,
.form-area table td{ padding: 10px 3px; }
.form-area table th{ padding-right: 10px; vertical-align: top; }

.form-area input[type="text"],
.form-area textarea{
	padding: 2px 3px;
	border: 1px solid #ccc;
	background-color: #fdfdfd;
}

.form-area .button{
	text-align: center;
	margin-top: 15px;
}

/*******************************************
フッター
********************************************/
#footer{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background: url(../images/bg/pattern02.png) left top repeat #900;
}
#move-top{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	text-align: right;
}
#move-top img{ border: 1px solid #720000; }
#move-top a img:hover{ opacity: 0.50; filter: alpha(opacity=50); -ms-filter: "alpha(opacity=50)"; }

#footer .contents{ padding: 0; }

#copy{
	padding: 10px;
	font-size: 10px;
	color: #ffbbbb;
	text-align: right;
}

/*******************************************
Multi Screen
********************************************/
@media screen and (max-width:800px){
#header #top img{ width: 80%; }
.contents{ margin: 0 4%; }
.link02 ul li{ width: 48.5%; margin: 0 0 15px 3%; }
.link02 ul li:nth-child(1),
.link02 ul li:nth-child(3),
.link02 ul li:nth-child(5){ margin-left: 0; }
.link02 ul li:nth-child(4){ margin-left: 3%; }

.company{ margin: 0; }
.company ul li{ min-height: 255px; }
}

@media screen and (max-width:568px){
#header #top img{ width: 60%; }
#header #logo img{ width: 70%; }
h2{ margin: 0 0 20px; padding: 0 0 10px; font-size: 18px; }
h2 img{ width: 35%; }
h2.p3 img{ width: 30%; }
h2.p4 img{ width: 50%; }
h2.p5 img{ width: 15%; }
h2.p6 img{ width: 22%; }
.contents{ padding: 40px 0; }
.message{ margin: 0 5%; padding: 20px 2.5%; }
.message .fl-r{ float: none; margin: 0 0 20px; text-align: center; }
.message img.sign{ width: 120px; }

.link01 ul{ border-top: 0 none; border-bottom: 0 none; }
.link01 ul li{ width: 50%; margin-bottom: 1px; border-top: 1px solid #e8e4de; border-bottom: 1px solid #e8e4de; }
.link01 ul li:first-child{ width: 50%; }
.link01 ul li:nth-child(1),
.link01 ul li:nth-child(3),
.link01 ul li:nth-child(5){ border-right: 1px solid #f3efea; }
.link01 ul li a{ padding: 5px 0 12px; background: 0 none; }
.link01 ul li:nth-child(1) img{ width: 45.9px; }
.link01 ul li:nth-child(2) img{ width: 76.5px; }
.link01 ul li:nth-child(3) img{ width: 60.3px; }
.link01 ul li:nth-child(4) img{ width: 47.7px; }
.link01 ul li:nth-child(5) img{ width: 47.7px; }
.link01 ul li:nth-child(6) img{ width: 47.7px; }

.link03 ul{ padding-top: 10px; }
.link03 ul li{
	float: left;
	width: 32%;
	margin: 0 0 7px 2%;
}
.link03 ul li:nth-child(1){ margin-left: 0; }
.link03 ul li:nth-child(4){ margin-left: 16%; }

.form-area{ padding: 20px 0; }
.form-area table{ width: 90%; }
.form-area table th{ display: block; padding: 5px 10px 3px; font-weight: bold; }
.form-area table td{ display: block; padding: 10px 10px 20px; }
.form-area table th{ padding-right: 0; background-color: #f9f5f0; }

.form-area input[type="text"],
.form-area textarea{
	padding: 2px 3px;
	border: 1px solid #ccc;
	background-color: #fdfdfd;
}

.form-area .button{
	text-align: center;
	margin-top: 15px;
}

}

@media screen and (max-width:448px){
#header #top img{ width: 70%; }
#header #logo img{ width: 65%; }
#header #top{ margin-bottom: 20px; padding: 12px 0 15px; }
#header #logo{ margin-bottom: 20px; }
h2{ font-size: 16px; }
h2.p2{ margin-bottom: 10px; }
h2 img{ width: 45%; }
h2.p3 img{ width: 40%; }
h2.p4 img{ width: 75%; }
h2.p5 img{ width: 22%; }
h2.p6 img{ width: 30%; }
.contents{ padding: 30px 0 40px; }
.text{ margin: 0 5%; }
.message{ margin: 0 3%; padding: 15px 1.5% 5px; }

.link02 ul li:nth-child(1),
.link02 ul li:nth-child(2),
.link02 ul li:nth-child(3),
.link02 ul li:nth-child(4),
.link02 ul li:nth-child(5),
.link02 ul li:nth-child(6){ float: none; width: 88%; min-height: 100px; margin: 0 auto 15px; padding: 10px 3%; }

.company{ margin: 0 4%; }
.company ul li:nth-child(1),
.company ul li:nth-child(2){ float: none; width: 90%; min-height: 100px; margin: 0 auto 15px; padding: 10px 4%; }

.p30-b{ padding-bottom: 20px!important; }
.w100{ width: 70px; }
.w300{ width: 200px; }

}