/*========================================
main.css
=========================================*/

/*--------------------------------------------------------------------
format
--------------------------------------------------------------------*/
body,div,span,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,blockquote,address,
table,tr,th,td,img{
   margin:0;
   padding:0;
   font:normal normal normal 100%/1.7 'メイリオ',Meiryo,'ヒラノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシッ',sans-serif;
   border:none;
}
hr{display:none;}
/*img{display:block;}*/
li{list-style-type: none;}

a{color: #aab406;}


/*--------------------------------------------------------------------
body
--------------------------------------------------------------------*/
body{
   color: #3f3838;
   font-size: 12px;
   border-top: solid 5px #738fb6;
   background: url(../img/main.png) no-repeat center top;
}
#container{
   padding-top: 0px;
}
.container{
   width: 1000px;
   margin: auto;
}

.left{float: left;}
.right{float: right;}


/*--------------------------------------------------------------------
header
--------------------------------------------------------------------*/
#header{
   position: relative;
   left: 0;
   top: 0;
   width: 100%;
   height: 75px;
   background: url(../img/header-bg.png);
   z-index: 1000;
   margin-top: 0px;
}
#header .container{
   position: relative;
   height: 75px;
}
#header.fixed{
   position: fixed!important;
   top: 0px;
   border-bottom: solid 1px #eee;
}
#header .title,
#header .title a{
   width: 233px;
   height: 61px;
}
#header .title{
   position: absolute;
   left: 0;
   top: 7px;
   background: url(../img/logo-tki.png) no-repeat center center;
}
#header .title a{
   display: block;
   text-indent: -9999px;
   overflow: hidden;
}
#header .sub-title{
   display: none;
}
#header .navi{
   position: absolute;
   left: 350px;
   top: 30px;
}
#header .navi ul li{
   display: block;
   float: left;
   margin-right: 20px;
}
#header .navi ul li a{
   color: #3f3838;
   text-decoration: none;
}
#header .navi ul li a:hover{
   color: #738fb6;
}
#header .auther,
#header .auther a{
   width: 91px;
   height: 26px;
}
#header .auther{
   position: absolute;
   right: 0;
   top: 27px;
   background: url(../img/logo-jpp.png) no-repeat;
}
#header .auther a{
   display: block;
   text-indent: -9999px;
   overflow: hidden;
}


/*--------------------------------------------------------------------
mainvisual
--------------------------------------------------------------------*/
.mainvisual{
   height: 408px;

   margin-top: 15px;
}
.mainvisual .copy{
   display: none;
}


/*--------------------------------------------------------------------
sections
--------------------------------------------------------------------*/
.section{
   margin: 50px auto 0;
}
.normal{
   width: 921px;
   background-color: #fff;
   background-repeat: no-repeat;
   background-position: 12px 28px;
}

.normal h1.title,
.normal .sentences,
.normal .btn,
.normal .detail{
   width: 850px;
   margin: auto;
}
.normal h1.title{
   height: 75px;
   text-indent: -9999px;
   overflow: hidden;
   border-bottom: solid 1px #e8e8ea;
}
.normal h2.sub-title{
   display: none;
}

.normal .sentences{
   zoom: 1;
   overflow: hidden;
}
.normal .sentences:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   font-size: 0;
   visibility: hidden;
}
.normal .sentences .sentence{
   width: 408px;
   font-size: 11px;
   margin-top: 30px;
}

.normal .btn{
   margin-top: 30px;
}
.normal .btn span{
   display: block;
   text-align: center;
   text-decoration: none;
   padding: 10px;
   cursor: pointer;
}
.normal .more span{
   color: #4a72aa;
   background: #e4e9f0;
}

.normal .detail{
   margin-top: 30px;
}

/*about*/
#section-about{
   margin-top: -50px;
   background-image: url(../img/title-about.png);
}
#section-about .detail{
   height: 0;
   overflow: hidden;
}
#section-about .detail h3{
   font-size: 16px;
   color: #000;
   border-bottom: solid 1px #e8e8ea;
   padding-bottom: 8px;
   margin-top: 30px;
}
#section-about .detail .detail-contents{
   margin-top: 20px;
}
#section-about .detail .detail-contents ul,
#section-about .detail .detail-contents ul li{
   display: block;
}
#section-about .detail .detail-contents ul li{
   margin-bottom: 10px;
   padding-left: 12px;
   font-size: 11px;
   background: url(../img/about-detail-icon.png) no-repeat left 7px;
}
#section-about .detail table{
   width: 100%;
   border-collapse:separate;
   border-spacing:3px;
   background: #eee;
}
#section-about .detail table th,
#section-about .detail table td{
   text-align: center;
   font-size: 18px;
   padding: 10px;
   background: #fff;
}
#section-about .detail table th{
   width: 200px;
   background: #fafafa;
}


