@charset "UTF-8";

/* カラー */

:root {
    --color-primary: #444849;
    --color-primary-light: #4F4F4F;
    --color-secondary-lighter: #C4A484;
    --color-secondary: #A35C50;
    --color-secondary-light: rgba(201, 160, 153, 0.25);
    --color-secondary-dark: #8B5E5E;
    --color-secondary-darker: #7A3E3E;
    --color-tertiary: #F8E7E4;
    --color-white: #FFF;
    --color-white-rgb: 255, 255, 255;
    --color-btn-bg: #06C655;
    --color-cool: #767272;
    --color-triangle: #D9D9D9;
}

/* フォントサイズ */

:root {
    --font-size-x-small: calc(12 / 16 * 1rem);
    --font-size-small: calc(14 / 16 * 1rem);
    --font-size-base: 16px;
    --font-size-middle: calc(18 / 16 * 1rem);
    --font-size-large: calc(20 / 16 * 1rem);
    --font-size-x-large: calc(22 / 16 * 1rem);
    --font-size-xx-large: calc(24 / 16 * 1rem);
    --font-size-xxx-large: calc(30 / 16 * 1rem);
    --font-size-xxxx-large: calc(32 / 16 * 1rem);
}

.fz-14 {
    font-size: calc(14 / 16 * 1rem);
}

.fz-22 {
    font-size: calc(22 / 16 * 1rem);
}

.fz-24 {
    font-size: calc(24 / 16 * 1rem);
}

.fz-32 {
    font-size: calc(32 / 16 * 1rem);
}

/* フォントウェイト */

.fw-500 {
    font-weight: 500;
}

.fw-700 {
    font-weight: 700;
}

/* 共通設定 */

html {
    scroll-behavior: smooth;
    scroll-padding-top: -150px;
}

body {
    color: var(--color-primary);
    font-size: var(--font-size-base);
    font-family: "Yu Gothic", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
    font-feature-settings: "palt";
    line-height: 1.5;
    background-color: var(--color-white);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ボタン */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    font-weight: 500;
    line-height: 1.4;
    background-color: var(--color-btn-bg);
    width: 208px;
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-left: 15px;
    border-radius: 300px;

    &::after {
        content: '';
        display: inline-block;
        width: 24px;
        height: 24px;
        background-image: url(../img/btn-arrow.webp);
    }
}

.btn--cta {
    text-align: left;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-large);
    font-size: clamp(1rem, -0.143rem + 5.714vw, 1.25rem);
    font-weight: 700;
    border: 1px solid var(--color-white);
    padding-top: 10px;
    padding-right: 17px;
    padding-bottom: 10px;
    padding-left: 17px;

    &::before {
        content: '';
        display: inline-block;
        --cta-img: clamp(2.5rem, -3.214rem + 28.571vw, 3.75rem);
        width: var(--cta-img);
        height: var(--cta-img);
        background-image: url(../img/cta-btn-img.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
}


.btn--flow {
    justify-content: space-between;
    width: 100%;
    border: 1px solid var(--color-white);
    border-radius: 60px;
    padding-top: 18px;
    padding-bottom: 18px;
    margin-top: 10px;
}

/* cta */

.cta {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), linear-gradient(180deg, rgba(139, 94, 94, 0.3) 0%, rgba(163, 92, 80, 0.3) 100%);
    padding-top: 40px;
    padding-bottom: 40px;
}

.cta__container {
    width: min(100% - 28px, 100%);
    background-color: var(--color-tertiary);
    border-radius: 30px;
    padding-top: 145px;
    padding-right: 10px;
    padding-bottom: 40px;
    padding-left: 10px;
    margin-inline: auto;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    position: relative;
}

