@charset "utf-8";
html {
    font-size: 62.5%; /* font-sizeは16pxの62.5%の10px */
}

/*style---------------*/
:root {
    --main-text-color: #241A47;
    --secondary-text-color: #707070;
    --accent-color: #05a5a0;

    --primary-color: #e968B0;
    --secondary-color: #f264ab;
    --accent-color: #05a5a0;
    --note-color: #05a5a0;
    --white: #ffffff;
    --point-color: #e93957;

    --primary-bg:#FCF9F3;

    --primary-border:#ebd3d3;
    --secondary-border: #f1dbfb;
    --btn-main-bg: var(--accent-color);
    --btn-main-font: var(--white);

    --btn-secondary-bg: var(--white);
    --btn-secondary-font: var(--accent-color);
    --btn-secondary-border: var(--accent-color);
}

.common_contents{
    margin: 0 auto 80px;
}

@media screen and (max-width:640px){
    .common_contents{
        margin: 0 auto 96px;
    }
}

/*button---------------*/
.btn_main{
    max-width: 640px;
    background: var(--btn-main-bg);
    font-size: 1.6rem;
    border-radius: 3px;
}

.btn_main a {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    box-shadow: 0px 0px 9px 4px rgba(203,171,184,0.23%);
}

.btn_secondary{
    max-width: 520px;
    height: 60px;
    background: var(--white);
    font-size: 1.6rem;
    border-radius: 3px;
    margin: 0 auto;
    border: 1px solid var(--btn-secondary-border);
}

.btn_secondary a{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--btn-secondary-font);
    position: relative;
}

.btn_secondary a:after {
    content: "";
    width: 10px;
    height: 10px;
    border-top: solid 2px var(--accent-color);
    border-right: solid 2px var(--accent-color);
    position: absolute;
    left: 40px;
    top: auto;
    transform: rotate(45deg);
}

@media screen and (max-width:1024px){
    .btn_secondary a{
        padding: 8px 20px 8px 40px;
        line-height: 1.2;
    }
    .btn_secondary a:after{
        left: 10px;
    }
}

/*font---------------*/
body {
    font-size: 1.6rem;/*font-size : 16px と同等*/
    letter-spacing: 1.2px;
}
h1 {
    font-size: 5.6rem;/* font-size: 56px と同等 */
}
h2 {
    font-size: 3.4rem; /* font-size: 34px と同等 */
}
h3 {
    font-size: 2.4rem; /* font-size: 24px と同等 */
}
h4 {
    font-size: 1.6rem; /* font-size: 16px と同等 */
}
.common_contents_subcopy{
    color: var(--primary-color);
    font-size: 1.4rem;
    margin: 0 0 8px;
    font-weight: bold;
}

@media screen and (max-width:640px){
    h2 {
        font-size: 6vw;
    }
    h3 {
        font-size: 2.0rem;
    }
}
/*keyvisual---------------*/
.hero_wrap {
    margin: 0 0 240px;
}

#keyVisual {
    padding: 0 40px;
    height: 80vh;
    min-height: 900px;
    background: url(./images/pc/keyvisual_back.svg) no-repeat center center;
    z-index: -20;
    background-repeat: no-repeat;
    background-position: top;
    box-shadow: 5px 5px 10px rgba(215, 215, 215, 0.5);
}

.keyVisual_wrap {
    padding: 120px 0 80px;
}

.kayVisual_wrap_subcopy {
    position: absolute;
    top: 210px;
    left: 50%;
    transform: translateX(-50%);
}

.kayVisual_main{
    max-width: 640px;
    height: 290px;
    margin: 40px auto 24px;
    background-size: contain;
}

.kayVisual_head {
    color: var(--primary-color);
    font-size: 3.6rem;
    font-weight: bold;
    text-align: center;
    margin: 0 0 32px;
}

.kayVisual_head br,
.kayVisual_bodyinfo_pro1 br{
    display: none;
}

.kayVisual_body {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.kayVisual_bodyinfo_pro1 {
    padding: 4px 8px;
    margin: 0 0 16px;
    text-align: center;
    color: var(--primary-color);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border: 1px solid var(--primary-color);
    border-radius: 3px;
    background: var(--white);
}

.kayVisual_bodyinfo_term {
    font-size: 2.0rem;
    font-weight: normal;
    text-align: center;
    margin: 0 0 8px;
}

.kayVisual_bodyinfo_price {
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    position: relative;
    z-index: 2;
}

.kayVisual_bodyinfo_price:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 20px;
    bottom: 3px;
    left: 0;
    background: #ecaacf;
    z-index: -10;
}

