/*--------------------*/
/* base
/*--------------------*/

li {
    list-style-type: none;
}

img {
    width: 100%;
}

a {
    text-decoration: none;
    color: #000;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",
        sans-serif;
    background: url(../img/recruit/recruit_bg.png) 0% 0% / contain;
    background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
    html,
    body {
        background: none;
    }
}

@font-face {
    /* ① ここにfont-familyで指定したい名前を書く*/
    font-family: "HarenosoraMincho";
    /* フォントが置かれているパスを書く */
    src: url("/assets/font/Harenosora.otf") format("truetype");
}

@font-face {
    /* ① ここにfont-familyで指定したい名前を書く*/
    font-family: "athelas";
    /* フォントが置かれているパスを書く */
    src: url("/assets/font/Athelas-Bold.ttf") format("truetype");
}

@font-face {
    /* ① ここにfont-familyで指定したい名前を書く*/
    font-family: "Minion";
    /* フォントが置かれているパスを書く */
    src: url("/assets/font/Minion\ Pro\ Cond.otf") format("truetype");
}

.mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    .mobile {
        display: block;
    }
}

/* 基本設定
/*--------------------*/

html {
    font-size: 62.5%;
}

@media screen and (max-width: 428px) {
    .similarity__main--img {
        margin-top: -6rem;
    }
}

@media screen and (max-width: 428px) {
    .about::after {
        left: -3rem;
    }
}

/* service
/*--------------------*/

.value {
    margin-top: 11.3rem;
    z-index: 1;
}

@media screen and (max-width: 768px) {
    .value {
        margin-top: 5rem;
    }
}

@media screen and (max-width: 428px) {
    .value {
        margin-top: 1rem;
        padding-top: 2rem;
    }
}

.value .util__title {
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 768px) {
    .value .util__title {
        padding-top: 0rem;
    }
}

.value::after {
    content: "RESTART";
    display: inline-block;
    position: absolute;
    top: -7rem;
    left: 22vw;
    color: #e6e1d3;
    font-size: 11.5vw;
    font-family: "cochin", serif;
    font-weight: 500;
    z-index: -1;
}

@media screen and (max-width: 768px) {
    .value::after {
        content: "RESTART";
        display: inline-block;
        position: absolute;
        top: -2rem;
        left: 22vw;
        color: #e6e1d3;
        font-size: 11.5vw;
        font-family: "cochin", serif;
        z-index: -1;
        padding-top: 1rem;
    }

    .value .util__title {
        display: block;
    }
}

@media screen and (max-width: 428px) {
    .value::after {
        content: "RESTART";
        display: inline-block;
        position: absolute;
        top: -1rem;
        left: 10vw;
        color: #e6e1d3;
        font-size: 16vw;
        font-family: "cochin", serif;
        z-index: -1;
    }
}

.value__content {
    background: url(../img/service/restart-bg.png) no-repeat;
    max-width: 84.5%;
    width: 100%;
    margin-top: 3rem;
    position: relative;
    background-size: cover;
    background-position: 50% 40%;
}

@media screen and (max-width: 768px) {
    .value__content {
        margin-top: 1rem;
        z-index: 5;
    }
}

@media screen and (max-width: 428px) {
    .value__content {
        margin-top: 0.5rem;
        max-width: 93%;
        width: 100%;
    }
}

.value__content--text {
    position: relative;
    z-index: 2;
    margin-bottom: -5rem;
}

.value__list {
    padding-bottom: 5rem;
}

@media screen and (max-width: 428px) {
    .value__list {
        padding-bottom: 2rem;
    }
}

.value__logo {
    z-index: -1;
}

.value-plan {
    display: none;
}

@media screen and (max-width: 768px) {
    .value-plan {
        display: block;
        max-width: 80vw;
        width: 100%;
        margin: 4rem auto 0;
    }

    .value__sp--text {
        display: block;
        font-size: 3.2vw;
        font-family: "ヒラギノ丸ゴシック Pro";
        text-align: left;
        line-height: 2.5;
        margin-top: 0;
        letter-spacing: -0.07em;
    }

    .value__btn {
        display: block;
        margin-left: 0;
        margin-top: 4rem;
        padding-bottom: 0;
    }
}

@media screen and (max-width: 428px) {
    .value-plan {
        margin: 2rem auto 0;
    }

    .value__btn {
        margin-top: 2rem;
    }
}

@media screen and (max-width: 1440px) {
    .answer__area {
        padding: 0 0 5rem;
    }
}

@media screen and (max-width: 768px) {
    .answer__area {
        padding: 0 0 2rem;
    }
}

.answer__item::after {
    content: none;
}

.answer {
    margin-top: 17.7rem;
    position: relative;
}

@media screen and (max-width: 1440px) {
    .answer {
        margin-top: 10em;
    }
}

@media screen and (max-width: 768px) {
    .answer {
        margin-top: 11.1rem;
    }
}

@media screen and (max-width: 428px) {
    .answer {
        margin-top: 8rem;
    }
}

.answer .util__title {
    margin-left: 0;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .answer .util__title {
        margin-left: 0;
        text-align: center;
        z-index: 1;
        position: relative;
        font-size: 4.8vw;
    }
}

.e__title {
    position: relative;
    z-index: 5;
}

@media screen and (max-width: 768px) {
    .e__title {
        display: block;
    }
}

.answer .util__title::after {
    content: "ANSWER";
    display: inline-block;
    position: absolute;
    top: -7.5rem;
    left: 50%;
    transform: translate(-50%);
    color: #e6e1d3;
    font-size: 11.5vw;
    font-family: "cochin";
    z-index: -1;
    letter-spacing: 0.1em;
}

@media screen and (max-width: 1440px) {
    .answer .util__title::after {
        top: -6rem;
        letter-spacing: 0;
    }
}

@media screen and (max-width: 768px) {
    .answer .util__title::after {
        content: "ANSWER";
        top: -4.5rem;
        left: 50%;
        transform: translate(-50%);
        font-size: 18vw;
    }
}

