@charset "UTF-8";

/**********************
- ROOT
- FV
- MESSAGE
***********************/
/*********************
ROOT
**********************/
:root {
    --base: #EAEFF5;
    --bg-1: #E8F6F9;
    --bg-2: #FFFBBF;
    --text-main: #222;
    --text-sub: #7E7F83;

    --main-color-1: #00305B;
    --main-color-2: #6BCCF0;
    --main-color-3: #BCE3F2;
    --sub-color-1: #FFF000;
    --sub-color-2: #FFFBB3;
    --accent-color-1: #D17D00;
    --accent-color-2: #CF1531;
    --gradient: linear-gradient(70deg, #5DC5F7, #FA966B);

    --font-jp: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    --font-num: 'Lato', sans-serif;
    --font-min: 'Yu Mincho', 'YuMincho', serif;
    --light: 300;
    --normal: 400;
    --bold: 700;

    --container: calc(1920px + 6%);
    --container-side: 3%;
    --container-ll: 1800px;
    --container-l: 1200px;
    --container-m: 960px;
    --container-s: 660px;
    --container-ss: 480px;

}

/*********************
FV
**********************/
.fv {
    background: url(../image/top/fv_bg.jpg) right 36% center / cover;
    height: 800px;
}

.fv .container {
    height: 100%;
}

.fv .container .container-ll {
    position: relative;
    height: 100%;
}

.fv .container .container-ll .fv_title {
    display: block;
    width: 68.33%;
    position: absolute;
    top: 10%;
    left: 0;
}

.fv .container .container-ll .career {
    position: absolute;
    bottom: 20px;
    right: 5%;
    padding: 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
}

.fv .container .container-ll .career .name {
    margin-bottom: 10px;
    border-bottom: 1px solid var(--main-color-1);
}

.fv .container .container-ll .career .name span {
    font-size: 3.2rem;
}

.fv .container .container-ll .career ul li {
    padding-left: 22px;
    position: relative;
}

.fv .container .container-ll .career ul li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--main-color-1);
    transform: rotate(45deg) translateY(-50%);
}


@media only screen and (max-width: 960px) {
    .fv {
        background: url(../image/top/sp/fv_bg_sp.jpg) center center / cover;
        height: 80vh;
        min-height: 500px;
    }

    .fv .container .container-ll .fv_title {
        width: 100%;
        max-width: 640px;
    }

    .fv .container .container-ll .career .name {
        font-size: 1.8rem;
    }

    .fv .container .container-ll .career .name span {
        font-size: 2.8rem;
    }

    .fv .container .container-ll .career ul li {
        font-size: 1.6rem;
    }

}


@media only screen and (max-width:560px) {
    .fv .container .container-ll .career {
        right: -15px;
        bottom: 0;
    }

    .fv .container .container-ll .career .name {
        font-size: 1.6rem;
    }

    .fv .container .container-ll .career .name span {
        font-size: 2.4rem;
    }

    .fv .container .container-ll .career ul li {
        font-size: 1.2rem;
    }
}

/*********************
MESSAGE
**********************/
section#message {
    background: url(../image/top/message.jpg) center center / cover;
}

section#message .section_accent .image {
    width: 40.8%;
}

#message .container .container-l .text_wrap p:not(:first-child) {
    padding-top: 20px;
}

#message .container .container-l .text_wrap p {
    line-height: 2em;
}

#message .container .container-l .text_wrap p span {
    border-bottom: 1px solid var(--main-color-1);
}

@media screen and (min-width: 960px) {
    #message .container .container-l .text_wrap {
        text-align: center;
    }
}

/*********************
CAREER
**********************/
section#career .section_accent .image {
    width: 31.9%;
}

section#career .container .container-l figure {
    position: relative;
    height: fit-content;
}

section#career .container .container-l figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
}

section#career .container .container-l figure figcaption span {
    background-color: #fff;
    padding: 8px 10px;
}

section#career>.container>.container-l>div {
    gap: 60px;
    flex-wrap: nowrap;
}

section#career .container .container-l .text_wrap .text ul li:not(:first-child) {
    padding-top: 6px;
}

