/*--------------------------------------------------
タイトル：アートライフ社
制作日：2014/11/12
----------------------------------------------------*/

/* index--------------------------------------------------
01  リセット
02  初期
03  大枠
04  ヘッダー
05  ナビゲーション
06  フッター
07　TOP
08  リンク
09　会社紹介
09　お問い合わせ
10　雑誌（書法漢学研究）
11　敬天斎主人の知識と遊び　
12　作品集制作
----------------------------------------------------*/

/* color--------------------------------------------------
えんじ　#663333

----------------------------------------------------*/

/*--------------------------------------------------
01　リセット
----------------------------------------------------*/
html {
	overflow-y: scroll;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,hr,form,address {
	margin: 0;
	padding: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
}
/*table {
	border-collapse: collapse;
	border-spacing: 0;
}*/
caption,th {
	text-align: left;
}
q:before,q:after {
	content: '';
}
object,
embed {
	vertical-align: top;
}
legend {
	display: none;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
}
img,abbr,acronym,fieldset {
	border: 0;
}
li {
	list-style-type: none;
}
textarea{
	font-size: 100%;
}
img{
	vertical-align: bottom;
}
a{
	outline:0;
}
/*--------------------------------------------------
02　初期
----------------------------------------------------*/
body {
	font-size: 14px;
	color: #333333;
	line-height: 1.6;
	text-align: center;
	font-family: "メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	background-color: #FFF;
	/*background-image: url(../common/bg.jpg);
	background-repeat: repeat-x;*/
}
.clear {
	clear: both;
}
.clearfix:after { 
    content: " ";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.clearfix {
	zoom:1; /*IE用*/
}
a{
    overflow:hidden;
}
a:hover{
	color:#FF0000;
}
.fs10{
	font-size: 10px;
}
.fs11{
	font-size: 11px;
}
.fs12{
	font-size: 12px;
}
.fs16{
	font-size: 16px;
}
.fs18{
	font-size: 18px;
}
.fs20{
	font-size: 20px;
}
.bold{
	font-weight:bold;
}
.red{
	color: #FF3333;
}
.red-b{
	color: #CC0000;
	font-weight:bold;
}
p{
	margin:0 15px 15px 15px;
}
p.bl{
	margin:0 15px 0px 15px;
}
p.mb0{
	margin-bottom:0;
}
ul.last,ol.last{
	margin-bottom:15px;
}
img.left{
	float:left;
	padding:0 10px 10px 0;
}
img.right{
	float:right;
	padding:0 0 10px 10px;
}

h1{
	height:42px;
	background-image: url(../common/bg-h1.gif);
	background-repeat: no-repeat;
	font-size: 20px;
	padding:6px 0 0 34px;
	text-shadow: 2px 2px 1px #999;
}
h1.top{
    height:auto;
	margin-bottom:20px;
	background-image: none;
	background-repeat: no-repeat;
	padding:0;
}
h2{
	margin-bottom:10px;
	border-bottom: 2px dotted #295229;
    border-left: 10px solid #295229;
    font-size: 18px;
    font-weight: bold;
    padding-left: 10px;
}
h2.top{
	margin-bottom: 10px;
	border-bottom: none;
    border-left: none;
    font-size: 18px;
    font-weight: bold;
    padding-left:0;
}
.waku{
    border:1px solid #0000FF;
}
.green{
	color:#468944;
}
/*--------------------------------------------------
03　大枠
----------------------------------------------------*/
#page {
	width: 964px;
	margin: 0 auto;
	background-image: url(../common/page-line.gif);
	background-repeat: repeat-y;
	margin-bottom:5px;
}
#container {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	border-bottom: 1px solid #CCC;
	text-align: left;
	background-color: #DEDEDE;
	background-image: url(../common/bg.jpg);
	background-repeat: repeat;
	position:relative;
}
#side{
	width: 150px;
	float: left;
	margin:0 20px 10px 10px;
	display:inline;
}
#main{
	width: 760px;
	float: left;
	margin:0 10px 10px 0px;
	display:inline;
}
/*--------------------------------------------------
04　ヘッダー
----------------------------------------------------*/
p.top{
	margin-bottom:0;
	margin-left:5px;
	font-size: 12px;
}
#header {
	width: 950px;
	margin-bottom: 15px;
	background-color: #663333;
	background-image: url(../common/header-right.jpg);
	background-repeat: no-repeat;
	background-position: right center;
	-webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
}
img.logo{
	margin-left: 20px;
	/*margin-bottom: 8px;
	margin-top: 8px;*/
}
img.domain{
	margin-left: 20px;
	margin-bottom: 8px;
}
img.btn-contact{
	margin: 5px auto 5px 50px;

}
img.img-header{
	margin-bottom: 5px;
}
/*--------------------------------------------------
05　ナビゲーション
----------------------------------------------------*/
#navi,#sub-navi{
	margin-bottom:30px;
}
#navi ul li{
	margin-bottom:1px;
}
#side a:hover img{
    filter: alpha(opacity=70);
    -moz-opacuty: 0.70;
    opacity: 0.70;
}
img.keitensai{
	margin-bottom:30px;;
}
/*--------------------------------------------------
06　フッター
----------------------------------------------------*/
#footer{
	width: 950px;
	clear: both;
	background-color: #663333;
}

