@charset "UTF-8";

/* **********************************************************************
 *
 *       Title:   Site-Shokunin CMS
 *       Notes:   Hand-crafted by WebLab Corporation in Tokyo.
 *
 ********************************************************************** */


/* IE用印刷設定CSS ###################### */

@media print{

body {
_zoom: 67%; /*WinIE only */
}


#top-a {_zoom: 95%; /*WinIE only */
}
}


/* BLOCK内スタイル設定 ###################### */

.clearfix {zoom:1;}
.clearfix:after{
       content: ""; 
       display: block; 
       clear: both;
       }

p { margin: 0; line-height: 1.5; }

span.texts { font-size: xx-small; line-height: 1.3; }
html>body span.texts { font-size: x-small; }

span.textn { font-size: x-small; line-height: 1.5; }
html>body span.textn { font-size: small; }

span.textl { font-size: 125%; line-height: 1.5; }

span.textll { font-size: 180%; line-height: 1.5; }

span.textxl { font-size: 250%; line-height: 1.5; }

span.textxxl { font-size: 350%; line-height: 1.5; }

table.nbr,
table.tbr table.nbr {
       border-top: none;
       border-left: none;
       border-collapse: collapse;
       }

table.nbr th,
table.tbr table.nbr th {
       padding: 0;
       border-right: none;
       border-bottom: none;
       color: #333;
       font-size: x-small;
       line-height: 1.5;
       }
html>body table.nbr th,
table.tbr table.nbr th { font-size: small; }

table.nbr td,
table.tbr table.nbr td {
       padding: 0;
       border-right: none;
       border-bottom: none;
       color: #333;
       font-size: x-small;
       line-height: 1.5;
       }
html>body table.nbr td,
table.tbr table.nbr td { font-size: small; }

table.tbr,
table.nbr table.tbr {
       border-top: 1px solid #ccc;
       border-left: 1px solid #ccc;
       border-collapse: collapse;
       background: #fff;
       }

table.tbr th,
table.nbr table.tbr th {
       padding: 6px 10px;
       border-right: 1px solid #ccc;
       border-bottom: 1px solid #ccc;
       background: #e4f6fc;
       color: #2599bf;
       font-size: x-small;
       line-height: 1.5;
       }
html>body table.tbr th,
table.nbr table.tbr th { font-size: small; }

table.tbr th p,
table.nbr table.tbr th p {
       color: #2599bf;
       }

table.tbr td,
table.nbr table.tbr td {
       padding: 6px 10px;
       border-right: 1px solid #ccc;
       border-bottom: 1px solid #ccc;
       color: #333;
       font-size: x-small;
       line-height: 1.5;
       background: #fff;
       }
html>body table.tbr td,
table.nbr table.tbr td { font-size: small; }


table.tbr2,
table.nbr table.tbr2 {
       border-top: 1px solid #ccc;
       border-left: 1px solid #ccc;
       border-collapse: collapse;
       background: #fff;
       }

table.tbr2 th,
table.nbr table.tbr2 th {
       padding: 6px 10px;
       border-right: 1px solid #ccc;
       border-bottom: 1px solid #ccc;
       background: #2599bf;
       color: #fff;
       font-size: x-small;
       line-height: 1.5;
       }
html>body table.tbr2 th,
table.nbr table.tbr2 th { font-size: small; }

table.tbr2 th p,
table.nbr table.tbr2 th p {
       color: #fff;
       }

table.tbr2 td,
table.nbr table.tbr2 td {
       padding: 6px 10px;
       border-right: 1px solid #ccc;
       border-bottom: 1px solid #ccc;
       color: #333;
       font-size: x-small;
       line-height: 1.5;
       background: #fffdec;
       }
html>body table.tbr2 td,
table.nbr table.tbr2 td { font-size: small; }


th.nbr {
       font-size: x-small;
       line-height: 1.5;
       color: #333;
       }
html>body th.nbr { font-size: small; }

td.nbr {
       font-size: x-small;
       line-height: 1.5;
       color: #333;
       }
html>body td.nbr { font-size: small; }

