@charset "UTF-8";

/* Scss Document */

.mW {
  margin: 0 10px;
}

@media screen and (max-width: 480px) {
  .mW {
    margin: 0 4%;
  }
}


/****************

  パーツ

****************/

.listWrap {
  margin: 70px 20px 0;
  padding: 0 0 2em 0;
}

@media screen and (max-width: 650px) {
  .listWrap {
    margin: 2em 20px 0;
    padding: 0;
  }
}

@media screen and (max-width: 480px) {
  .listWrap {
    margin: 1.5em 20px 0;
  }
}

.listWrap .mainTtl {
  font-size: 1.5rem;
  text-align: center;
  font-weight: 600;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  color: #2d2119
}

@media screen and (max-width: 650px) {
  .listWrap .mainTtl {
    font-size: 1.25rem;
  }
}

.listWrap .listBox {
  flex-wrap: wrap;
  margin-top: 20px;
}

@media screen and (max-width: 650px) {
  .listWrap .listBox {
    margin-top: 0.8em;
  }
}

@media screen and (max-width: 480px) {
  .listWrap .listBox {
    margin-top: 1.5em;
  }
}

.listWrap .listBox>li {
  width: 31.5%;
  margin: 0 0 2em 0;
}

@media screen and (max-width: 960px) {
  .listWrap .listBox>li {
    width: 48.5%;
  }
}

@media screen and (max-width: 650px) {
  .listWrap .listBox>li {
    width: 100%;
    margin: 0 0 2em 0;
  }
}

@media screen and (max-width: 480px) {
  .listWrap .listBox>li {
    margin: 0 0 1em 0;
  }
}

.listWrap .listBox>li a {
  display: block;
}

.listWrap .listBox>li .cover {
  position: relative;
}

.listWrap .listBox>li .cover .img::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 100%;
  /*画像の幅*/
  height: 100%;
  /*画像の高さ*/
  background: rgba(0, 0, 0, 0.6);
  background-size: contain;
  vertical-align: middle;
}
.listWrap .listBox>li .cover.vertical{
 text-align:center;
 background-size:cover;
 position:relative;
 overflow:hidden;
 z-index:0;
}
.listWrap .listBox>li .cover.vertical::before{
 content: '';
  background: inherit;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}
.listWrap .listBox>li .cover.vertical .img img{
 width:auto;
 height:178px;
}
.recommendBox.listWrap .listBox>li .cover.vertical .img img{
 height:226px;
}

.listWrap .listBox>li .cover .ttl {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border: 1px solid #fff;
  color: #fff;
  margin: 10px;
}

.listWrap .listBox>li .cover .ttl h3, .listWrap .listBox>li .cover .ttl h4 {
  font-weight: 400;
  font-style: normal;
  position: absolute;
  margin: 10px;
  bottom: 0;
  left: 0;
  font-family: yu-mincho-pr6, sans-serif;
}

@media screen and (max-width: 650px) {
  .listWrap .listBox>li .cover .ttl h3, .listWrap .listBox>li .cover .ttl h4 {
    font-size: 1.125rem;
  }
}

.listWrap .listBox>li .box {
  margin: 0.5em 0 0 0;
  align-items: flex-end;
  align-items: stretch;
}

@media screen and (max-width: 650px) {
  .listWrap .listBox>li .box {
    font-size: 1.0625rem;
    margin: 15px 10px 0;
  }
}

.listWrap .listBox>li .data {
  color: #2d2119;
  font-size: 0.875rem;
  line-height: 1em;
  font-family: lato;
  letter-spacing: .03rem;
}

@media screen and (max-width: 650px) {
  .listWrap .listBox>li .data {
    font-size: 1.0625rem;
  }
}

@media screen and (max-width: 480px) {
  .listWrap .listBox>li .data {
    font-size: 0.875rem;
  }
}

.listWrap .listBox>li .data::before {
  font-family: "Font Awesome 5 Free";
  content: '\f073';
  font-size: 12px;
  margin: 0 0.3em 0 0;
  vertical-align: top;
}

@media screen and (max-width: 650px) {
  .listWrap .listBox>li .data::before {
    font-size: 16px;
  }
}

.listWrap .listBox>li .cat {
  font-size: 0.725rem;
  letter-spacing: .08rem;
  font-weight: 700;
}

@media screen and (max-width: 650px) {
  .listWrap .listBox>li .cat {
    font-size: 0.8125rem;
  }
}

@media screen and (max-width: 480px) {
  .listWrap .listBox>li .cat {
    font-size: 0.725rem;
  }
}

.listWrap .listBox>li .tag {
  color: #666;
  font-size: 0.735rem;
  text-align: right;
  letter-spacing: -.40em;
  /* 文字間を詰めて隙間を削除する */
  line-height: 1.4em;
  /* タグ無し対策 */
  width:100%;
}

@media screen and (max-width: 650px) {
  .listWrap .listBox>li .tag {
    font-size: 0.93rem;
  }
}

@media screen and (max-width: 480px) {
  .listWrap .listBox>li .tag {
    font-size: 0.735rem;
  }
}

.listWrap .listBox>li .tag li {
  letter-spacing: normal;
  /* 文字間を通常に戻す */
  display: inline-block;
  letter-spacing: .035em;
  margin: 0 0 0 0.5em;
  border: 0;
}

.listWrap .listBox>li .tag li::before {}

.listWrap .listBox>li .shrink {
  flex-shrink: 0;
}

.listWrap .listBox::after {
  content: "";
  display: block;
  width: 30%;
}

.listWrap .btn {
  font-size: 1.1875rem;
  margin: 0.5em auto 0;
  text-align: center;
}

