@charset "UTF-8";

/*----------------------------------------------
----------------------------------------------
 COMMON SETTEING
 ----------------------------------------------
----------------------------------------------*/
/* scroll */
html { 
    scroll-behavior: smooth;
    scroll-padding-top: 48px;
  }
  @media (min-width: 769px) {
    html {
      scroll-padding-top: 60px;
    }
  }

/* 変数設定 */
.cp-body {
  /* white */
  --col-white: #FFFFFF;
  /* テキストリンク */
  --col-txt-link: #1889CF;
  /* docomo red */
  --col-d-red: #CC0033;
  /* docomo green */  
  --col-d-green: #009141;

  /* book green */
  --col-book-green: #3CB65E;
  /* book green-dark */
  --col-book-green--dark: #289446;
  /* book red */
  --col-book-red: #FF7970;
  /* book red-dark */
  --col-book-red--dark: #FE4E43;
  /* light gray(border.etc.) */
  --col-book-gray: #DDDDDD;
  /* gray-dark */
  --col-book-gray--dark: #888888;
  /* black */
  --col-book-black: #222222;
  /* blue */
  --col-book-blue: #2DA0B0;

  /* btn shadow */
  --btn-shadow: #800020;

  /* テキスト色設定 */
  color: var(--col-book-black);

  /* transition設定 */
  --hover-transition: all .3s ease-out;

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

  /* コンテンツの余白 スマホで上下開けるための記述 */
  --gap-base--wide: min(8%, 56px);

  /* コンテンツ最大幅 */
  --maxwidth: 960px;
}

/* ページ上部の赤枠文言 */
.cp_attention__txt{
  border: 2px solid var(--col-d-red);
  color:var(--col-d-red);
  font-size: 16px;
  font-weight: 600;
  margin: 15px 0;
  padding: 3% 0;
  text-align: center;
  background: var(--col-white);
}

/*-------------------------------------------
 クーポン残枚数表示
-------------------------------------------*/
.cp_coupon__txt--red {
	font-weight: 600;
	color: #cc0033;
	text-align: center;
	font-size: 14px;
	margin-bottom: 8px;
  }
  

/* ページ上部の赤枠文言　黒文字用 */
.cp_attention__txt--black {
  border: 2px solid var(--col-d-red);
  color: var(--col-book-black);
  font-size: 14px;
  margin: 15px 3%;
  padding: 20px;
  text-align: left;
}
.cp_attention__txt--black p {
    line-height: 1.5;
    color: var(--col-book-black);
}

/* SP横余白あり　PC960pxで固定 */
  .cp-body .cont960{
    max-width: calc(960px + 6%);
    padding-left: 3%;
    padding-right: 3%;
    margin: auto;
  }


/* ------common.css調整 ------*/
  /* footer上の余白削除 */
.bw-footer {
  padding-top: 0;
}

@media all and (min-width: 769px) {
  .bw-footer {
    padding-top: 8px;
  }
}

.cp-main {
  /* 基本テキスト設定 */
  font-size: 16px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-height: 1.7;
}

/* PCで上にマージン */
@media all and (min-width: 769px) {
  .cp-main {
      margin-top: 15px;
  }
}

/* commonのlineheightを上書き他に合わせる */
.cp-main p {
  line-height: 1.7;
}

.cp-main__inner {
  /* 基本的に横中央になるように */
  margin: 0 auto;
}

/* h系設定リセット */
.cp-main h1,
.cp-main h2,
.cp-main h3,
.cp-main h4,
.cp-main h5,
.cp-main h6 {
  font-weight: bold;
  margin-bottom: 0;
  max-width: initial;
}

/* footer背景白に */
.bw-footer{
    background: #FFF;
}

/* setting a テキスト　リセット */
.cp-main a {
  color: var(--col-txt-link);
}

.cp-main a:link {
  text-decoration: underline;
}

.cp-main a:hover {
  text-decoration: none;
}

/* ページ内リンク調整用 */
.cp-body .page__anchor{
	height: 0px;
	display: block;
	padding-top: 48px;
	margin-top: -48px;
  }
  
