@charset "UTF-8";

/*-------------------------------------------
 基本設定
-------------------------------------------*/
.cp-main {
	/*色設定*/
	--col-red: #B11915;
	--col-yellow: #D3A80A;
}


/*スマホの時だけ改行*/
.br-sp {
    display: block;
}

@media (min-width: 769px) {
    .br-sp {
        display: none;
    }
}

.cp-main li, .cp-main dt, .cp-main dd {
	line-height: 1.5;
}

/*-------------------------------------------
 page固有
-------------------------------------------*/
/* メイン背景*/ 
.cp-main:before{
	content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: var(--col-red) url(../img/bg-main_sp.png) no-repeat 50% 0% / cover;
}

@media screen and (min-width:769px) {
	.cp-main:before{
		background: var(--col-red) url(../img/bg-main.png) no-repeat 50% 0% / cover;
	}
}

/* パンクズ文字色 */
.o-text-breadcrumb ul li {
	color: var(--col-white);
}
.o-text-breadcrumb ul li:not(:last-of-type)::after{
	color: var(--col-white);    
}
.o-text-breadcrumb ul li a {
	color: #ECCC4E;
}

/* section-title */
.cp-main .cp-detail-title__yellow {
	background: var(--col-yellow);
	color: var(--col-white);
	font-size: clamp(20px, 5.33vw, 28px);
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
	padding: 10px 0;
	width: 100%;
}

/*-------------------------------------------
 lead-block
-------------------------------------------*/
.cp-main .lead-block__main-att {
    font-size: clamp(12px, 3.2vw, 16px);
 	text-align: center;
    color: var(--col-white);
	padding-top: 5px;
}

