@charset "UTF-8";

.article-body .image-area {
  margin: 1.5em auto 1em;
  max-width:100%;
}

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

@media screen and (max-width: 480px) {
  .article-body .image-area{
   /* max-width: 80%*/
  }
}

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

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

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

.article-body .figure-center{
 margin:1.6em auto 1em;
text-align: center;
}

.article-body .figure-right {
  float: right;
  margin: 2em 0 2em 3em;
  clear:both;
}
.article-body .image-area img.main-image{
border: 1px #efefef solid;
}


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

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

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

.article-body figure img{height:auto;}
.article-body figure.image-area img{width:100%}
@media only screen and (min-width: 768px) {
.article-body div div figure{text-align:center}
.article-body figure img{height:auto;width:auto}
.article-body figure.image-area img{max-height:720px;width:auto;max-width:100%;}
}

.mainvisual img{
 height:auto;
}
.mainvisual .vertical{
 text-align:center;
 background-size:cover;
 position:relative;
 overflow:hidden;
 z-index:0;
}
.mainvisual .vertical::before{
 content: '';
  background: inherit;
  -webkit-filter: blur(8px);
  filter: blur(8px);
  position: absolute;
  top: 0;
  left: -8px;
  right: -8px;
  bottom: -8px;
  z-index: -1;
}
.mainvisual .vertical img{
 width:auto;
 height:567px;
}
@media screen and (max-width: 650px) {
  .mainvisual .vertical img{
   height:537px;
  }
}
@media screen and (max-width: 480px) {
  .mainvisual .vertical img{
   height:196px;
  }
}