section#career .container .container-l .text_wrap .text h3 {
    padding-left: 110px;
    position: relative;
}

section#career .container .container-l .text_wrap .text h3::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100px;
    height: 1px;
    background-color: var(--main-color-1);
}

section#career .container .container-l .text_wrap {
    position: relative;
}

section#career .container .container-l .text_wrap::before {
    position: absolute;
    bottom: 0;
    right: -20%;
    content: "";
    background-image: url(../image/top/mouthpiece.png);
    background-size: cover;
    width: 64.8%;
    height: auto;
    aspect-ratio: 1/1;
    z-index: -1;
}

section#career .container .container-l .text_wrap .text ul li dt {
    display: inline-block;
    width: 120px;
    font-weight: 300;
}

section#career .container .container-l .text_wrap .text ul li dd {
    display: inline-block;
    width: calc(100% - 125px);
}

section#career .container .container-l ul.career_bottom {
    gap: 20px 1.6%;
    justify-content: center;
}

section#career .container .container-l ul.career_bottom li {
    display: flex;
    flex-direction: column;
    width: calc((100% - 3.2%)/3);
}

section#career .container .container-l ul.career_bottom li p {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
    padding: 10px;
    margin-top: 10px;
    flex: 1;
}

@media screen and (max-width: 1440px) {
    section#career .container .container-l .text_wrap::before {
        right: 0;
    }
}

@media screen and (max-width: 960px) {
    section#career .container .container-l figure {
        max-width: 662px;
        margin: auto;
    }

    section#career .container .container-l .text_wrap {
        padding-top: 40px;
        margin: auto;
    }

    section#career>.container>.container-l>div {
        gap: 0;
        flex-wrap: wrap;
    }

    section#career .container .container-l .text_wrap::before {
        right: -10%;
        min-width: 320px;
    }
}

@media screen and (max-width: 768px) {
    section#career .container .container-l ul.career_bottom li {
        width: calc((100% - 3.2%)/2);
    }
}

@media screen and (max-width: 560px) {
    section#career .container .container-l ul.career_bottom li {
        width: 100%;
    }

    section#career .container .container-l figure figcaption {
        bottom: -20px;
    }

    section#career .container .container-l .text_wrap .text ul li dt {
        width: 94px;
    }

    section#career .container .container-l .text_wrap .text ul li dd {
        width: calc(100% - 98px);
    }
}


/*********************
NAYAMI
**********************/
section#nayami {
    background: url(../image/top/nayami.jpg) center center / cover;
}

section#nayami .container .container-l ul {
    width: fit-content;
    margin: auto;
}

section#nayami .container .container-l ul li {
    padding-left: 46px;
    position: relative;
    width: fit-content;
    font-size: 20px;
}

section#nayami .container .container-l ul li:not(:first-child) {
    margin-top: 10px;
}

section#nayami .container .container-l ul li::before {
    position: absolute;
    top: 2px;
    left: 0;
    content: "";
    background: url(../image/top/checkbox.png);
    width: 36px;
    height: 30px;
    background-size: cover;
}

section#nayami .container .container-l p {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
    padding: 20px;
    max-width: 800px;
    margin: 60px auto 0;
    text-align: center;
}

@media screen and (max-width: 960px) {
    section#nayami {
        background: url(../image/top/sp/nayami_sp.jpg) top center / cover;
    }

    section#nayami .container .container-l ul li {
        padding-left: 46px;
        position: relative;
        width: fit-content;
        font-size: 18px;
    }

    section#nayami .container .container-l p.large {
        font-size: 18px;
        text-align: left;
    }
}

@media screen and (max-width: 560px) {
    section#nayami .container .container-l ul li {
        padding-left: 36px;
        font-size: 16px;
    }

    section#nayami .container .container-l ul li::before {
        width: 28px;
        height: 23px;
    }

    section#nayami .container .container-l p.large {
        font-size: 16px;
    }
}

/*********************
SURPPORT_MENU
**********************/
section#support_menu {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%),
        url(../image/top/support_menu.jpg) center center / cover;
    background-attachment: fixed;
}

