@charset "UTF-8";

/* index ------------------------------------------

	・レイアウト
		* 基本
		* パターン
	・基本設定
	・ヘッダー部
	・グローバルナビゲーション
	・文字サイズ調整ボタン
	・メイン
		* 基本
		* コンタクト
	・サイトバー
	　* メニュー
	・フッター
	・個別ページ
		* TOPページ
			- 実績紹介
			- サービス
			- 新着情報３種
		* 事業所概要
		* ごあいさつ
		* 制作実績
		* よくある質問
		* プライバシーポリシー（個人情報保護方針）
		* リンク
		* ニュース＆トピックス
		* サービス
	・CSS HACK
	
------------------------------------------------ */



/*============================= レイアウト =============================*/

/* -------------- 基本 -------------- */
body {
	padding-bottom: 10px;
	text-align: center;
	background: #333 url(../images/back_craftpaper_dark.gif);
	color:#330;
}
#container {
	width: 910px;
	margin: 5px auto;
	text-align: left;
	padding: 20px;
	background-color:#FFF;
	color: #444;
}
#header {
	margin: 0 auto;
}
#contents-wrapper {
	margin: 0 auto;
	text-align: left;
}
#contents {
	float: right;
	width: 680px;
}
#sidebar {
	float: left;
	width: 200px;
}
#footer {
	clear: both;
	border-top: 1px solid #999;
	text-align: center;
}
/* -------------- パターン -------------- */
.r-ms .r-main {
	width: 450px;
	float: left;
}
.r-ms .r-sub {
	width: 202px;
	float: right;
}
.r-sm .r-main {
	width: 450px;
	float: right;
}
.r-sm .r-sub {
	width: 202px;
	float: left;
}
.r-cc .r-col {
	width: 48%;
	float: left;
	margin: 1%
}


/*============================= 基本設定 =============================*/

a.external {
	padding-right: 19px;
	background: url(../images/listmarker_external.gif) right center no-repeat;
}
.align-center {
	text-align: center;
}
.align-right {
	text-align: right;
}
.top-margin {
	margin-top: 10px;
}
.acc-nav, .skip {
	text-indent: -9999px;
	height: 0;
}
.acc-nav p {
	margin: 0;
	padding: 0;
	height: 0;
}
.acc-nav p img {
	float: left;
}
.delimiter {
	color: #AAA;
}
address a {
	text-decoration: none;
	color: #330;
}
#bread-crumbs {
	background-color: #E7E7E7;
	padding: 2px 10px;
}
#bread-crumbs a {
	color: #333333;
}
/* 囲み記事 */
#main .kakomi1 h4,
#main .kakomi1 h5,
#main .kakomi2 h4,
#main .kakomi2 h5,
#sidebar .kakomi1 h4,
#sidebar .kakomi1 h5 {
	letter-spacing: 0;
	background-image: none;
	color: #455580;
}
#main .kakomi1 h4,
#main .kakomi2 h4,
#sidebar .kakomi1 h4,
#sidebar .kakomi2 h4 {
	font-size: 0.9em;
	margin: 5px 0 0 0;
	padding: 0 0 0.5em 0;
}
#main .kakomi1 h5,
#main .kakomi2 h5,
#sidebar .kakomi1 h5,
#sidebar .kakomi2 h5 {
	margin: 0.5em 0 0 0;
	padding-left: 12px;
	background: url(../images/listmarker_bl.png) left 0.35em no-repeat;
}
.kakomi1 {
	padding: 10px;
	background-image: url(../images/back_craftpaper.gif);
}
.kakomi1b {
	padding: 5px;
	background-image: url(../images/back_craftpaper_dark.gif);
}
.kakomi2 {
	padding: 10px;
	background-color: #E7E7E7;
}


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

