@charset "utf-8";

/* ==================================================================

	cp.css
	
=================================================================== */

/* --------------------------------
   □ 共通
-------------------------------- */ 
main .chapter{
    padding: 68px 0;
}
main .chapter.bgGray{
    background-color: #ececec;
}
main .chapter#use .container,
main .chapter#caution .container{
    width: 832px;
}
main .chapter p:last-child{
    margin-bottom: 0;
}
main .chapter h3{
    font-size: 162%;
    text-align: center;
    margin-bottom: 32px;
}

@media only screen and
(max-width : 767px) {

    main .chapter{
        padding: 60px 0;
    }
    main .chapter#use .container,
    main .chapter#caution .container{
        width: auto;
    }
    main .chapter h3{
        font-size: 142%;
    }
}

/* --------------------------------
   #intro
-------------------------------- */ 
#intro p{
    line-height: 2.0;
}

@media only screen and
(max-width : 767px) {

    #intro p{
        text-align: left;
    }
}

/* --------------------------------
   #campaign
-------------------------------- */ 
#campaign .present{
    line-height: 2.0;
    font-weight: bold;
}
#campaign .present span{
    line-height: 2.0;
    text-decoration: underline;
    text-decoration-thickness: 0.5em;
    text-decoration-color: rgba(255, 255, 122, 1);
    text-underline-offset: -0.2em;
    text-decoration-skip-ink: none;
}
#campaign .couponImg{
    margin-top: 20px;
}
#campaign .note{
    margin-top: 12px;
    font-size: 75%;;
}
#campaign .link{
    margin-top: 20px;
}
#campaign .link a{
    color: #e24390;
}
#campaign .link a:hover{
    text-decoration: underline;
}

#campaign .forCustomer{
    background: #fff;
    padding: 48px;
    margin-top: 32px;
    border-radius: 24px;
}
#campaign .forCustomer h4{
    color: #dc666a;
    font-size: 125%;
    margin-bottom: 32px;
    text-align: center;
}
#campaign .forCustomer p{
    line-height: 1.7;
}
#campaign .forCustomer p strong{
    color: #dc666a;
}
#campaign .forCustomer .buttonStyle{
    margin-top: 32px;
}
#campaign .forCustomer .buttonStyle a{
    font-size: 100%;
}

@media only screen and
(max-width : 767px) {

    #campaign .present{
        text-align: left;
    }
    #campaign .forCustomer{
        padding: 36px 20px;
    }
    #campaign .forCustomer h4{
        font-size: 120%;
        margin-bottom: 24px;
    }
    #campaign .forCustomer p{
        text-align: left;
    }
    #campaign .forCustomer .buttonStyle{
        margin-top: 28px;
        text-align: center;
    }
}

/* --------------------------------
   #use
-------------------------------- */ 
#use dl.arrow{
    margin-bottom: 98px;
    position: relative;
}
#use dl.arrow:after{
    content: "";
    position: absolute;
    width: 16px;
    height: 56px;
    left: 50%;
    bottom: -90px;
    background: url(../../images/cp/renewal/arrow.svg) 0 0 no-repeat;
}
#use dl dt{
    font-size: 125%;
    font-weight: bold;
    margin-bottom: 12px;
}
#use dl dd.img{
    margin-top: 24px;
}
#use dl dd a{
    color: #e24390;
}
#use dl dd .period{
    display: inline-block;
    padding: 6px 20px;
    border: 1px solid #000000;
    margin: 8px 0;
}
#use dl dd a:hover{
    text-decoration: underline;
}
#use dl dd .note{
    margin-top: 12px;
    font-size: 75%;;
}
#use dl dd.event_kakunin{
    margin-top: 20px;
}

/* --------------------------------
   #caution
-------------------------------- */ 
#caution .note li{
    padding-left:1em;
	text-indent:-1em;
}

/* タブレット用
-------------------------------------------- */
@media screen and (max-width: 1024px)  {


}