section#support_menu .container .container-l .h2-page {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    color: #D17D00;
    text-shadow: -2px 2px 5px #EAC690,
        2px -2px 5px #EAC690,
        -2px -2px 5px #EAC690,
        1px 1px 0px #EAC690,
        -1px 1px 0px #EAC690,
        1px -1px 0px #EAC690,
        -1px -1px 0px #EAC690;
    background-color: #fff;
    padding: 40px 20px;
    width: 94%;
    max-width: 1200px;
}

section#support_menu .container .container-l .h2-page::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
    border-top: 40px solid #fff;
    border-bottom: 0;
}

section#support_menu .container .container-l nav ul {
    padding-top: 240px;
    gap: 0.83%;
}

section#support_menu .container .container-l nav ul li.btn {
    width: calc((100% - 1.66%)/3);
    height: 128px;
}

section#support_menu .container .container-l nav ul li.btn {
    font-size: clamp(20px, 1.25vw, 24px);
}

section#support_menu .container .container-l nav ul li.btn a {
    background: linear-gradient(45deg, rgba(0, 48, 91, 1) 0%, rgba(65, 109, 148, 1) 100%);
    padding-bottom: 20px;
    position: relative;
    line-height: 1.25em;
}

section#support_menu .container .container-l nav ul li.btn a::after {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, -100%);
    content: "";
    background: url(../image/top/arrow_white.png) center center / cover;
    width: 18px;
    height: 9px;
}

ul.support_menu_wrap li.support_menu {
    background-color: #fff;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .2);
}

ul.support_menu_wrap li.support_menu:not(:first-child) {
    margin-top: 60px;
}

ul.support_menu_wrap li.support_menu .support_menu_title {
    border-bottom: 1px solid var(--main-color-1);
}

ul.support_menu_wrap li.support_menu .support_menu_title .support_menu_title_accent {
    background: linear-gradient(45deg, rgba(0, 48, 91, 1) 0%, rgba(65, 109, 148, 1) 100%);
    width: fit-content;
    margin: auto;
    border-radius: 999px;
    padding: 2px 16px;
}

ul.support_menu_wrap li.support_menu .support_menu_title h3 {
    font-size: 40px;
    padding-top: 10px;
}

ul.support_menu_wrap li.support_menu .support_menu_title p {
    font-size: 18px;
}

ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.support_menu_content h4 {
    margin: 40px 0 20px;
    padding-left: 16px;
    position: relative;
}

ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.support_menu_content h4::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: var(--main-color-1);
}

ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.image {
    width: 49.1%;
    height: 100%;
    aspect-ratio: 3/2;
}

ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.text {
    width: 49.1%;
}

ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.text .detail {
    margin-top: 20px;
}

ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.text .supplement {
    font-size: 14px;
}

ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.text p {
    padding-top: 20px;
}

ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.text .detail div {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    width: calc((100% - 1.8%)/2);
    height: 64px;
    background-color: var(--main-color-1);
}

ul.support_menu_content_wrap li.regular_consulting ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24.5%;
    height: 160px;
    border: 2px solid var(--main-color-1);
}

ul.support_menu_content_wrap li.regular_consulting ul li div .icon {
    width: 32px;
    height: 32px;
    margin: auto;
}

ul.support_menu_content_wrap li.regular_consulting ul li div p {
    padding-top: 6px;
    text-align: center;
}

ul.support_menu_content_wrap li.regular_consulting ul li div p span {
    font-size: 12px;
}

ul.support_menu_content_wrap li.support_menu_content_bottom>div {
    align-items: flex-start;
}

ul.support_menu_content_wrap li.support_menu_content_bottom>div>div {
    flex-direction: column;
    gap: 20px;
    width: 49.1%;
}

ul.support_menu_content_wrap li.support_menu_content_bottom>div>div .image {
    width: 100%;
    height: 100%;
    aspect-ratio: 3/2;
}

ul.support_menu_content_wrap li.support_menu_content_bottom>div>div h5 {
    font-size: 20px;
}