.cta__heading {
    text-align: center;
    font-size: clamp(1rem, -0.143rem + 5.714vw, 1.25rem);
    font-weight: 500;
    color: var(--color-white);
    --d: .2em;
    position: absolute;
    top: 25px;
    inset-inline: calc(-1*var(--d));
    border-top: var(--d) solid #7A3E3E;
    line-height: 1.3;
    clip-path: polygon(0 100%, 100% 100%, 100% var(--d), calc(100% - var(--d)) 0%, calc(100% - var(--d)) var(--d), var(--d) var(--d), var(--d) 0%, 0 var(--d));
    background-color: var(--color-secondary);
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

.cta__img-wrapper {
    width: 100%;
    height: 285px;
    margin-inline: auto;
}

.cta__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.cta__text-area {
    background: rgba(var(--color-white-rgb), 0.8);
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
}

.cta__text {
    display: flex;
    align-items: center;
    color: var(--color-secondary);
    font-weight: 700;
    line-height: 1;

    &:not(:last-of-type) {
        margin-bottom: 22px;
    }

    &::before {
        content: '';
        display: inline-block;
        --check: 19px;
        width: var(--check);
        height: var(--check);
        background-image: url(../img/check01.png);
        background-size: contain;
        background-repeat: no-repeat;
        flex-shrink: 0;
        margin-right: 0.563em;
    }
}

.cta__btn-text {
    text-align: center;
    font-size: clamp(0.625rem, -1.089rem + 8.571vw, 1rem);
    line-height: 2;
    margin-top: 20px;
}

.cta--bg-white {
    background: var(--color-white);
}

/* ロゴ */

.logo {
    width: 90px;
}

.logo--large {
    width: 6.944444vw;
}


.logo__img {
    width: 100%;
    object-fit: cover;
}

/* pc */

.pc-only {
    width: 100%;
    display: grid;
    grid-template-columns: auto;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 19.444444vw;

    @media(min-width: 768px) {
        grid-template-columns: auto 390px;
    }
}

.pc-bg__img-wrapper {
    position: fixed;
    top: 0;
    z-index: -1;
}

.pc-bg__img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}


.global-nav__area {
    position: sticky;
    top: 0;
    padding-top: 28px;
    padding-left: 8.333333vw;
    display: none;

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


.global-nav__list {
    margin-top: 30px;
}

.global-nav__item {
    width: max-content;
    &:not(:last-of-type) {
        margin-bottom: 25px;
    }
}

.global-nav__link {
    font-size: clamp(1rem, 0.907rem + 0.381vw, 1.25rem);

    &:hover {
        opacity: 0.8;
    }
}

.is-current {
    color: var(--color-secondary);
    border-bottom: 1px solid var(--color-secondary);
    padding-bottom: 5px;
}



/* ヘッダー */

.main-contents {
    background-color: var(--color-white);
    /* position: relative;
    z-index: -3; */
}


.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100px;
    padding: 8px 10px;
}



/* メインビジュアル */

.mv {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), linear-gradient(180deg, rgba(139, 94, 94, 0.3) 0%, rgba(163, 92, 80, 0.3) 100%);
    width: 100%;
}

.mv__img {
    width: 100%;
    object-fit: cover;
    border-bottom-right-radius: 60px;
}

/* worries */
.worries {
    background-color: var(--color-secondary-light);
}

.worries__inner {
    background-image: url(../img/worries-bg.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-top: 40px;
    padding-right: 10px;
    padding-bottom: 60px;
    padding-left: 10px;
    position: relative;

    &::after {
        content: '';
        display: block;
        width: 77px;
        height: 15px;
        background-color: var(--color-triangle);
        clip-path: polygon(50% 15px, 0% 0%, 77px 0%);
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
    }
}

.worries__title {
    width: 100%;
    max-width: 315px;
    margin-inline: auto;
}

.worries__title-img {
    width: 100%;
}

.worries__list {
    background-color: var(--color-white);
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
    margin-top: 20px;
}

.worries__item {
    display: flex;
    align-items: center;
    font-weight: 500;
    gap: 8px;
    padding-bottom: 10px;

    &:not(:last-of-type) {
        margin-bottom: 16px;
    }
}

.worries__img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.accent {
    color: var(--color-secondary);
    text-decoration: underline;
}

.under-dotted {
    background-image: linear-gradient(to right, var(--color-cool), var(--color-cool) 2px, transparent 2px, transparent 8px);
    background-size: 9px 1px;
    background-position: left bottom 1px;
    background-repeat: repeat-x;
}

.worries__text-area {
    text-align: center;
    margin-top: 20px;
}

.worries__text {
    color: var(--color-white);
    font-weight: 500;
    line-height: 1;

    &:nth-of-type(2) {
        margin-bottom: 28px;
    }
}

.worries__text--small {
    &:nth-of-type(1) {
        width: max-content;
        background-image: url(../img/underline-img.png);
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: contain;
        padding-bottom: 13px;
        margin-inline: auto;
        margin-bottom: 20px;
    }
}

.worries__text--accent {
    font-size: var(--font-size-large);
    background-color: var(--color-primary);
    border-radius: 6px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    margin-right: 6px;
}

.worries__text--middle {
    font-size: clamp(1.125rem, -0.018rem + 5.714vw, 1.375rem);
    margin-bottom: 20px;
}

.worries__text--large {
    font-size: clamp(1.25rem, 0.107rem + 5.714vw, 1.5rem);
}

/* offer */

.offer {
    background-color: var(--color-secondary-light);
    padding-top: 60px;
    padding-bottom: 60px;
}

.offer__title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    background-color: var(--color-white);
    --circle: 140px;
    width: var(--circle);
    height: var(--circle);
    border-radius: 50%;
    margin-inline: auto;
    outline: 1px solid var(--color-secondary);
    outline-offset: -5px;
}

