@charset "UTF-8";


/* slideshow
--------------------------------------------------------*/

#slideshow {
    width:580px;
    height:252px;
    background:url(../img/top_slide_bg.gif) no-repeat left top;
    position: relative;
    }

#slideshow div {
    position: absolute;
    width:580px;
    height:220px;
    overflow:hidden;
    z-index:1;
    }

#slideshow .active {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
 }

#slideshow ul {
    position: absolute;
    top:240px;
    left:262px;
    z-index:2;
    }

#slideshow ul li {
    width:20px;
    float:left;
    font-size:0;
    }

#slideshow ul li a:hover,
#slideshow ul li a:focus,
#slideshow ul li a:active {
    filter: alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
    }


/* centerBox
--------------------------------------------------------*/
.centerBox {
    margin-top:30px;
    padding-bottom:40px;
    border:1px solid #dedede;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    line-height: normal;
    }

.centerBox h3.title {
    width:566px;
    height:32px;
    padding-left:12px;
    background:url(../img/top_h2_bg.gif) no-repeat left top;
    color:#fff;
    font-size:14px;
    font-weight:normal;
    line-height:32px;
    vertical-align:middle;
    }

.centerBox p.ichiran {
    color:#1097d1;
    text-align:right;
    padding:14px 18px 0 0;
    }

.centerBox a.noUnderLine {
    text-decoration: none;
}

/* INFORMATION
--------------------------------------------------------*/

.centerBox .info dl {
    width:540px;
    margin-left:19px;
    padding:18px 0 10px 0;
    border-bottom:1px #e4e4e4 solid;
    }

.centerBox .info dt {
    float:left;
    color:#fff;
    background:#c1c1c1;
    padding:2px 8px 4px 8px;
    margin-right: 10px;
    }

.centerBox .info dd {
    float:left;
    width:443px;
    color:#232323;
    background:#fff;
    padding:2px 0 4px 0px;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -o-text-overflow: ellipsis;
    white-space:nowrap;
    }

.centerBox .info dd a {
    color:#232323;
    }

.centerBox .info dd a:hover {
    color:#666;
    filter: alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
    }

/* NEW
--------------------------------------------------------*/
.centerBox div.new {
    margin-top: 8px;
    }

.centerBox .new dl {
    width:540px;
    margin-left:19px;
    padding:10px 0 10px 0;
    border-bottom:1px #e4e4e4 solid;
    }

.centerBox .new dt {
    float:left;
    width: 200px;
    }

.centerBox .new dt img {
    width: 170px;
    height: 85px;
    }

.centerBox .new dd {
    float:left;
    width:340px;
    padding:2px 0 4px 0px;
    }

.centerBox .new dd span.courseName {
    font-size: 14px;
    font-weight:bold;
    width: 340px;
    margin-bottom: 5px;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -o-text-overflow: ellipsis;
    white-space:nowrap;
    display:block;
    }

.centerBox .new dd .category,
.centerBox .new dd .participantNum,
.centerBox .new dd .price{
    margin-top:5px;
   padding-left: 5px;
   width:160px;
    color: black;
   display:inline-block;
    }

.centerBox .new dd .periodFee{
   margin-top:5px;
   padding-left: 5px;
   width:300px;
   color: black;
   display:inline-block;
}

.centerBox .new dd .nikoValueBox {
    margin-top:5px;
    padding-left: 5px;
   width:350px;
    color: black;
   display:inline-block;
    }

.centerBox .new dd img {
    margin-top: -2px;
    vertical-align: middle;
    }

.centerBox .new dd span.nikoValue {
    margin-left: 6px;
    }

.centerBox .new dd img.niko {
    margin-right: -3px;
    }

.centerBox .new dd span.provider {
    margin-top: 5px;
    padding-left: 8px;
    width: 332px;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -o-text-overflow: ellipsis;
    white-space:nowrap;
    display:block;
    }

.centerBox .new dd.outline {
    margin: 5px 0px 0px 10px;
    width: 530px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow:ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    display:block;
    clear: both;
    }

/* TOP3
--------------------------------------------------------*/
.centerBox div.ranking{
    margin: 10px 10px 0 14px;
    }

.centerBox .ranking p.title {
    color: #000;
    font-weight: bold;
    }

.centerBox .ranking div.courseInfo {
    display: inline-block;
    background-color: white;
    border: 1px solid #dedede;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    vertical-align: top;
    width: 155px;
    height: 165px;
    margin: 5px;
    padding: 20px 7px 10px 7px;
    }

.centerBox .ranking img.rank{
    width: 30px;
    height: 23px;
    position: relative;
    left: -4px;
    top: -90px;
    }

.centerBox .ranking img.thumbnail {
    width: 152px;
    height: 76px;
    display: block;
    }

.centerBox .ranking p.courseName {
    color: #000;
    margin: -13px 0px 7px 0px;
    height: 30px;
    }

.centerBox .ranking p.participantNum {
    color:#232323;
    margin: 0px 0px 7px 0px;
    }

.centerBox .ranking p.nikoValueBox {
    color:#232323;
    margin: 0px 0px 7px 0px;
    }