@media (min-width: 769px) {
	  .cp-body .page__anchor{
	  padding-top: 60px;
	  margin-top: -60px;
	}
}

/* 画像は横100％に */
.cp-main img {
  width: 100%;
  max-width: none;
  height: auto;
}

.cp-main .text-d-red{
	color: var(--col-d-red);
}

.cp-main .text-d-green{
	color: var(--col-d-green);
}

.cp-main .text-book-red{
	color: var(--col-book-red);
}

.cp-main .text-book-green{
	color: var(--col-book-green);
}

.cp-main .text-book-green--dark{
	color: var(--col-book-green--dark);
}

.cp-main .text-bold{
	font-weight: bold;
}

.cp-main .text-normal{
	font-weight: normal;
}

/*-------------------------------------------
 下コンテンツのスマホの調整　ボーター入れる
-------------------------------------------*/
.bw-footer__download{
	padding-top: 2rem;
	border-top: 1px solid var(--col-book-gray);
}

/*-------------------------------------------
　チェックボックス
-------------------------------------------*/
/* チェックボタンエリア */
.cp-main .checkbox-area__checkbox-set {
    margin: 1em auto;
}

.cp-main .cp-checkbox {
    font-size: clamp(12px, 3vw, 14px);
	border-top: 1px dashed var(--col-book-gray);
    border-bottom: 1px dashed  var(--col-book-gray);
    margin: 1em auto;
    padding: 0.5em 0;
	text-align: center;
}

/* チェックボタン */
.cp-main input[type="checkbox"] {
    display: inline-block;
    visibility: visible;
    -webkit-appearance: checkbox;
    margin-right: 0.5em;
}
/* チェックボタン&テキスト */
.cp-main input,
.cp-main label {
    vertical-align: middle;
    line-height: 1;
	margin-bottom: 0;
}

/* チェックボタン下のテキスト */
.cp-main .cp-entry__annotation{
	text-align: left;
    font-size: 12px;
    text-align: left;
    margin-top: 0.2em;
    line-height: 1.3;
}


/*-------------------------------------------
 CP終了
-------------------------------------------*/
/* ボタンの色 */
.cp-main .cp-end{
	pointer-events: none !important;
	background-color: #c8c8c8 !important;
	border: none !important;
	color: var(--col-white) !important;
	box-shadow: none !important;
}

/* 影 */
.cp-main .cp-end.btn-shadow {
    box-shadow: none !important;
}

/* 矢印 */
.cp-main .cp-end.arrow:before{
	border-color: var(--col-white) !important;
}

/* 画像 */
.cp-main .e.cp-end img,
.cp-main .cp-btn--middle.cp-end img,
.cp-main .cp-btn--small.cp-end img{
	-webkit-filter: brightness(0) invert(1) !important;
	filter: brightness(0) invert(1) !important;
}

/* 画像直接用 
------------------------*/
.cp-main .cp-end .cp-end__img{
	-webkit-filter: grayscale(100%) !important;
	filter: grayscale(100%) !important;
	opacity: .5 !important;
}

/*-------------------------------------------
 MV
-------------------------------------------*/

/* 他のcssの影響を受けるのでクラスとは別書き */
.cp-main .mv-block__main img{
	max-width: 960px;
	display: block;
	width: min(100%,960px);
	margin: auto;
}

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

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

    .cp-main .btn-top:hover{
        bottom: 30px;
    }
}


/********************************************
-------------------------------------------
 大枠　設定
-------------------------------------------
********************************************/

/*-------------------------------------------
 content padding margin
-------------------------------------------*/
/* コンテンツのpadding + max width */
.cp-main .cont-padding--maxwidth {
    padding: var(--gap-base--wide) var(--gap-base);
    max-width: calc(var(--maxwidth) + (var(--gap-base) * 2));
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 789px) {
    .cp-main .cont-padding--maxwidth {
       padding: var(--gap-base);
    }
}

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

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

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

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

/* コンテンツのpadding SPで横いっぱい 768以上で左右余白 */
.cp-main .cont-padding--spwide{

}

