@charset "UTF-8";
/*-------------------------------------------
 基本設定
-------------------------------------------*/
/* アンカー位置調整 */
html {
    scroll-padding-top: 85px;
}

@media (min-width: 769px) {
	html {
		scroll-padding-top: 140px;
	}
}

/* 表示・非表示 */
.cp-only__pc {
	display: none;
  }
  .cp-only__sp {
	display: block;
  }
  @media (min-width: 769px) {
	.cp-only__pc {
	  display: block;
	}
	.cp-only__sp {
	  display: none;
	}
}

/*-------------------------------------------
 page固有
-------------------------------------------*/
.bg-area {
	width: 100%;
    height: 1875px;
    background-image: url("../img/lp_bg_univ_1500x3750_grad.png");
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    background-color: #94cbe3;

}

.o-text-breadcrumb ul li {
	color: #000;
}

.cp-main .text--deco-pink {
	color: #FE046A;
}
.cp-main .text--deco-small {
	font-size: clamp(12px, 3.2vw, 14px);
}
.cp-main .text--deco-small2 {
	font-size: clamp(20px, 5.33vw, 24px);
}
.cp-main .text--deco-small__block {
	display: block;
	font-size: clamp(12px, 3.2vw, 14px);
	line-height: 1.5;
}

img {
	vertical-align:top;
}
@media (min-width: 769px) {
.bg-area {
	background-size: cover;
	}
}
/*-------------------------------------------
 MVエリア
-------------------------------------------*/
.cp-main .mv-block_date {
	background-color: #0064D9;
}

.cp-main .mv-block_date__inner {
	padding: 1em;	
}

.cp-main .mv-block_date__inner p{
	font-size: clamp(15px, 4vw, 23px);
	color: #FFF;
	text-align: center;
	font-weight: 500;
	line-height: 1.5;	
}

/*-------------------------------------------
 リード文エリア
-------------------------------------------*/
.cp-main .lead-block {
	display: block;
	margin: 0 auto;
}

.cp-main .lead-block-box__1 {
	background-color: #fff;
	border: 1px solid #000;
}

.cp-main .lead-block-box__1 h2 {
	background-color: #000;
	padding: 0.8em;
}
.cp-main .lead-block-box__1 img {
	display: block;
	width: min(90%, 375px);
	margin: 0 auto;
}
.cp-main .lead-block-box__2 {
	position: relative;
	background-color: #fff;
	border: 1px solid #000;
	margin: 2em auto 0em;
}

.cp-main .lead-block__text_1 {
	text-align: center;
	font-size: clamp(16px, 4.26vw, 24px);
	font-weight: 600;
	line-height: 1.5;
	padding: 1.2em;	
}

.cp-main .lead-block__text_2 {
	text-align: center;
	font-size: clamp(16px, 4.26vw, 24px);
	font-weight: 600;
	line-height: 1.5;
	padding: 1.2em 1.2em 0;	
}

.cp-main .lead-block__text--underline {
	text-decoration: underline;
	text-underline-offset: 4px;
	font-size: clamp(14px, 3.73vw, 20px);
}
.cp-main .lead-block__text--small {
	font-size: clamp(14px, 3.73vw, 20px);
}

.cp-main .lead-block-sub__h {
	position: absolute;
	width: min(30%, 125px);																	
	top: -30px;
	left: 0;
}

@media (max-width: 500px) {
	.cp-main .lead-block-sub__h {
	width: 100px;	
	}
}

@media (min-width: 769px) {
	.cp-main .lead-block__inner {
		max-width: var(--maxwidth);
		padding: 0;
	}
	.cp-main .lead-block-box__1 img {
	width: min(90%, 960px);
	}
	.cp-main .lead-block-box__2 {
	margin-top: 3em;
	}
	.cp-main .lead-block-sub__h {
	left: -20px;
	}
}
/*-------------------------------------------
 lead-block 書影棚
-------------------------------------------*/

