@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

/*------------------------------------------------------------

    2025.05 style  CSS
    Zen Maru Gothic

    font-family: "Zen Maru Gothic", serif;
    light:   font-weight: 300;
    regular: font-weight: 400;
    medium:  font-weight: 500;
    bold:    font-weight: 700;
    black:   font-weight: 900;

    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;

------------------------------------------------------------*/
main{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items:center;
    background: #f6f1eb;
}

.inBk{ display: inline-block; }
.txt__kerning{ margin-left: -.3em; }

.section__support,
.wrap__support{
    display: flex;
    flex-direction: column;
    align-items:center;
    max-width:100%;
    width: 100%;
}

@media screen and (max-width: 559px){
    .section__support{
        padding: 0 5vw;
    }
    .wrap__support{
        max-width: 500px;
        padding: 12.5vw 0 10vw;
    }
}
@media screen and (min-width: 560px) and (max-width: 767px){
    .wrap__support{
        width: 500px;
        padding: 40px 0 50px;
    }
}
@media screen and (min-width: 768px){
    .wrap__support{
        width: 640px;
        padding: 70px 0 100px;
    }
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6{
    font-weight: 500;
}

main th,
main td{
    font-weight:normal;
}

/*============================================================*/
/* common                                                     */
/*------------------------------------------------------------*/


/* group__main-support
------------------------------------------------------------*/
.group__main-support{
    display: flex;
    flex-direction: column;
    align-items:center;
    gap:10px;
}
    .group__main-support .icon__support{
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content:center;
        width: 105px;
        height: 105px;
        padding-bottom: 5px;
        background: url("../images/logo_frame.svg") center 0 no-repeat;
        background-size: 100% auto;
        font-size: 47px;
        font-weight: 700;
        text-align: center;
    }

    .group__main-support h2{
        line-height: 1.3em;
        letter-spacing: 0.05em;
        text-align: center;
        font-size: 30px;
    }
    @media screen and (min-width: 560px){
        .group__main-support h2{
            font-size: 34px;
        }
    }
    .group__main-support h2 .tit__s{
        line-height: 1.3em;
        letter-spacing: -0.01em;
        font-size: 18px;
    }

.area__main-support,
.block__main-support{
    display: flex;
    flex-direction: column;
    align-items:center;
    gap:20px;
}
    /*list__support*/
    .list__support{
        display: flex;
        flex-direction: column;
        gap:10px;
        flex-shrink: 0;
    }
    .list__support li{
        position: relative;
        display: flex;
        background: #fff;
        padding: 12px 30px 12px 62px;
        line-height: 1.4em;
        font-size: 15px;
        font-weight: 500;
        flex-shrink: 0;
    }
    .list__support li:before,
    .list__support li:after{
        position: absolute;
        transform:translateY(-50%);
        top: 50%;
        content:"";
    }
    .list__support li:before{
        width: 30px;
        height: 30px;
        left: 17px;
    }
        .section__support-01 .list__support li:before{
            background:#e6f094;
        }
        .section__support-02 .list__support li:before{
            background:#eaf1fa;
        }
        .section__support-03 .list__support li:before{
            background:#fcecc5;
        }

    .list__support li:after{
        width: 28px;
        height: 28px;
        margin-top: -3px;
        left: 23px;
    }
        .section__support-01 .list__support li:after{
            background: url("../images/icon_check_01.svg") center 0 no-repeat;
            background-size: 100% auto;
        }
        .section__support-02 .list__support li:after{
            background: url("../images/icon_check_02.svg") center 0 no-repeat;
            background-size: 100% auto;
        }
        .section__support-03 .list__support li:after{
            background: url("../images/icon_check_03.svg") center 0 no-repeat;
            background-size: 100% auto;
        }

/*------------------------------------------------------------
    btn__link
------------------------------------------------------------*/
.btn__link{
    width: 330px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: #0071bc;
    color:#fff;
    font-size:17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 3px 4px 3px 0px rgba(0,0,0,0.20);
}
.btn__link:hover{
    color:#fff;
}
.btn__link:after{
    content:"";
    width:0;
    height:0;
    border-style:solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #FFFFFF;
    margin-left: 10px;
}
.btn__link .txt__s{
    font-size:13px;
    font-weight: 700;
}
    /* color */
    .btn__app{ background: #009245; }
    .btn__portal{ background: #0071bc; }


/*------------------------------------------------------------
    fix__btn
------------------------------------------------------------*/

/* fix__btn : sp
------------------------------------------------------------*/
@media screen and (max-width: 767px){
    .fix__btn{
        position:sticky;
        bottom: 0;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .fix__btn .btn__member{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 50px;
        background: #f29600;
    }
    .fix__btn .btn__member{
        font-size: 20px;
        font-weight: 500;
        color: #fff;
    }
    .fix__btn .btn__member br{
        display: none;
    }
    .fix__btn .btn__member .txt__kerning{
        margin-left: -.1em;
    }
}

/* fix__btn : pc
------------------------------------------------------------*/
@media screen and (min-width: 768px){
    .fix__btn{
        position: fixed;
        bottom: 15px;
        right: 15px;
        z-index: 100;
        width:150px;
        height: 150px;
    }
    .fix__btn .btn__member{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width:150px;
        height: 150px;
        background: #f29600;
        border-radius: 50%;
        box-shadow: 3px 4px 3px 0px rgba(0,0,0,0.20);
        gap:0;
    }
    .fix__btn .btn__member{
        font-size: 20px;
        font-weight: 500;
        color: #fff;
        line-height: 1.3em;
    }
    .fix__btn .btn__member .txt__kerning{
        margin-left: -.03em;
    }
}
@media screen and (min-width:840px){
    .fix__btn{
        width:170px;
        height: 170px;
    }
    .fix__btn .btn__member{
        width:170px;
        height: 170px;
    }
}
@media screen and (min-width:924px){
    .fix__btn{
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 100;
        width:170px;
        height: 170px;
    }
}
@media screen and (min-width:1290px){
    .fix__btn{
        position: fixed;
        bottom: 30px;
        transform:translateX(-50%);
        left: 50%;
        margin-left: 540px;
        z-index: 100;
    }

}

/*============================================================*/
/* section__support                                           */
/*------------------------------------------------------------*/

/*------------------------------------------------------------*/
/*    section__main
------------------------------------------------------------*/
.section__main{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f6f1eb;
}
.wrap__main,
.inner__main{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* group__main
------------------------------------------------------------*/
.group__main{
    position:absolute;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left:50%;
    display: flex;
    justify-content: center;
    flex-direction: column; 
    align-items: center;
    z-index: 50;
}
.group__main_bg{
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left:50%;
    background: #006b30;
    border-radius:10px;
    mix-blend-mode: multiply;
    z-index: 45;
    transition: all 0.5s ease;
}
    .group__main .area__main{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items:center;
        width: 100%;
    }

    .group__main_ph{
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }

/* .tit__sub */
.group__main .tit__sub{
    font-weight: 500;
    line-height: 1.24em;
    letter-spacing: -0.01em;
    color: #fff;
}

/* .tit__bubble */
.group__main .tit__bubble{
    position: absolute;
    text-align: center;
    color: #009245;
    letter-spacing: 0.05em;
    background: #ffff00;
    border-radius: 50%;
	display: flex;
    justify-content: center;
    flex-direction: column; 
    align-items: center;
}
    .group__main .tit__bubble:before{
        content: "";
        background: url("../images/slice_main_flag.svg") 0 0 no-repeat;
        background-size: 100% auto;
    }
    .group__main .tit__bubble:after{
        position: absolute;
        content: "";
        width:0;
        height:0;
        border-style:solid;
        border-color: #ffff00 transparent transparent transparent;
    }

/* h3 p*/
.group__main h3{
    font-weight: 500;
    line-height: 1.24em;
    color: #fff;
}
.group__main p{
    line-height: 1.5em;
    color: #fff;
}



/*------------------------------------------------------------
    main__area : sp
------------------------------------------------------------*/
@media screen and (max-width: 559px){
    
/* group__main
------------------------------------------------------------*/
.group__main{
    gap:5vw;
    width: 52.5vw;
    height: 102.5vw;
    padding: 3.75vw;
}
.group__main_bg{
    width: 52.5vw;
    height: 102.5vw;
}
    
.group__main .area__main{
    gap:3.75vw;
}

/* .h1 */
.group__main h1 img{
    width: 43vw;
}

/* .tit__sub */
.group__main .tit__sub{
    font-size: 7.5vw;
}
.group__main .tit__sub .txt__kerning{
    margin-left: 0;
}

/* .tit__bubble */
.group__main .tit__bubble{
    top:11.25vw;
    right:-6.25vw;
    font-size: 3.25vw;
    font-weight: 500;
    line-height: 1.24em;
    letter-spacing: 0.05em;
    width: 21vw;
    height: 21vw;
    padding-bottom: 1.25vw;
    gap:2px;
}
    .group__main .tit__bubble:before{
        width:5vw;
        height:4.5vw;
    }
    .group__main .tit__bubble:after{
        border-width:2.18vw 1.25vw 0 1.25vw;
        bottom: 1.25vw;
        left: 1.25vw;
        transform:rotateZ(45deg);
    }
    
/* h3 p */
.group__main h3{ font-size: 5vw;}
.group__main p{ font-size: 3vw; }

/*area__main-txt */
.group__main .area__main-txt{
    display: flex;
    flex-direction: column;
}
.area__main-txt-pc{
    display: none;
}
    
/* group__main_ph
------------------------------------------------------------*/
    .group__main_ph .main_ph_01{ width: 50%;}
    .group__main_ph .main_ph_02{ width: 50%;}
    .group__main_ph .main_ph_03{ width: 36%;}
    .group__main_ph .main_ph_04{ width: 64%;}
    .group__main_ph .main_ph_05{ width: 50%;}
    .group__main_ph .main_ph_06{ width: 50%;}
    .group__main_ph .btn__member{display: none;}
    
}

/*------------------------------------------------------------
    main__area :tab
------------------------------------------------------------*/
@media screen and (min-width: 560px){

    /* group__main
    ------------------------------------------------------------*/
    .group__main{
        position: absolute;
        transform:translateX(-50%);
        left: 50%;
        display: flex;
        flex-direction: column;
        align-items:center;
        z-index: 50;
    }
    .group__main .area__main{
        position:absolute;
        transform: translateX(-50%) translateY(-50%);
        top: 50%;
        left:50%;
        z-index: 50;
        display: flex;
        justify-content: center;
        flex-direction: column; 
        align-items: center;
    }

    /* .tit__bubble */
    .group__main .tit__bubble{
        transform: translateX(-50%) translateY(-50%);
        top: 50%;
        left:50%;
        width: 84px;
        height:84px;
        padding-bottom: 5px;
        gap:2px;
        font-size:13px;
    }
        .group__main .tit__bubble:before{
            width:20px;
            height:18px;
        }
        .group__main .tit__bubble:after{
            bottom: 5px;
            right: 5px;
            border-width: 10px 5px 0 5px;
            transform:rotateZ(-45deg);
        }

    /* .area__main-txt-pc */
    .area__main-txt-pc{
        width: 100%;
        display: flex;
        align-items: center;
        gap:30px;
        padding-left: 20px;
        padding-right: 20px;
    }
        .group__main .area__main-txt{
            display: none !important;
        }
        .area__main-txt-pc h3{
            font-size:20px;
            line-height: 1.24em;
            color: #009245;
            flex-shrink: 0;
        }
        .area__main-txt-pc p{
            font-size: 15px;
            font-weight: 500;
            line-height: 1.5em;
            letter-spacing: 0.03em;
            color: #009245;
        }

    /* group__main_ph
    ------------------------------------------------------------*/
    .group__main_ph .main_ph_01{
        width: 25%;
        margin-left: 25%;
    }
    .group__main_ph .main_ph_02{
        display: flex;
        flex-direction: row-reverse;
        width: 50%;
    }
        .group__main_ph .main_ph_02 .ph_05{ width:61.9047619%;}
        .group__main_ph .main_ph_02 .ph_06{ width:38.0952381%;}

    .group__main_ph .main_ph_03{
        position: absolute;
        top:0;
        left: 0;
        width: 25%;
    }
    .group__main_ph .main_ph_04{
        position: absolute;
        right: 25vw;
        bottom:0;
        width:25%;
    }
    .group__main_ph .main_ph_05{
        position: absolute;
        bottom:0;
        left: 0;
        width: 25%;
    }
    .group__main_ph .main_ph_06{
        position: absolute;
        bottom:0;
        right: 0;
        width:25%;
    }
}

@media screen and (min-width: 560px) and (max-width: 680px){
    .group__main .area__main{
        width: 420px;
        height: 240px;
        z-index: 50;
        gap:10px;
    }
    .group__main_bg{
        width: 420px;
        height: 240px;
    }
    
    /* h1 */
    .group__main h1 img{
        width: 180px;
    }
    
    /* .tit__sub */
    .group__main .tit__sub{
        font-size:28px;
        text-align: center;
    }
        .group__main .tit__sub br{
            display: none;
        }
        .group__main .tit__sub br.br__table{
            display: inline !important;
        }
    
    /* .tit__bubble */
    .group__main .tit__bubble{
        transform: translateX(-50%) translateY(-50%);
        top: 50%;
        left:50%;
        margin-left: -140px;
        margin-top: 10px;
    }
}

@media screen and (min-width: 681px) and (max-width: 924px){
    .group__main{
        top:0;
        width: 100%;
        height: 47vw;
    }
    .group__main .area__main{
        width: 560px;
        height: 240px;
        gap:20px;
    }
    .group__main_bg{
        width: 560px;
        height: 240px;
    }
    /* h1 */
    .group__main h1 img{
        width: 210px;
    }
    
    /* .tit__sub */
    .group__main .tit__sub{
        font-size:34px;
        line-height: 1.24em;
        letter-spacing: -0.01em;
    }
    .group__main .tit__sub br{
        display: none;
    }
    
    /* .tit__bubble */
    .group__main .tit__bubble{
        margin-left: -160px;
        margin-top: -8px;
    }
    
    /* area__main-txt-pc */
    .area__main-txt-pc{
        padding-left: 20px;
        padding-right: 20px;
    }
        .area__main-txt-pc h3{
            font-size:28px;
        }
        .area__main-txt-pc p,
        .area__main-txt-pc p span{
            font-size: 15px;
        }
}

@media screen and (min-width: 560px) and (max-width: 924px){
    .section__main{
        padding: 0 0 20px;
    }
    .wrap__main{
        gap:24px;
    }
    .group__main_ph{
        width: 100%;
        height: 47vw;
    }    
}


/*------------------------------------------------------------
    main__area :pc
------------------------------------------------------------*/
@media screen and (min-width: 925px){
    .group__main{
        top:0;
        width: 924px;
        height: 438px;
    }
    .group__main .area__main{
        width: 560px;
        height: 240px;
        gap:20px;
    }
    .group__main_bg{
        width: 560px;
        height: 240px;
    }

    .section__main{
        padding: 90px 0 80px;
    }
    .wrap__main{
        max-width: 924px;
        gap:24px;
    }
    
    /* .h1 */
    .group__main h1 img{
        width: 210px;
    }
    
    /* .tit__sub */
    .group__main .tit__sub{
        font-size:34px;
    }
    .group__main .tit__sub br{
        display: none;
    }
    
    /* .tit__bubble */
    .group__main .tit__bubble{
        margin-left: -160px;
        margin-top: -8px;

    }
    
    /* .area__main-txt-pc */
    .area__main-txt-pc h3{
        font-size:28px;
    }
    .area__main-txt-pc p,
    .area__main-txt-pc p span{
        font-size: 15px;
    }
    
    /* group__main_ph
    ------------------------------------------------------------*/
    .group__main_ph{
        width: 924px;
        height: 438px;
    }
    .group__main_ph .main_ph_04 {
        right: 231px;
    }
}


/*------------------------------------------------------------
    main__area : animation
------------------------------------------------------------*/
.group__main_ph .main_ph_01,
.group__main_ph .ph_05,
.group__main_ph .ph_06,
.group__main_ph .main_ph_03,
.group__main_ph .main_ph_04,
.group__main_ph .main_ph_05,
.group__main_ph .main_ph_06{
    overflow: hidden;
}
.group__main_ph .main_ph_01 img,
.group__main_ph .ph_05 img,
.group__main_ph .ph_06 img,
.group__main_ph .main_ph_03 img,
.group__main_ph .main_ph_04 img,
.group__main_ph .main_ph_05 img,
.group__main_ph .main_ph_06 img{
  opacity: 0;
  /*animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;*/
  animation: slideIn 1s cubic-bezier(.25,1,.5,1) forwards;
}

    .group__main_ph .main_ph_01,
    .group__main_ph .ph_05,
    .group__main_ph .ph_06,
    .group__main_ph .main_ph_03,
    .group__main_ph .main_ph_05,
    .group__main_ph .main_ph_06{
        transition: all 0.5s ease;
    }

@media screen and (max-width: 559px) {
    .group__main_ph .main_ph_01 img{ animation-delay:1.15s;}
    .group__main_ph .ph_05 img{ animation-delay:1.20s;}
    .group__main_ph .ph_06 img{ animation-delay:1.28s;}
    .group__main_ph .main_ph_03 img{ animation-delay:1.39s;}
    .group__main_ph .main_ph_04 img{ animation-delay:1.54s;}
    .group__main_ph .main_ph_05 img{ animation-delay:1.74s;}
    .group__main_ph .main_ph_06 img{ animation-delay:2s;}
}
@media screen and (min-width: 560px) {
    .group__main_ph .main_ph_03 img{ animation-delay:1.15s;}
    .group__main_ph .main_ph_05 img{ animation-delay:1.2s;}
    .group__main_ph .main_ph_01 img{ animation-delay:1.28s;}
    .group__main_ph .ph_06 img{ animation-delay:1.39s;}
    .group__main_ph .ph_05 img{ animation-delay:1.54s;}
    .group__main_ph .main_ph_04 img{ animation-delay:1.74s;}
    .group__main_ph .main_ph_06 img{ animation-delay:2.0s;}
}

.group__main_bg{
      opacity: 0;
      animation: fadeIn 1s linear forwards;
}
.group__main .tit__bubble{
      opacity: 0;
      animation: fadeIn .5s 2.5s linear forwards;
}
.group__main .tit__sub{
      opacity: 0;
      animation: fadeIn 1s 1.5s linear forwards;
}
.group__main h1{
      opacity: 0;
      animation: fadeIn 1s linear forwards;
}
.group__main .area__main-txt{
      opacity: 0;
      animation: fadeIn 1s 2s linear forwards;
}
.area__main-txt-pc{
      opacity: 0;
      animation: txtSlideIn .5s 2s linear forwards;
}

@keyframes slideIn {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  100% {
    opacity: 1;
  }
}
@keyframes txtSlideIn {
  0% {
    transform: translateX(-90px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
  }
  100% {
    opacity: 1;
  }
}


/*------------------------------------------------------------
    section__support-01
------------------------------------------------------------*/
.section__support-01{
    background:#eff5b9;
}
.section__support-01 .wrap__support{
    gap:45px;
}
    @media screen and (min-width: 960px){
        .section__support-01 .wrap__support{
            width: 100%;
            max-width: 960px;
        }
    }

/*area__main-support*/
.section__support-01 .area__main-support{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap:30px 20px !important;
    max-width: 380px;
}
.section__support-01 .area__main-support .img__support{
    width : -webkit-calc((100% - 20px)/ 2) ;
    width : calc((100% - 20px)/ 2) ;
}
.section__support-01 .area__main-support h2{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width : -webkit-calc((100% - 20px)/ 2) ;
    width : calc((100% - 20px)/ 2) ;
    text-align: left;
    gap:3px;
    letter-spacing: 0.05em;
    padding-left: 2.5vw;
}
.section__support-01 .area__main-support h2 .tit__s{
    display: flex;
    flex-wrap: wrap;
    letter-spacing: 0.05em;
}
@media screen and (max-width: 413px){
    .section__support-01 .area__main-support h2 .tit__s{
        letter-spacing: -0.01em;
        font-size: 4.5vw
    }
}
@media screen and (min-width: 415px) and (max-width: 767px){
    .section__support-01 .area__main-support h2{
        padding-left: 20px;
    }
}
    @media screen and (min-width: 768px) {
        .section__support-01 .area__main-support{
            position: relative;
            max-width: 550px;
            padding-left:200px;
            justify-content: flex-start;
        }
        .section__support-01 .area__main-support .img__support{
            position: absolute;
            transform:translateY(-50%);
            -moz-transform:translateY(-50%);
            -webkit-transform:translateY(-50%);
            top: 50%;
            left: 0;
            width :164px;
        }
        .section__support-01 .area__main-support h2{
            width: 100%;
            gap:5px 0;
            letter-spacing: -0.01em;
            padding-left: 0;
        }
        .section__support-01 .area__main-support h2 .tit__s{
            gap:0px;
        }
    }

.section__support-01 .inner__group{
    display: flex;
    flex-direction: column;
    align-items:center;
    width: 100%;
}

/*group__about-app*/
.section__support-01 .group__about-app{
    gap:30px;
}
    @media screen and (min-width: 560px){
        .section__support-01 .group__about-app{
            gap:60px;
        }
    }
    @media screen and (min-width: 960px){
        .section__support-01 .group__about-app{
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            gap:60px 30px;
        }
    }

.section__support-01 .area__about-app{
    display: flex;
    flex-direction: column;
    align-items:center;
    gap:20px;
    border-top: 8px solid #009245;
    background: #fff;
    padding: 30px 15px 15px;
    width: 100%;
    max-width: 560px;
}
    @media screen and (min-width: 560px){
        .section__support-01 .area__about-app{
            padding: 30px 15px 40px;
        }
    }
    @media screen and (min-width: 960px){
        .section__support-01 .area__about-app{
            max-width: 960px;
            padding: 80px 80px 60px;
            align-items: flex-start;
            gap:30px;
        }
    }
.section__support-01 .area__about-app h3{
        display: flex;
        align-items:center;
        width: 100%;
        max-width: 390px;
        gap:20px;
    }
    .section__support-01 .area__about-app h3 img{
           width : -webkit-calc(100% - 30px - 72px) ;
           width : calc(100% - 30px - 72px) ;
    }
        .section__support-01 .area__about-app .icon__pickup,
        .section__support-01 .area__about-app .icon__new{
            display: flex;
            justify-content: center;
            flex-direction: column; 
            align-items: center;
            width: 72px;
            height:72px;
            border: 3px solid #009245;
            border-radius: 20px;
            font-size: 14px;
            letter-spacing: 0.1em;
            line-height: 1.3em;
            text-align: center;
            font-weight: 700;
        }
        .section__support-01 .area__about-app .icon__pickup{
            background: #009245;
            color: #fff;
        }
        .section__support-01 .area__about-app .icon__new{
            background: #fff;
            color: #009245;
        }

    .section__support-01 .block__about-app{
        display: flex;
        flex-direction: column;
        align-items:center;
        gap:15px;
        width: 100%;
        max-width: 390px;
    }
    .section__support-01 .area__about-app h4{
        font-size: 23px;
        line-height: 1.3em;
        letter-spacing: 0.1em;
        color: #009245;
        text-align: center;
    }
    /*box__about-app-img*/
    .section__support-01 .wrap__about-app-img{
        width: 100%;
        max-width: 390px;
        display: flex;
        flex-direction: column;
    }
    @media screen and (min-width: 960px){
        .section__support-01 .wrap__about-app-img{
            position: absolute;
            transform:translateY(-50%);
            top: 50%;
            margin-top: -60px;
            right: -440px;
            max-width: 410px;
        }
    }
    .section__support-01 .box__about-app-img{
        padding-bottom: 30px;
    }
        .section__support-01 .unit__about-app-img{
            width: 270px;
            height: 230px;
            position: relative;
            display: flex;
            align-items:center;
            justify-content: center;
            margin-left: auto;
            margin-right: auto;
        }
        @media screen and (min-width: 960px){
            .section__support-01 .unit__about-app-img{
                width: 380px;
                height: 380px;
            }
        }

            /*app_basic*/
            .section__support-01 .app_basic{
                justify-content:center;
            }
            .section__support-01 .app_basic .about-app-img{
                width:110px;
            }
            .section__support-01 .app_basic .about-app-txt{
                padding-left: 10px;
                width : calc(100% - 110px) ;
                display: flex;
                flex-direction: column;
                justify-content:center;
                align-self: stretch;
                gap:15px;
            }
                .section__support-01 .app_basic .about-app-txt h5{
                    font-size: 19px;
                    line-height: 1.5em;
                }
                .section__support-01 .app_basic .about-app-txt h5 .icon_menber{
                    display: flex;
                    justify-content: center;
                    flex-direction: column; 
                    align-items: center;
                    border-radius: 3px;
                    color: #fff;
                    letter-spacing: -0.05em;
                    font-size:10px;
                    background: #c1272d;
                    line-height: 1em !important;
                    width: 56px;
                    padding: 3px 0 4px;
                }
                .section__support-01 .app_basic .about-app-txt p{
                    font-size: 15px;
                    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
                    line-height: 1.5em;
                }
            @media screen and (min-width: 960px){
                .section__support-01 .app_basic{
                    width:340px;
                    margin-left: auto;
                    margin-left: auto;
                }
                .section__support-01 .app_basic .about-app-img{
                    width:180px;
                }
                .section__support-01 .app_basic .about-app-txt{
                    padding-left: 20px;
                    width : calc(100% - 180px) ;
                }
            }

            /*app_01_01*/
            .section__support-01 .app_01_01{
                justify-content:flex-end;
                padding: 0 35px;
            }
            .section__support-01 .app_01_01 .about-app-img{
                position: relative;
                width: 110px;
                z-index: 2;
            }
            .section__support-01 .app_01_01:before{
                position: absolute;
                transform:translateY(-50%);
                top: 50%;
                left:-5px;
                content: "";
                background: url("../images/illust_01_sp.webp") center 50% no-repeat;
                width: 186px;
                height: 186px;
                background-size:auto 100%;
                z-index: 1;
            }
            .section__support-01 .app_01_01:after{
                position: absolute;
                transform: translateX(-50%) translateY(-50%);
                top: 50%;
                left:50%;
                content: "";
                background:#fee1ce;
                width: 190px;
                height: 190px;
                border-radius: 50%;
                z-index: 0;
            }
            @media screen and (min-width: 960px){
                .section__support-01 .app_01_01{
                    justify-content:center;
                    padding: 0 35px;
                }
                .section__support-01 .app_01_01 .about-app-img{
                    width: 180px;
                }
                .section__support-01 .app_01_01:before{
                    transform:translateX(-50%);
                    left: 50%;
                    background: url("../images/illust_01_pc.webp") center 50% no-repeat;
                    background-size:100% auto;
                    width: 360px;
                    height: 186px;
                }
                .section__support-01 .app_01_01:after{
                    width: 270px;
                    height: 270px;
                }
            }

            /*app_02_01*/
            .section__support-01 .app_02_01{
                justify-content:flex-end;
                padding: 0 25px;
            }
            .section__support-01 .app_02_01 .about-app-img{
                position: relative;
                width: 110px;
                z-index: 2;
            }
            .section__support-01 .app_02_01 .about-app-img:before{
                position: absolute;
                bottom: 20px;
                left:-145px;
                content: "";
                background: url("../images/app_02_img_02.webp") center 50% no-repeat;
                width: 185px;
                height: 90px;
                background-size:100% auto;
                z-index: 0;
            }
            .section__support-01 .app_02_01:before{
                position: absolute;
                transform:translateY(-50%);
                top: 50%;
                left:18px;
                margin-top: -40px;
                content: "";
                background: url("../images/app_02_img_01.webp") center 50% no-repeat;
                width: 110px;
                height: 110px;
                background-size:100% auto;
                z-index: 1;
            }
            .section__support-01 .app_02_01:after{
                position: absolute;
                transform: translateX(-50%) translateY(-50%);
                top: 50%;
                left:50%;
                content: "";
                background:#cfe6f0;
                width: 190px;
                height: 190px;
                border-radius: 50%;
                z-index: 0;
            }
            @media screen and (min-width: 960px){
                .section__support-01 .app_02_01{
                    justify-content:center;
                    padding: 0 35px;
                }
                .section__support-01 .app_02_01 .about-app-img{
                    width: 180px;
                    z-index: 1;
                }
                .section__support-01 .app_02_01 .about-app-img:before{
                    bottom: -15px;
                    right:-93px;
                    left:auto;
                    z-index: 2;
                }
                .section__support-01 .app_02_01:before{
                    position: absolute;
                    transform:translateY(0%);
                    top: auto;
                    bottom: 0px;
                    left:18px;
                    margin-top: 0px;
                    z-index: 2;
                }
                .section__support-01 .app_02_01:after{
                    width: 270px;
                    height: 270px;
                }
            }

            /*app_03_01*/
            .section__support-01 .app_03_01{
                justify-content:flex-end;
                padding: 0 25px;
            }
            .section__support-01 .app_03_01 .about-app-img{
                position: relative;
                width: 110px;
                z-index: 2;
            }
            .section__support-01 .app_03_01:before{
                position: absolute;
                transform:translateY(-50%);
                top: 50%;
                left: 0;
                content: "";
                background: url("../images/illust_03.svg") center 50% no-repeat;
                width: 130px;
                height: 124px;
                background-size:100% auto;
                z-index: 3;
            }
            .section__support-01 .app_03_01:after{
                position: absolute;
                transform: translateX(-50%) translateY(-50%);
                top: 50%;
                left:50%;
                content: "";
                background:#f2f7c9;
                width: 190px;
                height: 190px;
                border-radius: 50%;
                z-index: 0;
            }
            @media screen and (min-width: 960px){
                .section__support-01 .app_03_01{
                    justify-content:center;
                    padding: 0 35px;
                }
                .section__support-01 .app_03_01 .about-app-img{
                    width: 180px;
                }
                .section__support-01 .app_03_01:before{
                    position: absolute;
                    transform:translateY(0%);
                    top: auto;
                    left: auto;
                    right: 30px;
                    bottom: 0;
                    width: 170px;
                    height: 150px;
                    background-size:100% auto;
                    z-index: 3;
                }
                .section__support-01 .app_03_01:after{
                    width: 270px;
                    height: 270px;
                }
            }

    /*box__about-app-txt*/
    .section__support-01 .box__about-app-txt p{
        font-size: 15px;
        font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
        text-align: justify;
        letter-spacing: -0.01em;
        line-height: 1.3em;
    }
    /*box__about-app-more*/
    .section__support-01 .box__about-app-more{
        display: flex;
        flex-direction: column;
        align-items:center;
        width: 100%;
    }
        .section__support-01 .box__about-app-more h5{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 32px;
            padding: 10px;
            font-size: 15px;
            background: #f29600;
            text-align: center;
            letter-spacing: 0.01em;
        }
        .section__support-01 .box__about-app-more h5 span{
            margin-top: -5px;
            padding-left: 2px;
        }
        .section__support-01 .unit__about-app-more{
            display: flex;
            flex-direction: column;
            width: 100%;
            background: #f2f7c9;
            padding: 10px;
        }
        .section__support-01 .box__about-app-more ul{
        }
        .section__support-01 .box__about-app-more ul li{
            position: relative;
            width: 100%;
            font-size: 13px;
            font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
            text-align: justify;
            letter-spacing: 0.01em;
            line-height: 1.3em;
            padding-left: 15px;
        }
        .section__support-01 .box__about-app-more ul li:before{
            position: absolute;
            left: 0;
            content: "\025c9";
            width: 15px;
            display: inline-block;
            text-align: left;
        }

    @media screen and (min-width: 960px){
        .section__support-01 .area__about-app h3,
        .section__support-01 .area__about-app .block__about-app{
            max-width: 400px;
        }
    }

    /*area__about-app_s -------------------------------------*/
    .area__about-app_s h3{
        flex-direction: column;
        gap:10px !important;
    }
    .area__about-app_s h3 .tit__sub{
        font-size: 23px;
        line-height: 1.3em;
        letter-spacing: 0.05em;
        text-align: center;
        color: #009245;
    }
    .area__about-app_s h3 .tit__img{
        display: flex;
        justify-content: center;
        flex-direction: column; 
        align-items: center;
    }
    .area__about-app_s h3 img{
        width: 254px;
    }
    .area__about-app_s{
        gap:10px !important;
    }
    .area__about-app_s .unit__about-app-img.app_basic{
        width: 100%;
        height: auto;
          padding: 0 10px;
    }
    .area__about-app_s .app_basic .about-app-img{
      width: 100px;
    }
    .area__about-app_s .app_basic .about-app-txt{
        padding-left: 15px;
        gap:10px;
    }
    .area__about-app_s .app_basic .about-app-txt h5{
        line-height: 1.3em;
    }
    .area__about-app_s .app_basic .about-app-txt p{
        text-align: justify;
        letter-spacing: -0.05em;
    }
    @media screen and (min-width: 960px){
        .area__about-app.area__about-app_s{
            padding: 20px !important;
            width : -webkit-calc((100% - 60px)/ 3) ;
            width : calc((100% - 60px)/ 3) ;
            align-self: stretch;
            gap:10px;
        }
        .area__about-app_s .wrap__about-app-img{
            position: relative !important;
            transform: translateY(0%);
            top: auto;
            margin-top: 0px;
            right:auto;
            max-width: 410px;
        }
        .area__about-app_s h3 .tit__img{
            display: flex;
            justify-content: center;
            flex-direction: column; 
            align-items: center;
            width: 100%;
            height: 82px;
        }
        .area__about-app_s h3 img{
            width:240px !important;
        }
        
        .area__about-app_s .block__about-app{
            align-self: stretch;
            height: 100%;
        }
            .area__about-app_s .unit__about-app-img.app_basic{
                flex-direction: column;
                gap:15px;
            }
            .area__about-app_s.app_basic .about-app-img{
                width:105px;
            }
            .area__about-app_s .unit__about-app-img.app_basic .about-app-txt{
                padding-left: 0px;
                width :100%;
                display: flex;
                flex-direction: column;
                justify-content:center;
                text-align: center;
                gap:15px;
            }
            .area__about-app_s .unit__about-app-img.app_basic .about-app-txt h5{
                text-align: center;
             }
            .area__about-app_s .unit__about-app-img.app_basic .about-app-txt h5 .non__pc{
                display: none;
            }
            .area__about-app_s .box__about-app-more{
                height :100%;
            }
            .area__about-app_s .unit__about-app-more{
                height :100%;
            }
        }

/* section__support-01 * group__about-app-link
------------------------------------------------------------*/
.group__about-app-link{
    gap:20px;
}
.group__about-app-link .txt__link{
    font-size: 22px;
    color: #009245;
    font-weight: 500;
    text-align: center;
    line-height: 1.5em;
    letter-spacing: 0.05em;
}
@media screen and (min-width: 560px){
    .group__about-app-link .txt__link,
    .group__about-app-link .txt__link span{
        font-size: 24px;
    }
}


/*------------------------------------------------------------
    section__support-02
------------------------------------------------------------*/
.section__support-02{
    background:#eaf1fa;
}
.section__support-02 .wrap__support{
    gap:45px;
}
    @media screen and (min-width: 768px) {
        .section__support-02 .wrap__support{
            width: 100%;
        }
    }
.section__support-02 .inner__group{
    display: flex;
    flex-direction: column;
    align-items:center;
    width: 100%;
    gap: 25px;
}
    @media screen and (min-width: 768px) {
        .section__support-02 .inner__group{
            width: 640px;
        }
    }

.section__support-02 h3{
    display: flex;
    flex-direction: column;
    align-items:center;
    gap:10px;
}

/*group__about_conts*/
.group__about_conts{
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap:10px !important;
}
    .group__about_conts h3{
        display: flex;
		justify-content: center;
		flex-direction: column; 
        font-size: 18px;
        text-align: center;
        color: #3fa9f5;
        line-height: 1.5em;
        width : calc((100% - 10px)/ 2) ;
        align-self: stretch;
    }
    .group__about_conts .unit__point{
        display: flex;
		justify-content: center;
		flex-direction: column; 
		align-items: center;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        line-height: 1.5em;
        background: #d3e6f7;
        border-radius: 10px;
        width : calc((100% - 10px)/ 2) ;
        align-self: stretch;
        padding: 20px 0;
    }
    @media screen and (min-width: 768px) {
        .group__about_conts h3{
            position: relative;
            width: 160px;
        }
        .group__about_conts h3:before{
            position: absolute;
            transform: translateX(-50%) translateY(-50%);
            top: 50%;
            left:50%;
            content:"";
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 2px solid #3fa9f5;
        }
        .group__about_conts .unit__point{
            width : calc((100% - 190px)/ 3) ;
        }
    }
/*group__about_conts-list*/
.group__about_conts-list{
    gap:0 !important;
}
.group__about_conts-list h4{
	display: flex;
    justify-content: center;
    flex-direction: column; 
    align-items: center;
    width: 100%;
    height: 60px;
    color: #fff;
    font-size: 19px;
    background: #3fa9f5;
    box-shadow: 3px 4px 3px 0px rgba(0,0,0,0.20);
    cursor:pointer;
}
            .group__about_conts-list h4:before,
            .group__about_conts-list h4:after{
                display: block;
                position: absolute;
                transform:translateY(-50%);
                top: 50%;
                content:"";
                border-radius: 2px;
                background: #fff;
            }
            .group__about_conts-list h4:before{
                right:20px;
                width: 16px;
                height: 2px;
            }
            .group__about_conts-list h4:after{
                right:27px;
                width: 2px;
                height: 16px;
                opacity: 1;
                transition: all .2s ease-out;
            }
            .group__about_conts-list h4.acco_open-tit{
                box-shadow: 3px 4px 3px 0px rgba(0,0,0,0.0);
            }
            .group__about_conts-list h4.acco_open-tit:after{
                opacity: 0;
                transition: all .2s ease-out;
            }
.area__about_conts-list{
    display: flex;
    flex-direction: column;
    align-items:center;
    background: #d3e6f7;
    width: 100%;
    padding: 10px 20px;
}
    .area__about_conts-list .block__bout_conts-list{
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width:540px;
        padding: 15px 0;
        gap:10px;
    }
        @media screen and (min-width: 560px){
            .area__about_conts-list .block__bout_conts-list{
                flex-direction:row;
                align-items: flex-start;
                gap:10px;
            }
        }
    .area__about_conts-list .block__bout_conts-list+.block__bout_conts-list{
        border-top: 1px solid #fff;
    }
    .area__about_conts-list .block__bout_conts-list:nth-child(1){
        border-top:none;
    }
    .area__about_conts-list .block__bout_conts-list h5{
        display: flex;
		align-items: center;
        font-size: 17px;
        gap:5px;
    }
    .area__about_conts-list .block__bout_conts-list h5 .icon_popularity{
        width: 32px;
        display: flex;
		justify-content: center;
		flex-direction: column; 
		align-items: center;
        border-radius: 3px;
        color: #fff;
        letter-spacing: -0.05em;
        font-size:10px;
        background: #c1272d;
        line-height: 1em !important;
        padding: 3px 0 4px;
    }
    .area__about_conts-list .block__bout_conts-list .list__curcle{
        padding-left: 15px;
    }
        @media screen and (min-width: 560px){
            .area__about_conts-list .block__bout_conts-list:nth-child(1) h5,
            .area__about_conts-list .block__bout_conts-list:nth-child(2) h5,
            .area__about_conts-list .block__bout_conts-list:nth-child(3) h5{
                width: 50%;
            }
            .area__about_conts-list .block__bout_conts-list .list__curcle{
                margin-top: -8px;
                padding-left: 0px;
            }
        }
    .area__about_conts-list .block__bout_conts-list .list__curcle li{
        padding-left: 1em;
        font-size: 16px;
        text-indent: -1em;
        line-height: 1.5em;
    }
    .area__about_conts-list .block__bout_conts-list .list__curcle li:before{
        display: inline-block;
        content:"";
        width: 14px;
        height: 14px;
        margin-right: 2px;
        border-radius: 50%;
        background: #3fa9f5;
        vertical-align: -3px;
    }


/* group__main-support
------------------------------------------------------------*/
.section__support-02 .img__support{
    width: 100%;
    max-width: 480px;
    padding: 15px 20px;
}
.section__support-02 .list__support{
    max-width: 100%;
}
@media screen and (min-width: 768px){
    .section__support-02 .img__support{
        max-width: 380px;
        padding: 15px 0;
    }
    .section__support-02 .list__support{
        max-width:100%;
    }
    .section__support-02 .block__main-support{
        gap:20px;
        flex-direction: row;
        align-items:center;
    }
}


/*------------------------------------------------------------
    section__support-03
------------------------------------------------------------*/
.section__support-03{
    background:#fcecc5;
}
.section__support-03 .inner__group{
    display: flex;
    flex-direction: column;
    align-items:center;
    width: 100%;
    padding:45px 0;
    gap: 25px;
}
.section__support-03 .inner__group + .inner__group{
    border-top: 1px solid #000;
}

.section__support-03 h3{
    display: flex;
    flex-direction: column;
    align-items:center;
    gap:10px;
}
.section__support-03 h3,
.section__support-03 h3 .inBk{
    text-align: center;
    font-size: 26px;
    letter-spacing: 0.05em;
    line-height: 1.1em;
}
.section__support-03 h3 .tit__sub,
.section__support-03 h3 .tit__sub .inBk{
    font-size: 17px;
    font-weight:500;
    line-height: 1.5em;
    letter-spacing: -0.03em;
}

/* group__main-support
------------------------------------------------------------*/
.section__support-03 .block__main-support{
    margin-top: -20px;
}
.section__support-03 .list__support{
    max-width: 320px;
}
@media screen and (min-width: 768px){
    .section__support-03 .block__main-support{
        margin-top: 0px;
    }
    .section__support-03 .list__support{
        max-width: 310px;
    }
    .section__support-03 .block__main-support{
        flex-direction: row-reverse;
        align-items:center;
        gap: 20px;
    }
}


/* group__point 貯める/使う
------------------------------------------------------------*/
.group__point{
    gap:70px !important;
    border-top:none !important;
}
@media screen and (min-width: 560px){
    .group__point{
        gap:100px;
        margin-top: 30px;
    }
}
@media screen and (min-width: 768px){
    .group__point{
        margin-top: 10px;
    }
}

.area__point{
    display: flex;
    flex-direction: column;
    align-items:center;
    width: 100%;
    gap:20px;
}
@media screen and (min-width: 560px){
    .area__point{
        gap:30px;
    }
}
/*block__point*/
.block__point{
    display: flex;
    flex-direction: column;
    align-items:center;
    background: #fff;
    width: 100%;
    border: 2px solid;
}
.block__point .tit__point{
    position: relative;
    display: flex;
    justify-content: center;
    align-items:center;
    width: 100%;
    height: 60px;
    padding: 15px 0;
}
    .block__point .tit__point .tit__bubble{
        position: absolute;
        transform:translateY(-50%);
        top: 50%;
        left:-20px;
        display: flex;
		justify-content: center;
		flex-direction: column; 
		align-items: center;
        background: #fac800;
        border-radius: 50%;
        width: 90px;
        height: 90px;
        font-size: 45px;
        line-height: 1em;
        font-weight: 500;
        gap:3px;
}
        .block__point .tit__point .tit__bubble:before{
            position: absolute;
            transform:rotateZ(-45deg);
            right: 0px;
            bottom: -2px;
            content:"";
            width:0;
            height:0;
            border-style:solid;
            border-width: 20px 10.5px 0 10.5px;
            border-color: #fac800 transparent transparent transparent;
        }
    @media screen and (min-width: 560px){
        .block__point .tit__point .tit__bubble{
            margin-top: -25px;
        }
    }

    .block__point .tit__point .tit__bubble span{
        font-size: 20px;
        line-height: 1em;
        letter-spacing: -0.05em;
    }
    .block__point .tit__point h3{
        padding-left: 80px;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 18px;
        gap:5px;
        width: auto;
    }
    @media screen and (min-width: 560px){
        .block__point .tit__point h3{
            flex-direction: row;
            gap: 0;
        }
    }
    .block__point .tit__point h3 span{
        font-size: 18px;
        }

/* color */
.point-save .block__point{ border-color:#f15a24;}
.point-save .block__point .tit__point{ background-color:#f15a24;}
.point-save .block__point .tit__point .tit__bubble{color:#f15a24;}

.point-use .block__point{ border-color:#232f6e;}
.point-use .block__point .tit__point{ background-color:#232f6e;}
.point-use .block__point .tit__point .tit__bubble{color:#232f6e;}


/* .point-save * box__point */
.point-save .box__point{
    display: flex;
    gap: 0px;
    width: 100%;
    max-width: 560px;
    justify-content:space-between;
    padding: 15px 0;
}
    .point-save .box__point .unit__point{
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content:center;
        gap: 8px;
        flex: 1;
        padding: 2px 0;
    }
    .point-save .box__point .unit__point + .unit__point{
        border-left: 2px dotted #f15a24;
    }
    .point-save .box__point .unit__point h4{
        display: flex;
        flex-direction: column;
        align-items:center;
        text-align: center;
        gap: 2px;
        letter-spacing: -0.01em;
    }
    @media screen and (max-width: 559px){
        .point-save .box__point .unit__point h4 .br_sp_non{
            display: none !important;
        }
    }
    @media screen and (min-width: 560px){
        .point-save .box__point .unit__point h4{
            display:inline;
            flex-direction: row;
            gap: 0px;
            line-height: 1.5em;
        }
    }

/* .point-use * box__point */
.point-use .box__point{
    width: 100%;
    max-width: 560px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
    @media screen and (min-width: 768px){
        .point-use .box__point{
            flex-direction: row;
            padding:20px 15px;
            gap: 20px;
        }
    }

.point-use .box__point h4{
    position: relative;
    gap: 5px;
    font-size: 13px;
    line-height: 1.5em;
    color:#232f6e;
    text-align: center;
    padding: 0 20px;
}
.point-use .box__point h4:before,
.point-use .box__point h4:after{
    position: absolute;
    transform:translateY(-50%);
    top: 50%;
    display: block;
    content:"";
    width: 2px;
    height:32px;
    background:#232f6e;
    border-radius: 2px;
}
    .point-use .box__point h4:before{
        transform:translateY(-50%) rotateZ(-148deg);
        right: 0;
    }
    .point-use .box__point h4:after{
        transform:translateY(-50%) rotateZ(148deg);
        left: 0;
    }
    @media screen and (min-width: 768px){
        .point-use .box__point h4{
            padding: 0;
        }
        .point-use .box__point h4:before,
        .point-use .box__point h4:after{
            content:"";
            width: 42px;
            height:2px;
        }
        .point-use .box__point h4:before{
            transform:translateY(0%) rotateZ(-150deg);
            left: auto;
            right: 0;
            top: -16px;
            bottom: auto;
        }
        .point-use .box__point h4:after{
            transform:translateY(0%) rotateZ(150deg);
            left: auto;
            right: 0;
            top: auto;
            bottom: -16px;
        }
    }
.point-use .box__point h4 .txt_l{
    font-size: 16px;
}
.point-use .box__point h4 .txt_amazon{
    font-size: 17px;
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    letter-spacing: 0.05em;
}
.point-use .box__point .unit__point{
    display: flex;
    align-items: center;
    gap:10px;
}
.point-use .box__point .unit__point .point{
    position:relative;
    display: flex;
    justify-content: center;
    flex-direction: column; 
    align-items: center;
    border-radius: 50%;
    background: #ddedf4;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2em;
    width: 90px;
    height: 90px;
}
.point-use .box__point .unit__point .point:before{
    position: absolute;
    content: "";
    width: 17px;
    height: 21px;
    background: url("../images/illust_point.svg") center 0 no-repeat;
    background-size: 100% auto;
}
    .point-use .box__point .unit__point .point:nth-child(1):before{
        width: 10px;
        height: 13px;
        left: 5px;
        top: -5px;
    }
    .point-use .box__point .unit__point .point:nth-child(2):before{
        width: 10px;
        height: 13px;
        right: -8px;
        bottom: 5px;
    }
    .point-use .box__point .unit__point .point:nth-child(3):before{
        top:-10px;
        right: -8px;
    }


/*block__point-table*/
.block__point-table{
    display: flex;
    flex-direction: column;
    align-items:center;
    gap: 0px;
    width: 100%;
}
.block__point-table h4{
	display: flex;
    justify-content: center;
    flex-direction: column; 
    align-items: center;
    width: 100%;
    height: 60px;
    color: #fff;
    font-size: 19px;
    box-shadow: 3px 4px 3px 0px rgba(0,0,0,0.2);
    cursor: pointer
}

    .block__point-table h4:before,
    .block__point-table h4:after{
        display: block;
        position: absolute;
        transform:translateY(-50%);
        top: 50%;
        content:"";
        border-radius: 2px;
        background: #fff;
    }
    .block__point-table h4:before{
        right:20px;
        width: 16px;
        height: 2px;
    }
    .block__point-table h4:after{
        right:27px;
        width: 2px;
        height: 16px;
        opacity: 1;
        transition: all .2s ease-out;
    }
    .block__point-table h4.acco_open-tit{
        box-shadow: 3px 4px 3px 0px rgba(0,0,0,0.0);
    }
    .block__point-table h4.acco_open-tit:after{
        opacity: 0;
        transition: all .2s ease-out;
    }
    /* color */
    .point-save .block__point-table h4{ background-color:#f15a24;}
    .point-use .block__point-table h4{ background-color:#232f6e;}

.block__point-table p.txt__note{
    margin-top:1em;
    font-size: 11px;
    width: 100%;
}

/*wrap__point-table*/
.block__point-table .wrap__point-table{
    display: flex;
    flex-direction: column;
    align-items:center;
    gap: 20px;
    width: 100%;
    padding: 10px 6px;
}
    /* color */
    .point-save .block__point-table .wrap__point-table{ background-color:#fef8e8;}
    .point-use .block__point-table .wrap__point-table{ background-color:#f1f7fa;}

    .block__point-table .box__point-table{
        display: flex;
        flex-direction: column;
        align-items:center;
        width: 100%;
    }
    .block__point-table .box__point-table h5{
        display: flex;
		align-items: center;
        width : -webkit-calc(100% - 4px) ;
        width : calc(100% - 4px) ;
        height: 36px;
        padding: 0 15px;
        font-size: 14px;
        font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
        font-weight: 700;
    }
    /* color */
    .point-save .block__point-table h5{ background-color:#f8ac91;}
    .point-use .block__point-table h5{ background-color:#cfe6f0;}

    .block__point-table .box__point-table table{
      width: 100%;
      border-collapse: spacing !important;
      border-spacing: 2px;
    }
    .block__point-table .box__point-table table th,
    .block__point-table .box__point-table table td{
        font-size: 12px;
        padding: 10px;
        line-height: 1.3em;
        font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    }
    .point-save .block__point-table table th{
        background-color:#fcded3;
    }
    .block__point-table .box__point-table table .thead th,
    .point-use .block__point-table .box__point-table table th{
        color: #666666;
        background: #e6e6e6;
        white-space: nowrap;
        text-align: center;
    }
    .block__point-table .box__point-table table td{
        background: #fff;
    }

    
    .point-save .block__point-table table th{
        width: 92px;
    }
    .block__point-table .box__point-table table .thead th{
        width: auto;
    }
    .point-use .block__point-table .box__point-table table th{
        width: 90px;
    }
    @media screen and (max-width: 413px){
        .point-save .block__point-table table td:nth-child(2) .inline_413{
            display: inline;
        }
    }
    @media screen and (max-width: 414px){
        .point-save .block__point-table table td:nth-child(3){
            width: 5em;
        }
        .point-save .block__point-table table td:nth-child(4){
            width: 6em;
        }
    }
    @media screen and (min-width: 415px){
        .point-save .block__point-table table td:nth-child(3){
            white-space: nowrap;
            width: 6em;
        }
        .point-save .block__point-table table td:nth-child(4){
            width: 8em;
        }
    }
    @media screen and (min-width: 560px){
        .point-save .block__point-table table th{
            width: 160px;
        }
        .block__point-table .box__point-table table .thead th{
            width: auto;
        }
        .point-use .block__point-table .box__point-table table th{
            width: 150px;
        }
    }



/* group__stage つなあぐ会員ステージ
------------------------------------------------------------*/
.area__stage{
    display: flex;
    flex-direction: column;
    align-items:center;
    background: #fff;
    width: 100%;
    max-width: 540px;
    padding: 20px 15px;
    gap:0px;
}
@media screen and (min-width: 560px){
    .area__stage{
        padding: 25px 30px;
        border-radius: 20px;
        gap:10px;
    }
}
    /*tit__stage*/
    .area__stage .tit__stage{
        display: flex;
        flex-direction: column;
        border-left: 6px solid #eaa831;
        gap:5px;
        padding-left: 10px;
        width: 100%;
        max-width: 342px;
    }
    @media screen and (min-width: 560px){
        .area__stage .tit__stage{
            max-width: 475px;
        }
    }
    .area__stage h4{
        color: #eaa831;
        font-size: 19px;
    }
    .area__stage p,
    .area__stage p span{
        font-size: 14px;
        line-height: 1.3em;
    }
    /*block__stage*/
    .area__stage .block__stage{
        display: flex;
        flex-direction: column;
        align-items:center;
        gap: 10px;
    }
    .area__stage .chart__stage{
        display: flex;
        gap: 10px;
        justify-content:center;
        align-items:flex-end;
        gap:6px;
        margin-top: -10px;
    }
    @media screen and (min-width: 560px){
        .area__stage .block__stage{
            gap: 15px;
        }
        .area__stage .chart__stage{
            margin-top: 0px;
            gap:10px;
        }
        }
        .area__stage .chart__stage li{
            display: flex;
            flex-direction: column-reverse;
            align-items:center;
            justify-content:flex-end;
            width: 70px;
        }
        @media screen and (min-width: 560px){
            .area__stage .chart__stage li{
                width: 100px;
            }
        }
        .area__stage .chart__stage .txt__graph{
            display: flex;
            justify-content: center;
            flex-direction: column; 
            align-items: center;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.05em;
            width: 100%;
            height:20px;
        }
            .area__stage .chart__stage li:nth-child(1) .txt__graph{
                background:#d6c6aa;
            }
            .area__stage .chart__stage li:nth-child(2) .txt__graph{
                background:#d3d1cf;
            }
            .area__stage .chart__stage li:nth-child(3) .txt__graph{
                background:#ddcc90;
            }
            .area__stage .chart__stage li:nth-child(4) .txt__graph{
                background:#d3e4ed;
            }
        .area__stage .chart__stage .graph{
            display: flex;
            justify-content: center;
            flex-direction: column; 
            align-items: center;
            font-size: 22px;
            font-weight: 500;
            color: #fff;
            letter-spacing: 0.05em;
            vertical-align: middle;
            width: 100%;
        }
            .area__stage .chart__stage li:nth-child(1) .graph{
                height: 30px;
                background:url("../images/graph_bg_01.webp") center 0 no-repeat;
                background-size: 100% auto;
            }
            .area__stage .chart__stage li:nth-child(2) .graph{
                height: 40px;
                background:url("../images/graph_bg_02.webp") center 0 no-repeat;
                background-size: 100% auto;
            }
            .area__stage .chart__stage li:nth-child(3) .graph{
                height: 50px;
                background:url("../images/graph_bg_03.webp") center 0 no-repeat;
                background-size: 100% auto;
            }
            .area__stage .chart__stage li:nth-child(4) .graph{
                height: 100px;
                background:url("../images/graph_bg_04.webp") center 0 no-repeat;
                background-size: 100% auto;
            }
        .area__stage .chart__stage .comment{
            position: relative;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.1em;
            text-align: center;
            width: 100%;
            max-width: 90px;
            background: #eaa831;
            border-radius: 10px;
            color:#fff;
            padding:8px 0 10px;
            margin-bottom: 20px;
        }
        .area__stage .chart__stage .comment:before{
            position: absolute;
            transform:translateX(-50%);
            left: 50%;
            bottom: -8px;
            content:"";
            width:0;
            height:0;
            border-style:solid;
            border-width: 8px 4.5px 0 4.5px;
            border-color: #eaa831 transparent transparent transparent;
        }
        .area__stage .chart__stage .comment .txt__num{
            font-size: 18px;
            font-weight: 500;
            vertical-align: -1px;
        }
        .area__stage .chart__stage .comment .txt__line{
            text-decoration: underline;
            font-weight: 500;
        }
    .area__stage .block__stage h5{
        font-size: 18px;
    }


/* group__faq よくある質問
------------------------------------------------------------*/
.area__faq{
    display: flex;
    flex-direction: column;
    align-items:center;
    width: 100%;
    gap: 30px;
}
.area__faq .block__faq{
    display: flex;
    flex-direction: column;
    align-items:center;
    width: 100%;
    gap: 10px;
}
    .area__faq .block__faq h4{
        display: flex;
		justify-content: center;
		flex-direction: column; 
		align-items: center;
        width: 100%;
        height: 40px;
        background: #eeb95a;
        font-size: 16px;
        letter-spacing: 0.1em;
    }
    .area__faq .box__faq{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
        .area__faq .box__faq .txt_que{
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            background: #f3cf8e;
            padding: 20px 50px 20px 20px;
            text-align: justify;
            font-weight: 500;
            font-size: 15px;
            line-height: 1.5em;
        }
        .area__faq .box__faq .txt_que:hover{
            cursor: pointer
        }
                .area__faq .box__faq .txt_que:before,
                .area__faq .box__faq .txt_que:after{
                    display: block;
                    position: absolute;
                    transform:translateY(-50%);
                    top: 50%;
                    content:"";
                    border-radius: 2px;
                    background: #000;
                }
                .area__faq .box__faq .txt_que:before{
                    right:17px;
                    width: 16px;
                    height: 2px;
                }
                .area__faq .box__faq .txt_que:after{
                    right:24px;
                    width: 2px;
                    height: 16px;
                    opacity: 1;
                    transition: all .2s ease-out;
                }
                .area__faq .box__faq .txt_que.acco_open-tit:after{
                    opacity: 0;
                    transition: all .2s ease-out;
                }
        .area__faq .box__faq .txt_ans{
            display: flex;
            flex-direction: column;
            width: 100%;
            background: #fff;
            padding: 20px;
            font-size: 14px;
            line-height: 1.5em;
        }
        .area__faq .box__faq .txt_ans p{
            font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
            text-align: justify;
            font-size: 14px;
            line-height: 1.5em;
        }
        .area__faq .box__faq .txt_ans p .txt__note{
            font-size: 12px;
            line-height: 1.5em;
        }
        .area__faq .box__faq .txt_ans p a{
            color:#0171ce;
            text-decoration: underline;
        }
        .area__faq .box__faq .txt_ans p a:hover{
            color:#0171ce;
            text-decoration:none;
        }

/*------------------------------------------------------------
    footer
------------------------------------------------------------*/
footer{
    display: flex;
    flex-direction: column;
    align-items:center;
    padding: 30px 0 40px;
    gap: 40px;
}

/* foot__link
------------------------------------------------------------*/
footer .foot__link{
    display: flex;
    flex-direction: column;
    align-items:center;
    gap: 15px;
}

    /* btn__link */
    footer .btn__footer-link{
        display: flex;
        align-items: center;
        justify-content:center;
        width: 260px;
        height: 32px;
        border: 1px solid #000;
        border-radius: 32px;
        -webkit-border-radius: 32px;
        -moz-border-radius: 32px;
        font-size: 13px;
}
    footer .btn__footer-link:hover{
          opacity: .8;
    }

    /* footer nav */
    footer nav{
        display: flex;
        justify-content: center;
        align-items: center;
    }
        footer nav a{
            font-size: 11px;
            display: flex;
            justify-content: center;
            flex-direction: column; 
            align-items: center;
            padding: 0 20px;
            height: 20px;
        }
        footer nav a + a{
            border-left: 1px solid #000;
        }

/* foot__conts
------------------------------------------------------------*/
footer .foot__conts{
    display: flex;
    flex-direction: column;
    align-items:center;
    gap: 40px;
}

    /* poweredby */
    footer .poweredby img{
        width: 223px;
    }
        footer .foot__txt{
            display: flex;
            flex-direction: column;
            align-items:center;
            gap: 0px;
        }

    /* txt__note */
    footer p.txt__note{
        font-size: 8px;
        line-height: 1.5em;
        font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
        text-align: center;
    }

    /* copy */
    footer .copy{
        font-size: 8px;
        font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
        letter-spacing: 0.08em;
    }