.offer__list {
    text-align: center;
    margin-top: 20px;
    margin-right: 16.5px;
    margin-left: 16.5px;
}

.offer__item {
    color: var(--color-white);
    font-size: var(--font-size-xx-large);
    background-color: var(--color-secondary);
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    outline: 1px solid var(--color-white);
    outline-offset: -5px;
    padding-top: 15px;
    padding-bottom: 15px;

    &:not(:last-of-type) {
        margin-bottom: 20px;
    }
}

.offer__text {
    text-align: center;
    font-weight: 500;
    line-height: 2;

    &:nth-of-type(1) {
        margin-top: 20px;
    }

    &:not(:last-of-type) {
        margin-bottom: 16px;
    }
}

.offer__text--accent {
    font-weight: 700;
    background-color: var(--color-white);
    padding: 6px;
    margin-right: 6px;
    margin-left: 6px;
}

/* reason */

.reason {
    background-image: url(../img/texture-bg.webp);
    background-size: cover;
    padding-top: 80px;
    padding-bottom: 40px;
    position: relative;

    &::before {
        content: '';
        background-image: url(../img/reason-arrow.png);
        display: block;
        width: 22px;
        height: 70px;
        position: absolute;
        top: -35px;
        left: 50%;
        transform: translateX(-50%);
    }
}

.reason__title {
    text-align: center;
}

.reason__title-img-wrapper {
    width: 98px;
    margin-inline: auto;
}

.reason__title-img {
    width: 100%;
}

.reason__title-main {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-x-large);
    font-weight: 500;
    margin-top: 20px;
    gap: 20px;
}

.reason__list {
    margin-top: 84px;
}

.reason__item {
    background-color: var(--color-secondary-light);
    border-top-left-radius: 60px;
    padding-top: 60px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    position: relative;

    &:not(:first-of-type) {
        margin-top: 84px;
    }

    &::before {
        content: '';
        display: block;
        width: 84px;
        height: 94px;
        background-image: url(../img/reason-number01.png);
        background-size: cover;
        position: absolute;
        top: -47px;
        left: 50%;
        transform: translateX(-50%);
    }

    &:nth-of-type(2)::before {
        background-image: url(../img/reason-number02.png);
    }

    &:nth-of-type(3)::before {
        background-image: url(../img/reason-number03.png);
    }

    &:nth-of-type(4)::before {
        background-image: url(../img/reason-number04.png);
    }

    &:nth-of-type(5)::before {
        background-image: url(../img/reason-number05.png);
    }
}

.reason__body {
    margin-top: 20px;
}

.reason__heading {
    color: var(--color-secondary);
    font-size: clamp(1rem, 0.429rem + 2.857vw, 1.125rem);
    font-weight: 700;
    line-height: 1.8;
}

.reason__text {
    color: var(--color-primary-light);
    font-weight: 500;
    line-height: 2;

    &:nth-of-type(1) {
        margin-top: 20px;
    }
}

/* doubt */