@media only screen and (min-width: 789px) {
    .cp-main .cont-padding--spwide{
		padding-right: var(--gap-base);
		padding-left: var(--gap-base);
	}
}

/* 上下marginで調整　コンテンツのpadding SPで横いっぱい 768以上で左右余白 */
.cp-main .cont-margin--spwide{
	margin-top: var(--gap-base--wide) ;
	margin-bottom: var(--gap-base--wide) ;
}

@media only screen and (min-width: 789px) {
    .cp-main .cont-margin--spwide{
		padding-right: var(--gap-base);
		padding-left: var(--gap-base);
	}
}



/* コンテンツのpadding上下座右同じ */
.cp-main .cont-padding--same{
	padding: var(--gap-base);
	margin-left: auto;
    margin-right: auto;
}

/* コンテンツのpadding左右のみ */
.cp-main .cont-padding--only-lr{
	padding-left: var(--gap-base);
	padding-right: var(--gap-base);
	width: min(100% ,var(--maxwidth));
	margin-left: auto;
    margin-right: auto;
}

/* コンテンツのpadding上下のみ */
.cp-main .cont-padding--only-tb{
	padding-top: var(--gap-base--wide);
	padding-bottom: var(--gap-base--wide);
	width: min(100% ,var(--maxwidth));
	margin-left: auto;
    margin-right: auto;
}

/* コンテンツのpadding上 */
.cp-main .cont-padding--only-t{
	padding-top: var(--gap-base--wide);
	width: min(100% ,var(--maxwidth));
	margin-left: auto;
    margin-right: auto;
}

/* コンテンツのpadding下 */
.cp-main .cont-padding--only-b{
	padding-bottom: var(--gap-base--wide);
	width: min(100% ,var(--maxwidth));
	margin-left: auto;
    margin-right: auto;
}

/* コンテンツのpadding全てなし */
.cp-main .cont-padding--none{
	padding: 0;
}

/* コンテンツの 基本margin */
.cp-main .cont-margin{
	margin: var(--gap-base--wide) var(--gap-base);
}


/* コンテンツの margin上下左右同じ */
.cp-main .cont-margin--same{
	margin: var(--gap-base);
}

/* コンテンツのmargin左右のみ */
.cp-main .cont-margin--only-lr{
	margin-left: var(--gap-base);
	margin-right: var(--gap-base);
}
/* コンテンツのmargin上下のみ */
.cp-main .cont-margin--only-tb{
	margin-top: var(--gap-base);
	margin-bottom: var(--gap-base);
}
/* コンテンツのmargin上 */
.cp-main .cont-margin--only-t{
	margin-top: var(--gap-base);
}
/* コンテンツのmargin下 */
.cp-main .cont-margin--only-b{
	margin-bottom: var(--gap-base);
}
/* コンテンツの左 */
.cp-main .cont-margin--only-l{
	margin-left: var(--gap-base);
}
/* margin右 */
.cp-main .cont-margin--only-r{
	margin-right: var(--gap-base);
}

/* コンテンツ内の最大幅 */
.cp-main .maxwidth{
	max-width: var(--maxwidth);
	margin-left: auto;
	margin-right: auto;
}




/********************************************
-------------------------------------------
 ここからパーツ
-------------------------------------------
********************************************/

/*-------------------------------------------
 テキストアンダーライン
-------------------------------------------*/
.cp-main .text-uline{
	background: linear-gradient(transparent 70%, #FFE327 30%);
}

/*-------------------------------------------
 リボン 
-------------------------------------------*/
/* リボン真ん中 */
.cp-main .ribbon{
	position: relative;
	top: 0;
	left: 50%;
	width: min(80%,270px);
	color: var(--col-white);
	background: var(--col-book-green);
	padding: min(1.5%, 10px);
	transform: translate(-50%, 0%);
	text-align: center;
	font-weight: bold;
}

.cp-main .ribbon::before,
.cp-main .ribbon::after {
	display: block;
	background: var(--col-book-green);
	content: "";
	height: 100%;
	position: absolute;
	top: 0;
	width: 16px;
  }

.cp-main .ribbon::before{
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 90% 50%);
	left: -15px;
}

