body {
  margin: 0;
  padding: 0;
  background: rgba(248, 241, 229, 0.90);
  background: rgba(234, 234, 234, 0.85);
  word-wrap: break-word;
  color: #666;
  text-align: justify;
  font-size: 100%;
}

p {
  margin-bottom: 1.8em;
  line-height: 2;
}

.header-area, footer {
  background: #6A5ACD;
  background: url(../img/bg-perple.png) repeat-x;
  color: #eee;
}

nav {
  position: absolute;
  top: 0;
  right: 0;
  margin: 1em 1em 0 0;
  z-index: 999;
}

nav ul li a {
  color: #eee;
}

nav ul li a:hover {
  color: #eee;
}

nav ul {
  list-style: none;
}

nav ul li {
  background: url(../img/star15*15.png) no-repeat;
  line-height: 1.5;
  padding-left: 20px;
  margin-left: 10px;
  margin-bottom: 5px;
}

nav ul li.active {
  background: #888 url(../img/star15*15.png) no-repeat;
  background-position: left center;
  border-radius: 8px;
  line-height: 1.5;
  padding-left: 20px;
  margin-left: 10px;
  margin-bottom: 5px;
}

b {
  text-shadow: 1px 1px 0px #fff;
}

.pointer {
  cursor: pointer;
}

.display-1 {
  word-wrap: break-word;
}

.title-c {
  color: orange;
  text-shadow: 1px 1px 0px #ffa10a, -1px -1px 0px #ffa10a, 1px -1px 0px #ffa10a, -1px 1px 0px #ffa10a, 3px 3px 0px #eee;
  text-shadow: 3px 3px 0px #eee;
  font-family: 'Rubik 80s Fade', cursive;
}

.btn-outline-dark {
  background: #fff;
  box-shadow: 0px 0px 8px #ccc;
}

.btn-outline-dark:focus, .btn-outline-dark.focus {
  outline: 0;
  box-shadow: none;
}

.btn-outline-dark:hover {
  background: #fafafa;
  color: #000;
}

/*擬似要素が設定されているためactiveの変更はこれ、
もしくは、!importantをつかう。
.btn-primary:hover, .btn-primary:active {
  background-color: #563d7c !important;
  border: 1px solid #563d7c !important;
}のように！
*/

.btn-outline-dark:not(:disabled):not(.disabled):active {
  background: #fff;
  color: #000;
  border: 0;
  box-shadow: none;
}

.table-hover tbody tr:hover {
  color: #212529;
  background-color: #fafafa;
}

/*------------アニメーション---------*/

.fadein-box {
  transform: translateX(-100px);
  opacity: 0;
  transition: opacity 1.6s, transform 0.5s;
  font-weight: normal;
  color: orange;
  color: #333;
  text-shadow: 1px 1px 0px #fff;
}

.overhidden {
  overflow: hidden;
}

.fadein-box-under {
  transform: translateX(1000px);
  opacity: 0;
  transition: opacity 1.6s, transform 1.6s;
  color: #333;
}

/*-------jQueryで追加するクラス------*/

.fadein {
  opacity: 1;
  transform: translateX(0);
}

#loadingImg {
  display: none;
}

#panel {
  position: fixed;
  bottom: 3px;
  right: 5px;
}

/*---------オリジナルデザイン--------*/

.bg-o {
  padding: 1.6em 0;
  background: #ffb631;
  color: #727272;
  font-weight: bold;
}

.box-0 {
  border: 1px solid #ddd;
  border-radius: 16px;
  background: #fff;
  padding: 2.8em 2.8em 1em;
  color: #666;
  box-shadow: 0px 0px 16px 0px #4934c9;
}

.box-1 {
  border: 1px solid #ddd;
  border-radius: 16px;
  background: #fff;
  padding: 2.8em 2.8em 1em;
  color: #666;
  box-shadow: 0px 0px 16px 0px #dddddd;
  /*box-shadow: 0px 0px 0px 10px #dddddd;*/
}

.allow-under-right:after {
  content: url(../img/allow-under-right.png);
  position: absolute;
  top: 15px;
  margin-left: 15px;
}

.figure-caption {
  color: #eee;
}

.conversion-box {
  background: #fafafa;
  padding: 1em;
}

@media (min-width: 576px) {
  .container {
    /*max-width: 100%;*/
  }
}

@media (min-width: 768px) {
  .container {
    /* max-width: 90%;*/
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    /*max-width: 980px;*/
  }
}