@charset "UTF-8";
/********** all ***********/

body {
  font-size: 15px;
  color: #3c3c3c;
  background-color: #f5f5f5;
}

/* Header Style */

.ts-header-content[data-v-e2967548] {
  position: relative;
}

.ts-header-img[data-v-e2967548] {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}

.ts-header-img .ts-header-img-1[data-v-e2967548] {
  height: 66px;
  -webkit-box-flex: 1;
  flex-grow: 1;
  background-image: url(../img/header_left.png);
}

.ts-header-img .ts-header-img-2[data-v-e2967548] {
  height: 66px;
  width: 500px;
  background-image: url(../img/header_center.png);
  background-position: center;
}

.ts-header-img .ts-header-img-3[data-v-e2967548] {
  height: 66px;
  -webkit-box-flex: 1;
  flex-grow: 1;
  background-image: url(../img/header_right.png);
}

.ts-header[data-v-e2967548] {
  position: absolute;
  top: 0;
  height: 66px;
  width: 100%;
  padding: 0 15px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.ts-header .ts-header-item[data-v-e2967548] {
  align-self: center;
  display: -webkit-box;
  display: flex;
}

.ts-header .ts-header-item .ts-logo-area[data-v-e2967548] {
  display: -webkit-inline-box;
  display: inline-flex;
}

.ts-header .ts-header-item .ts-logo-area .ts-logo-img[data-v-e2967548] {
  height: 40px;
  min-width: 116px;
  vertical-align: middle;
}

/* header end */

/********* footer *********/

.footer {
  text-align: center;
  border: 1px solid transparent;
  border-top-color: #dcdcdc;
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.copyright {
  text-align: center;
  color: #5a5a5a;
}

/********* side bar *********/

/********* main contents *********/

.page-title {
  border-bottom: 1px solid #428bca;
  padding: 10px 0px 10px 10px;
  margin: 20px 0px 10px 0px;
  margin-bottom: 1em;
}

h1{
  font-size: 36px;
}

p {
  margin: 5px 0 5px 0;
}

ul {
  /* 2021.3.19 16->8px change */
  padding-left: 8px;
}

a {
  color: #2476bf;
  text-decoration: none;
}

a:hover, a:focus {
  color: #0000ff;
  text-decoration: underline;
}

/********* page-item *********/

.page-anchor {
  margin-top: -80px;
  padding-top: 80px;
  position: absolute;
}

#page-top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  font-size: 77%;
  padding: 0;
  margin: 0;
}

#page-top a {
  background: #666;
  text-decoration: none;
  color: #fff;
  padding: 6px 12px;
  text-align: center;
  display: block;
  border-radius: 5px;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

#page-top a:hover {
  text-decoration: none;
  background: #666;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}

#page-back {
  position: fixed;
  bottom: 10px;
  left: 15px;
  font-size: 77%;
  padding: 0;
  margin: 0;
}

#page-back a {
  background: #666;
  text-decoration: none;
  color: #fff;
  text-align: center;
  display: block;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

#page-back a:hover {
  text-decoration: none;
  background: #666;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}

/* 2021.3.19 responsive-style add */

div.table {
  display: flex;
  padding: 10px;
  background: #fff;
}

div.table>ul {
  width: 20%;
}

div.table>ul>h4 {
  background-color: #d9e8f7;
  color: #3b4e9f;
  height: auto;
  /* 2021.3.22 18->12px change */
  /* padding: 18px 10px; */
  padding: 12px 10px;
  font-weight: bold;
  margin-right: 10px;
}

div.table>ul>li {
  list-style: none;
}

a {
  font-size: 16px;
}

/* responsive-style end */

/* for 240px < 320px width. */
@media (min-width: 240px) {
  h1{
    font-size: 28px;
  }

  p {
    margin: 5px 10px;
  }

  div.table{
    flex-wrap: wrap;
  }

  div.table>ul {
    width: 100%;
  }

}

/* for 320px < 480px width. */
@media (min-width: 320px) {

  p {
    font-size: 16px;
  }

  a {
    font-size: 18px;
  }
}

/* for 480px < 768px width. */
@media (min-width: 480px) {
  div.table>ul {
    width: 50%;
  }
  
  a {
    font-size: 16px;
  }
}

/* for 768px < 992px width. */
@media (min-width: 768px) {

  h1{
    font-size: 36px;
  }

  div.table>ul {
    width: 50%;
  }

}

/* for 992px < 1200px width. */
@media (min-width: 992px) {

  div.table>ul {
    width: 20%;
  }

  div.table>ul>h4 {
    height: 3.0em;
    line-height: 1.2em;
  }

  div.table>ul:nth-child(4)>h4{
    line-height: 1.0em;
  }

  a {
    font-size: 16px;
  }

}

/* for 1200px < x width.*/
@media (min-width: 1200px) {

  div.table>ul>h4 {
    height: 3.0em;
    line-height: 1.2em;
  }
}

@media print {
  a[href]:after {
    content: "";
  }
  abbr[title]:after {
    content: "";
  }
}