@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.-latest {
  margin: 70px 20px 10px;
}

@media screen and (max-width: 650px) {
  .listWrap.-latest {
    margin: 51px 20px;
  }
}

.listWrap.-tachiyomi {
  background-color: #fff;
  margin: 0;
  padding: 72px 20px 87px;
}

@media screen and (max-width: 650px) {
  .listWrap.-tachiyomi {
    padding: 50px 20px;
  }
}

.listWrap.-feature {
  margin: 74px 20px 0;
  padding: 0;
}

@media screen and (max-width: 650px) {
  .listWrap.-feature {
    margin: 50px 20px;
  }
}

.listWrap.-outset {
  margin: 39px 20px 0;
  padding: 0;
}

@media screen and (max-width: 650px) {
  .listWrap.-outset {
    margin: 50px 20px;
  }
}

.listWrap_inner {
  display: grid;
  grid-template:
    'sectionHead more' auto
    'listBox listBox' auto /
    minmax(0, 1fr) auto;
  column-gap: 20px;
  row-gap: 9px;
}

@media screen and (max-width: 650px) {
  .listWrap_inner {
    grid-template:
      'sectionHead' auto
      'listBox' auto
      'more' auto /
      minmax(0, auto);
    gap: 0;
  }
}

.swiper-tachiyomi-container {
  grid-area: listBox;
  align-self: start;
}

@media (max-width: 650px) {
  .swiper-tachiyomi-container {
    margin-bottom: 42px;
  }
}

.listWrap .sectionHead {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 15px;
  grid-area: sectionHead;
}

@media screen and (max-width: 650px) {
  .listWrap .sectionHead {
    gap: 10px;
    flex-direction: column;
    align-items: center;
  }
}

.listWrap .sectionHead_title {
  color: #2d2119;
  font-size: 36px;
  font-weight: bold;
  line-height: 1;
}

@media screen and (max-width: 650px) {
  .listWrap .sectionHead_title {
    font-size: 28px;
  }
}

.listWrap .sectionHead_lead {
  font-size: 18px;
  line-height: 1.2;
}

@media screen and (max-width: 650px) {
  .listWrap .sectionHead_lead {
    font-size: 14px;
  }
}

.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 {
  grid-area: 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.-tachiyomi .listBox {
  flex-wrap: nowrap;
}

.listWrap .listBox>li {
  width: 31.5%;
  margin-bottom: 30px;
}

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

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

.listWrap.-tachiyomi .listBox > li {
  --border-left-width: 11px;
  position: relative;
  display: flex;
  width: 250px;
  height: auto !important;
  border-radius: 8px 0 0 0;
  border-color: #ccc;
  border-style: solid;
  border-width: 0 0 0 var(--border-left-width);
  margin: 0;
}

.listWrap.-tachiyomi .deco {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 3px;
  width: calc(100% + var(--border-left-width));
  height: 35px;
  background-color: #fff;
  border-radius: 9999px 0 0 9999px;
  border-color: #ccc;
  border-style: solid;
  border-width: 4px 0 4px 4px;
  transform: translateY(50%);
}

.listWrap.-tachiyomi .deco span {
  width: 95%;
  height: 1px;
  background-color: #d9d9d9;
}

.listWrap.-tachiyomi .cardWrap {
  width: 100%;
  background-color: #fff;
  border-radius: 0 8px 0 0;
  border-color: #ccc;
  border-style: solid;
  border-width: 1px 1px 0 0;
  padding-bottom: 30px;
  overflow: hidden;
}

.listWrap .listBox>li a {
  display: block;
  margin-left: auto;
}

.listWrap .listBox>li .tag_link {
  font-size: 12px;
  line-height: 1;
  border: 1px solid #ccc;
  border-radius: 9999px;
  padding: 0.4em 0.6em;
}

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

.listWrap .listBox li .cover .img{ background: #eeeeee;}
.listWrap .listBox li .cover {
  text-align: center;
}

.listWrap.-tachiyomi .listBox li .cover {
  border-bottom: 1px solid #ccc;
}

#top .swiper-container .vertical img,
.listWrap .listBox li .cover.vertical .img img:not(.img_bg){box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);}

.listWrap .listBox li .cover.vertical .img .img_bg {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  object-fit: cover;
  height: 120%;
  width: 105%;
}

.listWrap .listBox>li .cover .img{
  position: relative;
  padding-top: 52.5%;
}

.listWrap .listBox>li .cover .img img:not(.img_bg){
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  width: auto;
  height: 100%;
  max-height: 178px;
}

.recommendBox.listWrap .listBox>li .cover .img img:not(.img_bg){
  width: 100%;
  max-height: 300px;
  aspect-ratio: 431 / 226;
  object-fit: contain;
}

@media screen and (max-width: 960px) {
  .listWrap .listBox > li .cover .img img:not(.img_bg) {
    max-height: 230px;
  }
}

@media screen and (max-width: 650px) {
  .listWrap .listBox > li .cover .img img:not(.img_bg) {
    max-height: 320px;
  }
}

@media screen and (min-width: 651px) {
  .recommendBox.listWrap .listBox > li .cover .img img:not(.img_bg) {
    max-height: 230px;
  }
}

.listWrap .listBox>li .cover .img::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 100%;
  /*画像の幅*/
  height: 100%;
  /*画像の高さ*/
  background-size: contain;
  vertical-align: middle;
}

