@charset "UTF-8";
/*--------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------
 COMMON SETTEING
 --------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------*/
/*-------------------------------------------
 ページ調整
-------------------------------------------*/
.cp-main {

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

    --col-c-green: #3CB65E;
    --col-c-dark-green: #289446;
    --col-c-dark-red: #B1002C;
    --col-c-yellow: #FFF54C;
    --col-c-pink: #FAE6EB;
    --col-d-red: #CC0033;

    /* transition */
    --hover-transition: all .3s ease-out;
    /* テキストリンク */
    --col-txt-link: #1889CF;
    /* docomo red */
    --col-d-red: #cc0033;
    /* docomo green */
    --col-d-green: #009141;
    /* light gray(border.etc.) */
    --col-d-gray: #D9D9D9;

    --col-d-black: #222;

    color: var(--col-d-black);
}


/* 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;
}
/* scroll */
html { 
    scroll-behavior: smooth;
    scroll-padding-top: 56px;
  }
  @media (min-width: 769px) {
    html {
      scroll-padding-top: 80px;
    }
  }

@media (min-width: 769px) {
  .cp-body .bw-breadcrumb{
    padding-left: 3%;
    padding-right: 3%;
  }
}

@media (min-width: 1000px) {
  .cp-body .bw-breadcrumb{
    padding-left: 0;
    padding-right: 0;
  }
}

/* footer上の余白削除 */

.bw-footer {
    padding-top: 0;
}

/* メインコンテンツ ヘッダー空き　調整用 */

body[data-page-type="top"] .bw_contentsArea,
.bw_contentsArea {
    margin-top: 51px !important;
}


/* PCヘッダー空き調整 */

@media all and (min-width: 769px) {
    body[data-page-type="top"] .bw_contentsArea,
    .bw_contentsArea {
        margin-top: 66px !important;
    }
}



/* PC パンクズ下の　margin　対策用 */

body[data-page-type="top"] .bw_contentsArea {
    display: block;
}
/*-------------------------------------------
 基本設定
-------------------------------------------*/
.cp-main{
	/* max960で 960以下で左右に入れたい余白の数値 */
	/* 基本的にヘッダーなどに合わせ 8px */
	--size-rl-padding: 8px;

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

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

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

	/* 最大幅 */
	--maxwidth: 960px;
}

/* 横幅MAX960 */
.cont960 {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* hover */
a:hover {
    text-decoration: none;
}


/*-------------------------------------------
 list
-------------------------------------------*/
.cp-main ul.list__disc{
    margin: 0;
    padding-left: 1em;
}


.cp-main ul.list__disc li{
    list-style:initial;
    line-height: 1.3;
    margin-bottom: .5em;
}

.cp-main .list__normal li {
    padding-left: 1em;
    text-indent: -1em;
}


.cp-main .list__normal li span{
	text-indent: 0;
}

.cp-main ul.list__2em{
    padding-left: 2em;
    text-indent: -2em;
}

.cp-main .inner-block{
    padding-left: var(--gap-base);
    padding-right: var(--gap-base);
}

.cp-main .list__alternative{
    list-style: none;
    margin-left: 12px;
   }
   
.cp-main .list__alternative li{
     align-items: unset;
     margin-bottom: .5em;
     line-height: 1.5;
   }
   
.cp-main .list__alternative li::before{
    content: "●"; 
    color: #FE4E43; 
    font-size: 6px;
    display: inline-block;
    margin-left: -12px;
    width: 12px;
   }

   @media only screen and (min-width: 789px) {
    .cp-main .list__alternative{
        margin-left: 14px;
       }
       

    .cp-main .list__alternative li::before{margin-left: -14px;width: 14px;vertical-align: middle;}
   }


/*-------------------------------------------
 ボタン
-------------------------------------------*/
.cp-main .cp-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--col-c-green);
    border: 2px solid var(--col-d-black);
    border-radius: 999px;
    color:#FFF;
    font-weight: bold;
    min-height: 52px;
    width: min(70vw ,360px);
    margin: auto;
    position: relative;
    font-size: clamp(16px , 3vw ,20px);
}

@media only screen and (min-width: 769px) {
    .cp-main .cp-btn{
        min-height: 60px;
    }

    /*hover*/
    .cp-main .cp-btn:hover{
        background: var(--col-c-dark-green);
    }
}