@media screen and (max-width: 650px) {
  .listWrap .btn {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 480px) {
  .listWrap .btn {
    font-size: .975rem;
  }
}

.listWrap .btn a {
  background: #D07046;
  color: #fff;
  display: inline-block;
  padding: 0.5em 1.5em;
}

@media screen and (max-width: 480px) {
  .listWrap .btn a {
    padding: 0.3em 1.5em;
  }
}

.listWrap .btn a::after {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 63px;
  /*画像の幅*/
  height: 9px;
  /*画像の高さ*/
  background-image: url("/common/images/v2/icon_arrow.svg");
  background-size: contain;
  vertical-align: middle;
  margin: 0 0 0 10px;
}


/*listWrap*/

figure .pageright {}

.paginationWrap {
  text-align: center;
  margin: 2em 0 0 0;
}

@media screen and (max-width: 750px) {
  .paginationWrap {
    margin: 2em 0 0 0;
    padding: 0 0 2em 0;
  }
}

@media screen and (max-width: 650px) {
  .paginationWrap {
    font-size: 0.75rem;
    margin: 1em 0 0 0;
    padding: 0 0 4em 0;
  }
}

@media screen and (max-width: 480px) {
  .paginationWrap {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
  }
}

.paginationWrap a, .paginationWrap span {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin: 0 4px 4px;
  line-height: 34px;
  text-align: center;
  text-decoration: none;
  background: #fff;
  color: #9F9F9F;
  transition: .3s;
  border: 1px solid #9F9F9F;
}

@media screen and (max-width: 650px) {
  .paginationWrap a, .paginationWrap span {
    margin: 0 4px 4px;
    width: 25px;
    height: 25px;
    line-height: 23px;
  }
}

.paginationWrap a:hover {
  background: #9F9F9F;
  color: #fff;
}

.paginationWrap .current {
  background: #9F9F9F;
  color: #fff;
}

.paginationWrap .prev, .paginationWrap .next {
  border: transparent 1px solid;
  width: auto;
  font-size: 1.1875rem;
  border: none;
  background: none;
  margin: 0 0 0 1em;
}

.paginationWrap .prev:hover, .paginationWrap .next:hover {
  background: none;
  color: #9F9F9F;
}

@media screen and (max-width: 650px) {
  .paginationWrap .prev, .paginationWrap .next {
    font-size: 0.875rem;
    margin: 0 0 0 1.5em;
  }
}

.paginationWrap .prev {
  margin: 0 1em 0 0;
}

@media screen and (max-width: 650px) {
  .paginationWrap .prev {
    margin: 0 1.5em 0 0;
  }
}

.paginationWrap .prev2, .paginationWrap .next2 {
  border: transparent 1px solid;
  width: auto;
  font-size: 1.1875rem;
  border: none;
  background: none;
  margin: 0 0 0 1em;
}

.paginationWrap .prev2:hover, .paginationWrap .next2:hover {
  background: none;
  color: #9F9F9F;
}

@media screen and (max-width: 650px) {
  .paginationWrap .prev2, .paginationWrap .next2 {
    font-size: 0.875rem;
    margin: 0 0 0 0.5em;
  }
}

.paginationWrap .prev2 {
  margin: 0 1em 0 0;
}

@media screen and (max-width: 650px) {
  .paginationWrap .prev2 {
    margin: 0 0.5em 0 0;
  }
}


/*paginationWrap*/


/****************

  トップページ

****************/

#top {
  /*スライドショー*/
  /*.swiper-container*/
}

#top .swiper-container {
  width: 100%;
}

#top .swiper-container .btnBox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 960px;
  margin: auto;
}

#top .swiper-container .btnBox .swiper-button-prev {
  background: rgb(255 255 255 / 0.6);
  width: 47px;
  height: 47px;
  color: #000;
  left: 0;
  border: 1px solid rgb(0 0 0 / 0.4);
}
#top .swiper-container .vertical{
 text-align:center;
 position:relative;
 z-index:0;
 overflow: hidden;
}
#top .swiper-container .vertical::before{
 content: '';
  background: inherit;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: -1;
}
#top .swiper-container .vertical img{
 width:auto;
 height:504px;
}
@media screen and (max-width: 480px) {
 #top .swiper-container .vertical img{
 height:197px;
}
}

@media screen and (max-width: 480px) {
  #top .swiper-container .btnBox .swiper-button-prev {
    width: 25px;
    height: 25px;
  }
}

#top .swiper-container .btnBox .swiper-button-prev::after {
  font-size: 17px;
  font-weight: bold;
}

@media screen and (max-width: 480px) {
  #top .swiper-container .btnBox .swiper-button-prev::after {
    font-size: 11px;
  }
}

#top .swiper-container .btnBox .swiper-button-next {
  background: rgb(255 255 255 / 0.6);
  width: 47px;
  height: 47px;
  color: #000;
  right: 0;
  border: 1px solid rgb(0 0 0 / 0.4);
}

@media screen and (max-width: 480px) {
  #top .swiper-container .btnBox .swiper-button-next {
    width: 25px;
    height: 25px;
  }
}

#top .swiper-container .btnBox .swiper-button-next::after {
  font-size: 17px;
  font-weight: bold;
}

@media screen and (max-width: 480px) {
  #top .swiper-container .btnBox .swiper-button-next::after {
    font-size: 11px;
  }
}

#top .swiper-container .txt {
  display: none;
  color: #000;
  font-family: yu-mincho-pr6, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.25rem;
  margin: 1em 2% 0;
}

@media screen and (max-width: 650px) {
  #top .swiper-container .txt {
    display: block;
  }
}

#top .swiper-container .swiper-slide {
  background-position: center;
  background-size: cover;
  max-width: 960px;
  max-height: 504px;
  opacity: 0.5;
}
@media screen and (max-width: 480px){
#top .swiper-container .swiper-slide {
 max-height: 197px;
 }
}

#top .swiper-container .swiper-slide-active {
  opacity: 1;
}

#top .swiper-container .swiper-pagination {
  bottom: 10px !important;
}

#top .swiper-container .swiper-pagination .swiper-pagination-bullet {
  background: #fff;
  width: 19px;
  height: 19px;
  opacity: 1;
  border: 1px solid #707070;
}

@media screen and (max-width: 650px) {
  #top .swiper-container .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
  }
}

@media screen and (max-width: 480px) {
  #top .swiper-container .swiper-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
  }
}

#top .swiper-container .swiper-pagination .swiper-pagination-bullet:hover {
  background: #707070;
}

#top .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
  background: #707070;
}

#top .swiper-container .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 6px;
}

#top .swiper-container .swiper-pagination-fraction, #top .swiper-container .swiper-pagination-custom, #top .swiper-container .swiper-container-horizontal>.swiper-pagination-bullets {
  bottom: 60px;
}

#top .navPickup {
  margin: 40px 20px 0;
}

@media screen and (max-width: 650px) {
  #top .navPickup {
    margin: 20px 20px 0;
  }
}

#top .navPickup ul {
  margin: 0 auto;
}

@media screen and (max-width: 750px) {
  #top .navPickup ul {
    justify-content: center;
  }
}

#top .navPickup li {
  width: 30%;
  font-size: 1.125rem;
  letter-spacing: .04em;
}

#top .navPickup li:first-child {
  margin-left: 0
}

#top .navPickup li {
  margin: 3% 0 0 2%
}

@media screen and (max-width: 750px) {
  #top .navPickup li {
    font-size: 0.75rem;
    line-height: 1.5em;
    width: 45%;
  }
}

@media screen and (max-width: 650px) {
  #top .navPickup li {
    width: 47%;
  }
}

@media screen and (max-width: 480px) {
  #top .navPickup li {
    width: 97%;
  }
  #top .navPickup li {
    margin: 0 0 0 1%
  }
}

@media screen and (max-width: 320px) {
  #top .navPickup li {
    width: 90%;
  }
}