address{
	padding:5px;
	text-align: center;
	margin-bottom:5px;
	background-color: #FFFFFF;
}
#footer p.copyright{
　　font-family: Verdana;
	color: #FFFFFF;
	font-size: 10px;
	text-align: center;
	background-color: #663333;
	margin:0;
	padding-bottom:2px;
}
/*--------------------------------------------------
07　TOP
----------------------------------------------------*/
#fb{
	background-color:#FFFFFF;
	margin-bottom:30px;
}

#left{
	float:left;
	width:410px;
	margin-right:20px;
}
#right{
	float:left;
	width:330px;
}
table.shinkan{
    width:390px;
	margin-left:10px;
}
table.shinkan td{
    /*width:130px;
	text-align:center;*/
	vertical-align:top;
}
p.topics{
	text-indent:-1em;
	margin:10px 15px 10px 30px;
	padding-bottom:5px;
	border-bottom:1px dashed #666;
}
#col{
	background-color:#FFFFFF;
}
/*ストラップ　ポップアップ*/
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFF;
padding: 5px 5px 5px 18px;
left: -1000px;
border: 1px solid #CCC;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 20px;
left: -50px; /*position where enlarged image should offset horizontally */

}
#counter{
	position:absolute;
	right:2px;
	bottom:4px;
}
/*--------------------------------------------------
07　リンク
----------------------------------------------------*/
table.link {
	width: 760px;
}
table.link th {
	width: 150px;
	padding-left: 10px;
	background-image: url(../link/bg-th.gif);
	background-position: left 15px;
	background-repeat: no-repeat;
	vertical-align:top;
}
table.link td {
	padding-left: 10px;
	vertical-align:top;
}
table.link th, table.link td {
	border-bottom: 1px dashed #666;
	padding:10px 0 10px 8px;
}
table.link th.first, table.link td.first {
	border-top: 1px dashed #666;
}
ul.link {
	margin-left: 50px;
	margin-bottom:20px;
}
ul.link li {
	text-indent: -1em;
}



/*--------------------------------------------------
08　会社紹介　
----------------------------------------------------*/
table.company {
	width: 700px;
	margin: 0 auto 40px 0;
	background-image: url(../company/bg.jpg);
	background-position: 310px 35px;
	background-repeat: no-repeat;
}
table.company th, table.company td {
	border-bottom: 1px dashed #CCCCCC;
	vertical-align:top;
}
table.company th.first, table.company td.first {
	border-top: 1px dashed #CCCCCC;
}
table.company th {
	width: 80px;
	padding-left: 10px;
	background-image: url(../company/bg-th.gif);
	background-position: left center;
	background-repeat: no-repeat;
}


table.form {
	width: 565px;
	margin: 0 0 20px 15px;
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
}
/*--------------------------------------------------
09　お問い合わせ　
----------------------------------------------------*/
table.form th {
	width: 120px;
	padding: 3px;
	border-bottom: 1px dashed  #666;
	background-color: #F7F7F7;
	vertical-align:top;
}

table.form td {
	padding: 3px;
	border-bottom: 1px dashed  #666;
	font-size: 12px;
}

.width150 {
	width: 150px;
}

.width300 {
	width: 300px;
}

.width400 {
	width: 400px;
}

input:focus, textarea:focus, select:focus {
	background-color: #FFFFE0;
}