/* ボタン　＞ */

.cp-main .arrow:before {
    position: absolute;
    content: " ";
    right: 13px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--col-d-black);
    border-right: 2px solid var(--col-d-black);
    border-radius: 2px;
    top: 50%;
    transform:  translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
}


/* ボタン影 */
.cp-main .btn-shadow {
    box-shadow: 0px 2px 0 var(--col-d-black);

    transform: translateY(0);
}

@media only screen and (min-width: 769px) {
    .cp-main .arrow:before {
        border-width: 3px;
        width: 10px;
        height: 10px;
        right: 20px;
    }
}

/*-------------------------------------------
 block 共通setting
-------------------------------------------*/
/* コンテンツのpadding + max width */
.cp-main .cont__padding-maxwidth,
.cp-main .cont__padding-maxwidth-wide{
    padding: calc(var(--gap-base) * 2) 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);
        }

        .cp-main .cont__padding-maxwidth-wide {
            padding: calc(var(--gap-base) * 1.3) var(--gap-base);
             }
}

/* コンテンツのpadding + max width 上下スマホで空き同じ */
.cp-main .cont__padding-maxwidth-tbsame {
    padding: var(--gap-base);
    max-width: calc(var(--maxwidth) + (var(--gap-base) * 2));
    margin-left: auto;
    margin-right: auto;
}

/* コンテンツのpadding + max width　上左右空き同じ */
.cp-main .cont__padding-maxwidth-trlsame {
    padding: var(--gap-base) var(--gap-base) var(--gap-base) var(--gap-base);
    max-width: calc(var(--maxwidth) + (var(--gap-base) * 2));
    margin-left: auto;
    margin-right: auto;
}

/* コンテンツのpadding + max width　上の空きなし */
.cp-main .cont__padding-maxwidth-only-brl {
    padding: 0 var(--gap-base) calc(var(--gap-base) * 2) var(--gap-base);
    max-width: calc(var(--maxwidth) + (var(--gap-base) * 2));
    margin-left: auto;
    margin-right: auto;
}

/* コンテンツのpadding + max width　上の空きなし */
.cp-main .cont__padding-maxwidth-only-brlsame {
    padding: 0 var(--gap-base) var(--gap-base) var(--gap-base);
    max-width: calc(var(--maxwidth) + (var(--gap-base) * 2));
    margin-left: auto;
    margin-right: auto;
}


/* コンテンツのpadding + max width　上の空きなし下は余白半分 */
.cp-main .cont__padding-maxwidth-only-b_half-rl {
    padding: 0 var(--gap-base) var(--gap-base) var(--gap-base);
    max-width: calc(var(--maxwidth) + (var(--gap-base) * 2));
    margin-left: auto;
    margin-right: auto;
}

/* コンテンツのpadding */
.cp-main .cont__padding{
	padding: var(--gap-base-tb) var(--gap-base);
}

/* コンテンツのpadding左右のみ */
.cp-main .cont__padding-only-rl{
	padding: 0 var(--gap-base);
}

/* コンテンツのpadding上下のみ */
.cp-main .cont__padding-only-tb{
	padding: var(--gap-base-tb) 0;
}

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

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

/* コンテンツの margin */
.cp-main .cont__margin{
	margin: var(--gap-base-tb) var(--gap-base);
}

/* コンテンツのmargin左右のみ */
.cp-main .cont__margin-only-rl{
	margin: 0 var(--gap-base);
}

/* コンテンツのmargin上下のみ */
.cp-main .cont__margin-only-tb{
	margin: var(--gap-base) 0;
}

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

/* コンテンツ */
.cp-main .block-inner{
	margin-left: auto;
	margin-right: auto;
}

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

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

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

    /* border-radius*/
    .cp-main .border-rad{
        border-radius: 20px;
    }
    
  }

/* border-radius*/
.cp-main .border-rad16__all{
    border-radius: 16px;
}

/*-------------------------------------------
　コンテンツ共通
-------------------------------------------*/
.cp-main .marginTgap{
    margin-top: calc(var(--gap-base) * 2);
}

.cp-main .main-title{
    width: 100%;
    height: 68px;
    position: relative;
    overflow: hidden;
}

