@charset "UTF-8";

/*
 * basic setting
 */
body,html{
    background: url(null) fixed;
    padding : 0;
    margin : 0;
    text-align : center;
    font-family : Osaka;
    height : 100%;
}
pre{text-align:left;}
img{border : 0;}
form{
    padding : 0;
    margin : 0;
}
a{
    color : #1F8AFF;
    text-decoration : underline;
}
a:hover{
    color : #74B9F7;
}

/* =========
 * 基本レイアト
 * =========*/
div#container{
    padding : 0;
    margin : 0;
}
div#header{
    text-align : center;
    height : 197px;
    background : gray;
    position : relative;
    background : url(../img/header/headerBack.jpg) repeat-x;
}
div#underHeader{
    color : #353535;
    width : 80%;
    text-indent: 20px;
    margin : 0 auto;
    text-align : left;
    font-size : 0.8em;
    line-height : 30px;
    height : 30px;
}

div#content{
    width : 950px;
    margin : 0 auto;
    text-align : left;
    background : url(../img/main/barBackTop.gif) 0 0 no-repeat;
    padding-top : 40px;
}
div#mainColumn{
    width : 710px;
    margin-top : -25px;
    margin-bottom : 70px ;
    float:left;
    background : url(../img/side/sideBack.png) top right repeat-y;
    min-height : 500px;
}
* html div#mainColumn{
    width : 700px;
}
div#rightColumn{
    width : 220px;
    float : right;
    margin-bottom : 70px;
}
div#footer{
    height : 193px;
    text-align : left;
    clear : both;
    background : url(../img/footer/footerBack.jpg) 0 0 repeat-x;
    text-align : center;
    color :white;
    font-size : 0.8em;
    position : relative;
}


/* ===========
 * その他
 * ===========*/

/*
 * Ajax用　Loading画像
 */
#nowLoading{
    position : fixed;
    top : 0px;
    left : 0px;
    padding : 3px;
    background-color : #FEDB70;
    margin : 0px;

}
    * html body #nowLoading{
        position: absolute;
        top: expression(eval(document.documentElement.scrollTop+0));
    }
#nowLoading img{
    padding : 0 5px;
}

/* ===========
 * 共通クラス
 * =========== */
.date,.notes{
    color : gray;
    font-size : 0.8em;
}

.clearFloat{
    clear : both;
}
.floatLeft{
    float:left;
}
.floatRight{
    float:right;
}
.bold{
    font-weight : bold;
}
.message{
    color : #FC7E53;
}
.error-message{
    color : red;
}
.fin_color{
    color : red;
    font-weight : bold;
}
.small{
    font-size : 0.75em;
}

.center{
   text-align : center;
}
.right{
    text-align : right;
}
.unapproval,.del_flg_on,.required{
    color : red;
    font-weight : bold
}
.red{ color : red;}




/* ==========
 * 
 * ===========*/

div.more{
    text-align : right;
    clear : both; 
    padding : 3px;
}
img.thumbnail{
    margin : 2px;
    padding : 1px;
    border : 3px solid #B6D5FC;
    float : left;
    max-width : 110px;
}
img.thumbnail:hover{
    border :3px solid orange;
}
div.categoryBox img.catImage{
    position : absolute;
    bottom : 10px;
    right : 20px;
}

div.contentBox img.catImage{
    position : absolute;
    bottom : 0;
    right : 10px;
}
* html div.contentBox img.catImage{
    top : -25px;
}
div.contentBox div.catImageContent{
    position : absolute;
    bottom : -5px;
    right : -10px;
}
* html div.contentBox div.catImageContent{
    top : -50px;
    right : 0;
}
li.now a{
    font-weight : bold;
}

.image_block,.image_block_blue{
    margin : 5px;
}
.image_block_blue img{
     border : 3px solid #B6D5FC;
}
.image_block_blue img:hover{
    border :3px solid orange;
}
.image_block img{
    border : 1px solid silver;
    padding :1px;
}

ul.mainList ul{
    margin : 5px 0;
    padding : 0;
}
ul.mainList li{
    background : url(../img/various/greenList.gif) no-repeat left 0.2em;
    padding-left : 20px;
    list-style : none;
    font-size : 0.9em;
}

/* =========
 * Header
 * ========== */
div#MainMenuDiv{
    width : 950px;
    height : 100%;
    position : relative;
    margin : 0 auto;
    text-align : center;
    background : url(../img/header/headerMainBack.jpg) no-repeat 0 35px;
}
#headerLogo{
    position : absolute;
    top : 50px;
    left : 10px;
    z-index : 2;
    padding : 0;
    margin : 0
}
div#headerMainMenu{
    position : absolute;
    bottom : 0;
    left : 0;
    width : 100%;
    margin : 0 auto;
}
#headerMainMenu ul{
    margin : 8px;
    padding : 0;
    text-align : center;
}
#headerMainMenu li{
    display : inline;
    line-height : 18px;
    margin : 0;
    padding : 0;
}
div#iconBox{
    position :absolute;
    bottom : 37px;
    right : 100px;
}
img#human{
    position : absolute;
    bottom : -50px;
    right : 10px;
}
div#header p#titleLine{
    color : white;
    font-size : 0.9em;
    margin:0;padding:0;
    text-align : left;
    line-height : 2.2em;
    letter-spacing: 0.05em
}



