@charset "UTF-8";

/* 基本
---------------------------------------------*/
*{ margin:0; padding:0; zoom:1;} 
html{ height:100%;}
html>/**/body{ overflow:-moz-scrollbars-vertical;}
html:first-child body{ min-height:100%; padding-bottom:1px;}
body { color: #777777; font-size: 12px; font-family:'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS P Gothic','Lucida Grande','Geneva','Arial','Helvetica','Verdana', Sans-serif; background: #FFFFFF; }
img { vertical-align: top;}
a { color: #ffffff; text-decoration:none}
a:visited { color: #ffffff; text-decoration:none}
a:hover, a:focus { color: #ffffff; text-decoration:underline}
a:active { color: #ffffff; text-decoration:underline}

#wrapper { margin: 0 auto; background:url(../images/background.gif) top left repeat;}
#header { width: 800px; margin: 0 auto; position: relative; }
#content { width: 800px; margin: 0 auto; background-color:#FFFFFF; position: relative; padding-bottom:15px;}
#left_contents { float:left; width: 210px; background-color:#FFFFFF; }
#right_contents { float:left; width: 580px; background-color:#FFFFFF; }
#content p { line-height: 1.4; letter-spacing: 0.05em; text-align: justify; text-justify: inter-ideograph; }


#content_inner { clear: both; width: 100%; /* for WinIE6,7 */ position: relative; width: 800px; margin-top: 5px;}
#content_inner_m_t_7 { clear: both; width: 100%; /* for WinIE6,7 */ position: relative; width: 800px; margin-top: 7px;}
#section { float: left; }
#content h2 { font-size: 14px; }


#inner p { line-height: 1.4; letter-spacing: 0.05em; text-align: justify; text-justify: inter-ideograph; }
#inner li { line-height: 1.4; letter-spacing: 0.05em; text-align: justify; text-justify: inter-ideograph; }
.waku { border: 1px solid #c5c5c5;}
.waku_bla { border: 1px solid #999999;}


#top_hyou_contents li { float:left;}
#top_hyou_contents ul { width:560px; padding-top:5px;}

/* 制作実績
---------------------------------------------*/
#works_hyou_title_left { float:left; width:320px; padding:5px 5px 5px 5px; color:#FFFFFF; font-weight:bold; height:22px;}
#works_hyou_title_right { float:left; width:230px; padding:7px 5px 3px 5px; color:#FFFFFF; font-weight:bold; font-size:12px; height:22px;}
#works_play { width:555px; padding:5px 5px 5px 10px; background-color:#f8f8f8; text-align:right;}
#works_play01 a { display: block; text-decoration: none; text-indent: -9999px; height: 30px; }
#works_play01 a { width: 140px; background: url("../images/works_play.gif") top left no-repeat;}
#works_play01 a:hover, #works_play01 a:active, #works_play01 a.selected { background-position: 0 -30px;}


#works_photo { width: 550px; height: 97px; }
#works_photo li { float:left; padding-left:3px;}




/* 制作の流れ
---------------------------------------------*/
#flow_hyou_left { float:left; width:84px; padding:5px 5px 5px 5px; height:84px;}
#flow_hyou_right { float:left; width:466px; padding:5px 5px 5px 5px; color:#FFFFFF; font-weight:bold; height:18px;}
#flow_hyou_contents { float:left; width:466px; padding:5px 5px 5px 5px; background-color:#f8f8f8; height:54px;}
#flow_arrow { width:575px; text-align:center; padding:10px 0px 0px 0px; }



/* 料金・プラン
---------------------------------------------*/
#price_hyou_title { width:560px; padding:5px 5px 5px 5px; color:#FFFFFF; font-weight:bold; height:18px;}
#price_hyou_contents { float:left; width:560px; padding:5px 5px 5px 5px; background-color:#f8f8f8;}
#price_hyou_right { float:left; width:550px; padding:5px 5px 5px 5px; color:#FFFFFF; font-weight:bold; height:22px;}
#price_hyou_01 { float:left; width:322px; padding:0px 0px 5px 0px; }
#price_hyou_02 { float:left; width:317px; color:#FFFFFF; padding:2px 0px 0px 2px; background-color:#36312e; font-weight:bold; height:14px;}
#price_hyou_03 { float:left; width:312px; padding:5px 5px 5px 5px; background-color:#FFFFFF;}
#price_hyou_04 { width:560px; padding:5px 5px 20px 5px; color:#c52c1e; font-size:14px; font-weight:bold;}
#price_hyou_05 { width:550px; padding:5px 5px 5px 5px; color:#a09e9c; font-size:14px; font-weight:bold;}
#price_hyou_06 { width:550px; padding:5px 5px 5px 5px;}
#price_hyou_07 { width:555px; color:#FFFFFF; padding:2px 0px 0px 2px; background-color:#36312e; font-weight:bold; height:14px;}
#price_hyou_08 { width:550px; padding:5px 5px 5px 5px; background-color:#FFFFFF;}

#section_price { float:left; width:322px;}
#section_price02 { float:left; width:229px; padding:0px 4px 0px 5px;}


/* 活用方法
---------------------------------------------*/
#howto_photo { width: 550px; height: 41px; }
#howto_photo li { float:left; padding-left:10px;}
#howto_hyou_01 { width:550px; padding:5px 5px 5px 5px; color:#a09e9c; font-size:14px; font-weight:bold;}
#howto_hyou_02 { width:550px; padding:5px 5px 5px 5px;}



/* お問い合わせ
---------------------------------------------*/
#contact_hyou_contents { font-size:12px; width:560px; padding:5px 5px 5px 5px;}
#contact_hyou_title { width:560px; padding:2px 5px 2px 5px; color:#FFFFFF; font-weight:bold;}

/* プライバシーポリシー
---------------------------------------------*/
.pp_01 { width: 438px; }
.pp_02 { width: 362px; text-align:right; }
.pp_03 { width: 509px; }
.pp_04 { width: 120px; padding:5px 5px 0px 15px ;}
.pp_05 { width: 340px; height: 97px; padding:20px 15px 5px 5px ;}
.pp_03 h2 { margin-bottom:10px; clear: both; width: 100%; /* for WinIE6,7 */ }
.pp_04 h2 { margin-bottom:10px; clear: both; width: 100%; /* for WinIE6,7 */ }
.pp_03_01 { padding-left:10px; padding-right:10px; }
.pp_03_02 { width: 489px; padding-left:10px; padding-right:10px; }
.pp_03_03 { width: 320px; padding-left:189px; padding-right:10px; margin-top:20px; text-align:right; }
.pp_03_04 { width: 509px ; height: 130px; border: 1px solid #CACACA; }
.pp_03_02 li { float: left; margin-bottom:10px; }
.pp_03_02 ul { clear: both; width: 100%; /* for WinIE6,7 */ }

/* お問い合わせ
---------------------------------------------*/
.con_01 { width: 438px; }
.con_02 { width: 362px; text-align:right; }
.con_03 { width: 509px; }
.con_04 { width: 509px; margin-right:21px }
.con_03 h2 { margin-bottom:10px; clear: both; width: 100%; /* for WinIE6,7 */ }
.con_04 h2 { margin-bottom:10px; clear: both; width: 100%; /* for WinIE6,7 */ }
.con_03_01 { padding-left:10px; padding-right:10px; }
.con_03_02 { width: 509px; text-align:center}
.con_03_03 { width: 279px; padding-left:220px; padding-right:10px; margin-top:20px; text-align:right; }
.con_03_01 li { float: left; margin-bottom:10px; }
.con_03_01 ul { clear: both; width: 100%; /* for WinIE6,7 */ }

/* 会社概要
---------------------------------------------*/
.cp_01 { width: 438px; }
.cp_02 { width: 362px; text-align:right; }
.cp_03 { width: 509px; position: relative; }
.cp_04 { width: 270px; margin-left:21px }
.cp_05 { width: 800px; position: relative; }
.cp_03 h2 { margin-bottom:10px; clear: both; width: 100%; /* for WinIE6,7 */ }
.cp_04 h2 { margin-bottom:10px; clear: both; width: 100%; /* for WinIE6,7 */ }
.cp_05 h2 { margin-bottom:10px; clear: both; width: 100%; /* for WinIE6,7 */ }
.title_space { margin-top:25px; clear: both; width: 100%; /* for WinIE6,7 */ }
.cp_03_01 { width: 100px; padding-left:10px; padding-right:10px; }
.cp_03_02 { width: 280px; padding-left:10px; padding-right:10px; border-left: 1px solid #CACACA; }
.cp_03_03 { width: 489px; padding-left:10px; padding-right:10px; }
.cp_03_04 { width: 489px; padding-left:10px; padding-right:10px; margin-top:15px }
.cp_04_01 { padding-left:10px; padding-right:10px; }
.cp_05_01 { float:left; width: 532px; padding-left:10px; padding-right:10px; }
.cp_05_02 { float:left; width: 238px; padding-right:10px; }

.cp_05_01 li { float:left; }

/* トップページ
---------------------------------------------*/
#top_title { clear: both; width: 100%; /* for WinIE6,7 */ width: 580px; font-weight:bold; font-size:14px; color:#000000; padding-top:10px; border-bottom: 3px solid #c52c1e; }

.top_textarea { padding-top:5px;}
#top_hyou { width:570px; padding:10px 5px 0px 5px;}
#top_hyou02 { width:570px; padding:0px 5px 0px 5px;}
#top_hyou_title_left { float:left; width:420px; padding:5px 5px 3px 5px; color:#FFFFFF; font-weight:bold; height:18px;}
#top_hyou_title_right { float:left; width:130px; padding:5px 5px 3px 5px; color:#FFFFFF; font-weight:bold; font-size:12px; height:18px;}



#top_hyou_contents { width:560px; padding:10px 0px 5px 10px; background-color:#f8f8f8;}




#tb01, #tb02 { width:275px; float:left; padding-left:10px; padding-top:10px;}
#tb01 a , #tb02 a { display: block; text-decoration: none; text-indent: -9999px; height: 85px; }
#tb01 a { width: 275px; background: url("../images/tb01.gif") top left no-repeat;}
#tb02 a { width: 275px; background: url("../images/tb02.gif") top left no-repeat;}
#tb01 a:hover, #tb01 a:active, #tb01 a.selected { background-position: 0 -85px;}
#tb02 a:hover, #tb02 a:active, #tb02 a.selected { background-position: 0 -85px;}


/* ロゴとタイトル
---------------------------------------------*/
#logo { float: left; }
#title { text-align: center; padding: 0px 0px 2px; }

/* フッター
---------------------------------------------*/
#footer { position: relative;}
#footer_contents { text-align:center; position: relative; padding-top: 10px; }
#copyright { text-align:center; padding-top: 5px; font-size: 11px;}

/* ヘッダー・グローバルナビゲーション
---------------------------------------------*/
#header_txt {width:340px; padding-top:8px;}
#header_info {width:460px; text-align:right;}
#header_line { height:340px; background:url(../images/header_bg.gif) bottom left repeat;}
#header_title { height:178px; background-color:#000000;}
#header_contents { text-align:center; }

/* メニュー
---------------------------------------------*/
#navi { padding-left:5px; padding-right:10px }

#globalNavigation li { }
#globalNavigation li a { display: block; text-decoration: none; text-indent: -9999px; height: 50px; width: 200px; overflow:hidden;}

#gn01 a { width: 200px; background: url("../images/menu01.gif") top left no-repeat;}
#gn02 a { width: 200px; background: url("../images/menu02.gif") top left no-repeat;}
#gn03 a { width: 200px; background: url("../images/menu03.gif") top left no-repeat;}
#gn04 a { width: 200px; background: url("../images/menu04.gif") top left no-repeat;}
#gn05 a { width: 200px; background: url("../images/menu05.gif") top left no-repeat;}
#gn06 a { width: 200px; background: url("../images/menu06.gif") top left no-repeat;}


#gn01.gn_on a { width: 200px; background: url("../images/menu01.gif") top left no-repeat; background-position: 0 -50px;}
#gn02.gn_on a { width: 200px; background: url("../images/menu02.gif") top left no-repeat; background-position: 0 -50px;}
#gn03.gn_on a { width: 200px; background: url("../images/menu03.gif") top left no-repeat; background-position: 0 -50px;}
#gn04.gn_on a { width: 200px; background: url("../images/menu04.gif") top left no-repeat; background-position: 0 -50px;}
#gn05.gn_on a { width: 200px; background: url("../images/menu05.gif") top left no-repeat; background-position: 0 -50px;}
#gn06.gn_on a { width: 200px; background: url("../images/menu06.gif") top left no-repeat; background-position: 0 -50px;}

#globalNavigation a:hover, #globalNavigation a:active, #globalNavigation a.selected { background-position: 0 -50px;}

/* クリア
---------------------------------------------*/
.c-both { clear:both; height:0px; font-size:0px; line-height:0%; }

/* テキスト装飾
---------------------------------------------*/
.img_left { float: left; padding: 0px 0px 10px 0; border:none; }
.lh80 { line-height:80%; }
.lh100 { line-height:100%; }
.lh120 { line-height:120%; }
.lh150 { line-height:150%; }
.p_b_15 { padding-bottom:15px;}
.p_b_10 { padding-bottom:10px; }
.p_b_8 { padding-bottom:8px; }
.p_b_5 { padding-bottom:5px; }
.p_t_8 { padding-top:8px; }
.td_ph10ps5 { padding:10px 5px 10px 5px; }
.pad5 { padding:5px 5px 5px 5px; }
.p_b_5 { padding-bottom:5px; }
.p_10 { padding:10px; }
.p_8 { padding:8px; }
.p_5 { padding:5px; }
.p_0 { padding:0px; }
.p_t_2 { padding-top:2px; }
.p_t_5 { padding-top:5px; }
.p_t_10 { padding-top:10px; }
.p_t_15 { padding-top:15px; }
.p_l_5 { padding-left:7px; }
.p_l_7 { padding-left:7px; }
.p_l_10 { padding-left:10px; }
.p_l_15 { padding-left:15px; }
.p_l_20 { padding-left:20px; }
.p_l_30 { padding-left:30px; }
.p_l_40 { padding-left:40px; }
.p_r_10 { padding-right:10px; }
.p_r_15 { padding-right:15px; }
.p_r_20 { padding-right:20px; }
.p_r_30 { padding-right:30px; }
.p_r_40 { padding-right:40px; }

.m_r_2 { margin-right:2px; }
.m_r_3 { margin-right:3px; }
.m_r_5 { margin-right:5px; }
.m_r_10 { margin-right:10px; }
.m_t_2 { margin-top:2px; }
.m_t_3 { margin-top:3px; }
.m_t_5 { margin-top:5px; }
.m_t_8 { margin-top:8px; }
.m_t_10 { margin-top:10px; }
.m_t_15 { margin-top:15px; }
.m_t_20 { margin-top:20px; }
.m_t_25 { margin-top:25px; }
.m_t_30 { margin-top:30px; }
.m_b_30 { margin-bottom:30px; }
.m_b_20 { margin-bottom:20px; }
.m_b_18 { margin-bottom:18px; }
.m_b_15 { margin-bottom:15px; }
.m_b_10 { margin-bottom:10px; }
.m_b_8 { margin-bottom:8px; }
.m_b_5 { margin-bottom:5px; }
.m_b_3 { margin-bottom:3px; }
.m_b_2 { margin-bottom:2px; }
.m_b_1 { margin-bottom:1px; }
.m_l_2 { margin-left:2px; }
.m_l_5 { margin-left:5px; }
.m_l_6 { margin-left:6px; }
.m_l_7 { margin-left:7px; }
.m_l_8 { margin-left:8px; }
.m_l_10 { margin-left:10px; }
.m_l_15 { margin-left:15px; }
.m_l_18 { margin-left:18px; }
.m_l_20 { margin-left:20px; }

.wid_476 { width:476px; }
.wid_237 { width:476px; }
.width200 { width:200px; }
.width350 { width:350px; }

.blu { color:#0000FF; }
.blk { color:#000000; }
.gray { color:#CCCCCC; }
.gray33 { color:#333333; }
.gray77 { color:#777777; }
.red { color:#c52c1e; }
.org { color:#CC6600; }
.gol { color:#b39243; }
.white { color:#FFFFFF;}
.bld { font-weight:bold;}
.nml { font-weight:normal;}
.px10 { font-size:10px;}
.px11 { font-size:11px;}
.px12 { font-size:12px;}
.px14 { font-size:14px;}
.px16 { font-size:16px;}
.px18 { font-size:18px;}
.px20 { font-size:20px;}
.bg_gray { background-color:#CCCCCC; }
.bg_red { background-color:#c52c1e; }
.bg_blk { background-color:#000000; }
.border { border: 1px solid #CCCCCC; font-size:12px; padding:2px;}
.border_33 { border: 1px solid #333333; padding-top:5px;}
.border_blk { border: 1px solid #000000; }
.m10 {margin: 10px;}
.m10t {margin-top: 10px;}
.m10b {margin-bottom: 10px;}
.m10r {margin-right: 10px;}
.m10l {margin-left: 10px;}
.m10tl {margin-top: 10px;margin-left: 10px;}
.m10tr {margin-top: 10px;margin-right: 10px;}
.m10tb {margin-top: 10px;margin-bottom: 10px;}
.m10lr {margin-left: 10px;margin-right: 10px;}
.m20l {margin-left: 20px;}
.m20r {margin-right: 20px;}
.m20b {margin-bottom: 20px;}