#top .navPickup li>a {
  display: block;
  color: #FFF;
  box-shadow: 2px 3px 9px 0px rgba(0, 0, 0, 0.2);
  background-color: #FFF;
  border-radius: 2px
}

#top .navPickup li a>.txt {
  padding: 7%;
  font-size: .975rem;
  color: #252525;
  font-weight: 600;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 750px) {
  #top .navPickup li a>.txt {
    padding: 20px 15px 80px;
  }
}

@media screen and (max-width:480px) {
  #top .navPickup li a>.txt {
    display: none
  }
}

#top .navPickup li.writersBox a>.ttl {
  background-color: #ff9c00;
  background-image: linear-gradient(225deg, #ff9c00 6%, #d07046 34%, #6e7b23 65%, #5e535d 100%);
}

#top .navPickup li.storiesBox a>.ttl {
  background-color: #ff6b35;
  background-image: linear-gradient(43deg, #ff6b35 6%, #bd6856 55%, #C850C0 100%);
}

#top .navPickup li.prizeBox a>.ttl {
  background-color: #a40e4c;
  background-image: linear-gradient(225deg, #7d0838 17%, #a04397 55%, #3e83a9 93%);
}

#top .navPickup li a>.ttl {
  margin: 3% auto 0;
  padding: 2%;
}

#top .navPickup li a>.ttl span {
  font-size: 2.325rem;
  font-weight: 400;
  font-family: 'yu-mincho-pr6', sans-serif;
}


/*#top*/


/****************

  一覧 archives

****************/

@media screen and (max-width: 750px) {
  #archives .mainWrap {
    background: #F7F7F7;
  }
}

#archives .listWrap {
  margin: 0 20px 0;
}

#archives .listWrap .mainTtl {
  padding-top: 40px;
}

@media screen and (max-width: 650px) {
  #archives .listWrap .mainTtl {
    font-size: 1.25rem;
    padding-top: 30px;
  }
}

#archives .listWrap .listBox {
  margin-top: 40px;
}

@media screen and (max-width: 650px) {
  #archives .listWrap .listBox {
    margin-top: 30px;
  }
}


/*archives*/


/****************

  著者を知る writers ほかカテゴリトップ

****************/

@media screen and (max-width: 750px) {
  .CatePickup .mainWrap {
    background: #F7F7F7;
  }
}

@media screen and (max-width: 650px) {
  .CatePickup .mainWrap {
    padding-bottom: 40px;
  }
}

.CatePickup .firstWrap {
  text-align: center;
}

.CatePickup .firstWrap .mainTtl {
  padding: 1.5em 0 0 0;
  font-size: 2.3475rem;
  font-weight: 700;
}

@media screen and (max-width: 650px) {
  .CatePickup .firstWrap .mainTtl {
    font-size: 1.9375rem;
  }
}

@media screen and (max-width: 480px) {
  .CatePickup .firstWrap .mainTtl {
    font-size: 1.5rem;
  }
}

.CatePickup .firstWrap .catBox {
  max-width: 700px;
  margin: 2em auto 0;
  line-height: 1.7em;
}

@media screen and (max-width: 650px) {
  .CatePickup .firstWrap .catBox {
    margin: 1.5em auto 0;
  }
}

@media screen and (max-width: 480px) {
  .CatePickup .firstWrap .catBox {
    margin: 1em auto 0;
  }
}

.CatePickup .firstWrap .catBox li {
  display: inline-block;
  font-size: 1.675rem;
}

@media screen and (max-width: 650px) {
  .CatePickup .firstWrap .catBox li {
    font-size: 1.1125rem;
  }
}

@media screen and (max-width: 480px) {
  .CatePickup .firstWrap .catBox li {
    font-size: 0.975rem;
  }
}

.CatePickup .firstWrap .catBox li a {
  font-weight: 700;
  color: #000;
}

.CatePickup .firstWrap .tagBox {
  max-width: 765px;
  margin: 2em auto 1em;
  text-align: left;
}

@media screen and (max-width: 650px) {
  .CatePickup .firstWrap .tagBox {
    width: 90%;
    margin: 1em auto 1em;
  }
}

@media screen and (max-width: 480px) {
  .CatePickup .firstWrap .tagBox {
    margin: 0.5em auto 1em;
  }
}

.CatePickup .firstWrap .tagBox li {
  margin: 0 .825em 0.5em 0;
  line-height: .725em;
  display: inline-block;
  font-size: .925rem;
}

@media screen and (max-width: 650px) {
  .CatePickup .firstWrap .tagBox li {
    font-size: 1.125rem;
    margin: 0 1em 0.3em 0;
  }
}

@media screen and (max-width: 480px) {
  .CatePickup .firstWrap .tagBox li {
    font-size: 0.925rem;
    margin: 0 0.3em 0 0;
    line-height: 1rem;
  }
}

.CatePickup .firstWrap .tagBox li a {
  color: #8F8F8F;
}

.CatePickup .bnr {
  margin: 0 auto;
  max-width: 760px;
}

.CatePickup .listWrap {
  margin: 0 20px 0;
}

#archives h2.mainTtl {
  font-size: 1.875rem;
  padding-top: 3em;
  font-weight: 600;
  text-align: center
}

@media screen and (max-width: 650px) {
  #archives h2.mainTtl {
    font-size: 1.675rem;
    padding-top: 1em;
  }
}

.CatePickup .listWrap .mainTtl {
  padding-top: 3em;
}

@media screen and (max-width: 650px) {
  .CatePickup .listWrap .mainTtl {
    font-size: 1.625rem;
    padding-top: 1.5em;
  }
}

@media screen and (max-width: 480px) {
  .CatePickup .listWrap .mainTtl {
    font-size: 1.25rem;
    padding-top: 3em;
  }
}

.CatePickup .listWrap .listBox {
  margin-top: 1.5em;
}

@media screen and (max-width: 650px) {
  .CatePickup .listWrap .listBox {
    margin-top: 30px;
  }
}

@media screen and (max-width: 480px) {
  .CatePickup .listWrap .listBox {
    margin-top: 1.5em;
  }
}

#magInfoWrap {
  margin: 0 20px 0;
  text-align: center;
}

#authorProfWrap {
  margin: 0 auto;
  text-align: left;
  max-width: 50%;
}

@media screen and (max-width: 960px) {
  #authorProfWrap {
    max-width: 80%;
  }
}

@media screen and (max-width: 650px) {
  #authorProfWrap {
    max-width: 90%;
  }
}

#magInfoWrap .mainTtl, #authorProfWrap .mainTtl {
  padding-top: 2em;
  font-size: 1.5rem;
  text-align: center;
  font-weight: bold;
}