.kayVisual_bodyhalf {
    font-size: 14rem;
    font-weight: bold;
    background: linear-gradient(122deg, #ff51a0, #68b3ff);
    -webkit-background-clip: text;
    color: transparent;
}

.common_dot {
    background-image: radial-gradient(circle at center,#d46dbb 7%, transparent 8%);
    background-position: top right;
    background-repeat: repeat-x;
    background-size: 1em 0.3em;
    padding-top: 0;
}

.keyVisual_btn{
    max-width: 600px;
    height: 62px;
    margin: 0 auto;
}


.kayVisual_wrap_subcopy_box{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5em 0;
    padding: 8px 40px;
    min-width: 120px;
    max-width: 100%;
    height: 48px;
    color: var(--main-text-color);
    font-size: 16px;
    font-weight: bold;
    background: #FFF;
    border: solid 1px var(--secondary-border);
    border-radius: 40px;
    box-sizing: border-box;
}

.kayVisual_wrap_subcopy_box:before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -13px;
    border: 10px solid transparent;
    border-top: 10px solid #FFF;
    z-index: 2;
}

.kayVisual_wrap_subcopy_box:after {
    content: "";
    position: absolute;
    bottom: -26px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid var(--secondary-border);
    z-index: -1;
}

.kayVisual_wrap_subcopy_box p {
    margin: 0;
    padding: 0;
}

.kayVisual_wrap_subcopy_box p span {
    color: var(--primary-color);
    position: relative;
}

.kayVisual_wrap_subcopy_box p span:after {
    position: absolute;
    content: "";
    border-bottom: 1px solid var(--secondary-border);
    width: 100%;
    bottom: -3px;
    right: 0;
}

@media screen and (max-width:1024px){
    .hero_wrap {
        margin: 0 0 240px;
    }
    #keyVisual{
        height: 80vh;
        min-height: 720px;
        background-size: contain;
        background-position: center;
    }
    .keyVisual_wrap {
        position: relative;
        padding: 120px 0 80px;
    }
    .kayVisual_wrap_subcopy {
        width: 100%;
        top: 80px;
    }

    .kayVisual_wrap_subcopy_box {
        width: calc(100% - 32px);
        max-width: 400px;
        height: auto;
        margin: 0 auto;
        padding: 16px;
    }
    .kayVisual_main{
        height: auto;
        max-width: 700px;
        margin: 40px auto 24px;
    }
    .kayVisual_bodyinfo {
        width: auto;
        max-width: 25%;
        text-align: center;
    }
    .kayVisual_head {
        font-size: 3.0rem;
        margin: 0 0 24px;
    }
    .kayVisual_bodyinfo_price {
        font-size: 3.2rem;
    }
    .kayVisual_bodyhalf {
        padding: 0 4px;
        width: 75%;
        max-width: 346px;
        display: flex;
    }
}

@media screen and (max-width:640px){
    #keyVisual{
        height: auto;
        padding: 0;
        background: url(./images/sp/keyvisual_back-sp.svg) no-repeat center center;
        background-size: contain;
        background-position: 0 108px;
        box-shadow: none;
    }
    .hero_wrap {
        margin: 0 ;
    }
    .keyVisual_wrap {
        padding: 70px 16px 40px;
    }
    .kayVisual_wrap_subcopy{
        top: 40px;
    }
    .kayVisual_wrap_subcopy_box {
        font-size: 1.3rem;
    }
    .kayVisual_head {
        font-size: 6vw;
        margin: 0 0 16px;
    }
    .kayVisual_head br,
    .kayVisual_bodyinfo_pro1 br{
        display: block;
    }
    .kayVisual_main{
        height: auto;
        max-width: 100%;
        margin: 40px auto 24px;
    }
    .kayVisual_bodyinfo {
        width: auto;
        text-align: center;
    }
    .kayVisual_bodyinfo_pro1{
        padding: 4px;
        font-size: 2.5vw;
        margin: 0px 0 8px;
        display: block;
    }
    .kayVisual_bodyinfo_term {
        font-size: 3vw;
        margin: 0 0 8px;
    }
    .kayVisual_bodyinfo_price {
        font-size: 5vw;
        display: inline-block;
    }
    .kayVisual_bodyinfo_price:after {
        position: absolute;
        content: "";
        width: 100%;
        height: 12px;
        bottom: 3px;
        left: 0;
        background: #ecaacf;
        z-index: -1;
    }
    .kayVisual_bodyhalf {
        max-width: 310px;
        font-size: 22vw;
        padding: 0 4px;
        width: auto;
    }
}