.doubt {
    background-image: url(../img/texture-bg.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 68px;
    padding-bottom: 60px;
}

.ellipses {
    --circle: 8px;
    width: var(--circle);
    height: var(--circle);
    background-color: var(--color-secondary);
    border-radius: 50%;
    margin-inline: auto;
    position: relative;

    &::before, &::after {
        content: '';
        display: block;
        --circle: 8px;
        width: var(--circle);
        height: var(--circle);
        background-color: var(--color-secondary);
        border-radius: 50%;
        position: absolute;
    }

    &::before {
        top: 20px;
    }

    &::after {
        bottom: 20px;
    }
}

.doubt__container {
    background-color: var(--color-secondary-dark);
    padding-right: 20px;
    padding-bottom: 60px;
    padding-left: 20px;
    margin-top: 68px;
}

.doubt__title {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
    color: var(--color-white);
    font-size: var(--font-size-large);
    font-weight: 500;
    line-height: 1;
    background-color: var(--color-secondary-lighter);
    width: 260px;
    height: 160px;
    clip-path: polygon(0 85%, 0 0, 100% 0, 100% 85%, 50% 100%);
    padding-top: 20px;
    padding-right: 19px;
    padding-bottom: 44px;
    padding-left: 19px;
    margin-inline: auto;
}

.doubt__title--accent {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.doubt__list {
    margin-top: 40px;
}

.doubt__item {
    display: flex;
    align-items: center;
    color: var(--color-white);
    font-weight: 500;
    padding-bottom: 10px;

    &:not(:last-of-type) {
        margin-bottom: 16px;
    }

    &::before {
        content: '';
        display: inline-block;
        --check: 19px;
        width: var(--check);
        height: var(--check);
        background-image: url(../img/check03.png);
        background-size: contain;
        background-repeat: no-repeat;
        flex-shrink: 0;
        margin-right: 0.563em;
    }
}

.under-dotted-white {
    background-image: linear-gradient(to right, var(--color-white), var(--color-white) 2px, transparent 2px, transparent 8px);
    background-size: 9px 1px;
    background-position: left bottom 1px;
    background-repeat: repeat-x;
}

/* solution */

.solution {
    background-image: url(../img/solution-bg.webp);
    background-size: cover;
    padding-top: 10px;
    padding-bottom: 70px;
    position: relative;
    z-index: 0;

    &::before {
        content: '';
        display: block;
        background-image: url(../img/solution-arrow.png);
        width: 22px;
        height: 174px;
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
    }
}

.solution__text {
    text-align: center;
    color: var(--color-white);
    font-weight: 500;
    line-height: 1;
    width: max-content;
    background-color: var(--color-secondary-dark);
    border-radius: 10px;
    padding-top: 15px;
    padding-right: 21px;
    padding-bottom: 15px;
    padding-left: 21px;
    margin-inline: auto;
}

.solution__img-wrapper {
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 104px;
}

.solution__img {
    width: 100%;
}

.solution__catch {
    text-align: center;
    font-size: var(--font-size-xx-large);
    font-weight: 500;
    line-height: 1;
    background-color: var(--color-secondary-light);
    padding-top: 23px;
    padding-bottom: 23px;
    margin-top: 30px;
}

.slashes {
    position: relative;

    &::before, &::after {
        content: '';
        display: block;
        width: 1px;
        height: 30px;
        background-color: var(--color-primary);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    &::before {
        left: -10px;
        rotate: -15deg;
    }

    &::after {
        right: -10px;
        rotate: 15deg;
    }
}

.triangles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.triangle {
    width: 78px;
    height: 16px;
    background-color: var(--color-secondary);
    clip-path: polygon(50% 16px, 0% 0%, 78px 0%);
}

/* strengths */

.strengths {
    background-color: var(--color-white);
    border-top-right-radius: 60px;
    border-top-left-radius: 60px;
    padding-top: 40px;
    padding-bottom: 60px;
    transform: translateY(-50px);
}

.strengths__title {
    display: grid;
    place-items: center;
    gap: 8px;
}

.strengths__title-img-wrapper {
    width: 140px;
}

.strengths__title-img {
    width: 100%;
}

.strengths__title-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    font-size: clamp(1rem, 0.429rem + 2.857vw, 1.125rem);
    font-weight: 500;
    line-height: 1.8;
}

.strengths__list {
    margin-top: 50px;
}

.strengths__item {
    padding-top: 30px;
    padding-bottom: 36px;
    position: relative;

    &:not(:last-of-type) {
        margin-bottom: 50px;
    }

    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--color-secondary-light);
        border-top-left-radius: 60px;
        border-bottom-left-radius: 60px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }
}