.listWrap .listBox>li .cover.vertical .img{
 text-align:center;
 background-size:cover;
 position:relative;
 overflow:hidden;
 z-index:0;
  background-position:center;
}

.listWrap .listBox>li .cover.vertical .img::before{
 content: '';
 background: inherit;
 -webkit-filter: blur(5px);
 filter: blur(5px);
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 z-index: -1;
 height: 120%;
 width: 105%;
}

.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{text-align:left}

.listWrap .listBox>li .cover .ttl h3, .listWrap .listBox>li .cover .ttl h4 {
  font-weight: 400;
  font-style: normal;
  margin: 10px 0 20px;
  bottom: 0;
  left: 0;
  font-family:'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;
}

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

.listWrap .listBox > li .cover .ttl h3 {
  font-weight: 600;
  font-family: 'Lato', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN';
  margin-block: 13px;
}

.listWrap.-tachiyomi .listBox > li .cover .ttl h3 {
  margin: 11px 13px;
}

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

.listWrap.-tachiyomi .listBox>li .box {
  margin: 0 12px;
}

.listWrap .listBox>li .infoWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block: 10px;
}

.listWrap .listBox>li .data {
  display: flex;
  align-items: center;
  color: #2d2119;
  font-size: 12px;
  line-height: 1.5;
  font-family: lato;

}
.listWrap .listBox>li .data::before {
    content: "";
    background: url(/common/images/v2/books/icon-calendar-s.svg) no-repeat left;
    background-size: 13px;
    font-size: 12px;
    margin: 0 0.3em 0 0;
    vertical-align: top;
    height: 13px;
    display: block;
    width: 13px;
}

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

#detail .recommendBox .listBox>li .data {
  font-size: 14px;
}

#detail .recommendBox .listBox>li .data::before {
    content: "";
    background: url(/common/images/v2/books/icon-calendar-s.svg) no-repeat left;
    background-size: 13px;
    font-size: 12px;
    margin: 0 0.3em 0 0;
    vertical-align: top;
    height: 13px;
    display: block;
    width: 13px;
}

@media screen and (max-width: 650px) {
  #detail .recommendBox .listBox>li .data {
    font-size: 12px;
  }
}

.listWrap .listBox>li .data::before {
    background: url(/common/images/v2/books/icon-calendar-s.svg) no-repeat left;
    background-size: 13px;
  font-size: 12px;
  margin: 0 0.3em 0 0;
  vertical-align: top;
}