.cp-main .ribbon::after {
	right: -15px;
	clip-path: polygon(100% 0, 10% 50%, 100% 100%, 0 100%, 0 0);
}


/*-------------------------------------------
 リボン 上50%配置
-------------------------------------------*/
/* リボン真ん中 */
.cp-main .ribbon--top50{
	position: relative;
	top: 0;
	left: 50%;
	width: min(80%,270px);
	color: var(--col-white);
	background: var(--col-book-green);
	padding: min(1.5%, 10px);
	transform: translate(-50%, -50%);
	text-align: center;
	font-weight: bold;
}

.cp-main .ribbon--top50::before,
.cp-main .ribbon--top50::after {
	display: block;
	background: var(--col-book-green);
	content: "";
	height: 100%;
	position: absolute;
	top: 0;
	width: 16px;
}

.cp-main .ribbon--top50::before{
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 90% 50%);
	left: -15px;
}

.cp-main .ribbon--top50::after {
	right: -15px;
	clip-path: polygon(100% 0, 10% 50%, 100% 100%, 0 100%, 0 0);
}

/*-------------------------------------------
 リボン 長い
-------------------------------------------*/
/* リボン真ん中 */
.cp-main .ribbon--long{
	position: relative;
	width: calc(100% - 30px);
	left: 15px;
	color: var(--col-white);
	background: var(--col-book-green);
	padding: min(1.5%, 10px);
	text-align: center;
	font-size: clamp(16px, 2.8vw , 20px);
	font-weight: 700;
}

.cp-main .ribbon--long::before,
.cp-main .ribbon--long::after {
	display: block;
	background: var(--col-book-green);
	content: "";
	height: 100%;
	position: absolute;
	top: 0;
	width: 16px;
  }

.cp-main .ribbon--long::before{
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 90% 50%);
	left: -15px;
}

.cp-main .ribbon--long::after {
	right: -15px;
	clip-path: polygon(100% 0, 10% 50%, 100% 100%, 0 100%, 0 0);
}


/*-------------------------------------------
 ボタン
-------------------------------------------*/
/* ボタン large */
.cp-main .cp-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	position: relative;
	line-height: 1.2;
}

/* ボタン large */
.cp-main .cp-btn--large{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: clamp(18px , 3.2vw ,22px);
	font-weight: bold;
	background: var(--col-d-red);
	height: 60px;
	padding: 12px;
	border-radius: 100px;
	margin: auto;
	position: relative;
	line-height: 1.2;
}

/* ボタン large */
.cp-main .cp-btn--large-green{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: clamp(18px , 3.2vw ,22px);
	font-weight: bold;
	background: var(--col-book-green);
	height: 60px;
	padding: 12px;
	border-radius: 100px;
	margin: auto;
	position: relative;
	line-height: 1.2;
}

/* ボタン middle -ボタンリンク- */
.cp-main .cp-btn--middle {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--col-d-red);
	color: var(--col-white);
	padding: 12px;
	border-radius: 30px;
	font-weight: bold;
	text-align: center;
	margin: auto;
	font-size: clamp(16px , 3vw ,22px);
	line-height: 1.2;
	position: relative;
}
  
/* ボタン small -ボタンリンク- */
.cp-main .cp-btn--small {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--col-d-red);
	color: var(--col-white);
	border-radius: 30px;
	font-weight: bold;
	text-align: center;
	font-size: clamp(12px, 2.8vw, 16px);
  	padding: .5em 26px;
	position: relative;
	margin: auto;
	line-height: 1.2;
	min-height: 44px;
}
  
/* ボタン　テキスト */
.cp-main a.cp-btn--large,
.cp-main a.cp-btn--large-green,
.cp-main a.cp-btn--middle,
.cp-main a.cp-btn--small{
	color: var(--col-white);
	text-decoration: none;
}