.strengths__item--reverse.strengths__item {

    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--color-secondary-light);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 60px;
        border-bottom-right-radius: 60px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
}

.strengths__head {
    color: var(--color-secondary);
    font-size: var(--font-size-large);
    line-height: 1;
    letter-spacing: 0.1em;
    margin-left: 30px;
}

.strengths__item--reverse .strengths__head {
    text-align: right;
    margin-right: 30px;
}

.strengths__number {
    font-size: calc(30 / 16 * 1rem);
}

.strengths__body {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 2px solid var(--color-secondary-lighter);
    border-right: 2px solid var(--color-secondary-lighter);
    border-bottom: 2px solid var(--color-secondary-lighter);
    border-top-right-radius: 60px;
    border-bottom-right-radius: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: 6px;
}

.strengths__item--reverse .strengths__body {
    border-top: 2px solid var(--color-secondary-lighter);
    border-right: none;
    border-bottom: 2px solid var(--color-secondary-lighter);
    border-left: 2px solid var(--color-secondary-lighter);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
    margin-left: auto;
}

.strengths__img-wrapper {
    padding-right: 10px;
    margin-right: auto;
}

.strengths__item--reverse .strengths__img-wrapper {
    padding-right: 0;
    padding-left: 10px;
    margin-right: 0;
    margin-left: auto;
}



.strengths__img {
    width: 100%;
}

.strengths__heading {
    color: var(--color-white);
    font-size: var(--font-size-large);
    font-weight: 500;
    line-height: 2;
    background-color: var(--color-cool);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    margin-top: -20px;
}

.strengths__text {
    color: var(--color-primary-light);
    font-weight: 500;
    line-height: 2;
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 20px;
}

/* training */

.training {
    padding-top: 60px;
    padding-bottom: 60px;
    margin-top: -40px;
}

.training__title-img-wrapper {
    width: 208px;
    margin-inline: auto;
}

.training__title-img {
    width: 100%;
}

.training__title-main {
    text-align: center;
    color: var(--color-primary-light);
    font-size: var(--font-size-xx-large);
    font-weight: 500;
    line-height: 1;
    margin-top: 16px;
}

.training__desc {
    color: var(--color-primary-light);
    font-weight: 500;
    line-height: 2;
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 40px;
}

.training__list {
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 40px;
}

.training__item {
    &:not(:last-of-type) {
        margin-bottom: 20px;
    }
}

.training__head {
    text-align: center;
    font-size: clamp(1.125rem, 0.554rem + 2.857vw, 1.25rem);
    font-weight: 500;
    line-height: 1.8;
    background-color: var(--color-secondary-light);
    border-top: 1px solid var(--color-secondary-darker);
    border-bottom: 1px solid var(--color-secondary-darker);
    padding-top: 30px;
    padding-bottom: 30px;
}

.training__text {
    text-align: center;
    font-weight: 500;
    line-height: 1.8;
    margin-top: 20px;
}

/* staff */

.staff {
    text-align: center;
    padding-bottom: 40px;
}

.staff__title-img-wrapper {
    width: 200px;
    margin-inline: auto;
}

.staff__title-img {
    width: 100%;
}

.staff__title-main {
    font-size: var(--font-size-large);
    font-weight: 500;
    line-height: 1.8;
}

.staff__inner {
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 40px;
}

.staff__item {
    display: grid;
    place-items: center;
    color: var(--color-white);
    background-color: var(--color-cool);
    border-radius: 30px;
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;

    &:not(:last-of-type) {
        margin-bottom: 40px;
    }
}

.staff__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-white);
    width: 100%;
    max-width: 350px;
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    padding: 10px;
}

.staff__circle-text-wrapper {
    width: min(21.561538vw, 84.09px);
    position: absolute;
    top: 0;
    left: 5.1282051%;
    transform: rotate(-6deg);
    background-color: var(--color-cool);
    z-index: 0;
}

.staff__circle-text {
    width: 100%;
}

.staff__img-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.staff__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.staff__body {
    padding-top: 16px;
}

.staff__heading {
    font-size: var(--font-size-xxxx-large);
    font-family: "Roboto", "Helvetica Neue", "Arial", sans-serif;
    font-style: italic;
    font-weight: 300;
    line-height: 1;
}