/* ==============
 * underHeader
 * ==============*/
div#breadcrumbsLine{
    background : url(../img/parts/arrow_small.png) left center no-repeat;
}



/* ==============
 * main Column
 * ==============*/
div.mainBox{
    clear : both;
    padding  : 0 10px;
    margin-right : 10px;
    letter-spacing : 2px;
    line-height : 1.2em;
}
div.mainBox p{
    text-indent : 1em;
    font-size : 0.9em;
    letter-spacing : 0.05em;
    line-height : 1.6em;
    margin : 0 10px;
}
h1#topMainTitle{
    background: url(/img/main/top_title.gif) 0 0 no-repeat;
    text-indent: -100000px;
    padding :0;
    height : 60px;
    margin : 15px 5px;
}
h1.title{
    font-size : 22px;
    text-indent : 10px;
    line-height : 45px;
    background: url(/img/parts/h1_underline.gif) left bottom repeat-x;
}
div.mainBox h2{
    font-size : 18px;
    line-height : 30px;
    text-indent : 10px;
}
div.leftServiceContent{
    margin-right : 15px;
    clear: both;
}
div.rightServiceContent{
    margin-left : 15px;
}
div.leftServiceContent,div.rightServiceContent{
    width : 321px;
    float : left;
    text-align: center;
    margin-bottom : 20px;
}
div.leftServiceContent h2,div.rightServiceContent h2{
    margin:0;padding:0;
    text-indent: -100000px;
    height : 70px;
}
div#service1 h2{background: url(/img/main/service1.png) 0 0 no-repeat;}
div#service2 h2{background: url(/img/main/service2.png) 0 0 no-repeat;}
div#service3 h2{background: url(/img/main/service3.png) 0 0 no-repeat;}
div#service4 h2{background: url(/img/main/service4.png) 0 0 no-repeat;}
div#service5 h2{background: url(/img/main/service5.png) 0 0 no-repeat;}
div#service6 h2{background: url(/img/main/service6.png) 0 0 no-repeat;}

div.serviceText{
    border : solid 1px white;
    padding: 0;
    margin: 10px auto;
}
div#service1 div.serviceText{border-color : #1F8AFF;background : #F0F6FC}
div#service2 div.serviceText{border-color : #090;background : #E6FCE6}
div#service3 div.serviceText{border-color : #DA0000;background : #FCE6E6}
div#service4 div.serviceText{border-color : #F99506;background : #F9F0E4}
div#service5 div.serviceText{border-color : #69CB00;background : #F3FCE8}
div#service6 div.serviceText{border-color : #90c;background : #F9EBFF}


div.serviceText p{
    font-size : 0.85em;
    line-height : 1.3em;
    letter-spacing : 0.05em;
    margin: 10px 5px;
    text-align: left;
    text-indent : 0;
}


a.serviceMore{
    text-indent : -100000px;
    height : 23px;
    display : block;
    width : 172px;
    margin : 0 auto;
}
div#service1 a.serviceMore{background: url(/img/main/service1_more.gif) 0 0 no-repeat;}
div#service2 a.serviceMore{background: url(/img/main/service2_more.gif) 0 0 no-repeat;}
div#service3 a.serviceMore{background: url(/img/main/service3_more.gif) 0 0 no-repeat;}
div#service4 a.serviceMore{background: url(/img/main/service4_more.gif) 0 0 no-repeat;}
div#service5 a.serviceMore{background: url(/img/main/service5_more.gif) 0 0 no-repeat;}
div#service6 a.serviceMore{background: url(/img/main/service6_more.gif) 0 0 no-repeat;}
div#service1 a.serviceMore:hover,div#service2 a.serviceMore:hover,
div#service3 a.serviceMore:hover,div#service4 a.serviceMore:hover,
div#service5 a.serviceMore:hover,div#service6 a.serviceMore:hover{background-position: 0 -22px;}


div#toContact{
    height : 170px;
    text-align: center;
    background : url(/img/main/contact_bar.gif) top center no-repeat;
}
div#toContact div{
        padding-top : 100px;
}
div#toContact a{
    display:  block;
    margin : 0 auto;
    height : 62px;
    width : 642px;
    background : url(/img/main/to_contact.gif) 0 0 no-repeat;
    text-indent : -10000px;
}
div#toContact a:hover{background-position: 0 -61px}
div#toContact p{margin:0;padding:0;}

/* ==============
 * right Column
 * ==============*/