#authorProfWrap .mainTtl {
  padding: 2em 0 1em
}

@media screen and (max-width: 650px) {
  #magInfoWrap .mainTtl, #authorProfWrap .mainTtl {
    font-size: 1.5rem;
    padding-top: 2em;
  }
}

@media screen and (max-width: 480px) {
  #magInfoWrap .mainTtl, #authorProfWrap .mainTtl {
    font-size: 1.25rem;
  }
}

#magInfoWrap .listBox {
  justify-content: center;
  margin-top: 1.5em;
}

@media screen and (max-width: 650px) {
  #magInfoWrap .listBox {
    margin-top: 30px;
    justify-content: space-between;
  }
}

@media screen and (max-width: 480px) {
  #magInfoWrap .listBox {
    margin-top: 1.5em;
  }
}

#magInfoWrap .listBox li {
  max-width: 170px;
  margin: 0 0.8em;
}

@media screen and (max-width: 650px) {
  #magInfoWrap .listBox li {
    margin: 0 auto;
    width: 31%;
  }
}

#magInfoWrap .listBox .img a {
  border: 1px solid #707070;
  display: block;
}

#magInfoWrap .listBox .txt {
  margin-top: 0.3em;
  font-size: 0.9375rem;
}

@media screen and (max-width: 480px) {
  #magInfoWrap .listBox .txt {
    font-size: 0.75rem;
  }
}

#magInfoWrap .listBox .txt a {
  color: #8F8F8F;
}


/*writers*/

#authorProfWrap .listBox li.authorName_ud {
  width: 40%;
  margin: 0 0.8em;
  font-size: 1.4rem;
  text-align: right
}

@media screen and (max-width: 480px) {
  #authorProfWrap .listBox {
    display: block
  }
  #authorProfWrap .listBox li.authorName_ud {
    width: auto;
    text-align: center;
    margin-bottom: 3%
  }
}

#authorProfWrap .listBox li.authorName_ud span+span {
  font-size: 0.925rem;
  display: block
}

#authorProfWrap .listBox li.authorProf_ud {
  text-align: left
}

@media screen and (max-width: 480px) {
  #authorProfWrap .listBox li.authorProf_ud {
    font-size: .85rem
  }
  #authorProfWrap .listBox li.authorName_ud span+span {
    font-size: 0.725rem;
  }
}


/****************

  投稿 detail

****************/

#detail {
  /*snsBox*/
  /*ttlBox*/
  /*contentsBox*/
}

@media screen and (max-width: 750px) {
  #detail .mainWrap {
    background: #F7F7F7;
    padding: 0 0 30px;
  }
}

@media screen and (max-width: 480px) {
  #detail .mainWrap {
    padding: 92px 0 0 0;
  }
}

#detail .snsBox {
  margin: 1em 0 0 0;
  text-align: right;
}

@media screen and (max-width: 1130px) {
  #detail .snsBox {
    margin-right: 5%;
    margin-left: 5%;
  }
}

#detail .snsBox li {
  display: inline-block;
  margin: 0 0 0 1em;
  line-height: 1em;
}

@media screen and (max-width: 480px) {
  #detail .snsBox li {
    margin: 0 0 0 0.5em;
  }
}

#detail .snsBox li a {
  display: block;
}

#detail .snsBox li span {
  display: none;
  font-size: 0.75rem;
  color: #5A5A5A;
  vertical-align: text-top;
  margin: 0 0 0 0.5em;
}

@media screen and (max-width: 650px) {
  #detail .snsBox li span {
    font-size: 0.5rem;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
}

@media screen and (max-width: 480px) {
  #detail .snsBox li span {
    vertical-align: 6px;
    font-size: 0.4375rem;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
}

#detail .snsBox li a i {
  font-size: 28px;
  color: #5A5A5A;
}

@media screen and (max-width: 650px) {
  #detail .snsBox li a i {
    font-size: 25px;
  }
}

@media screen and (max-width: 480px) {
  #detail .snsBox li a i {
    font-size: 20px;
  }
}

#detail .snsBox li:nth-of-type(1) span {
  display: inline;
}

#detail .snsBox li:nth-of-type(5) a::before {
  position: relative;
  content: '';
  display: inline-block;
  width: 25px;
  height: 28px;
  top: 4px;
  background: url("/common/images/v2/icon_note.svg") no-repeat;
  background-size: contain;
}

@media screen and (max-width: 650px) {
  #detail .snsBox li:nth-of-type(5) a::before {
    width: 22px;
    height: 24px;
  }
}

@media screen and (max-width: 480px) {
  #detail .snsBox li:nth-of-type(5) a::before {
    width: 17px;
    height: 20px;
  }
}

#detail .mW .snsBox {
  margin: 1em 0 4em 0;
}

@media screen and (max-width: 650px) {
  #detail .mW .snsBox {
    margin: 1em 0 1.5em 0;
   width: 98%;
  }
}

#detail .ttlBox {
  padding: 0 1.5% 15px;
  border-bottom: 1px solid #E8E8E8;
}

#detail .ttlBox .data {
  margin: 1em 0 0 0;
  color: #8F8F8F;
  font-size: 1.275rem;
}

#detail .ttlBox li {
  display: inline
}

#detail .ttlBox li span {
  padding-left: .85em;
  letter-spacing: .15rem;
  font-weight: 600
}

@media screen and (max-width: 650px) {
  #detail .ttlBox .data {
    margin: 0.3em 0 0 0;
    font-size: 1.025rem;
  }
}

@media screen and (max-width: 480px) {
  #detail .ttlBox .data {
    font-size: 0.875rem;
  }
}

#detail .ttlBox .data::before {
  font-size: 20px;
  vertical-align: top;
  font-family: "Font Awesome 5 Free";
  content: '\f073';
  margin: 0 0.3em 0 0;
}

@media screen and (max-width: 650px) {
  #detail .ttlBox .data::before {
    font-size: 17px;
  }
}

#detail .ttlBox h1.mainTtl {
  margin: 1.5em 0;
  font-size: 1.875rem;
  font-family: serif;
  font-weight: bold;
  line-height: 1.2em;
  font-family: yu-mincho-pr6, sans-serif;
  font-weight: 400;
  font-style: normal;
}

@media screen and (max-width: 650px) {
  #detail .ttlBox h1.mainTtl {
    margin: 0.5em 0 1.5em;
    line-height: 1.4em;
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 480px) {
  #detail .ttlBox h1.mainTtl {
    margin: 0.3em 0 0.3em;
    font-size: 1.25rem;
  }
}

#detail .ttlBox .author, #detail .ttlBox .author a {
  font-size: 1.25rem;
  font-weight: bold;
  color: #000;
}

@media screen and (max-width: 650px) {
  #detail .ttlBox .author, #detail .ttlBox .author a {
    font-size: 1.125rem;
  }
}