.listWrap .listBox>li .cat {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.listWrap .listBox>li .tag {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.listWrap.-outset .listBox>li .author {
  font-size: 12px;
  line-height: 1.5;
}

.listWrap.-outset .listBox>li .txt_bottom {
  font-size: 12px;
  margin-top: 8px;
}

.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_more {
  grid-area: more;
  align-self: end;
  line-height: 1;
}

@media screen and (max-width: 650px) {
  .listWrap_more {
    text-align: center;
  }
}

@media (any-hover: hover) {
  .listWrap_moreLink:is(:hover, :focus-visible) {
    color: #d07046;
    opacity: 1;
  }
}

@media screen and (max-width: 650px) {
  .listWrap_moreLink {
    display: inline-block;
    min-width: 240px;
    background-color: #d07046;
    padding: 1em;
  }
}

.listWrap_moreText {
  position: relative;
  font-size: 20px;
  font-weight: bold;
  padding-left: 22px;
}

@media screen and (max-width: 650px) {
  .listWrap_moreText {
    color: #fff;
    font-size: 16px;
    padding-left: 17px;
  }
}

.listWrap_moreArrow {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 16px;
  min-width: 0;
  aspect-ratio: 1;
  background-color: #d07046;
  border-radius: 50%;
  margin: auto;
}

@media screen and (max-width: 650px) {
  .listWrap_moreArrow {
    width: 12px;
    background-color: #fff;
  }
}

.listWrap_moreArrow::before {
  position: absolute;
  content: '';
  top: 0;
  left: 6px;
  bottom: 0;
  width: 7px;
  height: 8px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background-color: #fff;
  margin: auto;
}

@media screen and (max-width: 650px) {
  .listWrap_moreArrow::before {
    left: 5px;
    width: 5px;
    height: 6px;
    background-color: #d07046;
  }
}

/*listWrap*/

.paginationWrap {
  text-align: center;
  margin: 2em 0 1.5em 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

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

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

@media screen and (max-width: 480px) {
  .paginationWrap {
    margin: 2em 0 0 0;
    padding: 0 0 0 0;
    justify-content: space-between;
  }
  .paginationWrap div {
    width: 100%;
    margin: 0 auto;
  }
  .paginationWrap .prev2 {
    order: 2;
  }
  .paginationWrap .next2 {
    order: 3;
  }
}

.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.2em;
  }
}

.paginationWrap .prev {
  margin: 0 1em 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.8em;
    line-height: initial;
  }
}

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

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

  トップページ

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

#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 img {
  height: auto;
}

#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: 60px 20px;
}

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

#top .navPickup_list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: min(calc(40 / 1080 * 100vw), 40px);
  margin: 0 auto;
}

@media (max-width: 650px) {
  #top .navPickup_list {
    flex-direction: column;
  }
}

#top .navPickup_item {
  flex: 1;
  max-width: 400px;
}

#top .navPickup_link {
  display: block;
}

#top .navPickup_img {
  height: auto;
}

/*#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;*/
    padding-bottom:30px;
  }
}

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

#detail .snsBox {
  margin: 1em 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: 680px) {
 #detail .snsBox :first-child {
 margin:0;
/*     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);
    -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);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
}

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

@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(2) a::before {
  position: relative;
  content: '';
  display: inline-block;
  width: 27px;
  height: 27px;
  top: 4px;
  background: url("/common/images/v2/icon_x.svg?rd") no-repeat;
  background-size: contain;
}
#detail .snsBox li:nth-of-type(3) i {
    position: relative;
    content: '';
    display: inline-block;
    width: 27px;
    height: 27px;
    top: 4px;
    background: url(/common/images/v2/books/sns-facebook.svg) no-repeat;
    background-size: contain;
    	filter: brightness(0) saturate(100%) invert(0%) sepia(4%) saturate(18%) hue-rotate(191deg) brightness(94%) contrast(106%);
}

#detail .snsBox li:nth-of-type(4) {margin:0}

#detail .snsBox li:nth-of-type(4) i {
    position: relative;
    content: '';
    display: inline-block;
    width: 27px;
    height: 27px;
    top: 4px;
    background: url(/common/images/v2/books/sns-line-s.svg) no-repeat;
    background-size: contain;
  filter: brightness(0) saturate(100%) invert(0%) sepia(4%) saturate(18%) hue-rotate(191deg) brightness(94%) contrast(106%);
}

#detail .snsBox li:nth-of-type(5) a::before {
  position: relative;
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  top: 4px;
  background: url("/common/images/v2/icon_note2.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 5% 0 0;
}

@media screen and (max-width: 650px) {
  #detail .mW .snsBox {
margin: 50px 20px 25px auto;
        width: 90%;
        text-align: right;
  }
}

#detail .ttlBox {
  padding: 20px 1.5%;
  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 {
    content: "";
    vertical-align: top;
    background: url(/common/images/v2/books/icon-calendar-s.svg) no-repeat left;
    margin: 2.5px 0.2em 0 0;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: 18px;
    filter: brightness(0) saturate(100%) invert(66%) sepia(0%) saturate(4%) hue-rotate(176deg) brightness(86%) contrast(88%);
    
}

@media screen and (max-width: 650px) {
  #detail .ttlBox .data::before {
    background-size: 14px;
   margin: 2.5px 0 0 0;
  }
}

#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', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro',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 {
    position: relative;
    content: "";
    background: url(/common/images/v2/icon_search.svg) no-repeat left;
    display: block;
    width: 20px;
    height: 20px;
    float: left;
    filter: brightness(0) saturate(100%) invert(66%) sepia(0%) saturate(4%) hue-rotate(176deg) brightness(86%) contrast(88%);
    margin: 3px 0 0 0;
}

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

#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;
  }
}

.article-body {
  margin: 40px 5% 0;
  font-size: 1.25rem;
  color: #0d1f1b;
  line-height: 2em;
  /*word-break: break-all;*/
  line-break: strict;
overflow-wrap: break-word;
word-wrap: break-word;
}