@media screen and (max-width: 428px) {
    .answer .util__title::after {
        content: "ANSWER";
        top: -3rem;
        left: 50%;
        transform: translate(-50%);
        font-size: 15vw;
    }
}

.answer__box {
    background: url(../img/service/service-bg.png);
    margin-top: 3rem;
    position: relative;
    z-index: 10;
    padding: 10rem 0 15rem;
    background-size: contain;
}

@media screen and (max-width: 1440px) {
    .answer__box {
        margin-top: 2rem;
        padding: 8rem 0 12rem;
    }
}

@media screen and (max-width: 768px) {
    .answer__box {
        padding: 6rem 5.3vw 7rem;
        margin-top: 1rem;
        background-size: cover;
    }
}

@media screen and (max-width: 428px) {
    .answer__box {
        padding: 4rem 2vw 5rem;
        margin-top: 0.5rem;
    }
}

.answer__item {
    background-color: #fff;
    max-width: 72.72vw;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-top: 7rem;
}

@media screen and (max-width: 1800px) {
    .answer__item {
        padding-top: 5rem;
    }
}

@media screen and (max-width: 1440px) {
    .answer__item {
        padding-top: 4rem;
    }
}

@media screen and (max-width: 768px) {
    .answer__item {
        max-width: 90vw;
        position: relative;
        padding-top: 6rem;
    }
}

@media screen and (max-width: 428px) {
    .answer__item {
        padding-top: 2rem;
    }
}

.answer__item::after {
    content: "A";
    display: inline-block;
    position: absolute;
    top: -55%;
    right: -11%;
    font-size: 40vw;
    font-family: "Cochin";
    color: #f7f7f7;
    opacity: 0.5;
}

@media screen and (max-width: 1440px) {
    .answer__item::after {
        top: -30%;
        right: -11%;
    }
}

@media screen and (max-width: 768px) {
    .answer__item::after {
        content: none;
    }
}

@media screen and (max-width: 428px) {
    .answer__item::after {
        content: none;
    }
}

.answer__item:not(:first-child) {
    margin-top: 10rem;
}

@media screen and (max-width: 768px) {
    .answer__item:not(:first-child) {
        margin-top: 6rem;
    }
}

@media screen and (max-width: 428px) {
    .answer__item:not(:first-child) {
        margin-top: 4rem;
    }
}

.answer__logo {
    font-size: 5.5vw;
    font-family: "STIX Two Text", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
    margin-left: 1.6vw;
    position: absolute;
    top: -3rem;
}

@media screen and (max-width: 1440px) {
    .answer__logo {
        top: -2rem;
    }
}

@media screen and (max-width: 768px) {
    .answer__logo {
        font-size: 10.6vw;
        margin-left: 1.4rem;
        top: -2rem;
    }
}

@media screen and (max-width: 428px) {
    .answer__logo {
        top: -1rem;
    }
}

.answer__logo span {
    color: #dd355c;
}

.answer__title {
    font-size: 1.8vw;
    background-color: #3a3a3a;
    color: #fff;
    padding: 2.8rem 0 2.8rem 4vw;
    margin: 1rem 4rem 0 -2vw;
    font-family: "Noto Serif JP", serif;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 1440px) {
    .answer__title {
        padding: 2rem 0 2rem 4vw;
        margin: 2rem 4rem 0 -2vw;
    }
}

@media screen and (max-width: 768px) {
    .answer__title {
        font-size: 3.7vw;
        padding: 1.9rem 0 1.5rem 5.2vw;
        margin: 1rem 1rem 0 -2.6vw;
    }
}

@media screen and (max-width: 428px) {
    .answer__title {
        padding: 1rem 0 1rem 5.2vw;
    }
}

.answer__area {
    display: flex;
    margin-top: 5.7rem;
    padding: 0 0 10rem;
}

@media screen and (max-width: 1440px) {
    .answer__area {
        margin-top: 3rem;
        padding: 0 0 7rem;
    }
}

@media screen and (max-width: 768px) {
    .answer__area {
        margin-top: 4.7rem;
        padding-bottom: 0;
    }
}

@media screen and (max-width: 428px) {
    .answer__area {
        margin-top: 2rem;
    }
}

/* price
/*--------------------*/

.price {
    margin: 16rem auto 0;
    padding: 0 2vw;
    max-width: 76vw;
    width: 100%;
    position: relative;
}

@media screen and (max-width: 768px) {
    .price {
        margin-top: 8rem;
        max-width: inherit;
        padding: 0;
    }
}

@media screen and (max-width: 428px) {
    .price {
        margin-top: 4rem;
    }

    .price .common__title {
        font-size: 5vw;
    }
}

.price::after {
    content: "";
    background: url(../img/recruit/recruit_object.png);
    display: inline-block;
    max-width: 25vw;
    width: 100%;
    height: 70rem;
    background-size: cover;
    position: absolute;
    top: -5%;
    right: -14%;
    z-index: -1;
}

@media screen and (max-width: 1440px) {
    .price::after {
        max-width: 25vw;
        width: 100%;
        height: 50rem;
        }
}

@media screen and (max-width: 768px) {
    .price::after {
        background: inherit;
        position: inherit;
        content: none;
    }
}

.price__text {
    text-align: center;
    margin-top: 4rem;
    font-size: 2rem;
    font-family: "Noto Serif JP", serif;
}

@media screen and (max-width: 428px) {
    .price__text {
        margin-top: 2rem;
        font-size: 1.1rem;
    }
}

.price__wrapper {
    margin-top: 3rem;
}

@media screen and (max-width: 768px) {
    .price__wrapper {
        overflow-x: scroll;
        width: 100%;
        margin-top: 4rem;
    }
}

@media screen and (max-width: 428px) {
    .price__wrapper {
        margin-top: 1rem;
    }
}

table {
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
    table-layout: fixed;
}

thead {
    border: 1px solid #bcbcbc;
}

.plan__thead {
    border: none;
}

.plan__tag {
    border: none;
}