#page-header h1 {
	margin: 5px auto;
	font-weight: normal;
}
#header {
	margin-bottom: 7px;
}
p#logo {
	float: left;
	width: 218px;
	height: 39px;
}
#header-nav {
	float: right;
	width: 500px;
	height: 39px;
	position: relative;
}
#header-nav ul {
	position: absolute;
	bottom: 0;
	right: 0;
	color: #FFF;
}
#header-nav li {
	display: inline;
	margin-left: 16px;
	padding-left: 12px;
	background: url(../images/listmarker1.gif) no-repeat left center;
}
#header-nav li a {
	color: #333;
	text-decoration: none;
}
#header-nav li a:hover {
	color: #F60;
	text-decoration: underline;
}


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

#gnav {
	clear: both;
	width: 910px;
	margin: 0 0 1px 0;
}
#gnav ul li {
	display: inline;
}
#gnav ul li a {
	display: block;
	float: left;
	width: 130px;
	height: 26px;
	background: #FFF url(../images/gnav.gif) left top no-repeat;
	text-indent: -9999px;
}
#gnav ul li#gnav-toppage a { background-position: 0 0; }
#gnav ul li#gnav-point a { background-position: -130px 0; }
#gnav ul li#gnav-service a { background-position: -260px 0; }
#gnav ul li#gnav-company a { background-position: -390px 0; }
#gnav ul li#gnav-price a { background-position: -520px 0; }
#gnav ul li#gnav-portfolio a { background-position: -650px 0; }
#gnav ul li#gnav-contact a { background-position: -780px 0; }
#gnav ul li#gnav-toppage a:hover { background-position: 0 -26px; }
#gnav ul li#gnav-point a:hover { background-position: -130px -26px; }
#gnav ul li#gnav-service a:hover { background-position: -260px -26px; }
#gnav ul li#gnav-company a:hover { background-position: -390px -26px; }
#gnav ul li#gnav-price a:hover { background-position: -520px -26px; }
#gnav ul li#gnav-portfolio a:hover { background-position: -650px -26px; }
#gnav ul li#gnav-contact a:hover { background-position: -780px -26px; }




/*============================= 文字サイズ調整ボタン =============================*/

#fnav #font-size {
	clear: both;
	text-align: right;
	margin: 10px 0;
}


/*============================= メイン =============================*/

/* -------------- 基本 -------------- */

#main p {
	margin: 0 0 1em 0;
}
#main ul {
	margin:0 0 0 1em;
}
#main ul li {
	padding-left: 12px;
	background: url(../images/listmarker1.gif) left 0.5em no-repeat;
}
#main ol {
	margin:0;
	padding: 0 0 0 1em;
}
#main ol li {
	margin: 0 0 0 1.6em;
	padding: 0;
	list-style-type: decimal;
}
#main dl {
	margin:1em 0;
}
#main dt {
	font-weight: bold;
	margin-bottom: 0.25em;
	padding-left: 12px;
	background: url(../images/listmarker1.gif) left 0.5em no-repeat;
}
#main dd {
	margin-left: 1em;
}
#main dl.basic dd {
	margin-bottom: 1em;
}
#main table {
}
#main th, #main td {
	padding: 3px;
}
#main th {
	background-color: #E7E7E7;
	text-align: center;
}
#main td {
}
#main h2 {
	letter-spacing: 0.2em;
	margin: 0 0 20px;
	padding: 35px 0 0 10px;
	height: 69px;
	background: #333 url(../images/bg_midasi2.gif) left top repeat-x;
	color: #FFF;
	font-size: 1.3em;
}
#main h3 {
	letter-spacing: 0.2em;
	clear: both;
	margin: 30px 0 20px;
	padding: 10px 10px 10px 30px;
	background: #333 url(../images/bg_midasi3.gif) repeat-y;
	border-bottom: 2px solid #CCC;
	color: #FFF;
}
#main h4 {
	font-size: 1em;
	letter-spacing: 0.1em;
	color: #455580;
	margin: 20px 0;
	padding: 0 0 7px 5px;
	background: url(../images/bg_midasi4.gif) left bottom repeat-x;
}
#main h5 {
	margin: 1em 0 0.5em 0;
	padding-bottom: 0.5em;
	padding-left: 10px;
	background: url(../images/listmarker_bl.png) left 0.3em no-repeat;
}
#main p.catchcopy {
	margin-bottom: 1em;
}
#main p.leadcopy {
}
#main .gotop {
	clear: both;
	margin: 20px 0;
	text-align: right;
}
#main .gotop a {
	color: #666
}
/* -------------- コンタクト -------------- */
#main #consult {
	margin-top: 30px;
	background-image: url(../images/back_craftpaper.gif);
	border: 3px solid #455580;
}
#main #consult h3 {
	font-size: 1em;
	text-align: center;
	margin-top: 0;
	background: #455580 url(../images/bg_midasi2.gif) left center repeat-x;
}
#main #consult-innner {
	margin: 10px;
}
#main #consult-innner .r-main {
	width: 400px;
	border: none;
}
#main #consult-innner .kakomi1,
#main #consult-innner .kakomi2 {
	background: url(../images/back_craftpaper_dark.gif);
}