.cp-main .lead-block__textbg--red {
	background-color: var(--col-red);
}
.cp-main .lead-block__inner {
	text-align: center;
    color: var(--col-white);
}
.cp-main .lead-block__main-text {
    font-size: clamp(13px, 3.46vw, 19px);
    font-weight: bold;
    line-height: 1.5;
    color: var(--col-white);
    padding-bottom: .5em;
    /*文字の縁取り※数値に注意*/
    text-shadow: 0 3px 0 #660000,
                2.1px 2.1px 0 #660000,
                3px 0 0 #660000,
                2.1px -2.1px 0 #660000,
                0 -3px 0 #660000,
                -2.1px -2.1px 0 #660000,
                -3px 0 0 #660000,
                -2.1px 2.1px 0 #660000;
}
.cp-main .text--deco--yellow {
    color: #FFED9C;
}
.cp-main .lead-padding {
	padding: calc( var(--gap-base) / 3) auto var(--gap-base);
}
.cp-main .lead-block-preasent-items {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.cp-main .lead_bottom-img {
    width: 80%;
    padding-top: 5px;
}
.cp-main .cont-padding--lead {
    padding: .5em var(--gap-base) 0;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width:769px) {
    .cp-main .lead-block__main-att{
	    padding-top: 10px;        
    }
    .cp-main .lead-block__main-text {
        padding-top: .5em;
    }
    .cp-main .lead-block-preasent-items {
        display: block;
    }
    .cp-main .lead-block-preasent-item {
        margin-bottom: 5px;
    }
    .cp-main .lead_bottom-img {
        width: 490px;
        padding-top: 5px;
    }
    }

/*-------------------------------------------
 entry-block
-------------------------------------------*/
.cp-main .entry-block__inner {
    background: #FFF;
    border-radius: 0 0 16px 16px;
}
.cp-main .entry-block__frame {
    max-width: 600px;
    margin: auto;
}
.cp-main .entry-block__title {
    display: block;
    margin: 0 auto;
    font-size: clamp(16px, 4.2vw, 24px);
    color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: 1.3;
    padding: 10px 0;
    background-color: var(--col-yellow);
    border-radius: 16px 16px 0 0;
}

/*入会ボタン*/
.nyukai-block__wrapper {
	padding-top: var(--gap-base);
}
.cp-main .nyukai-block__title {
    display: block;
    margin: 0 auto;
    font-size: clamp(16px, 4.2vw, 24px);
    color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: 1.3;
    padding: 10px 0;
    background-color: #6BBA9E;
    border-radius: 16px 16px 0 0;
}
.cp-main .nyukai__annotation {
    font-size: clamp(12px, 3.2vw, 16px);
    text-align: left;
    margin-top: 1.2em;
    font-weight: bold;
}
@media screen and (min-width:769px) {
	.cp-main .nyukai__annotation{
		text-align: center;
	}
    .nyukai-block__wrapper {
        padding-top: calc(var(--gap-base) / 2);
    }
}

.cp-main .btn-nyukai {
    background: var(--col-magazine-green);
}
.cp-main .btn-shadow.btn-nyukai {
    box-shadow: 0px 3px 0 #00623F;
}

/* 黒字のスラッシュ文字 */
.cp-main .text--deco-slash-black {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: min(2% , 8px);
    margin-bottom: min(2% , 8px);
    font-weight: bold;
    color: #000;
}
.cp-main .text--deco-slash-black::before, .cp-main .text--deco-slash-black::after {
    content: "";
    height: 2em;
    width: 2px;
    background: #000;
    vertical-align: bottom;
}
.cp-main .text--deco-slash-black::before {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
    margin-right: 0.7em;
}
.cp-main .text--deco-slash-black::after {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    margin-left: 0.7em;
}

/*-------------------------------------------
 対象誌はコチラ！
-------------------------------------------*/

/*背景*/
.cp-main .cp-detail-block {
    background: var(--col-white);    
}
@media screen and (min-width:769px) {
	.cp-main .cp-detail-block {
    background: var(--col-white) url(../img/bg-white.png) repeat-y 50% 0;
    background-size: 100% auto;
}
}

.cp-main .cp-detail_subtitle {
    padding-bottom: 20px;
}

/* 手動棚　共通設定 */
.cp-main .cp-shelf{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.6em .5em;
}
.cp-main .cp-shelf__item{
	display: flex;
    flex-direction: column;
	justify-content: space-between;
}
.cp-main .cp-shelf__label--hidden{
    visibility: hidden;
}
.cp-main a.cp-shelf__link{
	text-decoration: none;
    color: var(--col-book-black);
}
.cp-main .cp-shelf__img-box{
	display: block;
	/* 挿入される書影によって調整 */
	padding-top: min(130%, 256px);
	position: relative;
	margin-bottom: 6px;
}
.cp-main .cp-shelf__img-box-inner{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* タイトルがない場合のマージン */
.cp-main .cp-shelf__link + .cp-shelf__btns{
	margin-top: 6px;
}

.cp-main .cp-shelf__img{
	display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 0;
    /*-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);*/
}
.cp-main .cp-shelf__title{
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
    font-weight: bold;
}
.cp-main .cp-shelf__btns{
	display: grid;
	gap: 6px;
}
.cp-main .cp-shelf__btn{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3px .2em;
	line-height: 1;
	font-size: clamp(11px , 2.8vw , 14px);
    opacity: 1;
	line-height: 1;
	text-align: center;
	background: var(--col-magazine-green);
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 8px;
}
.cp-main .cp-shelf__btn--02{
	color: var(--col-magazine-green);
	border: 1px solid var(--col-magazine-green);
	background: #FFF;
}

/* ボタンがない時にはこのclassを追加 */
.cp-main a.cp-shelf__btn--hidden{
	visibility: hidden;
}

@media screen and (min-width:769px) {
    .cp-detail-block__wrapper {
        width: 100%;
    }
	.cp-main .cp-shelf{
		grid-template-columns: repeat(3, 1fr);
        gap: 2.6em 1.6em;
	}
    .cp-main .shelf-block-width {
        width: 80%;
        margin: 0 auto;
    }
    .cp-main .cp-detail_subtitle {
        width: 80%;
        margin: 0 auto;
    }
}

/*-------------------------------------------
 dマガジンからのプレゼント！
-------------------------------------------*/

/*背景*/
.cp-main .cp-detail-present-block {
    background: url(../img/yellow_bg.png);  
}

/*プレゼント1,2画像*/
.cp-main .detail-present_padding {
    padding-top: calc( var(--gap-base) / 3);
    padding-bottom: calc( var(--gap-base) / 3);
}
.cp-main .cp-detail-present__label{
    padding-bottom: var(--gap-base--wide);
}

/*ベストバイ＆高評価アイテム一覧タイトル画像*/
.cp-main .present__list-title {
    padding-bottom: calc( var(--gap-base));    
}

/*アイテム一覧アコーディオン*/
/* 背景 */
.cp-main .accordion-area{
	background-color: #fff;
}

.cp-main .accordion-area__title{
	font-size: clamp(16px , 3vw , 20px);
    font-weight: 700;
    text-align: center;
	background: var(--col-red);
	color: #fff;
	padding: .7em;
	position: relative;
	opacity: 1;
	transition: all .3s;
}
.cp-main .accordion-area__title .small-txt {
    font-size: clamp(14px , 3vw , 20px);
}

.cp-main .accordion-area__title:hover{
	cursor: pointer;
}

.cp-main .accordion-area__icon {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translatey(-50%);
	width: 22px;
	height: 22px;
  }

.cp-main .accordion-area__icon__parts {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
  }

.cp-main .accordion-area__icon__parts::before,
.cp-main .accordion-area__icon__parts::after {
	position: absolute;
	content: "";
	display: block;
	transition: all 0.3s;
	background: #FFF2C2;
	left: 50%;
	top: 50%;
	width: 80%;
	height: 4px;
	transform: translate(-50%, -50%);
  }

/* plus */
.cp-main .accordion-area__icon__parts::before {
	transform: translate(-50%, -50%) rotate(90deg);
}
  
/* minus */
.cp-main .acc-title.is-open .accordion-area__icon__parts::before {
	transform: translate(-50%, -50%) rotate(0deg);
}

.cp-main .accordion-area__main {
    padding: 2% 4%;
    border: 2px solid var(--col-red);
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    display: none;
    line-height: 1.5;
    letter-spacing: .5px;
}
.cp-main .accordion-area__main .present-list-items {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background-image: linear-gradient(
        to right,
        var(--col-yellow) 25%, 
        transparent 0%
    );
    background-size: 8px 2px; /* 点の感覚と大きさを調整 */
    background-repeat: repeat-x;
}

.cp-main .accordion-area__main .present-list-items:first-child {
    background-image: none;
}

.cp-main .accordion-area__main .present-list-items .present-number {
    font-weight: bold;
    flex-shrink: 0; /* 数字が潰れないように */
}

.cp-main .accordion-area__main .present-list-items .present-text {
    line-height: 1.6;
}


@media (min-width: 769px) {
.cp-main .accordion-area__icon {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translatey(-50%);
	width: 40px;
	height: 40px;
  }

	.cp-main .accordion-area__icon__parts::before,
	.cp-main .accordion-area__icon__parts::after {
	height: 4px;
    width: 60%;
  }
}

.cp-main .text-att__box a {
    color: var(--col-red);
    text-decoration: underline;
}
.cp-main .outline-block a {
    color: var(--col-red);    
    text-decoration: underline;
}

/* ※付き文言 */
.cp-main .text-att {
  width: 100%;
  padding: 0;
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.7;
}
.cp-main .text-att::before {
  content: '※';
  letter-spacing: 5px;
}
.cp-main .text-att__red {
    color: var(--col-red);
    font-weight: bold;
}

/*-------------------------------------------
 ベストバイ＆高評価アイテムのご紹介
-------------------------------------------*/

/*スライダー*/
/*ピンチアウトできるように*/
.cp-main .swiper.swiper-horizontal {
 touch-action: auto;
}


.cp-main .swiper-parent {
  position:relative;
}

/*インジケーターの位置*/
.cp-main .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -20px; 
}
.swiper-pagination-bullet-active {
    background: var(--col-red);
}

/*ページ送りボタン指定*/
.cp-main .swiper-button-next,
.cp-main .swiper-button-prev {
    position: absolute;
    top: 53%;
    width: 30px;
    height: 30px;
    z-index: 1;
    cursor: pointer;
    background-size: 30px 30px;
    background-position: center;
}

/* 矢印を消して画像に変更する */
.cp-main .swiper-button-prev:after,
.cp-main .swiper-button-next:after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 30px;
  width: 30px;
  margin: auto;
}

