@charset "UTF-8";
body{background-color: #ffffff;}

@keyframes fadeout {
    0% {
        opacity:1
    }
    to {
        opacity:0
    }
}
@keyframes floating-up {
    0% {
        transform:unset
    }
    to {
        transform:translateY(-60px)
    }
}
@keyframes floating-left {
    0% {
        transform:unset
    }
    to {
        transform:translate(10vw)
    }
}
@keyframes scale-up {
    0% {
        transform:rotate(2deg) scale(1)
    }
    75% {
        transform:rotate(-2.2deg) scale(.98);
        transition-timing-function:ease-in-out
    }
    to {
        transform:rotate(2deg) scale(1);
        transition-timing-function:ease-in-out
    }
}
@keyframes scale-up-sp {
    0% {
        transform:rotate(-.3deg) scale(1)
    }
    75% {
        transform:rotate(0deg) scale(.93);
        transition-timing-function:ease-in-out
    }
    to {
        transform:rotate(-.3deg) scale(1);
        transition-timing-function:ease-in-out
    }
}
@keyframes scale-up-2 {
    0% {
        transform:scale(1)
    }
    75% {
        transform:scale(.98);
        transition-timing-function:ease-in-out
    }
    to {
        transform:scale(1);
        transition-timing-function:ease-in-out
    }
}
img {
    height:auto;
    width:100%
}
[data-sai=fade] {
    opacity:0;
    transition:.7s
}
[data-sai=fade].is-animated {
    opacity:1
}
[data-sai=fade-up] {
    opacity:0;
    transform:translateY(30px);
    transition:.7s
}
[data-sai=fade-up].is-animated {
    opacity:1;
    transform:translateY(0)
}
@media screen and (min-width:768px) {
    .dh-app-dl .dl-body .GooglePlay {
        margin-right:20px
    }
}
.AppStore,.GooglePlay {
    transition:.15s ease-out
}
.AppStore:hover,.GooglePlay:hover {
    opacity:.75
}
.parallax-container .parallax-image img {
    opacity:0;
    transform:scale(1.1);
    transition:opacity 1s .2s,transform 1.5s .3s
}
.parallax-container .parallax-image.is-active img {
    opacity:1;
    transform:scale(1)
}
.uniqueMainContents {
    font-family:YakuHanJPs,notoSansJP,Noto Sans JP,メイリオ,ヒラギノ角ゴ Pro W3,ＭＳ Ｐゴシック,sans-serif;
    font-weight:400;
    overflow:hidden;
    position:relative;
    z-index:0
}
.uniqueMainContents .dh-button.dh-button-round02 {
    margin:0
}
.infoBox {
    background-color:#fff;
    border:5px solid #e0dfdd;
    box-sizing:border-box;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    width:100%;
    z-index:2
}
@media screen and (min-width:768px) {
    .infoBox {
        border-radius:20px;
        margin-bottom:-114px;
        margin-top:95px;
        max-width:700px;
        padding:0 16px;
        width:100%
    }
}
@media screen and (max-width:767.98px) {
    .infoBox {
        border-radius:20px;
        margin-top:34px;
        padding:0 14px 7px;
        width:calc(100% - 32px)
    }
}
.infoBox__item+.infoBox__item {
    border-top:1px dotted #564f41
}
.infoBox__link {
    align-items:center;
    box-sizing:border-box;
    display:flex;
    min-height:69px;
    opacity:1;
    transition:opacity .15s ease-out;
    will-change:opacity
}
.infoBox__link:not(.-nolink):hover {
    cursor:pointer;
    opacity:.75;
    text-decoration:none
}
@media screen and (min-width:768px) {
    .infoBox__link {
        padding:13.5px 0
    }
}
@media screen and (max-width:767.98px) {
    .infoBox__link {
        padding:14px 0 10px
    }
}
.infoBox__link.-warning .infoBox__text,.infoBox__link.is_active .infoBox__text {
    color:#cc4e00
}
.infoBox__link.-blank {
    background:url(/keitai_payment/dh-common/img/common/icon_jump.svg) no-repeat right top 6px
}
.infoBox__icon {
    transform:translateY(.2em);
    width:18px
}
.infoBox__arrow {
    width:16px
}
.infoBox__textArea {
    display:flex;
    flex:1;
    justify-content:space-between
}
@media screen and (min-width:768px) {
    .infoBox__textArea {
        gap:12px;
        margin-left:8px
    }
}
@media screen and (max-width:767.98px) {
    .infoBox__textArea {
        gap:12px;
        margin-left:8px
    }
}
.infoBox__text {
    color:#3d3d3d;
    flex:1;
    font-size:1.4rem;
    font-weight:700;
    letter-spacing:0;
    line-height:1.5
}
.mainVisual {
    opacity:0;
    overflow:hidden
}
@media screen and (max-width:767.98px) {
    .mainVisual {
        padding-top:30px
    }
}
.mainVisual__image {
    position:absolute;
    z-index:-1
}
@media screen and (max-width:767.98px) {
    .mainVisual__image {
        display:none
    }
}
.mainVisual__image--right {
    right:0;
    top:0
}
@media screen and (min-width:768px) {
    .mainVisual__image--right {
        max-width:780px;
        min-width:450px;
        width:calc(50% - 30px)
    }
}
.mainVisual__image--left {
    bottom:-20%;
    left:0
}
@media screen and (min-width:768px) {
    .mainVisual__image--left {
        max-width:560px;
        min-width:230px;
        width:calc(50% - 250px)
    }
}
.mainVisual__content {
    align-items:center;
    display:flex;
    justify-content:center;
    position:relative
}
@media screen and (min-width:768px) {
    .mainVisual__content {
        /* height:465px; */
        margin-left:auto;
        margin-right:auto;
        max-width:1280px;
        padding-top: 9%;
        width:100%
    }
}
@media screen and (max-width:767.98px) {
    .mainVisual__content {
        height:172vw;
        padding-top: 14%;
    }
}
.mainVisual__cityBackground {
    position:absolute
}
@media screen and (min-width:768px) {
    .mainVisual__cityBackground {
        display:none
    }
}
@media screen and (max-width:767.98px) {
    .mainVisual__cityBackground--01 {
        left:146px;
        top:-40px;
        width:304px
    }
    .mainVisual__cityBackground--02 {
        left:-117px;
        top:527px;
        width:304px
    }
}
.mainVisual__textArea {
    z-index:1
}
@media screen and (min-width:768px) {
    .mainVisual__textArea {
        margin-left:auto;
        margin-right:auto;
        transform:translateY(-32px);
        width:576px
    }
}
@media screen and (max-width:767.98px) {
    .mainVisual__textArea {
        left:50%;
        position:absolute;
        top:86.6666666667vw;
        transform:translateX(-50%);
        width:76.2666666667vw
    }
}
.mainVisual__title {
    font-weight:900;
    letter-spacing:.07em
}
@media screen and (min-width:768px) {
    .mainVisual__title {
        font-size:3.8rem;
        line-height:1.2894736842
    }
}
@media screen and (max-width:767.98px) {
    .mainVisual__title {
        font-size:3.8rem;
        letter-spacing:.09em;
        line-height:1.3421052632;
        white-space:nowrap
    }
}
.mainVisual__lead {
    font-weight:900;
    letter-spacing:.15em
}
@media screen and (min-width:768px) {
    .mainVisual__lead {
        font-size:1.8rem;
        line-height:1.5;
        margin-top:13px
    }
}
@media screen and (max-width:767.98px) {
    .mainVisual__lead {
        font-size:1.6rem;
        line-height:1.5;
        margin-top:9px
    }
}
.mainVisual__background {
    position:absolute
}
@media screen and (min-width:768px) {
    .mainVisual__background--right {
        bottom:-50%;
        right:20px;
        width:483px
    }
}
@media screen and (max-width:767.98px) {
    .mainVisual__background--right {
        left:146px;
        top:-50px;
        width:304px
    }
}
.mainVisual__background--right .mainVisual__backgroundImage {
    animation:floating-left 28s cubic-bezier(.66,0,.34,1) infinite alternate
}
@media screen and (min-width:768px) {
    .mainVisual__background--left {
        left:-100px;
        top:-50px;
        width:450px
    }
}
@media screen and (max-width:767.98px) {
    .mainVisual__background--left {
        bottom:-80px;
        left:-55px;
        width:265px
    }
}
.mainVisual__background--left .mainVisual__backgroundImage {
    animation:floating-up 22s cubic-bezier(.66,0,.34,1) infinite alternate
}
.mainVisual__backgroundImage {
    transform:unset
}
.mainVisual__blob {
    position:absolute
}
.mainVisual__blob--spMain,.mainVisual__blob--spSub {
    height:100%;
    left:0;
    top:0;
    width:100%;
    z-index:1
}
.mainVisual__blob--pcRightMain {
    right:-15%;
    top:-5%;
    z-index:1
}
@keyframes moveObject {
    0% {
        transform:rotate(0deg) translateX(40px) rotate(0deg)
    }
    to {
        transform:rotate(1turn) translateX(40px) rotate(-1turn)
    }
}
.mainVisual__blob--pcRightMain {
    animation:moveObject 40s linear infinite
}
@media(min-width:1280px) {
    .mainVisual__blob--pcRightMain {
        right:-15%
    }
}
.mainVisual__blob--pcRightMain {
    max-width:1026px;
    min-width:866px;
    width:calc(50% + 386px)
}
.mainVisual__blob--pcRightSub {
    animation:floating-up 22s cubic-bezier(.66,0,.34,1) infinite alternate;
    bottom:-155px;
    max-width:886px;
    min-width:726px;
    right:-30px;
    width:calc(50% + 246px);
    z-index:1
}
.mainVisual__blob--pcLeftMain {
    left:-180px;
    top:0;
    z-index:1
}
@keyframes floating-up-sub {
    0% {
        transform:unset
    }
    to {
        transform:translateX(-40px)
    }
}
.mainVisual__blob--pcLeftMain {
    animation:floating-up-sub 10s cubic-bezier(.66,0,.34,1) infinite alternate;
    max-width:746px;
    min-width:586px;
    width:calc(50% + 106px)
}
.mainVisual__blob--pcLeftSub {
    animation:moveObject 30s linear infinite reverse;
    bottom:-120px;
    left:-61px;
    max-width:626px;
    min-width:466px;
    width:calc(50% - 14px);
    z-index:1
}
.mainVisual__campaignSlider {
    position:relative;
    z-index:2
}
@media screen and (min-width:768px) {
    .mainVisual__campaignSlider {
        padding-left:20px
    }
}
@media screen and (max-width:767.98px) {
    .mainVisual__campaignSlider {
        padding-left:10px
    }
}
.mainVisual__campaignSlider .carousel-inner {
    border-radius:16px 0 0 16px
}
@media screen and (min-width:768px) {
    .mainVisual__campaignSlider .carousel-inner .carousel-lower {
        margin-right:25px
    }
}
@media screen and (max-width:767.98px) {
    .mainVisual__campaignSlider .carousel-inner .carousel-lower {
        margin-right:15px
    }
}
.mainVisual .mainVisual__blob--spSub path {
    transform-origin:100% 100%
}
.mainVisual .mainVisual__blob--spMain path {
    transform-origin:0 40%
}
.mainVisual .mainVisual__blob--pcRightMain path {
    transform-origin:20% 70%
}
.mainVisual .mainVisual__blob--pcRightSub path {
    transform-origin:80% 80%
}
body.is_firstViewAnimationStandBy .mainVisual .mainVisual__blob {
    opacity:0
}
@media screen and (min-width:768px) {
    body.is_firstViewAnimationStandBy .mainVisual .mainVisual__blob {
        transform-origin:left center
    }
}
@media screen and (max-width:767.98px) {
    body.is_firstViewAnimationStandBy .mainVisual .mainVisual__blob {
        transform:scale(1);
        transform-origin:center center
    }
}
body.is_firstViewAnimationStandBy .mainVisual .mainVisual__background,body.is_firstViewAnimationStandBy .mainVisual .mainVisual__textArea {
    opacity:0
}
body.is_firstViewAnimationStandBy.is_firstViewAnimationStart .mainVisual .mainVisual__blob {
    opacity:1;
    transform:scale(1);
    transition:opacity 1.6s cubic-bezier(.33,0,.24,1)
}
body.is_firstViewAnimationStandBy.is_firstViewAnimationStart .mainVisual .mainVisual__blob--spMain {
    transition-delay:0s
}
body.is_firstViewAnimationStandBy.is_firstViewAnimationStart .mainVisual .mainVisual__blob--pcRightMain,body.is_firstViewAnimationStandBy.is_firstViewAnimationStart .mainVisual .mainVisual__blob--spSub {
    transition-delay:.4s
}
body.is_firstViewAnimationStandBy.is_firstViewAnimationStart .mainVisual .mainVisual__blob--pcRightSub {
    transition-delay:.6s
}
body.is_firstViewAnimationStandBy.is_firstViewAnimationStart .mainVisual .mainVisual__blob--pcLeftMain {
    transition-delay:0s
}
body.is_firstViewAnimationStandBy.is_firstViewAnimationStart .mainVisual .mainVisual__blob--pcLeftSub {
    transition-delay:.2s
}
body.is_firstViewAnimationStandBy.is_firstViewAnimationStart .mainVisual .mainVisual__background,body.is_firstViewAnimationStandBy.is_firstViewAnimationStart .mainVisual .mainVisual__textArea {
    opacity:1;
    transition:1.2s cubic-bezier(.33,0,.24,1) .8s
}
body.is_visited .mainVisual {
    opacity:1;
    transition:.4s
}
.campaignSlider__head {
    align-items:center;
    box-sizing:border-box;
    display:flex;
    justify-content:space-between
}
@media screen and (min-width:768px) {
    .campaignSlider__head {
        padding-right:20px;
        width:100%
    }
}
@media screen and (max-width:767.98px) {
    .campaignSlider__head {
        padding-right:19px
    }
}
.campaignSlider__title {
    color:#707070;
    font-weight:700;
    letter-spacing:0;
    line-height:1.5
}
@media screen and (min-width:768px) {
    .campaignSlider__title {
        font-size:1.6rem
    }
}
@media screen and (max-width:767.98px) {
    .campaignSlider__title {
        font-size:1.8rem
    }
}
.campaignSlider__button {
    align-items:center;
    background:#fcfcfc;
    border:1px solid #e0dedc;
    border-radius:144px;
    box-sizing:border-box;
    color:#4d4639;
    display:flex;
    font-size:1.1rem;
    font-weight:700;
    gap:10px;
    justify-content:space-between;
    line-height:1;
    opacity:1;
    padding-bottom:1px;
    padding-left:16px;
    padding-right:7px;
    transition:opacity .15s ease-out;
    will-change:opacity
}
.campaignSlider__button:hover {
    opacity:.75;
    text-decoration:none
}
@media screen and (min-width:768px) {
    .campaignSlider__button {
        height:24px;
        padding-bottom:5px;
        padding-top:4px;
        width:86px
    }
}
@media screen and (max-width:767.98px) {
    .campaignSlider__button {
        height:28px;
        width:86px
    }
}
.campaignSlider__buttonArrow {
    height:16px;
    width:16px
}
.campaignSlider__content {
    overflow:hidden
}
.campaignSlider .dh-carousel2 .carousel-inner {
    background-color:#fffdfb;
    padding-right:0
}
@media screen and (min-width:768px) {
    .campaignSlider .dh-carousel2 .carousel-inner {
        padding-bottom:16px;
        padding-left:24px;
        padding-top:24px
    }
}
@media screen and (max-width:767.98px) {
    .campaignSlider .dh-carousel2 .carousel-inner {
        padding-bottom:14px;
        padding-left:14px;
        padding-top:16px
    }
}
.campaignSlider .dh-carousel2 .carousel-link {
    display:block
}
.campaignSlider .dh-carousel2 .splide {
    overflow:visible
}
.campaignSlider .dh-carousel2 .splide__slide {
    border-radius:8px;
    width:160px!important
}
@media screen and (min-width:768px) {
    .campaignSlider .dh-carousel2 .splide__track {
        overflow:visible
    }
}
.animationSvg__image {
    display:block;
    height:100%;
    transition:opacity .4s ease-in-out;
    width:100%
}
.animationSvg path,.animationSvg__image {
    transform-origin:center center
}
@media screen and (min-width:768px) {
    .animationSvg path {
        transform:scale(1) rotate(2deg)
    }
}
@media screen and (max-width:767.98px) {
    .animationSvg path {
        transform:rotate(-.3deg) scale(1)
    }
}
@media screen and (min-width:768px) {
    .animationSvg:nth-of-type(odd).is-animated {
        animation:scale-up-2 5s ease-in-out infinite
    }
    .animationSvg:nth-of-type(odd).is-animated path {
        animation:scale-up 5s ease-in-out infinite
    }
}
@media screen and (max-width:767.98px) {
    .animationSvg:nth-of-type(odd).is-animated path {
        animation:scale-up-sp 5s ease-in-out infinite
    }
}
@media screen and (min-width:768px) {
    .animationSvg:nth-of-type(2n).is-animated {
        animation:scale-up-2 5s ease-in-out infinite
    }
    .animationSvg:nth-of-type(2n).is-animated path {
        animation:scale-up 5s ease-in-out infinite
    }
}
@media screen and (max-width:767.98px) {
    .animationSvg:nth-of-type(2n).is-animated path {
        animation:scale-up-sp 5s ease-in-out infinite
    }
}
.checkBlock {
    margin-top:32px
}
@media screen and (max-width:767.98px) {
    .checkBlock {
        display:none
    }
}
.checkBlock__textArea {
    align-items:center;
    background-color:#facb32;
    border-radius:8px;
    box-sizing:border-box;
    display:flex;
    justify-content:space-between;
    padding:9px 13px 9px 16px;
    position:relative;
    width:288px
}
.checkBlock__text {
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:0;
    line-height:1.25
}
.checkBlock__shape {
    left:55.5%;
    position:absolute;
    top:98%;
    transform:translateX(-50%)
}
@media screen and (min-width:768px) {
    .checkBlock__shape {
        width:27px
    }
}
.checkBlock__buttons {
    display:flex;
    margin-top:14px
}
.checkBlock__button--google {
    width:153px
}
.checkBlock__button--app {
    width:125px
}
.checkBlock__button+.checkBlock__button {
    margin-left:11px
}
.checkBnr {
    box-sizing:border-box;
    z-index:1
}
@media screen and (min-width:768px) {
    .checkBnr {
        display:none
    }
}
@media screen and (max-width:767.98px) {
    .checkBnr {
        width:calc(100% - 38px)
    }
}
.checkBnr__label {
    color:#4d4639;
    font-family:Quicksand,Noto Sans JP,ＭＳ Ｐゴシック,sans-serif;
    font-size:13px;
    font-weight:700;
    margin-top:20px;
    position:relative;
    text-align:center;
    width:69px
}
.checkBnr__labelBackground {
    background-color:#facb32;
    border-radius:30px;
    padding:5px
}
.checkBnr__shape {
    left:50%;
    position:absolute;
    top:98%;
    transform:translateX(-50%);
    width:24px
}
.checkBnr__buttons {
    margin-top:10px
}
.checkBnr__appLink {
    display:block;
    width:135px
}
.pointDescription {
    position:relative;
    z-index:1
}
@media screen and (min-width:768px) {
    .pointDescription {
        padding:60px 0 0
    }
}
@media screen and (max-width:767.98px) {
    .pointDescription {
        overflow:hidden;
        padding:12vw 0 0
    }
}
.pointDescription__pcBackground {
    position:relative;
    z-index:-1
}
@media screen and (min-width:768px) {
    .pointDescription__background {
        height:auto;
        left:50%;
        max-width:unset;
        position:absolute;
        top:-60px;
        transform:translateX(-50%);
        width:1920px
    }
}
@media screen and (max-width:767.98px) {
    .pointDescription__background {
        height:auto;
        position:absolute;
        top:103px;
        width:100%;
        z-index:-1
    }
}
.pointDescription__content {
    overflow:hidden;
    position:relative;
    width:100%
}
@media screen and (min-width:768px) {
    .pointDescription__content {
        margin-top:61px;
        padding:62px 0 80px
    }
}
@media screen and (max-width:767.98px) {
    .pointDescription__content {
        margin-top:12vw;
        padding:8.5333333333vw 0 9.6vw
    }
}
.pointDescription__content:after {
    background-color:#faf8f6;
    content:"";
    height:100%;
    position:absolute;
    right:0;
    top:0;
    z-index:-1
}
@media screen and (min-width:768px) {
    .pointDescription__content:after {
        border-radius:24px 0 0 24px;
        width:calc(100% - 21px)
    }
}
@media screen and (max-width:767.98px) {
    .pointDescription__content:after {
        border-radius:24px 0 0 24px;
        width:calc(100% - 16px)
    }
    .pointDescription__content .dh-Grid {
        padding-left:45px;
        padding-right:45px
    }
}
.pointDescriptionIntro,.pointDescriptionIntro__lead {
    margin-left:auto;
    margin-right:auto
}
.pointDescriptionIntro__lead {
    background-color:#facb32;
    border-radius:20px;
    font-weight:700;
    line-height:1.52;
    max-width:-moz-fit-content;
    max-width:fit-content;
    opacity:0;
    position:relative;
    transform:translateY(-20px);
    transition:.3s .5s;
    width:-moz-max-content;
    width:max-content
}
@media screen and (min-width:768px) {
    .pointDescriptionIntro__lead {
        font-size:2.4rem;
        padding:17px 38px 17px 41px
    }
}
@media screen and (max-width:767.98px) {
    .pointDescriptionIntro__lead {
        font-size:2rem;
        line-height:1.48;
        padding:10px 26px 15px 28px
    }
}
.pointDescriptionIntro__icon {
    transform:scale(1.65);
    vertical-align:-.1em
}
@media screen and (min-width:768px) {
    .pointDescriptionIntro__icon {
        height:24px;
        width:24px
    }
    .pointDescriptionIntro__icon.icon-store {
        margin-left:4px;
        margin-right:2px
    }
}
@media screen and (max-width:767.98px) {
    .pointDescriptionIntro__icon {
        height:20px;
        width:20px
    }
    .pointDescriptionIntro__icon.icon-store {
        margin-left:2px;
        margin-right:2px
    }
}
.pointDescriptionIntro__shape {
    left:50%;
    position:absolute;
    top:99%;
    transform:translateX(-50%)
}
@media screen and (min-width:768px) {
    .pointDescriptionIntro__shape {
        width:48px
    }
}
@media screen and (max-width:767.98px) {
    .pointDescriptionIntro__shape {
        width:40px
    }
}
.pointDescriptionIntro__dImage {
    display:block;
    margin:auto;
    opacity:0;
    transition:opacity .5s
}
@media screen and (min-width:768px) {
    .pointDescriptionIntro__dImage {
        margin-top:28px;
        width:140px
    }
}
@media screen and (max-width:767.98px) {
    .pointDescriptionIntro__dImage {
        margin-top:20px;
        width:72px
    }
}
.pointDescriptionIntro.is-animated .pointDescriptionIntro__dImage {
    opacity:1
}
.pointDescriptionIntro.is-animated .pointDescriptionIntro__lead {
    opacity:1;
    transform:translateY(0)
}
@media screen and (max-width:767.98px) {
    .pointDescriptionIntro {
        margin-bottom:12vw
    }
}
@media screen and (min-width:768px) {
    .pointCard {
        display:flex;
        gap:62px
    }
}
@media screen and (max-width:767.98px) {
    .pointCard {
        display:block
    }
}
@media screen and (min-width:768px) {
    .pointCard:nth-child(2n) {
        flex-direction:row-reverse
    }
    .pointCard+.pointCard {
        margin-top:70px
    }
}
@media screen and (max-width:767.98px) {
    .pointCard+.pointCard {
        margin-top:35px
    }
}
.pointCard__imageArea {
    position:relative
}
.pointCard__image {
    border-radius:36px;
    overflow:hidden
}
@media screen and (min-width:768px) {
    .pointCard__image {
        width:300px
    }
}
@media screen and (max-width:767.98px) {
    .pointCard__image {
        width:100%
    }
}
.pointCard__label {
    align-items:center;
    background-color:#e5e3d8;
    border-radius:50%;
    color:#3d3d3d;
    display:flex;
    flex-direction:column;
    font-family:Quicksand,Noto Sans JP,ＭＳ Ｐゴシック,sans-serif;
    justify-content:center;
    position:absolute
}
@media screen and (min-width:768px) {
    .pointCard__label {
        font-size:.9rem;
        font-weight:700;
        height:62px;
        left:-11px;
        line-height:1;
        top:-11px;
        width:62px
    }
}
@media screen and (max-width:767.98px) {
    .pointCard__label {
        font-size:.9rem;
        font-weight:700;
        height:62px;
        left:-11px;
        line-height:1;
        top:-11px;
        width:62px
    }
}
.pointCard__label .num {
    color:#3d3d3d;
    font-size:2.4rem;
    line-height:.85em;
    margin-top:5px
}
.pointCard__textArea {
    color:#3d3d3d
}
@media screen and (min-width:768px) {
    .pointCard__textArea {
        padding-top:20px;
        width:338px
    }
}
@media screen and (max-width:767.98px) {
    .pointCard__textArea {
        margin-top:18px
    }
}
.pointCard__ttl {
    font-size:2rem;
    font-weight:700;
    letter-spacing:.06em;
    line-height:1.5
}
@media screen and (min-width:768px) {
    .pointCard__text {
        margin-top:12px
    }
}
@media screen and (max-width:767.98px) {
    .pointCard__text {
        margin-top:4px
    }
}
.pointCard__text .dh-foot {
    margin-top:12px
}
.pointCard__text .dh-foot .notice-list .notes {
    color:#3d3d3d
}
.pointCard__button {
    margin-left:auto;
    margin-right:0;
    pointer-events:none
}
@media screen and (min-width:768px) {
    .pointCard__button {
        margin-top:28px;
        width:200px
    }
}
@media screen and (max-width:767.98px) {
    .pointCard__button {
        margin-top:16px;
        width:190px
    }
}
.pointCard__button-wide {
    width:280px
}
@media screen and (min-width:768px) {
    .pointCard__button .dh-button.dh-button-type2 .button {
        height:42px
    }
}
@media screen and (max-width:767.98px) {
    .pointCard__button .dh-button.dh-button-type2 .button {
        height:44px
    }
}
@media screen and (min-width:768px) {
    .pointCard__button .dh-button.dh-button-type2 .button .text {
        font-size:1.4em
    }
}
@media screen and (max-width:767.98px) {
    .pointCard__button .dh-button.dh-button-type2 .button .text {
        font-size:1.4em;
        margin-right:12px
    }
}
.pointCard__imageArea,.pointCard__textArea {
    opacity:1;
    transition:opacity .15s ease-out;
    will-change:opacity
}
.pointCard:hover .pointCard__imageArea,.pointCard:hover .pointCard__textArea {
    opacity:.75;
    text-decoration:none
}
@media screen and (max-width:767.98px) {
    .pointCard:hover .pointCard__imageArea,.pointCard:hover .pointCard__textArea {
        opacity:1
    }
}
.sectionBottomButton {
    margin-left:auto;
    margin-right:auto
}
@media screen and (min-width:768px) {
    .sectionBottomButton {
        margin-top:64px;
        width:260px
    }
}
@media screen and (max-width:767.98px) {
    .sectionBottomButton {
        margin-top:36px;
        max-width:283px;
        width:100%
    }
}
.sectionBottomButton .tab-panel {
    padding:0
}
.usefulLife {
    position:relative
}
@media screen and (min-width:768px) {
    .usefulLife {
        padding:63px 0 60px
    }
}
@media screen and (max-width:767.98px) {
    .usefulLife {
        padding-top:102px
    }
}
.usefulLife__image {
    position:absolute
}
.usefulLife__image--right {
    right:0;
    top:0;
    transform:translateY(-20%)
}
@media screen and (min-width:768px) {
    .usefulLife__image--right {
        max-width:639px;
        min-width:309px;
        width:calc(50% - 171px)
    }
}
@media screen and (max-width:767.98px) {
    .usefulLife__image--right {
        display:none
    }
}
.usefulLife__image--right .parallax-image {
    -webkit-mask-image:url(/keitai_payment/assets/top/image/mask_useful_life_right_pc.svg);
    mask-image:url(/keitai_payment/assets/top/image/mask_useful_life_right_pc.svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%
}
.usefulLife__image--left {
    bottom:0;
    left:0;
    max-width:575px;
    min-width:245px;
    width:calc(50% - 235px)
}
@media screen and (min-width:768px) {
    .usefulLife__image--left {
        bottom:140px;
        max-width:510px;
        min-width:180px;
        width:calc(50% - 300px)
    }
}
@media screen and (max-width:767.98px) {
    .usefulLife__image--left {
        display:none
    }
}
.usefulLife__image--left .parallax-image {
    -webkit-mask-image:url(/keitai_payment/assets/top/image/mask_useful_life_left_pc.svg);
    mask-image:url(/keitai_payment/assets/top/image/mask_useful_life_left_pc.svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%
}
.usefulLife__image--spRight {
    right:0;
    top:-80px
}
@media screen and (min-width:768px) {
    .usefulLife__image--spRight {
        display:none
    }
}
@media screen and (max-width:767.98px) {
    .usefulLife__image--spRight {
        width:189px
    }
}
.usefulLife__image--spRight .parallax-image {
    -webkit-mask-image:url(/keitai_payment/assets/top/image/mask_useful_life_right_sp.svg);
    mask-image:url(/keitai_payment/assets/top/image/mask_useful_life_right_sp.svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%
}
.usefulLife__image--spLeft {
    left:0;
    top:-63px
}
@media screen and (min-width:768px) {
    .usefulLife__image--spLeft {
        display:none
    }
}
@media screen and (max-width:767.98px) {
    .usefulLife__image--spLeft {
        width:105px
    }
}
.usefulLife__image--spLeft .parallax-image {
    -webkit-mask-image:url(/keitai_payment/assets/top/image/mask_useful_life_left_sp.svg);
    mask-image:url(/keitai_payment/assets/top/image/mask_useful_life_left_sp.svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%
}
.usefulLife__content {
    display:flex;
    flex-wrap:wrap
}
@media screen and (min-width:768px) {
    .usefulLife__content {
        gap:60px
    }
}
@media screen and (max-width:767.98px) {
    .usefulLife__content {
        gap:28px
    }
}
@media screen and (min-width:768px) {
    .topHeadingLayout {
        margin-bottom:52px
    }
}
@media screen and (max-width:767.98px) {
    .topHeadingLayout {
        padding:0 16px 22px
    }
}
.topHeadingLayout__title {
    font-weight:900;
    letter-spacing:.03em;
    line-height:1.5
}
@media screen and (min-width:768px) {
    .topHeadingLayout__title {
        font-size:4rem
    }
}
@media screen and (max-width:767.98px) {
    .topHeadingLayout__title {
        font-size:2.6rem
    }
}
.topHeadingLayout__lead {
    font-weight:700;
    letter-spacing:0;
    line-height:1.6666666667
}
@media screen and (min-width:768px) {
    .topHeadingLayout__lead {
        font-size:1.8rem;
        margin-top:30px
    }
}
@media screen and (max-width:767.98px) {
    .topHeadingLayout__lead {
        font-size:1.6rem;
        margin-top:14px
    }
}
.usefulLifeTab {
    background-color:#fff
}
@media screen and (min-width:768px) {
    .usefulLifeTab {
        border-radius:20px;
        padding:16px 40px 40px
    }
}
@media screen and (max-width:767.98px) {
    .usefulLifeTab {
        border-radius:16px;
        padding:16px 10px 32px
    }
}
.usefulLifeTab .tab-menu {
    box-shadow:0 0 2px rgba(0,0,0,.12);
    margin-left:auto;
    margin-right:auto;
    overflow:hidden
}
@media screen and (min-width:768px) {
    .usefulLifeTab .tab-menu {
        border-radius:20px;
        width:458px
    }
}
@media screen and (max-width:767.98px) {
    .usefulLifeTab .tab-menu {
        border-radius:16px
    }
}
.usefulLifeTab .tab-menu * {
    box-sizing:border-box
}
.usefulLifeTab .tab-menu .tab-menu-list li .tab-menu-button .tab-button-text {
    font-size:1.4rem
}
.usefulLifeTab .tab-panel {
    position:relative
}
.usefulLifeTab .tab-panel:after {
    background-image:linear-gradient(90deg,#d4d2cf,#d4d2cf,transparent 1px,transparent 0);
    background-position:0 100%;
    background-repeat:repeat-x;
    background-size:3px 2px;
    content:"";
    display:block;
    height:1px;
    position:absolute;
    top:0;
    width:100%
}
@media screen and (min-width:768px) {
    .usefulLifeTab .tab-panel {
        margin-top:16px;
        padding:32px 0 0
    }
}
@media screen and (max-width:767.98px) {
    .usefulLifeTab .tab-panel {
        margin-top:16px;
        padding:28px 0 0
    }
}
.usefulLifeTab .shopLogo {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    place-content:center;
    place-items:center
}
@media screen and (min-width:768px) {
    .usefulLifeTab .shopLogo {
        gap:47px 82px;
        padding:0 12%
    }
}
@media screen and (max-width:767.98px) {
    .usefulLifeTab .shopLogo {
        gap:32px 8px;
        padding:0 7%
    }
}
@media screen and (min-width:768px) {
    .usefulLifeTab .shopLogo__image {
        width:104px
    }
}
@media screen and (max-width:767.98px) {
    .usefulLifeTab .shopLogo__image {
        width:82px
    }
}
.shopsInfo {
    margin-top:43px;
    position:relative
}
@media screen and (max-width:767.98px) {
    .shopsInfo {
        margin-top:100px;
        padding-left:16px;
        padding-right:16px
    }
}
.shopsInfo__image {
    position:absolute;
    z-index:-1
}
.shopsInfo__image--right {
    right:0;
    top:0;
    transform:translateY(-35%)
}
@media screen and (min-width:768px) {
    .shopsInfo__image--right {
        max-width:670px;
        min-width:340px;
        width:calc(50% - 140px)
    }
}
@media screen and (max-width:767.98px) {
    .shopsInfo__image--right {
        display:none
    }
}
.shopsInfo__image--right .parallax-image {
    -webkit-mask-image:url(/keitai_payment/assets/top/image/mask_shops_list_right_pc.svg);
    mask-image:url(/keitai_payment/assets/top/image/mask_shops_list_right_pc.svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%
}
.shopsInfo__image--left {
    left:0;
    top:300px
}
@media screen and (min-width:768px) {
    .shopsInfo__image--left {
        max-width:575px;
        min-width:245px;
        width:calc(50% - 235px)
    }
}
@media screen and (max-width:767.98px) {
    .shopsInfo__image--left {
        display:none
    }
}
.shopsInfo__image--left .parallax-image {
    -webkit-mask-image:url(/keitai_payment/assets/top/image/mask_shops_list_left_pc.svg);
    mask-image:url(/keitai_payment/assets/top/image/mask_shops_list_left_pc.svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%
}
.shopsInfo__image--spRight {
    right:0;
    top:-96px
}
@media screen and (min-width:768px) {
    .shopsInfo__image--spRight {
        display:none
    }
}
@media screen and (max-width:767.98px) {
    .shopsInfo__image--spRight {
        width:209px
    }
}
.shopsInfo__image--spRight .parallax-image {
    -webkit-mask-image:url(/keitai_payment/assets/top/image/mask_shops_list_right_sp.svg);
    mask-image:url(/keitai_payment/assets/top/image/mask_shops_list_right_sp.svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%
}
.shopsInfo__image--spLeft {
    left:0;
    top:-168px
}
@media screen and (min-width:768px) {
    .shopsInfo__image--spLeft {
        display:none
    }
}
@media screen and (max-width:767.98px) {
    .shopsInfo__image--spLeft {
        width:114px
    }
}
.shopsInfo__image--spLeft .parallax-image {
    -webkit-mask-image:url(/keitai_payment/assets/top/image/mask_shops_list_left_sp.svg);
    mask-image:url(/keitai_payment/assets/top/image/mask_shops_list_left_sp.svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%
}
.downLoadFlow {
    position:relative
}
@media screen and (min-width:768px) {
    .downLoadFlow {
        margin-top:122px
    }
}
@media screen and (max-width:767.98px) {
    .downLoadFlow {
        margin-top:100px;
        z-index:-1
    }
}
.downLoadFlow__image {
    position:absolute
}
.downLoadFlow__image--right {
    right:87px;
    top:-108px;
    z-index:1
}
@media screen and (min-width:768px) {
    .downLoadFlow__image--right {
        max-width:598px;
        min-width:268px;
        width:calc(50% - 212px)
    }
}
@media screen and (max-width:767.98px) {
    .downLoadFlow__image--right {
        display:none
    }
}
.downLoadFlow__image--right .parallax-image {
    -webkit-mask-image:url(/keitai_payment/assets/top/image/mask_download_flow_right_pc.svg);
    mask-image:url(/keitai_payment/assets/top/image/mask_download_flow_right_pc.svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%
}
.downLoadFlow__image--left {
    left:0;
    top:800px;
    transform:translateY(-95%);
    z-index:-1
}
@media screen and (min-width:768px) {
    .downLoadFlow__image--left {
        max-width:504px;
        min-width:174px;
        top:576px;
        transform:none;
        width:calc(50% - 306px);
        z-index:1
    }
}
@media screen and (max-width:767.98px) {
    .downLoadFlow__image--left {
        display:none
    }
}
@media(min-width:768px)and (max-width:960px) {
    .downLoadFlow__image--left {
        display:none
    }
}
.downLoadFlow__image--left .parallax-image {
    -webkit-mask-image:url(/keitai_payment/assets/top/image/mask_download_flow_left_pc.svg);
    mask-image:url(/keitai_payment/assets/top/image/mask_download_flow_left_pc.svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%
}
.downLoadFlow__image--spRight {
    right:0;
    top:-100px;
    z-index:1
}
@media screen and (min-width:768px) {
    .downLoadFlow__image--spRight {
        display:none
    }
}
@media screen and (max-width:767.98px) {
    .downLoadFlow__image--spRight {
        width:151px
    }
}
.downLoadFlow__image--spRight .parallax-image {
    -webkit-mask-image:url(/keitai_payment/assets/top/image/mask_download_flow_right_sp.svg);
    mask-image:url(/keitai_payment/assets/top/image/mask_download_flow_right_sp.svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%
}
.downLoadFlow__image--spLeft {
    left:0;
    top:-120px
}
@media screen and (min-width:768px) {
    .downLoadFlow__image--spLeft {
        display:none
    }
}
@media screen and (max-width:767.98px) {
    .downLoadFlow__image--spLeft {
        width:140px
    }
}
.downLoadFlow__image--spLeft .parallax-image {
    -webkit-mask-image:url(/keitai_payment/assets/top/image/mask_download_flow_left_sp.svg);
    mask-image:url(/keitai_payment/assets/top/image/mask_download_flow_left_sp.svg);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%
}
.downLoadFlow__colorLayer {
    overflow:hidden
}
@media screen and (min-width:768px) {
    .downLoadFlow__colorLayer {
        border-top-left-radius:20px
    }
}
@media screen and (max-width:767.98px) {
    .downLoadFlow__colorLayer {
        border-top-left-radius:20px;
        margin-left:-16px;
        margin-right:-16px
    }
}
.downLoadFlow__colorLayer+.downLoadFlow__colorLayer {
    margin-top:-20px
}
.downLoadFlow__colorLayer--first {
    background-color:#e8e7e1
}
.downLoadFlow__colorLayer--second {
    background-color:#f7f5f3
}
.downLoadFlow__colorLayer--third {
    background-color:#edebe6
}
@media screen and (min-width:768px) {
    .flowIntro {
        padding:60px 60px 130px
    }
}
@media screen and (max-width:767.98px) {
    .flowIntro {
        padding:62px 16px 70px
    }
}
@media screen and (min-width:768px) {
    .flowIntro .topHeadingLayout {
        margin-bottom:52px
    }
}
@media screen and (max-width:767.98px) {
    .flowIntro .topHeadingLayout {
        margin-bottom:22px;
        padding-left:16px;
        padding-right:16px
    }
}
@media screen and (min-width:768px) {
    .flowIntro .topHeadingLayout__lead {
        margin-top:12px
    }
}
@media screen and (max-width:767.98px) {
    .flowIntro .topHeadingLayout__lead {
        margin-top:10px
    }
}
.flowIntroSlder {
    margin-left:auto;
    margin-right:auto
}
@media screen and (min-width:768px) {
    .flowIntroSlder {
        width:455px
    }
}
@media screen and (max-width:767.98px) {
    .flowIntroSlder {
        width:100%
    }
}
.flowIntroSlder__description {
    display:none;
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:0;
    line-height:1.5
}
.flowIntroSlder__description--active {
    display:block
}
@media screen and (min-width:768px) {
    .flowIntroSlder__description {
        margin-top:25px;
        text-align:center
    }
}
@media screen and (max-width:767.98px) {
    .flowIntroSlder__description {
        margin-left:auto;
        margin-right:auto;
        margin-top:11px;
        text-align:left;
        width:232px
    }
}
.dh-howToUse .splide__arrows {
    top:46%
}
@media screen and (max-width:767.98px) {
    .dh-howToUse .splide__arrows {
        top:45%
    }
}
.dh-howToUse .splide__arrow {
    background-size:100%;
    height:28px;
    width:28px
}
@media screen and (max-width:767.98px) {
    .dh-howToUse .splide__arrow {
        background-position:50%;
        height:24px;
        width:24px
    }
}
.dh-howToUse__number {
    left:29px;
    padding:9px 11px 7px
}
@media screen and (max-width:767.98px) {
    .dh-howToUse__description .notes {
        padding-left:1em
    }
}
.splide__arrow {
    transition:.2s
}
.splide__arrow:hover {
    opacity:.75
}
@media screen and (min-width:768px) {
    .downloads {
        margin-left:61px;
        margin-top:48px
    }
}
@media screen and (max-width:767.98px) {
    .downloads {
        margin-top:0
    }
}
@media screen and (min-width:768px) {
    .faq {
        padding:60px 60px 95px
    }
}
@media screen and (max-width:767.98px) {
    .faq {
        padding:44px 16px 70px
    }
}
.topSmallHeading {
    font-weight:700;
    letter-spacing:0;
    line-height:1.28125
}
@media screen and (min-width:768px) {
    .topSmallHeading {
        font-size:3.2rem;
        margin-bottom:30px
    }
}
@media screen and (max-width:767.98px) {
    .topSmallHeading {
        font-size:2.3rem;
        margin-bottom:24px;
        padding-left:16px
    }
}
@media screen and (min-width:768px) {
    .useGuide {
        padding:60px 45px 75px
    }
}
@media screen and (max-width:767.98px) {
    .useGuide {
        padding:39px 16px 70px
    }
}
.useGuide__content .dh-guide .dh-guide-list-icon {
    height:auto
}
.useGuide__content .dh-guide .dh-guide-head a {
    height:unset
}
@media screen and (min-width:768px) {
    .useGuide__content .dh-guide .dh-guide-list li a {
        height:124px
    }
}
@media screen and (max-width:767.98px) {
    .useGuide__content .dh-guide .dh-guide-list li a {
        height:unset
    }
}
.useGuide__content .guide-head-text {
    white-space:nowrap
}
.entryButton {
    align-items:center;
    background-color:#fff;
    border:none;
    box-shadow:0 0 2px rgba(0,0,0,.12);
    color:#3d3d3d;
    display:flex;
    overflow:hidden;
    width:100%
}
@media screen and (min-width:768px) {
    .entryButton {
        border-radius:12px;
        padding:16px 17px
    }
}
@media screen and (max-width:767.98px) {
    .entryButton {
        border-radius:12px;
        padding:16px
    }
}
.entryButton__icon {
    background-color:#f7f5f5;
    border-radius:30px;
    padding:11.5px
}
.entryButton__icon img {
    height:49px;
    width:49px
}
.entryButton__content {
    align-items:flex-start;
    display:flex;
    flex-direction:column;
    margin-left:17px
}
.entryButton__label {
    background-color:#eecd62;
    border-radius:8px;
    display:inline-block;
    font-size:1.2rem;
    font-weight:600;
    letter-spacing:0;
    line-height:1.5;
    line-height:1;
    position:relative
}
@media screen and (min-width:768px) {
    .entryButton__label {
        padding:3px 10px 2px
    }
}
@media screen and (max-width:767.98px) {
    .entryButton__label {
        padding:3px 10px 2px
    }
}
.entryButton__shape {
    left:15%;
    position:absolute;
    top:99%;
    transform:translateX(-50%)
}
@media screen and (min-width:768px) {
    .entryButton__shape {
        width:20px
    }
}
@media screen and (max-width:767.98px) {
    .entryButton__shape {
        width:20px
    }
}
.entryButton__title {
    font-size:1.8rem;
    font-weight:700;
    letter-spacing:0;
    line-height:1.28;
    margin-top:11px
}
.categoryButton {
    align-items:center;
    background-color:#fff;
    border:none;
    border-radius:12px;
    box-shadow:0 0 2px rgba(0,0,0,.12);
    color:#3d3d3d;
    display:flex;
    overflow:hidden;
    padding:16px 17px
}
@media screen and (min-width:768px) {
    .categoryButton {
        width:180px
    }
}
@media screen and (max-width:767.98px) {
    .categoryButton {
        flex-direction:column
    }
}
.categoryButton__icon {
    background-color:#f7f5f5;
    border-radius:30px;
    padding:11.5px
}
.categoryButton__icon img {
    height:49px;
    width:49px
}
.categoryButton__text {
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:0;
    line-height:1.28;
    margin-left:7px;
    text-align:left;
    white-space:nowrap
}
@media screen and (max-width:767.98px) {
    .categoryButton__text {
        align-items:center;
        display:flex;
        flex-direction:column;
        height:41px;
        justify-content:center;
        margin-left:-16px;
        margin-right:-16px;
        margin-top:13px;
        text-align:center
    }
}
.categoryButton__text .small {
    display:block;
    font-size:1.2rem;
    letter-spacing:0;
    line-height:1.3333333333;
    margin-top:2px
}
@media screen and (min-width:768px) {
    .bottomLinkArea {
        margin-top:72px
    }
}
@media screen and (max-width:767.98px) {
    .bottomLinkArea {
        margin-top:48px
    }
}
.bottomLinkArea__upper {
    background-color:#f7f5f3;
    border-top:1px solid #e8e4df
}
.bottomLinkArea__lower {
    background-color:#fcfcfc
}
.dh-introductionBlock__linkWrapper {
    align-items:end
}
.dh-introductionBlock__link {
    padding-right:20px
}
.dh-introductionBlock .dh-bnrBlock {
    padding-bottom:36px
}
@media screen and (max-width:767.98px) {
    .dh-introductionBlock .dh-bnrBlock {
        margin-bottom:86px
    }
}
.dh-introductionBlock .dh-bnrBlock__link {
    display:block;
    margin:0 auto;
    transition:opacity .15s ease-out
}
.dh-introductionBlock .dh-bnrBlock__link:hover {
    opacity:.75
}
.dh-modal.top-cpn-modal .modal__contents {
    padding:0
}
@media screen and (min-width:768px) {
    .dh-modal.top-cpn-modal .modal__contents {
        width:500px
    }
}
@media screen and (max-width:767.98px) {
    .dh-howToUse__description {
        height:96px
    }
}
.switch-button-list .button-list-item:not(.is-show) {
    display:none
}
.oricon-cs-ranking,.oricon-cs-ranking__lead1 {
    margin-left:auto;
    margin-right:auto
}
.oricon-cs-ranking__lead1 {
    border-radius:20px;
    font-weight:700;
    line-height:1.52;
    max-width:-moz-fit-content;
    max-width:fit-content;
    opacity:0;
    position:relative;
    text-align:center;
    transform:translateY(-20px);
    transition:.3s .5s;
    width:-moz-max-content;
    width:max-content
}
@media screen and (min-width:768px) {
    .oricon-cs-ranking__lead1 {
        font-size:2.4rem;
        padding:60px 40px 24px
    }
}
@media screen and (max-width:767.98px) {
    .oricon-cs-ranking__lead1 {
        font-size:2rem;
        line-height:1.48;
        max-width:calc(100% - 48px);
        padding:0 28px 20px;
        width:306px
    }
}
.oricon-cs-ranking__lead2 {
    line-height:1.4783333333;
    margin-left:auto;
    margin-right:auto;
    max-width:70%;
    opacity:0;
    position:relative;
    text-align:center;
    transform:translateY(-20px);
    transition:.3s .5s;
    width:-moz-max-content;
    width:max-content
}
@media screen and (min-width:768px) {
    .oricon-cs-ranking__lead2 {
        font-size:1.6rem;
        padding:24px 40px 16px;
        width:472px
    }
}
@media screen and (max-width:767.98px) {
    .oricon-cs-ranking__lead2 {
        font-size:1.6rem;
        line-height:1.43;
        max-width:calc(100% - 48px);
        padding:20px 28px 14px;
        width:306px
    }
}
.oricon-cs-ranking .d-image {
    display:block;
    margin:auto;
    opacity:1;
    transition:opacity .5s
}
@media screen and (min-width:768px) {
    .oricon-cs-ranking .d-image {
        width:140px
    }
}
@media screen and (max-width:767.98px) {
    .oricon-cs-ranking .d-image {
        height:112px;
        width:104px
    }
}
.oricon-cs-ranking.is-animated .oricon-cs-ranking__d-image {
    opacity:1
}
.oricon-cs-ranking.is-animated .oricon-cs-ranking__lead1,.oricon-cs-ranking.is-animated .oricon-cs-ranking__lead2 {
    opacity:1;
    transform:translateY(0)
}

.header{
    background-color: #f0eeec;
}
/* PCのみ　アンカーリンク*/

.menuLinkBox ul{
    position: absolute;
    display: flex;
    align-items: center;
    gap: 24px;
    top: 15%;
    right: 0;
}
.menuLinkBox li{
    display: inline-flex;
    
    color: #111;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 21px */
}
.menuLinkBox li a {
    color: #111;
    padding-bottom: 3px; /* テキストと下線の間隔 */
    background-image: linear-gradient(#cc0000, #cc0000);
    background-repeat: no-repeat;
    background-position: bottom right; /* 下線の初期位置 */
    background-size: 0 3px; /* 下線のサイズ（横幅、高さ） */
    transition: background-size 0.3s;
}
.menuLinkBox li a:hover {
    background-position: bottom left; /* 下線のホバー時位置 */
    background-size: 100% 3px; /* 下線の横幅を100%にする */
}
.menuLinkBox li .menuLinkBtn{
    align-items: center;
    background-color: #c00;
    border-radius: 20px;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    gap: 9px;
    height: 2.5em;
    justify-content: space-between;
    opacity: 1;
    padding-left: 23px;
    pointer-events: all;
    transition: opacity .2s ease-out .2s;
    width: 11em;
    position: relative;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    }
.menuLinkBox li .menuLinkBtn::after{
    content: "";
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/arrow_next.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 2.5em;
    height: 2.5em;
    top: 0;
    right: 0;
}



/* SPのみ アンカーリンク */
.anchorlinkBox{
    width: 90%;
    margin: 0 auto;
}
.anchorlinkBox ul{
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 3%;
}
.anchorlinkBox li{
    width: 48.5%;
    height: 9.5em;
    background-color: #F0EEEC;
    padding: 7% 3% 1%;
    border-radius: 10px;
    box-sizing: border-box;
    /* margin-bottom: 3%; */
    text-align: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    margin-bottom: 3%;
}
.anchorlinkBox li a{
    color: #CC0100;
    text-align: center;

    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 21px */


}
.anchorlinkBox li a img{
    width: 1em;
    height: 1em;
}

.anchorlinkBox li.bgRed{
    background-color: #CC0100;
}
.anchorlinkBox li.bgRed a{
    color: #ffffff;
}

.contWrap{
	max-width: 1120px;
    width: 77.8%;
	margin: 0 auto;
}

.newsBox {
    position: relative;
    margin: 2em 0 6em;
    padding: 3.25em 3em 2em;
}
.box-title {
	position: relative;
    padding-left: 20px;
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1%;
	padding-top: 1%;
	padding-bottom: 1%;
}
.box-title:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: -7px;
    width: 10px;
    height: 100%;
    border-radius: 12px;
    background: #CC0100;
}



@media screen and (max-width: 767px){
    .contWrap{
        max-width: 767px;
        width: 100%;
        margin: 0 auto;
    }
}



/* NEWS */
.news-list{
    display: flex;
    max-width: 980px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0 auto;
  }
  .news-list .item{
    position: relative;
    width: 100%;

    display: flex;
    padding-left: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 0.25rem;
    box-sizing: border-box;
  }
.news-list .item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -10px;
    left: 0px;
    border-bottom: 1px solid #87EBFF;
}
/* .news-list .item a{
	text-decoration: none;
	border-bottom: 1px solid #CCC;
	padding: 20px 0;
  } */
.news-list .item a:last-child{
	border-bottom: none;
}
.news-list .item .date{
    margin: 0;
    color: #CC0100;

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-24_5, 24.5px); /* 175% */
}
  .news-list .item .title{
	margin: 0;
	width: 100%;
	font-size: 18px;

    color: var(--Cod-Gray, var(--color-grey-7, #111));

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-24_5, 24.5px); /* 153.125% */
  }

  .news-list .item a:hover .title{
	color: #666666;
  }
.news-list .item .title a{
    color: var(--Cod-Gray, var(--color-grey-7, #111));
}
.news-list .item .title a:hover{
	color: #00F;
}
.newsBoxListNV{
    margin-top: 2rem;
  }

  @media screen and (max-width: 767px){
  .news-list .item a{
	/* flex-wrap: wrap; */
  }
  .news-list .item .date{
	min-width: 100px;
  }
  .news-list .item .title{
	margin-top: 10px;
  }
  .news-list{
    /* height: 26em; */
  }
}
.newsBtn {
    display: flex;
    width: 159px;
    height: 36px;
    justify-content: center;
    align-items: center;
    border-radius: 37px;
    border: 2px solid #CC0100;
    background: #FFF;

    color: #CC0100;

    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */

    margin: 3rem auto;
    position: relative;
}
.newsBtn::after{
    content: "";
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/ico_arrow02.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 30%;
    right: 8%;
}
.newsBtn.close::after {
    content: "";
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/ico_arrow03.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 30%;
    right: 8%;
}
/* message*/
.contMessage{
    width: 100%;
}
.contMessageWrap{
    padding-top: 10%;
    padding-bottom: 30%;
}
.contMessageWrap02{
    background-color: #87EBFF;
    position: relative;
}
.contMessageWrap02::before{
    content: "";
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/mes01.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 40%;
    height: 40%;
    top: -20%;
    right: 0;
}
.contMessageInner::before{
    content: "";
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/mes02.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 40%;
    height: 40%;
    top: 40%;
    right: -10%;
}
.contMessageInner::after{
    content: "";
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/mes03.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 40%;
    height: 40%;
    bottom: -30%;
    right: 20%;
    z-index: -1;

}

.contMessageInner{
    max-width: 1120px;
    width: 77.8%;
    margin: 0 auto;
    padding: 5.4% 0 5.4%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
.contMessageWrap02::after{
    content: "";
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/mes04.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 40%;
    height: 40%;
    bottom: -38%;
    right: -20%;
}

.mesBox{
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(8px);
    width: 76%;
    max-width: 855px;
    padding: 5.4% 3.6% 5.4%;
    box-sizing: border-box;
}
.mesBox.fadeIn {
  transform: translate3d(0, 50px, 0);
  transition: 1s;
  opacity: 0;
}
.mesBox.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.mesBoxTxt{
    color: #111;

    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 200%; /* 40px */
}
.mesBoxTtl{
    color: #111;

    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 175%; /* 70px */
}

@media screen and (max-width: 767px){
    .contMessageWrap {
        padding-top: 20%;
        padding-bottom: 140%;
    }

    .contMessageWrap02::before{
        content: "";
        background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/mes01.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        width: 90%;
        height: 25%;
        top: -6%;
        left: 5%;
    }
    .contMessageInner{
        max-width: 768px;
        width: 90%;
        margin: 0 auto;
        padding: 96% 0 5.4%;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }
    .contMessageInner::before {
        content: "";
        background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/mes02.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        width: 80%;
        height: 27%;
        top: 14%;
        right: -10%;
    }
    .mesBox {
        background: rgba(255, 255, 255, 0.70);
        backdrop-filter: blur(8px);
        width: 100%;
        margin: 0 auto;
        padding: 14% 3.6% 14%;
        box-sizing: border-box;
    }
    .mesBoxTtl {
        color: #111;
    
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: 175%;
    }
    .contMessageWrap02 {
        padding-bottom: 22%;
    }
    .contMessageInner::after {
        content: "";
        background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/mes03.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        width: 70%;
        height: 40%;
        bottom: -34%;
        right: 30%;
        z-index: -1;
    }
    .contMessageWrap02::after {
        content: "";
        background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/mes04.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        width: 60%;
        height: 25%;
        bottom: -31%;
        right: -5%;
    }
}

/*message 画像の動き*/

/* /message 画像の動き*/

/* program*/
.box-subTtl{
    color: var(--Cod-Gray, var(--color-grey-7, #111));
    text-align: center;

    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 36px */
}
.programBoxList{
    max-width: 942px;
    width: 84%;
    margin: 0 auto;
}
.programBoxList ul{
    display: inline-flex;
    align-items: center;
    gap: 30px;
    margin-top: 3.2%;
    margin-bottom: 8.6%;
}
.programBoxList li{
    max-width: 216px;
    width: 22.9%;
}

.programDetailBox{
    position: relative;
}
.programDetailBoxInnerWrap{
    width: 100%;
    background-color: #F3F2F1;
    padding-top: 5.8%;
    padding-bottom: 5.8%;
}
.programDetailBox::before{
    content: "";
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/progBg01.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 31%;
    height: 40%;
    top: 0;
    left: 0;
    z-index: 1;
}
.programDetailBox::after{
    content: "";
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/progBg02.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 31%;
    height: 40%;
    bottom: 0;
    right: 0;
    z-index: 1;
}
.programDetailBoxInner{
    max-width: 1120px;
    width: 77.8%;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.programDetailTtl{
    color: var(--Cod-Gray, var(--color-grey-7, #111));

    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 175%; /* 42px */
    padding-left: 3rem;
    padding-right: 3rem;
}
.ttlRed{
    padding: 0 10px;
    /* justify-content: center;
    align-items: center;
    gap: 10px;
    */
    color: #FFF;
 
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;

	/* 以降の設定はデザインに合わせて調整 */
	font-size: 24px;
	font-weight: 700;
	padding: 0.2em 0.5em;
    line-height: 175%; /* 42px */
	background: #CC0100;
}
.ttlRed .sup{
    font-size: 1.2rem;
    line-height: 1;
    margin-top: -1.5rem;
    margin-left: -1rem;
    vertical-align: text-top;
}


.programDetailList ul{
    display: inline-flex;
    flex-wrap: wrap;
    align-items:stretch;
    gap: 5.4%;
    margin-top: 3.2%;
}
.programDetailList li{
    max-width: 530px;
    width: 47.3%;
    position: relative;
    margin-bottom: 3%;
}
.programDetailList li .progModalImg{
    position: relative;
}


.programDetailList p{
    color: var(--Cod-Gray, var(--color-grey-7, #111));

    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
    padding-top: 4%;
}
.programDetailList p .sup{
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    vertical-align: text-top;
}

.btnShow{
    position: absolute;
    width: 30%;
    height: 10%;
    bottom: 7%;
    right: 4%;
    background-color: transparent;
}
@media screen and (max-width: 767px){
    .programBox{
        width: 90%;
        margin: 0 auto;
    }
    .programBoxList ul {
        display:block;
        align-items: center;
        gap: 30px;
        margin-top: 3.2%;
        margin-bottom: 8.6%;
        overflow: hidden;
    }
    .programBoxList li {
        width: 48%;
    }
    .programBoxList li:nth-child(2n+1) {
        float: left;
        margin-bottom: 3%;
    }
    .programBoxList li:nth-child(2n) {
        float: right;
        margin-bottom: 3%;
    }
    .programDetailList ul{
        display: block;
        gap: 5.4%;
        margin-top: 3.2%;
    }
    .programDetailList li{
        width: 100%;
        position: relative;
        margin-bottom: 3%;
    }
    .btnShow {
        position: absolute;
        width: 10%;
        height: 10%;
        bottom: 13%;
        right: 6%;
    }
    .programDetailList p {
        color: var(--Cod-Gray, var(--color-grey-7, #111));
    
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
    }
    .programDetailBoxInner {
        max-width: 768px;
        width: 90%;
        margin: 0 auto;
    }
    .programDetailTtl {
        padding-left: 0;
        padding-right: 0;
    }

    .programDetailBox::before {
        content: "";
        background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/progBg01.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        width: 95%;
        height: 90%;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .programDetailBox::after{
        content: "";
        background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/progBg02.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        width: 95%;
        height: 27%;
        bottom: 0;
        right: 0;
        z-index: 1;
    }
    .programDetailTtl {
        font-size: 20px;
    }
    .ttlRed{
        color: #FFF;
        display: inline;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        font-size: 20px;
        font-weight: 700;
        padding: 0.2em 0.5em;
        line-height: 2.2;
        background: #CC0100;
    }
}

/* モーダルCSS */
/* ボタン */
.close-btn {
    content: "";
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/ico_close.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    position: absolute;
    max-width: 105px;
    width: 10%;
    height: 10%;
    top: -13%;
    right: -11%;
    font-size: 1.6rem;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

    /* モーダル背景 */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: rgba(79, 79, 79, 0.5);
        z-index: 100;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    /* モーダル表示状態 */
    .modal.active {
        display: flex;
        opacity: 1;
        pointer-events: auto;
    }

/* モーダルの中身*/
.modal-content {
    background: #fff;
    padding: 4% 5% 7%;
    border-radius: 10px;
    width: 87.5%;
    max-width: 980px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.modalBox {
    display: flex !important;
    flex-wrap: nowrap;/*flexアイテムを折り返さない*/
}
.modalImg{
    max-width: 400px;
    width: 42%;
    margin-right: 2%;
}
.modalTxt{
    width: 56%;
    color: #000;

    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 175%; /* 28px */
    text-align: left;

    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 767px){
    .modal-content {
        background: #fff;
        padding: 5% 5% 30%;
        border-radius: 10px;
        width: 87.5%;
        max-width: 980px;
        text-align: center;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        position: relative;
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

    .modalBox {
        display: block !important;
    }
    .modalImg{
        max-width: 400px;
        width: 100%;
        margin-bottom: 2%;
    }
    .modalTxt{
        width: 100%;
        color: #000;
    
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 175%; /* 28px */
        text-align: left;

        display: flex;
        justify-content: center;
        align-items: center;
    }
    .close-btn {
        width: 10%;
        height: 10%;
        top: -13%;
        right: 0%;
    }

}

    /* アニメーション*/
    .modal.active .modal-content {
        animation: fadeInScale 0.4s ease forwards;
    }

    @keyframes fadeInScale {
        0% {
            opacity: 0;
            transform: scale(0.8);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }


.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 110%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev {
    left: 40%;
}
.slick-next {
    right: 45%;
}

.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev:before {
    content: '';
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/arrow_prev.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 150%;
    height: 150%;
}
.slick-next:before {
    content: '';
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/arrow_next.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 150%;
    height: 150%;
}

@media screen and (max-width: 767px){
    .slick-prev {
        left: 30%;
    }
    .slick-next {
        right: 35%;
    }
}

.dotSet {
    display: flex;
    justify-content: center;
}
.dotSet li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #aaaaaa;
    border-radius: 50%;
    cursor: pointer;
}

.dotSet li:hover,
.dotSet li.slick-active {
    background: #cc0033;
}
.dotSet li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

/* /program*/

/* backstage */
.backstageBox {
    width: 100%;
    padding-top: 15%;
    padding-bottom: 5.8%;
    position: relative;
}
.backstageBox::before{
    content: "";
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/backstage_bg.png);
    background-repeat: no-repeat;
    position: absolute;
    width: 30%;
    background-size: contain;
    height: 70%;
    top: 10%;
    right: 0;
    z-index: -1;
}
.backstageBoxInner {
    max-width: 1120px;
    width: 77.8%;
    margin: 0 auto;
    overflow: hidden;
}

.backstageBoxLeft{
    max-width: 530px;
    width: 47%;
    float: left;
}
.backstageBoxLeft a img{
    width: 30%;
    height: 10%;
    padding: 2rem 0 2rem;
}
.backstageBoxRight{
    max-width: 530px;
    width: 47%;
    float: right;
}
.txtBox{
    color: var(--Cod-Gray, var(--color-grey-7, #111));

    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 175%; /* 35px */
}

@media screen and (max-width: 767px){
    .backstageBox {
        width: 100%;
        padding-top: 15%;
        padding-bottom: 5.8%;
        position: relative;
    }
    .backstageBox::before{
        content: "";
        background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/backstage_bg.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        width: 90%;
        height: 100%;
        top: 5%;
        right: 0;
        z-index: -1;
    }
    .backstageBoxInner {
        max-width: 768px;
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
    }

    .backstageBoxLeft{
        width: 100%;
        float: none;
        background: rgba(255, 255, 255, 0.7);
        margin-top: 5%;
        padding-top: 10%;
    }
    .backstageBoxLeft a img{
        width: 50%;
        height: 10%;
        padding: 2rem 0 2rem;
    }
    .backstageBoxRight{
        width: 100%;
        float: none;
    }
    .txtBox{
        color: var(--Cod-Gray, var(--color-grey-7, #111));
    
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 175%; /* 35px */
    }
}

/* interview */
.interviewBox {
    width: 100%;
    padding-top: 5.8%;
    padding-bottom: 5.8%;
    position: relative;
}
.interviewBox::before{
    content: "";
    background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/interview_bg.png);
    background-repeat: no-repeat;
    position: absolute;
    width: 90%;
    background-size: contain;
    height: 70%;
    top: 10%;
    left: 0;
    z-index: -1;
}
.interviewBoxInner {
    max-width: 1120px;
    width: 77.8%;
    margin: 0 auto;
    overflow: hidden;
}
.interviewBoxLeft{
    max-width: 530px;
    width: 47%;
    float: left;
}

.interviewBoxRight{
    max-width: 530px;
    width: 47%;
    float: right;
}
.interviewBoxRight a img{
    width: 48%;
    height: 10%;
    padding: 2rem 0 2rem;
}
.txtBox{
    color: var(--Cod-Gray, var(--color-grey-7, #111));

    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 175%; /* 35px */
}

@media screen and (max-width: 767px){
    .interviewBox {
        width: 100%;
        padding-top: 15%;
        padding-bottom: 5.8%;
        position: relative;
    }
    .interviewBox::before{
        content: "";
        background-image: url(/keitai_payment/corporation/schoolfestival/kse_special_package/img/interview_bg.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        width: 90%;
        height: 100%;
        top: 5%;
        right: 0;
        z-index: -1;
    }
    .interviewBoxInner {
        max-width: 768px;
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
    }
    .interviewBoxLeft{
        width: 100%;
        float: none;
    }

    .interviewBoxRight{
        width: 100%;
        float: none;
        background: rgba(255, 255, 255, 0.7);
        margin-top: 5%;
        padding-top: 10%;
    }
    .interviewBoxRight a img{
        width: 70%;
        height: 10%;
        padding: 2rem 0 2rem;
    }
}

/* caase */
.caseBox{
    margin-top: 10%;
    margin-bottom: 10%;

}
.caseBoxList{
    width: 100%;
    padding-left: 2em;
    box-sizing: border-box;
}
.caseBoxList p{
    color: var(--Cod-Gray, var(--color-grey-7, #111));
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 175%; /* 42px */
}
.caseBoxList a{
    color: var(--Cod-Gray, var(--color-grey-7, #111));
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 175%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
@media screen and (max-width: 767px){
    .caseBox{
        width: 90%;
        margin: 0 auto;
        margin-top: 20%;
        margin-bottom: 20%;
    }

}
/* schedule */
.scheduleBox {
    width: 100%;
    padding-top: 5.8%;
    padding-bottom: 5.8%;
    background-color: #F3F2F1;
}
.scheduleBoxInner {
    max-width: 1120px;
    width: 77.8%;
    margin: 0 auto;
}
@media screen and (max-width: 767px){
    .scheduleBox {
        width: 100%;
        padding-top: 5.8%;
        padding-bottom: 5.8%;
        background-color: #F3F2F1;
    }
    .scheduleBoxInner {
        max-width: 768px;
        width: 90%;
        margin: 0 auto;
    }
}
.tab {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  max-width: 1120px;
  width: 100%;
}
.tab-list {
  display: flex;
  width: 30%;
}
.tab-menu {
    align-items: center;
    background-color: #cc0000;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-grow: 1;
    height: 50px;
    justify-content: center;

    color: #FFF;

    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 175%; /* 35px */

    border-radius: 10px 10px 0 0;
}
.tab-menu.current {
  background-color: #ffffff;
  color: #cc0000;
}
.content-box {
    background-color: #ffffff;
    display: none;
    max-width: 1120px;
    width: 100%;
}
.content-box img {
  display: block;
  height: auto;
  width: 100%;
}
@media screen and (max-width: 767px){
    .tab {
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        max-width: 767px;
        width: 100%;
    }
    .tab-list {
        display: flex;
        width: 100%;
        }
}

.fes-list{
	list-style: none outside;
    margin: 0;
    padding: 0;
    background-color: #fffffa;
    height: 17em;
    overflow: auto;
  }
  .fes-list .item a{
	display: flex;
	flex-wrap: wrap;
	flex-wrap: nowrap;
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #CCC;
	padding: 20px 0;
  }
.fes-list .item a:last-child{
	border-bottom: none;
}
  .fes-list .item .date{
	margin: 0;
	width: 19%;
	font-size: 16px;
	font-weight: bold;
	color: #4a62ba;
	padding: 0 20px 0 0;
  }
  .fes-list .item .title{
	margin: 0;
	width: 52%;
	font-size: 16px;
  }
  .fes-list .item a:hover .title{
	color: #00F;
  }

 .fes-list .item .cpY{
	margin: 0;
	width: 26%;
	font-size: 16px;
	color: #ff5f6b;
	border: 2px solid #ff5f6b;
	border-radius: 5px;
	line-height: 1.5;
    text-align: center;
  }
 .fes-list .item .cpN{
	margin: 0;
	width: 26%;
	font-size: 16px;
	color: #4a62ba;
	border: 2px solid #4a62ba;
	border-radius: 5px;
	line-height: 1.5;
    text-align: center;
  }


  @media screen and (max-width: 767px){
  .fes-list .item a{
	flex-wrap: wrap;
  }
  .fes-list .item .date{
	min-width: 100px;
  }
  .fes-list .item .title{
	margin-top: 10px;
  }
  .fes-list{
    height: 26em;
  }
}
/* キャッシュレス学園祭一覧アコーディオン */
.fesBoxList{
    padding: 5% 0 5%;
    color: var(--Cod-Gray, var(--color-grey-7, #111));

    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: var(--line-height-24_5, 24.5px); /* 175% */
    overflow: auto;
    height: 22em;
}

.fesBoxList ul.fesBoxHeadline{
	width: 100%;
	font-size: 22px;
	background-color: #d4f1f8;
	line-height: 2;
	overflow: hidden;
}
.fesBoxList ul.fesBoxHeadline li{
	float: left;
}

.fesBoxList .c1,
.fesBoxList .c2,
.fesBoxList .c3{
	text-align: left;
}

.fesBoxList .c1{
	max-width: 214px;
	width: 33%;
}
.fesBoxList .c2{
	max-width: 123px;
	width: 19%;
}
.bgc{
    background-color: #FFFDEF;
    padding: 0.3em;
    border-radius: 10px;
}
.fesBoxList .c3{
	max-width: 300px;
	width: 47%;
    font-weight: bold;
}
.fesBoxList .c1 a
.fesBoxList .c2 a,
.fesBoxList .c3 a{
	display: block;
}
.fesBoxList ul.fesBoxLine{
	width: 90%;
	margin: 0 auto;
	font-size: 22px;
	overflow: hidden;
	text-align: center;
	position: relative;
    padding-left: 5rem;
    box-sizing: border-box;
}
.fesBoxList ul.fesBoxLine::before{
    content: "・";
    position: absolute;
    color: #cc0000;
    top: 35%;
    left: 1rem;
    

}
.fesBoxList ul.fesBoxLine li{
	float: left;
	display: block;
	padding: 1em 0 1em;
}
.fesBoxList ul.fesBoxLine li a{
	/* display: block;
	padding: 1em 0 1em; */
}
.fesBoxList ul.tagArea{
	width: 94%;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
	position: relative;
	padding-bottom: 3%;
}
.fesBoxList ul:nth-child(2n+1){
    background-color: #EFFCFF;

}

@media screen and (max-width: 767px){
    .fesBoxList .c1{
        width: 64%;
    }
    .fesBoxList .c2{
        width: 35%;
    }
    .fesBoxList ul.fesBoxLine li.c3{
        width: 100%;
        padding-top: 0;
        font-weight: bold;
    }


    .fesBoxList ul.fesBoxLine::before {
        content: "・";
        position: absolute;
        color: #cc0000;
        top: 15%;
        left: 1rem;
    }
  }

  /* bnr */
.bnrBox {
    width: 100%;
    padding-top: 5.8%;
    padding-bottom: 5.8%;
    background-color: #F3F2F1;
}
.bnrBoxInner {
    max-width: 1120px;
    width: 77.8%;
    margin: 0 auto;
}
.bnrRBox{
    margin-bottom: 5%;
}
.bnrRBox ul{
    display: inline-flex;
    align-items: center;
    gap: 2.75%;

}
.bnrRBox li{
    display: flex;
    width: 31.5%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.bnrRBox li img{
    border: 0.5px solid #000;
    background: #EBEBEB;
}


.cautionBox{
    color: var(--Cod-Gray, var(--color-grey-7, #111));
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}
.txtIndent {
    text-indent: -1em;
    padding-left: 1em;
}
.txtIndent02 {
    text-indent: -2em;
    padding-left: 2em;
}
.pl1em{
    padding-left: 1em;
}
.cautionBlock{
    max-width: 1120px;
    width: 70%;
    margin: 0 auto;
    padding: 1.5% 3% 1.5%;
    border: 2px solid #cc0000;
    background-color: #ffffff;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.75;
}
.txtLink{
    text-decoration: underline;
}
@media screen and (max-width: 767px){
    .bnrBox {
        width: 100%;
        padding-top: 5.8%;
        padding-bottom: 5.8%;
        background-color: #F3F2F1;
    }
    .bnrBoxInner {
        max-width: 768px;
        width: 90%;
        margin: 0 auto;
    }
    .bnrRBox ul{
        display: block;
    }
    .bnrRBox li{
        display: block;
        width: 100%;
        margin-bottom: 5%;
    }
    .cautionBlock{
        width: 90%;
        margin: 0 auto;
        padding: 3% 3% 3%;
        border: 2px solid #cc0000;
        background-color: #ffffff;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 1.75;
    }
}

.comingsoon{
    width: 90%;
    height: 90%;
    margin: 0 auto;
    padding: auto;
    text-align: center;
    font-size: 2em;
    line-height: 6;
    vertical-align: middle;
}