@charset "UTF-8";

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

@media (min-width: 769px) {
    .cp-main .br-sp {
        display: none;
    }
}
/*pcの時だけ改行させるクラス*/
.cp-main .br-pc{
    display: none;
}

@media (min-width: 769px) {
    .cp-main .br-pc {
        display: inline-block;
    }
}
.detail_period {
    margin: 0 auto min(8%, 20px);
}
/*-------------------------------------------
 MV下注釈
-------------------------------------------*/
.cp-main .cp-annotation_wapper{
    width: 100%;
    max-width: 800px;
    margin: -5% auto 0;;
    padding: 0 16px;
}
.cp-main .cp-annotation{
    border-radius: 15px;
    padding: 10px 15px;
    font-size: 12px;
    color: #222;
}
@media (min-width: 769px) {
    .cp-main .cp-annotation_wapper{
		margin: 0 auto;
		padding: 0 16px;
		text-align: center;
	}
	.cp-main .cp-annotation{
		font-size: 14px;
	}
}
/*-------------------------------------------
 リード
-------------------------------------------*/

.cp-main .detail_lead {
	text-align: center;
	margin: 3% auto;
}

/*-------------------------------------------
 CP_詳細
-------------------------------------------*/
.cp-main .cp-shousai_block{
    width: 100%;
    max-width: 640px;
    margin: min(4%, 40px) auto;
    padding: 0 16px;
}
.cp-main .cp-shousai{
	background: #faf500;
    border-radius: 16px;
    padding: 10px;
}
.cp-main .cp-shousai .small-text{
	font-size: 12px;
	text-align: center;
}
.cp-main .cp-shousai .cp-shousai_list{
	width:100%;
	background-color:#fff;
	border-radius:15px;
	padding:10px;
	margin: 0 auto 1%;
}
.cp-main .cp-shousai .cp-shousai_list__item{
	text-align: center;
	line-height: 1.5em;
	padding:5px 0;
}
.cp-main .cp-shousai .cp-shousai_list li:first-child{
	border-bottom: dotted 1px #222;
}
.cp-main .cp-shousai .cp-shousai_list__item .bold-text{
	font-weight: bold;
}
@media (min-width: 769px) {
	.cp-main .cp-shousai_block{
		margin: min(2%, 40px) auto;
		padding: 0 16px;
	}
	.cp-main .cp-shousai{
		padding:10px 10px 2%;
	}
	.cp-main .cp-shousai .cp-shousai_list__item .item__inner{
		text-align: left;
		width:82%;
		margin: auto;
	}
}
/*-------------------------------------------
 ドコモスポーツくじとは
-------------------------------------------*/
.cp-main .sportskuji_block{
	background: url(../img/bg_sportskuji.jpg) center no-repeat;
    background-size: cover;
	width: 100%;
    max-width: 960px;
	padding: 3% 0;
	margin: auto;
}

.cp-main .about-sportskuji{
	width: 100%;
    max-width: 640px;
    margin: min(4%, 40px) auto 5%;
    padding: 0 16px;
}
.cp-main .about-sportskuji .about-sportskuji__btn{
	margin-top:4%;
}
.cp-main .about-sportskuji .about-sportskuji__btn .cp-btn--large-green{
	background-image: linear-gradient(304deg, #000000, #757575 49%, #000000);
	min-height:60px;
	transition: opacity 0.3s;
}
.cp-main .about-sportskuji .about-sportskuji__btn .cp-btn--large-green:hover{
	opacity: .7;
}
.cp-main .about-sportskuji .about-sportskuji__btn .cp-btn--large-green::before {
    content: "";
    width: 10px;
    height: 10px;
    border-style: solid;
    border-width: 2px 2px 0 0;
    border-color: #fff;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
/*-------------------------------------------
 他CPバナーエリア
-------------------------------------------*/
.cp-main .cp_banner_block{
	width: 100%;
    max-width: 800px;
    margin: min(5%, 40px) auto;
    padding: 0 16px;
}
.cp-main .cp_banner_block .cp_banner_block_lead{
	text-align: center;
	font-weight: bold;
	font-size:18px;
	margin-bottom:2%;
	color: #CC0033;
}
.cp-main .cp_banner_block .cp_banner_block_lead .blinking{
	animation: blinking 0.5s ease-in-out infinite alternate;
}
@keyframes blinking {
  0%   { opacity: 0.2; }
  100% { opacity: 1; }
}
.cp-main .cp_banner_block .cp_banner_list__item{
	padding: 2% 0;
}
.cp-main .cp_banner_block .cp_banner_list__item a{
	transition: opacity 0.3s;
}
.cp-main .cp_banner_block .cp_banner_list__item a:hover{
	opacity: .7;
}
/*-------------------------------------------
 概要
-------------------------------------------*/
.cp-main{
	max-width: 960px;
	margin: auto;
}


/*-------------------------------------------
 app-margin
-------------------------------------------*/
.app-margin {
	margin-top: -51px;
	}
  @media (min-width: 769px) {
	.app-margin {
	margin-top: -66px;
	}
  }