@media screen and (max-width: 650px) {
  .article-body {
    font-size: 1rem;
  }
}

@media screen and (max-width: 480px) {
  .article-body {
    margin: 0 2% 0;
    line-height: 1.9em;
  }
}

#detail .contentsBox .btnNext a,
.article-body a {
  color: #D07046;
}

.article-body .imgphotobox {
  margin-top: 1.5em;
  margin-bottom: 1em;
  max-width: 40%;
}

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

@media screen and (max-width: 480px) {
  .article-body .imgphotobox {
    max-width: 80%
  }
}

.article-body .imgphotobox figcaption {
  font-size: 0.9125rem;
  margin: 1em 0 0 0;
  line-height: 1.2em;
}

@media screen and (max-width: 650px) {
  .article-body .imgphotobox figcaption {
    font-size: 0.725rem;
  }
}

@media screen and (max-width: 480px) {
  .article-body .imgphotobox figcaption {
    margin: 1% auto;
  }
}

.article-body .pageright {
  float: right;
  margin: 0 0 0 3em;
}

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

.article-body .pageleft {
  float: left;
  margin: 0 3em 0 0;
}

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

.article-body .imgBox {
  width: 100%;
  margin: 0
}

.article-body .image-area.book {
  text-align: center;
  max-width: 300px;
  margin-top: 2% ;
   margin-bottom: 2% ;
  width:100%;
}

.article-body .book img{
border:1px solid #dedede;
}

@media screen and (max-width: 650px) {
  .article-body .book {
    margin-top: 2em;
    margin-bottom: 3em;
  }
}

@media screen and (max-width: 480px) {
  .article-body .book {
    width: 80%;
    margin-bottom: 1em;
  }
}

.article-body figcaption {
  font-size: 0.9125rem;
  line-height: 1.5
}

.article-body figcaption {
  text-align: left;
}

.article-body p {
  margin: 2em 0 0 0;
  font-size: 1.15rem;
  line-height: 1.8;
  letter-spacing: .04rem;
  color: #0d1f1b;
 /* text-align:justify;*/
}


.article-body p.summary {
  border-bottom: 1px dotted #BDBDBD;
  padding-bottom: 2%
}
.article-body p span.bold{ font-weight:bold;}

.block .information{background: #fafafa;padding: 4%;margin-top: 30px;}
.article-body .block .information p{margin:6px 0 0 0}
.block .information span i.information-icon{display:none}




@media screen and (max-width: 960px) {
  .article-body p {
    font-size: 1rem;
  }
}

@media screen and (max-width: 650px) {
  .article-body p {
    font-size: .985rem;
    line-height: 2em;
  }
}

#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%;
  }
  .article-body p { 
  letter-spacing: 0;
  }
}

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

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

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