#support_menu02 .support_menu_content_bottom>div>div {
    gap: 0;
}

#support_menu02 .support_menu_content_bottom>div>div p {
    padding-top: 10px;
}

#support_menu02 li.support_menu_content_bottom>div {
    align-items: stretch;
}

#support_menu02 .support_menu_content_bottom>div>div .wrap {
    flex: 1;
}

#support_menu02 .support_menu_content_bottom>div>div:nth-child(1) h5 {
    background-color: #626262;
    color: #fff;
    padding: 8px 0;
}

#support_menu02 .support_menu_content_bottom>div>div:nth-child(1) .wrap {
    background-color: #eee;
    padding: 10px;
}

#support_menu02 .support_menu_content_bottom>div>div:nth-child(2) h5 {
    background-color: var(--accent-color-1);
    color: #fff;
    padding: 8px 0;
}

#support_menu02 .support_menu_content_bottom>div>div:nth-child(2) .wrap {
    background-color: #FFF9F2;
    padding: 10px;
}

#support_menu03 li.contents_price>div>.text .detail div {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    width: calc((100% - 1.8%)/3);
    height: 64px;
    background-color: var(--main-color-1);
}

#support_menu03 .support_menu_content_seminar ul li:not(:first-child) {
    padding-top: 20px;
}

#support_menu03 .support_menu_content_seminar ul li>div {
    font-size: 20px;
}

#support_menu03 .support_menu_content_seminar ul li p {
    padding-left: 20px;
}

#support_menu .cta {
    margin-top: 60px;
}


@media screen and (max-width: 960px) {
    ul.support_menu_wrap li.support_menu {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    section#support_menu .container .container-l .h2-page::before {
        border-right: 60px solid transparent;
        border-left: 60px solid transparent;
        border-top: 30px solid #FFF;
    }

    section#support_menu .container .container-l nav ul {
        padding-top: 200px;
    }

    section#support_menu .container .container-l nav ul li.btn {
        font-size: clamp(16px, 1.88vw, 18px);
    }

    ul.support_menu_wrap li.support_menu .support_menu_title h3 {
        font-size: 32px;
    }

    ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.image {
        width: 100%;
    }

    ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.text {
        width: 100%;
    }

    ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.text h5 {
        padding-top: 20px;
    }

    ul.support_menu_content_wrap li.regular_consulting ul {
        gap: 10px;
    }

    ul.support_menu_content_wrap li.regular_consulting ul li {
        width: calc((100% - 10px)/2);
    }

    ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.support_menu_content h4 {
        margin: 30px 0 20px;
    }
}

@media screen and (max-width: 768px) {
    #support_menu .h2-page {
        font-size: clamp(18px, 3.2vw, 24px);
    }

    section#support_menu .container .container-l nav ul {
        padding-top: 160px;
    }

    section#support_menu .container .container-l nav ul li.btn {
        width: 100%;
        height: 92px;
        font-size: 1.6rem;
        max-width: none;
    }

    section#support_menu .container .container-l nav ul li.btn:not(:first-child) {
        margin-top: 10px;
    }

    section#support_menu .container .container-l nav ul li.btn a {
        padding-bottom: 10px;
    }

    section#support_menu .container .container-l nav ul li.btn a::after {
        bottom: 0;
    }

    ul.support_menu_content_wrap li.support_menu_content_bottom>div>div {
        width: 100%;
    }

    ul.support_menu_content_wrap li.support_menu_content_bottom>div {
        gap: 40px;
    }

    #support_menu02 li.support_menu_content_bottom>div {
        gap: 20px;
    }
}