/*============================= サイトバー =============================*/

/* -------------- メニュー -------------- */
#sidebar p.tel-num {
	font-weight: bold;
}
#side-menu {
	margin: 10px 0;
}
#side-menu ul {
	background: #455580 url(../images/bg_stripe_blue.gif);
}
#side-menu ul li,
#side-menu ul li ul li {
	display: block;
	background: #455580 url(../images/bg_stripe_blue.gif);
	color: #FFF;
	border-bottom: 1px solid #FFF;
	padding: 3px 0 3px 6px;
}
#side-menu ul li ul li {
	background-image: none;
	background-color: #E7E7E7;
	color: #333;
}
#side-menu ul li a,
#side-menu ul li ul li a {
	display: block;
	color: #FFF;
	text-decoration: none;
}
#side-menu ul li ul li a {
	display: block;
	color: #333;
	text-decoration: none;
}
#side-menu ul li a:hover,
#side-menu ul li ul li a:hover {
	background-color: #036;
}
#side-menu ul li ul li a:hover {
	background-color: #CCC;
}
#side-menu-sub {
	border: 1px solid #A2A9BF;
	padding: 10px;
	background-color: #F8F8F8;
}
#side-menu-sub ul {
	margin: 0;
	padding: 0;
}
#side-menu-sub ul li a {
	display: block;
	color: #333;
	text-decoration: none;
	padding-left: 16px;
	background: url(../images/listmarker_bl.png) left 0.3em no-repeat;
}
#side-menu-sub ul li a:hover {
	background-color: #CCC;
}
#side-banner ul {
	margin-top: 10px;
}
#side-banner li {
	margin-bottom: 2px;
}

/*Twitter*/
#twitter	{
	margin: 10px auto;
	text-align: center;
}


/*============================= フッター =============================*/
#footer-link {
	padding: 2px;
	background-color: #333;
	text-align: center;
	border-bottom: 5px solid #E7E7E7;
}
#footer-link a {
	text-decoration:none;
	color: #CCC;
}
#footer-link a:hover {
	background-color: #666;
}
#footer-link-out a {
	color: #333;
	background-color: #FFF;
}
#footer-link-out a:hover {
	background-color: #CCC;
}


/*============================= 個別ページ =============================*/