/* ボタン　テキスト */
.cp-main a.cp-btn--large:hover,
.cp-main a.cp-btn--large-green:hover,
.cp-main a.cp-btn--middle:hover,
.cp-main a.cp-btn--small:hover{
	color: var(--col-white);
	text-decoration: none;
}
  
/* ボタン　＞ */
.cp-main .arrow:before{
	position: absolute;
	content: " ";
	right: 15px;
	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 .btn-shadow{
	box-shadow: 0px 3px 0 var(--btn-shadow);
	transition: var(--hover-transition);
	transform: translateY(0);
}

@media only screen and (min-width: 769px) {
	/* PC */
	.cp-main .arrow:before{
		right: 20px;
		width: 16px;
		height: 16px;
		border-top: 3px solid var(--col-white);
		border-right: 3px solid var(--col-white);
		right: 28px;
	}

	.cp-main .btn-shadow{
		box-shadow: 0px 3px 0 var(--btn-shadow);
	}

	.cp-main .btn-shadow:hover{
		box-shadow: none !important;
		transform: translateY(3px);
	}

	.cp-main .cp-btn--large {
		min-height: 80px;
	}
}


/*-------------------------------------------
 リスト
-------------------------------------------*/
.cp-main ul,
.cp-main ol{
	margin: 0;
}

/* テキスト1文字分開ける */
.cp-main .list--normal li{
	padding-left: 1em;
	text-indent: -1em;
}

/* テキスト2文字分開ける */
.cp-main ul.list--2em{
  padding-left: 2em;
  text-indent: -2em;
}

/* 頭「・」 */
.cp-main ul.list--disc,
.cp-main ol.list--decimal
{
  padding-left: 1em;
}

.cp-main ul.list--disc li{
  list-style: initial;
}

.cp-main ol.list--decimal > li{
	list-style: decimal;
}

.cp-main ol.list--decimal .list--normal li{
	padding-left: 1em;
	text-indent: -1em;
}



/*-----------------------------------
 テキスト　＼ ／
------------------------------------*/
/* テキスト */
.cp-main .text--deco-slash{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: min(2% , 8px);
	font-weight: bold;
}

.cp-main .text--deco-slash::before,
.cp-main .text--deco-slash::after{
	content: "";
	height: 2em;
	width: 2px;
	background: var(--col-book-green);
	vertical-align: bottom;
}

/* テキスト　緑 */
.cp-main .text--deco-slash-green{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: min(2% , 8px);
	font-weight: bold;
	color: var(--col-book-green);
}

.cp-main .text--deco-slash-green::before,
.cp-main .text--deco-slash-green::after{
	content: "";
	height: 2em;
	width: 2px;
	background: var(--col-book-green);
	vertical-align: bottom;
}

/* テキスト　赤 */
.cp-main .text--deco-slash-red{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: min(2% , 8px);
	font-weight: bold;
	color: var(--col-d-red);
}

.cp-main .text--deco-slash-red::before,
.cp-main .text--deco-slash-red::after{
	content: "";
	height: 2em;
	width: 2px;
	background: var(--col-d-red);
	vertical-align: bottom;
}


/* ＼ ／の位置 */
.cp-main .text--deco-slash::before,
.cp-main .text--deco-slash-green::before,
.cp-main .text--deco-slash-red::before {
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);
	margin-right: 0.7em;
}

.cp-main .text--deco-slash::after,
.cp-main .text--deco-slash-green::after,
.cp-main .text--deco-slash-red::after {
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	margin-left: 0.7em;
}

/*-----------------------------------
 テキスト　━ ━
------------------------------------*/
.cp-main .text--deco-h-line {
    line-height: 1.3;
    font-size: 24px;
    font-weight: 600;
    color: var(--col-book-green);
    text-align: center;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  .cp-main .text--deco-h-line::before, .cp-main .text--deco-h-line::after {
    content: "";
    height: 2px;
    background: var(--col-book-green);
    flex-grow: 1;
  }
  .text--deco-h-line::before {
    margin-right: 0.333em;
  }
  .text--deco-h-line::after {
    margin-left: 0.333em;
  }