/*primaryPoint---------------*/
#primaryPoint {
    bottom: -200px;
    max-width: 1200px;
    right: 50%;
    text-align: center;
    background: linear-gradient(164deg, rgb(255 255 255) 0%, rgb(255 245 249) 35%, rgb(253 247 255) 87%);
    margin: 0 auto;
    padding: 40px;
}

#primaryPoint h2 br {
    display: none;
}

.primaryPoint_subcopy{
    color: var(--primary-color);
    font-weight: bold;
    margin: 0 0 24px;
}

.primaryPoint_subcopy span {
    position: relative;
}

.primaryPoint_subcopy span:after {
    position: absolute;
    content: "";
    border-bottom: 1px solid var(--secondary-border);
    width: 100%;
    bottom: -3px;
    right: 0;
}

.primaryPoint_subcopy h2 br{
    display: none;
}

.primaryPoint_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.primaryPoint_arrow {
    width: 80px;
    position: relative;
}

.primaryPoint_arrow::before{
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    border-top: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    position: absolute;
    left: 40px;
    top: auto;
    transform: rotate(45deg);
}

.primaryPoint_before_title {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 0 0 16px;
}

.primaryPoint_before_price,
.primaryPoint_campaign_price {
    display: flex;
    margin: 0 0 8px;
    justify-content: center;
    align-items: center;
}

.primaryPoint_before_pricehrad {
    font-weight: bold;
    font-size: 1.4rem;
    margin: 0 24px 0;
    display: flex;
    align-items: center;
}

.primaryPoint_before_pricebody {
    position: relative;
    font-size: 4.0rem;
    font-weight: bold;
}

.primaryPoint_before_pricebody :before {
    position: absolute;
    content: "";
    width: 76px;
    border: 1px solid var(--primary-color);
    left: 0;
    top: 50%;
}

.primaryPoint_before_pricebody span {
    font-size: 1.7rem;
    text-decoration: unset;
}

.primaryPoint_campaign{
    height: 295px;
    width: 474px;
    background-image: url(./images/primarypoint_back.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.primaryPoint_campaign_title {
    color: var(--primary-color);
    font-weight: bold;
    margin: 0 0 8px;
}

.primaryPoint_campaign_title span{
    background: linear-gradient(160deg, rgb(255 165 213) 0%, rgb(255 134 183) 35%, rgb(197 167 207) 87%);
    border-radius: 4px;
    padding: 0 8px;
    padding: 0 4px;
    color: var(--white);
    margin: 0 0 0 2px;
}

.primaryPoint_campaign_pricewrap {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: rgba(255 , 255, 255, 0.57);
    border-radius: 7px;
}

.primaryPoint_campaign_pricehrad {
    font-weight: bold;
    margin: 0 16px;
}

.primaryPoint_campaign_pricebody {
    font-size: 8.0rem;
    font-weight: bold;
}

.primaryPoint_campaign_pricebody span {
    font-size: 3.6rem;
}

.primaryPoint_before .primaryPoint_note{
    text-decoration: line-through;
}

.primaryPoint_note {
    font-size: 1.2rem;
}

@media screen and (max-width:1024px){
    #primaryPoint{
        padding: 40px 24px;
    }
    #primaryPoint h2 {
        margin: 0 0 24px;
    }
    .primaryPoint_subcopy{
        margin: 0 0 8px;
    }
    .primaryPoint_campaign{
        height: auto;
        min-height: 180px;
        width: 300px;
    }
    .primaryPoint_before_pricehrad{
        font-size: 1.2rem;
        margin: 0 8px;
    }
    .primaryPoint_before_title{
        margin: 0 0 4px;
    }
    .primaryPoint_before_pricebody{
        font-size: 2.4rem;
    }
    .primaryPoint_before_pricebody span{
        font-size: 1.4rem;
    }
    .primaryPoint_before_pricebody :before{
        width: 56px;
    }
    .primaryPoint_campaign_pricebody{
        font-size: 5.6rem;
    }
    .primaryPoint_campaign_pricebody span {
        font-size: 2.4rem;
    }
}
@media screen and (max-width:640px){

    .primaryPoint_wrap{
        flex-direction: column;
    }
    #primaryPoint h2{
        font-size: 2.4rem;
    }
    #primaryPoint h2 br{
        display: block;
    }
    .primaryPoint_arrow{
        height: 64px;
    }
    .primaryPoint_arrow::before{
        left: 32px;
        top: 20px;
        transform: rotate(135deg);
    }
}
/*pro1Service---------------*/
#pro1Service {
    padding: 80px 0 0;
    text-align: center;
    background: linear-gradient(to bottom, #fefbfb, #fefbfb 50%, #ffffff 50%, #ffffff);
}

