@charset "UTF-8";

/* =========================================================
   Base
========================================================= */
/* elements
----------------------------------------------- */
html {
  box-sizing: border-box;
  font-size: 100%;
 
  // 600px以降から、100pxごとに1px大きくなる
  @media (min-width: 600px) {
    font-size: calc(112.5% + 4 * (100vw - 600px) / 400)
  }
 
  // 1,000px以上は、22pxに
  @media (min-width: 1000px) {
    font-size: calc(137.5%)
  }
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  width: 100%;
  height: 100%;
  /*margin: 10px;*/
  margin: 0;
  pading:5px;
  line-height: 1.0;
  color: #333;
  font-size: 100%;
  font-weight: normal;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', 'メイリオ', sans-serif;
  overflow-wrap: break-word;
}

p {
  margin: 0 0 1em;
}

ul {
  margin: 0;
  padding: 0;
  list-style-position: outside;
  list-style-type: none;
}

li {
  margin: 0;
  padding: 0;
  list-style-position: outside;
}

a {
  background-color: transparent;
  color: #1d3994;
}
img {
  max-width: 100%;
  border: 0;
  vertical-align: bottom;
}

a:visited {
  background-color: transparent;
  color: #8232a0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}


/* System
----------------------------------------------- */


/* more
---------------------- */

.more a {
  display: inline-block;
  float: right;
  padding: 0 0 0 16px;
}

.more::after {
  content: "";
  display: table;
  clear: both;
}

@media only screen and (max-device-width: 800px) {
.more a {
  display: inline-block;
  float: right;
  padding: 0 0 0 16px;
  font-size:180%;
}
}

/* =========================================================
   Layout
========================================================= */

#main {
  max-width: 1200px;
  margin: 0 auto 40px;
}

#wrapper {
  display: flex;
  margin: 0 0 20px;
}

#wrapper .piece {
  margin-bottom: 20px;
}

.top #content {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

#pageFooter {
  width: 100%;
}


/* =========================================================
   Piece
========================================================= */

/* common-header
----------------------------------------------- */

#commonHeader img {
  border: 0px;
  vertical-align: bottom;
  margin: 15px 0px;
}

/* page-title
----------------------------------------------- */

#pageTitle {
  margin: 0 0 20px;
}

#pageTitle h1 {
  position: relative;
  padding: 14px 15px 8px 22px;
  border: 1px solid #b3b3b3;
  background: linear-gradient(to bottom, #fff, #f2f2f2);
  font-size: 160%;
}

#pageTitle h1::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 5%;
  height: 100%;
  border-left: 8px solid #0172c0;
}


/* breadCrumbs
----------------------------------------------- */

#breadCrumbs::after {
  content: "";
  clear: both;
  display: block;
}

#breadCrumbs {
  margin-bottom: 10px;
}

#breadCrumbs ol,
#breadCrumbs li {
  list-style: none;
}

#breadCrumbs li {
  display: inline-block;
}

#breadCrumbs li:not(:first-child)::before {
  content: ">";
  margin: 0 5px;
}

@media only screen and (max-width: 1000px) {
  #breadCrumbs {
    font-size:1.5em;
  }
}

/* page-top
---------------------- */

#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  border-radius: 5px;
  background-color: rgba(102, 102, 102, 0.9);
  z-index: 9999;
}

#pageTop a {
  display: block;
  padding: 46px 8px 8px;
  line-height: 1.4;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  font-size: 80%;
}

#pageTop:hover {
  background-color: rgba(102, 102, 102, 0.8);
}


/* about
----------------------------------------------- */

#about h2 {
  font-size: 100%;
  margin: 30px 5px 20px 5px;
  padding: 0;
  min-height: 0;
  background-color: transparent;
  border-bottom: 2px solid #0172c0;
  color: #0172c0;
}

#about p {
  font-size: 100%;
  position: relative;
  display: block;
  margin: 10px 5px 10px 5px;
  padding: 10px;
}

@media only screen and (max-device-width: 800px) {
  #about h2 {
    margin: 30px 5px 20px 5px;
    font-size: 150%;
    padding: 10;
    min-height: 0;
    background-color: transparent;
    border-bottom: 2px solid #0172c0;
    color: #0172c0;
  }
  #about p {
    font-size: 150%;
    position: relative;
    display: block;
    margin: 10px 5px 10px 5px;
    padding: 10px;
  }
}


