@charset "UTF-8"; 
article img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;/* 画像下のスペースを消す */
}
.sectionTitle {margin: 0 auto 2rem; padding: 0.2rem; text-align: center;font-weight: bold;font-size: 1.5rem;line-height: 1.7rem;}
.groupTitle {margin: 0 auto 1rem; padding: 0.2rem;text-align: center;font-weight: bold;font-size: 1rem;line-height: 1.2rem;}
.orange-white {background-color: #FF9204; color: #fff; }
.orange-black {background-color: #FF9204; color: #1F1F1F; }
.pink-white {background-color: #ff66b3; color: #fff; }
.red-white {background-color: #EF3232; color: #fff; }
.blue-white {background-color: #3B3BFF; color: #fff; }
.green-white {background-color: #00C80A; color: #fff; }
.purple-white {background-color: #BF52FF; color: #fff; }
.white-orange {background-color: #fff; color: #FF9204; border: 1px solid #E5E5E5;}
.white-pink {background-color: #fff; color: #ff66b3; border: 1px solid #E5E5E5;}
.white-red {background-color: #fff; color: #EF3232;}
.white-blue {background-color: #fff; color: #3B3BFF; border: 1px solid #E5E5E5;}
.white-green {background-color: #fff; color: #00C80A; border: 1px solid #E5E5E5;}
.white-purple {background-color: #fff; color: #BF52FF; border: 1px solid #E5E5E5;}
.white-black {background-color: #fff; color: #000; border: 1px solid #E5E5E5;}
.w_b {font-weight: bold;}
.color_rd {color: #EF3232;}
.color_bl {color: #3B3BFF;}
.color_gr {color: #00C80A;}
.color_or {color: #FF9204;}
.color_pk {color: #ff66b3;}
.color_pu {color: #BF52FF;}
.color_ye {color: #ff0;}
.titleTxt2{display:table-cell;color:#FF9204;font-size:1.8rem;font-weight:bold;line-height:2rem;vertical-align:middle;padding:1rem 0;text-align:center;}
.fig_txt1 {width: 90%;max-width: 990px;margin: 0 auto 1.5rem;overflow: hidden;color: #fff;font-size: 1rem;line-height: 1.5rem;text-align: left;text-overflow: ellipsis;white-space: nowrap;}
.fig_txt2 {width: 90%;max-width: 990px;margin: 0 auto 2rem;overflow: hidden;color: #fff;font-size: 1.5rem;text-align:center;}
.sectionTitleThum {
	padding: 0 4%;
}
.resArea * {-webkit-box-sizing: border-box;box-sizing: border-box;}
.resArea {
    width: calc( 100% - 2rem );
    background: #fff;
    padding:1rem 1rem 2rem;
}
.resArea.min2_thum.new ul {
    display: flex;
    align-items: stretch; /* 下端揃え */
    flex-wrap: wrap;
}
.resBox li {
    width: 16.66%;
    padding: .5rem;
    text-align: center;
    margin-bottom: 2.5rem;
    /* 高さを揃えるため */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.resBox li:nth-child(6n+1) {clear: both;}
.resBox figure.subscription .mark { width: 100%; background: #ff9204; line-height: 0; text-align: center; }
.resBox figure a {display: block;}
.resBox figure img {width: 100%;height: auto;}
.resBox figure + .titleName,.resBox figure + .favorite,.resBox figure + .trash {margin-top: .4rem;}
.resBox .titleName {margin: 0.3rem 0.1rem 0.3rem; text-align: left;}
.resBox .titleName a {text-decoration: underline;-webkit-box-orient: vertical;-webkit-line-clamp: 2;display: -webkit-box;overflow: hidden;font-size: 1rem;line-height: 1.2; word-break: normal;}
.resBox .label {margin: 0 .1rem;text-align: left;height: 1.3rem;}
.resBox .label span {display: inline-block;height: 1rem; margin-bottom: .2rem;padding: 0 .3rem; border: 1px solid #C7C7C7; border-radius: 5%; font-size: .6rem; line-height: 1rem;}
.resBox .favorite {text-align: center;}
.resBox .favorite img {height: 1.4rem;cursor: pointer;}
.resBox .trash {text-align: center;}
.resBox .trash img {height: 1.2rem;cursor: pointer;}
.resBox .favorite img:hover,.resBox .trash img:hover {opacity: .8;}
.resBox li .btnBlock {height: 2rem; margin-top: 0.5rem;}
.resBox li .btnBlock a {-webkit-font-feature-settings: "palt";display: block;width: 100%;max-width: 400px;padding: .5rem;border-radius: 2rem; background: #fff; font-feature-settings: "palt";font-size: 1rem;font-weight: bold;text-align: center; border: 1px solid #C7C7C7; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16); }
.resBox li .btnBlock a:hover {opacity: .7;}

.sliderArea  li {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 2.5rem;}
.sliderArea figure img {width: 100%;height: auto;}
.swiper-button-next.custom:after,.swiper-button-prev.custom:after {-webkit-transform: rotate(-135deg);display: block;width: 16px;height: 16px;clear: both;transform: rotate(-135deg);border-top: 2px solid #f6f6f6;border-right: 2px solid #f6f6f6;content: "";}
.swiper-button-prev {left: .5rem;}
.swiper-button-next {display: none;}
.min2_thum .resBox li{background: #fff;padding:0.5rem}
@media screen and (max-width: 480px) {

  .resArea.featuredTitle .thumBlock,
  .resArea.featuredTitle .informationBlock {
    width: auto;
    float: none;
  }

  .resArea.featuredTitle .thumBlock {
    margin-bottom: 1rem;
  }
}

@media screen and (max-width: 900px) {
  .resBox li:nth-child(6n+1) {
    clear: none;
  }

  .min2_thum .resBox li{
    width: 20%;
  }

  .min2_thum .resBox li:nth-child(5n+1){
    clear: both;
  }
}

@media screen and (max-width: 720px) {

  .min2_thum .resBox li{
    width: 25%;
  }

  .min2_thum .resBox li:nth-child(5n+1) {
    clear: none;
  }

  .min2_thum .resBox li:nth-child(4n+1) {
    clear: both;
  }
}

@media screen and (max-width: 530px) {

  .min2_thum .resBox li {
    width: 33.33%;
  }

  .min2_thum .resBox li:nth-child(4n+1) {
    clear: none;
  }

  .min2_thum .resBox li:nth-child(3n+1) {
    clear: both;
  }
}

@media screen and (max-width: 380px) {
  .min2_thum .resBox li {
    width: 50%;
  }

  .min2_thum .resBox li:nth-child(3n+1) {
    clear: none;
  }

  .min2_thum .resBox li:nth-child(2n+1) {
    clear: both;
  }
}
.introduction {margin:0 auto 2rem auto;}
.detailBlock .thumBlock {width:40%;max-width:11rem;margin-right:1rem;float:left;position: relative;z-index: 700;}
.detailBlock .thumBlock figure {display:block;text-align:center;}
.detailBlock figure.subscription .mark { width: 100%; background: #ff9204; line-height: 0; text-align: center; }
.detailBlock figure img {width:100%;height:auto;word-break:break-word;}
.detailBlock .authorName {margin-bottom:1rem;font-size:1.5rem;text-align:left;line-height: 2rem;}
.detailBlock .authorName a {text-decoration: underline;}
.detailBlock .genreBlock {margin-bottom:1rem;font-size:1.2rem;text-align:left;line-height: 1.7rem;word-break: break-all;}
.detailBlock .genreBlock a {text-decoration: underline; display: inline-block; }
.detailBlock .label {-webkit-font-feature-settings:"palt";margin-bottom:0.5rem;font-feature-settings:"palt";font-size:1rem;text-align:left;}
.detailBlock .label span {display: inline-block; margin: 0 0.5rem 0.5rem 0; padding: .3rem .4rem; border: 1px solid #C7C7C7;}
.detailBlock .label span.rating {border:1px solid #C7C7C7;}
.detailBlock .btnBlock a {-webkit-font-feature-settings:"palt";display:inline-block;width:13rem;margin-right:1rem;margin-bottom:1.2rem;padding:1rem 0;border-radius:4rem;font-feature-settings:"palt";font-size:1.1rem;font-weight:bold;text-align:center;vertical-align:top; background: #fff; border: 1px solid #C7C7C7; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16); }
.detailBlock .btnBlock a.subscribeBtn {background:#FF9204;}
.detailBlock .btnBlock a:hover {opacity:.7;}
.detailBlock .favoriteBlock {position:relative;margin-left:12rem;font-size:1rem;line-height:2rem;text-align:left;}
.detailBlock .favoriteBox {display:inline-block;}
.detailBlock .favoriteBox:hover {opacity:.6;}
.detailBlock .favoriteBlock img {position:absolute;top:50%;left:.5rem;height:1rem;margin-top:-.55rem;word-break:break-word;}
.detailBlock .favoriteBlock span {-webkit-font-feature-settings:"palt";padding:.3rem 1.5rem .3rem 2rem;border:1px solid #fff;border-radius:.4rem;background:#fff;color:#000;font-feature-settings:"palt";cursor:pointer;}
.detailBlock .favoriteBlock.on span {border:1px solid #777;background:#777;color:#f6f6f6;}
.detailBlock .favoriteBlock span:first-child{margin-left:.2rem;}


.introduction .titleName {font-size:1.8rem;margin: 0 0 .5rem 0;text-align: left;line-height: 2.3rem;font-weight: bold;}
.introduction .titleName a {text-decoration: underline;}
.thum_mhrk {text-align:center;}
.thum_mhrk img {width: 90%;max-width: 770px;}
.thum_km {text-align:center;}
.thum_km img {max-width: 770px;width:100%;}
@media screen and (max-width: 550px){.thum_km img {width: 90%;}}
.point_mark {display: inline-block; background-color:#C7C7C7; margin-right: 0.5rem; margin-bottom: 0.5rem;}
.point_box {width:90%;max-width:770px;padding:0.5rem 0.5rem 0;margin:1rem auto;border:solid 1px #C7C7C7;line-height:1.3;}
.point_box a {text-decoration: underline;}
.resArea p{margin-bottom: 0.5rem}
.endlinkArea {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: 1fr;grid-column-gap: 10px;grid-row-gap: 10px;}
/*.linkArea {display: flex;column-gap: 10px;}
.linkArea li {flex: 1;}*/

.linkBtnArea{
  margin-bottom: 2rem;
}
.linkArea {
    display: flex;
    margin: 0 0.25rem 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
@media screen and (min-width: 720px) {
    .linkArea {
        gap: 0rem !important;
    }
}
.linkArea a {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.75rem 0.5rem;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  padding: 0.5rem 1.5rem;
  min-height: 3.2rem;
  border-radius: 3rem;
  border: 1px solid #c7c7c7;
  background: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
  color: #1f1f1f;
  overflow-wrap: break-word;
  word-break: break-word;
}

/*.linkArea li {
    box-sizing: border-box;
    width: calc(33% - 0.5rem);
    height: 4rem;
    margin: 0.75rem 0.25rem;
    border-radius: 2rem;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
}
 */

/*.linkArea .btnBlock a,*/
.endlinkArea .btnBlock a{-webkit-font-feature-settings: "palt";display: block;padding: 1rem 1.6rem;border-radius: 2rem;background: #fff; font-feature-settings: "palt";font-size: 1.1rem;font-weight: bold;text-align: center; border: 1px solid #C7C7C7; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16); }
.linkArea .btnBlock a span,
.endlinkArea .btnBlock a span{display: inline-block;}
.linkArea .btnBlock a:hover,
.endlinkArea .btnBlock a:hover{opacity: .7;}
.disArea {width:90%;max-width:990px;padding:0.5rem 0.5rem 0.2rem;margin:2rem auto;border:solid 1px #C7C7C7;line-height: 1.3;}
.disArea a {text-decoration: underline;}
.endArea {width:90%;max-width:990px;margin: 0 auto 1rem;}
.endTitle {text-align: left;font-weight: bold;font-size: 1.5rem;line-height: 1.7rem;margin-bottom: 1rem}
.endtxt {text-align: left;font-size: 1.5rem;line-height: 1.7rem;}
/*@media screen and (max-width: 550px) {
	.linkArea {flex-direction: column; row-gap: 16px;}
	.endlinkArea {grid-template-columns: 1fr;}
}*/
@media screen and (max-width: 720px) {
  .linkArea {
      flex-direction: column;
      row-gap: 0px; 
      margin: 0 1rem 1rem;
  }
.linkArea li,.endlinkArea {
    display:block;
    margin: 0rem 0.25rem;
    width:98%;
}
}
.titleDescription {/*display: table-cell;*/ vertical-align: middle;text-align: center;font-weight: bold;font-size: 1rem;line-height: 1.2rem;margin: 0 -4% 1rem; padding: 0.2rem!important; position: absolute; box-sizing: border-box; width: 100%;}
/*sale*/
.detailBlock .saleBox span {
    display: inline-block;
    margin: 0 0.5rem 0.5rem  0;
    padding: 0.3rem;
    background: #EF3232;
    color: #fff;
    font-size: 1rem;
}
.resBox .saleBox {
    /*height: 3rem;*/
    margin: 0 0.1rem 0.5rem;
    text-align: left;
}
.resBox .saleBox p {
    margin: 0 0 0.3rem;
}
.resBox .saleBox span {
    display: inline-block;
    padding: 0.2rem;
    background: #EF3232;
    color: #fff;
    font-size: 0.7rem;
}
/*----------------------
secの背景色
----------------------*/
#sec1{
/*background: #e9e9e9;*/
margin-bottom: 1.5rem;
}
#sec2{
/*background: #d2eafa;*/
margin-bottom: 1.5rem;
}
#sec3{
/*background: #fadedc;*/
margin-bottom: 1.5rem;
}
/*----------------------
1グループ目
----------------------*/
.introduction_wrapper {
	padding: 0 4%;
	display: flow-root;
	height: auto;
}
.introduction .detailBlock_title {
  display: flex;
  box-sizing: border-box;
  margin: 0 0 1rem 0;
}
.introduction .thumBlock {
  width: 40%;
  box-sizing: border-box;
}
.introduction .detailBlock_right {
  width: 60%;
  box-sizing: border-box;
}
.introduction .btnBlock {
	text-align: right;
}
.introduction .storyBox{
  margin-bottom: 2rem;
}
.introduction .storyIntroduction {
  width: 100%;
  box-sizing: border-box;
}
/*----------------------
1グループ目　END
----------------------*/
/*----------------------
2グループ目
----------------------*/
.pickupArea {
position: relative;	
}
.pickup {
display: flex;
flex-wrap: wrap;
padding: 0 4% 1rem;
justify-content: space-between;
}
.box-spacer {
height: 2rem;
width: 100%;
}
.listBox {
background: #fff;
padding: 1rem;
margin-bottom: 1rem;
box-sizing: border-box;
width: calc(50% - 0.5rem); /* 初期2列 */
}
.pickup .thumBlock {
/*width: 8rem;*/
height: auto;
text-align: center;
}
.card-upper {
display: flex;
flex-direction: column;
flex: 1;
}
.listBox .titleName {
font-size: 1.3rem;
margin: 0 0 .5rem 0;
text-align: left;
line-height: 1.4rem;
font-weight: bold;
}

.listBox .titleName a {
text-decoration: underline;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
overflow: hidden;
font-size: 1rem;
line-height: 1.2;
word-break: normal;
}

.listBox .authorName {
margin-bottom: 1rem;
font-size: 1rem;
text-align: left;
line-height: 1.3rem;
}
.listBox .authorName a {
text-decoration: underline;
}
.listBox .genreBlock {
margin: 0 0 .7rem 0;
font-size: 1rem;
line-height: 1.3;
text-align: left;
}

.listBox .genreBlock a {
text-decoration: underline;
}
.listBox .card-upper .label {
margin-bottom: .5rem;
}
.listBox .btnBlock {
	text-align: right;
}
.readBtn {
background: #000;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 999px;
text-align: center;
margin: 0.5rem 0;
display: inline-block;
}
.tags, .intro {
margin-bottom: 0.25rem;
}

.listBox .btnBlock {
margin: 1rem auto;
}
.listBox .btnBlock a {
-webkit-font-feature-settings: "palt";
display: inline-block;
margin-bottom: 0rem;
padding: 1rem 2.5rem;
border-radius: 4rem;
font-feature-settings: "palt";
font-size: 1.1rem;
font-weight: bold;
text-align: center;
vertical-align: top;
background: #fff;
border: 1px solid #C7C7C7;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}

.listBox .btnBlock a span {
display: inline-block
}

.listBox .btnBlock a:hover {
opacity: .7
}

@media screen and (min-width: 551px) {
.listBox {
  width: calc(33.333% - 0.5rem); /* 3列用 */
} 
.listBox_titleBlock {
	display: block;
}
.card-upper {
	margin-left: 0;
}
.listBox .thumBlock {
    margin: 0 auto 1rem;
}
}
@media screen and (max-width: 550px) {
.listBox .thumBlock {
    margin: 0 auto 1rem;
}
.listBox_titleBlock {
	display: block;
}
.card-upper {
	margin-left: 0;
}
}

@media screen and (max-width: 766px) {
.listBox .btnBlock {
text-align: center;
}
}
@media screen and (min-width: 767px) {
.listBox {
width: calc(50% - 0.5rem); /* 2列用 */
  flex-direction: row;
}
.listBox_titleBlock {
	display: flex;
}
.card-upper {
	margin-left: 1rem;
}
.thumbBlock {
  width: 100px;
  margin-bottom: 0;
}
.informationBlock {
  margin-left: 1rem;
}
.pickup .thumBlock {
width: 8rem;
}
.listBox .btnBlock {
text-align: right;
white-space: nowrap;
}
}
@media screen and (max-width: 766px) {
.listBox .genreBlock, .listBox .storyIntroduction{
  display:none;
}
}

/*----------------------
2グループ目　END
----------------------*/
/*----------------------
3グループ目
----------------------*/
.thumList_wrapper {
	padding: 0 4%;
	display: flow-root;
	height: auto;
}
.resArea.min2_thum {
    width: calc(100% - 2rem);
    margin: 0 auto 2rem;
    background: #fff;
    padding: 1rem 1rem 0;
}

.min2_thum .resBox li {
    position: relative;
    background: #fff;
    padding: 0 0 0 1rem;
}

@media screen and  (min-width: 901px) {
.min2_thum .resBox li:nth-child(6n+1) {
    /* padding: 0; */
    margin-left: -0.5rem;
}
}
@media screen and (min-width:721px) and (max-width: 900px) {
.min2_thum .resBox li:nth-child(5n +1) {margin-left: -0.5rem;}
}

@media screen and (min-width:531px) and (max-width: 720px) {
.min2_thum .resBox li:nth-child(4n +1) {margin-left: -0.5rem;}
}

@media screen and (min-width:381px) and (max-width: 530px) {
.min2_thum .resBox li:nth-child(3n +1) {margin-left: -0.5rem;}
}

@media screen and (max-width: 380px) {
.min2_thum .resBox li:nth-child(2n +1) {margin-left: -0.5rem;}
}

/*
.min2_thum .resBox li {
    background: #fff;
    padding: 0.5rem;
    padding: 0 1rem 0 0;
}
@media screen and  (min-width: 901px) {
.min2_thum .resBox li:nth-child(6n) {
    padding-right: 0;
}
}
@media screen and (min-width:721px) and (max-width: 900px) {
.min2_thum .resBox li:nth-child(5n) {padding-right:0;}
}

@media screen and (min-width:531px) and (max-width: 720px) {
.min2_thum .resBox li:nth-child(4n) {padding-right:0;}
}

@media screen and (min-width:381px) and (max-width: 530px) {
.min2_thum .resBox li:nth-child(3n) {padding-right:0;}
}

@media screen and (max-width: 380px) {
.min2_thum .resBox li:nth-child(2n) {padding-right:0;}
}*/
/*----------------------
3グループ目　END
----------------------*/
/*----------------------
トップバナー
----------------------*/
.topBannerArea {
  position: relative;
  width: 100%;
  max-width: 990px;
  min-height: 89px;
  margin: 0 auto 2rem;
}

.topBannerArea img {
  width: 100%;
  max-width: 990px;
  margin: auto;
}
/*----------------------
トップバナーエリア　文字
----------------------*/
.topBannerArea p {
  margin: 1rem 1rem 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.3;
}

.topBannerArea a {
  text-decoration: underline;
}

.topBannerArea .topPeriod{
  margin-top: 1.5rem;
  font-size: 1.1rem;
}

.topBannerArea .topPeriod div{
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
}

/*----------------------
トップエリア　ボタン
----------------------*/
.topBannerArea p {
  margin: 1rem 1rem 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.3;
}

.topTextArea .btnBox {
  display: flex;
  margin: 0 1rem 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.topTextArea .btnBox a {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  /*width: calc(50% - 1rem);
  border-radius: 2rem;
  height: 4rem;*/
  margin: 0.75rem 0.5rem;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  padding: 0.5rem 1.5rem;
  min-height: 4rem;
  border-radius: 3rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media screen and (max-width:720px) {
  .topTextArea .btnBox {
    display: block;
    padding: 15px 0;
    
  }

  .topTextArea .btnBox a {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 98%;
    min-height: 4rem;
    margin: 0 auto;
    border-radius: 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 0.5rem 1.5rem;
  }

  .topTextArea .btnBox a+a {
    margin-top: 1rem;
  }
}
/*
@media screen and (max-width:720px) {
  .topTextArea .btnBox a {
    padding: 0;
  }
}*/

.btnBox .btnOrange {
  border: 1px solid #c7c7c7;
  background: #ff9204;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
  color: #1f1f1f;
}

/*----------------------
紹介文
----------------------*/
.storyIntroduction .toggle-input {
  display: none;
}

.storyIntroduction .storytext {
  overflow: hidden;
  max-height: 2.8rem;
  line-height: 1.4rem;
  transition: max-height 0.4s ease;
}

.storyIntroduction .toggle-input:checked~.readmore_content .storytext {
  max-height: 1000px;
}

.storyIntroduction .readmore_content {
  position: relative;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1rem;
}

/* 右下配置 */
.storyIntroduction .toggle-label {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  padding: 0.3em 0.6em;
  color: rgb(0, 0, 0);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
}

/* 表示文言切り替え */
.storyIntroduction .toggle-input~.readmore_content .toggle-label::before {
  content: "Read more";
}

.storyIntroduction .toggle-input:checked~.readmore_content .toggle-label::before {
  content: "Close";
}

/*----------------------
紹介文 END
----------------------*/
/*----------------------
クーポン　還元BOX　END
----------------------*/
.coupon-detail {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
  width: calc(90% + 1rem);
  /*margin: 1.5rem auto 2rem;*/
  margin: 2rem auto 2rem;
}

.coupon-detail h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #333;
}

.coupon-detail .desc {
  margin-bottom: 12px;
}

.coupon-box {
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
}

.coupon-box .row:last-child {
  border-bottom: none;
}

.coupon-box .label {
  flex: 0 0 25%;
  background: #fffece;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  padding: 0.5rem;
  font-weight: bold;
}

.back-detail .label {
  background: #addeff;
}

.coupon-box .value {
  flex: 1;
  padding: 0.5rem;
}

.coupon-box .value ul {
  margin: 0;
}

.coupon-box a {
  color: #0073e6;
  text-decoration: underline;
}

.notice {
  font-size: 12px;
  line-height: 1.6;
  color: #444;
  margin-top: 10px;
}

.notice .red {
  color: #c00;
}

.coupon-detail .couponGetBtn a {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: 70%;
  margin: 0rem auto 1rem;
  border-radius: 3rem;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.8rem;
  text-align: center;
  padding: 1.2rem 1rem;
}

.btnBox .noBtn {
  box-sizing: border-box;
  display: inline-block;
  width: 80%;
  padding: 1rem;
  border: 1px solid #c7c7c7;
  border-radius: 4rem;
  background: #707070;
  color: #fff;
  font-feature-settings: "palt";
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center
}

.btnBox .couponNone {
  font-size: 1.25rem;
  font-weight: bold;
  padding: 1.5rem 0;
}

@media (max-width: 1024px) {
  .coupon-detail .couponGetBtn a {
    width: 80%;
  }
}

@media (max-width: 767px) {
  .coupon-detail .couponGetBtn a {
    width: 98%;
    font-size: 1.3rem;
    line-height: 1.5rem;
  }
  .btnBox .noBtn {
    width: 98%;
  }
}

/*----------------------
クーポン　還元BOX　END
----------------------*/
/*----------------------
ページャー　END
----------------------*/
.pager {
  width: 100%;
  margin: 2rem auto 2rem;
  overflow: hidden;
  text-align: center
}

.pager .pages {
  display: inline-block
}

.pager .pages li {
  margin-right: .5rem;
  float: left
}

.pager .pages li a,
.pager .pages li span {
  box-sizing: border-box;
  display: block;
  padding: .8rem;
  border: 1px solid #c7c7c7;
  border-radius: .4rem;
  background: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
  font-size: 1.2rem;
  line-height: 1.2rem
}

.pager .pages li.selected span {
  border-color: #c7c7c7;
  background: #e5e5e5;
  color: #707070;
  font-weight: bold
}

.pager .pages li.leader {
  padding-top: .3rem
}

.pager .pages li.nopage {
  margin-top: 1px;
  padding: .8rem;
  opacity: .6
}

/*----------------------
ページャー　END
----------------------*/
/*----------------------
終了ページ　リンク
----------------------*/


.resArea.endTextlink {
    margin: 1rem auto 0;
    background: #fff;
    padding: 1rem;
}
.resArea.endTextlink + .resArea{
    margin: 0 auto 0;
}
.resArea.endTextlink a {
  color: #1f1f1f;
  display: block;
  padding: 1rem 1.6rem;
  border-radius: 2rem;
  background: #ffffff;
  font-feature-settings: "palt";
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  border: 1px solid #C7C7C7;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 550px) {
.resArea.endTextlink {
    padding: 1rem 1rem 0;
}
.resArea.endTextlink + .resArea {
    padding: 0.5rem 1rem 1rem;
}
}
/*----------------------
snsエリア
----------------------*/
#sec1+.secTitle,
#sec2+.secTitle,
#sec3+.secTitle{
  margin: 2rem auto 0rem !important;
}

/*----------------------
書影マーク部分
----------------------*/

.special figure.subscription a{
    display: block;
    position: relative;
    background: #f7f9fa
}

.special figure.subscription a::before {
    display: block;
    padding-top: 150%;
    content: ""
}

.special figure.subscription img {
    -o-object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    word-break: break-word
}

.special figure.subscription a .only {
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.7rem;
    height: 2rem;
    background-image: url("/s/images/icon/icon_onlyMP.svg");
    background-repeat: no-repeat;
    background-size: 100% auto
}

.special figure.subscription a .premium {
    display: block;
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 5rem;
    height: 2rem;
    background-image: url("/s/images/icon/label_premium.svg");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 100% auto
}

.thumBlock{
    position: relative;
}

.special figure.subscription  + .sale span{
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0.17rem 0.17rem 0.07rem;
    border: 1px solid #ef3232;
    border-radius: 2px;
    background: #ef3232;
    color: #fff;
    font-feature-settings: "palt";
    font-size: 1rem;
    line-height: 1;
    text-align: center
}
.saleBox span {
    display: inline-block;
    margin: 0 0.5rem 0.5rem 0;
    padding: 0.3rem;
    background: #EF3232;
    color: #fff;
    font-size: 1rem;
}
.resBox .saleBox {
    /* height: 3rem; */
    margin: 0;
    text-align: left;
}

@media screen and (min-width:720px) {

/* ▼▼ 上部黄色ボタン個数によるレイアウト ▼▼ */

.btnBox.layout-1 a {
    width: calc(100% - 2.5rem);
}

.btnBox.layout-2 a {
    width: calc(50% - 2rem);
}

/* ★ 3列の幅を 1.65rem に変更 */
.btnBox.layout-3 a {
    width: calc(33.333% - 1.65rem);
    font-size: 1.1rem;
}

.btnBox.layout-4 a {
    width: calc(50% - 2rem);
}

/* 5個 → 2 + 3 */
.btnBox.layout-5 a:nth-child(1),
.btnBox.layout-5 a:nth-child(2) {
    width: calc(50% - 2rem);
}

.btnBox.layout-5 a:nth-child(n+3) {
    width: calc(33.333% - 1.65rem);
        font-size: 1.1rem;
}

/* 6個 → 3列 */
.btnBox.layout-6 a {
    width: calc(33.333% - 1.65rem);
    font-size: 1.1rem;
}

/* 7個 → 2 + 2 + 3 */
.btnBox.layout-7 a:nth-child(1),
.btnBox.layout-7 a:nth-child(2),
.btnBox.layout-7 a:nth-child(3),
.btnBox.layout-7 a:nth-child(4) {
    width: calc(50% - 2rem);
}

.btnBox.layout-7 a:nth-child(n+5) {
    width: calc(33.333% - 1.65rem);
    font-size: 1.1rem;
}

.btnBox.layout-8 a {
    width: calc(50% - 2rem);
}

/* 9個 → 3列 */
.btnBox.layout-9 a {
    width: calc(33.333% - 1.65rem);
    font-size: 1.1rem;
}

.btnBox.layout-10 a {
    width: calc(50% - 2rem);
}

/* ▼▼ 下部白色ボタン個数によるレイアウト ▼▼ */

/* 共通：a を横並び・折り返し */
.linkArea {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* 各レイアウト ---------------------------- */

/* 1個 → 全幅 */
.linkArea.layout-1 a {
    width: calc(100% - 2.5rem);
}

/* 2個 → 2列 */
.linkArea.layout-2 a {
    width: calc(50% - 2rem);
}

/* 3個 → 3列 */
.linkArea.layout-3 a {
    width: calc(33.333% - 1.65rem);
}

/* 4個 → 2列 × 2行 */
.linkArea.layout-4 a {
    width: calc(50% - 2rem);
}

/* 5個 → 上2、下3 */
.linkArea.layout-5 a:nth-child(1),
.linkArea.layout-5 a:nth-child(2) {
    width: calc(50% - 2rem);
}
.linkArea.layout-5 a:nth-child(n+3) {
    width: calc(33.333% - 1.65rem);
}

/* 6個 → 3列 */
.linkArea.layout-6 a {
    width: calc(33.333% - 1.65rem);
}

/* 7個 → 2列×2行 + 下3列 */
.linkArea.layout-7 a:nth-child(-n+4) {
    width: calc(50% - 2rem);
}
.linkArea.layout-7 a:nth-child(n+5) {
    width: calc(33.333% - 1.65rem);
}

/* 8個 → 2列 */
.linkArea.layout-8 a {
    width: calc(50% - 2rem);
}

/* 9個 → 3列 */
.linkArea.layout-9 a {
    width: calc(33.333% - 1.65rem);
}

/* 10個 → 2列 */
.linkArea.layout-10 a {
    width: calc(50% - 2rem);
}

}