.centerBox .ranking p span.nikoValue {
    margin-left: 6px;
    }

.centerBox .ranking img.niko {
    margin-right: -3px;
    vertical-align: text-bottom;
    }

/* submitBtnTop
--------------------------------------------------------*/

.leftBox .submitBtn {
    clear:both;
    text-align:center;
    }

.leftBox .submitBtn input {
    width:157px;
    font-size:12px;
    padding:8px 10px;
    margin-bottom:5px;
    }

/* centerBoxInfo
--------------------------------------------------------*/

.centerBoxInfo {
    padding-bottom:10px;
    border:1px solid #dedede;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    line-height: 20px;
    }

/* TERMS OF SERVICE / PRIVACY POLICY
--------------------------------------------------------*/
.centerBoxInfo div.policy{
    white-space:pre-wrap;
    word-wrap:break-word;
    padding: 5px 14px 30px 14px;
    }

 .centerBoxInfo p.indent {
    text-indent: -15px;
    padding-left: 15px;
    }

.centerBoxInfo div.coolingoff {
    border: solid 1px red;
    padding: 3px;
    }

.centerBoxInfo div.coolingoff span,
.centerBoxInfo div.coolingoff p {
    color: red;
    }

/* ABOUT SERVICE
--------------------------------------------------------*/
.centerBoxInfo h1.about {
    color:#000;
    font-size:20px;
    }

.centerBoxInfo .abouttop h4 {
    color:#1097d1;
    font-size:16px;
    padding: 25px;
    text-align: center;
    }

.centerBoxInfo .abouttop p {
    color:#000;
    font-size:14px;
    line-height:2;
    padding: 0px 29px 0px 29px;
    }

 .centerBoxInfo .abouteach {
    padding: 25px 29px 35px 29px;
    }

.centerBoxInfo .abouteach h4{
    color:#000;
    font-size:18px;
    font-weight: normal;
    padding: 35px 0 15px 0;
    clear: both;
    }

.centerBoxInfo .abouteach img.left {
    float: left;
    }

.centerBoxInfo .abouteach img.right {
    float: right;
    }

.centerBoxInfo .abouteach p {
    width:300px;
    color:#000;
    font-size:13px;
    line-height:1.8;
    }

.centerBoxInfo .abouteach p.left {
    float: left;
    }

.centerBoxInfo .abouteach p.right {
    float: right;
    }

.centerBoxInfo .abouteach p.clearBoth {
    clear: both;
    }

 .centerBoxInfo .aboutbottom {
    clear:both;
    padding-bottom: 36px;
    }

/* HOW TO (GUIDE)
--------------------------------------------------------*/
 .centerBoxInfo .guidetop {
    color:#000;
    padding: 25px 29px 0px 29px;
    }

 .centerBoxInfo .guidetop p {
    color:#000;
    padding: 20px 14px 20px 14px;
    }

.centerBoxInfo .guidetop ul {
    padding: 20px 14px 15px 14px;
    }

.centerBoxInfo .guidetop ul li{
    padding: 0px 0px 5px 0px;
    }

.centerBoxInfo .guidetop dl.step{
    border:1px solid #dedede;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 20px 14px 20px 14px;
    }

.centerBoxInfo .notice {
    color:#000;
    padding: 10px;
    border:1px solid #dedede;
    }

.centerBoxInfo .notice ul li {
    color: red;
    margin: 0px 0px 0px 5px;
    list-style: initial;
    padding-bottom: 10px;
    }

.centerBoxInfo .guidetop .notice img {
    color:#000;
    border:1px solid #dedede;
    display: block;
    margin: auto;
    }

dt.steptitle {
    clear: left;
    float: left;
    width:100px;
    color:#000;
    font-size: 14px;
    }

dd.stepcontents {
    color:#000;
    padding-left:14px;
    }

.centerBoxInfo .guidetop img{
    margin: 0 243px 0 243px;
    }

 .centerBoxInfo .guideeach {
    color:#000;
    padding: 35px 29px 30px 29px;
    }

 .centerBoxInfo .guideeach p {
    color:#000;
    padding: 20px 14px 10px 14px;
    }

 .centerBoxInfo .guideeach dl.procedure dt{
    padding-left:14px;
    padding-top: 10px;
    padding-bottom: 5px;
    font-weight: bold;
    text-decoration: underline;
    color: #000;
    }

 .centerBoxInfo .guideeach dl.procedure dd{
    padding-left:28px;
    padding-bottom: 5px;
    color: #000;
    }

.guideleft {
    float: left;
    width: 260px;
    border-right:1px solid #dedede;
    }

.guideright {
    padding-left:274px;
    }

.centerBoxInfo .guidebottom {
    clear:both;
    }

.centerBoxInfo .stepeach {
    color:#000;
    padding: 0px 29px 51px 29px;
    }

.centerBoxInfo .stepeach dl.step dt{
    padding-left:14px;
    padding-right:14px;
    padding-top: 10px;
    padding-bottom: 5px;
    font-weight: bold;
    text-decoration: underline;
    color: #000;
    }

.centerBoxInfo .stepeach dl.step dd{
    padding-left:28px;
    padding-right:28px;
    padding-bottom: 20px;
    color: #000;
    }