.cp-main .lead-block__shelf_list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5em;
	padding: 1em 1em 2em;
}

.cp-main .lead-block__shelf__item {
	display: flex;
    flex-direction: column;
	justify-content: space-between;
}

.cp-main .lead-block__shelf__img-box {
	display: block;
	/* 挿入される書影によって調整 */
	padding-top: min(130%, 512px);
	position: relative;
	margin-bottom: 6px;
}

.cp-main .lead-block__shelf__img-box-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.cp-main .lead-block__shelf__img {
	display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.cp-main .lead-block__shelf__title {
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
	padding-bottom: 0.5em;
	font-weight: bold;
}

.cp-main .lead-block__shelf__labels {
	display: grid;
	gap: 6px;
}

.cp-main .lead-block__shelf__label {
	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: #FFF;
	color: #FE046A;
	text-decoration: none;
	border: 1px solid #FE046A;
    font-size: 12px;
    padding: 5px 5px;
	font-weight: bold;
}

@media (min-width: 769px) {
	.cp-main .lead-block__shelf__item {
		width: 215px;
		margin: 0 auto;
	}
	.cp-main .lead-block__shelf_list {
		width: 700px;
		margin: 0 auto;
	}
}

/*-------------------------------------------
 3stepエリア
-------------------------------------------*/
.cp-main .step-block {
    background-image: url("../img/lp_bg-3step.png");
	background-position: center;
	background-size: contain;
}

.cp-main .step-block__inner {
	width: 100%;
	margin-left: auto;
    margin-right: auto;
}

.cp-main .step-block-box {
	background-color: #fff;
	border: 1px solid #000;
	padding: var(--gap-base);
	margin-left: auto;
    margin-right: auto;
}

.cp-main .step-block__title {
    display: flex;
    align-items: center;
	margin-bottom: 10px;
}
.cp-main .step-block__title--size {
	width: min(70%, 250px);
}

.cp-main .step-block__title:before,
.cp-main .step-block__title:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #000;
}

.cp-main .step-block__title:before {
    margin-right: 2rem;
}

.cp-main .step-block__title:after {
    margin-left: 2rem;
}

.cp-main .step-block__item__arrow {
    width: 153px;
    margin: 5px auto;
    display: block;
}

@media (min-width: 769px) {
	.cp-main .step-block {
		background-size: 60%;
	}
	.cp-main .step-block__title {
	margin-bottom: 1em;
}
}

/*-------------------------------------------
エントリーエリア
-------------------------------------------*/
.cp-main .cp-entry-block {
    background-image: url("../img/lp_bg-entry.png");
	background-position: center;
	background-size: contain;
}

.cp-main .cp-entry-block__inner {
	width: 100%;
	margin-left: auto;
    margin-right: auto;
}

.cp-main .cp-entry-block-box {
	background-color: #fff;
	margin-bottom: 2em;
}
.cp-main .cp-entry-block-box:last-child {
	margin-bottom: 0;
}
.cp-main .cp-entry-block-box__btn-area {
	padding: var(--gap-base) var(--gap-base) 0em;
}

.cp-main .cp-entry-block-box__btn-area_text{
	font-size: clamp(16px, 4.26vw, 22px);
	text-align: center;
	line-height: 1.5;
}
@media (min-width: 769px) {
	.cp-main .cp-entry-block {
		background-size: 60%;
	}
}

/*-------------------------------------------
エントリーボタン
-------------------------------------------*/
.cp-main .cp-btn--large-orange{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: clamp(16px, 4.26vw, 22px);
	font-weight: bold;
	background: #EB5528;
	min-height: 60px;
	padding: 12px;
	border-radius: 100px;
	margin: auto;
	position: relative;
	line-height: 1.2;
	color: #FFF;
}

.cp-main .cp-entry-block__btn-area {	
	margin: 0 auto;
}