.plan__tag td {
    border: 1px solid #fff;
}

.price__tab {
    line-height: 1.5;
    padding: 2.2rem 0;
    border-top-right-radius: 2rem;
    border-top-left-radius: 2rem;
    position: relative;
}

.price__tab a {
    color: #fff;
    cursor: pointer;
}

.price__tab a:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: transparent;
}

@media screen and (max-width: 1440px) {
    .price__tab {
        padding: 1.2rem 0;
    }
}

@media screen and (max-width: 428px) {
    .price__tab {
        line-height: 1.2;
        padding: 1.8rem 1rem;
        border-top-right-radius: 1rem;
        border-top-left-radius: 1rem;
    }
}

.plan2 .price__tab {
    background: url(../img/service/plan-green.png) no-repeat;
    background-size: cover;
}

.plan3 .price__tab {
    background: url(../img/service/plan-orenge.png) no-repeat;
    background-size: cover;
}

.plan4 .price__tab {
    background: url(../img/service/plan-blue.png) no-repeat;
    background-size: cover;
}

@media screen and (max-width: 428px) {
    .plan4 .price__tab {
        padding: 1.8rem 2rem;
    }
}

th {
    border: 1px solid #bcbcbc;
    vertical-align: middle;
}

.white-en {
    background-color: #fff;
}

.navy {
    background-color: #f5f6f6;
}

.price__red {
    color: #a20d13;
}

.red tr {
    background: url(../img/service/plan-red.png) no-repeat;
    background-size: cover;
    height: 10rem;
    color: #fff;
    font-size: 1.2vw;
}

@media screen and (max-width: 1440px) {
    .red tr {
        height: 6rem;
        font-size: 2.2rem;
    }
}

.red .plan1 {
    padding: 4rem 0 3.2rem;
}

@media screen and (max-width: 1440px) {
    .red .plan1 {
        padding: 2.5rem 0 2.2rem;
    }
}

@media screen and (max-width: 428px) {
    .red .plan1 {
        padding: 2rem 0 2rem;
    }
}

.red .plan2,
.red .plan3,
.red .plan4 {
    color: #ffea00;
    text-align: center;
}

.plan__ttl {
    width: 13%;
    font-size: 0.9vw;
    color: #fff;
    background-color: #fff;
    letter-spacing: -0.05em;
}

