@charset "UTF-8";
@import url(https://use.fontawesome.com/releases/v5.4.1/css/all.css);
/*----------------------------------------*/

html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
  box-shadow: none;
}
  
body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
    height: 100%;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
  body * {
    box-sizing: border-box;
  }
  
a {
  color: #409eff;
  text-decoration: underline;
  outline: none;
}
  a:hover {
    text-decoration: none;
  }

i {
  font-style: normal;
}

i.fa {
  margin: 0 5px 0 0 !important;
  transform: rotate(0) !important;
}

img {
  transform: rotate(0) !important;
}

strong {
  font-weight: 900;
}
  
iframe::-webkit-scrollbar {
  width: 10px;
}
iframe::-webkit-scrollbar-track {
  background: #fff;
  border-left: solid 1px #ececec;
}
iframe::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #fff;
}
iframe.frame {
  border: none;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

h1 {
  font-size: 2.0em;
  margin: 0 auto 26px;
  animation-name: fadein2;
  animation-duration: 1s;
  background-color: #eee;
  padding: 15px;
  margin: 0px 20px 30px 0px;
  line-height: 1em;
  /*タイトル変換が見えるのを防止*/
}


h3 {
  font-size: 18px;
  padding: 0.5em !important;
  border-bottom: 1px dotted #333;
}

hr {
  border: 0.5px dotted #333;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

th {
  background-color: #ececec;
  color: #7a4c8c;
}

th, td {
  border: 1px solid #ebeef5;
  padding: 10px;
}

ul {
  list-style: none;
  padding: 0;
}


header {
  background-color: #fff;
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding: 20px;
    display: flex;
    justify-content: space-between;
}
header p{
    font-size: 22px;
    font-weight: 500;
}
header .contact a {
    font-size: 16px;
    background-color: #e50012;
    padding: 10px 15px;
    color: #fff;
    border-radius: 5px;
}
#csIndex {
  margin: 0;
  padding: 0;
  overflow-y: hidden;
  width: 1080px;
  margin:auto;
  background: #f8f8f8;
  max-width: 100%;
    border: 1px solid #999;
    height: 100%;
}
#contentBody {
  display: flex;
  height: 100%;
  justify-content: flex-start;
}
@keyframes fadein1 {
  from {
    opacity: 0;
    transform: translateX(-10px); }
  to {
    opacity: 1;
    transform: translateY(0); }
  }

#contentNav {
  -webkit-transition: width .28s;
  transition: width .28s;
  width: 25% !important;
  background-color: #eee;
  height: 100%;
  overflow-y: auto;
    padding-bottom: 200px;
    border-right: 1px solid #ccc;
}

#contentMain {
  height: 100%;
  padding: 0 0 20px 20px;
  background:#fff;
  width: 810px;
}

.spOnly {
  display: none;
}
.pcOnly {
  display: block;
}

.toc {
  border: dotted #1e366a 1px;
  padding: 0.5em 2em 0.5em 2em;
  display: inline-block;
  background: #efefef;
}

.note {
  padding: 15px 20px 5px 50px;
  width: 90%;
  margin: 0 auto 1em;
  position: relative;
}

.info {
  background: #deebff;
}
.info:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline;
  position: absolute;
  left: 20px;
  top: 30px;
  content: "\f06a";
  color: #0052cc;
}

.warn {
  background: #fffae6;
}
.warn:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline;
  position: absolute;
  left: 20px;
  top: 30px;
  content: "\f071";
  color: #ff991f;
}
.btn a {
  display:inline-block;
  padding: 15px 10px;
  background: #404140;
  min-width: 200px;
  text-align:center;
  text-decoration:none;
  border-radius: 5px;
  color: #fff;
  margin: 15px;
}
.btn a:before {
   font-family: "Font Awesome 5 Free";
    content: "\f35a";
    transform: rotate(0) !important;
    margin: 0 5px 0 0;
}
.btn a:hover {
  background:#1b1b1b;
}
p.copyright {
  text-align:right;
  margin-top: 5em;
  padding-top: 1em;
  border-top: 1px solid #ccc;
  color: #999;
  font-size:80%;
}
copyright{
    padding: 80px 8px 8px 8px;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
    font-weight: 400;
  }
  #csIndex {
    width: 100%;
  }
  .spOnly {
    display: block !important;
  }
  .pcOnly {
    display: none !important;
  }
  #contentNav {
    display: none;
  }
  #contentMain {
    width: 100% !important;
      padding: 0 10px 0;
  }
  h1 {
    font-size: 28px;
  }
  h2 {
    font-size: 22px;
  }
}