.pro1Service{
    position:relative;
}

.pro1Service:before {
    content: "";
    position: absolute;
    top: -24px;
    left: calc(50% - 24px);
    border-style: solid;
    border-color: #fefbfb transparent #fefbfb transparent;
    border-width: 0px 24px 24px 24px;
}

.pro1Service_titeleWrap{
    margin: 0 0 56px;
    position:relative;
}

.pro1Service_titeleWrap:before{
    content: "";
    position: absolute;
    top: -24px;
    left: calc(50% - 10px);
    background-image: url(./images/icon-clown.svg);
    background-repeat: no-repeat;
    background-position: top;
    width: 21px;
    height: 17px;
}

.pro1Service_titeleWrap h2 {
    position: relative;
    display: inline-block;
}

.pro1Service_titeleWrap h2:before,
.pro1Service_titeleWrap h2:after{
    position: absolute;
    content: "";
    width: 20px;
    height: 25px;
    top: 12px;
    background-position: top;
    background-repeat: no-repeat;
}

.pro1Service_titeleWrap h2:before{
    background-image: url(./images/icon-left-down.svg);
    left: 56px;
}

.pro1Service_titeleWrap h2:after{
    background-image: url(./images/icon-right-top.svg);
    right: 56px;
}

.pro1Service_titeleWrap h2 span{
    position: relative;
}

.pro1Service_titeleWrap h2 span:after{
    position: absolute;
    content: "";
    border-bottom: 2px solid var(--secondary-border);
    width: 100%;
    bottom: 1px;
    right: 0;
}

.pro1Service_list{
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    padding: 0 40px;
    margin: 0 auto 80px;
}

.pro1Service_list h3 {
    position: relative;
}

.pro1Service_list li {
    width: calc((100% - 60px)/2);
    max-width: 440px;
    padding: 24px 40px 40px;
    background: var(--white);
    box-shadow: 0px 0px 15px 0px rgba(110 , 84 , 84 , 0.07);
}

.pro1Service_list_icon{
    height: 159px;
    margin: 0 auto 16px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.icon_ad{
    background-image: url(./images/pc/servic_ad.svg);
}

.icon_mail{
    background-image: url(./images/pc/servic_mail.svg);
}

.icon_disc{
    background-image: url(./images/pc/servic_disc.svg);
}

.pro1Service_list h3 {
    margin: 0 0 24px;
}

.pro1Service_list h3:after {
    position: absolute;
    content: "";
    width: 40px;
    border: 1px solid var(--secondary-border);
    bottom: -8px;
    left: calc(50% - 20px);
}

.pro1Service_list_text{
    text-align: left;
    line-height: 1.7;
}

@media screen and (max-width:1024px){
    .pro1Service_list li{
        width: calc((100% - 24px)/2);
        padding: 8px 16px 24px;
    }
}

@media screen and (max-width:800px){
    #pro1Service {
        padding: 80px 16px 0;
    }
    .pro1Service_list{
        flex-direction: column;
    }
    .pro1Service_list h3{
        margin: 0 0 24px;
        padding: 0px 0 0 50px;
        text-align: left;
        height: 38px;
        display: flex;
        align-items: center;
    }

    .pro1Service_list h3:after{
        border: none;
    }

    .icon_ad-sp,
    .icon_mail-sp,
    .icon_disc-sp{
        background-repeat: no-repeat;
        background-size: contain;
    }

    .icon_ad-sp{
        background-image: url(./images/sp/servic_ad-sp.svg);
    }

    .icon_mail-sp{
        background-image: url(./images/sp/servic_mail-sp.svg);
    }

    .icon_disc-sp{
        background-image: url(./images/sp/servic_disc-sp.svg);
    }
    .pro1Service_list {
        padding: 0;
    }
    .pro1Service_list li{
        width: 100%;
        max-width: 100%;
        padding: 40px;
        margin: 0 0 16px;
    }

    .pro1Service_list_icon{
        display: none;
    }
}