/* -------------- TOPページ -------------- */
/* 実績紹介 */
#toppage #top-portfolio {
	background: #E7E7E7;
	margin: 20px 0;
	padding: 10px 0 10px 20px;
}
#toppage #top-portfolio h2,
#toppage #top-portfolio li {
	display: block;
	float: left;
	width: 150px;
	height: 100px;
	padding: 0;
	margin: 0 13px 0 0;
	border: 1px solid #CCC;
}
#toppage #top-portfolio h2 {
	text-indent: -9999px;
	background: url(../../images_toppage/midasi_jisseki.gif) no-repeat;
	border-color: #8F8F8F;
}
#toppage #top-portfolio ul {
	margin: 0;
	padding: 0;
}
#toppage #top-portfolio li {
	background-image: none;
}
#toppage #top-portfolio p {
	clear: both;
	text-align: right;
	margin: 0 20px 0 0;
}
/* サービス */
#service-list {
	width: 460px !important;
	float: left !important;
}
#service-list ul {
	margin: 0;
	padding: 0;
}
#service-list li {
	margin: 0 0 20px 0 !important;
	padding: 0 0 10px 140px !important;
	border-bottom: 1px solid #CCC !important;
	background: none;
}
#service-list li.set {
	background: url(../../images_toppage/service_img_set.gif) no-repeat;
}
#service-list li.renewal {
	background: url(../../images_toppage/service_img_renewal.gif) no-repeat;
}
#service-list li.ec {
	background: url(../../images_toppage/service_img_ec.gif) no-repeat;
}
#service-list li.charity {
	background: url(../../images_toppage/service_img_charity.gif) no-repeat;
}
#service-list li p {
}
#service-list li p.catch {
	margin-bottom: 5px;
	font-weight: bold;
}
#service-list li p.copy {
}
#service-list li p.price {
	margin: 0.5em 0;
	font-weight: bold;
}
#service-list li p.target {
	padding: 5px;
	background-color: #E7E7E7;
}
#service-list li p.target span {
	font-weight: bold;
}
#service-list li p.button {
	margin-top: 10px;
}
#service-point {
	width: 190px;
	float: right;
}
#service-point dl {
	margin: 0;
	padding: 0;
}
#service-point dt {
	margin: 1em 0 0.25em;
	padding: 0 0 0 10px;
	font-weight: bold;
	color: #455580;
	background: url(../images/listmarker_bl.png) left 0.35em no-repeat;
}
#service-point dd {
	margin: 0 0 0 10px;
	padding: 0;
}
#service-banner ul {
	margin: 0;
	padding: 0;
}
#service-banner li {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

/* 新着情報３種  */
#toppage #new-article {
	border: 1px solid #CCC;
	background: url(../images/bg_news.gif) center top repeat-y;
	margin: 30px 0;
}
#toppage #new-article #faq,
#toppage #new-article #corumn,
#toppage #new-article #news {
	width: 226px;
	float: left;
}
#toppage #new-article #faq h2,
#toppage #new-article #corumn h2,
#toppage #new-article #news h2 {
	position: relative;
	height: auto;
	font-size: 0.8em;
	letter-spacing: 0;
	margin: 0;
	padding: 10px;
	background: #333 url(../images/bg_stripe_gray.gif);
	color: #FFF;
}
#toppage #new-article #corumn h2 {
	background: url(../images/bg_stripe_darkgray.gif);
}
#toppage #new-article #faq h2 a,
#toppage #new-article #corumn h2 a,
#toppage #new-article #news h2 a {
	position: absolute;
	right: 10px;
	top: 10px;
}
#toppage #new-article #faq ul,
#toppage #new-article #corumn ul,
#toppage #new-article #news ul {
	margin: 0;
	padding: 10px;
}
#toppage #new-article #faq li,
#toppage #new-article #corumn li,
#toppage #new-article #news li {
	margin: 0 0 0.5em 0;
	padding: 0 0 0 16px;
	background: url(../images/listmarker_gr.gif) left 0.25em no-repeat;
}
/* -------------- 事業所概要 -------------- */
#googlemap iframe {
	border: 1px solid #666;
}
#googlemap p {
	text-align: right;
}
/* -------------- ごあいさつ -------------- */
#greeting #main p.img {
	float: left;
}
#greeting #main div.txt {
	width: 520px;
	float: right;
	margin-bottom: 30px;
}
/* -------------- 制作実績 -------------- */
#portfolio #main .site {
	clear: both;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px dotted #666666;
}
#portfolio #main .site h4 {
	margin-top: 0;
	margin-bottom: 5px;
}
#portfolio #main .site h5 {
	margin-bottom: 0;
	padding: 0;
	background: none;
}
#portfolio #main .site p.seo {
	margin: 0;
}
#portfolio #main .site p.work {
	padding: 1px 5px;
	background-color:#E7E7E7;
}
#portfolio #main .site img {
	border: 1px solid #666;
}
#portfolio #main .site .kakomi1 p, #portfolio #main .site .kakomi1 h5 {
	margin: 0;
}
/* -------------- よくある質問 -------------- */
#faq .kakomi2 a {
	color: #333;
}
#faq .kakomi2 a:hover {
	background-color: #CCC;
}
#faq .question, #faq .answer {
	position: relative;
}
#faq p {
	margin: 0;
}
#faq .question {
	border-bottom: 1px dotted #666;
	padding-bottom: 7px;
	margin-bottom: 7px;
}
#faq .answer {
	margin-bottom: 30px;
}
#faq .img {
	width: 32px;
	float: left;
}
#faq .txt {
	width: 630px;
	float: right;
}
#faq .question .txt {
	font-weight: bold;
	position: absolute;
	bottom: 7px;
	right: 0;
}
/* -------------- プライバシーポリシー（個人情報保護方針） -------------- */
#privacy-policy #main dt {
	margin-bottom: 0.25em;
}
#privacy-policy #main dd {
	margin-bottom: 1.5em;
}
/* -------------- リンク集 -------------- */
#links #main dt {
	margin-bottom: 0.25em;
	padding-left: 16px;
	background: url(../images/listmarker_gr.gif) left center no-repeat;
}
#links #main dd {
	margin-bottom: 1.5em;
}
/* -------------- ニュース＆トピックス -------------- */
/* -------------- #news-list=一覧、#news-detail=詳細 -------------- */
#news-list #main dl {
	margin-bottom: 20px;
}
#news-list #main dt,
#news-list #main dd	{
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
}
#news-list #main dt {
	clear: both;
	float: left;
	width: 7em;
	padding-left: 16px;
	background: url(../images/listmarker_gr.gif) left center no-repeat;
}
#news-list #main dd {
	padding-left: 8em;
	border-bottom: 1px dotted #CCC;
}