.cp-main .main-title__img{
    width: auto;
    position: absolute;
    top: 0;
    left: 50%;
    max-width: initial;
    transform: translateX(-50%);
    height: 100%;
}

.cp-main .content-lead{
    text-align: center;
    margin: min(4%,32px) auto;
    font-weight: bold;
    line-height: 1.3;
    font-size: clamp(14px,4vw, 18px);
    padding: 0;
}

.cp-main .content-lead span{
    display: inline-block;
}

@media (min-width: 550px) {
    .cp-main .main-title{
        height: 130px;
    }
    
    .cp-main .main-title__img{
        width: 700px;
    }
}

@media (min-width: 769px) {
    .cp-main .main-title{
        /* width: auto; */
        height: 175px;
    }
    
    .cp-main .main-title__img{
        width: auto;
    }
}


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

/* 背景 */
.mv-block {
    position: relative;
    background: url(../img/dot_g.png) repeat center;
    margin-bottom: min(12% ,120px);
}

.mv-block::before{
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 41px;
    background: #FFF;
}

/* img */
.cp-main .mv-block__img {
    display: block;
    width: min(100% , 960px);
    margin-bottom: 0;
    margin: 0 auto;
}

@media screen and (min-width:960px) {
    .cp-main .mv-block__inner {
        border-radius: 16px;
    }
    .cp-main .mv-block__img {
        border-radius: 16px;
        overflow: hidden;
    }
}

/*=====nav=====*/
.cp-main .p-nav {
    max-width: 640px;
    margin: 1.5em auto;
}

.cp-main .p-nav-list {
    width: min(90%,614px);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(4% ,74px);
    place-content: center;
  place-items: center;
}

.p-nav-list__item{
    text-align: center;
    position: relative;
}

.cp-main .p-nav-list__img{
    height: 28px;
    width: auto;
    max-width: initial;
    display: block;
    margin: auto;
}

.cp-main .p-nav-list__link-inner{
    position: relative;
    display: grid;
    place-content: center;
    place-items: center;
    gap: 3px;
    width: 84px;
    height: 84px;
    background: var(--col-c-green);
    border: 2px solid var(--col-d-black);
    color: #FFF;
    text-align: center;
    font-size: 10px;
    line-height: 1.1;
    border-radius: 999px;
    text-align: center;
}
.cp-main .p-nav-list__link::before{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    transform: translateY(8px);
    border: 2px solid var(--col-d-black);
    border-radius: inherit;
    background: #005819;
    border-radius: 999px;

}


.cp-main .p-nav-list__link p{
    line-height: 1.2;
}

.cp-main .p-nav-list__arrow {
    display: block;
    text-align: center;
}

.cp-main .p-nav-list__arrow img{
    height: 6px;
}



@media screen and (min-width:480px) {
    .cp-main .p-nav-list__link-inner{
        width: 120px;
        height: 120px;
        gap: 6px;

    }
    .mv-block::before{
        height: 50px;
    }

    .cp-main .p-nav-list__link p{
        font-size: 14px;
    }
}


@media screen and (min-width:769px) {
    .cp-main .p-nav-list__link-inner,.cp-main .p-nav-list__link:before{
        width: 155px;
        height: 155px;
        border-width: 3px;
    }

    .cp-main .p-nav-list__img{
        height: 50px;
    }

    .cp-main .p-nav-list__link p{
        font-size: 16px;
    }

    .cp-main .p-nav-list__arrow img{
        height: 12px;
    
    }

    .mv-block::before{
        height: 77px;
    }

    /* hover */
    .cp-main .p-nav-list__link-inner:hover{
        background: var(--col-c-dark-green);
    }
}

@media screen and (min-width:961px) {
    .mv-block {
        padding-top: 20px;
    }
}

/*----------------------------
TOKUTEN
 ----------------------------*/

.cp-main .tokuten-block{
    background: url(../img/dot_y.png) repeat;
    padding-top:  min(20% ,80px);
    position: relative;
}

.cp-main .tokuten-block__title-outer{
    width: 90%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% ,-50%);
}

.cp-main .tokuten-block__inner {
    padding-top: 0;
}

.cp-main .tokuten-block__title-outer2{
    text-align: center;
    background: url(../img/h_fukidashi.png) no-repeat center top;
    background-size: cover;
    font-size: 12px;
    width: 100%;
    padding-top: 13%;
    position: relative;
    margin: auto;
}