/*記事交換 関連記事*/
.related {margin:50px auto;width:90%;max-width: 880px;padding:5%;background:#fff;font-size: 0.85rem;}
.related .noprovide a{border:1px solid #999;background:#fcfcfc;max-width:300px;padding:10px;margin:0px auto 20px}
.related .noprovide a:hover{background: #999;opacity:1;color:#fff}

.related ul{margin:30px auto}
.related li{ margin-bottom:16px; }
.related li a:hover{border-bottom:solid #999 1px;opacity:1}


@media screen and (min-width: 880px) {
.related {margin:50px auto;padding:40px;background:rgba(255,255,255,.5);font-size:1rem;}
.related ul{margin:30px auto;max-width:800px}
.related li{ margin-bottom:20px; }
}

/*発売情報 html変更 css修正*/
ul.artile-list.default li,
ul.releaseinfo li{margin:20px auto 40px}
ul.artile-list.default  li a,
ul.releaseinfo li a{text-align: center;display: block;margin-bottom:20px}
ul.artile-list.default li a img{width: auto;border: solid 1px #dcdcdc;}
ul.releaseinfo li a img{
  max-width:250px;
  height: auto;
  border: solid 1px #dcdcdc;
}
ul.artile-list.default table,
ul.releaseinfo li dl{border: solid 1px #dcdcdc;}
ul.artile-list.default table,
ul.artile-list.default table tr,
ul.artile-list.default table td,
ul.releaseinfo li dl,
ul.releaseinfo li dt,
ul.releaseinfo li dd {width: auto;}

ul.releaseinfo li dt{padding:2%;border-bottom: solid 1px #dcdcdc;font-weight: bold;font-size: 0.875em;background-color: #e9f5fd;line-height: 1.6em;}
ul.artile-list.default table td,
ul.releaseinfo li dd {font-size: 0.875em;border-bottom: solid 1px #dcdcdc;padding: 2% 1% 2% 3%;}
ul.artile-list.default table td a,
ul.releaseinfo li dd a{display: unset; text-align: left;}
ul.artile-list.default table td:last-of-type,
ul.releaseinfo li dd:last-of-type{border-bottom:none}

@media only screen and (min-width: 1030px){
ul.artile-list.default li,
ul.releaseinfo li{display: flex;padding: 2% 0;justify-content: space-between;align-items: start;}
ul.artile-list.default  li a,
ul.releaseinfo li a{width: 32.2%;background: none; border: none;max-width: 300px;text-align:left;margin-bottom:0px}
ul.artile-list.default li a img{width:auto}

ul.artile-list.default table,
ul.releaseinfo li dl{width: 65%;display: flex;flex-wrap: wrap;margin:0;align-items: stretch;padding: 0;line-height:1.6em;}
ul.artile-list.default table tr,
ul.releaseinfo li dt{width: 100px;}
ul.artile-list.default table td,
ul.releaseinfo li dd {width: calc(100% - 100px);}
ul.artile-list.default table tr:last-of-type
ul.releaseinfo li dt:last-of-type{border-bottom:none}
}



/* -------- ランダムバナー -------------------------- */
.random-bnr{text-align:center;margin:1em auto;}
.random-bnr__img{max-width:760px;width:100%;}


/* -------- プレゼント ------------------------------- */
.sprite, .sprite a {background: url(/common/images/v1/common/sprite-v2.png) no-repeat; display:block; overflow: hidden;}
.present-section{background:#fff;margin: 40px auto;    position: relative;padding-bottom:40px;}
.present-section-inner{width:84%;margin:auto;padding:40px 0;}
.present-heading{margin-bottom:40px;}
.present-heading .ttl{display: flex;margin: 10px auto 20px;text-align: center;font-size:1.6rem;font-weight:bold;font-family:'M PLUS Rounded 1c', sans-serif;align-items: center;justify-content: center;}
.present-heading .ttl:before{
    content: "";
    width: 25px;
    height: 28px;
    display: inline-block;
    text-indent: 100%;
    background: url(/common/images/v2/books/icon-present.svg) no-repeat;
    margin: 0 4px 0 0;
    background-position: 0px 2px;
    filter: brightness(0) saturate(100%);
    background-size: 24px;
}

.present-heading .text{display:block;margin-top: 1.4em; position: absolute;bottom:5%;right:0;left:0;margin:0 auto;text-align:center;}
.present-heading .text a{color:#D07046;text-decoration:underline;}
.present-heading .text a:hover{text-decoration:none;}
ul.p-list li{border-top:dotted 1px #a0a0a0; text-align:center;}
ul.p-list li:first-child{border:none;}
ul.p-list li h2{font-size:1.25em; text-align:left;padding-left:18px; position:relative; position:relative; margin-bottom:24px;}
ul.p-list li h2:before{
  content: ' ';
  position: absolute;
  width: 0; height: 100%;left:0; top:0;
  /*background: transparent;*/
  border-color: #2c2c2c;
  border-style:solid;
  border-width:3px;
}
ul.p-list li img{
  margin:0 auto 20px;
  width:176px;
  height: auto;
  border:solid 1px #dcdcdc;
}
ul.p-list li .p-body{text-align:left;}
ul.p-list li .p-body table{line-height:1.4; margin-bottom:30px;}
ul.p-list li .p-body table th{display:table-cell;width:20%;vertical-align:middle;}
ul.p-list li .p-body table td{display:table-cell;width:80%;vertical-align:middle;}
ul.p-list li .p-body .p-body-btn{text-align:center;}
ul.p-list li .p-body .p-body-btn a{text-align:left;line-height:23px; color:#fff; font-weight:bold;display:block; background-color:#055f96; width:276px; height:50px; margin:0 auto; padding:14px 0 0 14px;}
ul.p-list li .p-body .p-body-btn a span{float:left; width:23px; height:23px;text-indent:-1100em;}

ul.p-list li .p-body .p-body-btn a span.subscribe{background-position:-188px -471px; margin-right:82px;}
ul.p-list li .p-body .p-body-btn a span.download{background-position:-188px -513px; margin-right:50px;}

@media only screen and (min-width: 768px) {
 .present-heading .text{margin-left:20px;text-align: right;}
 ul.p-list li .p-body{float:right; width:470px;}
 ul.p-list li .p-body table th{width:30%;}
 ul.p-list li .p-body table td{width:70%;}
 .present-heading .text{bottom:40px;text-align:right;margin-right:40px}
}

@media only screen and (min-width: 1024px) {
 ul.p-list li img{width:150px;}
 ul.p-list li .p-body{width:621px;}
}

/* お知らせ */
#foot_info{
 background:#fff;
 padding:40px 5%;
 margin: 10px;
}

#foot_info h2{
  font-weight: 600;
  margin:0 0 1em;
}

#foot_info h3{
   font-weight: 600;
    font-size: 1.5rem;
    color: #000;
}
#foot_info p{
  margin: 1em 0 0 0;
  font-size: 1.15rem;
  line-height: 1.8;
  letter-spacing: .03rem;
  color: #48403e;
}

#foot_info .p_a_wrap h3{
  font-weight:600;
  font-size: 1rem;
  margin-bottom:.5em;
  line-height:1.6
}
#foot_info .p_a_wrap p{
  font-size:.9rem;
  line-height:1.6
}