/* =========================================================
   maintenanceNew
========================================================= */

#maintenanceNew .tabs ul {
  display: flex;
  flex-wrap: nowrap;
}

#maintenanceNew .tabs li {
  flex-grow: 1;
  flex-basis: 0;
  border-top: 1px solid #7ac9eb;
  border-right: 1px solid #7ac9eb;
  border-bottom: 1px solid #0172c0;
  background: linear-gradient(to bottom, #fff, #dbf3fc);
}

#maintenanceNew .tabs li:first-child {
  border-left: 1px solid #7ac9eb;
}

#maintenanceNew .tabs li.current {
  border-top: none;
  border-bottom: none;
  background: #ed5151;
}

#maintenanceNew .tabs li:first-child.current {
  border-left: 1px solid #ed5151;
}

#maintenanceNew .tabs li:last-child.current {
  border-right: 1px solid #ed5151;
}

#maintenanceNew .tabs li a {
  display: block;
  padding: 8px 4px 7px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}

#maintenanceNew .tabs li.current a {
  border-top: 2px solid #ed5151;
  padding-top: 7px;
}

#maintenanceNew .wrapper {
  padding: 15px;
  border-style: solid;
  border-width: 0 1px 1px;
  border-color: #ed5151;
}

#maintenanceNew .content {
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid #ccc;
}

#maintenanceNew .content li {
  margin: 0 0 5px;
  padding: 0 0 0 16px;
}

#maintenanceNew .links {
  position: relative;
}

#maintenanceNew .feed {
  position: absolute;
  top: 0;
  left: 0;
}

#maintenanceNew ul.feed {
  padding: 0 0 0 26px;
  background: url("../images/rss.png") left center no-repeat;
}

#maintenanceNew .feed li {
  display: inline-block;
}

#maintenanceNew .feed li:first-child {
  margin-right: 6px;
}

@media only screen and (max-device-width: 800px) {
#maintenanceNew .tabs ul {
  display: flex;
  flex-wrap: nowrap;
  font-size:180%;
}
#maintenanceNew .feed {
  position: absolute;
  top: 0;
  left: 0;
  font-size:150%;
}
}


/* =========================================================
  emg-message
========================================================= */

.caution p{
 display:inline-block;
 vertical-align:top;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.emg-message {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #fff;
  padding:5px;
  margin:10px 0px 10px 0px;
  background-color: red;
}

.emg-left {
  width: 50px;
}

.emg-right {
  width: calc(100% - 50px);
}

@media only screen and (max-device-width: 800px) {
  .emg-left {
    width: 60px;
  }
  .emg-right {
    width: calc(100% - 60px);
    font-size: 2.5rem;
  }
}

/* =========================================================
  site-name
========================================================= */

#site-name div {
  position: relative;
  display: flex;
  padding: 5px;
  margin: 5px;
  background-color: green;
  color: #fff;
}

@media only screen and (max-device-width: 800px) {
  #site-name div {
    position: relative;
    display: flex;
    padding: 2px;
    margin: 10px 0px 10px 0px;
    background-color: orange;
    color: #fff;
  }
  #site-name h2 {
    font-size: 3.5rem;
    padding: 10px;
  }
}


/* copyright
---------------------- */

#copyright {
  background-color: #0172c0;
  text-align: center;
  color: #fff;
}

@media only screen and (max-device-width: 800px) {
  #copyright {
    background-color: #0172c0;
    text-align: center;
    color: #fff;
    font-size: 2.5em;
  }
}
/* contentGpArticleDoc
----------------------------------------------- */
.contentGpArticleDoc {
  margin: 0 0 40px;
}
.contentGpArticleDoc .date {
  margin: 30px 20px 30px 0px;
  text-align: right;
}
.contentGpArticleDoc .date p {
  margin: 0;
}
.contentGpArticleDocs li {
    margin: 0 0 10px;
    padding: 0 0 0 16px;
    background: url("../images/ic-list.png") left no-repeat;
}

h2.date {
    margin: 0 0 10px;
    padding: 0;
    min-height: 0;
    background-color: transparent;
    border-bottom: 2px solid #0172c0;
    color: #0172c0;
}

a {
    background-color: transparent;
    color: #1d3994;
}

ul.feed {
  padding: 0 0 0 30px;
  background: url("../images/rss.png") left center no-repeat;
}

.feed li {
  display: inline-block;
}

.feed li:first-child {
  margin-right: 6px;
}