.cp-main .tokuten-block__title{
    position: absolute;
    top: 0;
    height: 0;
    width: 100%;
    font-size: 3.2vw;
    padding: .7em;
}

.cp-main .tokuten-block__title strong{
    font-size: 4vw;
    color: #FE4E43;
}

.cp-main .tokuten-block__list{
    display: grid;
    gap: 47px;
}

.cp-main .tokuten-block__list-item{
    position: relative;
}

.cp-main .tokuten-block__list-item-inner{
    border-radius: 16px;
    overflow: hidden;
    background: #FFF;
    padding:  min(16% , 60px) min(8% , 40px) min(8% , 22px) min(8% , 40px);
    font-size: clamp(12px , 3vw, 14px);
}

.tokuten-block__sub-block-note {
    font-size: clamp(11px , 2.8vw, 12px);
    margin-top: 8px;
    text-align: center;
}

.cp-main .tokuten-block__eve-title{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-49% , -50%);
    width: min( 100% ,320px);
    margin: auto;
}

.cp-main .tokuten-block__eve-title img{
    width: 90%;
    margin: auto;
    display: block;
}

.cp-main .tokuten-block .list__disc{
    margin-bottom: 14px;
}

.cp-main .tokuten-block__btn{
    font-size: 4vw;
    min-height: 40px;
    width: min(100% ,280px);
}

.cp-main .tokuten-block__paragraph--center{
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-top: 1em;
    line-height: 1.4;
}


@media screen and (min-width:375px) {
    .cp-main .tokuten-block__list-item-inner{
        padding: 50px min(14% , 40px) min(8% , 22px) min(14% , 40px);
    }
    .cp-main .tokuten-block__btn{
        font-size: clamp(14px , 3.4vw ,14px);
    }
}

@media screen and (min-width:550px) {
    /* タイトル調整 */
    .cp-main .tokuten-block__title-outer{
        width: 550px;
    }

    .cp-main .tokuten-block__title{
        font-size: 20px;

    }
    .cp-main .tokuten-block__title strong{
        font-size: 26px;
    }
}

@media screen and (min-width: 769px) {
    .cp-main .tokuten-block__title-outer{
        width: 706px;
    }

    .cp-main .tokuten-block__title{
        font-size: 24px;
        padding: .8em;
    }

    .cp-main .tokuten-block__title strong{
        font-size: 32px;
    }

    .cp-main .tokuten-block__list-item-inner .list__disc{
        width: min(94%,300px);
        margin-left: auto;
        margin-right: auto;
    }

    
}

/* 横並びに変更 */
@media screen and (min-width:769px) {
    .cp-main .tokuten-block{
        padding-top: min(12% ,100px);
        width: 90%;
    }
    .cp-main .tokuten-block__eve-title img {
        width: 100%;
    }

    .cp-main .tokuten-block__list{
        grid-auto-flow: column;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .cp-main .tokuten-block__list-item-inner{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: min(20%,68px) min( 4% , calc((100% - 300px) / 2 )) 6%;
    }

    .cp-main .tokuten-block__sub-block{
        min-height: 80px;
    }

    .cp-main .tokuten-block__eve-title{
        width: min( 90% ,398px);
    }

    .cp-main .tokuten-block__btn{
        min-height: 54px;
    }
    
}

/*----------------------------
 add TOKUTEN
 ----------------------------*/

.cp-main .add-tokuten-block{
    background: url(../img/dot_y.png) repeat;
    padding-top: min(10% ,60px);
    position: relative;
    margin-top: min(30% ,70px);
}

.cp-main .add-tokuten-block__title-outer{
    width: 90%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% ,-50%);
}

.cp-main .add-tokuten-block__inner {
    padding-top: 0;
}

.cp-main .add-tokuten-block__title-outer2{
    text-align: center;
    background: url(../img/h_fukidashi.png) no-repeat center top;
    background-size: cover;
    font-size: 12px;
    width: 100%;
    padding-top: 13%;
    position: relative;
    margin: auto;
}


.cp-main .add-tokuten-block__title{
    position: absolute;
    top: 0;
    height: 0;
    width: 100%;
    font-size: 3.8vw;
    padding: .7em;
}