.article-body h5 {
  border-left: solid 5px #2c2c2c;
  padding-left: 10px;
  font-size: 1.175rem;
  margin: 1.6em 0 0 0;
  color: #000
}

@media screen and (max-width: 650px) {
  .article-body h2 {
    font-size: 1.5rem;
  }
  .article-body h3 {
    font-size: 1.25rem;
  }
  .article-body h4 {
    font-size: 0.925rem;
  }
  .article-body 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%
}

.article-body .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: 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 0.575em 0;
  }
}

#detail .contentsBox .books-information h5,
#detail .amazonBox .textside p.title {
  font-size: 1.675rem;
  line-height:1.4em;
  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
}*/

@media screen and (max-width: 480px) {
  #detail .amazonBox {
    padding: 8%;
  }
  #detail .amazonBox .infobox {
    display: block;
    padding: 0;
  }
  #detail .amazonBox .infobox .img {
    width: 60%;
    margin: 0 auto 20px;
  }
  #detail .amazonBox .btn {
    font-size: 1.1875rem;
    margin: 0.5em auto 0;
    text-align: center;
  }
  #detail .amazonBox .btn a {
    width: 100%;
    margin: 0 auto;
  }
}

/*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;
  height: auto;
  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: 5% 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: center
}

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

#detail .contentsBox .bookinfoBox .bookdetail .btn a {
  background: #d07046;
  color: #fff;
  display: inline-block;
  margin: 0 auto;
  padding: 0.5em 1.5em;
  text-align: center;
  width: 100%;
  line-height: 1.8em;
  border-radius: 4px;
  max-width: 500px;
  font-weight: 600;
}

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

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

#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
  }
}

#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: 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;
}

#detail .contentsBox .bookinfoBox .bookshop li.hmv a {
  background: url(/common/images/v2/books/store_hmv001.png) no-repeat center;
  background-size: 156px 50px;
}

@media screen and (max-width: 480px) {
  #detail .contentsBox .bookinfoBox .bookshop li.hmv a {
    background: url(/common/images/v2/books/store_hmv001.png) no-repeat center;
    background-size: 140px 50px;
  }
}

/*@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
  }
}

/* 電子書籍 */
#detail .contentsBox .bookinfoBox .bookshop li.kindle a {
  background-position: -166px -207px;
}
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.kindle a {
    background-position: -150px -414px
  }
}
#detail .contentsBox .bookinfoBox .bookshop li.rakutenk a {
  background-position: -332px -207px;
}
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.rakutenk a {
    background-position: -300px -414px
  }
}
#detail .contentsBox .bookinfoBox .bookshop li.booklive a {
  background-position: -996px -207px;
}
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.booklive a {
    background-position: -900px -414px
  }
}
#detail .contentsBox .bookinfoBox .bookshop li.kinoppy a {
  background-position: -166px -276px;
}
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.kinoppy a {
    background-position: -150px -473px
  }
}
#detail .contentsBox .bookinfoBox .bookshop li.reader a {
  background-position: -498px -276px;
}
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.reader a {
    background-position: -450px -473px
  }
}
#detail .contentsBox .bookinfoBox .bookshop li.ibook a {
  background-position: 0 -346px;
}
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.ibook a {
    background-position: 0 -533px
  }
}
#detail .contentsBox .bookinfoBox .bookshop li.galapagos a {
  background-position: -996px -276px;
}
@media screen and (max-width: 650px) {
  #detail .contentsBox .bookinfoBox .bookshop li.galapagos a {
    background-position: -900px -473px
  }
}

/* 電子書籍 */

