@charset "utf-8";

/* body
---------------------------------------------------------------------------- */

html {
    }

body {
    font-size: 13px;
    font-family:"Hiragino Mincho Pro"," ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", serif;
    color: #333333;
    letter-spacing:1px;
    line-height:1.5em;
    }

/* link
---------------------------------------------------------------------------- */

a:link {
    color: #333;
    text-decoration: none;
    }

a:visited {
    color: #333;
    text-decoration: none;
    }

a:hover {
    color: #333;
    text-decoration: underline;
    }

.hv a:hover {
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -webkit-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    }

.fade {
    -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
            }

.fade:hover {
    filter: alpha(opacity=70);
    -moz-opacity: .7;
    -webkit-opacity: .7;
    -khtml-opacity: .7;
    opacity: .7;
    }


/* general class
---------------------------------------------------------------------------- */

.w960 {
    width:960px;
    margin:0 auto;
    }

.w900 {
    width:900px;
    margin:0 auto;
    }

.fl { float:left !important}
.fr { float:right !important}

.mt5 { margin-top: 5px !important}
.mt10 { margin-top: 10px !important}
.mt15 { margin-top: 15px !important}
.mt20 { margin-top: 20px !important}
.mt30 { margin-top: 30px !important}
.mt40 { margin-top: 40px !important}
.mt50 { margin-top: 50px !important}

.mr0 { margin-right: 0 !important}

.mb10 { margin-bottom: 10px !important}
.mb40 { margin-bottom: 40px !important}

.ml0 { margin-left: 0 !important}
.ml5 { margin-left: 5px !important}
.ml10 { margin-left: 10px !important}
.ml15{ margin-left: 15px !important}
.ml23{ margin-left: 18px !important}

.pt0 { padding-top: 0 !important}
.pt5 { padding-top: 5px !important}
.pt10 { padding-top: 10px !important}
.pt15 { padding-top: 15px !important}
.pt20 { padding-top: 20px !important}
.pt25 { padding-top: 25px !important}
.pt30 { padding-top: 30px !important}
.pt40 { padding-top: 40px !important}

.pr10 { padding-right: 10px !important}

.pb5 { padding-bottom: 5px !important}
.pb10 { padding-bottom: 10px !important}
.pb20 { padding-bottom: 20px !important}
.pb30 { padding-bottom: 30px !important}
.pb40 { padding-bottom: 40px !important}

.pl10 { padding-left: 10px !important}
.pl15 { padding-left: 15px !important}
.pl20 { padding-left: 20px !important}
.pl30 { padding-left: 30px !important}

.fwn { font-weight: normal !important}
.fwb { font-weight: bold !important}

.c666 { color: #666 !important}
.cccc { color: #CCC !important}
.cred { color: #E50012 !important}

.fs11 { font-size: 11px !important; }
.fs12 { font-size: 12px !important; }
.fs13 { font-size: 13px !important; }
.fs14 { font-size: 14px !important; }
.fs16 { font-size: 16px !important; }
.fs20 { font-size: 20px !important; }

.mc { margin-left: auto !important; margin-right: auto !important}
.tac { text-align: center !important;}
.tal { text-align: left !important;}
.tar { text-align: right !important;}

.cf:after {    content: '.'; height: 0; line-height: 0; visibility: hidden; display: block; clear: both}
.cf { display: block }
.clear { clear: both; margin: 0; padding: 0; height: 0; width: 0 }

.reletive{ position:relative; }


/* wrap
---------------------------------------------------------------------------- */

#wrap{
    margin:0;
    padding:0;
    }

.bg_gray01{
    background:url(../img/common/bg_gray.png) repeat;
    }


/* header
---------------------------------------------------------------------------- */

header{
    background:#000;
    padding:10px 0;
    }

#header_area{
    width:960px;
    margin:0 auto;
    }

#header_area img{
    width:210px;
    height:60px;
    }

#header_area .logo{
    float:left;
    width:210px;
    height:60px;
    }

#header_area nav{
    float:left;
    }

#header_area nav li img,
#header_area nav li{
    width:125px;
    height:60px;
    }

#header_area nav li{
    float:left;
    }
#header_area nav li:last-child a:hover{
    opacity:0.7;
}

h1{
    width:960px;
    margin:10px auto 0 auto;
    font-size:10px;
    text-align:right;
    }

/* container
---------------------------------------------------------------------------- */

.service_area{
    width:960px;
    margin:0 auto;
    }

.service_area li img,
.service_area li{
    width:180px;
    height:100px;
    }

.service_area li{
    float:left;
    margin:0 0 0 15px;
    }

.service_area li.first{
    margin:0;
    }


/* footer
---------------------------------------------------------------------------- */

#f_area01{
    width:960px;
    margin:0 auto;
    }

#f_area01 li{
    float:left;
    }

#f_area01 li.f01 img,
#f_area01 li.f01{
    width:91px;
    height:22px;
    }

#f_area01 li.f01{
    margin:30px 0 0 0;
    }

#f_area01 li.f02 img,
#f_area01 li.f02{
    width:167px;
    height:34px;
    }

#f_area01 li.f02{
    padding:25px 0;
    margin:0 0 0 15px;
    }

#f_area01 li.f03 img,
#f_area01 li.f03{
    width:40px;
    height:22px;
    }

#f_area01 li.f03{
    margin:34px 0 0 40px;
    }

#f_area01 li.f04{
    font-size:18px;
    margin:36px 0 0 15px;
    }

#f_area01 li.f05{
    font-size:12px;
    margin:26px 0 0 15px;
    }

#f_area01 li.f06{
    font-size:12px;
    margin:36px 0 0 15px;
    }

#f_area02{
    background:#000;
    padding:30px 0;
    }

.f_t_img img,
.f_t_img{
    width:140px;
    height:140px;
    }

.f_t_img{
    float:left;
    }

.f_nav{
    float:left;
    }

.f_nav li{
    font-size:12px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin:0 0 0 15px;
    line-height:2em;
    }

.f_nav li a{
    color:#CCC;
    }
.f_nav.right{
    position:relative;
    top:-12px;
}
#copy{
    font-size:12px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align:center;
    padding:10px 0;
    color:#888;
    }

#kagura{
    font-size:10px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align:center;
    padding:8px 0;
    color:#888;
    }

#kagura a{
    font-size:10px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align:center;
    color:#888;
    }

/* page-top
---------------------------------------------------------------------------- */

#page-top {
    position: fixed;
    bottom: 0;
    right: 10px;
    z-index: 800;
    }

#page-top a {
    display: block;
    background: url(../img/common/pagetop01.png) no-repeat;
    width: 106px;
    height: 65px;
    }

#page-top a:hover {
    background: url(../img/common/pagetop02.png) no-repeat;
    height: 120px;
    }