.mainNav {
  background: #E6E6E6
}

.mainNav .inner{
  display: flex;
  justify-content: center;
  flex-direction: column;
    align-items: center;
}

.lead p {
  font-size: 18px;
  padding: 0 0 60px;
}

@media screen and (max-width: 768px) {
  .lead p {
    min-width: 250px;
  }
}

.mainNav .outline {
  background: #fff;
  padding: 20px 40px 30px;
  border: solid 3px #152444;
  max-width: 75%;
}

@media screen and (max-width: 768px) {
  .mainNav .outline {
    padding: 20px 10px 20px 20px;
    min-width: 250px;
  }
}

.mainNav .outline ul {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
  .mainNav .outline ul  {
    display: initial;
    flex-wrap: nowrap;
  }
}

.mainNav .outline ul li:not(:last-child) {
  margin-right: 35px;
}

@media screen and (max-width: 768px) {
  .mainNav .outline ul li {
    min-width: 155px;
  }
}

.mainNav .outline a {
  color: #152444;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: 500;
  font-size: 18px;
  padding: 10px 0
}

@media screen and (max-width: 768px) {
  .mainNav .outline a {
    padding: 10px 10px 10px 0;
    align-items: flex-start
  }
}

.mainNav .outline a:before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: url(../img/minus.svg) center center/15px auto no-repeat;
  margin-right: 3px
}

@media screen and (max-width: 768px) {
  .mainNav .outline a:before {
    width: 10px;
    min-width: 10px;
    height: 10px;
    background: url(../img/minus.svg) center center/10px auto no-repeat;
    margin-right: 5px;
    margin-top: 10px
  }
}

.mainNav h3 {
  font-size: 34px;
  line-height: 50px;
  margin: 10px 0;
  color: #152444;
  display: flex;
  align-items: center;
  justify-content: flex-start
}

@media screen and (max-width: 768px) {
  .mainNav h3 {
    font-size: 25px;
    line-height: 40px;
    margin: 4px 0
  }
}

h2 {
  text-align: center;
  font-size: xx-large;
  padding-top: 35px;
  letter-spacing: 5px;
}

.notice,.sales,.management {
  background: #fdfded;
}

.svgIcn {
  width:32px;
  margin-right:10px;
}

.contents {
  padding: 0px 10px 0px;
}


.contents .inner {
  padding:0px 0px;
}

.contents img {
  height: 90px;
}

.contents p {
  font-weight:500;
  text-align: center;
  font-size: 20px;
  color: #4e5f83;
  margin-bottom:10px;
}

.contents p.strong {
  font-weight:600;
}

.contents .contentsBox {
  border-radius: 10px;
  background-color: #ffffff;
  border:1px solid #f2f3f5;
  text-align: center;
  box-shadow: 3px 3px 1px 0 rgba(128, 128, 128, .2);
  min-height: 160px;
}

.contents .contentsBox:hover {
  opacity: 0.5;
}


.contents .contentsBox .headLine {
  width:100%;
  height:6px;
  border-radius: 20px 20px 0 0;
  background:#48A6E0;
  margin:0px auto 20px;
}

.contents ul.contentslist {
  margin:20px auto 0px;
  list-style: none;
  padding-left: 0;
  flex-wrap: wrap;
  text-align: center;
}
ul.contentslist li{
  min-width: 270px;
  max-width: 320px;
  padding-bottom: 40px;
  display: inline-block;
  vertical-align: top;
  margin: 0 30px;
}