/*mode*/
#section-mode{
   background-image: url(../img/title-mode.png);
}
#section-mode .conflict-mode{
   width: 1000px;
   height: 300px;
   background: url(../img/mode-image.png) no-repeat;
   margin: 10px 0 0 -40px;
}
#section-mode .conflict-mode ul,
#section-mode .conflict-mode ul li,
#section-mode .conflict-mode ul li a{
   display: block;
}
#section-mode .conflict-mode ul{
   position: relative;
}
#section-mode .conflict-mode ul li,
#section-mode .conflict-mode ul li a{
   width: 175px;
   height: 85px;
}
#section-mode .conflict-mode ul li{
   position: absolute;
}
#section-mode .conflict-mode ul li a{
   text-indent: -9999px;
   overflow: hidden;
}
#section-mode .conflict-mode ul li a:hover{
   background: #fff;
   opacity:0.2;
   filter: alpha(opacity=20);
}
#section-mode .conflict-mode .mode1{left:  61px;top: 115px;}
#section-mode .conflict-mode .mode2{left: 240px;top:  97px;}
#section-mode .conflict-mode .mode3{left: 419px;top: 126px;}
#section-mode .conflict-mode .mode4{left: 598px;top: 116px;}
#section-mode .conflict-mode .mode5{left: 777px;top: 106px;}

#section-mode .attention{
   width: 850px;
   font-size: 11px;
   text-align: right;
   margin: auto;
}


/*mode*/
#section-point{
   background-image: url(../img/title-point.png);
}
#section-point .points{
   width: 850px;
   height: 358px;
   background: url(../img/point-image.png?v=1) no-repeat;
   margin: 20px auto 0;
}
#section-point .points *{
   display: none;
}

/*faq*/
#section-faq{
   width: 850px;
}
#section-faq h1.title{
   height: 70px;
   text-indent: -9999px;
   overflow: hidden;
   background: #f4f5f9 url(../img/title-faq.png) no-repeat 23px center;
}
#section-faq .category{
   position: relative;
}
#section-faq .category h2{
   font-size: 18px;
   color: #a0a8c8;
   padding: 8px 20px;
   background: #e5e7ef;
   border-top: solid 1px #e5e7ef;
   border-bottom: solid 1px #e5e7ef;
}
#section-faq .category .all{
   position: absolute;
   right: 10px;
   top: 13px;
   width: 80px;
   line-height: 1;
   text-align: center;
   padding: 6px;
   background: #d7dae6;
   cursor: pointer;
}

#section-faq .item{
   background: #f9fafc;
}
#section-faq .odd{
   background: #f4f5f9;
}
#section-faq .item .question{
   color: #4a72aa;
   font-size: 14px;
   padding: 15px 40px 15px 40px;
   cursor: pointer;
   text-indent: -19px;
}
#section-faq .item .question:hover{
   color: #738fb6;
}
#section-faq .item .answer{
   display: none;
   color: #565860;
   padding: 0 40px 25px 40px;
   border-bottom: solid 1px #f1f2f6;
}


/*--------------------------------------------------------------------
footer
--------------------------------------------------------------------*/
#footer{
   background: url(../img/foot-bg.gif);
   margin-top: 50px;
   padding-bottom: 30px;
   border-bottom: solid 5px #ccd805;
}
#footer .section,
#footer .copyright{
   width: 850px;
   margin: auto;
}
#footer .section h1.title{
   height: 875px;
   height: 85px;
   text-indent: -9999px;
   overflow: hidden;
   background-repeat: no-repeat;
   margin-left: -25px;
}

#section-application h1.title{
   background-image: url(../img/footer-title-application.png);
}
#section-application:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   font-size: 0;
   visibility: hidden;
}
#section-application .description{
   margin-top: 20px;
}
#section-application .application{
   width: 408px;
   font-size: 11px;
   margin-top: 30px;
}
#section-application .application .title{
   font-size: 18px;
   text-align: center;
}