#detail .ttlBox .variousTxt {
  color: #5A5A5A;
  margin: 1em 0 0 0;
  font-size: 1.125rem;
  font-weight: 700;
}

@media screen and (max-width: 650px) {
  #detail .ttlBox .variousTxt {
    margin: 0.5em 0 0 0;
    font-size: 0.9375rem;
  }
}

#detail .ttlBox .variousTxt2 {
  color: #8F8F8F;
  margin: 0.5em 0 0 0;
}

@media screen and (max-width: 650px) {
  #detail .ttlBox .variousTxt2 {
    margin: 1em 0 0 0;
    line-height: 1.3em;
    font-size: 0.875rem;
  }
}

#detail .contentsBox {
  background: #fff;
  margin: 40px 0 0 0;
  padding: 0 0 40px;
  overflow: hidden;
  /*search*/
  /*contents*/
}

@media screen and (max-width: 650px) {
  #detail .contentsBox {
    margin: 20px 0 0 0;
    padding: 0 0 30px;
  }
}

@media screen and (max-width: 480px) {
  #detail .contentsBox {
    padding: 0 0 20px;
  }
}

#detail .contentsBox .search {
  margin: 0 2% 0;
  padding: 2em 0 0 0;
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .search {
    margin: 0 3%;
    padding: 1.5em 0 0 0;
  }
}

#detail .contentsBox .search::before {
  float: left;
  position: relative;
  top: 2px;
  content: '\f00e';
  color: #8F8F8F;
  font-size: 27px;
  font-family: "fontawesome";
}

#detail .contentsBox .search ul {
  padding: 0 0 0 40px;
}

#detail .contentsBox .search li {
  display: inline-block;
  margin: 0 0.3em 0.5em 0;
}

#detail .contentsBox .search li a {
  line-height: 1em;
  background: #8F8F8F;
  border-radius: 3px;
  color: #fff;
  font-size: 0.875rem;
  padding: 0.1em 0.5em;
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .search li a {
    font-size: 0.9375rem;
  }
}

#detail .contentsBox .contents {
  margin: 40px 5% 0;
  font-size: 1.25rem;
  color: #48403E;
  line-height: 2em;
  word-break: break-all;
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .contents {
    font-size: 1rem;
  }
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .contents {
    margin: 0 5% 0;
    line-height: 1.9em;
  }
}
#detail .contentsBox .btnNext a,
#detail .contentsBox .contents a {
  color: #D07046;
}

#detail .contentsBox .contents .imgphotobox {
  margin-top: 1.5em;
  margin-bottom: 1em;
  max-width: 40%;
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .contents .imgphotobox {
    margin-top: 2em;
    margin-bottom: 2em;
    max-width: 45%
  }
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .contents .imgphotobox {
    max-width: 80%
  }
}

#detail .contentsBox .contents .imgphotobox figcaption {
  font-size: 0.9125rem;
  margin: 1em 0 0 0;
  line-height: 1.2em;
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .contents .imgphotobox figcaption {
    font-size: 0.725rem;
  }
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .contents .imgphotobox figcaption {
    margin: 1% auto;
  }
}

#detail .contentsBox .contents .pageright {
  float: right;
  margin: 0 0 0 3em;
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .contents .pageright {
    float: none;
    margin: 5% auto 1%
  }
}

#detail .contentsBox .contents .pageleft {
  float: left;
  margin: 0 3em 0 0;
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .contents .pageleft {
    float: none;
    margin: 5% auto 1%
  }
}

#detail .contentsBox .contents .imgBox {
  width: 100%;
  margin: 0
}

#detail .contentsBox .contents .book {
  text-align: center;
  max-width: 300px;
  margin: 2% auto;
  width:100%;
}

#detail .contentsBox .contents .book img{
border:1px solid #dedede;
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .contents .book {
    margin-top: 2em;
    margin-bottom: 3em;
  }
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .contents .book {
    width: 80%;
    margin-bottom: 1em;
  }
}

#detail .contentsBox .contents figcaption {
  font-size: 0.9125rem;
  line-height: 1.5
}


  #detail .contentsBox .contents figcaption {
    text-align: left;

}

#detail .contentsBox .contents p {
  margin: 2em 0 0 0;
  font-size: 1.15rem;
  line-height: 1.8;
  letter-spacing: .03rem;
  color: #48403e
}

#detail .contentsBox .contents p.summary {
  border-bottom: 1px dotted #BDBDBD;
  padding-bottom: 2%
}

@media screen and (max-width: 960px) {
  #detail .contentsBox .contents p {
    font-size: 1rem;
  }
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .contents p {
    font-size: .985rem;
    line-height: 1.825
  }
}
#detail.static h2 {
  font-weight: 600;
  font-size: 2rem;
  color: #000;
  margin: 2em 0 0 0;
  display: block;
}
@media screen and (max-width: 650px) {
  #detail.static h2 {
    margin: 2em auto 0;
    width: 90%;
  }
}

#detail .contentsBox .contents h2 {
  font-weight: 600;
  font-size: 1.625rem;
  color: #000;
  margin: 2em 0 0 0;
}


#detail .contentsBox .contents h3 {
  font-weight: 600;
  font-size: 1.5rem;
  color: #000;
  margin: 2em 0 0 0;
}

#detail .contentsBox .contents h4 {
  font-weight: 600;
  font-size: 1.375rem;
  color: #000;
  margin: 1.6em 0 0 0;
}

#detail .contentsBox .contents h5 {
  border-left: solid 5px #2c2c2c;
  padding-left: 10px;
  font-size: 1.175rem;
  margin: 0.6em 0 0 0;
  color: #000
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .contents h2 {
    font-size: 1.5rem;
  }
  #detail .contentsBox .contents h3 {
    font-size: 1.25rem;
  }
  #detail .contentsBox .contents h4 {
    font-size: 0.925rem;
  }
  #detail .contentsBox .contents h5 {
    font-size: 0.825rem;
  }
}
.books-information,
#detail .amazonBox {
  border: 1px solid #ddd;
  margin: 1em 0;
  clear:both;
}
.books-information,
#detail .amazonBox .infobox {
  padding: 3%
}
#detail .contentsBox .contents .books-information .figure-left,
#detail .amazonBox .infobox .img {
  width: 20%;
  margin: 0 3% 0 0
}

@media screen and (max-width: 320px) {
  #detail .amazonBox .infobox .img {
    margin: 0 auto 1%
  }
}

@media screen and (max-width: 750px) {
  #detail .amazonBox .infobox .img {
    width: 25%;
  }
}

@media screen and (max-width: 480px) {
  #detail .amazonBox .infobox .img {
    width: 40%;
  }
}