.cp-main .cp-entry-block__btn-area__item--green {
	margin: 0 auto 2em;
}

.cp-main .cp-entry-block__btn-area__item {
	margin: 0 auto;
}

.cp-main .cp-btn--large{
	min-height: 60px;
}
.cp-main .cp-btn--large-green{
	min-height: 60px;
	font-size: clamp(16px, 4.26vw, 22px);
}

.cp-main .btn-shadow{
	box-shadow: 0px 3px 0 #FFF001;
}

@media screen and (min-width:769px) {
	.cp-main .cp-entry-block__btn-area {	
	max-width: 800px;
	}	
	.cp-main .cp-btn--large{
		min-height: 80px;
	}
	.cp-main .cp-btn--large-green{
		min-height: 80px;
	}
	.cp-main .cp-btn--large-orange{
		min-height: 80px;
	}
}

/* エントリーボタンエリア */
.cp-main .checkbox-area__btn-set {
	margin: 0 auto 2em;
}
.cp-main .list--normal li {
	line-height: 1.5;
}
.cp-main .cp-btn--large {
	font-size: clamp(16px, 4.26vw, 22px);
}
.cp-main .cp-checkbox {
	border-top: 0px;
    border-bottom: 0px;
    margin: 0em auto;
    padding: 0;
}
@media screen and (min-width:769px) {
	.cp-main .cp-entry__annotation {
		text-align: center;
	}

}

/*-------------------------------------------
 手動棚　共通設定
-------------------------------------------*/

.cp-main .cp-shelf{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.6em 1.6em;
}

.cp-main .cp-shelf__item{
	display: flex;
    flex-direction: column;
	justify-content: space-between;
}

.cp-main .cp-shelf__img-box{
	display: block;
	/* 挿入される書影によって調整 */
	padding-top: min(130%, 300px);
	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;
}

.cp-main .cp-shelf__title{
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
	padding-bottom: 0.5em;
	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(12px , 2.8vw , 14px);
    opacity: 1;
	line-height: 1;
	text-align: center;
	background: var(--col-magazine-green);
	color: #fff;
	border-radius: 32px;
	text-decoration: none;
    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-main .cp-shelf{
		grid-template-columns: repeat(3, 1fr);
	}
}

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

	.cp-main .cp-shelf__btn:hover {
		opacity: .7;
	}
}


/*-------------------------------------------
 ボタントップ
-------------------------------------------*/
.cp-main .btn-top {
    position: fixed;
    width: 80px;
    height: 80px;
    right: 20px;
    bottom: -120px;
    transition: var(--hover-transition);
    z-index: 50;
}

@media (min-width: 769px) {
    .cp-main .btn-top{
        width: 80px;
        height: 80px;
    }
}

.to-top-button {
    width: 100%;
    height: 100%;
    display: block;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
}

.to-top-button > img {
    width: 100%;
    height: auto;
}

/*-------------------------------------------
　dマガジンとは
-------------------------------------------*/
/* 背景 */
.cp-main .about-dmag-block{
	background-image: url("../img/lp_bg_univ_1200x1200.png");
	background-size: cover;
  	background-repeat: no-repeat;
    position: relative;
}

.cp-main .about-dmag-block__inner{
	position: relative;
	margin: auto;
	max-width: 800px;
}

.cp-main .aabout-dmag-block__img{
	display: block;
	margin: auto;
}

.cp-main .about-dmag-block__btn{
	/* cp-btn__middle　流用 */
    position: absolute;
    bottom: 13%;
    left: 50%;
    transform: translateX(-50%);
    background: #FE046A;
    font-size: clamp(14px, 2.8vw, 24px);
    padding: 0.8em;
    width: min(60%, 440px);
}

.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: 10px;
		height: 10px;
		right: 20px;
	}
}

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

	.cp-main .about-dmag-block__btn:hover {
		opacity: .7;
	}
	/* 角丸 */
	.cp-main .about-dmag-block__btn {
	/* cp-btn__middle　流用 */
	border-radius: 50px;
	
	}
}