#news-list #main ul	{
	margin-bottom: 20px;
}
#news-list #main li	{
	margin-bottom: 0.5em;
	padding: 0 0 0.5em 16px;
	border-bottom: 1px dotted #CCC;
	background: url(../images/listmarker_gr.gif) left center no-repeat;
}

#news-detail #main h3 {
	margin-bottom: 0;
}
#news-detail #main p.date {
	margin-top: 0;
}
#news-detail #main div.txt {
	margin-bottom: 30px;
}
#news-detail #main #pre_and_next {
}
/* -------------- サービス -------------- */
#service-catch {
	padding-left: 150px;
	background-position: 10px top;
	background-repeat: no-repeat;
	padding-bottom: 20px;
}
.service-set #service-catch {
	background-image: url(../../images_toppage/service_img_set.gif);
}
.service-renewal #service-catch {
	background-image: url(../../images_toppage/service_img_renewal.gif);
}
.service-ec #service-catch {
	background-image: url(../../images_toppage/service_img_ec.gif);
}
.service-charity #service-catch {
	background-image: url(../../images_toppage/service_img_charity.gif);
}
#target p.midasi {
	font-size: 0.9em;
	font-weight: bold;
	color: #455580;
}
#target .kakomi1 ul {
	margin-left: 10px;
}
#target .kakomi1 li {
	padding-left: 16px;
	background: url(../images/listmarker_checkbox.gif) left 0.3em no-repeat;
}
#target .kakomi2 {
	padding: 10px 20px;
	background-color: #333;
	border-top: 5px solid #666;
}
#target .kakomi2 p {
	margin: 0;
}
#target .kakomi2 p.midasi {
	color: #FFF;
}
#target .kakomi2 p a {
	color: #CCC;
}
#target .kakomi2 p a:hover {
	color: #FFF;
}
ul#service-tab {
	width: 680px;
	height: 59px;
	margin: 30px 0 0 0;
	padding: 0;
	background: url(../images/tab_service_base.gif) left bottom repeat-x;
}
ul#service-tab li {
	display: inline;
	margin: 0;
	padding: 0;
}
ul#service-tab li a {
	display: block;
	float: left;
	width: 161px;
	height: 24px;
	margin: 0 2px;
	background: url(../images/tab_service.gif) left top no-repeat;
	text-indent: -9999px;
}
ul#service-tab li#point a { background-position: 0 0; }
ul#service-tab li#work a { background-position: -161px 0; }
ul#service-tab li#price a { background-position: -322px 0; }
ul#service-tab li#flow a { background-position: -483px 0; }
ul#service-tab li#point.current a { background-position: 0 -24px; }
ul#service-tab li#work.current a { background-position: -161px -24px; }
ul#service-tab li#price.current a { background-position: -322px -24px; }
ul#service-tab li#flow.current a { background-position: -483px -24px; }
ul#service-tab li#point a:hover { background-position: 0 -24px; }
ul#service-tab li#work a:hover { background-position: -161px -24px; }
ul#service-tab li#price a:hover { background-position: -322px -24px; }
ul#service-tab li#flow a:hover { background-position: -483px -24px; }