.staff__text {
    text-align: center;
    font-weight: 500;
    line-height: 2;
    margin-top: 16px;
}

.modal__btn-open {
    width: 100%;
    max-width: 163px;
    font-family: "Roboto", "Helvetica Neue", "Arial", sans-serif;
    font-style: italic;
    font-weight: 300;
    line-height: 1;
    border: 1px solid var(--color-white);
    border-radius: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 16px;
}

/* modal */

.modal {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--color-white-rgb), 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal__content {
    display: grid;
    place-items: center;
    color: var(--color-white);
    background-color: var(--color-cool);
    border-radius: 30px;
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
    position: relative;
    overflow: auto;
}

.modal__content .staff__text {
    text-align: left;
}

.modal__btn-close {
    --btn: clamp(1.875rem, -0.982rem + 14.286vw, 2.5rem);
    ;
    width: var(--btn);
    aspect-ratio: 1;
    height: var(--btn);
    position: absolute;
    top: 20px;
    right: 10px;
}

.modal__btn-img {
    width: 100%;
}



/* about */

.about {
    background-image: url(../img/about-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 100px;
    padding-bottom: 80px;
}

.about__title {
    width: fit-content;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--color-white);
    border-top: 1px solid var(--color-white);
    border-bottom: 1px solid var(--color-white);
    padding-top: 20px;
    padding-right: 10.5px;
    padding-bottom: 20px;
    padding-left: 10.5px;
    margin-inline: auto;
}

.about__title-main {
    font-size: var(--font-size-x-large);
    font-weight: 300;
    line-height: 1;
    text-transform: capitalize;
    font-family: "Roboto", "Helvetica Neue", "Arial", sans-serif;
}

.about__title-sub {
    font-size: var(--font-size-large);
    font-weight: 500;
    line-height: 1;
}

.about__inner {
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 60px;
}

.about__concept-container,
.about__policy-container {
    width: 100%;
    height: auto;
}

.about__concept,
.about__policy {
    width: 100%;
    object-fit: cover;
}

.about__policy-container {
    margin-top: 40px;
}

/* requirements */

.requirements {
    padding-top: 50px;
    padding-bottom: 40px;
    margin-top: 10px;
}

.requirements__title {
    text-align: center;
}

.requirements__title-img-wrapper {
    width: 168px;
    margin-inline: auto;
}

.requirements__title-img {
    width: 100%;
}

.requirements__title-main {
    font-size: var(--font-size-large);
    font-weight: 500;
    line-height: 1.8;
}

.requirements__list {
    text-align: center;
    margin-top: 40px;
}

.requirements__head {
    font-weight: 500;
    line-height: 1;
    background-color: var(--color-secondary-light);
    padding-top: 30px;
    padding-bottom: 30px;
    text-decoration: underline;
    text-decoration-color: var(--color-secondary);
    text-underline-offset: 5px;
}

.requirements__body {
    padding-top: 30px;
    padding-bottom: 30px;
}

.requirements__text {
    font-weight: 500;
    line-height: 1;

    &:not(:last-of-type) {
        margin-bottom: 18px;
    }
}

.requirements__text--line-height {
    line-height: 2;
}

.requirements__list-sub {
    text-align: left;
    margin-top: 18px;
    margin-left: 20px;
}

.requirements__item-sub {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1;

    &:not(:last-of-type) {
        margin-bottom: 17px;
    }

    &::before {
        content: '';
        display: inline-block;
        width: 18px;
        height: 18px;
        border: 1px solid var(--color-secondary);
        border-radius: 50%;
    }
}

/* flow */

.flow {
    overflow: hidden;
    margin-top: 20px;
}

.flow-bg {
    background-color: var(--color-secondary-light);
    border-top-right-radius: 1000px 300px;
    border-top-left-radius: 1000px 300px;
    padding-top: 39.21px;
    padding-bottom: 82.79px;
    margin-left: -5px;
    margin-right: -5px;
}

.flow__title {
    text-align: center;
}

.flow__title-img-wrapper {
    width: 60px;
    margin-inline: auto;
}

.flow__title-img {
    width: 100%;
}

.flow__title-main {
    color: var(--color-primary-light);
    font-size: var(--font-size-large);
    font-weight: 500;
    line-height: 1;
}