#section-application .application .btn{
   margin-top: 7px;
   overflow: hidden;
   zoom: 1;
}
#section-application .application .btn a{
   display: block;
   font-size: 18px;
   letter-spacing: 2px;
   text-decoration: none;
   color: #fff;
   text-align: center;
   overflow: hidden;
   width: 407px;
   height: 71px;
   line-height: 71px;
   background-color: #92A8C5;
   background-image: none !important;
}
#section-application .application .btn a:hover{
   opacity:0.8;
   filter: alpha(opacity=80);
}
#section-application .application .btn a:active{

}

#section-application .member{
   float: left;
}
#section-application .member .btn a{
   background-image: url(../img/application-member.png);
}

#section-application .not-member{
   float: right;
}
#section-application .not-member .btn a{
   background-image: url(../img/application-not-member.png);
}

#section-application .fax{
   float: left;
}
#section-application .fax .btn a{
   background-image: url(../img/application-fax.png);
}

#section-application .form{
   float: right;
}
#section-application .form .btn a{
   background-image: url(../img/application-form.png);
}

#section-contact{
   margin-top: 20px!important;
}
#section-contact h1.title{
   background-image: url(../img/footer-title-contact.png);
}
#section-contact .description{
   margin-top: 20px;
}

#footer .copyright{
   text-align: center;
   margin-top: 50px;
}
#footer .copyright .auther{
   font-size: 18px;
   line-height: 1;
}

/*--------------------------------------------------------------------
footer-information
--------------------------------------------------------------------*/
#footer-information{
   position: fixed;
   bottom: -61px;
   width: 100%;
   height: 60px;
   background: #738fb6;
   overflow: hidden;
   border-top: solid 1px #5075a9;
}
#footer-information .container{
   position: relative;
   height: 60px;
   background: url(../img/footer-info-title.png) no-repeat left center;
}
#footer-information .title{display: none;}
#footer-information .btns{
   position: absolute;
   left: 300px;
   top: 7px;
   width: 409px;
   overflow: hidden;
   zoom: 1;
}
#footer-information .btns .btn,
#footer-information .btns .btn a{
   width: 202px;
   height: 48px;
}
#footer-information .btns .btn a{
   display: block;
   text-indent: -9999px;
   overflow: hidden;
   background-repeat: no-repeat;
   background-position: left top;
}
#footer-information .btns .btn a:hover{
   /*opacity:0.9;
   filter: alpha(opacity=90);*/
   margin-top: 1px;
}
#footer-information .btns .btn a:active{
   margin-top: 2px;
}
#footer-information .btns .member{
   float: left;
}
#footer-information .btns .member a{
   background-image: url(../img/footer-info-application-member.png);
}
#footer-information .btns .not-member{
   float: right;
}
#footer-information .btns .not-member a{
   background-image: url(../img/footer-info-application-not-member.png);
}
#footer-information .attention{
   position: absolute;
   right: 0;
   top: 14px;
   text-align: center;
   color: #fff;
   font-size: 10px;
}

/*tki-seminar*/
#footer-information #tki-seminar{
   width:515px;
   background-image: url(../img/foot-seminar-text.png);
}
#footer-information #tki-seminar .btns{
   left: auto;
   right: 0;
   width: 202px;
}
#footer-information .btns .detail a{
   background-image: url(../img/foot-seminar-btn.png);
}

/*--------------------------------------------------------------------
popup
--------------------------------------------------------------------*/
.popup-mode{
   display: none;
}

.popup-mode{
   width: 600px;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
           border-radius: 4px;
   overflow: hidden;
}
.popup-mode h1,
.popup-mode h2{
   text-align: center;
   line-height: 1;
}
.popup-mode h1{
   font-size: 24px;
   font-weight: bold;
   color: #f08300;
   padding-top: 50px;
}
.popup-mode h2{
   font-size: 20px;
   font-weight: bold;
   color: #acacac;
   padding-top: 8px;
   padding-bottom: 50px;
}
.popup-mode p{
   line-height: 2;
   padding: 35px;
   background: #f1f1f1;
   border-top: solid 5px #e0e0e0;
}