@media screen and (max-width:640px){
    .pro1Service_list{
        margin: 0 auto 40px;
    }
    .pro1Service_titeleWrap h2:before,
    .pro1Service_titeleWrap h2:after{
        top: 0;
    }
    .pro1Service_titeleWrap h2:before{
        background-image: url(./images/icon-left-down.svg);
        left: 20px;
    }
    .pro1Service_titeleWrap h2:after{
        background-image: url(./images/icon-right-top.svg);
        right: 20px;
    }
}

/*pointList---------------*/
#pointList {
    max-width: 1200px;
    padding: 0 40px;
}

.pointList_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 80px;
}

.pointList_copy {
    position: relative;
    margin: 0 0 40px;
}

.pointList_copy:after {
    position: absolute;
    content: "";
    width: 124px;
    bottom: -15px;
    border: 1px solid var(--primary-color);
    left: 0;
}

.pointList_wrap_info,
.pointList_wrap_img {
    width: calc(50% - 40px);
}

.pointList_wrap_info {
    line-height: 1.8;
}

.pointList_wrap_img {
    position: relative;
    background: #ccc;
}

.pointList_wrap_img-pro1half,
.pointList_wrap_img-free{
    height: auto;;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
}

.pointList_wrap_img-pro1half{
    width: 50%;
    background-image: url(./images/pc/pointlist_half.svg)
}

.pointList_wrap_img-free{
    width: 55%;
    background-image: url(./images/pc/pointlist_free.svg)
}

.pointList_wrap_half_subcopywrap,
.pointList_wrap_free_subcopywrap{
    position: absolute;
    width: calc(100% - 64px);
    max-width: 360px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.pointList_wrap_half_subcopywrap{
    top: 60px;
}

.pointList_wrap_free_subcopywrap {
    top: -60px;
}

.pointList_wrap_half_subcopy,
.pointList_wrap_free_subcopy  {
    position: relative;
    margin: 0 auto;
    padding: 10px 8px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-color);
    background: var(--white);
    border: solid 1px var(--secondary-border);
    border-radius: 40px;
    box-sizing: border-box;
}

.pointList_wrap_half_subcopy{
    width: calc(90% - 16px);
}

.pointList_wrap_free_subcopy{
    width: 100%;
}

.pointList_wrap_half_subcopy:before,
.pointList_wrap_free_subcopy:before  {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -13px;
    border: 10px solid transparent;
    border-top: 10px solid #FFF;
    z-index: 2;
}

.pointList_wrap_half_subcopy:after,
.pointList_wrap_free_subcopy:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid var(--secondary-border);
    z-index: -1;
}

.pointList_wrap_img-pro1half_price {
    display: flex;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    min-height: 330px;
    position: relative;
}

.common_price_bold {
    font-size: 10rem;
    margin: 0 0 0 8px;
}

.common_price_bold span {
    font-size: 4rem;
}

.pointList_wrap_free_infobox {
    width: calc(90% - 16px);
    max-width: 384px;
    margin: 0 auto;
}

.pointList_wrap_free_infobox_card {
    width: 300px;
    height: 140px;
    display: flex;
    box-shadow: 0px 0px 15px 0px rgb(193 144 144 / 20%);
    border-radius: 6px;
    padding: 16px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    background: var(--white);
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
}

.common_price_bold span {
    font-size: 3.2rem;
}

span.infobox_card_price {
    font-size: 1.8rem;
}

.infobox_card-top {
    margin: 0 0 56px;
    position: relative;
}

.infobox_card-top:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background: #fff;
    bottom: -48px;
    border-radius: 25px;
    background-image: url(./images/pointlist_plus.svg);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
    right: 90px;
    box-shadow: 0px 0px 15px 0px rgb(193 144 144 / 20%);
}

.infobox_card-bottom {
    margin: 0 0 0 auto;
}

.infobox_card_title {
    font-size: 1.6rem;
    letter-spacing: 2px;
    margin: 0px 48px 0 0;
    position: relative;
}

p.infobox_card_title:after {
    position: absolute;
    content: "";
    top: 16px;
    right: -22px;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #e968b0;
    border-right: 0;
}



