/*カード用*/
.cardwrap {
  overflow: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}
@media (max-width:999px) {
  .cardwrap {
    scroll-snap-type: x mandatory;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; /* スマホ対応のため必須 */
  }
}
.card {
  scroll-snap-align: start;
  height: 100vh;
  width: 100vw;
  flex: none;
}

/* swiper移植*/
.item{width:100%;height:100%;position: relative;}
.item .qus .num,.item .ans .num{display:block;text-align: center;padding:5px;color:#FFF;font-size:15px;}
.item .qus .num{background: #006e9c;}
.item .qus .num::before{content:"問題：";}
.item .ans .num{background: #df8282;}
.item .ans .num::before{content:"答え：";}

.item .ans .ttl{text-align: center;}
.item .ans .furi{text-align: center;}



.box{
  padding:0;
  margin:0;
  width: 100%;
  height:100%;
  display: block;
}
.box_inner{padding:0.5em 1em;overflow-y: auto;}
.box p{font-size :75% !important;margin:1em auto;border:1px solid #CCC;padding:1em;}

.num{text-align: center;color: #fff;width:100%;}
.num span{font-size:12px;margin:0 1em;}

.que .num{background:#006e9c;}
.ans .num{background:#df8282;}

.que .ttl {font-size: 24px;font-weight: bold;}
.que .furi{font-size: 12px;}
.que .txt {font-size: 18px;margin:1em 0;}

.ans .ttl {font-size: 24px;font-weight: bold;text-align: center;}
.ans .furi{font-size: 12px;text-align: center;}
.ans .txt {font-size: 18px;margin:1em 0;}
.ans .sub {font-size: 16px;margin:1em 0;}

.imgSet{width:100%;margin:1em auto;}
.imgSet img{object-fit: contain;width:100%;height:100%;}
.imgLeft{float:left;width:45%;margin:0em 0.5em 1em 0;}
.imgLeft img{object-fit: contain;width:100%;height:100%;}

/*スライダー*/
.swiper {
  margin: 0 auto;
  max-width: 700px;
  height: calc(100vh - 200px);
  overflow: hidden;
}
@media (max-width:840px) {
  .swiper {
    margin: 0 auto;
    width: 100%;
    height: calc(100vh - 200px);
    overflow: hidden;
  }
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}




/* プログレスバーの位置を下に移動 */
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal {
  bottom: 0;
  top: auto;
}



/*デフォルト修正*/
h1.entry-title{margin:0!important;}
main{padding:15px 10px;}

.que,.ans{display:block;width:100%;height:100%;position: absolute;}
.que{background:#FFF;}
.ans{ background-color: rgb(249, 238, 241);}

.que,.on .que{transition: all 0.2s ease-in-out;}
.ans,.on .ans{transition: all 0.2s ease-in-out;}
.item .que{opacity: 1;}
.item .ans{opacity: 0;transform:rotateX(-180deg); }
.item.on .que{transform:rotateX(180deg); opacity: 0;}
.item.on .ans{transform:rotateX(0deg); opacity: 1;}
/*戻ったときに暗くならない*/
.swiper-3d .swiper-slide-shadow {
  background: rgba(0,0,0,0);
  display: none!important;
}