.centerBoxInfo .stepeach dl.step dd a{
    margin: 5px 0px 20px 0px;
    }

.centerBoxInfo .stepeach dl.step dd div{
    padding: 5px 0px 10px 14px;
    color: #000;
    }

.centerBoxInfo .stepeach dl.step .arrow {
    text-align: center;
    }

.centerBoxInfo .stepeach img.border{
    max-width: 100%;
    border:1px solid #dedede;

    margin: 10px auto 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

.centerBoxInfo .stepeach dl.step dd p.emphasis {
    font-weight: bold;
    color: #000;
    }

.centerBoxInfo .stepeach dl.stepplus dt{
    padding-left:14px;
    padding-right:14px;
    padding-top: 25px;
    padding-bottom: 5px;
    font-weight: bold;
    color: #000;
    }

.centerBoxInfo .stepeach dl.stepplus dd{
    padding-left:28px;
    padding-right:28px;
    padding-bottom: 5px;
    color: #000;
    }

.centerBoxInfo .stepbottom {
    padding-bottom: 52px;
    }

.centerBoxInfo .lead {
    width: 350px;
    border: 1px solid #dedede;
    margin: auto;
    padding: 20px 15px;
    }

/* FAQ
--------------------------------------------------------*/
.centerBoxInfo .faqeach {
    color:#000;
    padding: 0px 29px 16px 29px;
    }
.centerBoxInfo .faqeach dl.faq dt{
    padding-left:14px;
    padding-right:14px;
    padding-top: 10px;
    padding-bottom: 5px;
    font-weight: bold;
    text-decoration: underline;
    color: #000;
    }
.centerBoxInfo .faqeach dl.faq dd{
    padding-left:28px;
    padding-right:28px;
    padding-bottom: 20px;
    color: #000;
    }
.centerBoxInfo .faqeach dl.faq dd a{
    margin: 5px 0px 20px 0px;
    }
.centerBoxInfo .faqeach dl.faq dd div{
    padding: 5px 0px 10px 14px;
    color: #000;
    }
.centerBoxInfo .faqeach dl.faq dd li{
    list-style: disc;
    margin-left: 14px;
    color: #000;
    }

/* CONTACT US
--------------------------------------------------------*/
 .centerBoxInfo .contacttop {
    color:#000;
    padding: 25px 29px 0px 29px;
    }

 .centerBoxInfo .contacttop p {
    color:#000;
    padding: 20px 14px 0px 14px;
    }

/* announceArea
--------------------------------------------------------*/
.announceArea {
    width:520px;
    padding:20px 29px 36px 29px;
    color:#777;
    font-size:12px;
    }

.announceArea div.announceDate {
    padding:20px 14px 0px 14px;
    text-align:right;
    }

.announceArea pre {
    width: 500px;
    padding:10px 14px 0px 14px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    }

/* contents
--------------------------------------------------------*/
.contents {
    margin-top:20px;
    padding:0 29px;
    }

/* formArea
--------------------------------------------------------*/
.contactInfoArea .formArea {
    margin:10px 0 0 0;
    padding:10px 14px 36px 14px;
    }

.contactInfoArea .formArea dd {
    width:285px;
    }

#formTitle .sBox,
#formName .fBox,
#formCompany .fBox,
#formMail .fBox,
#formTel .fBox
{
    width:270px;
    }

.contactInfoArea .formArea p.checkBox {
    margin:25px 0 35px 0;
    }

.contactInfoArea .formArea p.checkBox input {
    margin-right:0.7em;
    vertical-align:middle;
    }

/* contactInfoArea .data
--------------------------------------------------------*/
.contactInfoArea .data {
    margin:0;
    padding:0px 14px 40px 14px;
    }

.contactInfoArea .data dd {
    width:285px;
    }

.contactInfoArea .data pre {
    padding:0;
    word-wrap: break-word;
    }

.contactInfoArea p {
    color: #000;
    margin: 0px 14px 40px 14px;
    }

/* centerBoxIntro
--------------------------------------------------------*/
.centerBoxIntro {
    padding-bottom: 10px;
    line-height: 25px;
    }

.centerBoxIntro .introBannerBox {
    border: 1px solid #c0dffc;
    padding: 0px 4px;
    margin-top: 20px;
    }

.centerBoxIntro .introBannerBox a.service1 {
    float: left;
    margin: 10px 20px;
    }

.centerBoxIntro .introBannerBox a.service2 {
    float: left;
    margin: 10px 20px;
    }

.centerBoxIntro .introBannerBox a.service3 {
    float: left;
    margin: 10px 0px 10px 20px;
    }

.centerBoxIntro .introBannerBox a:hover {
    -moz-opacity:1;
    opacity:1;
}

.centerBoxIntro .introBottom {
    clear:both;
    }

/* centerBoxCampaign
--------------------------------------------------------*/
.centerBoxCampaign {
    margin-top: 20px;
    /*border: 1px solid #dedede;*/
    }

/* sale(discount) image
--------------------------------------------------------*/
.sale-img {
   width : 32px;
   height : 15px;
    }