@charset "UTF-8";


/*-------------------------------------------
 基本設定
-------------------------------------------*/
.cp-main{
	/* max960で 960以下で左右に入れたい余白の数値 */
	/* 基本的にヘッダーなどに合わせ 8px */
	--size-rl-padding: 8px;

	/* （自動計算用） */
	--size-rl-padding-plus: calc( var(--size-rl-padding) + 2);

	/* コンテンツの余白　基本 */
	--gap-base: min(5%, 58px);

	/* コンテンツの余白 スマホで上下開けたい */
	--gap-base-tb: min(8%, 48px);

	/* 最大幅 */
	--maxwidth: 960px;
	
	/* 基本色 */
	--main_orange: #FB5B4C;
	--main_blue: #0070FC;
	--main_black: #222;
	--dcm_red: #CC0033;
	--dcm_green: #00915D;
}

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

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

	/* ※付き文言 */
	.cp-main .text-att {
	width: 100%;
	padding: 0;
	padding-left: 1em;
	text-indent: -1em;
	}
	.cp-main .text-att::before {
	content: '※';
	}
	.cp-main .text-att__box {
		margin-top: 20px;
	}

	/*小テキスト*/
	.cp-main .text__small {
		font-size: clamp(12px, 3.2vw, 16px);
		margin-bottom: 1em;
		line-height: 1.3;
	}

/*-------------------------------------------
 基本のcontent padding margin topなし
-------------------------------------------*/
/* コンテンツの基本padding */
.cp-main .cont-padding-notop {
padding: 0 var(--gap-base) var(--gap-base--wide);
margin-left: auto;
margin-right: auto;
}


/* コンテンツのpadding 上下が半分 */
.cp-main .cont-padding--tb-half-notop {
	padding: 0 var(--gap-base) calc( var(--gap-base) / 2);
	margin-left: auto;
    margin-right: auto;
}

/* コンテンツのpadding 上が半分 */
.cp-main .cont-padding--t-half-notop {
	padding: calc( var(--gap-base) / 2) var(--gap-base) 0;
	margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 789px) {
    .cp-main .cont-padding--t-half-notop {
		padding: calc( var(--gap-base) / 2) var(--gap-base) 0;
    }
}

/*-------------------------------------------
 基本のcontent padding margin bottomなし
-------------------------------------------*/
/* コンテンツの基本padding */
.cp-main .cont-padding-nobtm {
	padding: var(--gap-base--wide) var(--gap-base) 0;
	margin-left: auto;
    margin-right: auto;
}

/*-------------------------------------------
 基本の margin-bottom padding-bottom
-------------------------------------------*/

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

.cp-main .margin-hb {
	margin-bottom: calc( var(--gap-base) / 2);
}

.cp-main .padding-b {
	padding-bottom: var(--gap-base);
}

/*-------------------------------------------
 全体背景
-------------------------------------------*/
.cp-body {
	background: url(../img/lp_bg__sp.png);	
}

@media (min-width: 769px) {
	.cp-body {
	background: url(../img/lp_bg__pc.png);
	}
}

/*-------------------------------------------
 リードエリア
-------------------------------------------*/
.cp-main .lead-block__inner {
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 0 var(--gap-base);
}

.cp-main .lead-block__txt {
	margin-bottom: 1rem;
}

.cp-main .lead-block__txt > p {
	color: var(--main_black);
	font-size: clamp(16px, 4.26vw, 24px);
	text-align: center;
	font-weight: 600;
	line-height: 1.3;
	text-shadow:
		0 3px 0 #FFF,
        2.1px 2.1px 0 #FFF,
        3px 0 0 #FFF,
        2.1px -2.1px 0 #FFF,
        0 -3px 0 #FFF,
        -2.1px -2.1px 0 #FFF,
        -3px 0 0 #FFF,
        -2.1px 2.1px 0 #FFF;/*テキスト全体に白フチ*/
}

.cp-main .point_txt {
	color: #F80F00;
	font-size: clamp(18px, 4.8vw, 30px);
	line-height: 1.5;
}

.cp-main .lead-block__btm {
	width: 100%;
}