.cp-main .add-tokuten-block__title strong{
    font-size: 4vw;
    color: #FE4E43;
}

.cp-main .add-tokuten-block__list{
    display: grid;
    gap: 47px;
}

.cp-main .add-tokuten-block__list-item{
    position: relative;
}

.cp-main .add-block__bnr-list-item-img{
    display: inline-block;
    border: 1px solid #FFF;
}

.cp-main .add-tokuten-block__list-item-inner{
    border-radius: 16px;
    overflow: hidden;
    background: #FFF;
    padding:  min(16% , 60px) min(8% , 40px) min(8% , 22px) min(8% , 40px);
    font-size: clamp(12px , 3vw, 14px);
}

.add-tokuten-block__sub-block-note {
    font-size: clamp(11px , 2.8vw, 12px);
    margin-top: 8px;
    text-align: center;
}

.cp-main .add-tokuten-block__eve-title{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-49% , -50%);
    width: min( 100% ,320px);
    margin: auto;
}

.cp-main .add-tokuten-block__eve-title img{
    width: 90%;
    margin: auto;
    display: block;
}

.cp-main .add-tokuten-block .list__disc{
    margin-bottom: 14px;
}

.cp-main .add-tokuten-block__btn{
    font-size: 4vw;
    min-height: 40px;
    width: min(100% ,280px);
}

@media screen and (min-width:375px) {
    .cp-main .add-tokuten-block__list-item-inner{
        padding: 50px min(14% , 40px) min(8% , 22px) min(14% , 40px);
    }
    .cp-main .add-tokuten-block__btn{
        font-size: clamp(14px , 3.4vw ,14px);
    }
}

@media screen and (min-width:550px) {
    /* タイトル調整 */
    .cp-main .add-tokuten-block__title-outer{
        width: 550px;
    }

    .cp-main .add-tokuten-block__title strong{
        font-size: 26px;
    }
}

@media screen and (min-width: 769px) {
    .cp-main .add-tokuten-block__title-outer{
        width: 706px;
    }

    .cp-main .add-tokuten-block__title{
        font-size: 27px;
        padding: .8em;
    }

    .cp-main .add-tokuten-block__title strong{
        font-size: 32px;
    }

    .cp-main .add-tokuten-block__list-item-inner .list__disc{
        width: min(94%,300px);
        margin-left: auto;
        margin-right: auto;
    }

}

/* PCでの余白 */
@media screen and (min-width:769px) {
    .cp-main .add-tokuten-block{
        padding-top: min(8% ,80px);
        width: 90%;
    }
    .cp-main .add-block__bnr-list-item-img:hover{
        filter: brightness(60%) contrast(150%);
    }
    


}


/*----------------------------
クーポンもらえる
----------------------------*/

.cp-main .coupon-block .main-title{
    margin: var(--gap-base) var(--gap-base) min(2% ,30px);
    width: initial;
}

.cp-main .coupon-block .coupon-block__sub-title{
    width: min(30% , 215px);
    margin: auto;
    position: relative;
    z-index: 1;
}

.cp-main .coupon-block-inner{
    position: relative;
    text-align: center;
    transform: translateY(-8%);
    background: url(../img/coupon_bg.png) top center / auto 100% repeat;
    padding: min(10% ,75px) var(--gap-base);
}