.cp-main .swiper-button-prev:after {
  background-image: url("../img/arrow_l.png");
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset,-10px);
    right: auto;
}

.cp-main .swiper-button-next:after {
  background-image: url("../img/arrow_r.png");
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset,-10px);
    left: auto;
}

@media screen and (min-width: 768px){
/* PCのみ両端ぼかし */
.cp-main .swiper {
  mask-image: linear-gradient(
    to right,
    transparent 0 5%,
    #000 10% 90%,
    transparent 95% 100%
  );
}
/*PCのみ両端ページを半透明*/
.cp-main .swiper-slide-next,
.cp-main .swiper-slide-prev {
    opacity: 0.5;
    transition: .3s all ease-in-out;
}
}

/*もっと詳しく！ 確認したい方へ*/
.cp-main .detail-more-box {
    position: relative;
    padding-top: 76px;
    margin-top: 10px;
}

.cp-main .detail-more-box .detail-more-title-img {
    position: absolute;
    width: 225px;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    line-height: 1;
    padding: 0;
    margin: 0;
}
.cp-main .detail-more-box .detail-more-text {
  font-size: 16px;
  font-weight: bold;
  padding: 60px 20px 30px;
  border: 5px solid var(--col-red);
  border-radius: 1rem;
  background-color: var(--col-white);
  color: var(--col-red);
  line-height: 1.3;
  text-align: center;
}

