@charset "UTF-8";

/*-------------------------------------------
 アコーディオン
-------------------------------------------*/
/* 背景 */
.cp-main .accordion-block{
	margin: 30px auto 0;
	background-color: #fff;
	max-width: min(100% , 640px);
}

.cp-main .accordion-block__title{
	font-size: clamp(14px , 2.8vw , 18px);
	background: #838383;
    text-align: center;
	color: #fff;
	padding: .5em;
	position: relative;
	opacity: 1;
	transition: all .3s;
}

.cp-main .accordion-block__title:hover{
	cursor: pointer;
}

.cp-main .accordion-block__icon {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translatey(-50%);
	width: 25px;
	height: 25px;
  }

.cp-main .accordion-block__icon__parts {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
  }

.cp-main .accordion-block__icon__parts::before,
.cp-main .accordion-block__icon__parts::after {
	position: absolute;
	content: "";
	display: block;
	transition: all 0.3s;
	background: #FFF100;
	left: 50%;
	top: 50%;
	width: 50%;
	height: 2px;
	transform: translate(-50%, -50%);
  }

/* plus */
.cp-main .accordion-block__icon__parts::before {
	transform: translate(-50%, -50%) rotate(90deg);
}
  
/* minus */
.cp-main .acc-title.is-open .accordion-block__icon__parts::before {
	transform: translate(-50%, -50%) rotate(0deg);
}

.cp-main .accordion-block__main{
	padding: 4%;
	border: 1px solid #838383;
	text-align: left;
	font-size: 14px;
	display: none;
	line-height: 1.5;
}

@media (min-width: 769px) {
.cp-main .accordion-block__icon {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translatey(-50%);
	width: 30px;
	height: 30px;
  }

	.cp-main .accordion-block__icon__parts::before,
	.cp-main .accordion-block__icon__parts::after {
	height: 3px;
  }
}


/* ----------------------------------
 クーポンの使い方
-----------------------------------*/
.cp-main .coupon-how{
    width: 100%;
    background: #FFEDC0;
    max-width: 640px;
    margin: 16px auto;
    padding: min(4%, 32px);
}

.cp-main .coupon-how__title{
    font-size: 18px;
    font-weight: bold;
    color: #886000;
    margin-bottom: 16px;
    text-align: center;
    margin-bottom: .3em;
}

.cp-main .coupon-how__lead{
    color: var(--col-d-red);
    font-weight: bold;
}

.cp-main .coupon-how__sub-title{
    margin: 1.3em 0 .5em;
    font-weight: bold;
    color: #555;
    text-align: center;
}

.cp-main .coupon-how__img{
    margin-bottom: 2em;
}

.cp-main .list-coupon-note{
    font-size: 12px;
    margin-bottom: 1em;
}

.cp-main .list-coupon-note--text{
    font-size: 12px;
	line-height: 1.3;
}

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

.cp-main .detail-entry-coupon__sub-title{
    margin: 1.3em 0 .5em;
    font-weight: bold;
    color: #555;
    text-align: center;
}
  
@media (min-width: 769px) {
    .cp-main .coupon-how{
      padding: 32px;
    }
  
    .cp-main .coupon-how__title {
      font-size: 16px;
  }
  
}

accordion-block。


/* アコーディオンではない場合に使用 */
.page-note-block{
	max-width: min(100% , 640px);
	margin-left: auto;
	margin-right: auto;
}

/* 小さいタイトル */
.page-note-block__title{
	text-align: center;
	font-size: 12px;
	font-weight: normal;
}