@charset "utf-8";
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,xmp{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
input,select,textarea,button{outline:none;}*{box-sizing: border-box;}body{color:#000;-webkit-text-size-adjust:100%;}img{max-width:100%;}

html ,body {
  background-color:#dcdcdc;
  font-family:"lucida grande", tahoma, verdana, arial, "Hiragino Kaku Gothic Pro","Osaka",Meiryo,"メイリオ","ＭＳ ゴシック",sans-serif;
}

@media (orientation:landscape) {
  html.ipad.ios7 > body {
    background-color:#dcdcdc;
    font-family:"lucida grande", tahoma, verdana, arial, "Hiragino Kaku Gothic Pro","Osaka",Meiryo,"メイリオ","ＭＳ ゴシック",sans-serif;
  }
}

@media print {
  body {
    display:none;
  }
}

a {
  color:#0645ad;
  text-decoration:none;
}
a:hover {
  text-decoration:none;
}
a:link {
  color:#0645ad;
}
#container {
  width: 100vw;
  height: 100vh;
  overflow:hidden;
  background-color:transparent;
}

/*header*/
header {
  height: 40px;
  width: 100vw;
  background-color: #cacaca;
}
#toolbarDiv {
  width:100vw;
  background-color:transparent;
  z-index: 5000;
}
#toolbarDiv > .hfdleft{
  position: absolute;
  top:0;
  left: 0;
  padding: 8px;
  width: calc(100% - 672px);
}
#toolbarDiv > .hfdleft > .hfspanleft{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  display: inline-block;
}
#button-panel{
  position: absolute;
  top:0;
  right: 0;
  width: 672px;
}
#button-panel > div{
  padding: 0 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#button-panel a{
  text-align: center;
  white-space: nowrap;
  padding: 8px 4px;
}
#button-panel a+a::before{
  content: "\FF5C";
  padding-right: 4px;
}

#hamburgerbtn {
  position:fixed;
  top:5px;
  right:15px;
  z-index:2000000;
  width:50px;
  height:50px;
  border-radius:5px;
  background:#696969;
  cursor:pointer;
}
#hamburgerbtn span {
  display:inline-block;
  position:absolute;
  left:14px;
  width:45%;
  height:3px;
  border-radius:2px;
  background:#fff;
  transition:all .4s;
}
#hamburgerbtn span:nth-of-type(1) {
  top:15px;
}
#hamburgerbtn span:nth-of-type(2) {
  top:23px;
}
#hamburgerbtn span:nth-of-type(3) {
  top:31px;
}

#hamburgerbtn.active span:nth-of-type(1) {
  top:18px;
  left:18px;
  transform:translateY(6px) rotate(-45deg);
  width:30%;
}
#hamburgerbtn.active span:nth-of-type(2) {
  opacity:0;
}
#hamburgerbtn.active span:nth-of-type(3) {
  top:30px;
  left:18px;
  transform:translateY(-6px) rotate(45deg);
  width:30%;
}

/*view*/
#content{
  overflow: hidden;
  width: 100vw;
  height: calc(100vh - 80px);
  position: relative;
}

/*slider*/
#hyouji {
    position: absolute;
    right: 60px;
    bottom: 150px; /* 95px */
}
#hyouji > span {
  color:#333;
  font-weight:bold;
  font-size:22px;
  text-shadow:1px 1px 0px #fff,-1px 1px 0px #fff,1px -1px 0px #fff,-1px -1px 0px #fff;
}
#slider {
  position:absolute;
  right:40px;
  bottom:65px;
  width:220px;
}

/*footer*/
footer {
  width:100vw;
  height:40px;
  background-color:#cacaca;
}
#footerbarDiv {
  width:100%;
  display: flex;
}
.hfdleft{
  display: flex;
  padding: 8px;
}
.hfspanleft{
  display: flex;
}
.hfdright{
  padding: 8px;
  margin-left: auto;
}

@media (max-width: 972px) {
  #toolbarDiv > .hfdleft{
    width: 100vw;
    padding-right:58px ;
  }
  #button-panel{
    width: 100vw;
    right: -100%;
    transition : .5s;
  }
  #button-panel.active{
    right: 0;
  }
  #button-panel > div{
    background: rgba(255,255,255,0.6);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100vh;
    padding: 0;
    padding-top: 74px;
    overflow-y: auto;
  }
  #button-panel a{
    width: 100%;
    padding: 20px;
    text-align: left;
    display: inline-block;
  }
  #button-panel a+a::before{
    content: "";
  }
  #button-panel div > a::before{
    content: "\0bb";
    padding-right: 8px;
  }
  /*
  .hfdleft{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 5000;
  }
  .hfspanleft{
    flex-direction: column;
  }
  #husen{
    padding-left: 8px;
    padding-bottom: 1em;
  }
  #husen::before{
    content: "\0bb";
    padding-right: 8px;
  }
*/
}

@media only screen and (min-width:972px) {
  #hamburgerbtn {
    display:none;
  }
}