#service #main .r-sub .kakomi1 ol {
	padding: 0 0 0 5px;
}
#service #main .r-sub .kakomi1 ol li {
	margin-bottom: 0.5em;
}
#service #main .r-main dd {
	margin-bottom: 1.5em;
}
#service span.price {
	font-size: 1.5em;
	font-weight: bold;
}
#contact #main li {
	padding-left: 0;
	background: none;
}
/* -------------- 料金 -------------- */
#service-price table	{
	width: 100%;
}
#service-price table th.price-col1	{
	width: 40%;
}
#service-price table th.price-col2	{
	width: 23%;
}
#service-price table th.price-col3	{
	width: 35%;
}


/*=============================  CSS HACK =============================*/
 
/* -------------- clearfix -------------- */

dl:after, #container:after, #header:after, #content:after, #main:after, #sub:after, #sidebar:after, #footer:after, .r-ms:after, .r-sm:after, .TabbedPanelsContentGroup:after, .TabbedPanelsContent:after, #new-article:after, #gnav:after, .kakomi1:after, .kakomi1b:after, .kakomi2:after, #toppage-service:after, #faq .question:after, #faq .answer:after, #service-tab:after {
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
	content: ".";
}
dl, #container, #header, #content, #main, #sub, #sidebar, #footer, .r-ms, .r-sm, .TabbedPanelsContentGroup, .TabbedPanelsContent, #new-article, #gnav, .kakomi1, .kakomi1b, .kakomi2, #toppage-service, #faq .question, #faq .answer, #service-tab {
	display: inline-block;
}
/* 以下Win版IE6以前のみ適応（Mac版IE5は除外） ¥*/
* html dl, * html #container, * html #header, * html #content, * html #main, * html #sub, * html #sidebar, * html #footer, * html .r-ms, * html .r-sm, * html .TabbedPanelsContentGroup, * html .TabbedPanelsContent, * html #new-article, * html #gnav, * html .kakomi1, * html .kakomi1b, * html .kakomi2, * html #toppage-service, * html #faq .question, * html #faq .answer, * html #service-tab {
	height: 1%;
}
dl, #container, #header, #content, #main, #sub, #sidebar, #footer, .r-ms, .r-sm, .TabbedPanelsContentGroup, .TabbedPanelsContent, #new-article, #gnav, .kakomi1, .kakomi1b, .kakomi2, #toppage-service, #faq .question, #faq .answer, #service-tab {
	display: block;
}
/* */


/* -------------- 特定ブラウザに適用 -------------- */
/*comment-start
↓↑を外して使用
comment-end*/


/* 以下IE6以前とMac版IE5のみ適応 */
/*comment-start
* html #hack	{
	width: 400px;
}
comment-end*/

/* 以下IE6以前のみ適応（Mac版IE5は除外） */
/* ¥*/
/*comment-start
* html #hack	{
	width: 400px;
}
comment-end*/
/* */


/* 以下IE7のみ適応 */
/*comment-start
*:first-child+html #hack	{
	padding: 0px;
	margin: 0px;
}
comment-end*/