.article-body .eventTbl {
  width: 100%;
  font-size: 1.0625rem;
  line-height: 1.4em;
  margin: 1.5em 0 0 0;
}
@media screen and (max-width: 650px) {
  .article-body .eventTbl {
    line-height: 1.8em;
    font-size: 1rem;
  }
}
.article-body .eventTbl th {
  font-weight: bold;
  padding: 0 0 0.5em;
  width: 6em;
}
.article-body .eventTbl td {
  font-weight: bold;
  padding: 0 0 0.5em;
}
.article-body .eventTbl a {
  font-weight: bold;
}
.article-body .alartTxt {
  font-size: 65%;
  line-height: 1.7;
  margin: 1rem auto;
  color: #656565;
}
.article-body .attentionTxt {
  font-size: 80%;
  line-height: 1.7;
  margin: 1rem auto;
  color: #656565;
}
.article-body .informationBox {
  padding: 1% 3%;
  background: #F7F7F7;
  border: 1px dotted #BDBDBD;
  margin: 2em 0 0 0
}
.article-body .informationBox>p {
  margin: 0
}
.article-body .entryBtn-border, .article-body .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;
}
.article-body .entryBtn-border::before {
  content: '\f4ff';
  color: #D07046;
  font-size: 19px;
  font-family: "fontawesome";
}
.article-body .entryBtn-border:hover, .article-body .dlBtn-border:hover {
  background-color: #D07046;
  border-color: #D07046;
  color: #FFF;
}
.article-body .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;
  clear: both;
}
@media screen and (max-width: 650px) {
  #detail .contentsBox .paginationWrap {
    margin: 4em 0 0 0;
  }
}

#detail .contentsBox .paginationWrap {
  margin: 2em 0 1.5em 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
@media screen and (max-width: 480px) {
  #detail .contentsBox .paginationWrap div {
    width: 100%;
  }
  #detail .contentsBox .paginationWrap .prev2.num {
    order: 2;
    width: 45%;
    text-align: left;
  }
  #detail .contentsBox .paginationWrap .next2.num {
    order: 2;
    width: 45%;
    text-align: right;
  }
}
#detail .recommendBox {
  margin: 3em auto 0;
  padding: 0;
  max-width: 880px;
  width:96%;
}
#detail .recommendBox .mainTtl {
  font-size: 1.375rem;
  font-weight: 700;
  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 .box {
  margin-top: 0.7em;
}
#detail .recommendBox .listBox>li .cat {
  font-size: 14px;
}
@media screen and (max-width: 650px) {
  #detail .recommendBox .listBox>li .cat {
    font-size: 12px;
  }
}
@media screen and (max-width: 650px) {
  #detail .recommendBox .listBox>li .tag li {
    font-size: 0.9375rem;
  }
}
@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.2rem;
  font-weight: 700;
  /* background: #fff; */
}
@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_sq::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 100%;
}
.movie_ver::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 177%;
}

.movie {
  position: relative;
  margin: 40px auto;
  clear: both;
  max-width: 750px;
}
.movie_sq {
  position: relative;
  margin: 40px auto;
  clear: both;
  max-width: 450px;
}
.movie_ver{
  position: relative;
  margin: 40px auto;
  clear: both;
  max-width: 300px;
}

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

.article-body p:last-of-type::after {
  display: block;clear: both;  content: "";
}

hr{margin:30px auto}

/* -- 表組み ------------------------------------ */

