* {
-moz-box-sizing: border-box;
    box-sizing: border-box;
margin:0;
    padding:0;
font-size: 18px;
  font-family: HiraKakuProN-W3;
}

/*layout*/
html {
  min-height: 100%;
  height: 100%;
  width: 100%;
}
body {
  background-color:#dcdcdc;
	margin: 0px;
	padding: 0px;
	min-height: 100%;
	height: 100%;
}

#frame {
  width:100%;
  height: 100%;  
  position:relative;


}
#content {
    margin: 0 auto;
    padding-top:3em;
    min-height: 100%;
  height: 100%;
  width: 1024px;
  background:#ffffff;
  overflow:auto;  

}


header {
  margin: 0 auto;
  width:100%;
  border-bottom:solid 1px #a7a7a7;
  background:#308EC2;
  text-align: left;
   box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.4);
   position:fixed;
     z-index: 10;
}
header div#headerMenu {
  display:inline-block;
  margin:4px 8px;
  width: 100%;
  text-align: left;
  line-height: 3em;
}

#sidebar {
  float:left;
  min-height: 100%;
  width:240px;
  height: 100%;
  border-right:1px solid #a7a7a7;
}
#sidebar ul li {
  border-bottom:solid 1px #a7a7a7;
}

.menu:after {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -14px;
    content: '>';
    font-weight: bold;
    font-size: 14px;
    -webkit-transition: all, 0.25s, linear;
    -moz-transition: all, 0.25s, linear;
    -o-transition: all, 0.25s, linear;
    transition: all, 0.25s, linear;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
 
.menu.active:after {
    -webkit-transform: translate(0, 50%);
    -webkit-transform: rotate(-90deg);
    -moz-transform: translate(0, 50%);
    -moz-transform: rotate(-90deg);
    -ms-transform: translate(0, 50%);
    -ms-transform: rotate(-90deg);
    transform: translate(0, 50%);
    transform: rotate(-90deg);
}



#sidebar ul li a span {
  display:inline-block;
  width: 100%;
  height: 100%;
}
#main {
  float:left;
  clear:both;
  padding:8px;
  position:relative;
  min-height: 100%;
  height: 100%;
  width: 240px;
/*   position:fixed; */
}

#main_contents {
/*   width: 75%; */
  min-height: 100%;
  height: 100%;
  float:right;
  margin: 8px 0;
  padding:0;
}
/* @media screen and (max-width: 800px) {
  #main {
    clear:both;
    width: 100%;
    min-height:160px;
    height:160px;
    }
    #main ul {
      display:inline-block;
      line-height: 80px;
      clear:both;
      margin:0 auto;
    }
    #main ul li {
      display:block;
      float:left;
    }
    #main_contents {
      width: 98%;
      padding:0;
      margin:8px auto;
      text-align: center;
      position:relative;
    }
  
  } */
.centering {
  margin:0 auto;
  text-align: center;
}
footer {
  width: 100%;
  height:3em; 
  line-height: 3em; 
}


/* Buttons */
.btn {
  display:inline-block;
    margin:24px 8px;
    padding:16px 4px;
    width: 240px; 
    height: 60px;
    border: 1px solid #979797;
/*     box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20), inset 0px 2px 0px 0px #FFFFFF; */
    color:#ffffff;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px -1px 1px rgba(0,0,0,0.50);
    font-weight: 600;
    font-size: 18px;
    line-height: 36px;
/*     transition: box-shadow 0.4s ease-out; */
}

.btn:hover {
  box-shadow:inset 0px -1px 0px 0px rgba(255,255,255,0.80);
transition: box-shadow 0.4s ease-out;
}
.btn span {
padding:4px 24px;
color: #FFFFFF;
text-shadow: 0px -1px 1px rgba(0,0,0,0.50);
white-space: nowrap;
}
/*横幅少なめのボタン用*/
.tight, .tight span {
  padding:4px;
}


.green {
/*     background: linear-gradient(-180deg, #C3DF92 0%, #84C968 100%); */
background:#84C968;
}
.green:hover {
/*   background: linear-gradient(0deg, #C3DF92 0%, #84C968 100%); */
background:#84C968;
}
.blue {
/* background: linear-gradient(-180deg, #C7E8F0 0%, #348FB4 100%); */
background:#348FB4;
}
.blue:hover {
/*   background: linear-gradient(0deg, #C7E8F0 0%, #348FB4 100%);  */
  background:#C7E8F0;
}
.orange {
/*   background: linear-gradient(-180deg, #FFB047 0%, #E6911A 100%); */
background:#E6911A;
}
.orange:hover {
/*   background: linear-gradient(0deg, #FFB047 0%, #E6911A 100%); */
background:#FFB047;
}
.glay {
  background: linear-gradient(-180deg, #EBF3FA 0%, #A1ABAC 100%);
}
.glay:hover {
  background: linear-gradient(0deg, #EBF3FA 0%, #A1ABAC 100%);
}
.red {
  background: linear-gradient(-180deg, #FAB5B5 0%, #B05D5D 100%);
}
.red:hover {
  background: linear-gradient(0deg, #FAB5B5 0%, #B05D5D 100%);
}

.img_l {
  margin:8px auto;
}
img.top {
  border:solid 4px #ffffff;
  box-shadow:1px 1px 1px rgba(0,0,0,0.6);
  -webkit-filter: sepia(60%) saturate(80%) opacity(0.5);
  width: 70%;
}
/*text*/
h1 {
display:inline-block;
margin:0 8px;
line-height: 3em;
color:#ffffff;
}
h2 {
  display:inline-block;
  margin: 8px auto;
  padding:8px;
  width: 95%;
  border-radius: 5px;
  background:#ffffff;
  color:#308EC2;
  border:solid 2px #308EC2;
}
h3 {
  color:#2c374a;
}
a:link,
a:hover,
a:visited,
a:active {
  color:#4A90E2;
  transition:color 0.2s ease-out;
}
a:hover {
  color:#81b8f8;
  transition:color 0.2s ease-out;
}

.more {
  margin:8px auto;
  display:inline-block;
  padding:4px;
  width: 100%;
  text-align: right;
}
/*list*/
ul {
  margin:0 8px;
  list-style: none;
}
ul li {white-space: nowrap;}
ul.colum2 li span {
  display:inline-block;
  width: 50%;
}

/*div*/
div.list {
    padding:0;
  width: 100%;
    border:solid 1px #dcdcdc;
}

/*ancher*/
header div#headerMenu a span {
  margin: 0 8px;
}
footer div a span {
  color:#ffffff;
}