.cp-main .detail-more-box .detail-more-text .text__black {
    color: #000;
    font-weight: normal;
}

@media screen and (min-width: 768px){
    .cp-main .detail-more-box {
        padding-top: 0;
    }
    .cp-main .detail-more-box .detail-more-title-img{
        width: 768px;
        top: -35px;
    }

    /* swiperのpadding */
    .cp-main .swiper-container{
        padding-bottom: calc( var(--gap-base) + 1em);
    }
    
    .cp-main .detail-more-box .detail-more-text {
        padding: 40px 20px 30px;
    }
    /*ページ送りボタン指定*/
    .cp-main .swiper-button-next,
    .cp-main .swiper-button-prev {
        width: 50px;
        height: 50px;
        background-size: 50px 50px;
    }

    /* 矢印を消して画像に変更する */
    .cp-main .swiper-button-prev:after,
    .cp-main .swiper-button-next:after {
    height: 50px;
    width: 50px;
    }

    .cp-main .swiper-button-prev:after {
    left: -15px;
    }

    .cp-main .swiper-button-next:after {
    right: -15px;
    }
}

/*-------------------------------------------
　dマガジンとは
-------------------------------------------*/
/* 背景 */
.cp-main .about-dmag-block{
    background: url(../img/about-dmag_sp-bg.png) no-repeat 50% 0% / cover;
    position: relative;
}

.cp-main .about-dmag-block__inner{
	position: relative;
	margin: auto;
}

.cp-main .about-dmag-block__img{
    max-width: 600px;
	display: block;
	margin: auto;
}

.cp-main .about-dmag-block__btn{
    position: absolute;
	bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--col-red);
    font-size: clamp(14px, 2.8vw, 24px);
    padding: 0.4em;
    width: min(70%, 440px);
    height: 2.5em;
}

