a {
  text-decoration: none;
  color: white;
}
a:hover {
  font-weight: bold;
  text-decoration: underline;
  font-size: 120%;
}
body{

  font-family: "Nico Moji";
}
.bs-callout {
padding: 20px;
margin: 20px 0;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
}
.bs-callout h4 {
margin-top: 0;
margin-bottom: 5px;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code {
border-radius: 3px;
}
.bs-callout+.bs-callout {
margin-top: -5px;
}
.bs-callout-default {
border-left-color: #777;
}
.bs-callout-default h4 {
color: #777;
}
.bs-callout-primary {
border-left-color: #428bca;
}
.bs-callout-primary h4 {
color: #428bca;
}
.bs-callout-success {
border-left-color: #5cb85c;
}
.bs-callout-success h4 {
color: #5cb85c;
}
.bs-callout-danger {
border-left-color: #d9534f;
}
.bs-callout-danger h4 {
color: #d9534f;
}
.bs-callout-warning {
border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
color: #f0ad4e;
}
.bs-callout-info {
border-left-color: #5bc0de;
}
.bs-callout-info h4 {
color: #5bc0de;
}
span{
display:inline-block;
}
.btntextchange{
  /*テキストの基点とするためrelativeを指定*/
position: relative;
  /*ボタンの形状*/
border: 1px solid #fff;

  min-width:100px;
padding: 10px;
  text-align: center;
display: inline-block;
  text-decoration: none;
  color: #333;
  outline: none;
  /*アニメーションの指定*/
  transition: all .2s;
}

/*hoverした際の変化*/
.btntextchange:hover{
background:#333;
color:#fff;
}

.btntextchange span{
  /*絶対配置でテキストの位置を決める*/
position: absolute;
left: 50%;
top:50%;
  transform:translate(-50%,-50%);
  /*アニメーションの指定*/
  transition: all .5s;
/*ブロック要素にしてテキスト折り返しなし*/
display: block;
white-space: nowrap;
}

/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2){
opacity:0;/*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1){
opacity:0;/*透過0に*/
}

.btntextchange:hover span:nth-child(2){
opacity:1;/*不透明に*/
}

.fade-in {
    opacity: 0; /* 初めは透明に設定 */
    animation: fadeIn 5s ease-in-out forwards; /* アニメーション名、時間、イージングを設定 */
  }

  @keyframes fadeIn {
    from {
      opacity: 0; /* 開始時のスタイル */
    }
    25% { topacity: 0.25; }
    /** 25%～50%にかけて0.95倍する */
    50% { opacity: 0,5; }
    /** 50%～75%にかけて1.05倍する */
    75% { opacity: 0.75; }
    to {
      opacity: 1; /* 終了時のスタイル */
    }
  }

  .bound {

    left: 0;
    right: 0;
    top:0;
    bottom: 50px;
    margin: auto;


    animation: bound-anim 0.9s infinite;
  }

  @keyframes bound-anim {
    0%,100% {top: 0;transform: scale(1);}
    30% {top: -25%;}
    50% {transform: scale(1);}
    90% {top: 0;transform: scale(1.1,0.8);}
  }

  @keyframes scroll-anim {
  from {
      opacity: 0;
      scale: 0.7;
    }
    25% {
      opacity: 0.25;
      scale: 0.9;
    }
    /** 25%～50%にかけて0.95倍する */
    50% {
      opacity: 0,5;
      scale: 1;
    }
    /** 50%～75%にかけて1.05倍する */
    75% {
      opacity: 0.9;
      scale: 0.7;
    }
    to {
      opacity: 1;
      scale: 1; /* 終了時のスタイル */
    }

}

.item {
  animation: scroll-anim linear;
  animation-timeline: view();
  animation-range: entry 0% contain 10%;
}

span#id-collapse[aria-expanded="false"]:after {

  content: url(../images/off.png);
}

span#id-collapse[aria-expanded="true"]:after {

  content: url(../images/on.png);
}



span#id-collapse2[aria-expanded="false"]:after {

  content: url(../images/book.png);
}

span#id-collapse2[aria-expanded="true"]:after {

  content: url(../images/book2.png);
}