/*--------------------------------------------------
10　雑誌（書法漢学研究）
----------------------------------------------------*/
table.mag{
    margin-left: auto;
    margin-right: auto;
}
.mag p{
	margin:0 0 10px 0;
	line-height:1.6;
	/*text-indent: 1em;*/
}
.comment{
    font-size: 80%;
}
.mag h2{
	color: #663333;
	padding: 5px 5px 5px 15px;
	margin-bottom: 0px;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #663333;
	border-left-color: #663333;
}
.mag h3{
	background-color:#663333;
	color: #FFFFFF;
	padding: 5px 5px 5px 15px;
	margin: 0;
}
#magazine a{
	color: #666600;
	text-decoration: underline;
}
.siyou{
	width: 136px;
	_width: 150px;
	border: 2px dashed #999999;
	font-size: 80%;
	padding: 5px;
}
table.comment p{
	margin:10px 0 0 10px;
}
img.titlelogo{
    margin-left:20px;
}
table.koudoku p{
	margin:5px 10px 10px 10px;
}
/*- Menu Tabs 2--------------------------- */

    #tabs2 {
	float:left;
	width:760px;
	font-size:93%;
	line-height:normal;
	border-bottom:1px solid #84776B;
	font-weight: bold;
      }
    #tabs2 ul,#tabs2 li{
	margin:0;
	padding:0;
	}
	#tabs2 ul {
          margin-left: auto;
		  margin-right: auto;
		  padding:10px 10px 0 20px;
          list-style:none;
      }
    #tabs2 li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs2 a {
      float:left;
      background:url(../magazine/tableft2.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs2 a span {
      float:left;
      display:block;
      background:url(../magazine/tabright2.gif) no-repeat right top;
      padding:5px 10px 4px 10px;
      color:#685F55;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs2 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs2 a:hover span {
      color:#74675B;
      }
    #tabs2 a:hover {
      background-position:0% -42px;
      }
    #tabs2 a:hover span {
      background-position:100% -42px;
      }

      #tabs2 #current a {
              background-position:0% -42px;
      }
      #tabs2 #current a span {
              background-position:100% -42px;
      }
.clear{
    clear: left;
}
/*- 推薦文--------------------------- */
.midashi{
	color: #FFFFFF;
	background-color: #993300;
	padding: 5px;
	font-weight: bold;
}
.midashi2{
	color: #FFFFFF;
	background-color: #993300;
	padding: 5px;
	font-weight: bold;
	font-size: 80%;
}
.line{
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #993300;
	padding: 3px;
}
.line2{
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #993300;
	padding: 3px;
	font-size: 80%;
}
.left{
    float:left;
    margin-right:20px;
}
.right{
    float:right;
    margin-left:20px;
}
/*- 申し込みフォーム--------------------------- */
.ls2{
letter-spacing:3em;
}
.ls4{
letter-spacing:0.333em;
}
table.price{
	border-collapse: collapse;
	margin-top: 15px;
	margin-bottom: 15px;
	border: 1px solid #666666;
}
.price th{
	padding: 5px;
	border-bottom: 1px solid #999999;
	text-align:left;
	background-color: #B0B0B0;
}
.price td {
	padding: 5px;
	border-bottom: 1px solid #999999;
	text-align:left;
	background-color: #E3E3E3;
}
table.order{
	border-collapse: collapse;
	border: 0px solid #666666;
	background-color: #E2DFDA;
	margin-bottom: 10px;
}
.order td,.order th {
	padding: 5px;
	border-bottom: 1px solid #999999;
	text-align:left;
}
.td2,.th2 {
	background-color: #EAE9E3;
	padding: 5px;
	border-bottom: 1px solid #999999;
	text-align:left;
}
.hissu{
	color: #FF0000;
}
/*- メールマガジン--------------------------- */
table.mailmag{

}
table.mailmag p{
	margin:10px auto 0 auto;
	line-height: 1.7;
	text-indent: 0em;
}
.no{
	color: #FFFFFF;
	background-color: #663333;
	font-weight: bold;
	font-size: 120%;
	padding: 0 5px 0 5px;
}
table.mailmag h2{
	font-size: 120%;
	font-weight: bold;
	margin:10px auto 10px 10px;
}
.author{
	text-align:right;
	padding-top:15px;
	font-weight: bold;	
}
.notes {
	font-size: 80%;
}
/*- トピックス--------------------------- */
table.topics blockquote{
	line-height:1.4;
	background-color:#FFFFFF;
	padding:5px;
}
/*--------------------------------------------------
11　敬天斎主人の知識と遊び
----------------------------------------------------*/
ol{
	margin-left:30px;
	line-height:1.2;
}
ol li{
	list-style:decimal;
}
table.gallery td{
	vertical-align: top;
	text-align:center;
}	
/*--------------------------------------------------
12　作品集制作
----------------------------------------------------*/
table.jisseki{
	margin-left:50px;
}