@media screen and (max-width: 320px) {
  #detail .amazonBox .infobox {
    display: inline-block;
    flex-wrap: wrap;
    justify-content: center
  }
  #detail .amazonBox .infobox .img {
    width: 40%;
  }
}

#detail .contentsBox .books-information h5{
  text-align:left;
  border-left:none;
  padding: 0;
}

#detail .amazonBox .textside {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}
#detail .contentsBox .books-information h5,
#detail .amazonBox .textside p {
  margin: 0 0 1em 0
}

@media screen and (max-width: 320px) {
#detail .contentsBox .books-information h5,
#detail .amazonBox .textside p {
    margin: 0 0 .575em 0
  }
}
#detail .contentsBox .books-information h5,
#detail .amazonBox .textside p.title {
  font-size: 1.675rem;
  font-weight: 600
}

@media screen and (max-width: 320px) {
#detail .contentsBox .books-information h5,
  #detail .amazonBox .textside p.title {
    font-size: 1.275rem;
  }
}

#detail .amazonBox .btn {
  font-size: 1.1875rem;
  margin: .5em auto 0;
  text-align: left
}

#detail .amazonBox .btn a {
  background: #d07046;
  color: #fff;
  display: inline-block;
  margin: 0 3% 3%;
  padding: .5em 1.5em
}

#detail .amazonBox .btn a:after {
  content: '';
  display: inline-block;
  content: '\f270';
  font-family: "fontawesome";
  background-size: contain;
  vertical-align: middle;
  margin: 0 0 0 10px
}


/*amazon*/

#detail .contentsBox .bookinfoBox {
  margin: 40px 5% 0;
  padding: 3%;
  border: 1px solid #9F9F9F;
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox {
    margin: 30px 3% 0;
    padding: 2%;
  }
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .bookinfoBox {
    margin: 20px 1% 0;
    padding: 4% 2%;
    display: inline-block;
  
  }
}

#detail .contentsBox .bookinfoBox .bookcover{
  width: 34%;
  max-width: 300px;
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookcover {}
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .bookinfoBox .bookcover{
    width: 70%;
    margin: 5% auto
  }
}

#detail .contentsBox .bookinfoBox .bookcover img{
  display: block;
  border: 1px solid #dedede;
}

#detail .contentsBox .bookinfoBox .bookdetail {
  display: inline-block;
  width: 62%;
  margin-left: 3%;
  vertical-align: top
}

@media screen and (max-width: 960px) {
  #detail .contentsBox .bookinfoBox .bookdetail {
    width: 68%;
  }
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookdetail {
    margin-left: 3%;
  }
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .bookinfoBox .bookdetail {
    display: block;
    width: 100%;
    margin: 0 auto 3%;
  }
  #detail .contentsBox .bookinfoBox .bookdetail .common-detail {
    padding: 3%
  }
  @media screen and (max-width: 650px) {}
  @media screen and (max-width: 480px) {
    #detail .contentsBox .bookinfoBox .bookdetail .common-detail {}
  }
}

#detail .contentsBox .bookinfoBox .bookdetail h5.bookttl {
  font-size: 220%;
  margin: 1% 0;
  line-height: 1.2
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookdetail h5.bookttl {
    font-size: 180%;
  }
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .bookinfoBox .bookdetail h5.bookttl {
    font-size: 200%;
  }
}

#detail .contentsBox .bookinfoBox .bookdetail div.bookauthor {
  font-size: 1.25rem;
  font-weight: 600;
  color: #9F9F9F;
  line-height: 1.25
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookdetail div.bookauthor {
    font-size: 0.975rem;
    line-height: 1.25
  }
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .bookinfoBox .bookdetail div.bookauthor {
    font-size: 1.125rem;
  }
}

#detail .contentsBox .bookinfoBox .bookdetail .bookdata .data {
  margin: 3% 0
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookdetail .bookdata .data {
    margin: 6% 0;
    font-size: 0.885rem;
    line-height: 1.25;
  }
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .bookinfoBox .bookdetail .bookdata .data {
    margin: 3% 0;
    font-size: 1.0125rem;
    line-height: 1.44;
  }
}

#detail .contentsBox .bookinfoBox .bookdetail .bookdata .data span {
  margin-right: 3%;
  font-weight: bold;
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookdetail .bookdata .data span {
    margin-right: 4%
  }
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .bookinfoBox .bookdetail .bookdata .data span {
    display: block
  }
}

#detail .contentsBox .bookinfoBox .bookdetail .btn {
  font-size: 1.1875rem;
  margin: .5em auto 0;
  text-align: left
}

@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookdetail .btn {
    font-size: 1.125rem;
    margin: .25em auto 0;
  }
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .bookinfoBox .bookdetail .btn {}
}

#detail .contentsBox .bookinfoBox .bookdetail .btn a {
  background: #d07046;
  color: #fff;
  display: inline-block;
  margin: 0 2% 0 0;
  padding: .5em 1.5em;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 750px) {
  #detail .contentsBox .bookinfoBox .bookdetail .btn a {
    padding: .5em 1em;
  width: calc(100% - 2em);
  }
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .bookinfoBox .bookdetail .btn a {
    display: block;
    margin: 3% auto;
    font-size: 90%;
  
  
  }
}



@media screen and (max-width: 480px) {}
#detail .contentsBox .bookinfoBox .bookdetail .btn a:after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(/common/images/v2/icon_link.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin: 0 0 0 10px
}
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookdetail .btn a:after {
    width: 15px;
    height: 15px;
    margin: 0 0 0 5px
  }
}
@media screen and (max-width: 480px) {}
#detail .contentsBox .bookinfoBox .bookshop {
  margin: 5% 0;
}
@media screen and (max-width: 480px) {
  #detail .contentsBox .bookinfoBox .bookshop {
    margin: 5% auto 3%;
  }
}
#detail .contentsBox .bookinfoBox .bookshop ul.flex {
  margin: 0 auto;
  justify-content: center;
  align-items: flex-start;
}
#detail .contentsBox .bookinfoBox .bookshop li {
  margin: 0 1% 1%
}
#detail .contentsBox .bookinfoBox .bookshop li a {
  display: block;
  text-indent: -200%;
  width: 156px;
  height: 50px;
  overflow: hidden;
  background: url(/common/images/v2/btns.png) no-repeat
}
@media screen and (max-width: 960px) {
  #detail .contentsBox .bookinfoBox .bookshop li a {
    width: 156px;
    height: 50px;
  }
}

/*@media screen and (max-width: 903px) {
  #detail .contentsBox .bookinfoBox .bookshop li a{width: 156px; height:50px;}}*/
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li a {
    width: 140px;
    height: 50px;
  }
}
@media screen and (max-width: 480px) {
  #detail .contentsBox .bookinfoBox .bookshop li a {}
}
#detail .contentsBox .bookinfoBox .bookshop li.amazon a {
  background-position: 0 -207px;
}

