@charset "UTF-8";
.inner-bg{
  padding-top: 5%;
}
.story-title{
  width:80%;
  margin:0 auto;
  padding:10px 20px;
  font-size:200%;
  background-color: #000;
  color:#fff;
  border-radius: 20px;
}

.stories {
  width:80%;
  margin:3% auto 0;
}


@media screen and ( min-width:768px ) { /* PC ==================== */
  .story {
  width: calc(50% - 10px);
  float: left;
  border-top:5px solid #eee;
  border-left:5px solid #ccc;
  border-right:5px solid #777;
  border-bottom:5px solid #333;
  margin-top:10px;
}
.story:nth-child(2n+1){
  margin-right: 15px;
}
.story:nth-child(n){
   float: left;
}
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .story {
  border-top:3px solid #eee;
  border-left:3px solid #ccc;
  border-right:3px solid #777;
  border-bottom:3px solid #333;
  margin-top:10px;
}
}

@media screen and ( min-width:768px ) { /* PC ==================== */
.story span{
  width: 100%;
  height: 100%;
  padding:26.7%;
  display: block;
  overflow: hidden;
  border:5px solid #fff;
  position: relative;
}
.story span img{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
.story p{
  width:100%;
  margin:0 auto;
  padding:10px 20px;
  font-size:120%;
  background-color: #000;
  color:#fff;
  border-left:5px solid #fff;
  border-right:5px solid #fff;
  border-bottom:5px solid #fff;
}
.story div{
  display: none;
}
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .story div{
  display: block;
}
.story div iframe,
.guide span{
  width:100%;
  height:100%;
  aspect-ratio: 16 / 9;
  display: block;
  border:3px solid #fff;
}

.story div p,
.guide p{
  width:100%;
  margin:0 auto;
  padding:10px 20px;
  font-size:120%;
  background-color: #000;
  color:#fff;
  border-left:3px solid #fff;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
}
.story a{
  display: none;
}
.guide a{
  display: block;
}
}