/*-------------------------------------------
　dアニメとは
-------------------------------------------*/
.cp-main .about-dani-block__title {
	background-color: #EB5528;
	max-width: 100%;
	margin-bottom: 1em;
}
.cp-main .about-dani-block__title img {
	display: block;
	width: min(80%, 375px);
	margin: 0 auto;
	padding: 10px;
}
.cp-main .about-dani-block__sub {
	text-align: center;
	color: #EB5528;
	font-size: clamp(24px, 6.4vw, 30px);
	line-height: 1.2;
	border-bottom: 1.2px dashed #EB5528;
	padding: 0 0 0.5em;
}
.cp-main .about-dani-block__item-text {
	font-size: clamp(16px, 4.26vw, 20px);
	margin: 1em auto;
	line-height: 1.5;

}
.about-dani-block__att {
	font-size: 12px;
	text-align: right;
	margin-bottom: 1em;
	line-height: 1.5;
}

.cp-main .about-dani-block__btns {
	margin-top: 1.5em;
}
.cp-main .about-dani-block__btn {
	/* cp-btn__middle　流用 */
    background: #EB5528;
    font-size: clamp(14px, 2.8vw, 24px);
    padding: 0.8em;
	width: 100%;
}
@media (min-width: 769px) {
	.cp-main .about-dani-block__btn {
	/* cp-btn__middle　流用 */
    width: min(60%, 440px);
	border-radius: 50px;
	}
}

/* hoverで透明にしたいものにだけ */
@media (min-width: 769px) {
	.cp-main .about-dani-block__btn {
		opacity: 1;
	}
	.cp-main .about-dani-block__btn:hover {
		opacity: .7;
	}
	/* 背景 */
	.cp-main .about-dmag-block{
	background-image: url("../img/lp_bg_univ_1200x1500.png");
	background-size: cover;
  	background-repeat: no-repeat;
    position: relative;
}

}

/*-------------------------------------------
 概要
-------------------------------------------*/
/* 背景 */
.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;
}

/* 余白調整定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{
	max-width: 100%;
	text-align: center;
	font-size: clamp(18px , 4vw ,26px);
	background: #66BB9E;
	padding: .5em;
	color: #000;
	border-radius: 0;
	margin-bottom: .3em;
}

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

.cp-main .outline-block__item-title{
	background: #5AE950;
	text-align: center;
    border-radius: 5px;
    color: #000;
    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;
}

.cp-main .outline-block a {
	color: #0064D9;
	text-decoration: underline;
}

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

/*-------------------------------------------
 WEB入会キャンペーン
-------------------------------------------*/
.cp-main .web-cp-block {
	display: block;
	background-image: url("../img/lp_bg-entry.png");
	background-position: center;
	background-size: contain;
	margin: 0 auto;
}

.cp-main .web-cp-block-box {
	background-color: #fff;
	border: 1px solid #000;
}

.cp-main .web-cp-block-box h2 {
	background-color: #000;
	padding: 0.8em;
}
.cp-main .web-cp-block-box img {
	display: block;
	width: min(90%, 375px);
	margin: 0 auto;
}
.cp-main .web-cp-block__bnrs {
	margin: 1.5em auto;	
}
.cp-main .web-cp-block__bnr_2 {
	padding-top: 1.5em;
}

@media (min-width: 769px) {
	.cp-main .web-cp-block__inner {
		max-width: var(--maxwidth);
		padding: 0;
	}
	.cp-main .web-cp-block-box img {
	width: min(90%, 960px);
	}
	.cp-main .web-cp-block__bnrs {
	width: min(100%, 700px);
	margin: 2em auto;	
	}
}

@media (min-width: 769px) {
	.cp-main .web-cp-block {
		background-size: 60%;
	}
}