@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*
 * "FontName" licensed under the IPA Font License Agreement v1.0
 * http://ipafont.ipa.go.jp/（IPAフォントのURL）
 * http://ipafont.ipa.go.jp/ipa_font_license_v1.html（IPAフォントライセンスv1.0のURL）
 */

/*
    BASE
*******************************/

@font-face {
    font-family: "honoka";
    src: url('../fonts/font_honoka.eot') ,
url('../fonts/font_honoka.woff');
}

@font-face {
    font-family: "hare";
    src: url('../../fonts/hare.eot') ,
url('../fonts/hare.woff');
}

@font-face {
    font-family: "ipam";
    src: url('../fonts/ipam.eot') ,
url('../fonts/ipam.woff');
}


* {
    /*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,'Hiragino Kaku Gothic Pro',Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;*/
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,'Hiragino Kaku Gothic Pro',Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    margin: 0;
    padding: 0;
}

body > #container {
    height: auto;
}
body * {line-height:1.22em;}

img {
    vertical-align:bottom;
    line-height:0;
}


p,th,td,dt,dd,li,h1,h2,h3,h4,h5,h6 { color:#333;}

a,
a:link,
a:visited {
    color:#008ed7;
    text-decoration:none;
    line-height:inherit;
}
a:hover {
    color:#22559a;
    text-decoration:none;
}

a img {
    outline:none;
    border:none;
}
#container div area {
    border:none;
    outline:none;
}

.clear { clear:both;}


/*//////////////////////////////////////////////////////////////////////////*/



/*
    BASE LAYOUT
******************/

#container {
    width:100%;
    margin:0;
    padding:80px 0 0 0;
}
#main {
    width:850px;
    margin:0 auto;
    padding:60px 0;
}
#main p {
    font-size:14px;
    line-height:180%;
    margin:0;
    padding:0;
}


/* co-content */
.sp {
    display: none;
}
.pc {
    display: inline-block;
}

/*//////////////////////////////////////////////////////////////////////////*/

/*
    Header LAYOUT
******************/
#head {
    width:100%;
    height:80px;
    margin:0;
    padding:0;
    background:url(../img/common/head_bg.png) repeat;
    position:fixed;
    top:0;
    left:0;
    z-index:90;
}
#header {
    width:850px;
    margin:0 auto;
    padding:40px 0 0 0;
    position:relative;
}
#header #logo {
    margin:0;
    padding:0;
}
#header ul {
    height:22px;
    margin:0;
    padding:0;
    letter-spacing:-1em;
    position:absolute;
    top:45px;
    right:0;
}
#header li {
    height:22px;
    line-height:22px;
    margin:0 0 0 7px;
    padding:0;
    overflow:hidden;
    border:1px solid #FFF;
    letter-spacing:normal;
    display:inline-block;
    width:auto;
    box-sizing:border-box;
}
#header li a,
#header li a:link,
#header li a:visited {
    display:block;
    height:20px;
    text-align:center;
    font-size:12px;
    line-height:19px;
    color:#FFF;
    position:relative;
    margin:0;
    padding:0 15px;
    box-sizing:border-box;
}
#header li a:hover {
    background:#FFF;
    color:#000;
}
#header li a span {
    display:block;
    height:22px;
    position:absolute;
    font-size:10px;
    line-height:22px;
    top:22px;
    left:0;
    background:#FFF;
    color:#000;
    width:100%;
    text-align:center;
}
#header li a:hover span,
#header li.on a span {
    top:0;
}
#header li a span.ls {
    letter-spacing:-0.2em;
}

/*//////////////////////////////////////////////////////////////////////////*/

/*
    Contents LAYOUT
******************/
#navi {
}
#navi i {
}

h1 {
    width: 100%;
    display: block;
    margin: 0 0 45px;
    padding: 0;
    overflow: hidden;
}
h1 img {
    margin:0;
    padding:0;
}
h1 span {
    display:block;
    margin:0;
    padding:0 0 3px 5px;
    color:#FFF;
    font-size:14px;
    font-weight:normal;
    line-height:1;
    letter-spacing:0.1em;
}


h2 {
}


.contents {
    width:100%;
    margin:0;
    padding:0;
    position:relative;
}
#main .contents p {
    margin:0 0 15px;
    padding:0;
}
.contents h3 {
}
    
    

/*
    Footer LAYOUT
******************/

#foot {
    width:100%;
    height:120px;
    background:url(../img/common/head_bg.png) repeat;
    margin:0;
    padding:0;
}

