/* --------------------------------------------- */
/* ▼モバイルファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */

*{  box-sizing: border-box;  }
html {  font-size: 62.5%;  }
body {  width: 100%;  font-size: 1.6em;  line-height: 2;  margin: auto;  }
body {	-webkit-text-size-adjust: 100%;  }
header {  margin: 5px 0 10px 0;  }
aside {  background-color: #efefef;  width: 180px;}
footer {  font-size: 0.5em;  color: #999999;  line-height: 1.2;  margin-top: 10px;  border-top: 2px #999999 solid;  padding: 10px 0 10px 0;  text-align: center;  }

/*========== ▼header 共通 ==========*/

#subtitle {  text-align: center;  font-size: 0.7em;  color: #83847a;  padding: 10px 10px 0;  }
.logo-block {  text-align: center;  }
nav {  list-style: none;  overflow: hidden;  border-bottom: 2px #83847a solid;  }
nav ul {  width: 100%;  display: inline-block;  padding-bottom: 10px;  } 
nav li {  width: 25%;  float: left;  font-size: 0.65em;  text-align: center;  background-color: #83847a;  height: 30px;  line-height: 30px;  outline: 1px solid white;  outline-offset: -1px;  }
nav li a {  text-decoration: none;  color: #fff;  font-weight: bold;  display: block;  }
nav li:hover {  background-color:#31a1db;  }
.current {  background-color:#31a1db;  }

/*========== ▼main & aside 共通 ==========*/

article {  width: 100%;  padding: 10px;  }
article + article {  border-top: 1px #83847a dashed;  }
h1, h2 {  font-size: 1.1em;  font-weight: bold;  }
h3 {  font-size: 1em;  font-weight: bold;  }
h4 {  font-size: 0.9em;  }
p {  font-size: 0.9em;  text-align: justify;  }
h1 + p, h2 + p, p + p {  margin-top: 1em;  }
li {  margin-top: 0.5em;  }
img {  width: 100%;  }
td {  display: table-cell;  vertical-align: middle;  }
a {  text-decoration:none;  }

.em070 {  font-size: 0.7em;  }
.em080 {  font-size: 0.8em;  }
.em090 {  font-size: 0.9em;  }
.em095 {  font-size: 0.95em;  }
.em100 {  font-size: 1em;  }
.em110 {  font-size: 1.1em;  }
.sub {  font-size: 1em;  font-weight: bold;  }
.caption {  font-size: 0.8em;  color: gray;  text-align: center;  }
.gray {  color: gray;  }
.ib {  display: inline-block;  }
.bl {  display: block;  }
.pad_t1em  {  padding-top: 1em;  }
.pad_t2em  {  padding-top: 2em;  }
.pad0 {  padding: 0;  }
.pad10 {  padding: 10px;  }
.center {  text-align: center;  margin: auto;  }
.wrapper {  width: 100%;  display: table;  }
.link {  color: #333333;  }
.link:hover {  color: #31a1db;  }
.linkmark {  font-size:0.7em;  color:#0099cc;}
.hovar:hover {  color: #31a1db;  text-decoration:underline;  }
.button {  font-weight:bold;  color:#83847a;  background:white;  border-radius:10px;  border:1px #83847a solid;  padding:0 6px;  }
.button:hover {  color:white;  background:#31a1db;  border:white solid 1px;  }
.tab-box {  width: 100%;  border-bottom: 1px #83847a solid;  padding: 10px 5px 0;  vertical-align: bottom;  display: inline-block;  }
.tab {  width: auto;  height: 30px;  display: block;  float: left;  text-align: center;  background-color: #83847a;  font-family: Arial Black, Helvetica, sans-serif;
		font-size: 0.9em;  font-weight: bold;  line-height: 2em;  color: #fff;  border-radius: 10px 10px 0 0;  padding: 0 10px;  margin: 0 5px;  }
.lightgray {  background: #efefef;  }
.pagetop {  display: block;  font-size: 0.7em;  line-height: 1.7em;  text-align: right;  padding-right:20px;  }
.linkbox .idlink a:before {  content: "・";  }

/*========== ▼aside works ==========*/

aside div {  padding: 0;  }
aside p {  font-weight: bold;  color: #83847a;  }
aside li {  font-size: 0.9em;  }
aside li a, aside p a {  text-decoration: none;  color: #83847a;  display: block;  }
aside a:hover {  color: #31a1db;  }
aside .linkbox {  padding: 20px 30px 30px;  }
aside .linkbox a:before {  display: inline-block;  width: 1.2em;  }
.linkbox + .linkbox {  border-top: 5px white solid;  }
.sub-current {  color: #31a1db;  font-weight: bold;  }
.sub-current:before {  content:"▶";  }
.aside_button {  color:white;  background:#83847a;  border-radius: 7px;  padding: 0 10px;  }
.aside_button:hover {  background:#31a1db;  }

/*チェックボックス等は非表示に*/
.nav-unshown {	display:none;}

@media (max-width: 767px) {
#nav-drawer {  position:absolute;  top: 150px;  right: 10px;}
/*アイコンのスペース*/
#nav-open {  display: inline-block;  width: 30px;  height: 22px;  vertical-align: middle;}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;  height: 3px;/*線の太さ*/  width: 25px;/*長さ*/
  border-radius: 3px;  background: #555;  display: block;  content: '';  cursor: pointer;}
#nav-open span:before {  bottom: -8px;}
#nav-open span:after {  bottom: -16px;}
/*閉じる用の薄黒カバー*/
#nav-close {  display: none;/*はじめは隠しておく*/  position: fixed;  z-index: 99;  top: 0;/*全体に広がるように*/
  left: 0;  width: 100%;  height: 100%;  background: black;  opacity:  0;  transition: .3s ease-in-out;}
/*中身*/
#nav-content {
  overflow: auto;  position: fixed;  top: 0;  right: 0;  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/  max-width: 180px; /*最大幅（調整してください）*/
  height: 100%;  background: #efefef;/*背景色*/  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(105%);  transform: translateX(105%);/*左に隠しておく*/}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {  display: block;/*カバーを表示*/  opacity: .5;}
#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);}
 
}

/* -------------------------------------------- */
/* ▼タブレット用デザインとして付け足すデザイン */
/* -------------------------------------------- */
@media (min-width: 768px) {

body {  max-width: 1024px;  }

/*========== ▼header 共通 ==========*/

#subtitle {  text-align: left;  }
nav {  width: 100%;  display: table;  }
.logo-block {  width: 180px;  display: table-cell;  }
nav ul {  display: table-cell;  }

/*========== ▼main & aside 共通 ==========*/

.p-ib {  display:inline-block;  padding-top:1em;  }
.w108 {  width: 108px;  }
.max200 {  max-width: 200px;  }
.w264 {  width: 264px;  }
.w280 {  width: 280px;  }
.w300 {  width: 300px;  }
.max600 {  max-width: 600px;  }
.tc {  display: table-cell;  vertical-align: top;  }
.tc600 {  display: table-cell;  vertical-align: top;  max-width: 600px;  }
.tc60 {  display: table-cell;  vertical-align: top;  max-width: 600px;  width:60%;  }
.tr {  display: table-row;  padding: 0;  }

/*========== ▼aside ==========*/

}
/* ------------------------------------ */
/* ▼PC用デザインとして付け足すデザイン */
/* ------------------------------------ */
@media (min-width: 1024px) {





}