@charset "UTF-8";

/*-------------------------------------------
 app-margin(アプリ表示時上部のマージンを消す)
-------------------------------------------*/
.app-margin {
	margin-top: -51px;
  }
  @media (min-width: 769px) {
	.app-margin {
	margin-top: -64px;
	}
  }

/*-------------------------------------------
 基本設定
-------------------------------------------*/
.cp-main{
	--col-c-blue: #177FC1;
	--col-c-blue--light: #00DEFF;
	--col-c-brown: #953011;
	--col-c-yellow: #FFFAA1;
}

/* テキスト行間 */
.cp-main p{
  line-height: 1.7;
}

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

.cp-main .cp-main__lower{
	position: relative;
}

.cp-checkbox__text12{
	font-size: 12px;
	line-height: 1.3;
}

.yellow {
	color: #ffff00;
}

/*-------------------------------------------
 パンクズ下に画像を設定するための上書き　＋　アルファ
-------------------------------------------*/
/* パンクズにも背景入れるための調整*/
.cp_attention-outer{
	padding-top: 15px;
	padding-bottom: 15px;	
}

/* パンクズにも背景入れるための調整 */
.cp-body .cp_attention__txt{
	margin: 0;
}

/* パンクズ余白をマージンからpaddingに */
.o-text-breadcrumb {
	margin-bottom: 0;
	padding-bottom: 15px;
}

/* PCで注意文言の上の余白を削除 */
@media (min-width: 769px) {
	.o-text-breadcrumb + .cp_attention-outer{
		padding-top: 0;
	}
}


/*-------------------------------------------
 hover
-------------------------------------------*/

@media (min-width: 769px) {
	.cp-main .object-block a,
	.cp-main .about-dmag-block__btn,
	.cp-main .abtn-top img,
	.cp-main .cp-new__btn{
		transition: var(--hover-transition);
		filter: saturate(100%);
		transform: translateY(0);
	}

	.cp-main .object-block a:hover,
	.cp-main .about-dmag-block__btn:hover,
	.cp-main .btn-top:hover img,
	.cp-main .cp-new__btn:hover {
		filter: saturate(200%);
	}

	.cp-main .btn-top:hover img{
		transform: translateY(-10px);
	}
	.cp-main .cp-request__link img{
		transition: var(--hover-transition);
		filter: saturate(100%);
		transform: scale(1);
	}
	.cp-main .cp-request__link:hover img{
		filter: saturate(200%);
		transform: scale(1.05);
	}

}

/*-------------------------------------------
 animation
-------------------------------------------*/