th.tbr {
       padding: 10px;
       border-right: 1px solid #ccc;
       border-bottom: 1px solid #ccc;
       background: #e4f6fc;
       font-size: x-small;
       line-height: 1.5;
       color: #2599bf;
       }
html>body th.tbr { font-size: small; }

td.tbr {
       padding: 10px;
       border-right: 1px solid #ccc;
       border-bottom: 1px solid #ccc;
       font-size: x-small;
       line-height: 1.5;
       color: #333;
       background: #fff;
       }
html>body td.tbr { font-size: small; }

blockquote {
       clear: both;
       margin: 0;
       padding: 10px;
       border: 1px solid #cfcfcf;
       background: #f3f3f3;
       font-size: x-small;
       line-height: 1.4;
       text-align: left;
       }
html>body blockquote { font-size: small; }

form {
       margin: 0;
       padding: 0;
       }

form dt{
       font-size: x-small;
       font-weight: bold;
       line-height: 1.4;
       }
html>body form dt { font-size: small; }

form dd{
       margin: 0 0 5px 0;
       font-size: x-small;
       line-height: 1.4;
       }
html>body form dd { font-size: small; }

img { border: 0; }

.photo-r {
       float:right;
       margin: 3px 0 15px 15px;
       font-size: xx-small;
       line-height: 1.3;
       color: #333;
       }
html>body div.photo-r { font-size: x-small; }

.photo-l {
       float:left;
       margin: 3px 15px 15px 0;
       font-size: xx-small;
       line-height: 1.3;
       color: #333;
       }
html>body div.photo-l { font-size: x-small; }

.photo-c {
       margin: 3px auto 15px auto;
       font-size: xx-small;
       line-height: 1.3;
       color: #333;
       }
html>body div.photo-c { font-size: x-small; }

.photo-r img, .photo-l img, .photo-c img {
       margin-bottom: 3px;
       }


/* トップページスタイル設定 ###################### */

.top_cnt_new20130115 {
       float: left;
       width: 770px;
       }

.top_cnt_l {
       float: left;
       width: 335px;
       }

.top_cnt_r {
       float: right;
       width: 335px;
       }

.top_cnt_l h3, .top_cnt_r h3 {
       margin: 0;
       padding: 0;
       }

.top_cnt_l ul, .top_cnt_r ul {
       list-style-type: none;
       margin: 10px 0 0 0;
       padding: 0;
       font-size: 93%;
       }

.top_cnt_l ul li, .top_cnt_r ul li {
       background: url(../img/arw.gif) 0 0.4em no-repeat;
       padding: 0 0 0 10px;
       line-height: 1.5;
       margin: 0 0 3px 0;
       }

.top_cnt_l ul.double li, .top_cnt_r ul.double li {
       float: left;
       width: 145px;
       margin: 0 10px 3px 0;
       display: inline;
       line-height: 1.5;
       }

.access_box {
       border:1px solid #d2d2d2;
       padding: 14px;
       }


/* 下層ページスタイル設定 ###################### */

.rec_box {
       width: 550px;
       background: url(../img/recommend_bg.gif) 0 0 repeat-y;
       }

.rec_box h5 {
       margin: 0;
       padding: 0;
       background: none;
       }

.rec_box ul {
       list-style-type: none;
       margin: 0;
       padding: 10px 10px 10px 20px;
       }

.rec_box li {
       background: url(../img/ico_check.gif) 0 0 no-repeat;
       padding: 0 0 0 20px;
       font-weight: bold;
       }

.flow01 {
       width: 630px;
       margin: 0 auto;
       border: 1px solid #b9d9e1;
       background: #ffffff;
}

.flow02 {
       background: #ddf2f4;
       margin: 1px;
       padding: 6px 10px;
       text-align: center;
}

.plink ul {
       list-style-type: none;
       margin: 0;
       padding: 0px 0px 0px 0px;
       }

.plink ul li {
       background: url(../img/plink_arrow.gif) 0 4px no-repeat;
       padding: 0 0 2px 20px;
       }