@media (min-width: 769px) {
	.cp-main .lead-block__inner {
		margin-top: 2em;
		padding: 0;
	}
	.lead-block__title {
		margin-bottom: 1rem;
	}
	.cp-main .lead-block__txt {
	margin-bottom: 0;
}
	.lead-block__txt > p {
		line-height: 1.2;
	}
	.point_txt {
		color: #F80F00;
		line-height: 1.3;
	}
	.cp-main .lead-block__btm {
		display: none;
	}
}

/*-------------------------------------------
 エントリーボタンエリア
-------------------------------------------*/
.cp-main .entry-block__inner {
	max-width: 960px;
    border: 3px solid var(--main_black);
    background: #FFF;
    border-radius: 16px;
	box-shadow: 0 5px 0 var(--main_black);
}
.cp-main .checkbox-area__title {
	margin-bottom: 1rem;
	padding: 0 1rem;
}
.cp-main .btn-shadow {
	border: 2px solid var(--main_black);
	box-shadow: 0px 3px 0 var(--main_black);
    transition: var(--hover-transition);
    transform: translateY(0);
}
.cp-main .list--normal li {
	line-height: 1.5;
}
.cp-main .entry-block__wrapper {
	max-width: 600px;
	margin: auto;
}

.cp-main .border-top-line {
	border-top: 1px dashed #222;
	margin: 1.3em auto;
}


@media (min-width: 769px) {
	.cp-main .entry-block__inner {
		border: 5px solid var(--main_black);
		border-radius: 32px;
		box-shadow: 0 6px 0 var(--main_black);
	}
	.cp-main .cp-btn--large {
		height: 80px;
	}
	.cp-main .cp-btn--large-green {
		height: 80px;
	}	
	.cp-main .btn-shadow {
		border: 4px solid var(--main_black);
		box-shadow: 0px 4px 0 var(--main_black);
		transition: var(--hover-transition);
		transform: translateY(0);
	}
	.cp-main .checkbox-area__title {
		padding: 0 4rem;
		max-width: 512px;
		margin: 0 auto 1rem;
	}
}

/*-------------------------------------------
 dマガジンスタッフ厳然★お出かけ情報
-------------------------------------------*/
.cp-main .shelf-block-area {
	background: #FFF;
}
.cp-main .shelf-block__inner {
}
.cp-main .shelf-block__title {
	width: 100%;
	height: auto;
	background-color: var(--main_blue);
}
.cp-main .title-width {
	display: block;
	max-width: 700px;
	margin: 0 auto;
}

.cp-main .title-padding {
	padding: .8em;
	margin-left: auto;
    margin-right: auto;
}


.cp-main .shelf-block__lead {
	margin-bottom: 1rem;
}

.cp-main .shelf-block__lead__img1,.shelf-block__lead__img2 {
	display: none;
}

.cp-main .shelf-block__lead__txt {
	text-align: center;
	color: var(--main_black);
}

