@charset "UTF-8";

/*--------------------------------------------------------------


textsetting.css
各ブラウザでのフォントサイズの違いをなくすcss

base.css
bodyの余白や、h1h2...の余白、clearfixなど、

【common.css】
上記cssのimportや、レイアウト（大枠）を記載したcss




--------------------------------------------------------------*/


/*  フォントサイズ早見表
	以下のようにサイズを指定することで各ブラウザでのフォントサイズを揃えることが出来ます。
	左記のパーセントで指定してください。

	77% = 10px	|	122% = 16px	|	167% = 22px	
	85% = 11px	|	129% = 17px	|	174% = 23px 
	92% = 12px	|	136% = 18px	|	182% = 24px 
	100% = 13px	|	144% = 19px	|	189% = 25px 
	107% = 14px	|	152% = 20px	|	197% = 26px 
	114% = 15px	|	159% = 21px	| 	

*/

/* ------------------------------------------------------------ */
/* リンク色 */
/* ------------------------------------------------------------ */

a:link{
	color:#666;
}
a:visited{
	color:#666;
}
a:hover{
	color:#000;
}
a:active{
	color:#000;
}




/* ------------------------------------------------------------ */
/* 基本、レイアウト指定 */
/* ------------------------------------------------------------ */

body{
	margin:0;
	padding:0;
	font-size:13px;
	background-color:#FFFFFF;
	font-family:sans-serif;
}

#all{
	background: #F8F8F8 url(../img/bg_side.jpg) top center repeat-y;
	margin:0;
	padding:0 1px 0 0;
	_padding:0;
}

*+html #all{
	padding:0;
}

#top_img{
	background:url(../img/bg_index.jpg) top center no-repeat;
	width:820px;
	margin:0 auto;
}

* html body {
	padding-left: 3px;
}

*+html body {
	padding-left: 3px;
}

#container{
	width:760px;
	margin:0px auto;
	padding:0;
}


/* 右レイアウト、左レイアウト */

#main-area{
	width:760px;
}

/* コンテンツの枠 */
.section{
	width:705px;
	margin:0 auto;
	overflow:hidden;
	padding:0 0 0 4px;
}

.section2,
.section3,
.section4,
.section5,
.section6{
	width:701px;
	margin:0 auto;
	overflow:hidden;
}
	

h1,h2,h3,h4,h5{
	margin:0;
	padding:0;
	}
	
p{
	padding:0;
	line-height:20px;
	margin:0;
	font-size:92%
}
.border,
.border-first{
	width:701px;
	margin:25px auto 25px auto;
	}

* html .border-first {
margin:20px auto 25px auto;
}
*+html .border-first {
margin:20px auto 25px auto;
}


/* ------------------------------------------------------------ */
/* ヘッダー */
/* ------------------------------------------------------------ */
#header-area{
	margin:0 auto;
	width:820px;
	overflow:hidden;
}

#identity{
	float:left;
}

#header-area .header-utility{
	width:434px;
	margin:0;
	padding:0 1px 0 0;
	float:right;
}

#header-area img{
	vertical-align:top;
	}


/* ------------------------------------------------------------ */
/* コンテンツ大枠 */
/* ------------------------------------------------------------ */

#contents-area{
	position:relative;
	padding:0;
	margin:0;
	overflow:hidden;
}

.tv-bottom{
	width:397px;
	margin:0;
	padding:0 1px 0 0;
	position:absolute;
	right:0;
	}
	

#contents-area .sitepath{
	padding:0;
	margin:0;
}

#contents-area .sitepath a:link,
#contents-area .sitepath a:visited{
	color:#333;
}
#contents-area .sitepath a:hover,
#contents-area .sitepath a:active{
	color:#666;
}
	
/* ------------------------------------------------------------ */
/* メイン */
/* ------------------------------------------------------------ */
#main-area{
}

#main-area .pagetitle{
	margin:0 0 30px 0;
}

/* セクション1 */

.section .title{
	width:480px;
	margin:34px 0px 0 0px ;
	float:left;
}

.section .title h1{
}

.section .title .digital{
	margin:10px 0 0 0;
}

.section .title-right{
	width:225px;
	float:right;
	margin:34px 0px 0 0px;
}

.section p{
	width:475px;
}
	
/* セクション2 */

.section2 h2 img{
	margin:30px 0 30px 0;
}
	
.section2 h3{
	border-bottom:1px solid #ccc;
	margin:0 0 15px 0;
	width:401px;
}
	
.section2 .service_left{
	width:407px;
	float:left;
}
.section2 .service_right{
	width:274px;
	float:right;
	margin:0 0px 0 0;
	}
	
/* セクション3 */
	
.section3 h2{
	margin:35px 0 35px 0;
	}
	
.section3 h3{
	border-bottom:1px solid #ccc;
	margin:0 0 15px 0;
	width:641px;
}
	