.flow__list {
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 40px;
    position: relative;

    &::before {
        content: '';
        display: block;
        width: 1px;
        height: 95%;
        background-color: var(--color-secondary);
        position: absolute;
        left: clamp(3.75rem, 2.321rem + 7.143vw, 4.063rem);
        ;
        z-index: -1;
    }
}

.flow__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;

    &:not(:last-of-type) {
        margin-bottom: 60px;
    }
}

.flow__head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-family: "Roboto", "Helvetica Neue", "Arial", sans-serif;
    font-size: var(--font-size-small);
    font-weight: 400;
    line-height: 1;
    background-color: var(--color-secondary);
    border-radius: 50%;
    --circle: clamp(5rem, 2.143rem + 14.286vw, 5.625rem);
    width: var(--circle);
    height: var(--circle);
}

.flow__number {
    font-size: calc(36 / 16 * 1rem);
}

.flow__heading {
    color: var(--color-secondary);
    font-size: clamp(1.125rem, 0.554rem + 2.857vw, 1.25rem);
    font-weight: 700;
    line-height: 1.8;
}

.flow__text {
    font-weight: 500;
    line-height: 1.8;
    margin-top: 10px;
}

/* Q＆A */

.qa {
    background-color: var(--color-secondary-light);
}

.qa__title {
    width: 188px;
    margin-inline: auto;
}

.qa__title-img {
    width: 100%;
}

.qa__container {
    background-color: var(--color-white);
    border-top: 20px solid var(--color-primary-light);
    border-right: 5px solid var(--color-primary-light);
    border-bottom: 10px solid var(--color-primary-light);
    border-left: 5px solid var(--color-primary-light);
    padding-right: 7px;
    padding-left: 7px;
}

/* accordion */

.accordion__item {
    &:not(:nth-of-type(1)) {
        border-top: 1px solid var(--color-secondary-light);
    }

    &:not(:last-of-type) {
        margin-bottom: 10px;
    }
}

.accordion__head {
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
}

.accordion__heading {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    font-weight: 500;
    line-height: 2;
    position: relative;

    &::after {
        content: '+';
        color: var(--color-primary-light);
        display: flex;
        justify-content: center;
        align-items: center;
        --btn: clamp(1.25rem, 0.107rem + 5.714vw, 1.5rem);
        width: var(--btn);
        height: var(--btn);
        border: 1px solid var(--color-primary-light);
        border-radius: 50%;
        margin-left: auto;
    }
}

.accordion__head.open .accordion__heading::after {
    content: '-';
}

.accordion__sign {
    display: inline-block;
    color: var(--color-secondary);
    font-size: var(--font-size-xx-large);
    font-size: clamp(1.25rem, 0.107rem + 5.714vw, 1.5rem);
    font-weight: 400;
    line-height: 1;
    font-family: "Roboto", "Helvetica Neue", "Arial", sans-serif;
    font-style: italic;
    margin-right: 1.538461vw;
}

.accordion__body .accordion__sign {
    margin-right: 0.625em;
    margin-bottom: auto;
}


.accordion__body {
    display: none;
    background-color: var(--color-secondary-light);
    border-radius: 6px;
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 4px;
}

.accordion__head.open .accordion__body {
    display: block;
}

.accordion__item:has(.accordion__body[aria-hidden="true"]) {
    margin-bottom: 0;
}

.accordion__text--sign {
    position: relative;
    margin-left: 1.3em;

    &::before {
        content: 'A.';
        color: var(--color-secondary);
        font-size: var(--font-size-xx-large);
        font-weight: 400;
        font-family: "Roboto", "Helvetica Neue", "Arial", sans-serif;
        font-style: italic;
        position: absolute;
        top: -0.3em;
        left: -0.8em;
    }
}

.accordion__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: first baseline;
}




/* footer */

.footer {
    text-align: center;
    padding-bottom: 30px;
}

.copyright__inner {
    font-size: var(--font-size-small);
}

/* footer cta */

.footer__cta {
    background-color: var(--color-white);
    position: sticky;
    bottom: 0;
    text-align: center;
    padding-top: 20px;
    padding-right: 25px;
    padding-bottom: 20px;
    padding-left: 25px;
    z-index: 10;
}

.footer__cta-text {
    font-size: clamp(0.625rem, -1.089rem + 8.571vw, 1rem);
    white-space: nowrap;
}