.cp-main .shelf-block__lead__txt01 {
	font-size: clamp(16px, 4.26vw, 23px);
	font-weight: bold;
	line-height: 1.3;
}
.cp-main .shelf-block__lead__txt02 {
	font-size: clamp(16px, 4.26vw, 28px);
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: .5em;
}
.cp-main .shelf-block__hl {
	color: var(--main_orange);
	background: linear-gradient(transparent 50%, #FFF616 50%);
}

.cp-main .cp-list-block__btn__items {
    width: 100%;
    margin: auto!important;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.cp-main .cp-list-block__btn__item {
    width: calc(96%/2);
    margin: 2% auto 5px;
}

@media only screen and (min-width: 789px) {
	.cp-main .cp-list-block__btn__item {
		width: calc(94% / 3);
		font-size: 20px;
		font-weight: bold;
		line-height: 1.2em;
		border-radius: 40px;
	}
	}

/*ボタン*/

.cp-main .btn_txt_small {
	font-size: 12px;
}

.orange {
	background-color: var(--main_orange);
	padding: 10px 0;
}
.blue {
	background-color: var(--main_blue);
	padding: 10px 0;
}
.green {
	background-color: #019559;
	padding: 18px 0;
}

.cp-main .cp-list-btn {	
    display: block;
    color: #fff;
    text-align: center;
    font-weight: bolder;
    border-radius: 100px;
}

/*アプリだけ表示するリスト*/
.category-btn-app {
    max-width: 200px;
    margin: 0 auto 1em!important;
    color: var(--main_blue);
}
.category-btn-app li{
	margin: .8em auto;
	text-align: center;
	font-weight: bold;
	font-size: clamp(16px, 4.26vw, 20px);
}

@media only screen and (min-width: 789px) {
	.cp-main .title-padding {
		padding: 1.5em;
	}
	.cp-main .shelf-block__inner {
		margin-top: 0;
		padding-right: 0;
		padding-left: 0;
	}
	.cp-main .shelf-block__lead__img1 {
		display: initial;
		width: 20%;
	}
	.cp-main .shelf-block__lead__img2 {
		display: initial;
		width: 26%;
	}

	.cp-main .shelf-block__lead {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.cp-main .btn_txt_small {
		font-size: 20px;
	}

	.orange {
		padding: 18px 0;
	}
	.blue {
		padding: 18px 0;
	}
}

/*-------------------------------------------
棚　margin
-------------------------------------------*/
.o-shelf {
	padding-top: 0;
    padding-bottom: 1%;
}


/*-------------------------------------------
　dマガジンとは・エントリーボタンエリア背景
-------------------------------------------*/
/* 背景 */
.last-block {
	background: url(../img/lp_bg__last.png);
}

/*-------------------------------------------
　dマガジンとは
-------------------------------------------*/
/* 背景 */
.cp-main .about-dmag-block {
	background: url(../img/about_dmag_bg_sp.png);
	position: relative;
}

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

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

.cp-main .about-dmag-block__btn{
	/* cp-btn__middle　流用 */
    position: absolute;
	bottom: 19%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--main_orange);
    font-size: clamp(14px, 2.8vw, 24px);
    padding: 0.6em;
    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;
	}
	.cp-main .about-dmag-block {
		background: url(../img/about_dmag_bg_pc.png);
	}
	.cp-main .about-dmag-block__inner{
		max-width: 700px;
}
}

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

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

/*-------------------------------------------
利用規約
-------------------------------------------*/
/* 背景 */
.outline-block__wrapper {
	background: #FFF;
	width: 100%;
}

.cp-main .title-width_ol {
	display: block;
	width: max(60%,200px);
	margin: 0 auto;
}
.cp-main .title-padding_ol {
	padding: .8em;
}


/*フォントサイズ・行間設定*/
.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;
}

.outline-block__title{
    width: 100%;
    height: auto;
    background-color: var(--main_blue);
}

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

.outline-block__list{
	padding: 16px;
}

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

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

}

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

.outline-block__list .kome{
  list-style: none;
}
.outline-block__list .kome li {
  position: relative;
	padding-left: min(1.2em, 20px);
}
.outline-block__list .kome li::before {
  content: '\0203B';
  position: absolute;
  left: 0;
}

.outline-block__list .number {
  list-style: none;
  counter-reset: number;
}
.outline-block__list .number li {
  position: relative;
  padding-left: min(2.5em, 35px);
}
.outline-block__list .number li::before {
  counter-increment: number;
  content: '（' counter(number) '）';
  position: absolute;
  left: 0;
}
.outline-block__list .list-style_on{
	list-style:disc;
}
.outline-block__list .disc li{
margin-left: 1.2em;
}

@media (min-width: 769px) {
	.outline-block__item-title {
		padding: .3em;
	}
	.outline-block__list {
    padding: 25px;
	}
	.cp-main .title-width_ol {
	max-width: 300px;
	}
.cp-main .title-padding_ol {
	padding: 1em;
	}

}

/*-------------------------------------------
　追従バナー
-------------------------------------------*/
.float-area__inner {
    position: fixed;
    z-index: 100;
    bottom: 0;
    right: 0;
}
.float-area__banner-block {
    width: 100vw;
    padding: 20px 0 12px;
    background: rgba(255, 255, 255, 0.7);
}
.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);
}
.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);
}
.yellow {
    color: #ffff00;
}
@media (min-width: 769px) {
	.float-area__banner {
        border-radius: 50px;
    }    
	.float-area__banner-arrow:before {
        right: 15px;
	}
}

.o-footer {
padding-bottom: 100px;
}

/*-------------------------------------------
 ボタントップ
-------------------------------------------*/
.cp-main .btn-top{
    position: fixed;
    width: 60px;
    height: auto;
}

@media (min-width: 769px) {
	.cp-main .btn-top{
		position: fixed;
		width: 100px;
		height: auto;
	}
}