.voice {
       background: url(../img/bg_voice.gif);
       border: 1px solid #d2d2d2;
       padding: 10px 15px;
}


.lesson01 {
       margin: 0 0 0 10px;
       background: #f5f5f5;
       }

.lesson02 {
       margin: 0;
       height: 48px;
       background: url(../img/bg_tit_bg.gif) no-repeat;
       }

.lesson02 p {
       color:#fff;
       font-weight: bold;
       padding: 12px 0px 0px 20px;
       }

.lesson01 ul {
       list-style-type: none;
       margin: 0 0 0 20px;
       padding: 0px 10px 10px 0px;
       }

.lesson01 li {
       background: url(../img/ico_check.gif) 0 2px no-repeat;
       margin: 0 0 4px 0;
       padding: 0 0 0 22px;
       font-weight: bold;
       }

.business01 {
       background: url(../img/bg_business.gif);
       border: 1px solid #d2d2d2;
       padding: 10px 15px;
}

.business02 {
       margin: 8px 0 0 0;
       background: #eaf5f6;
       padding: 10px 15px;
}

.dxbg {
       background: url(../img/bg_dxbg.gif);
       padding: 25px;
}

.gline {
       border: 2px solid #d2d2d2;
       background: #fffdec;
       padding: 10px 15px;
}

.gline2 {
       border: 2px solid #1767a5;
       background: #f4faff;
       padding: 10px 15px;
}

.note {
       background: url(../img/bg_business.gif);
       border: 1px solid #d2d2d2;
       padding: 10px 15px;
}

.note02 {
       margin: 8px 0 0 0;
       background: #eaf5f6;
       padding: 10px 15px;
}

.note03 {
       margin: 8px 0 0 0;
       background: #eaf6ed;
       padding: 10px 15px;
}

.online01 {
       border: 1px solid #d2d2d2;
}

.online02 {
       padding: 6px 0 6px 0;
       background:#2699bf url(../img/bg_online.gif) repeat-x;
}

.online02 a {
       background: url(../img/arrow_online.gif) 6px 4px no-repeat;
       padding: 0 0 0 22px;
       }

.online02 a:link { color: #fff; text-decoration:none; }
.online02 a:visited { color: #fff; text-decoration:none; }
.online02 a:hover { color: #fff; text-decoration:none; }
.online02 a:active { color: #fff; text-decoration:none; }

.online_t {
       margin: 10px;
}


/* online教材トップページスタイル設定 ###################### */

.online_chart {
       border:1px solid #ccc;
       margin: 0 20px 10px;
       background: url(../../img/online_bg.gif) 0 0;
       padding: 0;
       height: 595px;
       position: relative;
       }
p.olttl { position: absolute; top: 20px; left: 20px; }
p.ol01 { position: absolute; top: 74px; left: 29px; }
p.ol02 { position: absolute; top: 144px; left: 61px; }
p.ol03 { position: absolute; top: 214px; left: 91px; }
p.ol04 { position: absolute; top: 144px; left: 379px; }
p.ol05 { position: absolute; top: 214px; left: 409px; }
p.ol06 { position: absolute; top: 294px; left: 29px; }
p.ol07 { position: absolute; top: 364px; left: 61px; }
p.ol08 { position: absolute; top: 444px; left: 29px; }
p.ol09 { position: absolute; top: 514px; left: 91px; }
p.ol10 { position: absolute; top: 514px; left: 349px; }

ul.nbl {
       list-style-type: none;
       margin: 0;
       padding: 0;
       }


.top05 { margin-top: 5px; }
.top10 { margin-top: 10px; }
.top15 { margin-top: 15px; }
.top20 { margin-top: 20px; }
.top30 { margin-top: 30px; }
.top50 { margin-top: 50px; }

.btm01 { margin-bottom: 1px; }
.btm05 { margin-bottom: 5px; }
.btm10 { margin-bottom: 10px; }
.btm12 { margin-bottom: 12px; }
.btm15 { margin-bottom: 15px; }
.btm20 { margin-bottom: 20px; }
.btm30 { margin-bottom: 30px; }
.btm50 { margin-bottom: 50px; }