.pointList_wrap_free_infobox_card .common_price_bold {
    color: #000;
    position: relative;
}

.pointList_wrap_free_infobox_card .common_price_bold:before,
.pointList_wrap_free_infobox_card .common_price_bold:after{
    position: absolute;
    content: "";
    width: 20px;
    height: 25px;
    background-position: top;
    background-repeat: no-repeat;
}
.pointList_wrap_free_infobox_card .common_price_bold:before {
    background-image: url(./images/icon-right-top-bk.svg);
    right: 0;
    top: 20px;
}
.pointList_wrap_free_infobox_card .common_price_bold:after {
    background-image: url(./images/icon-left-down-bk.svg);
    left: -32px;
    bottom: 20px;
}

#pointList .btn_secondary{
    margin: 40px auto 0;
}

@media screen and (max-width:1024px){
    #pointList{
        padding: 0 16px;
    }
    .common_price_bold {
        font-size: 9rem;
        margin: 0 0 0 8px;
    }

    .common_price_bold span {
        font-size: 4rem;
        margin: 0 0 0 8px;
    }
    .pointList_wrap_half_subcopy {
        width: auto;
    }
}

@media screen and (max-width:640px){
    #pointList .pointList_wrap-free {
        flex-direction: column-reverse;
    }
    .pointList_wrap{
        flex-direction: column;
    }
    .pro1Service_list{
        margin: 0 auto 32px;
    }
    .pro1Service_list li{
        padding: 16px;
    }
    .pointList_wrap_info {
        width: 100%;
        margin: 0 0 40px;
    }
    .pointList_copy {
        margin: 0 0 24px;
    }
    .pointList_copy:after{
        width: 90px;
        bottom: -8px;
    }
    .pointList_wrap{
        margin: 0 0 100px;
    }
    .pointList_wrap_free_infobox_card{
        width: auto;
    }
    .infobox_card-top:after{
        right: auto;
    }
    .pointList_wrap_info .common_contents_subcopy{
        margin: 0;
    }
    .pointList_wrap_img-pro1half{
        width: 100%;
    }
    .pointList_wrap_half_subcopywrap{
        width: calc(100% - 16px);
    }
    .infobox_card-top {
        margin: 0 auto 56px;
    }
    .infobox_card-bottom {
        margin: 0 auto;
    }
    .common_price_bold {
        font-size: 8rem;
    }
    .pointList_wrap_img-free{
        width: 100%;
        height: 320px;
        max-height: 400px;
        margin: 96px 0 0;
    }
    .pointList_wrap_free_subcopy{
        width: 100%;
        font-size: 1.3rem;
    }
    .pointList_wrap_free_infobox {
        width: calc(100% - 32px);
    }
}
/*#pricePlan---------------*/
#pricePlan {
    border-top: 1px solid #f2f2f2;
    padding: 80px 40px 0;
}

.pricePlan_wrap .common_contents_subcopy{
    display: inline-block;
    position: relative;
}

.pricePlan_wrap .common_contents_subcopy:before,
.pricePlan_wrap .common_contents_subcopy:after{
    position: absolute;
    content: "";
    width: 25px;
    height: 2px;
    background: var( --secondary-border);
    bottom: 12px;
}

.pricePlan_wrap .common_contents_subcopy:before{
    transform: rotate(50deg);
    left: -40px;
}

.pricePlan_wrap .common_contents_subcopy:after{
    transform: rotate(130deg);
    right: -40px;
}

.pricePlan_wrap {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.pricePlan_wrap h3 {
    margin: 0 0 40px;
}

.pricePlan_list{
    margin: 0 0 8px;
}

.pricePlan_list_headWrap {
    display: flex;
    justify-content: space-around;
    margin: 0 0 8px;
}

.pricePlan_list_headWrap_list.empty{
    padding: 0 8px 0 0;
    width: 165px;
    display: block;
}

.pricePlan_list_headWrap_list.new_user {
    margin: 0 16px 0 0;
}

.pricePlan_list_headWrap_list {
    width: 506px;
}

.new_user_title {
    position: relative;
    background: linear-gradient(160deg, rgb(255 165 213) 0%, rgb(255 134 183) 35%, rgb(197 167 207) 87%);
    color: var(--white);
    font-weight: bold;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 24px;
}

.new_user_title:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #d89dc8;
}