.cp-main .coupon-block__sub-text{
    font-size: clamp(18px , 5vw ,32px);
    position: relative;
    font-weight: bold;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-main .coupon-block__sub-text p{
    line-height: 1.3;
    font-size: clamp(18px , 5vw ,32px);
}

.cp-main .coupon-block__sub-text:before,
.cp-main .coupon-block__sub-text:after{
    content: "";
    height: 2em;
    width: 2em;
    vertical-align: bottom;
    background-image: url(../img/icon_kakko_left.svg);
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
}

.cp-main .coupon-block__sub-text:after{
    background-image: url(../img/icon_kakko_right.svg);
    background-position: left center;
}

.cp-main .coupon-block__sub-text strong{
    color: var(--col-c-dark-green);
}

.cp-main .coupon-block-text{
    margin: min(2% ,16px);
}

.cp-main .coupon-icons{
    margin: auto;
    margin-top: min(6% ,40px);
    max-width: 698px;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}


@media screen and (min-width:769px) {
    .cp-main .coupon-icons{
        gap: 48px;
    }
    .cp-main .coupon-icons a img:hover{
        filter: brightness(60%) contrast(150%);
    }
}

/*----------------------------
たまる・つかえる
----------------------------*/
.cp-main .use-block{
    background: url(../img/bg_coin.svg) center bottom / auto 180px repeat-x #FFF;
    padding-bottom: min(4% , 60px);
}
.cp-main .use-block-inner {
    padding-top: 0;
    position: relative;
    max-width: 1450px;
}

.cp-main .use-block .main-title{
    margin: 0 var(--gap-base) min(3% ,50px);
    width: initial;
}

.cp-main .use-block__sub-title{
    width: min(80%, 486px);
    margin: auto;
}

.cp-main .use-block-text{
    padding: 0;
}

.cp-main .use-otoku__item{
    position: relative;
    margin-top: 75px;
    padding: min(6% ,50px);
    padding-top: calc(30px + 6%);
}

.cp-main .use-block .use-block__catch{
    width: min(100%,210px);
    margin: auto;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    transform: translate(-50% , -50%);
}

.cp-main .use-otoku__item-inner{
    max-width: 370px;
    margin: auto;
}

.cp-main .use-otoku__item{
    background: var(--col-c-yellow);
    border-radius: 16px;
}

.cp-main .use-otoku__btn{
    width: min(80% ,280px);
    margin-top: min(4% ,20px);
    font-size: clamp(14px , 3vw,16px);
}

.cp-main .use-otoku__item01 .use-otoku__sub-img01{
    width: min(80% ,275px);
    display: block;
    margin: auto;
}
.cp-main .use-otoku__item01 .use-otoku__sub-img02{
    width: min(100% ,360px);
    display: block;
    margin: min(5% ,35px) auto;
}

.cp-main .use-otoku__item02 .use-otoku__sub-img01{
    width: min(100% ,360px);
    display: block;
    margin: auto;
}
.cp-main .use-otoku__item02 .use-otoku__sub-img02{
    width: min(60% ,360px);
    display: block;
    margin: min(4% ,26px) auto;
}

.cp-main .use-otoku .list__2em{
    font-size: clamp(10px , 2.8vw ,11px);
    line-height: 1.5;
}

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

.cp-main .use-block .inner-block{
    margin-top: min(10% ,36px);

}


/*----- 251104 追加 ミッション ----*/

.cp-main .what-point{
    margin-top: 16px;
    background-color: #FFF;
    padding: min(6%,24px);
    border-radius: 16px;
}

.cp-main .what-point__list{
  display: grid;
  gap: 10px;
}

.cp-main .what-point__item{
  display: grid;
  align-items: center;
  gap: 8px;
  grid-template-columns: 30% 1fr;
}

.cp-main .what-point__item-title{
  font-size: clamp(16px ,3vw , 18px);
  text-align: left;
  line-height: 1.5em;
}


.cp-main .what-point__text{
  font-size: clamp(12px ,2.8vw ,14px);
  text-align: left;
  font-weight: bold;
  line-height: 1.5em;
  flex-grow: 1;
}

.cp-main .col-green{
  color: #289446;
}


@media screen and (min-width:800px) {
    .cp-main .use-otoku{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .cp-main .use-otoku__item{
        margin-top: 75px;
        width: calc((100% / 2) - 24px);
    }

    .cp-main .use-otoku__item:nth-child(2n){
        margin-left: 24px;
    }
    
    .cp-main .use-block .use-block__catch{
        width: min(85%,230px);
        transform: translate(-50% , -50%);
    }

    .cp-main .use-otoku__item02 .use-otoku__sub-img02{
        width: min(90% ,360px);
        margin-top: 30%;
    }

    .cp-main .use-block-text strong{
        font-size: 24px;
    }

    .cp-main .use-block{
        background-size: auto 600px;
    }

    .cp-main .use-otoku__btn{
        min-height: 54px;
    }
}

@media screen and (min-width:940px) {
    .cp-main .use-otoku{
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(3, 1fr);
    }

    .cp-main .use-otoku__item:nth-child(2n){
        margin-left: 0;
    }

    .cp-main .use-otoku__item{
        width: auto;
    }

        .cp-main .use-otoku__item02 .use-otoku__sub-img02{
        margin-top: 20%;
    }
}



/*----------------------------
登録不要
----------------------------*/
.cp-main .account-block{
    margin: min(2% ,30px) auto 0;
}

.cp-main .account-block__inner{
    padding-top: min(3% ,20px) ;
}


.cp-main .account-block .main-title{
    margin: 0 var(--gap-base) min(3% ,50px);
    width: initial;
}

.cp-main .account-block__sub-title{
    width: min( 90% ,474px);
    margin: auto;
}


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

.cp-main .login-block{
    background: #FAE6EB;
    padding: min(8% ,40px) 8px;
    border-radius: 16px;
}

.cp-main .login__btn{
    background: var(--col-d-red);
    position: relative;
    margin: initial;
}

.cp-main .login__btn-outer{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-main .login__btn-outer:before,
.cp-main .login__btn-outer:after{
    content: "";
    height: 2em;
    width: 2em;
    vertical-align: bottom;
    background-image: url(../img/icon_enp_left.svg);
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
}

.cp-main .login__btn-outer:after{
    background-image: url(../img/icon_enp_right.svg);
    background-position: left center;
}

.cp-main .login-block__note{
    text-align: center;
    margin-top: 8px;
    font-size: clamp(11px ,2.8vw ,14px);
}

@media screen and (min-width:600px) {
    .cp-main .login__btn-outer:before,
    .cp-main .login__btn-outer:after{
        content: "";
        height: 78px;
        width: 78px;
    }
}

@media screen and (min-width:769px) {
    .cp-main .login__btn:hover{
        background: var(--col-c-dark-red);
    }
}

/*-------------------------------------------
 メルマガ登録
-------------------------------------------*/
.cp-main .mailmag-block{
    border-top: 2px solid var(--col-d-black);
    border-bottom: 2px solid var(--col-d-black);
    background: #E8F4EC;
}


.cp-main .mailmag-block__title{
    width: min(50%, 230px);
    margin: auto;
}


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


.cp-main .purchase-read__box__inner{
    padding: 0 min(6% ,30px);
}

.cp-main .tourouku{
    background: url(../img/bg_maiLmag.png) center / contain no-repeat;
    width: min(100% ,722px);
    position: relative;
    padding-top: min(54%, 340px);
    margin: auto;
    margin-bottom: min(6%,30px);
}

.cp-main .tourouku .cp-btn{
    position: absolute;
    bottom:-20px;
    left: 50%;
    transform: translateX( -50%);
}

@media screen and (min-width:600px) {
    .cp-main .mailmag-block{
        border-width:4px;
    }
}

/*-------------------------------------------
 お支払い方法
-------------------------------------------*/
.cp-main .payment-block{
    
}

.cp-main .payment-block__title{
    width: min(40%, 190px);
    margin: auto;

}

.cp-main .payment-block__img-box{
    margin: min(5% , 25px) auto 0;
    width: min(100% ,500px);
    text-align: center;

}

@media screen and (min-width:769px) {
    .cp-main .payment-block{
        width: min(100% , 935px);
        margin: auto;
    }

    .cp-main .payment-block__img-box{
        width: min(100% ,935px);
    }
}

/*-------------------------------------------
 ご利用方法
-------------------------------------------*/
.cp-main .howto-block{
    border-top: 2px solid var(--col-d-black);
    border-bottom: 2px solid var(--col-d-black);
    background: var(--col-c-green);
    position: relative;
}

.cp-main .apri-use__title{
    width: min(100% ,564px);
    margin: auto;
}
.cp-main .howto-block__title{
    width: min(40%, 190px);
    margin: 0 auto min(5% ,30px) auto;
}

.cp-main .purchase-read-block{
    border-radius: 16px;
    overflow: hidden;
    background: #FFF;
}

.cp-main .purchase-read-block__title {
    padding: min(3% ,16px);
}

.cp-main .purchase-read-block__title img{
    width: min( 30% ,108px);
    display: block;
    margin: auto;

}
.cp-main .title-purchase{
    background:#FFF4F4;
}

.cp-main .title-read{
    background:#E8F4EC;
}

.cp-main .purchase-read__box{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: min(16px,30px) auto;
} 

.cp-main .purchase-read__box__inner {
    font-size: clamp(12px ,3vw ,16px);
}

.cp-main .list__alternative span{
    font-size: 10px;
}

.cp-main .purchase-read-block__device{
    text-align: center;
    font-size: clamp(14px ,3vw ,16px);
    font-weight: bold;
    margin-bottom: min(4% , 16px)
}

.cp-main .border-r-dot{
    border-right:  2px dotted var(--col-d-black);
}


.cp-main .list__alternative.read__list li::before{
        color: var(--col-c-green);
}

.cp-main .purchase-read-block__note{
    font-size: 10px;
    line-height: 1.3;
}

.cp-main .apri-use{
    margin: min(10%,92px) auto min(3% ,30px) auto;

}

.cp-main .apri-use__inner{
    position: relative;
    padding-bottom: 0;
    padding-top: 0.5em;
}

.cp-main .apri-use__inner:before{
    content: "";
    background-color: #FFF;
    border-radius: 16px;
    background-image: url(../img/dot_g.png);
    margin-top: min(5% ,20px);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 85%;
}

.cp-main .apri-use__fukidashi{
    width:100%;
    position: relative;
    z-index: 1;
    background: url(../img/fukidashi2.svg) left top / 100% no-repeat;
    display: flex;
    padding-top: 40.835266821%;
}

.cp-main .apri-use__fukidashi p{
    position: absolute;
    top: 20%;
    line-height: 1.3;
    left: 8vw;
    font-size: 3.5vw;
}

.cp-main .apri-use__fukidashi p strong{
    background: linear-gradient(transparent 70%, #FFE327 30%);
    font-size: 4.4vw;
}


@media screen and (min-width:500px) {
    .cp-main .apri-use__fukidashi{
        width: 429px;
        padding-top:176px;
        margin-left: auto;
        margin-right: auto;
    }
    .cp-main .apri-use__fukidashi p{
        position: absolute;
        top:20%;
        left: 8vw;
        font-size:18px;
    }
    .cp-main .apri-use__fukidashi p strong{
        font-size:22px;
    }
}

.cp-main .apri-use__img-phone,
.cp-main .apri-list{
    position: relative;
    z-index: 1;
    border-radius: 16px;
}


.cp-main .apri-use__img-phone{
    width:60%;
    border-radius: 16px;
    overflow: hidden;
    left:min(-7%,48px);
    margin-top: .5em;
}

.cp-main .apri-list{
    position: absolute;
    top:40%;
    left: 55%;
    width: 40%;
    display: grid;
    gap: 16px;
}

@media screen and (min-width:769px) {
    .cp-main .howto-block{
        border-width: 4px;
    }

    .cp-main .apri-use__img-phone{
        width: 35%;
        border-radius: 0;
        left: 1%;
        margin-top: 20px;
    }

    .cp-main .apri-use__fukidashi{
        position: absolute;
        top: .5em;
        left: 38%;
        top:20px;
    }
    .cp-main .apri-use__fukidashi p{
        left: 70px;
    }
    .cp-main .apri-use__inner:before{
        height: 70%;
    }

    .cp-main .apri-list{
        grid-auto-flow: column;
        width: 400px;
        left: 40%;
        top: 60%;
    }
}

@media screen and (min-width:960px) {

    .cp-main .apri-use__img-phone{
        left: 6%;
    }

    .cp-main .apri-use__fukidashi{
        left: 42%;
    }


    .cp-main .apri-list{
        width: 464px;
        left: 43%;
        top: 53%;
    }
}

/*-------------------------------------------
 下コンテンツのスマホの調整　ボーター入れる
-------------------------------------------*/

.bw-footer__download {
    padding-top: 2rem;
    border-top: 1px solid #ccc;
}


/*-------------------------------------------
close対応　
-------------------------------------------*/

/* ページ上テキスト */

/* setting other */
.attention__txt {
    font-size: 3.5vw;
    color: #cc0033;
}

@media only screen and (min-width: 390px) {
    .attention__txt {
        font-size: 12px;
    }
}

.cp-main .howto-link__btn{
    margin-top: 2em;
    background: var(--col-c-yellow);
    color: var(--col-d-black);
}

@media only screen and (min-width: 789px) {
    .cp-main .howto-link__btn:hover{
        background: #dad350;
    }
}