.cp-main .about-dmag-block__btn.arrow:before{
	width: 8px;
	height: 8px;
}

@media (min-width: 769px) {
	.cp-main .about-dmag-block__btn.arrow:before{
        width: 13px;
        height: 13px;
		right: 20px;
	}
    .cp-main .about-dmag-block{
    background: url(../img/about-dmag_bg.png) no-repeat 50% 0% / cover; 
    }
}

/* hoverで透明にしたいものにだけ */
@media (min-width: 769px) {
	.cp-main .about-dmag-block__btn{
		opacity: 1;
	}

	.cp-main .about-dmag-block__btn:hover {
		opacity: .7;
	}
}


/*-------------------------------------------
 キャンペーン規約
-------------------------------------------*/
/* 背景 */
.cp-main .outline-block{
	background: #FFF;
}

/*フォントサイズ・行間設定*/
.outline-block p,
.outline-block dd,
.outline-block li,
.outline-block li{
	line-height: 1.5;
	font-size: 14px;
}

/* 余白調整定１ */
.outline-block ul{
	margin-top: .3em;
}

.outline-block .list-h {
	margin-top: 1em;
	font-weight: 700;
}


/* 余白調整定2 */
.outline-block li,
.outline-block li{
	margin-bottom: .3em;
}

.outline-block li:last-child,
.outline-block li:last-child{
	margin-bottom: 0;
}

.cp-main .outline-block__title{
	text-align: center;
	font-size: clamp(18px , 4vw ,26px);
	background: var(--col-yellow);
	padding: .5em;
	color: #FFF;
}

.cp-main .outline-block__lead{
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid var(--col-magazine-gray);
}

.cp-main .outline-block__list{
	border-radius: 0 0 15px 15px;
}

.cp-main .outline-block__item-title{
    border: 2px solid var(--col-yellow);
	background: #FFF;
	text-align: center;
    border-radius: 5px;
    color: var(--col-yellow);
    font-size: clamp(16px , 2.6vw, 18px);
    padding: .5em .5em .3em .5em;
	font-weight: bold;;
    margin-bottom: .5em;
	line-height: 1.2;
}

.cp-main .outline-block__item-title + .outline-block__item-disc {
    margin-bottom: 2em;

}

.cp-main .outline-block__item-title  + .outline-block__item-disc:last-child {
  margin-bottom: 0;
}


@media (min-width: 769px) {
	.cp-main .outline-block__item-title {
		padding: .3em;
	}
}

/*-------------------------------------------
　追従バナー
-------------------------------------------*/
.cp-main .float-area__inner {
    position: fixed;
    z-index: 100;
    bottom: 0;
    right: 0;
}
.cp-main .float-area__banner-block {
    width: 100vw;
    padding: 12px 0;
    background: rgba(255, 255, 255, 0.7);
}
.cp-main .float-area__banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(250px, 70vw, 500px);
    height: 57px;
    font-size: clamp(16px, 4.3vw, 24px);
    font-weight: bold;
    color: #fff;
    background: linear-gradient(#df202a, #c61c26);
    border-radius: 25px;
    margin: 0 auto;
    position: relative;
    padding: 12px;
    border: 2px solid transparent;
    box-shadow: 0 2px 4px -2px rgb(33 37 56 / 25%);
    border-color: rgb(80, 80, 80, 0.1);
}
.cp-main .float-area__banner-arrow:before {
    position: absolute;
    content: "";
    right: 10px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--col-white);
    border-right: 2px solid var(--col-white);
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
}
.cp-main .yellow {
    color: #ffff00;
}

@media (min-width: 769px) {
	.cp-main .float-area__banner {
        border-radius: 50px;
    }    
	.cp-main .float-area__banner-arrow:before {
        right: 15px;
	}
}

/*-------------------------------------------
ページトップ
-------------------------------------------*/
.cp-main .btn-top {
    width: 70px;
    height: 70px;
}