/*@media screen and (max-width: 960px) {#detail .contentsBox .bookinfoBox .bookshop li.amazon a{background-position:0 0  }}*/
@media screen and (max-width: 960px) {
  #detail .contentsBox .bookinfoBox .bookshop li.amazon a {
    background-position: 0 -207px
  }
}

/*@media screen and (max-width: 903px) {#detail .contentsBox .bookinfoBox .bookshop li.amazon a{background-position: 0 -207px}}*/
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.amazon a {
    background-position: 0 -414px
  }
}

/*@media screen and (max-width: 480px) {#detail .contentsBox .bookinfoBox .bookshop li.amazon a{background-position:0 0}}*/
#detail .contentsBox .bookinfoBox .bookshop li.rakutenb a {
  background-position: -498px -207px;
}

/*@media screen and (max-width: 960px) {#detail .contentsBox .bookinfoBox .bookshop li.rakutenb a{background-position:-651px 0  }}*/
@media screen and (max-width: 960px) {
  #detail .contentsBox .bookinfoBox .bookshop li.rakutenb a {
    background-position: -498px -207px
  }
}

/*@media screen and (max-width: 903px) {#detail .contentsBox .bookinfoBox .bookshop li.rakutenb a{background-position: -498px -207px}}*/
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.rakutenb a {
    background-position: -450px -414px
  }
}

/*@media screen and (max-width: 480px) {#detail .contentsBox .bookinfoBox .bookshop li.rakutenb a{background-position:-651px 0}}*/
#detail .contentsBox .bookinfoBox .bookshop li.sven a {
  background-position: -664px -207px;
}

/*@media screen and (max-width: 960px) {#detail .contentsBox .bookinfoBox .bookshop li.sven a{background-position:-868px 0  }}*/
@media screen and (max-width: 960px) {
  #detail .contentsBox .bookinfoBox .bookshop li.sven a {
    background-position: -664px -207px
  }
}

/*@media screen and (max-width: 903px) {#detail .contentsBox .bookinfoBox .bookshop li.sven a{background-position: -664px -207px}}*/
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.sven a {
    background-position: -600px -414px
  }
}

/*@media screen and (max-width: 480px) {#detail .contentsBox .bookinfoBox .bookshop li.sven a{background-position:-868px 0}}*/
#detail .contentsBox .bookinfoBox .bookshop li.kinokuniya a {
  background-position: -332px -276px;
}

/*@media screen and (max-width: 960px) {#detail .contentsBox .bookinfoBox .bookshop li.kinokuniya a{background-position:-868px -69px  }}*/
@media screen and (max-width: 960px) {
  #detail .contentsBox .bookinfoBox .bookshop li.kinokuniya a {
    background-position: -332px -276px
  }
}

/*@media screen and (max-width: 903px) {#detail .contentsBox .bookinfoBox .bookshop li.kinokuniya a{background-position: -332px -276px}}*/
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.kinokuniya a {
    background-position: -300px -473px
  }
}

/*@media screen and (max-width: 480px) {#detail .contentsBox .bookinfoBox .bookshop li.kinokuniya a{background-position:-868px -69px}}*/
#detail .contentsBox .bookinfoBox .bookshop li.tsutaya a {
  background-position: -166px -345px;
}

/*@media screen and (max-width: 960px) {#detail .contentsBox .bookinfoBox .bookshop li.tsutaya a{background-position:-1085px -138px  }}*/
@media screen and (max-width: 960px) {
  #detail .contentsBox .bookinfoBox .bookshop li.tsutaya a {
    background-position: -166px -345px
  }
}

/*@media screen and (max-width: 903px) {#detail .contentsBox .bookinfoBox .bookshop li.tsutaya a{background-position: -166px -345px}}*/
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.tsutaya a {
    background-position: -150px -532px
  }
}

/*@media screen and (max-width: 480px) {#detail .contentsBox .bookinfoBox .bookshop li.tsutaya a{background-position:-1085px -138px}}*/
#detail .contentsBox .bookinfoBox .bookshop li.ehon a {
  background-position: -830px -207px;
}

/*@media screen and (max-width: 960px) {#detail .contentsBox .bookinfoBox .bookshop li.ehon a{background-position:0px -69px  }}*/
@media screen and (max-width: 960px) {
  #detail .contentsBox .bookinfoBox .bookshop li.ehon a {
    background-position: -830px -207px
  }
}

/*@media screen and (max-width: 903px) {#detail .contentsBox .bookinfoBox .bookshop li.ehon a{background-position: -830px -207px}}*/
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.ehon a {
    background-position: -750px -414px
  }
}

/*@media screen and (max-width: 480px) {#detail .contentsBox .bookinfoBox .bookshop li.ehon a{background-position:0px -69px}}*/
#detail .contentsBox .bookinfoBox .bookshop li.honyaclub a {
  background-position: -332px -345px;
}

/*@media screen and (max-width: 960px) {#detail .contentsBox .bookinfoBox .bookshop li.honyaclub a{background-position:-1085px -69px  }}*/
@media screen and (max-width: 960px) {
  #detail .contentsBox .bookinfoBox .bookshop li.honyaclub a {
    background-position: -332px -345px
  }
}

/*@media screen and (max-width: 903px) {#detail .contentsBox .bookinfoBox .bookshop li.honyaclub a{background-position: -332px -345px}}*/
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.honyaclub a {
    background-position: -300px -532px
  }
}

/*@media screen and (max-width: 480px) {#detail .contentsBox .bookinfoBox .bookshop li.honyaclub a{background-position:-1085px -69px}}*/
#detail .contentsBox .bookinfoBox .bookshop li.honto a {
  background-position: 0px -276px;
}

/*@media screen and (max-width: 960px) {#detail .contentsBox .bookinfoBox .bookshop li.honto a{background-position:-434px -69px  }}*/
@media screen and (max-width: 960px) {
  #detail .contentsBox .bookinfoBox .bookshop li.honto a {
    background-position: 0px -276px
  }
}

/*@media screen and (max-width: 903px) {#detail .contentsBox .bookinfoBox .bookshop li.honto a{background-position: 0px -276px}}*/
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.honto a {
    background-position: 0px -473px
  }
}

/*@media screen and (max-width: 480px) {#detail .contentsBox .bookinfoBox .bookshop li.honto a{background-position:-434px -69px}}*/
#detail .contentsBox .bookinfoBox .bookshop li.ogaki a {
  background-position: -498px -345px;
}

/*@media screen and (max-width: 960px) {#detail .contentsBox .bookinfoBox .bookshop li.ogaki a{background-position:-1085px 0  }}*/
@media screen and (max-width: 960px) {
  #detail .contentsBox .bookinfoBox .bookshop li.ogaki a {
    background-position: -498px -345px
  }
}