div#rightColumn h2{
    padding : 0;
    margin : 20px auto 10px auto;
    width : 200px;

}
div#free_diagnosis{
    font-size : 0.9em;
    text-align : center;
    margin-bottom : 10px;
}
div#free_diagnosis p{
    margin:0;padding:0;
}
.rightBox{
    background : url(../img/side/boxTopBack.gif) no-repeat top center;
    margin-bottom : 15px;
    padding : 0;
    width : 200px;
    padding : 5px 0;
    margin : 0 auto;
}
.boxContent{
    padding : 5px;
    background : url(../img/side/boxBottomBack.gif) no-repeat bottom center;
    border-right : solid 1px silver;
    border-left : solid 1px silver;
    min-height :100px;
    font-size : 0.83em;
    letter-spacing : 0.1em;
    line-height : 1.1em;
    text-align : center;
}
.boxContent p{
    text-align: left;
}


div#rightColumn ul{
    margin : 5px 0;
    padding : 0;
}
div#rightColumn ul li{
    background : url(../img/various/article_text_12.png) no-repeat 0 0.2em;
    padding-left : 20px;
    list-style : none;
    font-size : 0.9em;
}

#beginner_content{
    text-align : center;
    border-bottom : dotted 1px silver;
    padding-bottom : 8px;
}

a.more_read{
    display : block;
    width  : 171px;
    height : 22px;
    background :url(../img/side/show_more1.gif) 0 0 no-repeat;
    text-indent : -200000px;
    margin : 5px auto;
}
a.more_read:hover{
    background :url(../img/side/show_more2.gif) 0 0 no-repeat;
}

div#twitterBox{
    border : solid 1px silver;
    width  : 200px;
    margin : 0 auto;
    height : 250px;
    overflow: auto;
}
div.twi_box{
    margin :  5px;
    border-bottom : 1px dotted silver;
    padding : 5px 0;
    font-size : 0.8em;
    line-height : 1.2em;
    letter-spacing : 0.02em;
}

div.twi_img{
    width : 45px;
    background : yellow;
    float : left;
    clear : both;
}
div.twi_img img{
    border : solid 2px silver;
}
div.twi_content{
    margin-left : 55px;
}
span.twi_name{
    font-weight : bold;
}
div.twi_content p{
    margin: 10px 0;
    padding : 0;
}


/* ================
 * link
 * ===============*/
#headerMainMenu li a{
   color : black;
   text-decoration : none;
   font-weight : bold;
   font-size : 1.1em;
   letter-spacing : 0;
   padding : 10px;
   margin : 0;
}
    *+html body #headerMainMenu li a{ padding : 9px}
#headerMainMenu li .onlist,#headerMainMenu li a:hover{
    background : url(../img/header/mainMenuBack.gif) repeat-x;

}


div.more a{
    padding-left : 20px;
    font-size : 0.9em;
    background : url(../img/various/more.gif) left center no-repeat;    
}
#footer a{
    color : black;
}

div#rightColumn #tagDiv a{
    font-weight : bold;
    font-size : 0.8em;
    margin : 5px;
    line-height : 2em;
    background : #f0fff0;
    text-decoration : none;
    color : green;
}
div#rightColumn #tagDiv a:hover{
    background : #ffffdf;
}
td.topic a{
   font-weight : bold;
   color : green;
   padding-left : 15px;
   background : url(../img/various/article_12.png) left center no-repeat;
}


/* ========
 * footer
 * ========*/
#footerMenu{
    padding : 0;
    margin : 0;
    background: url(../img/footer/footerMenuBack.jpg) top center no-repeat;
    height : 86px;
}
#footerMenu ul{
    padding : 0;
    margin : 0;
    padding-top : 30px;
}
#footerMenu li{
    display : inline;
    padding : 0 5px;
    border-left : 1px solid gray;
}
/*
 * back to top
 */
a#backToTop {
    display:block;
    position : absolute;
    top : -20px;;
    right : 40px;
    color : #1F8AFF;
    text-decoration: underline;
}


/***************
* table
****************/
    table.contentTable{
       width : 95%;
       margin: 10px;
       background : #00A0C6;
       line-height : 20px;
       font-size : 0.9em;
       letter-spacing : 0.1em;
       margin-left : 20px;
   }
   table.contentTable .tdContent{
        background : white;
   }
    table.contentTable .smallTitle{
        font-weight : bold;
        background : #F5FFF5;
        width :30%;
        text-align : left;
        text-indent :5px;
    }
    table.contentTable th{
        font-weight : bold;
        background : #F5FFF5;
        width :25%;
        text-align : center;
    }
    table.contentTable th.thTitle{
        width : auto;
        font-size : 12px;
    }

    table.contentTable .tdTitle{
        background : #F5FFF5;
    }
    table.contentTable td.tdSmallContent{
        background : white;
        font-size : 12px;
    }


/*****************
* FORM
******************/
input.text,textarea.text{
    width : 95%;
}
input.text_short{
    width : 50%;
}
.textarea{
   width : 95%;
   height:150px;
}
.button_gray{
    border : 1px solid silver;
    background : #eae5e5;
    padding : 2px 10px;
    font-size : 0.9em;
}
.button_gray:hover{
    background : #FCF1BE;
}
.form_button{
    text-align : center;
}
.form_button input{
    font-size : 18px;
    font-weight : bold;
    margin : 20px 0;
}