#footer {
    width:1000px;
    height:50px;
    margin:0 auto;
    padding:60px 0 0 0;
    position:relative;
}
#foot a.ecope {
    position:absolute;
    top:-10px;
    right:30px;
}
#footer ul {
    text-align:center;
    margin:0 0 20px;
    padding:0;
    letter-spacing:-1em;
}
#footer li {
    letter-spacing:normal;
    display:inline-block;
    margin:0 10px;
}
#footer li a,
#footer li a:link,
#footer li a:visited {
    color:#FFF;
}
#footer li a:hover {
    color:#CCC;
}
#footer li a:before {
  content: "\f0a9";
  margin-right:3px;
  display: inline-block;
  font: normal normal normal 11px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size:11px;
}
#copyright {
    margin:0;
    padding:0;
    text-align:right;
    color:#FFF;
    font-size:10px;
    font-family:Arial, Helvetica, sans-serif;
}
#topcontrol {
    width:36px !important;
    height:36px !important;
    line-height:36px;
    text-align:center;
    color:#FFF;
    background:#222252;
    right:15px !important;
    bottom:15px !important;
     border-radius: 18px; 
    -webkit-border-radius: 18px; 
    -moz-border-radius: 18px;
}
.sb-toggle-left {
    display:none;
}
br.nbr2 {
    direction:none;
}

/*/////////////////////////////////////////////////////////max-width:1024px*/
@media screen and (max-width:1024px){

    #container {
        min-width:1000px;
    }
    #movbg {
        display:none;
    }
}

/*/////////////////////////////////////////////////////////max-width:736px*/
@media screen and (max-width:736px){


/* co-content */
    .sp {
        display: inline-block;
    }
    .pc {
        display: none;
    }

    .sb-site {
        background: #22223c;
    }

.sb-toggle-left {
    display:block;
    text-align:center;
    height:40px;
    width:40px;
    background:#FFF;
    color:#22223c;
    line-height:40px;
     border-radius: 2px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px;
    position:absolute;
    top:10px;
    left:1%;
}
.sb-slidebar {
    padding-top:70px;
}
.sb-slidebar ul {
    padding:0 0 0 15px;
}
.sb-slidebar li {
    margin:0 0 10px;
    line-height:1;
}
.sb-slidebar li a {
    color:#FFF;
}
.sb-slidebar li a:before {
    content: "\f0a9";
    margin-right:3px;
    display: inline-block;
    font: normal normal normal 11px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size:11px;
}
.br.nbr2 {
    direction:inline;
}

/*
    BASE LAYOUT
******************/

#container {
    min-width:inherit;
    padding:60px 0 0 0;
}
#main {
    width:95%;
    margin:0 auto;
    padding:30px 0;
}
#main p {
    font-size:13px;
    line-height:1.5;
}


/*//////////////////////////////////////////////////////////////////////////*/

/*
    Header LAYOUT
******************/
#head {
    height:60px;
}
#header {
    width:100%;
    padding:15px 0 0 0;
}
#header #logo {
    text-align:center;
}
#header ul {
    display:none;
}

/*//////////////////////////////////////////////////////////////////////////*/

/*
    Contents LAYOUT
******************/
#navi {
}
#navi i {
}

h1 {
    margin:0 0 45px;
    padding:0;
}
h1 img {
    width: 150%;
    height: auto;
    margin:0;
    padding:0;
}
h1 span {
    display:block;
    margin:0;
    padding:0 0 3px 5px;
    color:#FFF;
    font-size:14px;
    font-weight:normal;
    line-height:1;
    letter-spacing:0.1em;
}

h2 {
}

.contents {
    width:100%;
    margin:0;
    padding:0;
    position:relative;
}
#main .contents p {
    margin:0 0 15px;
    padding:0;
}
.contents h3 {
}


/*
    Footer LAYOUT
******************/

#foot {
    position: relative;
    height:60px;
}

    .wrapEcope {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        text-align: center;
        z-index: 999;
        padding: 10px 0;
    }
    .wrapEcope:after {
        width: 100%;
        height: 100%;
        display: block;
        content:'';
        position: absolute;
        top: 0;
        left: 0;
        background-color: #000;
        opacity: .75;
        z-index: 1;
    }
    .wrapEcope a {
        position: relative;
        z-index: 5;
    }

#footer {
    width:100%;
    height:auto;
    padding:5px 0 0 0;
    text-align:center;
}
#foot a.ecope {
    display: inline-block;
    position :relative;
    top:auto;
    right:auto;
    text-align:center;
}
#foot a.ecope img {
    width:auto;
    height:35px;
    margin-bottom:5px;
    margin:5px auto 0;
}
#footer ul {
    display:none;
}
#copyright {
    text-align:center;
}
#topcontrol {
    width:36px !important;
    height:36px !important;
    line-height:36px;
    text-align:center;
    color:#FFF;
    background:#222252;
    right:15px !important;
    bottom:15px !important;
     border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    z-index: 999;
}

}