@media screen and (max-width: 1440px) {
    .plan__ttl {
        width: 19rem;
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 768px) {
    .plan__ttl {
        width: 10%;
        font-size: 1.6rem;
        white-space: nowrap;
        padding: 0 2rem;
    }

    .plan__ttl span {
        display: none;
    }
}

@media screen and (max-width: 428px) {
    .plan__ttl {
        width: 10%;
        padding: 0 0.5rem;
    }
}

.plan__ttl span {
    padding: 1rem 1.5vw;
    font-family: "ヒラギノ角ゴ ProN";
    border-radius: 3rem;
}

.blue span {
    background-color: #397ab3;
    font-size: 0.7vw;
}

@media screen and (max-width: 768px) {
    .blue {
        background-color: #397ab3;
    }
}

.green span {
    background-color: #3b9a65;
    font-size: 0.7vw;
}

@media screen and (max-width: 768px) {
    .green {
        background-color: #3b9a65;
    }
}

.yellow span {
    background-color: #e7ac27;
    font-size: 0.7vw;
}

@media screen and (max-width: 768px) {
    .yellow {
        background-color: #e7ac27;
    }
}

.purple span {
    background-color: #9c638b;
    font-size: 0.6vw;
}

@media screen and (max-width: 768px) {
    .purple {
        background-color: #9c638b;
    }
}

.brown span {
    background-color: #b78d6f;
    font-size: 0.8vw;
}

@media screen and (max-width: 768px) {
    .brown {
        background-color: #b78d6f;
    }
}

.red2 span {
    background-color: #c54f5d;
    font-size: 0.8vw;
}

@media screen and (max-width: 768px) {
    .red2 {
        background-color: #c54f5d;
    }
}

.white tr {
    background-color: #fffcf1;
}

table td {
    text-align: center;
}

.plan1 {
    height: 8rem;
    font-size: 1.2vw;
    font-weight: bold;
}

@media screen and (max-width: 1440px) {
    .plan1 {
        height: 6rem;
        font-size: 2.2rem;
    }
}

@media screen and (max-width: 428px) {
    .plan1 {
        height: 5rem;
        font-size: 1.6rem;
        font-weight: 500;
    }
}

.plan1_i {
    width: 33.6%;
    height: 7rem;
    padding: 3.1rem 0 1.5rem 2rem;
    font-size: 0.9vw;
    text-align: left;
}

@media screen and (max-width: 1440px) {
    .plan1_i {
        width: 48rem;
        height: 5rem;
        padding: 2.5rem 0 1.5rem 2rem;
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 768px) {
    .plan1_i {
        width: 30%;
        padding: 2.5rem 2rem 1.5rem;
        font-size: 1.6rem;
        white-space: nowrap;
    }
}

@media screen and (max-width: 428px) {
    .plan1_i {
        width: 18%;
        padding: 2rem 1rem 2rem;
        font-size: 1.2rem;
        letter-spacing: -0.05em;
    }
}

.plan__en {
    color: #e23a35;
    font-size: 0.9vw;
    border-left: 1px solid #bcbcbc;
}

@media screen and (max-width: 1440px) {
    .plan__en {
        font-size: 1.8rem;
    }
}

.plan2,
.plan3,
.plan4 {
    width: 17.7%;
    color: #333;
    font-size: 1.2vw;
}

@media screen and (max-width: 1440px) {
    .plan2,
    .plan3,
    .plan4 {
        width: 25rem;
        font-size: 1.7rem;
    }
}

@media screen and (max-width: 768px) {
    .plan2,
    .plan3,
    .plan4 {
        white-space: nowrap;
    }
}

@media screen and (max-width: 428px) {
    .plan2,
    .plan3,
    .plan4 {
        font-size: 1.4rem;
    }
}

.price__sub {
    color: #333;
    font-weight: bold;
    text-align: center;
}

/* plan
/*--------------------*/

.plan {
    margin-top: 14rem;
}

@media screen and (max-width: 768px) {
    .plan {
        margin-top: 11rem;
    }
}

@media screen and (max-width: 428px) {
    .plan {
        margin-top: 8rem;
    }
}

.answer__area {
    display: block;
}

.answer .util__title {
    position: relative;
}

.answer .util__title::after {
    content: "PLAN";
    display: inline-block;
    position: absolute;
    top: -7.5rem;
    left: 50%;
    transform: translate(-50%);
    color: #e6e1d3;
    font-size: 11.5vw;
    font-family: "cochin", serif;
    font-weight: 500;
    z-index: -1;
    letter-spacing: 0.1em;
}

@media screen and (max-width: 768px) {
    .answer .util__title::after {
        top: -4rem;
        font-size: 19vw;
        letter-spacing: 0;
    }
}

@media screen and (max-width: 428px) {
    .answer .util__title::after {
        top: -2rem;
    }
}

.plan__text {
    font-size: 1.5vw;
    text-align: center;
    font-family: "ヒラギノ角ゴ ProN";
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .plan__text {
        font-size: 3.2vw;
        position: relative;
        z-index: 5;
    }
}

.red01 {
    font-size: 1.8vw;
    color: #dd355c;
    font-family: "Noto Serif JP", serif;
    font-style: normal;
    margin-left: 1rem;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .red01 {
        font-size: 4.2vw;
    }

    .none {
        display: none;
    }
}

.plan__list {
    max-width: 72vw;
    width: 100%;
    margin: 4rem auto 0;
    padding: 0 2vw;
    display: flex;
    gap: 3vw;
}

@media screen and (max-width: 1440px) {
    .plan__list {
        margin: 3rem auto 0;
    }
}

@media screen and (max-width: 768px) {
    .plan__list {
        display: none;
    }
}

.plan__item {
    padding: 3.7rem 0;
    max-width: 20vw;
    width: 100%;
    border: 2px solid #f8a62f;
    border-radius: 1rem;
    font-size: 0.9vw;
    text-align: center;
}

@media screen and (max-width: 1440px) {
    .plan__item {
        padding: 2.8rem 0;
    }
}

@media screen and (max-width: 768px) {
    .plan__item {
        max-width: 40rem;
        font-size: 2.9vw;
    }
}

.plan__img {
    max-width: 12.9vw;
    width: 100%;
    margin: 4.3rem auto 0;
}

@media screen and (max-width: 1440px) {
    .plan__img {
        margin: 3rem auto 0;
    }
}

@media screen and (max-width: 768px) {
    .plan__img {
        display: none;
    }
}

.plan__arrow--text {
    font-size: 1.5vw;
    text-align: center;
    font-family: "ヒラギノ角ゴ ProN";
    font-weight: bold;
    margin-top: 4.2rem;
}

@media screen and (max-width: 1440px) {
    .plan__arrow--text {
        margin-top: 3rem;
    }
}

@media screen and (max-width: 768px) {
    .plan__arrow--text {
        font-size: 3.2vw;
        margin-top: 0rem;
    }
}

@media screen and (max-width: 428px) {
    .plan__arrow--text {
        margin-top: 5rem;
    }
}

.marker {
    background: linear-gradient(transparent 60%, #f7e923 20%);
    border-bottom: 1rem solid #f7e923;
}

.plan__wrap {
    display: flex;
    max-width: 62.9vw;
    width: 100%;
    margin: 3rem auto 0;
}

@media screen and (max-width: 768px) {
    .plan__wrap {
        max-width: 82vw;
        width: 100%;
        margin: 3rem auto 0;
    }
}

.plan__area--list {
    margin-top: 2rem;
}

@media screen and (max-width: 768px) {
    .plan__area--list {
        display: none;
    }
}

.plan__area--item {
    display: flex;
    align-items: center;
}

.plan__area--item:not(:first-child) {
    margin-top: 4rem;
}

@media screen and (max-width: 1440px) {
    .plan__area--item:not(:first-child) {
        margin-top: 3rem;
    }
}

@media screen and (max-width: 1440px) {
    .plan__area--img {
        max-width: 1.4vw;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .plan__area--img {
        max-width: 2.9vw;
        width: 100%;
        margin: 1.5rem 1rem 0 0;
    }
}

@media screen and (max-width: 428px) {
    .plan__area--img {
        margin: 0.2rem 1rem 0 0;
        max-width: 3.5vw;
    }
}

.plan__area--text {
    font-size: 0.9vw;
    font-family: "ヒラギノ角ゴ ProN";
    margin-left: 0.7vw;
}

.plan__wrap--img {
    max-width: 13.8vw;
    width: 100%;
    margin-left: auto;
}

@media screen and (max-width: 768px) {
    .plan__wrap--img {
        display: none;
    }
}

.plan__list--sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .plan__list--sp {
        display: block;
        background: url(../img/service/plan-bgsp.png) no-repeat;
        background-size: cover;
        padding: 3rem;
    }

    .plan__item--sp {
        display: flex;
    }

    .plan__item--sp:not(:first-child) {
        margin-top: 2.5rem;
    }

    .plan__text--sp {
        font-size: 3.2vw;
        line-height: 2;
        font-family: "ヒラギノ丸ゴシック Pro";
        font-weight: 300;
        letter-spacing: -0.07em;
    }

    .plan__text--sp span {
        font-weight: bold;
    }
}

@media screen and (max-width: 428px) {
    .plan__list--sp {
        background-size: contain;
        padding: 2.5rem 1rem 2.5rem 1.5rem;
    }

    .plan__text--sp {
        line-height: 1.7;
    }

    .plan__item--sp:not(:first-child) {
        margin-top: 0.5rem;
    }
}

.plan__content {
    max-width: 68vw;
    width: 100%;
    padding: 0 2vw;
    margin: 6rem auto 0;
    background: url(../img/service/plan-bg.png) no-repeat;
}

@media screen and (max-width: 1440px) {
    .plan__content {
        margin: 4rem auto 0;
    }
}

@media screen and (max-width: 768px) {
    .plan__content {
        max-width: 82vw;
        padding: 0 2.6vw;
        margin: 4rem auto 0;
        background: url(../img/service/plan-boxsp.png) no-repeat;
        background-size: cover;
    }
}

@media screen and (max-width: 428px) {
    .plan__content {
        margin: 1rem auto 0;
        padding-top: 1.5rem;
        padding-bottom: 2rem;
        background-size: contain;
    }
}

.plan__content--box {
    display: flex;
    padding-top: 4rem;
}

@media screen and (max-width: 1440px) {
    .plan__content--box {
        padding-top: 3rem;
    }
}

@media screen and (max-width: 768px) {
    .plan__content--box {
        padding-top: 4.5rem;
    }
}

@media screen and (max-width: 428px) {
    .plan__content--box {
        padding-top: 1rem;
        border-top: 1px solid #000;
    }
    .plan__content--box .yellow2 {
        background-color: inherit;
    }

    .plan__content--box .yellow2 span {
        background-color: #e7ac27;
    }
}

.plan__content--label {
    background-color: #3b9a64;
    color: #fff;
    font-size: 0.9vw;
    font-family: "ヒラギノ角ゴ ProN";
    padding: 1.4rem 1.7vw;
    font-weight: bold;
    margin-right: 1.5vw;
}

@media screen and (max-width: 1440px) {
    .plan__content--label {
        padding: 1rem 1.7vw;
    }
}

@media screen and (max-width: 768px) {
    .plan__content--label {
        font-size: 2.2vw;
        padding: 0.5rem 0;
        margin-right: 0.5rem;
        font-family: "ヒラギノ丸ゴシック Pro";
        font-weight: 300;
    }
}

@media screen and (max-width: 428px) {
    .plan__content--label {
        background-color: inherit;
        white-space: nowrap;
    }

    .plan__content--label span {
        font-size: 2.7vw;
        padding: 0.5rem 0.5rem;
        background-color: #3b9a64;
    }
}

.plan__label__text {
    padding: 1.3rem 0;
    font-size: 0.9vw;
    font-family: "ヒラギノ角ゴ ProN";
    border-top: 1px solid #1d1d1d;
    border-bottom: 1px solid #1d1d1d;
    font-weight: bold;
    padding-left: 0.7vw;
    max-width: 54.5vw;
    width: 100%;
}

@media screen and (max-width: 1440px) {
    .plan__label__text {
        padding: 1rem 0;
    }
}

@media screen and (max-width: 768px) {
    .plan__label__text {
        padding: 1.3rem 0;
        font-size: 2.6vw;
        font-family: "ヒラギノ丸ゴシック Pro";
        border-top: 1px solid #1d1d1d;
        border-bottom: none;
        padding-left: 0.5rem;
        line-height: 2.5;
        max-width: inherit;
        font-weight: 300;
    }
}

@media screen and (max-width: 428px) {
    .plan__label__text {
        padding: 0;
        border-top: none;
        border-bottom: none;
        padding-left: 0.5rem;
    }

    .plan__label__text span {
        margin-left: -5rem;
    }
}

@media screen and (max-width: 428px) {
    .plan__label__text {
        max-width: 60vw;
    }
}

.plan__content--area {
    margin-top: 2.9rem;
    display: flex;
    gap: 2.8vw;
    padding-bottom: 2.7rem;
}

@media screen and (max-width: 1440px) {
    .plan__content--area {
        margin-top: 2rem;
        padding-bottom: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .plan__content--area {
        display: block;
    }
}

@media screen and (max-width: 428px) {
    .plan__content--area {
        margin-top: 0;
    }
}

.plan__area--pack {
    max-width: 33vw;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .plan__area--pack {
        padding-top: 0.3rem;
        max-width: 78.6vw;
        width: 100%;
    }
}

.plan__pack--ttl {
    background-color: #1d1d1d;
    color: #fff;
    padding: 1.6rem 0;
    font-size: 0.9vw;
    font-weight: bold;
    text-align: center;
    font-family: "ヒラギノ角ゴ ProN";
}

@media screen and (max-width: 1440px) {
    .plan__pack--ttl {
        padding: 1.2rem 0;
    }
}

@media screen and (max-width: 768px) {
    .plan__pack--ttl {
        padding: 1.4rem 0 0.9rem;
        font-size: 2.9vw;
        font-family: "ヒラギノ丸ゴシック Pro";
        font-weight: 300;
    }
}

@media screen and (max-width: 428px) {
    .plan__pack--ttl {
        padding: 0.7rem 0 0.5rem;
    }
}

.plan__pack--box {
    background-color: #fff;
    padding: 2.7rem 1.5vw 1.5rem;
}

@media screen and (max-width: 1440px) {
    .plan__pack--box {
        padding: 2rem 1.5vw 1rem;
    }
}

@media screen and (max-width: 768px) {
    .plan__pack--box {
        background-color: #fff;
        padding: 3rem 2.6vw 1rem;
    }
}

@media screen and (max-width: 428px) {
    .plan__pack--box {
        padding: 1.5rem 2.6vw 1rem;
    }
}

.plan__pack--area {
    display: flex;
    gap: 2vw;
}

@media screen and (max-width: 768px) {
    .plan__pack--area {
        gap: 2.6vw;
    }
}

.plan__pack-text {
    font-size: 0.9vw;
    max-width: 14vw;
    width: 100%;
    padding: 1.3rem 0;
    background-color: #397ab3;
    border-radius: 3rem;
    font-family: "ヒラギノ角ゴ ProN";
    text-align: center;
    position: relative;
}

.plan__pack-text a {
    color: #fff;
}

.plan__pack-text a:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: transparent;
}

@media screen and (max-width: 1440px) {
    .plan__pack-text {
        padding: 1rem 0;
    }
}

@media screen and (max-width: 768px) {
    .plan__pack-text {
        font-size: 2.9vw;
        max-width: 35.3vw;
        padding: 1.1rem 0.7rem;
        font-family: "ヒラギノ丸ゴシック Pro";
        font-weight: 300;
    }
}

@media screen and (max-width: 428px) {
    .plan__pack-text {
        padding: 0.7rem 0.4rem;
    }
}

.plan__pack-text::after {
    content: "";
    background: url(../img/service/sankaku.png) no-repeat;
    background-size: contain;
    max-width: 0.6vw;
    width: 100%;
    height: 1.1rem;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
    .plan__pack-text::after {
        max-width: 1.8vw;
        height: 1.4rem;
        right: 2.4rem;
    }
}

@media screen and (max-width: 428px) {
    .plan__pack-text::after {
        right: 7%;
        top: 65%;
    }
}

.yellow2 {
    background-color: #e7ac27;
}

.plan__pack--green {
    font-size: 0.9vw;
    max-width: 30vw;
    width: 100%;
    padding: 1.3rem 0;
    background-color: #3b9a65;
    border-radius: 3rem;
    font-family: "ヒラギノ角ゴ ProN";
    text-align: center;
    margin-top: 2.6rem;
    position: relative;
}

.plan__pack--green a {
    color: #fff;
}

.plan__pack--green a:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: transparent;
}

@media screen and (max-width: 1440px) {
    .plan__pack--green {
        padding: 1rem 0;
        margin-top: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .plan__pack--green {
        font-size: 2.9vw;
        max-width: 73vw;
        padding: 1.1rem 0.7rem;
        font-family: "ヒラギノ丸ゴシック Pro";
        font-weight: 300;
        margin-top: 3rem;
    }
}

@media screen and (max-width: 428px) {
    .plan__pack--green {
        margin-top: 1rem;
        padding: 0.7rem 0.4rem;
    }
}

.plan__pack--green::after {
    content: "";
    background: url(../img/service/sankaku.png) no-repeat;
    background-size: contain;
    max-width: 0.6vw;
    width: 100%;
    height: 1.1rem;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
    .plan__pack--green::after {
        max-width: 1.8vw;
        height: 1.4rem;
        right: 2.4rem;
    }
}

@media screen and (max-width: 428px) {
    .plan__pack--green::after {
        max-width: 1.8vw;
        height: 1.4rem;
        right: 3%;
        top: 65%;
    }
}

.plan__pack--sub {
    font-family: "ヒラギノ角ゴ ProN";
    font-size: 0.9vw;
    margin-top: 1.4rem;
    text-align: right;
}

@media screen and (max-width: 768px) {
    .plan__pack--sub {
        font-family: "ヒラギノ丸ゴシック Pro";
        font-weight: 300;
        font-size: 2.6vw;
        margin-top: 2.3rem;
    }
}

@media screen and (max-width: 428px) {
    .plan__pack--sub {
        margin-top: 1rem;
    }
}

.plan__area--price {
    max-width: 29vw;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .plan__area--price {
        max-width: 78.6vw;
        width: 100%;
        margin-top: 8rem;
    }
}

@media screen and (max-width: 428px) {
    .plan__area--price {
        margin-top: 3.5rem;
    }
}

.plan__price--ttl {
    background-color: #3b9a65;
    color: #fff;
    padding: 1.6rem 0;
    font-size: 0.9vw;
    font-weight: bold;
    text-align: center;
    font-family: "ヒラギノ角ゴ ProN";
    position: relative;
    height: 50px; /*リボンの高さ*/
}

@media screen and (max-width: 1440px) {
    .plan__price--ttl {
        padding: 1.2rem 0;
        height: 4rem;
    }
}

@media screen and (max-width: 768px) {
    .plan__price--ttl {
        padding: 1.5rem 0 0.9rem;
        font-size: 2.9vw;
        font-family: "ヒラギノ丸ゴシック Pro";
        font-weight: 300;
        height: 50px; /*リボンの高さ*/
    }
}

@media screen and (max-width: 428px) {
    .plan__price--ttl {
        padding: 1rem 0 0.4rem;
        font-size: 2.9vw;
        font-family: "ヒラギノ丸ゴシック Pro";
        font-weight: 300;
        height: 30px; /*リボンの高さ*/
    }
}

.plan__price--ttl:before,
.plan__price--ttl:after {
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    z-index: 1;
}

.plan__price--ttl:before {
    top: 0;
    left: 0;
    border-width: 25px 0px 25px 15px;
    border-color: transparent transparent transparent #fdfdf2;
    border-style: solid;
}

@media screen and (max-width: 1440px) {
    .plan__price--ttl:before {
        border-width: 20px 0px 20px 10px;
    }
}

@media screen and (max-width: 768px) {
    .plan__price--ttl:before {
        top: 0;
        left: 0;
        border-width: 25px 0px 25px 20px;
        border-color: transparent transparent transparent #fdfdf2;
        border-style: solid;
    }
}

@media screen and (max-width: 428px) {
    .plan__price--ttl:before {
        top: 0;
        left: 0;
        border-width: 15px 0px 15px 10px;
        border-color: transparent transparent transparent #fdfdf2;
        border-style: solid;
    }
}

.plan__price--ttl:after {
    top: 0;
    right: 0;
    border-width: 25px 15px 25px 0px;
    border-color: transparent #fdfdf2 transparent transparent;
    border-style: solid;
}

@media screen and (max-width: 1440px) {
    .plan__price--ttl:after {
        border-width: 20px 10px 20px 0px;
    }
}

@media screen and (max-width: 768px) {
    .plan__price--ttl:after {
        border-width: 25px 20px 25px 0px;
    }
}

@media screen and (max-width: 428px) {
    .plan__price--ttl:after {
        border-width: 15px 10px 15px 0px;
    }
}

.plan__price--area {
    display: flex;
    margin-top: 2.7rem;
    gap: 1vw;
}

@media screen and (max-width: 1440px) {
    .plan__price--area {
        margin-top: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .plan__price--area {
        gap: 2.6vw;
    }
}

@media screen and (max-width: 428px) {
    .plan__price--area {
        gap: 2.6vw;
        margin-top: 1.5rem;
    }
}

.price__box--label {
    display: flex;
    max-width: 25vw;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .price__box--label {
        max-width: 35vw;
        width: 100%;
    }
}

@media screen and (max-width: 428px) {
    .price__box--label {
        max-width: 40vw;
    }
}

.price__label--ttl {
    padding: 1.3rem 0;
    background-color: #1d1d1d;
    color: #fff;
    font-size: 0.9vw;
    font-weight: bold;
    text-align: center;
    font-family: "ヒラギノ角ゴ ProN";
    max-width: 6vw;
    width: 100%;
}

@media screen and (max-width: 1440px) {
    .price__label--ttl {
        padding: 0.8rem 0;
    }
}

@media screen and (max-width: 768px) {
    .price__label--ttl {
        padding: 1.5rem 0;
        font-size: 2.9vw;
        font-family: "ヒラギノ丸ゴシック Pro";
        font-weight: 300;
        max-width: 13vw;
        width: 100%;
    }
}

@media screen and (max-width: 428px) {
    .price__label--ttl {
        padding: 0.8rem 0;
    }
}

.red-ttl {
    background-color: #bb4a12;
}

.price__label--text {
    background-color: #fff;
    padding: 1.3rem 0;
    color: #333;
    font-size: 0.9vw;
    font-weight: bold;
    text-align: center;
    font-family: "ヒラギノ角ゴ ProN";
    border: 1px solid #333;
    max-width: 8vw;
    width: 100%;
}

@media screen and (max-width: 1440px) {
    .price__label--text {
        padding: 0.8rem 0;
    }
}

@media screen and (max-width: 768px) {
    .price__label--text {
        padding: 1.5rem 0;
        font-size: 2.9vw;
        font-family: "ヒラギノ丸ゴシック Pro";
        font-weight: 300;
        max-width: 40vw;
        width: 100%;
    }
}

@media screen and (max-width: 428px) {
    .price__label--text {
        padding: 0.8rem 0;
    }
}

.plan__price--en {
    margin-top: 2.5rem;
    text-align: center;
    font-size: 5.1vw;
    color: #c1460e;
    font-family: "Helvetica Neue";
    font-weight: bold;
}

.plan__price--en span {
    font-size: 3.5vw;
}

@media screen and (max-width: 1440px) {
    .plan__price--en {
        margin-top: 1.4rem;
    }
}

@media screen and (max-width: 768px) {
    .plan__price--en {
        font-size: 16vw;
    }

    .plan__price--en span {
        font-size: 9.3vw;
    }
}

@media screen and (max-width: 428px) {
    .plan__price--en {
        font-size: 18vw;
    }

    .plan__price--en span {
        font-size: 10vw;
    }
}

.plan__btn {
    margin-top: 7rem;
    display: flex;
    gap: 7.5vw;
    justify-content: center;
}

@media screen and (max-width: 1440px) {
    .plan__btn {
        margin-top: 5rem;
    }
}

@media screen and (max-width: 768px) {
    .plan__btn {
        display: block;
        padding-bottom: 3rem;
    }
}

@media screen and (max-width: 428px) {
    .plan__btn {
        margin-top: 0;
        padding-bottom: 2rem;
    }
}

.plan__btn--area {
    max-width: 20vw;
    width: 100%;
    background-color: #fff;
}

@media screen and (max-width: 768px) {
    .plan__btn--area {
        max-width: 73vw;
        margin: 4rem auto 1rem;
    }
}

@media screen and (max-width: 428px) {
    .plan__btn--area {
        margin: 0rem auto 0;
    }
}

.p__link:hover {
    background-color: #fff;
    border: 1px solid #222f53;
}

.p__link a:hover {
    color: #222f53;
}

.p__link {
    padding: 2.4rem 2vw 2.8rem 3vw;
    max-width: 40vw;
    width: 100%;
    border-radius: 10rem;
    background-color: #222f53;
    font-size: 1.3vw;
    font-family: "Noto Serif JP", serif;
    letter-spacing: -0.05em;
    position: relative;
    border: 1px solid #222f53;
}

.p__link a {
    color: #fff;
}

.p__link a:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: transparent;
}

@media screen and (max-width: 1800px) {
    .p__link {
        padding: 2.4rem 1.3vw 2.8rem 3vw;
    }
}

@media screen and (max-width: 1440px) {
    .p__link {
        padding: 2rem 1.6vw 2.6rem 3vw;
    }
}

@media screen and (max-width: 1280px) {
    .p__link {
        padding: 1.4rem 1.3vw 1.8rem 3vw;
    }
}

@media screen and (max-width: 768px) {
    .p__link {
        padding: 4.5rem 6.4vw 4.5rem 10.1vw;
        max-width: 73vw;
        width: 100%;
        font-size: 4.5vw;
    }
}

@media screen and (max-width: 428px) {
    .p__link {
        padding: 2.2rem 6.4vw 2.2rem 10.1vw;
        margin-bottom: 2rem;
    }
}

.arrow {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 1px;
    margin: 16.3px 0;
    border-radius: 9999px;
    background-color: #fff;
    margin-left: 2vw;
    top: 0.5rem;
}

@media screen and (max-width: 1800px) {
    .arrow {
        width: 30px;
        height: 1.5px;
        margin: 8px 0;
        margin-left: 2vw;
        top: 0.2rem;
    }
}

@media screen and (max-width: 1280px) {
    .arrow {
        width: 25px;
        height: 1px;
    }
}

@media screen and (max-width: 768px) {
    .arrow {
        width: 40px;
        height: 2px;
        margin: 0;
        top: -1rem;
        margin-left: 8.4vw;
    }
}

@media screen and (max-width: 428px) {
    .arrow {
        width: 20px;
        height: 1px;
        margin: 0;
        top: -0.5rem;
        margin-left: 6vw;
    }
}
.p__link a:hover .arrow {
    right: -1rem;
    background-color: #222f53;
}

.p__link a:hover .arrow::before,
.p__link a:hover .arrow::after {
    background-color: #222f53;
}

.arrow::before,
.arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    width: 15px;
    height: 1px;
    border-radius: 9999px;
    background-color: #fff;
    transform-origin: calc(100% - 1px) 50%;
}

@media screen and (max-width: 1800px) {
    .arrow::before,
    .arrow::after {
        width: 12px;
        height: 1.5px;
    }
}

@media screen and (max-width: 1280px) {
    .arrow::before,
    .arrow::after {
        width: 10px;
        height: 1px;
    }
}

@media screen and (max-width: 768px) {
    .arrow::before,
    .arrow::after {
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        right: 0;
        width: 20px;
        height: 2px;
        border-radius: 9999px;
        background-color: #fff;
        transform-origin: calc(100% - 1px) 50%;
    }
}

@media screen and (max-width: 428px) {
    .arrow::before,
    .arrow::after {
        width: 10px;
        height: 1px;
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        right: 0;
        border-radius: 9999px;
        background-color: #fff;
        transform-origin: calc(100% - 1px) 50%;
    }
}

.arrow::before {
    transform: rotate(45deg);
}

.arrow::after {
    transform: rotate(-45deg);
}

/* plan02 */

.plan__pack--area:not(:first-child) {
    margin-top: 1.5rem;
}

@media screen and (max-width: 1440px) {
    .plan__pack--area:not(:first-child) {
        margin-top: 1rem;
    }
}

.green2 {
    background-color: #3b9a65;
}

.red3 {
    background-color: #bd2b42;
}

.plan02 .plan__price--ttl {
    background-color: #e7ac26;
}

.purple2 {
    background-color: #9c638b;
}

.brown2 {
    background-color: #b78d6f;
}

.blue2 {
    background-color: #222f53;
    color: #f5d5a9;
}

@media screen and (max-width: 428px) {
    .plan__content--box .blue2 {
        background-color: inherit;
        color: #f5d5a9;
    }

    .plan__content--box .blue2 span {
        background-color: #222f53;
    }
}

@media screen and (max-width: 428px) {
    .plan02 .plan__list--sp {
        background-size: contain;
        padding: 2rem 1rem 3rem 1.5rem;
    }

    .plan02 .plan__text--sp {
        line-height: 1.5;
    }
}

/* plan03 */

@media screen and (max-width: 1440px) {
    .plan03 .plan__pack--box {
        padding-top: 1rem;
    }

    .plan03 .plan__pack--area:not(:first-child) {
        margin-top: 0.8rem;
    }

    .plan03 .plan__btn {
        margin-top: 6rem;
    }
}

@media screen and (max-width: 768px) {
    .answer__area {
        margin-top: 3rem;
    }

    .plan03 .plan__btn {
        margin-top: 3rem;
    }
}

@media screen and (max-width: 428px) {
    .plan03 .plan__area--price {
        margin-top: 3rem;
    }

    .plan03 .plan__price--en {
        margin-top: 0.5rem;
    }
}

@media screen and (max-width: 428px) {
    .answer__area {
        margin-top: 2rem;
    }

    .td-img {
        vertical-align: bottom;
    }

    .td-img img {
        max-width: 30vw;
        width: 100%;
        display: block !important;
        margin: 0 auto 2rem;
    }
}

@media screen and (max-width: 428px) {
    .plan03 .plan__content {
        background-size: cover;
        background-position: 90% 40%;
    }

    .plan03 .plan__pack--box {
        padding-top: 1rem;
    }

    .plan03 .plan__list--sp {
        background-size: contain;
        padding: 2rem 1rem 3rem 1.5rem;
    }

    .plan03 .plan__text--sp {
        line-height: 1.5;
    }

    .plan03 .plan__content--area {
        padding-bottom: 0;
    }
}

.td-img img {
    display: none;
}

.answer__item::after {
    display: none;
}

.sp--text {
    display: none;
}

@media screen and (max-width: 768px) {
    .sp--text {
        display: block;
    }

    .pc--text {
        display: none;
    }
}


/* slider
/*--------------------*/

.slider {
    display: none;
}

@media screen and (max-width: 768px) {
    .slider {
        display: block;
        margin-top: 3rem;
        position: relative;
        z-index: 4;
    }

    .slider::after {
        content: "";
        background: url(../img/service/support-arrow.png) no-repeat;
        background-size: contain;
        max-width: 100%;
        width: 100%;
        height: 10rem;
        position: absolute;
        top: -70%;
        left: 53%;
        transform: translateX(-50%);
        z-index: -1;
    }

    .slider-img img {
        padding: 0 1rem;
        max-width: 50vw;
        width: 100%;
    }

    .slide-arrow {
        max-width: 4rem;
        width: 100%;
        position: absolute;
        top: 0;
    }

    .prev-arrow {
        left: 20%;
        top: 22%;
        z-index: 1;
    }

    .next-arrow {
        right: 20%;
        top: 22%;
        z-index: 1;
    }
}

@media screen and (max-width: 428px) {
    .slider {
        margin-top: 2rem;
        gap: 0 1rem;
    }

    .slider-img img {
        padding: 0;
    }

    .slide-arrow {
        max-width: 3rem;
    }

    .prev-arrow {
        left: 15%;
        top: 15%;
        z-index: 1;
    }

    .next-arrow {
        right: 18%;
        top: 15%;
        z-index: 1;
    }
}

.answer::after {
    content: "";
    background-image: url(../img/performance/performance__bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -2.5%;
    left: 0;
    display: inline-block;
    z-index: -2;
    max-width: 25vw;
    width: 100%;
    height: 67rem;
}

@media screen and (max-width: 768px) {
    .answer::after {
        content: none;
    }
}

.slick-dots {
    display: none !important;
}