/*@media screen and (max-width: 903px) {#detail .contentsBox .bookinfoBox .bookshop li.ogaki a{background-position: -498px -345px}}*/
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.ogaki a {
    background-position: -450px -532px
  }
}

/*@media screen and (max-width: 480px) {#detail .contentsBox .bookinfoBox .bookshop li.ogaki a{background-position:-1085px 0}}*/
#detail .contentsBox .contents .eventTbl {
  width: 100%;
  font-size: 1.0625rem;
  line-height: 1.4em;
  margin: 1.5em 0 0 0;
}
@media screen and (max-width: 650px) {
  #detail .contentsBox .contents .eventTbl {
    line-height: 1.8em;
    font-size: 1rem;
  }
}
#detail .contentsBox .contents .eventTbl th {
  font-weight: bold;
  padding: 0 0 0.5em;
  width: 6em;
}
#detail .contentsBox .contents .eventTbl td {
  font-weight: bold;
  padding: 0 0 0.5em;
}
#detail .contentsBox .contents .eventTbl a {
  font-weight: bold;
}
#detail .contentsBox .contents .alartTxt {
  font-size: 65%;
  line-height: 1.7;
  margin: 1rem auto;
  color: #656565;
}
#detail .contentsBox .contents .informationBox {
  padding: 1% 3%;
  background: #F7F7F7;
  border: 1px dotted #BDBDBD;
  margin: 2em 0 0 0
}
#detail .contentsBox .contents .informationBox>p {
  margin: 0
}
#detail .contentsBox .contents .entryBtn-border, #detail .contentsBox .contents .dlBtn-border {
  display: inline-block;
  text-align: left;
  border: 2px solid #D07046;
  font-size: 16px;
  color: #D07046;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  transition: .4s;
}
#detail .contentsBox .contents .entryBtn-border::before {
  content: '\f4ff';
  color: #D07046;
  font-size: 19px;
  font-family: "fontawesome";
}
#detail .contentsBox .contents .entryBtn-border:hover, #detail .contentsBox .contents .dlBtn-border:hover {
  background-color: #D07046;
  border-color: #D07046;
  color: #FFF;
}
#detail .contentsBox .contents .dlBtn-border::before {
  content: '\f019';
  color: #D07046;
  font-size: 19px;
  font-family: "fontawesome";
}
#detail .contentsBox .btnNext {
  clear: both;
  font-size: 1.25rem;

  margin: 2em 0 0 0;
  text-align: center;
  color: #48403E;
}
@media screen and (max-width: 650px) {
  #detail .contentsBox .btnNext {
    font-size: 1rem;
  }
}
@media screen and (max-width: 650px) {
  #detail .contentsBox .btnNext {
    margin: 1em 0 0 0;
  }
}
#detail .contentsBox .paginationWrap {
  margin: 6em 0 0 0;
}
@media screen and (max-width: 650px) {
  #detail .contentsBox .paginationWrap {
    margin: 4em 0 0 0;
  }
}
@media screen and (max-width: 480px) {
  #detail .contentsBox .paginationWrap {
    margin: 2em 0 0 0;
  }
}
#detail .recommendBox {
  margin: 3em auto 0;
  padding: 0;
  max-width: 880px;
}
#detail .recommendBox .mainTtl {
  font-size: 1.375rem;
  font-weight: 700;
  marign: 0 auto;
  text-align: center;
}
@media screen and (max-width: 650px) {
  #detail .recommendBox .mainTtl {
    font-size: 1.625rem;
  }
}
@media screen and (max-width: 480px) {
  #detail .recommendBox .mainTtl {
    font-size: 1.25rem;
  }
}
#detail .recommendBox .mainTtl::before {
  position: relative;
  margin: 0 8px 0 0;
  top: 10px;
  content: '\f0a7';
  color: #000000;
  font-size: 38px;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
}
#detail .recommendBox .listBox {
  margin-top: 2em;
  /*li*/
}
@media screen and (max-width: 650px) {
  #detail .recommendBox .listBox {
   width: 94%;
   margin: 3% auto 0;
  }
}
@media screen and (max-width: 480px) {
  #detail .recommendBox .listBox {
  margin-top: 2em;
  }
}
#detail .recommendBox .listBox>li {
  width: 49%;
}
@media screen and (max-width: 650px) {
  #detail .recommendBox .listBox>li {
    width: 100%;
  }
}
#detail .recommendBox .listBox>li .data::before {
  font-size: 18px;
}
#detail .recommendBox .listBox>li .box {
  margin-top: 0.7em;
}
#detail .recommendBox .listBox>li .cat {
  font-size: 0.675rem;
}
@media screen and (max-width: 650px) {
  #detail .recommendBox .listBox>li .cat {
    font-size: 0.8125rem;
  }
}
@media screen and (max-width: 480px) {
  #detail .recommendBox .listBox>li .cat {
    font-size: 0.5625rem;
  }
}
@media screen and (max-width: 650px) {
  #detail .recommendBox .listBox>li .tag li {
    font-size: 0.9375rem;
    margin: 0 0 0 1em;
  }
}
@media screen and (max-width: 480px) {
  #detail .recommendBox .listBox>li .tag li {
    font-size: 0.875rem;
  }
}
#detail .recommendBox .listBox>li .shrink {
  margin-left: 10px;
}
@media screen and (max-width: 650px) {
  #detail .recommendBox .listBox>li .shrink {
    margin-left: 0;
  }
}
#detail .recommendBox .listBox>li .cover .ttl h3 {
  font-family: yu-mincho-pr6, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
}
@media screen and (max-width: 650px) {
  #detail .recommendBox .listBox>li .cover .ttl h3 {
    font-weight: 400;
    font-size: 1.125rem;
    margin: 10px 10px 30px;
  }
}
@media screen and (max-width: 480px) {
  #detail .recommendBox .listBox>li .cover .ttl h3 {
    font-weight: 700;
    font-size: 1.125rem;
    margin: 10px;
  }
}


/* 旧告知スペース */
.article-bottom-message{ 
margin: 40px 0 0;
    padding: 3%;
    border: 1px solid #9F9F9F;
  }
  
.article-bottom-message img.main-image{
    border: 1px solid #dedede;
  width: 34%;
  float: left;
}	
  
.article-bottom-message p{
width: 60%;
float: right;
}


/* youtube */
.movie::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 56.25%;
}
.movie {
    position: relative;
    margin: 40px auto;
    clear: both;
    max-width: 750px;
    }

.movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#detail .contentsBox .contents p:last-of-type::after {
display: block;clear: both;  content: "";
}

hr{margin:30px auto}