@media screen and (max-width: 560px) {
    section#support_menu .container .container-l nav ul {
        padding-top: 120px;
    }

    ul.support_menu_wrap li.support_menu {
        background-color: #fff;
    }

    section#support_menu .container .container-l .h2-page {
        padding: 20px 5%;
        text-align: left;
    }

    section#support_menu .container .container-l .h2-page::before {
        border-right: 40px solid transparent;
        border-left: 40px solid transparent;
        border-top: 20px solid #fff;
    }

    section#support_menu .container .container-l nav ul {
        padding-top: 120px;
    }

    ul.support_menu_wrap li.support_menu .support_menu_title h3 {
        font-size: 20px;
    }

    ul.support_menu_wrap li.support_menu .support_menu_title p {
        font-size: 14px;
    }

    ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap h4 {
        font-size: 1.6rem;
        padding-left: 10px;
    }

    ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.support_menu_content h4::before {
        width: 4px;
    }

    ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.text h5 {
        padding-top: 10px;
        font-size: 1.6rem;
    }

    ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.text p {
        padding-top: 10px;
    }

    ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.text .detail {
        flex-direction: row;
    }

    ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.text .detail {
        margin-top: 10px;
    }

    ul.support_menu_content_wrap li.regular_consulting ul {
        flex-direction: row;
        gap: 10px;
    }

    ul.support_menu_content_wrap li.support_menu_content_bottom>div>div {
        flex-direction: column;
        gap: 10px;
    }

    ul.support_menu_content_wrap li.support_menu_content_bottom>div>div h5 {
        font-size: 1.6rem;
    }

    ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.text .supplement {
        font-size: 12px;
    }

    #support_menu03 .support_menu_content_seminar ul li>div {
        font-size: 16px;
    }
}

@media screen and (max-width: 425px) {
    ul.support_menu_content_wrap li.regular_consulting ul li {
        width: 100%;
    }

    ul.support_menu_wrap li.support_menu ul.support_menu_content_wrap li.contents_price>div>.text .detail div {
        font-size: 12px;
    }
}


/*********************
CONTENTS
**********************/
section#contents {
    background: url(../image/top/contents.jpg) top left / cover;
}

section#contents .section_accent .image {
    width: 42%;
}

ul.contents_item_wrap li.contents_item {
    width: calc(100% - 40px);
    background-color: #fff;
    position: relative;
    padding: 40px;
}

ul.contents_item_wrap li.contents_item:not(:first-child) {
    margin-top: 120px;
}

ul.contents_item_wrap li.contents_item .text {
    width: 50.8%;
}

ul.contents_item_wrap li.contents_item .text p {
    padding-top: 20px;
}

ul.contents_item_wrap li.contents_item .btn {
    max-width: 300px;
    height: 64px;
    margin-left: auto;
    margin-top: 20px;
}

