body {
    font-family: Arial, sans-serif;
    text-align: center;
    /* background-color: rebeccapurple;*/
  }
  
  h2.language {
    position: relative;
    text-align: right;
    padding: 0 1em 0 0;
    /* margin: 0; */
    top: -2em;
  }

  button {
    font-size: 1.2em;
    /*margin: 10px;*/
    padding: 10px;
    margin: auto;
  }
  
  #card-deck {
    margin: 30px auto;
    width: 200px;
    height: 300px;
    position: relative;
  }
  
  .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  @keyframes card-shuffling {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-10px, -10px); }
    20% { transform: translate(10px, 10px); }
    30% { transform: translate(-10px, 10px); }
    40% { transform: translate(10px, -10px); }
    50% { transform: translate(-10px, -10px); }
    60% { transform: translate(10px, 10px); }
    70% { transform: translate(-10px, 10px); }
    80% { transform: translate(10px, -10px); }
    90% { transform: translate(-10px, -10px); }
    100% { transform: translate(0, 0); }
  }
  
  .card-shuffling {
    animation: card-shuffling 1s ease-out both;
  }
  
  
  .card-reversed {
    transform: rotate(180deg);
  }

  .card-div {
    border: 2px solid #000;
    padding: 10px;
    margin: 10px;
}

.interpretation-text {
    border: 2px solid #000;
    padding: 10px;
    margin: 10px;
}

/*全デバイス共通のCSS（スマホ向け）*/
img{ width: 100%; }
.card-div { 
  margin: 2em auto 4em auto;
  width: 90%;
}
#story-introduction{
  margin: 2em auto 4em auto;
  width: 90%;
}


/*幅768px以上に適用されるCSS（タブレットサイズ以上）*/
@media screen and (min-width:768px){
  img{ width: auto; }
  .card-div { 
    margin: 2em auto 4em auto;
    width: 70%;
  }
  #story-introduction{
    margin: 2em auto 4em auto;
    width: 70%;
  }
}
/*幅990px以上に適用されるCSS（PCサイズ以上）*/
@media screen and (min-width:990px){
  img{ width: auto; }
  .card-div { 
    margin: 2em auto 4em auto;
    width: 70%;
  }
  #story-introduction{
    margin: 2em auto 4em auto;S
    width: 70%;
  }
  #story-introduction img{
    width: 70%;
  }
}

.hidden {
  display: none;
}