.using_user {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.using_user_title{
    position: relative;
    margin: 8px 0;
    padding: 0 40px;
    height: 136px;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 1px #ececec;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.using_user_title:before {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -15px;
    border: 13px solid transparent;
    border-top: 13px solid  #fff;
    z-index: 2;
}

.using_user_title:after {
    content: "";
    position: absolute;
    bottom: -27px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #ececec;
    z-index: -1;
}

.pricePlan_list_headWrap_about {
    width: 100%;
    height: 166px;
    padding: 40px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e3e3e3;
}

.pricePlan_list_body {
    display: flex;
    justify-content: space-evenly;
}

.pricePlan_list_body_title>ul>li,
.pricePlan_listbody_wrap_item>ul>li{
    padding: 24px;
}

.pricePlan_list_body_title {
    width: 160px;
    margin: 0 8px 0 0;
    background: var(--primary-bg);
}

.pricePlan_listbody_wrap {
    display: flex;
    width: 506px;
}

.pricePlan_listbody_wrap_item {
    width: 50%;
}

.pricePlan_listbody_wrap_item_th{
    background: var(--primary-bg);
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pricePlan_newUser {
    margin: 0 16px 0 0;
}

/*初期費用・月額費用*/
.pricePlan_listbody_wrap_item_td {
    height: 192px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*一年目合計費用*/
.pricePlan_listbody_total ul {
    height: 100%;
}

.pricePlan_listbody_total_cost,
.pricePlan_listbody_total_about {
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pricePlan_listbody_total_about{
    font-size: 1.2rem;
}
/*料金表内共通項目*/
.common_plan_feature {
    font-size: 2.4rem;
    font-weight: bold;
    color: var(--point-color);
}

.common_plan_feature span {
    font-size: 1.2rem;
}

.common_plan_through{
    text-decoration: line-through;
}

.common_border_nomal_top {
    border-top: 1px solid #e1e1e1;
}

.common_border_nomal_topleft {
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
}

.common_border_nomal_topleftbottom {
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}

.common_border_nomal_topleftright {
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
}

.common_border_nomal_all {
    border: 1px solid #e1e1e1;
}

.common_border_point_top{
    border-top: 1px solid var(--primary-color);
}
.common_border_point_topside {
    border-top: 3px solid var(--primary-color);
    border-left: 3px solid var(--primary-color);
    border-right: 3px solid var(--primary-color);
    position: relative;
}

.common_border_point_topside:before {
    position: absolute;
    content: "check!";
    background: var(--primary-color);
    width: 100px;
    color: var(--white);
    border-radius: 10px 10px 0 0;
    top: -24px;
}

.common_border_point_side {
    border-left: 3px solid var(--primary-color);
    border-right: 3px solid var(--primary-color);
}

.common_border_point_all {
    border: 3px solid var(--primary-color);
}

.common_planIcon_cp_main {
    width: 120px;
    min-width: 120px;
    margin: 0 auto 4PX;
    padding: 4px;
    display: inline-block;
    font-size: 1.2rem;
    color: var(--white);
    font-weight: bold;
    background: linear-gradient(160deg, rgb(255 165 213) 0%, rgb(255 134 183) 35%, rgb(197 167 207) 87%);

}

.common_planIcon_cp_sub {
    font-size: 1.2rem;
    border: 1px solid #707070;
    color: #888888;
    padding: 4px;
    margin: 0 0 8px;
}

.total_point{
    background: #ffefb1;
}

/*pricePlan_bottom*/
.pricePlan_wrap_cp_link {
    text-align: right;
    margin: 0 0 52px;
    font-size: 1.2rem;
}

.pricePlan_wrap_cp_link a {
    color: var(--primary-color);
    text-decoration: underline;
}

.pricePlan_wrap_btn {
    margin: 0 auto 40px;
}

.pricePlan_note {
    font-size: 1.2rem;
    color: var(--secondary-text-color);
}

.pricePlan_note a {
    color: var(--primary-color);
}

@media screen and (max-width:1024px){
    #pricePlan{
        padding: 40px 16px 0;
    }
    .pricePlan_listbody_wrap_item_th {
        font-size: 1.2rem;
    }
    .pricePlan_list_body_title{
        font-size: 1.2rem;
    }
    .pricePlan_list_body_title>ul>li, .pricePlan_listbody_wrap_item>ul>li {
        padding: 16px;
    }
    .common_border_point_topside:before{
        top: -20px;
    }
}

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

    .using_user,
    .pricePlan_usingUser {
        display: none;
    }
    .new_user_title{
        height: 90px;
    }
    .pricePlan_list_headWrap_list.empty{
        display: none;
    }
    .pricePlan_list_headWrap_list.new_user,
    .pricePlan_newUser {
        margin: 0;
    }

    .pricePlan_list_headWrap_about{
        height: auto;
        padding: 16px;
        text-align: left;
    }
    .common_border_point_topside:before{
        top: -17px;
    }
    .pricePlan_list_body_title>ul>li,
    .pricePlan_listbody_wrap_item>ul>li{
        padding: 12px;
    }
    .pricePlan_listbody_wrap_item_initial_cost,
    .pricePlan_listbody_wrap_monthly_fee{
        height: 130px;
    }
    .pricePlan_wrap_cp_link{
        margin: 0 0 40px;
    }
}

/*summary---------------*/
#summary{
    padding: 80px;
    background: linear-gradient(135deg, #ffffff 1%,#ffbef2 99%);
}

.summary_warp {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--primary-border);
    border-radius: 7px;
}

.summary_warp h3 {
    padding: 24px 0;
    border-bottom: 1px solid var(--primary-border);
    text-align: center;
    margin: 0 0 40px;
}

.summary_list {
    max-width: 700px;
    margin: 0 auto 56px;
    padding: 0 40px;
}

.summary_listWrap h4 {
    padding: 0 0 0 16px;
    margin: 0 0 24px 0;
}

.summary_listWrap_mainuser,
.summary_listWrap_Notes{
    position: relative;
}

.summary_listWrap_mainuser:before,
.summary_listWrap_Notes:before {
    position: absolute;
    content: "";
    width: 4px;
    height: 100%;
    left: 0;
}

.summary_listWrap_mainuser:before{
    background: #90bde9;
}

.summary_listWrap_Notes:before {
    background: var(--primary-color);
}

.summary_listWrapItem li {
    margin: 0 0 24px;
    padding: 0 0 0 16px;
    position: relative;
}

.summary_listWrapItem li:before {
    position: absolute;
    content: "・";
    left: 0;
}

.summary_listWrap {
    margin: 0 0 40px;
}

@media screen and (max-width:1024px){
    #summary{
        padding: 40px 16px;
    }
}