ul.contents_item_wrap li.contents_item .btn a {
    background: linear-gradient(0deg, rgba(0, 48, 91, 1) 0%, rgba(65, 109, 148, 1) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 20px;
}

ul.contents_item_wrap li.contents_item .image {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 47.4%;
    height: auto;
    aspect-ratio: 3/2;
}

ul.contents_item_wrap li.contents_item .youtube {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 47.4%;
    height: auto;
    aspect-ratio: 16/9;
    cursor: pointer;
}

ul.contents_item_wrap li.contents_item .youtube iframe {
    width: 100%;
    height: 100%;
}

.player {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.thumb {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

@media screen and (max-width: 1200px) {
    ul.contents_item_wrap li.contents_item {
        width: calc(100% - 20px);
        padding: 20px;
    }

    ul.contents_item_wrap li.contents_item .image,
    ul.contents_item_wrap li.contents_item .youtube {
        top: -30px;
        right: -30px;
        width: 52%;
    }

    ul.contents_item_wrap li.contents_item:not(:first-child) {
        margin-top: 60px;
    }
}

@media screen and (max-width: 960px) {
    .contents_item_wrap {
        padding-top: 60px;
    }

    ul.contents_item_wrap li.contents_item {
        flex-direction: column;
    }

    ul.contents_item_wrap li.contents_item .image {
        position: static;
        width: 100%;
    }

    ul.contents_item_wrap li.contents_item .youtube {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
    }

    ul.contents_item_wrap li.contents_item .text {
        width: 100%;
    }

    ul.contents_item_wrap li.contents_item .text h3 {
        padding-top: 20px;
    }

    ul.contents_item_wrap li.contents_item:not(:first-child) {
        margin-top: 40px;
    }
}

@media screen and (max-width: 560px) {
    .contents_item_wrap {
        padding-top: 40px;
    }

    .contents_item_wrap .contents_item h3 {
        font-size: 1.8rem;
    }

    ul.contents_item_wrap li.contents_item .text p {
        padding-top: 10px;
    }

    ul.contents_item_wrap li.contents_item .btn {
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
    }

    ul.contents_item_wrap li.contents_item .btn a {
        font-size: 18px;
    }
}


/*********************
CASE_STUDY
**********************/
section#case_study .section_accent .image {
    width: 52.8%;
}

ul.case_study_item_wrap li.case_study_item {
    background-color: #fff;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .2);
}

ul.case_study_item_wrap li.case_study_item:not(:first-child) {
    margin-top: 60px;
}

ul.case_study_item_wrap li.case_study_item .case_study_title {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--main-color-1);
}

ul.case_study_item_wrap li.case_study_item .case_study_title .circle {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100px;
    height: 100px;
    background: linear-gradient(0deg, rgba(0, 48, 91, 1) 0%, rgba(65, 109, 148, 1) 100%);
    border-radius: 50%;
}

ul.case_study_item_wrap li.case_study_item .case_study_title .circle {
    color: #fff;
}

ul.case_study_item_wrap li.case_study_item .case_study_title .circle div {
    font-size: 18px;
    text-align: center;
    line-height: 1.75em;
}

ul.case_study_item_wrap li.case_study_item .case_study_title .circle span {
    font-size: 32px;
}

ul.case_study_item_wrap li.case_study_item .case_study_title h3 {
    width: 89.3%;
}

ul.case_study_item_wrap li.case_study_item .voice_wrap .image_wrap,
ul.case_study_item_wrap li.case_study_item .voice_wrap .text_wrap {
    width: 49.1%;
}

ul.case_study_item_wrap li.case_study_item .voice_wrap .image {
    height: auto;
    aspect-ratio: 3/2;
}

ul.case_study_item_wrap li.case_study_item .voice_wrap .image_wrap p {
    background-color: var(--main-color-1);
    color: #fff;
    padding: 6px 0;
    margin-top: 6px;
}

ul.case_study_item_wrap li.case_study_item h4 {
    padding-left: 16px;
    position: relative;
}

ul.case_study_item_wrap li.case_study_item h4::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background-color: var(--main-color-1);
    width: 6px;
    height: 100%;
}

ul.case_study_item_wrap li.case_study_item .detail {
    margin-top: 10px;
}

ul.case_study_item_wrap li.case_study_item .detail>div {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    width: calc((100% - 1.8%)/2);
    height: 64px;
    background-color: var(--main-color-1);
}

ul.case_study_item_wrap li.case_study_item .text p {
    padding-top: 10px;
}

ul.case_study_item_wrap li.case_study_item .before_after_wrap .arrow {
    width: 28px;
    height: 28px;
    align-self: center;
}

ul.case_study_item_wrap li.case_study_item .before_after_wrap .before_after_item {
    width: 48.2%;
}

ul.case_study_item_wrap li.case_study_item .before_after_wrap .before {
    background-color: #eee;
    padding: 10px;
    color: #333;
}

ul.case_study_item_wrap li.case_study_item .before_after_wrap .after {
    background-color: #FFF9F2;
    padding: 10px;
    color: var(--accent-color-1);
}

ul.case_study_item_wrap li.case_study_item .before_after_wrap .before_after_item .main_text {
    padding-left: 42px;
    position: relative;
}

ul.case_study_item_wrap li.case_study_item .before_after_wrap h4::before {
    background-color: #333;
}

ul.case_study_item_wrap li.case_study_item .before_after_wrap .after h4::before {
    background-color: var(--accent-color-1);
}

ul.case_study_item_wrap li.case_study_item .before_after_wrap .before_after_item .main_text::before {
    display: inline-block;
    position: absolute;
    content: "";
    top: 4px;
    left: 0;
    width: 32px;
    height: 32px;
    mask-image: url(../image/top/case_study_check.svg);
    background: #333;
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: cover;
}

