/* --------------------
 Front
-------------------- */
.hero {
    background-image: url(../images/pages/front/hero-bg.webp);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 13.8888888889vw 0 0;
}

@media (min-width: 768px) {
    .hero {
        padding: 148px 0 70px;
    }
}

.hero-container {
    margin: 0 auto;
    max-width: calc(322.22222vw + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

.hero__logo {
    margin: 0 0 8.8888888889vw;
    text-align: center;
}

@media (min-width: 768px) {
    .hero__logo {
        margin: 0 0 44px;
    }
}

.hero__logo img {
    width: 63.8888888889vw;
}

@media (min-width: 768px) {
    .hero__logo img {
        width: 504px;
    }
}

.hero__illust {
    margin: 0 0 14.4444444444vw;
    text-align: center;
}

@media (min-width: 768px) {
    .hero__illust {
        margin: 0 0 64px;
    }
}

.hero__illust img {
    width: 41.6666666667vw;
}

@media (min-width: 768px) {
    .hero__illust img {
        width: 224px;
    }
}

.hero__type {
    margin: 0 0 -30.5555555556vw;
}

@media (min-width: 768px) {
    .hero__type {
        margin: 0 0 -84px;
    }
}

.hero__about {
    background-color: var(--color-white);
    margin: 0 calc(var(--c-pad)*-1);
    padding: 39.4444444444vw 8.3333333333vw 15.2777777778vw;
    width: auto;
}

@media (min-width: 768px) {
    .hero__about {
        border-radius: 6px;
        margin: 0 auto;
        max-width: 1100px;
        padding: 102px var(--c-pad) 50px;
        width: 100%;
    }
}

.hero__about__mhlw {
    margin: 0 0 5.5555555556vw;
    text-align: center;
}

@media (min-width: 768px) {
    .hero__about__mhlw {
        margin: 0 0 32px;
    }
}

.hero__about__mhlw a {
    display: block;
    margin: 0 auto 6.6666666667vw;
    padding: 1.1111111111vw 15.5555555556vw 1.1111111111vw 1.1111111111vw;
    position: relative;
    text-decoration: none;
    transform: translateX(4.1666666667vw);
    transition: opacity var(--duration) var(--cubic) 0s;
    width: -webkit-fit-content;
    width: fit-content;
}

@media (min-width: 768px) {
    .hero__about__mhlw a {
        margin: 0 auto 30px;
        padding: 8px 70px 8px 8px;
        transform: translateX(25px);
    }
}

.hero__about__mhlw a:after {
    background-color: var(--color-blue);
    bottom: 0;
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
    display: block;
    height: 3.3333333333vw;
    margin: auto 0;
    pointer-events: none;
    position: absolute;
    right: 2.7777777778vw;
    top: 0;
    transition: transform var(--duration) var(--cubic) 0s;
    width: 2.7777777778vw;
}

@media (min-width: 768px) {
    .hero__about__mhlw a:after {
        height: 14px;
        right: 10px;
        width: 12px;
    }
}

.hero__about__mhlw a img {
    width: 52.7777777778vw;
}

@media (min-width: 768px) {
    .hero__about__mhlw a img {
        width: 228px;
    }
}

.hero__about__mhlw a:focus {
    opacity: 0.65;
}

.hero__about__mhlw a:focus:after {
    transform: translateX(1.3888888889vw);
}

@media (min-width: 768px) {
    .hero__about__mhlw a:focus:after {
        transform: translateX(5px);
    }
}

@media (hover: hover) and (pointer: fine) {
    .hero__about__mhlw a:hover {
        opacity: 0.65;
    }

    .hero__about__mhlw a:hover:after {
        transform: translateX(1.3888888889vw);
    }
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .hero__about__mhlw a:hover:after {
        transform: translateX(5px);
    }
}

.hero__about__mhlw p {
    font-size: var(--fs14);
    line-height: 1.4;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .hero__about__mhlw p {
        font-size: var(--fs18);
    }
}

.hero__about__item-wrapper {
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
}

.hero__about__item {
    margin: 0 0 10vw;
}

@media (min-width: 768px) {
    .hero__about__item {
        margin: 0 0 36px;
    }
}

.hero__about__item:last-child {
    margin-bottom: 0;
}

.hero__about__item__title {
    background-color: #eceff4;
    font-size: var(--fs23);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 3.3333333333vw;
    padding: 3.0555555556vw 5.5555555556vw;
    text-align: center;
}

@media (min-width: 768px) {
    .hero__about__item__title {
        margin: 0 0 16px;
        padding: 11px 20px;
    }
}

@media (min-width: 768px) {
    .hero__about__item__contents {
        padding: 0 6px;
    }
}

.hero__about__item__contents__content p {
    font-size: var(--fs14);
    line-height: 1.57;
    margin: 0;
}

@media (min-width: 768px) {
    .hero__about__item__contents__content p {
        font-size: var(--fs16);
    }
}

.hero__about__item__contents:has(> .hero__about__item__contents__fig) {
    align-items: stretch;
    display: flex;
    flex-flow: column-reverse nowrap;
    gap: 5.5555555556vw;
    justify-content: center;
}

@media (min-width: 768px) {
    .hero__about__item__contents:has(> .hero__about__item__contents__fig) {
        align-items: center;
        display: grid;
        gap: 0;
        grid-gap: 0;
        grid-template-columns: 36% 64%;
    }
}

.hero__about__item__contents__fig {
    text-align: center;
}

.hero__about__item__contents__fig img {
    width: 51.1111111111vw;
}

@media (min-width: 768px) {
    .hero__about__item__contents__fig img {
        width: 184px;
    }
}

.flow {
    background-color: var(--color-light-gray);
    padding: 12.2222222222vw 0 11.1111111111vw;
}

@media (min-width: 768px) {
    .flow {
        padding: 44px 0 60px;
    }
}

.flow-container {
    margin: 0 auto;
    max-width: calc(806px + var(--c-pad)*2);
    padding: 0;
    width: 100%;
}

@media (min-width: 768px) {
    .flow-container {
        padding: 0 var(--c-pad);
    }
}

.flow__title {
    font-size: var(--fs32);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 13.3333333333vw;
    text-align: center;
}

@media (min-width: 768px) {
    .flow__title {
        font-size: var(--fs32);
        margin: 0 0 60px;
    }
}

.flow__item {
    background-color: var(--color-white);
    margin: 0 0 11.1111111111vw;
    padding: 0;
    position: relative;
}

@media (min-width: 768px) {
    .flow__item {
        margin: 0 0 42px;
    }
}

.flow__item:last-child {
    margin-bottom: 0;
}

.flow__item__head {
    background-color: #05a505;
    min-height: 19.4444444444vw;
    padding: 8.8888888889vw 5.5555555556vw 3.8888888889vw;
    position: relative;
}

@media (min-width: 768px) {
    .flow__item__head {
        min-height: 70px;
        padding: 32px 20px 12px;
    }
}

.flow__item__head:has(.flow__item__head__content) {
    padding-bottom: 6.6666666667vw;
}

@media (min-width: 768px) {
    .flow__item__head:has(.flow__item__head__content) {
        padding-bottom: 32px;
    }
}

.flow__item__head__number {
    align-items: center;
    background-color: var(--color-white);
    border: 1.3888888889vw solid #05a505;
    border-radius: 50%;
    color: #05a505;
    display: flex;
    font-size: var(--fs24);
    font-weight: 700;
    height: 12.2222222222vw;
    justify-content: center;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-50%);
    width: 12.2222222222vw;
}

@media (min-width: 768px) {
    .flow__item__head__number {
        border-width: 5px;
        height: 44px;
        width: 44px;
    }
}

.flow__item__head__title {
    color: var(--color-white);
    font-size: var(--fs16);
    font-weight: 400;
    line-height: 1.57;
    margin: 0 0 1.6666666667vw;
    text-align: center;
}

@media (min-width: 768px) {
    .flow__item__head__title {
        margin: 0 0 20px;
    }
}

.flow__item__head__title:last-child {
    margin-bottom: 0;
}

.flow__item__head__title em {
    font-size: var(--fs24);
    font-style: normal;
    font-weight: 700;
}

@media (min-width: 768px) {
    .flow__item__head__title em {
        font-size: var(--fs32);
    }
}

.flow__item__head__content {
    margin: 0 0 3.3333333333vw;
}

@media (min-width: 768px) {
    .flow__item__head__content {
        margin: 0 0 12px;
    }
}

.flow__item__head__content:last-child {
    margin-bottom: 0;
}

.flow__item__head__content p {
    color: var(--color-white);
    font-size: var(--fs16);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .flow__item__head__content p {
        font-size: var(--fs16);
    }
}

.flow__item__head__note p {
    color: var(--color-white);
    font-size: var(--fs12);
    font-weight: 400;
    line-height: 2.1;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .flow__item__head__note p {
        font-size: var(--fs12);
    }
}

@media (max-width: 767px) {
    .flow__item:has(.flow__item__01) .flow__item__head {
        padding-bottom: 6.6666666667vw;
    }
}

.flow__item__01 {
    padding: 7.7777777778vw var(--c-pad) 5vw;
}

@media (min-width: 768px) {
    .flow__item__01 {
        padding: 36px var(--c-pad) 20px;
    }
}

.flow__item__01__fig {
    margin: 0 0 3.3333333333vw;
    text-align: center;
}

@media (min-width: 768px) {
    .flow__item__01__fig {
        margin: 0 0 12px;
    }
}

.flow__item__01__fig img {
    width: 83.3333333333vw;
}

@media (min-width: 768px) {
    .flow__item__01__fig img {
        width: 340px;
    }
}

.flow__item__01__content {
    margin: 0 -2.7777777778vw 2.2222222222vw;
}

@media (min-width: 768px) {
    .flow__item__01__content {
        margin: 0 0 8px;
    }
}

.flow__item__01__content p {
    font-size: var(--fs14);
    line-height: 1.57;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .flow__item__01__content p {
        font-size: var(--fs16);
    }
}

.flow__item__01__list {
    display: grid;
    gap: 6.6666666667vw;
    grid-gap: 6.6666666667vw;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    max-width: 130.5555555556vw;
    width: 100%;
}

@media (min-width: 768px) {
    .flow__item__01__list {
        gap: 34px;
        max-width: 470px;
    }
}

.flow__item__01__list__line__title {
    align-items: center;
    background-color: #e5e5e5;
    border-radius: 1.6666666667vw;
    display: flex;
    font-size: var(--fs10);
    height: 8.8888888889vw;
    justify-content: center;
    line-height: 1.2;
    margin: 0 0 2.7777777778vw;
    padding: 0;
    width: 100%;
}

@media (min-width: 768px) {
    .flow__item__01__list__line__title {
        border-radius: 6px;
        font-size: var(--fs14);
        height: 48px;
        margin: 0 0 10px;
    }
}

.flow__item__01__list__line__title span {
    display: block;
    position: relative;
}

.flow__item__01__list__line__title span:before {
    background-image: url(../images/icons/icon-line.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 1.1111111111vw;
    bottom: 0;
    content: "";
    display: block;
    height: 3.8888888889vw;
    left: -6.6666666667vw;
    margin: auto 0;
    position: absolute;
    top: 0;
    width: 3.8888888889vw;
}

@media (min-width: 768px) {
    .flow__item__01__list__line__title span:before {
        border-radius: 4px;
        height: 20px;
        left: -38px;
        width: 20px;
    }
}

.flow__item__01__list__line__title span:after {
    background-color: var(--color-black);
    bottom: 0;
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
    display: block;
    height: 1.1111111111vw;
    margin: auto 0;
    position: absolute;
    right: -2.7777777778vw;
    top: 0;
    width: 0.8333333333vw;
}

@media (min-width: 768px) {
    .flow__item__01__list__line__title span:after {
        height: 6px;
        right: -18px;
        width: 5px;
    }
}

.flow__item__01__list__line__fig {
    text-align: center;
}

.flow__item__01__list__line__fig img {
    width: 15.5555555556vw;
}

@media (min-width: 768px) {
    .flow__item__01__list__line__fig img {
        width: 80px;
    }
}

.flow__item__01__list__email__title {
    align-items: center;
    background-color: #e5e5e5;
    border-radius: 1.6666666667vw;
    display: flex;
    font-size: var(--fs10);
    height: 8.8888888889vw;
    justify-content: center;
    line-height: 1.2;
    margin: 0 0 2.7777777778vw;
    padding: 0;
    width: 100%;
}

@media (min-width: 768px) {
    .flow__item__01__list__email__title {
        border-radius: 6px;
        font-size: var(--fs14);
        height: 48px;
        margin: 0 0 10px;
    }
}

.flow__item__01__list__email__title span {
    display: block;
    position: relative;
}

.flow__item__01__list__email__title span:before {
    background-color: #8eb5ef;
    border-radius: 1.1111111111vw;
    bottom: 0;
    content: "";
    display: block;
    height: 3vw;
    left: -6.1111111111vw;
    margin: auto 0;
    -webkit-mask-image: url(../images/icons/icon-white-email.svg);
    mask-image: url(../images/icons/icon-white-email.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 0;
    width: 5vw;
}

@media (min-width: 768px) {
    .flow__item__01__list__email__title span:before {
        border-radius: 4px;
        height: 16px;
        left: -32px;
        width: 22px;
    }
}

.flow__item__01__list__email__title span:after {
    background-color: var(--color-black);
    bottom: 0;
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
    display: block;
    height: 1.1111111111vw;
    margin: auto 0;
    position: absolute;
    right: -1.6666666667vw;
    top: 0;
    width: 0.8333333333vw;
}

@media (min-width: 768px) {
    .flow__item__01__list__email__title span:after {
        height: 6px;
        right: -18px;
        width: 5px;
    }
}

.flow__item__01__list__email__fig {
    margin: 0 0 4.4444444444vw;
    text-align: center;
}

@media (min-width: 768px) {
    .flow__item__01__list__email__fig {
        margin: 0 0 12px;
    }
}

.flow__item__01__list__email__fig img {
    border-radius: 2.7777777778vw;
    box-shadow: 0.8333333333vw 0.8333333333vw 0.5555555556vw rgba(var(--color-black-rgb), 0.1);
    width: 35vw;
}

@media (min-width: 768px) {
    .flow__item__01__list__email__fig img {
        border-radius: 10px;
        box-shadow: 3px 3px 2px rgba(var(--color-black-rgb), 0.1);
        width: 169px;
    }
}

.flow__item__01__list__email__content {
    margin: 0 auto;
    max-width: 37.2222222222vw;
}

@media (min-width: 768px) {
    .flow__item__01__list__email__content {
        max-width: 160px;
    }
}

.flow__item__01__list__email__content p {
    font-size: var(--fs10);
    line-height: 1.17;
    margin: 0;
}

@media (min-width: 768px) {
    .flow__item__01__list__email__content p {
        font-size: var(--fs12);
        line-height: 1.43;
    }
}

.flow__item__02 {
    padding: 4.4444444444vw 2.7777777778vw 3.3333333333vw;
}

@media (min-width: 768px) {
    .flow__item__02 {
        padding: 16px var(--c-pad) 18px;
    }
}

.flow__item__02__fig {
    margin: 0 0 3.3333333333vw;
    text-align: center;
}

@media (min-width: 768px) {
    .flow__item__02__fig {
        margin: 0 0 12px;
    }
}

.flow__item__02__fig img {
    box-shadow: 1.1111111111vw 1.1111111111vw 0.5555555556vw rgba(var(--color-black-rgb), 0.1);
    width: 86.1111111111vw;
}

@media (min-width: 768px) {
    .flow__item__02__fig img {
        box-shadow: 4px 4px 2px rgba(var(--color-black-rgb), 0.1);
        width: 415px;
    }
}

.flow__item__02__content p {
    font-size: var(--fs14);
    line-height: 1.57;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .flow__item__02__content p {
        font-size: var(--fs16);
    }
}

.flow__item__03__item {
    padding: 5.5555555556vw var(--c-pad);
}

@media (min-width: 768px) {
    .flow__item__03__item {
        padding: 30px var(--c-pad);
    }
}

.flow__item__03__item:nth-child(even) {
    background-color: var(--color-nord-gray);
}

.flow__item__03__item__content {
    margin: 0 0 6.6666666667vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__content {
        margin: 0 0 24px;
    }
}

.flow__item__03__item__content p {
    font-size: var(--fs14);
    line-height: 1.57;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .flow__item__03__item__content p {
        font-size: var(--fs16);
    }
}

.flow__item__03__item:has(.flow__item__03__item__content) {
    padding-top: 5.5555555556vw;
}

@media (min-width: 768px) {
    .flow__item__03__item:has(.flow__item__03__item__content) {
        padding-top: 20px;
    }
}

.flow__item__03__item__list {
    margin: 0 auto;
}

@media (min-width: 768px) {
    .flow__item__03__item__list {
        max-width: 645px;
    }
}

.flow__item__03__item__list__title {
    align-items: center;
    background-color: #e0e4ec;
    border: 0.2777777778vw solid #e0e4ec;
    border-radius: 1.6666666667vw 1.6666666667vw 0 0;
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs16);
    font-weight: 400;
    height: 13.8888888889vw;
    justify-content: center;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__title {
        border-radius: 6px 6px 0 0;
        border-width: 1px;
        height: 50px;
    }
}

.flow__item__03__item__list__main {
    background-color: var(--color-white);
    border: 0.2777777778vw solid #e0e4ec;
    border-radius: 0 0 1.6666666667vw 1.6666666667vw;
    padding: 5.5555555556vw 0;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main {
        border-radius: 0 0 6px 6px;
        border-width: 1px;
        padding: 30px 0;
    }
}

.flow__item__03__item__list__main__item {
    margin: 0 0 6.6666666667vw;
    padding: 0 0 6.6666666667vw;
    position: relative;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item {
        display: grid;
        grid-template-columns: 160px 1fr;
        margin: 0 0 24px;
        padding: 0;
    }
}

.flow__item__03__item__list__main__item:after {
    background-color: #e0e4ec;
    bottom: 0;
    content: "";
    display: block;
    height: 0.2777777778vw;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 70vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item:after {
        display: none;
    }
}

.flow__item__03__item__list__main__item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.flow__item__03__item__list__main__item:last-child:after {
    display: none;
}

.flow__item__03__item__list__main__item__title {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs16);
    font-weight: 400;
    gap: 3.3333333333vw;
    justify-content: center;
    line-height: 1.2;
    margin: 0 0 4.4444444444vw;
    padding: 0;
    position: relative;
    text-align: center;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__title {
        gap: 0;
        height: 44px;
        margin: 0;
    }
}

.flow__item__03__item__list__main__item__title:after {
    background-color: #e0e4ec;
    bottom: auto;
    content: "";
    display: none;
    height: 44px;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__title:after {
        display: block;
    }
}

.flow__item__03__item__list__main__item__title span {
    display: block;
}

.flow__item__03__item__list__main__item__title em {
    background-color: var(--color-nord-gray);
    border-radius: 2.7777777778vw;
    display: block;
    font-size: var(--fs12);
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    min-width: 0px;
    padding: 0.55em 1.15em;
    text-align: center;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__title em {
        display: none;
    }
}

.flow__item__03__item__list__main__item__contents {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    gap: 3.3333333333vw;
    justify-content: center;
    padding: 0 6.6666666667vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents {
        align-items: flex-start;
        gap: 12px;
        justify-content: flex-start;
        padding: 8px 20px 4px 36px;
    }
}

.flow__item__03__item__list__main__item__contents em {
    background-color: var(--color-nord-gray);
    border-radius: 10px;
    display: none;
    flex: 0 0 auto;
    font-size: var(--fs12);
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    min-width: 0px;
    padding: 0.55em 1.15em;
    text-align: center;
    transform: translateY(4px);
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents em {
        display: block;
    }
}

.flow__item__03__item__list__main__item__contents ul {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-flow: row nowrap;
    gap: 3.3333333333vw;
    justify-content: center;
    list-style: none;
    margin: 0;
    min-width: 0px;
    padding: 0;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents ul {
        gap: 20px;
        justify-content: flex-start;
    }
}

.flow__item__03__item__list__main__item__contents ul > li {
    font-size: var(--fs16);
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

.flow__item__03__item__list__main__item__contents ul > li img.--visa {
    width: 10.6666666667vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents ul > li img.--visa {
        width: 48px;
    }
}

.flow__item__03__item__list__main__item__contents ul > li img.--master {
    width: 10vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents ul > li img.--master {
        width: 45px;
    }
}

.flow__item__03__item__list__main__item__contents ul > li img.--jcb {
    width: 8.8888888889vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents ul > li img.--jcb {
        width: 40px;
    }
}

.flow__item__03__item__list__main__item__contents ul > li img.--amex {
    width: 7.1111111111vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents ul > li img.--amex {
        width: 32px;
    }
}

.flow__item__03__item__list__main__item__contents ul > li img.--diners {
    width: 9.3333333333vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents ul > li img.--diners {
        width: 42px;
    }
}

.flow__item__03__item__list__main__item__contents ul > li img.--familymart {
    width: 19.5555555556vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents ul > li img.--familymart {
        width: 88px;
    }
}

.flow__item__03__item__list__main__item__contents ul > li img.--lawson {
    width: 16vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents ul > li img.--lawson {
        width: 72px;
    }
}

.flow__item__03__item__list__main__item__contents ul > li img.--dailyyamazaki {
    width: 10.6666666667vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents ul > li img.--dailyyamazaki {
        width: 48px;
    }
}

.flow__item__03__item__list__main__item__contents ul > li img.--seicomart {
    width: 15.7777777778vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents ul > li img.--seicomart {
        width: 71px;
    }
}

.flow__item__03__item__list__main__item__contents ul > li img.--ministop {
    width: 8vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents ul > li img.--ministop {
        width: 36px;
    }
}

.flow__item__03__item__list__main__item__contents ul > li img.--web-payment {
    width: 9.7777777778vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents ul > li img.--web-payment {
        width: 44px;
    }
}

.flow__item__03__item__list__main__item__contents ul > li img.--paypay {
    width: 9.7777777778vw;
}

@media (min-width: 768px) {
    .flow__item__03__item__list__main__item__contents ul > li img.--paypay {
        width: 44px;
    }
}

.plan {
    padding: 5.5555555556vw 0 11.6666666667vw;
}

@media (min-width: 768px) {
    .plan {
        padding: 46px 0 58px;
    }
}

.plan-container {
    margin: 0 auto;
    max-width: calc(223.88889vw + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

@media (min-width: 768px) {
    .plan-container {
        max-width: calc(806px + var(--c-pad)*2);
        padding: 0 var(--c-pad);
    }
}

.plan__title {
    font-size: var(--fs32);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 7.7777777778vw;
    text-align: center;
}

@media (min-width: 768px) {
    .plan__title {
        font-size: var(--fs32);
        margin: 0 0 36px;
    }
}

.plan__list {
    display: grid;
    gap: 8.3333333333vw;
    grid-gap: 8.3333333333vw;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .plan__list {
        gap: 30px;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .plan__list {
        gap: 48px;
    }
}

.plan__list__item {
    align-items: stretch;
    background-color: var(--color-white);
    border-radius: 2.7777777778vw;
    display: flex;
    flex-flow: column nowrap;
    gap: 6.6666666667vw;
    justify-content: space-between;
    min-width: 0px;
    padding: 11.1111111111vw 8.3333333333vw 8.3333333333vw;
}

@media (min-width: 768px) {
    .plan__list__item {
        border-radius: 10px;
        gap: 24px;
        padding: 52px 30px 30px;
    }
}

@media (min-width: 992px) {
    .plan__list__item {
        padding: 52px 40px 30px;
    }
}

.plan__list__item__logo {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    height: 16.6666666667vw;
    justify-content: center;
    margin: 0 -2.7777777778vw 10vw;
    text-align: center;
    width: auto;
}

@media (min-width: 768px) {
    .plan__list__item__logo {
        height: 70px;
        margin: 0 0 44px;
    }
}

.plan__list__item__logo img.--uberonion {
    width: 42.5vw;
}

@media (min-width: 768px) {
    .plan__list__item__logo img.--uberonion {
        width: 180px;
    }
}

.plan__list__item__logo img.--actors {
    width: 16.1111111111vw;
}

@media (min-width: 768px) {
    .plan__list__item__logo img.--actors {
        width: 68px;
    }
}

.plan__list__item__name {
    display: block;
    font-size: var(--fs20);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 10vw;
    text-align: center;
}

@media (min-width: 768px) {
    .plan__list__item__name {
        font-size: var(--fs22);
        margin: 0 0 40px;
    }
}

@media (min-width: 992px) {
    .plan__list__item__name {
        font-size: var(--fs24);
    }
}

.plan__list__item__title {
    align-items: center;
    background-color: var(--color-nord-gray);
    border-radius: 1.6666666667vw;
    display: flex;
    flex-flow: row nowrap;
    font-size: var(--fs11);
    font-weight: 400;
    height: 8.3333333333vw;
    justify-content: center;
    line-height: 1.2;
    margin: 0 auto 3.3333333333vw;
    max-width: 51.3888888889vw;
    text-align: center;
}

@media (min-width: 768px) {
    .plan__list__item__title {
        border-radius: 6px;
        font-size: var(--fs13);
        height: 34px;
        margin: 0 auto 18px;
        max-width: 216px;
    }
}

.plan__list__item__action {
    margin: 0 0 5.5555555556vw;
    text-align: center;
}

@media (min-width: 768px) {
    .plan__list__item__action {
        margin: 0 0 28px;
    }
}

.plan__list__item__action a {
    font-size: var(--fs12);
    line-height: 1.4;
    text-decoration: underline;
    -webkit-text-decoration-color: transparent;
    text-decoration-color: transparent;
    transition: -webkit-text-decoration-color var(--duration) var(--cubic) 0s;
    transition: text-decoration-color var(--duration) var(--cubic) 0s;
    transition: text-decoration-color var(--duration) var(--cubic) 0s, -webkit-text-decoration-color var(--duration) var(--cubic) 0s;
}

@media (min-width: 768px) {
    .plan__list__item__action a {
        font-size: var(--fs14);
    }
}

.plan__list__item__action a:focus {
    -webkit-text-decoration-color: currentColor;
    text-decoration-color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .plan__list__item__action a:hover {
        -webkit-text-decoration-color: currentColor;
        text-decoration-color: currentColor;
    }
}

.plan__list__item__action a.--purple {
    color: #6609ba;
}

.plan__list__item__action a.--red {
    color: #b32222;
}

.plan__list__item__content {
    margin: 0 0 5.5555555556vw;
}

@media (min-width: 768px) {
    .plan__list__item__content {
        margin: 0 0 28px;
    }
}

.plan__list__item__content p {
    font-size: var(--fs14);
    letter-spacing: -0.02em;
    line-height: 1.57;
    margin: 0;
}

@media (min-width: 768px) {
    .plan__list__item__content p {
        font-size: var(--fs16);
    }
}

.plan__list__item__note {
    margin: 0;
}

.plan__list__item__note p {
    font-size: var(--fs10);
    line-height: 1.3;
    margin: 0 0 1em;
}

@media (min-width: 768px) {
    .plan__list__item__note p {
        font-size: var(--fs12);
        line-height: 1.25;
    }
}

.plan__list__item__note p:last-child {
    margin-bottom: 0;
}

.plan__list__item__fig {
    margin: 0 0 5.5555555556vw;
    text-align: center;
}

@media (min-width: 768px) {
    .plan__list__item__fig {
        margin: 0 0 20px;
    }
}

@media (max-width: 767px) {
    .plan__list__item__fig img {
        width: 100%;
    }
}

.plan__list__item__video {
    margin: 0 0 5.5555555556vw;
}

@media (min-width: 768px) {
    .plan__list__item__video {
        margin: 0 0 20px;
    }
}

.plan__list__item__video iframe {
    aspect-ratio: 16/9;
    border: none;
    display: block;
    height: auto;
    margin: 0 auto;
    width: 100%;
}

.plan__list__item__actions {
    display: grid;
    gap: 4.4444444444vw;
    grid-gap: 4.4444444444vw;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    max-width: 86.1111111111vw;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .plan__list__item__actions {
        gap: 16px;
        max-width: 310px;
    }
}

.plan__list__item__actions__item {
    background-color: var(--color-royal-blue);
    border: 0.5555555556vw solid var(--color-white);
    border-radius: 1.6666666667vw;
    box-shadow: 0.8333333333vw 0.8333333333vw 0.5555555556vw rgba(var(--color-black-rgb), 0.15);
    color: var(--color-white);
    display: block;
    font-size: var(--fs15);
    gap: 3.3333333333vw;
    line-height: 1.2;
    padding: 4.4444444444vw 2.2222222222vw;
    text-align: center;
    text-decoration: none;
    transition: opacity var(--duration) var(--cubic) 0s;
}

@media (min-width: 768px) {
    .plan__list__item__actions__item {
        border-radius: 6px;
        border-width: 2px;
        box-shadow: 3px 3px 2px rgba(var(--color-black-rgb), 0.15);
        font-size: var(--fs18);
        gap: 12px;
        padding: 18px 8px;
    }
}

.plan__list__item__actions__item:before {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 8.8888888889vw;
    margin: 0 auto 2.2222222222vw;
    width: 9.4444444444vw;
}

@media (min-width: 768px) {
    .plan__list__item__actions__item:before {
        height: 32px;
        margin: 0 auto 12px;
        width: 34px;
    }
}

.plan__list__item__actions__item--line:before {
    background-image: url(../images/icons/icon-line.svg);
    background-size: 7.7777777778vw 7.7777777778vw;
}

@media (min-width: 768px) {
    .plan__list__item__actions__item--line:before {
        background-size: 32px 32px;
    }
}

.plan__list__item__actions__item--email:before {
    background-image: url(../images/icons/icon-white-email.svg);
    background-size: 8.0555555556vw 5.8333333333vw;
}

@media (min-width: 768px) {
    .plan__list__item__actions__item--email:before {
        background-size: 34px 24px;
    }
}

.plan__list__item__actions__item span {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    min-height: 2lh;
}

.plan__list__item__actions__item:focus {
    opacity: 0.65;
}

@media (hover: hover) and (pointer: fine) {
    .plan__list__item__actions__item:hover {
        opacity: 0.65;
    }
}

.review {
    padding: 0 0 14.4444444444vw;
}

@media (min-width: 768px) {
    .review {
        padding: 0 0 60px;
    }
}

.review-container {
    margin: 0 auto;
    max-width: calc(1072px + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

.review__title {
    font-size: var(--fs32);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 7.7777777778vw;
    text-align: center;
}

@media (min-width: 768px) {
    .review__title {
        font-size: var(--fs32);
        margin: 0 0 36px;
    }
}

.review__item-wrapper {
    display: grid;
    gap: 4.4444444444vw;
    grid-gap: 4.4444444444vw;
    grid-template-columns: 1fr;
    overflow: hidden;
}

@media (min-width: 768px) {
    .review__item-wrapper {
        gap: 24px;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1240px) {
    .review__item-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

.review__item {
    min-width: 0px;
}

.review__item img {
    border-radius: 1.6666666667vw;
    box-shadow: 1.9444444444vw 1.9444444444vw 1.3888888889vw rgba(var(--color-black-rgb), 0.1);
    width: 100%;
}

@media (min-width: 768px) {
    .review__item img {
        border-radius: 6px;
        box-shadow: 7px 7px 5px rgba(var(--color-black-rgb), 0.1);
    }
}

.note {
    background-color: var(--color-light-gray);
    padding: 12.2222222222vw 0 5.5555555556vw;
}

@media (min-width: 768px) {
    .note {
        padding: 52px 0 71px;
    }
}

.note-container {
    margin: 0 auto;
    max-width: calc(1100px + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

.note__item-wrapper {
    display: grid;
    gap: 22.2222222222vw;
    grid-gap: 22.2222222222vw;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .note__item-wrapper {
        gap: 50px;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .note__item-wrapper {
        gap: 70px;
    }
}

.note__item {
    position: relative;
}

.note__item:after {
    background-color: var(--color-white);
    bottom: -11.1111111111vw;
    content: "";
    display: block;
    height: 0.2777777778vw;
    left: 0;
    position: absolute;
    right: 0;
    top: auto;
    width: auto;
}

@media (min-width: 768px) {
    .note__item:after {
        bottom: 0;
        height: auto;
        left: auto;
        right: -25px;
        top: 0;
        width: 1px;
    }
}

@media (min-width: 992px) {
    .note__item:after {
        right: -35px;
    }
}

.note__item:last-child:after {
    display: none;
}

.note__item-inner {
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .note__item-inner {
        max-width: 460px;
    }
}

.note__item__title {
    font-size: var(--fs32);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8.8888888889vw;
    text-align: center;
}

@media (min-width: 768px) {
    .note__item__title {
        font-size: var(--fs32);
        margin: 0 0 44px;
    }
}

.note__item__content {
    margin: 0 0 8.3333333333vw;
}

@media (min-width: 768px) {
    .note__item__content {
        margin: 0 0 30px;
    }
}

.note__item__content:last-child {
    margin-bottom: 0;
}

.note__item__content p {
    font-size: var(--fs14);
    line-height: 1.57;
    margin: 0;
}

@media (min-width: 768px) {
    .note__item__content p {
        font-size: var(--fs16);
        text-align: center;
    }
}

.note__item__content p em {
    font-size: var(--fs18);
    font-style: normal;
    font-weight: inherit;
    line-height: 1.38;
}

@media (max-width: 767px) {
    .note__item__content p em {
        display: block;
        text-align: center;
    }
}

@media (min-width: 768px) {
    .note__item__content p em {
        font-size: var(--fs19);
    }
}

@media (min-width: 992px) {
    .note__item__content p em {
        font-size: var(--fs24);
    }
}

.note__item__en {
    margin: 0 auto;
    max-width: 100vw;
}

@media (min-width: 768px) {
    .note__item__en {
        max-width: 360px;
    }
}

.note__item__en p {
    font-size: var(--fs12);
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: 1.43;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .note__item__en p {
        font-size: var(--fs12);
    }
}