@charset "UTF-8";

html{
   font-size: 15px;
   height: 100%;
   font-family:"Hiragino Kaku Gothic Pro","Meiryo", sans-serif;
   color: #333;
}

body {
   margin:0 auto;
   height: 100%;
}

h1 {
   font-size: 1.5em;
   border-bottom: thick solid #4169e1;
   margin: 20px 10px 10px 10px;
}

h2 {
  text-align: center;
   border-top: thick solid darkorange;
   border-bottom: thick solid darkorange;
   padding: 2px 0 2px 0;
   margin: 5px 10px 5px 10px;
   background: #ffcc66;
      font-size: 1.2em;
}

header {
  max-width: 900px;
  margin: auto;
  text-align: center;
}

.top-logo img {
   margin-top: 14px;
   }

#top {
   max-width: 900px;
   height: 75px;
   display: flex;
   justify-content: space-between;
}

.prtel {
   width: 200px;
   padding-top: 12px;
}

.tel-img,
.tel {
   display: inline-block;
  vertical-align: bottom;
}

.tel-img img{
   width: 25px;
}

.tel {
   font-size: 1.3em;
   font-weight: bold;
   color: #4169e1;
   margin: 0 0 -4px 0;
}

.navi ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #1b2538;
}
.navi li {
   float: left;
   border-right: 1px solid #bbbbbb;
}
.navi li:last-child {
   border-right: none;
}
.navi li a {
   display: block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
}
.navi li a:hover:not(.active) {
   background-color: #a9bce2;
}
.navi .active {
   background-color: #da3c41;
}


/*メディアクエリ---------------------*/
#wrap {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  max-width: 900px;
  height: auto;
  margin-top: 5px;
}

main {
  width: 80%;
  height: auto;
  text-align: center;
}

.left-bar {
  width: 20%;
  background-color: #BAD3FF;
}

/*メディアクエリ）---------------------*/
@media screen and (max-width: 997px) {
  main {
    width: 100%;
  }

  .left-bar {
    width: 100%;

  }
}


.section-1 {
   margin: 10px 0 10px 0;
}

.section-1 h4{
  font-size: 1.2em;

}

.table-solid{
  margin: auto;
}

.table-solid td {
   border: 1px solid DarkGray;
}

.s1-text p{
   text-align: left;
}

.left-bar-inner {
   margin: 0 auto;
   width: 170px;
   height: auto;
}

.request {
   border: 1px solid #4169e1;
   margin: 5px 0 5px 0;
   border-radius: 5px;
}

.request-box {
   margin: 5px 0 5px 0;
   font-weight: bold;
   text-align: center;
}

.request-mail,
.request-fax {
   background-color: white;
   border-radius: 5px;
}


.btn-flat-vertical-border {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.5em 1em;
  text-decoration: none;
  border-left: solid 4px #668ad8;
  border-right: solid 4px #668ad8;
  color: #668ad8;
  background: #e1f3ff;
  transition: .4s;
}

.btn-flat-vertical-border:hover {
  background: #668ad8;
  color: #FFF;
}

.products-list {
   margin: 0 auto;
   width: 170px;
}

.box30 {
   margin: 1em 0;
   background: #f1f1f1;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
   background: #668ad8;
   padding: 4px;
   text-align: center;
   color: #fff;
   font-weight: bold;
   letter-spacing: 0.05em;
}
.p-list {
   padding: 10px 20px;
   margin: 0;
   line-height: 1.8;
}

footer {
   background: #4169e1;
   text-align: center;
   max-width: 900px;
   margin: auto;
   padding: 0 0 0.5px 0;
}

.fotter-inner p {
   color: #fff;
   font-size: 0.875rem;
   padding-top: 8px;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