.section3 .service_left{
	width:641px;
	float:left;
}
.section3 .service_right{
	widows:51px;
	float:right;
	margin:0 0px 5px 0;
	}
	
.section3 p{
	clear:both;
	width:700px;
	margin:0 0 20px 0;
	}
	
/* セクション4 */

.section4 h2{
	margin:30px 0 30px 0;
	}
	
.section4 h3{
	border-bottom:1px solid #ccc;
	margin:0 0 15px 0;
	width:420px;
}
	
.section4 .service_left{
	width:420px;
	float:left;
}
.section4 .service_right{
	width:249px;
	float:right;
	margin:0 0px 0 0;
	}
	
/* セクション5 */

.section5 h2{
	margin:30px 0 30px 0;
	}
	
.section5 h3{
	border-bottom:1px solid #ccc;
	margin:0 0 15px 0;
	width:381px;
}
	
.section5 .service_left{
	width:381px;
	float:left;
	padding:0;
	margin:0;
}
.section5 .service_right{
	width:301px;
	float:right;
	margin:0;
	padding:0;
	}
	
.section5 p{
	padding:0;
	margin:0;
	width:381px;
	position:absolute;
	}

	
/* セクション6 */

.section6 h2{
	margin:30px 0 30px 0;
	}
	
.section6 h3{
	border-bottom:1px solid #ccc;
	margin:0 0 15px 0;
}
	
.section6 .service_left{
	width:381px;
	float:left;
}
.section6 .service_right{
	width:301px;
	float:right;
	margin:0 0px 0 0;
	}


#option .section h2{
	margin:0 0 15px 0;
	}
	
.title-option h2{
	width:700px;
	margin:0px auto 15px  auto;
	}	
	
#inquiry{
	margin:0 auto;
	background:url(../img/bg_inquiry.jpg) #FFF left top no-repeat;
	width:700px;
	height:677px;
	}
	
#inquiry .right{
	float:right;
	width:500px;
	}
	
#inquiry .logo{
	width:190px;
	float:left;
	padding:0;
	margin:10px 0 20px 0;
	}
	
#inquiry .free{
	width:254px;
	float:right;
	padding:0;
	margin:10px 0 20px 0;
	}
	
#inquiry h2{
	clear:both;
	border-bottom:1px solid #ccc;
	padding:0 0 10px 0;
	margin:0 0 20px 0;
	font-size:92%;
	}
	
#inquiry p{
	}
	
#inquiry p .red{
	color:#FF0000;
	}

.pagetop{
	width:695px;
	background:#ECECEC;
	text-align:right;
	margin:30px auto 30px auto;
	_margin:20px auto 30px auto;
	font-family: 'Verdana',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	clear:both;
	padding:5px;
}

*+html .pagetop {
	margin:20px auto 30px auto;
	}

.pagetop a{
	background:url(../img/icon_top.gif) left 5px no-repeat;
	_background:url(../img/icon_top.gif) left 3px no-repeat;
	padding:0 0 20px 10px;
	}
	
*+html .pagetop a{
	background:url(../img/icon_top.gif) left 3px no-repeat;
	}
	
.pagetop a:link{
	color:#666;
}
.pagetop a:visited{
	color:#666;
}
.pagetop a:hover{
	color:#000;
}



/* ------------------------------------------------------------ */
/* フッター */
/* ------------------------------------------------------------ */

#footer-area{
	width:820px;
	background:url(../img/bg_bottom.jpg) top center no-repeat;
	margin:0px auto;
}

#footer-area p.copyright{
	text-align:center;
	font-family: 'Verdana',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	margin:0;
	padding:20px 0 20px 0;
	}


/* ------------------------------------------------------------ */
/* デザインパーツ */
/* ------------------------------------------------------------ */

.section h3{
	margin:0 0 0 0;
	color:#000;
}

.dotto_top{
	border-top:1px dotted #CCC;
}
.dotto_bottom{
	border-bottom:1px dotted #CCC;
}


.section table{
	border-collapse: collapse;
}

.section table th,
.section table td{
	padding:5px;
	border:2px solid #FFF;
}

.section table th{
	text-align:left;
	background:#F0F0F0;
}

img.left {
	float: left;
	margin: 0 12px 5px 0;
}

img.right {
	float: right;
	margin: 0 0 5px 12px;
}

.topics{
	width:820px;
	text-align:center;
	margin:0 auto;
	font-size:114%;
}
.topics a {
	display:block;
	padding:10px;
}

.topics a:link,
.topics a:visited{
	background-color:#FF9;
	color:#333;
}

.topics a:hover,
.topics a:active{
	background-color:#FF3;
	color:#000;
}


/* ------------------------------------------------------------ */
/* Clearfix */
/* ------------------------------------------------------------ */

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: 1%;
  display:block;
  overflow: hidden;
  /**/
}