table.event-table{border-collapse: collapse; width:100%; text-align:left;max-width:800px;margin:20px auto;}
table.event-table th, table.event-table td{font-size:14px; line-height:1.4; border:solid 1px #dcdcdc;padding:2%; }
table.event-table th{background-color:#e9f5fd; width:20%;max-width: 120px; font-weight:bold}
table.event-table td span{margin-right:10px;}
table.event-table ol {list-style-type:decimal!important; margin:20px 0 0 30px}

@media screen and (max-width: 480px) {
table.event-table th,
table.event-table td{display:block;width:100%;max-width:100%;border-bottom:0;padding:2% 4% 3% ;  }
table.event-table td{padding:2% 4% 4% ;}
table.event-table tr:last-child td {border-bottom:solid 1px #dcdcdc; }
}

/*dl */
dl.mrx{display: flex;flex-wrap: wrap; width: 100%; max-width: 800px; margin: 20px auto; font-size: 1.15rem;}
dl.mrx dt{ width: 20%; font-weight: bold;}
dl.mrx  dd { width: 78%;}

@media screen and (max-width: 650px) {
  dl.mrx{display:inherit;font-size: .985rem;line-height: 1.825 }
  dl.mrx dt,dl.mrx  dd{ width: 100%;}
  dl.mrx dt{margin-bottom:0.25em;}
  dl.mrx  dd{margin-bottom:0.5em;}
}

/* -- ボタン　.btn-border ------------------------------------ */
.article-body a.btn-border {
  padding: 10px;
  margin: 0 auto 2em;
  background: #d07046;
  color: #fff;
  width: 100%;
  max-width: 350px;
  display: block;
  border-radius: 6px;
  font-weight: bold;
}
.article-body a.btn-border.tw {
  background: #0694e1;
}

/* -- sp_bannerのサイズ調整 ------------------------------------ */
.article-body p.sp_banner{
text-align: center;
    max-width: 538px;
    margin: 2em auto 0;
}

/* -- 記事の中のテンプレートパーツ -- */
article.p_articles{ width:100%;margin: 20px auto;}
.article-body article.p_articles h2,
#foot_info article.p_articles h2{font-size: 1rem;color: #333;}

.p_a_wrap{padding: 0 0 0 4%;border: 1px solid #ccc;border-radius: 8px;}
.p_a_wrap a{display: flex;justify-content: space-between;align-items: center;}
.p_a_wrap div{width: calc(100% - 140px);overflow: hidden;order:1}
.article-body .p_a_wrap h3,
#foot_info article.p_articles h3{margin: 0 0 8px 0;font-size: 1rem;color: #444;line-height: 1.6em;overflow: hidden;text-overflow: ellipsis;white-space: pre-wrap;-webkit-box-orient: vertical;display: -webkit-box;-webkit-line-clamp: 2;}
.article-body .p_a_wrap p,
#foot_info article.p_articles p{margin: 0; font-size: .8rem;color: #555;line-height: 1.6em;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;display: -webkit-box; -webkit-line-clamp: 2;height: auto;}
.p_a_wrap figure{overflow: hidden;position: relative;width: 120px;height: 120px;flex-shrink: 0;border-radius: 0 8px 8px 0; margin: 0;order:2}
.p_a_wrap figure img{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);object-fit: cover;height: 100% !important;width: 100% !important;margin: 0;}

figure.vertical{overflow: hidden;position: relative;height: 120px;width: 120px; border-radius: 0 8px 8px 0;margin: 0 0 0 20px; text-align: center;}
figure.vertical::before{content: '';background: inherit;-webkit-filter: blur(5px);filter: blur(5px);position: absolute;top: -5px;left: -5px;right: -5px;bottom: -5px;height: 120%;width: 105%;    background-size: cover;  background-position: center;}
figure.vertical img{width: auto;text-align: center;position: inherit;background-position: center;overflow: hidden;z-index: 0;margin: 0 auto;box-shadow: 0 10px 25px 0 rgb(0 0 0 / 50%);height: 120px;object-fit: contain;min-height: auto;min-width: auto;}

@media (min-width:780px) {
  article.p_articles{ width: 80%;}
  .p_a_wrap{padding: 0 0 0 20px;}
  .p_a_wrap div{width: 70%;}
  .p_a_wrap figure{margin: 0 0 0 20px;height: 140px;width: 240px;}
  figure.vertical{height: 140px;width: 240px;}
  figure.vertical img{height: 140px;}
}

/*引用に背景色*/
blockquote{background: #d070460f; padding: 5px 5% 2em;margin:40px auto;overflow: hidden;}

/*twitter*/
.twitter-tweet{margin:0 auto;}

/*音楽系iframe埋め込み用*/
.article-body .music {
  max-width: 660px;
  margin: 40px auto;
}

.music iframe {
  width: 100%;
  margin: 0 auto;
}

/*プロフィールなど、PCはならび、SPは一列*/
.article-body .profile .image-area {
  text-align: center;
}

.profile figure img {
  max-width: 400px;
  margin: 0 auto;
}

@media only screen and (min-width: 780px) {
  .profile {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .profile figure {
    width: 45%;
    margin: 0;
  }
  .article-body .profile .image-area {
    margin: 2em 5% 0;
  }
}

/*amazon authornameを消す*/
#detail .amazonBox .textside p.authorname {
  display: none;
}

/* -- ビューワーボタン -- */
.article-body .viewer-button {
  display: block;
  width: 100%;
  max-width: 330px;
  color: #055F96;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  border: 2px solid;
  border-radius: 10px;
  margin: 30px auto;
  padding: 0.5em 1em;
}