.fluffy01 {
	animation-name: fluffy01;
	animation-delay: 0s;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.fluffy02 {
	animation-name: fluffy01;
	animation-delay: 0s;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes fluffy01 {
	0% {
	transform: translateY(0);
	}
	50% {
	transform: translateY(-10px);
	}
	100% {
	transform: translateY(0);
	}
}

.katakata{
	animation-name: katakata;
	animation-delay: 0s;
	animation-duration: .7s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes katakata {
	0% {
	transform:rotate(2deg);
	}
	25% {
	transform:rotate(0deg);
	}
	50% {
	transform:rotate(-2deg);
	}
	75% {
	transform:rotate(0deg);
	}
	100% {
	transform:rotate(2deg);
	}
}

.kirakira01{
	animation-name: kirakira01;
	animation-delay: 0s;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes kirakira01 {
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}


.kirakira02{
	animation-name: kirakira02;
	animation-delay: 0s;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes kirakira02 {
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}


/*-------------------------------------------
 背景
-------------------------------------------*/
.t-container::before{
	content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background-color: #00DEFF;
	background-image: url(../img/bg_dot.png) , url(../img/kira.png);
	background-repeat: repeat ,repeat-y;
	background-size: auto auto ,auto auto;
	background-position: center top, center top;
}

.t-container::after{
	content: "";
	position: absolute;
    display: block;
	top: 0;
	left:0;
	width: 100%;
    height: 51px;
    background-image: url(../img/upper_stripe.png);
	background-position:  left top ;
	background-size: 12.5vw auto ;
	background-repeat:  repeat;
}

.cp-body > .breadcrumb-outer{
	background-image: url(../img/upper_stripe.png);
	background-position:  left top ;
	background-size: 12.5vw auto ;
	background-repeat:  repeat;
}

@media screen and (min-width:769px) {
	.cp-body > .breadcrumb-outer{
		background-position:  center top ;
		background-size: auto auto ;
	}

	.t-container::after{
		height: 64px;
		background-position:  center top ;
		background-size: auto auto ;
	}

}


/*-------------------------------------------
 MV
-------------------------------------------*/
.cp-main .mv-block{
	position: relative;

}
.cp-main .mv-block__inner{
	width: min(100% ,960px);
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.cp-main .kira_parts01{
	position: absolute;
	width: 24px;
	height:40px;
	left: 10px;
	top: 15%;
	display: none;
}

.cp-main .kira_parts02{
	position: absolute;
	width: 24px;
	height: 40px;
	right: 10px;
	bottom: 40%;
	display: none;
}

@media screen and (min-width:769px) {
.cp-main .mv-block:before{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 98px;
		background-image: url(../img/flag.png), url(../img/upper_dot.png);
		background-repeat: repeat-x ,repeat-x;
		background-size:auto auto, 96px auto ;
		background-position: center top, center top;
	}

	.cp-main .kira_parts01{
		display: block;
		left: 10px;
		top: 80px;
	}

	.cp-main .kira_parts02{
		display: block;
		right: 10px;
		bottom: 50px;
	}
}

/*-------------------------------------------
 波線
-------------------------------------------*/

.cp-main .waveline{
	background-color: #FFF;
	position: relative;
}

.cp-main .waveline-after{
	padding-top: min(10%, 72px) !important;
}

.cp-main .waveline-after--short{
	padding-top: min(8%, 56px) !important;
}

.cp-main .waveline-before{
	padding-bottom: min(10%, 72px) !important;
}

.cp-main .waveline:before,
.cp-main .waveline:after{
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 13px;
}

.cp-main .waveline:before{
	top: -13px;
	left: 0;
	background-image: url(../img/wave_upper.png);
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: center bottom;
}

.cp-main .waveline:after{
	bottom: -13px;
	left: 0;
	background-image: url(../img/wave_under.png);
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: center top;
}

@media screen and (min-width:769px) {
	.cp-main .waveline:before,
	.cp-main .waveline:after{
		height: 27px;
		background-size: auto;
	}

	.cp-main .waveline:before{
		top: -27px;
	}

	.cp-main .waveline:after{
		bottom: -27px;
	}
}

/* btn top */
.cp-main .btn-top{
	width: 76px;
	z-index: 550;
}

/*-------------------------------------------
 uniqu利用　まとめて再設定　 ボタン
-------------------------------------------*/
.cp-main .cp-btn--large{
	min-height: 60px;
}


.cp-main .text--deco-slash{
	font-size: clamp(13px, 3.2vw, 24px);
	;
}

@media screen and (min-width:769px) {
	.cp-main .cp-btn--large{
		min-height: 80px;
		border-width: 3px;
	}
}

/*-------------------------------------------
 リード
-------------------------------------------*/
.cp-main .lead-block__img{
	width: min(92% , 744px);
	display: block;
	margin: auto;
}


/*-------------------------------------------
 エントリー
-------------------------------------------*/

.cp-main .entry-block__frame{
	max-width: 600px;
	margin: auto;
}

.cp-main .entry-block__btn-title--green{
	color: var(--col-magazine-green);
}

/* 入会 */
.cp-main .nyukai-area{
	margin-top: min(5% ,26px);
	padding-top: min(5% ,26px);
	border-top: 1px dashed #8B8B8B;
}

/* 入会 */
.cp-main .nyukai-area__title{
	width: min(90%, 460px);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 8px;
}

.cp-main .nyukai-area__note{
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.3;
}


.cp-main .btn-nyukai{
	background: var(--col-magazine-green);
}


/* エントリー１つ目 */
.cp-main .entry-block--first{
	padding-top: 0;
}

.cp-main .btn-shadow.btn-nyukai{
	box-shadow: 0px 3px 0 #00623F;
    }


/* PC */
@media screen and (min-width:769px) {
	.cp-main .nyukai-area__note{
		text-align: center;
	}
}

/*-------------------------------------------
　キャンペーン説明
-------------------------------------------*/
.cp-main .object-block{
	position: relative;
}

.cp-main .kira_bg_parts01{
	position: absolute;
	width: 16px;
	left: 50%;
	top: 25%;
	display: none;
}

.cp-main .kira_bg_parts02{
	position: absolute;
	
	left: 50%;
	bottom: 30%;
	display: none;
}

@media screen and (min-width:800px) {
	.cp-main .kira_bg_parts01{
		display: block;
		width: 26px;
		height:40px;
		left: 50%;
		margin-left: -400px;
		top: 25%;
	}

	.cp-main .kira_bg_parts02{
		display: block;
		left: 50%;
		width: 36px;
		height:40px;
		margin-left: 400px;
		bottom: 30%;
	}
}

.cp-main .cp-terms{
	padding-top: min(6% ,42px);
}

.cp-main .ma-status,
.cp-main .cp-terms__inner{
	width: min(100%,697px);
	margin-left: auto;
	margin-right: auto;
}

.cp-main .ma-status01{
	margin-bottom: var(--gap-base);
}

.cp-main .object-block__title{
	position: relative;
	width: min(90% ,570px);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 8px;
}

/* WEB入会限定キャンペーンはコチラ */
.cp-main .nyukai-gentei-block{
	margin-top: min(5% ,37px);
}

.cp-main .nyukai-gentei-block__title{
	background: #343D43;
	color: #FBFC1C;
	font-size: clamp(12px ,3.2vw ,24px);
	text-align: center;
	padding: 12px;
}

/* 条件達成に必要なこと */
.cp-main .cp-terms{
	border-top: 3px solid #FFF;
	background-image: url(../img/bg_dot.png);
	background-repeat: repeat;
	background-position: center top;
	background-color: #FFF98E;
	position: relative;
	padding-left: var(--gap-base);
	padding-right: var(--gap-base);
	padding-bottom: var(--gap-base);
}

.cp-main .cp-terms__title{
	width: min(50%,346px);
	position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* PC */
@media screen and (min-width:769px) {
	.cp-main .cp-terms{
		border-top: 5px solid #FFF;
	}

	.cp-main .cp-terms__title{
	width: min(80% ,346px);
}


	
}

/*-------------------------------------------
　雑誌を探す
-------------------------------------------*/
.cp-main .cp-serch-block__title{
	width: min(100% ,570px);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 8px;
}

.cp-main .cp-serch-block__sub-title{
	background: var(--col-c-blue);
	padding: 8px;
	border-radius: 8px;
	font-size: clamp(16px ,3vw , 26px);
	text-align: center;
	color: #FFF;
	margin-bottom: min(5% ,16px);
}

.cp-main .cp-serch-genre{
	margin-bottom: var(--gap-base);
}

.cp-main .cp-serch-genre__list{
	display: flex;
	flex-wrap: wrap;
}
.cp-main .cp-serch-genre__item{
	margin-right: 16px;
	margin-bottom: 16px;
}

.cp-main .cp-serch-genre__link{
	display: block;
	padding: 8px 16px;
	background: #F8F054;
	font-size: clamp(12px ,3vw ,16px);
	font-weight: bold;
	border-radius: 999px;
}

.cp-main .cp-serch-new__title{
	padding-bottom: 1em;
	margin-bottom: 1.5em;
	border-bottom: 1px dashed #8B8B8B;
}

.cp-main .cp-serch-new__title img{
	width: min(100% ,525px);
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}

@media screen and (min-width:769px) {
	.cp-main a.cp-serch-genre__link:hover{
		background: #eda809;
	}
}


/* 新規配信 */
.cp-main .cp-new__main{
	text-align: center;
	background-image: url(../img/text-line.png) ;
	background-repeat: repeat-x;
	background-position: left 8px;
	padding: 0 10px;
}

.cp-main .cp-new__main-text{
	background: #FFF;
	color: var(--col-magazine-green);
	font-weight: bold;
	text-align: center;
	padding-left: 8px;
	padding-right: 8px;
	font-size: clamp( 12px , 2.8vw ,16px)
}

.cp-new__main__inner{
	display: inline;
    background: #FFF;
	padding-left: 8px;
	padding-right: 8px;
}

.cp-main .cp-new__main-text,
.cp-main .cp-new__btn-box{
	display: inline-block;
}

.cp-main .cp-new__btn-box{
	background: #FFF;

}

.cp-main .cp-new{
	margin-top: 1em;
}

.cp-new__btn{
	display: flex;
	background: var(--col-magazine-green);
	color: #FFF;
	padding: 8px 24px;
	border-radius: 999px;
	font-size: clamp(14px , 2.8vw ,16px);
	font-weight: bold;
	margin-top: 8px;
}

@media screen and (min-width:660px) {
	.cp-main .cp-new__main{
		background-position: left 22px;
}

	
}

@media screen and (min-width:769px) {
	.cp-main .cp-new__main{
		background-position: left 22px;
}

	
}

/* 雑誌の配信リクエト*/
.cp-main .cp-request{
	width: min(100% , 573px);
	margin-left: auto;
	margin-right: auto;
	margin-top: 16px;
	margin-bottom: 8px;
	position: relative;
	padding-bottom: 10px;
}

.cp-main .cp-request__link{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);

}

.cp-main .cp-request__note-text{
	text-align: center;
	font-size: 12px;
}

/*-------------------------------------------
　dマガジンとは
-------------------------------------------*/

/* 背景 */
.cp-main .about-dmag-block{
    position: relative;
	border-radius: 0 0 16px 16px;
}

.cp-main .about-dmag-block__inner{
	position: relative;
	width: min(100% ,676px);
	margin-left: auto;
	margin-right: auto;
}


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

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

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

@media (min-width: 769px) {
	.cp-main .aabout-dmag-block__btn.arrow:before{
		width: 10px;
		height: 10px;
		right: 20px;
	}
	.cp-main .about-dmag-block{
		background-size: 60% auto;
	}
}




/*-------------------------------------------
 概要
-------------------------------------------*/
/* 背景 */
.cp-main .outline-block{
	background: #FFFAA1;
}

.cp-main .outline-block__subtitle{
	font-weight: bold;
	color: var(--col-magazine-green);
}

.cp-main .outline-block__inner{
	padding-top: 1em;
}

/*フォントサイズ・行間設定*/
.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{
	text-align: center;
	font-size: clamp(18px , 4vw ,26px);
	background: var(--col-magazine-green);
	padding: .5em;
	color: #FFF;
	margin-bottom: 1em;
	border-radius: 8px;
}


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

.cp-main .outline-block__item-title{
	background: #FFF;
	text-align: center;
    border-radius: 5px;
    color: var(--col-magazine-green);
    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
-------------------------------------------*/
.cp-main .othercp-block__inner{
	max-width: 600px;
}

.cp-main .othercp-block__title{
	color: var(--col-magazine-green);
}

.cp-main .othercp-btn{
	background: var(--col-magazine-green);
}

/*------------------------------------------------------------------------------
  float-area
------------------------------------------------------------------------------*/ 

.cp-main .float-area__inner {
    position: fixed;
    z-index: 100;
    bottom: 0;
    right: 0;
}
.cp-main .float-area__banner-block {
    width: 100vw;/* バナーの横幅 */
    padding: 20px 0 12px;
    background: rgba(255, 255, 255, 0.7);/* バナーの背景色 */
}
.cp-main .float-area__banner {
    display: flex;
	justify-content: center;
	align-items: center;
    width: clamp(250px, 67vw, 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 .float-area__banner:hover {
	opacity: 0.7;
}

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