div.linkDiv {
  position:relative;
}
.linkDiv a.blockLink {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content {
  height: auto;
  text-align: center;
  padding: 40px 15px;
}
  @media screen and (max-width: 768px) {
    .content {
      height: auto;
      margin-top: 0px;
    } }
  .content .key_sp {
    display: none; }
    @media screen and (max-width: 768px) {
      .content .key_sp {
        display: block;
        width: 100%; } }


.radiusBox {
  border-radius: 20px;
  border:3px solid #152444;
  text-align: center;
}

div.explImgBox {
  align-items:center;
  vertical-align: top;
  display:flex;
  width:auto;
  max-width:1150px;
  background:white;
  padding:20px 0px;
  margin: 40px 0px 40px 100px;
  position: relative;
}
  @media screen and (max-width: 768px) {
    div.explImgBox {
      display:inline-block;
      margin: 40px 0 40%;
      min-width: 300px;
    } }


div.explImgBox div.expl {
 background:white;
 padding:10px 31px 10px 0;
 width:60%;
 text-align: left;
 display:inline-block;
}
@media screen and (max-width: 1005px) {
  div.explImgBox div.expl {
    padding-right: 40px;
  }
}
  @media screen and (max-width: 768px) {
    div.explImgBox div.expl {
      width:85%;
      padding: 10px 0;
    } }

div.explImgBox div.expl p,div.explImgBox div.expl a {
 text-align: left;
 margin-bottom:10px;
 font-size:18px;
}
@media screen and (max-width: 768px) {
  div.explImgBox div.expl p,div.explImgBox div.expl a {
    text-align: center  ;
}}

div.explImgBox div.expl p.subject {
 font-size: 28px;
 font-weight:500;
}

div.explImgBox div.img {
 background:white;
 display:inline-block;
}
div.explImgBox div.img img {
  width: 60%;
  height:auto;
}

.expl p {
  margin-right:5px;
} @media screen and (max-width: 768px) {
    .expl p {
      text-align: center;
    }
}

.screen {
  width: 27%;
  position: absolute;
  left: 85%;
}
  @media screen and (max-width: 1005px) {
    .screen {
      left: 92%;
    }
  }
  @media screen and (max-width: 805px) {
    .screen{
      left:95%;
    }
  }
@media screen and (max-width: 768px) {
  .screen {
    left: 16%;
    top: 95%;
    width: 67%;
 }
}

#web_form01,
div.expl p a {
  position: relative;
}

div.expl a:before {
  content: '';
  position: absolute;
  inset: 0;
}

/*# 比較表 */
.compareNav {
  margin: 80px 0;
}

@media screen and (max-width: 768px) {
  .compareNav {
    margin: 60px 0;
  }
}

.compareNav .inner {
  padding: 0px 0;
}

.compare {
  margin: auto;
  border-color: #7FA3AF;
  border-collapse: separate;
}

table tr {
  background-color: #fff;
  border: solid #7FA3AF;
}

table th,
table td {
  padding: 1em 10px 1em 1em;
  border: 1px solid #7FA3AF;
  text-align: center;
}

table thead tr {
  background-color: #CFE2F3;
}

.red-txt{
  color:#e81010
}

thead th:nth-child(2) {
  color:#fff;
  background-color:#4A86E8;
}

tr td:nth-of-type(1) {
  border-width:1px 4px;
  border-color:#7FA3AF #4A86E8;
}

tr:nth-child(8) td:nth-child(2) {
  border-width:1px 4px 4px;
  border-color:#7FA3AF #4A86E8 #4A86E8;
}

.compareNav p{
  text-align: center;
}

@media screen and (max-width: 768px) {
  .compareNav .inner {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
  }

  .fixed {
    position: sticky;
    left: 0;
    background-color: #ffffff;
  }

  .head {
    background-color: #CFE2F3;
  }



  thead th:nth-child(2) {
    color:#fff;
    background-color:#4A86E8;
  }

  tr td:nth-of-type(1) {
    border:solid;
    border-width: 1px 4px;
    border-color:#7FA3AF #4A86E8;
  }

  tr:nth-child(8) td:nth-child(2) {
    border-width:1px 4px 4px;
    border-color:#7FA3AF #4A86E8 #4A86E8;
  }}

/* function_sample25.png と function18.png のサイズ調整（このページ専用） */
/* .explImgBox内の画像のみに適用（.contentsBox内の画像には適用しない） */
.explImgBox img[src="img/function_sample25.png"],
.explImgBox img[src="img/function18.png"] {
  max-height: 300px;
  height: auto;
  object-fit: contain;
}
@media screen and (max-width: 768px) {
  .explImgBox img[src="img/function_sample25.png"],
  .explImgBox img[src="img/function18.png"] {
    max-height: 200px;
  }
}
/* .contentsBox内のfunction18.pngは他の画像と同じ高さにする */
.contentsBox img[src="img/function18.png"] {
  height: 90px;
  max-height: 90px;
  width: auto;
  object-fit: contain;
}
/* function18.png を含む .img コンテナの高さを揃える */
#attendance .img {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 256px;
  padding: 0;
  box-sizing: border-box;
}
/* function18.png の横幅を256px、高さを200px程度に設定 */
#attendance .img img[src="img/function18.png"] {
  width: 256px;
  max-height: 200px;
  height: auto;
  object-fit: contain;
}
@media screen and (max-width: 768px) {
  #attendance .img {
    height: auto;
    width: auto;
  }
  #attendance .img img[src="img/function18.png"] {
    width: auto;
    max-height: 200px;
  }
}