ul.case_study_item_wrap li.case_study_item .before_after_wrap .after .main_text::before {
    background: linear-gradient(45deg, rgba(209, 125, 0, 1) 0%, rgba(221, 186, 134, 1) 100%);
}

ul.case_study_item_wrap li.case_study_item .before_after_wrap .after p {
    color: #333;
}


ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .image_wrap {
    width: 12.5%;
}

ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .image_wrap .image {
    width: 100%;
    height: auto;
}

ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .image_wrap p {
    font-size: 18px;
}

ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap {
    width: 83.9%;
    background-color: var(--base);
    padding: 20px;
    position: relative;
}

ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap::before {
    position: absolute;
    content: "";
    top: 54px;
    left: 0;
    transform: translateX(-100%);
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-right: 16px solid #EAEFF5;
    border-left: 0;
}

ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap ul.support_wrap {
    margin-top: 10px;
}

ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap ul.support_wrap li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32.2%;
    height: 140px;
    background-color: #fff;
}

ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap ul.support_wrap li>div .icon {
    width: 32px;
    height: 32px;
    margin: auto;
}

ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap ul.support_wrap li>div p {
    text-align: center;
    padding-top: 10px;
    font-size: 18px;
}


ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap>.main_text {
    padding-top: 10px;
}

ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap>p {
    padding-top: 10px;
}

@media screen and (max-width: 1200px) {
    ul.case_study_item_wrap li.case_study_item .case_study_title h3 {
        width: 85%;
    }
}

@media screen and (max-width: 960px) {
    ul.case_study_item_wrap li.case_study_item {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    ul.case_study_item_wrap li.case_study_item .case_study_title .circle {
        width: 80px;
        height: 80px;
    }

    ul.case_study_item_wrap li.case_study_item .case_study_title .circle div {
        font-size: 16px;
        line-height: 1.5em;
    }

    ul.case_study_item_wrap li.case_study_item .case_study_title .circle span {
        font-size: 24px;
    }

    ul.case_study_item_wrap li.case_study_item .case_study_title h3 {
        font-size: 2rem;
    }

    ul.case_study_item_wrap li.case_study_item .voice_wrap {
        flex-direction: column;
    }

    ul.case_study_item_wrap li.case_study_item .voice_wrap .image_wrap,
    ul.case_study_item_wrap li.case_study_item .voice_wrap .text_wrap {
        width: 100%;
    }

    ul.case_study_item_wrap li.case_study_item .voice_wrap .image_wrap {
        max-width: 600px;
        margin: auto;
    }

    ul.case_study_item_wrap li.case_study_item .voice_wrap .text_wrap {
        margin-top: 20px;
    }

    ul.case_study_item_wrap li.case_study_item .before_after_wrap {
        flex-direction: column;
        gap: 8px;
    }

    ul.case_study_item_wrap li.case_study_item .before_after_wrap .before_after_item {
        width: 100%;
    }

    ul.case_study_item_wrap li.case_study_item .before_after_wrap .arrow {
        transform: rotate(90deg);
    }

    ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap ul.support_wrap li>div p {
        font-size: 14px;
    }

    ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap .support_wrap {
        flex-direction: column;
        gap: 4px;
    }

    ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap ul.support_wrap li {
        width: 100%;
        height: 120px;
    }

    #case_study .large {
        font-size: 2rem;
    }
}

@media screen and (max-width: 768px) {
    ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap ul.support_wrap li>div {
        display: flex;
        gap: 10px;
    }

    ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap ul.support_wrap li>div p {
        padding-top: 0;
        font-size: 16px;
    }

    ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .image_wrap {
        width: 20%;
    }

    ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap {
        width: 74.9%;
        padding: 15px;
    }

    ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap::before {
        top: 28px;
    }

    ul.case_study_item_wrap li.case_study_item .case_study_title {
        flex-direction: column;
        gap: 10px;
    }

    ul.case_study_item_wrap li.case_study_item .case_study_title h3 {
        width: 100%;
    }
}