@media screen and (max-width:640px){
    .summary_list{
        padding: 0 16px;
    }
    .summary_listWrap {
        margin: 0 0 24px;
    }
    .summary_listWrapItem li{
        margin: 0 0 16px;
        line-height: 1.6;
    }
}
/*entryArea---------------*/
#entryArea {
    padding: 160px 40px;
    background: linear-gradient(164deg, rgb(255 255 255) 0%, rgb(252 235 241) 35%, rgb(248 244 255) 87%);
}

.entryArea_wrap {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.entryArea_wrap:before {
    position: absolute;
    content: "";
    top: -54px;
    left: calc(50% - 16px);
    width: 25px;
    height: 25px;
    background-image: url(./images/icon-cart.svg);
    background-size: 25px 25px;
    background-position: top;
    background-repeat: no-repeat;
}

.entryArea_wrap .common_contents_subcopy{
    font-size: 2.4rem;
    margin: 0 0 16px;
}

.entryArea_maintext {
    font-size: 3.2rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 0 0 40px;
    position: relative;
}

.entryArea_maintext:before,
.entryArea_maintext:after {
    position: absolute;
    content: "";
    top: -91px;
    width: 25px;
    height: 215px;

    background-position: top;
    background-repeat: no-repeat;
}

.entryArea_maintext:before{
    background-image: url(./images/pc/triangle-left.svg);
    left: 5px;
}

.entryArea_maintext:after{
    background-image: url(./images/pc/triangle-right.svg);
    right: 5px;
}

.entryArea_text {
    margin: 0 0 80px 0;
}

#entryArea .btn_main {
    height: 90px;
    max-width: 100%;
}

#entryArea .btn_main {
    height: 90px;
    max-width: 100%;
}

#entryArea .btn_main a {
    font-size: 2.4rem;
}

@media screen and (max-width:640px){
    #entryArea{
        padding: 100px 16px;
        margin: 0;
    }
    .entryArea_maintext:before,
    .entryArea_maintext:after{
        background: none;
    }
    .entryArea_text {
        margin: 0 0 40px;
    }
}