@media screen and (max-width: 560px) {
    ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap {
        width: 100%;
        padding: 10px;
        margin-top: 10px;
    }

    ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .image_wrap {
        width: 40%;
        max-width: 96px;
        margin: auto;
    }

    ul.case_study_item_wrap li.case_study_item .doctor_comment_wrap .text_wrap::before {
        display: none;
    }

    ul.case_study_item_wrap li.case_study_item .detail {
        gap: 4px;
    }

    ul.case_study_item_wrap li.case_study_item .detail>div {
        width: 100%;
    }

    #case_study ul.case_study_item_wrap li.case_study_item .before_after_wrap .before_after_item .main_text.large {
        font-size: 1.6rem;
    }
}


/*********************
FLOW
**********************/
section#flow {
    background: #F4F6F7;
}

section#flow .section_accent .image {
    width: 22.2%;
    min-width: 160px;
}

@media screen and (min-width: 768px) {

    .step-list .item {
        padding-left: 7.5rem;
        margin-bottom: .3125rem;
    }

    .step-list .item:not(:last-child):before {
        left: 110px;
    }

    .step-list .item-no {
        width: 180px;
        font-size: 2rem;
    }

    .step-list .item-content {
        width: calc(100% - 180px);
    }

    .step-list .item-content-title {
        margin-bottom: 1.1875rem;
    }
}

.step-list .item {
    position: relative;
    overflow-x: inherit;
    overflow-y: hidden;
    display: flex;
}

.step-list .item:not(:last-child):before {
    content: "";
    display: block;
    top: 4rem;
    width: 1px;
    height: 100%;
    position: absolute;
    background-color: #ccc;
}

.step-list .item-no {
    color: var(--accent-color-1);
    line-height: 1;
    padding-top: .875rem;
}

.step-list .item-content-title {
    line-height: 1.66667;
    letter-spacing: .15em;
    font-size: 20px;
}

.step-list .item-content-text {
    line-height: 1.5em;
    letter-spacing: .15em;
    padding-bottom: 4.625rem;
}

.step-list .item-content-text a {
    border-bottom: 1px solid var(--main-color-1);
}

@media screen and (max-width: 960px) {
    .step-list .item-no {
        width: 120px;
    }

    .step-list .item-content {
        width: calc(100% - 120px);
    }

    .step-list .item {
        padding-left: 0;
    }

    .step-list .item:not(:last-child):before {
        left: 30px;
    }
}

@media screen and (max-width: 560px) {
    .step-list .item-no {
        width: 80px;
    }

    .step-list .item-content {
        width: calc(100% - 80px);
    }

    .step-list .item:not(:last-child):before {
        left: 20px;
    }
}


/*********************
FAQ
**********************/
section#faq .section_accent .image {
    width: 20.5%;
    min-width: 160px;
}

section#faq .container-l {
    background-color: #fff;
    padding: 60px 0;
}

section#faq ul li:not(:first-child) {
    margin-top: 20px;
}

section#faq ul li dt {
    font-weight: 300;
    background-color: #EAEFF5;
    padding: 20px 20px 20px 54px;
    position: relative;
}

section#faq ul li dt::before {
    position: absolute;
    top: 16px;
    left: 20px;
    content: "Q";
    font-size: 20px;
    font-family: var(--font-min);
}

section#faq ul li dd {
    padding: 20px 20px 20px 54px;
    border: 1px solid #EAEFF5;
    position: relative;
}

section#faq ul li dd::before {
    position: absolute;
    top: 16px;
    left: 20px;
    content: "A";
    font-size: 20px;
    font-family: var(--font-min);
}

@media screen and (max-width: 960px) {
    section#faq .container-l {
        background-color: #fff;
        padding: 30px 0;
    }
}

@media screen and (max-width: 560px) {
    section#faq ul li dt {
        padding: 10px 10px 10px 38px;
    }

    section#faq ul li dt::before {
        top: 6px;
        left: 10px;
        font-size: 18px;
    }

    section#faq ul li dd {
        padding: 10px 10px 10px 38px;
    }

    section#faq ul li dd::before {
        top: 6px;
        left: 10px;
        font-size: 18px;
    }
}