@charset "utf-8";

/*    ------------------------------------------------
HD
------------------------------------------------    */
.generalHd {
    display: block;
    margin: -80px auto 80px;
    width: 480px;
    height: 210px;
    padding-top: 16px;
    border-radius: 50% / 0 0 100% 100%;
    background: #ffd844;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
}

.generalHd .smallTxt {
    font-size: 20px;
    font-weight: 500;
}

.generalHd .largeTxt {
    font-size: 60px;
    line-height: 1;
}

@media (max-width:750px) {
    .generalHd {
        margin: -40px auto 40px;
        width: 280px;
        height: 120px;
        padding-top: 8px;
        font-size: 21px;
    }

    .generalHd .smallTxt {
        font-size: 12px;
    }

    .generalHd .largeTxt {
        font-size: 35px;
    }
}

/*    ------------------------------------------------
fixedNav
------------------------------------------------    */
.fixedNav {
    display: none;
}

@media (max-width:750px) {
    .fixedNav {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        padding: 2vw 0;
        background: #ffffff;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
        /* 初期状態を非表示にしておく */
        transform: translateY(100%);
        opacity: 0;
        transition: transform 0.4s ease, opacity 0.3s ease;
    }

    .fixedNavBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45%;
        height: 10vw;
        border-radius: 1000px;
        margin: 0 1%;
        font-size: clamp(10px, 3.4vw, 18px);
        font-weight: 600;
        text-decoration: none;
    }
}

/*    ------------------------------------------------
mainVisualArea
------------------------------------------------    */
.mainVisualArea {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    z-index: 0;
    background-image: -moz-linear-gradient(-35deg, rgb(120, 200, 90) 0%, rgb(63, 168, 123) 100%);
    background-image: -webkit-linear-gradient(-35deg, rgb(120, 200, 90) 0%, rgb(63, 168, 123) 100%);
    background-image: -ms-linear-gradient(-35deg, rgb(120, 200, 90) 0%, rgb(63, 168, 123) 100%);
    color: #ffffff;
}

.mainVisualArea .secInner {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    padding: 36px 32px;
}

.mainVisualArea .secInner::after {
    content: "";
    display: block;
    position: absolute;
    top: 48px;
    right: -350px;
    z-index: -1;
    width: 750px;
    height: 400px;
    background: url(../image/index/index_mv_bg.svg) no-repeat;
    background-size: contain;
    opacity: 0.8;
}

.mainVisualMain {
    position: relative;
    z-index: 1;
    width: 616px;
}

.mainVisualNote {
    margin-top: 32px;
    padding: 12px;
    line-height: 1.2;
    font-size: 28px;
    font-weight: 600;
    background: #ffffff;
    color: #78c85a;
    text-align: center;
}

.mainVisualImg {
    position: absolute;
    right: -136px;
    bottom: 0;
    width: 576px;
}

.mainVisualArea .cvBtnTxt {
    margin-top: 24px;
}

@media (max-width:750px) {
    .mainVisualArea {
        display: block;
        height: auto;
    }

    .cvContentsWrap {
        margin: 0 16px;
        width: auto;
    }

    .mainVisualArea .secInner {
        display: block;
        width: auto;
        padding: 24px 16px 0;
    }

    .mainVisualArea .secInner::after {
        top: auto;
        right: 5%;
        bottom: 2%;
        width: 90%;
        height: 100%;
        background-position: bottom;
    }

    .mainVisualMain {
        width: 100%;
    }

    .mainVisualNote {
        margin-top: 24px;
        padding: 12px 0;
        font-size: clamp(18px, 5vw, 24px);
    }

    .mainVisualImg {
        position: relative;
        right: auto;
        left: auto;
        bottom: auto;
        margin: 24px auto 0;
        width: 67%;
    }

    .mainVisualArea .cvBtnTxt {
        margin-top: 0;
    }

    .mainVisualArea .cvBtnAreaWrap .secInner {
        display: block;
        padding: 24px 16px;
    }
}

@media (max-width:1064px) and (min-width:751px) {
    .mainVisualImg {
        right: -48px;
        width: 512px;
    }
}

/*    ------------------------------------------------
adMediaArea
------------------------------------------------    */
.adMediaArea {
    padding: 32px 0;
    overflow: hidden;
}

.adMediaTtl {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

.adMediaList {
    display: flex;
    width: max-content;
    margin-top: 24px;
}

.adMediaListItem {
    margin: 0 16px;
    width: auto;
    height: 40px;
}

.adMediaListItem img {
    width: inherit;
    height: inherit;
    object-fit: contain;
}

.js-sliderContainer {
    overflow: hidden;
    width: 100%;
}

.js-sliderItem {
    flex-shrink: 0;
}

.scrollAnimation {
    animation: scroll 50s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width:750px) {
    .adMediaArea {
        padding: 16px 0;
    }

    .adMediaTtl {
        font-size: clamp(10px, 4.5vw, 24px);
    }

    .adMediaList {
        margin-top: 16px;
    }

    .adMediaListItem {
        margin: 0 8px;
        height: 32px;
    }
}

/*    ------------------------------------------------
troubleArea
------------------------------------------------    */
.troubleArea {
    background: #f5f5f5;
}

.troubleHdBaloon {
    display: table;
    position: relative;
    margin: 0 auto;
    padding: 16px 40px;
    background: #78c85a;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
}

.troubleHdBaloon::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -26px;
    transform: translateX(-50%);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    width: 24px;
    height: 26px;
    background: #78c85a;
}

.troubleHdBaloon .largeTxt {
    font-size: 36px;
}

.troubleHd {
    margin: 16px auto 0;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

.troubleHd .largeTxt {
    font-size: 48px;
}

.troubleBox {
    position: relative;
    margin-top: 24px;
}

.troubleBlock {
    position: absolute;
    width: 208px;
    height: 256px;
    background: url(../image/index/index_bg_trouble_balloon.svg) no-repeat;
}

.troubleBlock:nth-child(3),
.troubleBlock:nth-child(4) {
    background: url(../image/index/index_bg_trouble_balloon2.svg) no-repeat;
}

.troubleBlock:nth-child(1) {
    top: 176px;
    left: 104px;
}

.troubleBlock:nth-child(2) {
    top: 24px;
    left: 272px;
}

.troubleBlock:nth-child(3) {
    top: 0;
    right: 272px;
}

.troubleBlock:nth-child(4) {
    top: 152px;
    right: 104px;
}

.troubleBlockNote {
    position: absolute;
    top: 47%;
    left: 50%;
    width: 67%;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.troubleBlock .troubleBlockNote {
    transform: translate(-50%, -70%)
}

.troubleImg {
    margin: 296px auto 0;
    width: 290px;
    height: auto;
}

@media (max-width:750px) {
    .troubleHdBaloon {
        padding: 8px 16px;
        font-size: 18px;
    }

    .troubleHdBaloon::after {
        bottom: -13px;
        width: 12px;
        height: 13px;
    }

    .troubleHdBaloon .largeTxt {
        font-size: 24px;
    }

    .troubleHd {
        margin: 16px auto 0;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
    }

    .troubleHd .largeTxt {
        font-size: 30px;
    }

    .troubleBox {
        margin-top: 16px;
    }

    .troubleBlock {
        width: 142px;
        height: 178px;
    }

    .troubleBlock:nth-child(1),
    .troubleBlock:nth-child(3) {
        background: url(../image/index/index_bg_trouble_balloon.svg) no-repeat;
    }

    .troubleBlock:nth-child(2),
    .troubleBlock:nth-child(4) {
        background: url(../image/index/index_bg_trouble_balloon2.svg) no-repeat;
    }

    .troubleBlock:nth-child(1) {
        top: 24px;
        left: 0;
    }

    .troubleBlock:nth-child(2) {
        top: 0;
        left: 156px;
    }

    .troubleBlock:nth-child(3) {
        top: 192px;
        right: 156px;
    }

    .troubleBlock:nth-child(4) {
        top: 168px;
        right: 0;
    }

    .troubleBlockNote {
        top: 45%;
        width: 71%;
        font-size: 12px;
    }

    .troubleImg {
        margin: 376px auto 0;
        width: 50%;
    }
}

/*    ------------------------------------------------
aboutArea
------------------------------------------------    */
.aboutArea {
    position: relative;
    background: #78c85a;
    color: #ffffff;
}

.aboutArea::before {
    content: "";
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 80px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: #ffd844;
    z-index: 1;
}

.aboutHd {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

.aboutHd .subColorUnderlineFull {
    display: inline-block;
    margin: 8px 0px;
    padding: 2px 16px;
    line-height: 1.6;
}

.aboutHd .subColorUnderlineFull:first-of-type {
    margin-top: 16px;
}

.aboutPlan {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 24px;
}

.aboutPlanItem {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    width: 188px;
    height: 72px;
    line-height: 1.3;
    font-size: 17px;
    font-weight: 600;
    color: #78c85a;
    text-align: center;
    background: #ffffff;
    clip-path: polygon(6% 0, 94% 0, 100% 12%, 100% 88%, 94% 100%, 6% 100%, 0 88%, 0 12%);
}

.aboutPlanItem:nth-child(even) {
    background: #dff1c0;
}

.aboutAucfanMarketing {
    position: relative;
    margin-top: 96px;
    padding: 80px 48px 40px;
    background: #dff1c0;
    border: 8px solid #ffffff;
    color: #222222;
}

.aboutAucfanMarketingHd {
    position: absolute;
    top: -56px;
    left: -24px;
    width: 320px;
    height: 130px;
    background: url(../image/index/index_hd_balloon.svg) no-repeat;
    background-size: contain;

}

.aboutAucfanMarketingHdInner {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    font-size: 22px;
    font-weight: 600;
    color: #78c85a;
    line-height: 1.3;
}

.aboutAucfanMarketingTtl {
    font-size: 30px;
    font-weight: 600;
    color: #78c85a;
    text-align: center;
}

.aboutAucfanMarketingTtl:not(.aboutAucfanMarketingTtl:first-of-type) {
    margin-top: 64px;
}

.aboutAucfanMarketingNote {
    display: table;
    margin: 32px auto 0;
}

.aboutAucfanMarketingDataBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 32px;
}

.aboutAucfanMarketingDataBoxImg {
    margin-top: 16px;
}

.aboutAucfanMarketingDataBlock {
    width: 48%;
    padding: 24px 0;
    border-radius: 20px;
    background: #ffffff;
}

.aboutAucfanMarketingDataBoxImg .aboutAucfanMarketingDataBlock {
    position: relative;
    width: 44%;
    padding: 0;
    background: none;
    border-radius: 0;
}

.aboutAucfanMarketingDataBoxImg .aboutAucfanMarketingDataBlock:first-of-type::after {
    content: url(../image/index/index_img_about_arrow.webp);
    position: absolute;
    top: 50%;
    right: -136px;
    z-index: 1;
}

.aboutAucfanMarketingDataBlockName {
    text-align: center;
}

.aboutAucfanMarketingDataBlockName img {
    height: 32px;
    object-fit: contain;
}

.aboutAucfanMarketingDataBlockServiceDefinitionWrap {
    display: table;
    margin: 16px auto 0;
}

.aboutAucfanMarketingDataBlockServiceDefinition {
    display: flex;
}

.aboutAucfanMarketingDataBlockServiceDefinitionTtl {
    width: 6em;
    padding: 2px 4px;
    background: #78c85a;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
    margin-top: 8px;
}

.aboutAucfanMarketingDataBlockServiceDefinitionDetail {
    margin-top: 8px;
    margin-left: 8px;
}

.aboutAucfanMarketingImg {
    position: relative;
    z-index: 1;
    margin: -32px auto 0;
    width: 264px;
}

.aboutAucfanServiceBtn {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: 40px auto 0;
    width: 560px;
    height: 48px;
    border-radius: 1000px;
    background: #ffffff;
    font-size: 20px;
    font-weight: 600;
    color: #78c85a;
    cursor: pointer;
}

.aboutAucfanServiceBtnIco {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #78c85a;
}

.aboutAucfanServiceBtnIco::before,
.aboutAucfanServiceBtnIco::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 2px;
    background-color: #ffffff;
    transition: opacity 0.3s;
}

.aboutAucfanServiceBtnIco::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform 0.3s;
}

.aboutAucfanServiceBtn.on .aboutAucfanServiceBtnIco::before {
    opacity: 0;
}

.aboutAucfanServiceBtn.on .aboutAucfanServiceBtnIco::after {
    transform: translate(-50%, -50%) rotate(180deg);
}

.aboutAucfanServiceListWrap {
    display: none;
}

.aboutAucfanServiceListBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 32px;
}

.aboutAucfanServiceListBlock {
    margin-top: 16px;
    border-radius: 20px;
    background: #ffffff;
}

.aboutAucfanServiceListBox.col2 .aboutAucfanServiceListBlock {
    width: 49%;
    padding: 24px 16px;
}

.aboutAucfanServiceListBox.col3 .aboutAucfanServiceListBlock {
    width: 32%;
    padding: 32px 8px;
}

.aboutAucfanServiceListBlockName {
    display: flex;
    align-items: center;
    justify-content: center;
}

.aboutAucfanServiceListBlockName img {
    width: 200px;
    height: 40px;
    object-fit: contain;
}

.aboutAucfanServiceListBlockNote {
    margin-top: 16px;
    font-size: 15px;
    color: #222222;
    text-align: center;
}

.aboutAucfanServiceListBox.col2 .aboutAucfanServiceListBlockNote {
    display: table;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.aboutAucfanServiceListHd {
    margin: 24px 0 -24px;
    ;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
}

@media (max-width:750px) {
    .aboutArea::before {
        top: -16px;
        width: 80px;
        height: 40px;
    }

    .aboutHd {
        font-size: 20px;
    }

    .aboutHd .subColorUnderlineFull {
        margin: 4px 0;
        padding: 2px 8px;
    }

    .aboutHd .subColorUnderlineFull:first-of-type {
        margin-top: 16px;
    }

    .aboutPlan {
        margin-top: 8px;
    }

    .aboutPlanItem {
        margin-top: 12px;
        width: 48%;
        height: 56px;
        font-size: 14px;
    }

    .aboutPlanItem:nth-child(even) {
        background: #ffffff;
    }

    .aboutPlanItem:nth-child(4n+2),
    .aboutPlanItem:nth-child(4n+3) {
        background: #dff1c0;
    }

    .aboutAucfanMarketing {
        margin-top: 72px;
        padding: 40px 16px 24px;
        border: 4px solid #ffffff;
    }

    .aboutAucfanMarketingHd {
        top: -48px;
        left: -16px;
        width: 210px;
        height: 88px;
    }

    .aboutAucfanMarketingHdInner {
        top: 45%;
        width: 80%;
        font-size: 14px;
    }

    .aboutAucfanMarketingTtl {
        font-size: 18px;
    }

    .aboutAucfanMarketingTtl:not(.aboutAucfanMarketingTtl:first-of-type) {
        margin-top: 24px;
    }

    .aboutAucfanMarketingNote {
        margin: 16px auto 0;
    }

    .aboutAucfanMarketingDataBox {
        display: block;
        margin-top: 24px;
    }

    .aboutAucfanMarketingDataBoxImg {
        margin-top: 16px;
    }

    .aboutAucfanMarketingDataBlock {
        margin-top: 16px;
        width: auto;
        padding: 16px 0;
        border-radius: 16px;
    }

    .aboutAucfanMarketingDataBoxImg .aboutAucfanMarketingDataBlock {
        width: auto;
    }

    .aboutAucfanMarketingDataBoxImg .aboutAucfanMarketingDataBlock:first-of-type::after {
        top: 85%;
        right: auto;
        left: 9%;
        transform: rotate(110deg) scale(0.5);
        transform-origin: left top;
    }

    .aboutAucfanMarketingDataBlockName img {
        height: 24px;
    }

    .aboutAucfanMarketingDataBlockServiceDefinitionWrap {
        display: table;
        margin: 12px auto 0;
    }

    .aboutAucfanMarketingDataBlockServiceDefinitionTtl {
        width: 6em;
        padding: 2px 4px;
        font-size: 12px;
        margin-top: 8px;
    }

    .aboutAucfanMarketingImg {
        margin: -6px auto 0;
        width: 55%;
    }

    .aboutAucfanServiceBtn {
        margin: 24px auto 0;
        width: 100%;
        height: 40px;
        font-size: 13px;
    }

    .aboutAucfanServiceBtnIco {
        right: 16px;
        width: 20px;
        height: 20px;
    }

    .aboutAucfanServiceBtnIco::before,
    .aboutAucfanServiceBtnIco::after {
        width: 12px;
        height: 2px;
    }

    .aboutAucfanServiceListBox {
        display: block;
        margin-top: 24px;
    }

    .aboutAucfanServiceListBlock {
        margin-top: 16px;
        border-radius: 10px;
    }

    .aboutAucfanServiceListBox.col2 .aboutAucfanServiceListBlock,
    .aboutAucfanServiceListBox.col3 .aboutAucfanServiceListBlock {
        display: flex;
        justify-content: space-between;
        width: auto;
        padding: 16px 16px;
        ;
    }

    .aboutAucfanServiceListBox.col3 .aboutAucfanServiceListBlock {
        padding: 8px 16px;
        ;
    }

    .aboutAucfanServiceListBlockName {
        width: 35%;
    }

    .aboutAucfanServiceListBlockName img {
        width: 100%;
        height: auto;
        max-height: 32px;
    }

    .aboutAucfanServiceListBlockNote {
        width: 57%;
        margin-top: auto;
        font-size: 13px;
    }

    .aboutAucfanServiceListBox.col2 .aboutAucfanServiceListBlockNote,
    .aboutAucfanServiceListBox.col3 .aboutAucfanServiceListBlockNote {
        display: flex;
        align-items: center;
        margin-left: 0;
        margin-right: 0;
        min-height: 5em;
        text-align: left;
        line-height: 1.4;
    }

    .aboutAucfanServiceListHd {
        margin: 24px 0 -8px;
        font-size: 18px;
        line-height: 1;
    }
}

/*    ------------------------------------------------
reasonArea
------------------------------------------------    */
.reasonArea {
    background: url(../image/index/index_bg_grid.png) repeat;
}

.reasonHd {
    display: flex;
    align-items: center;
    margin-top: 40px;
    color: #78c85a;
}

.reasonHd:first-of-type {
    margin-top: 0;
}

.reasonHdNum {
    font-size: 130px;
    font-family: "din-condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
}

.reasonHdNote {
    margin-left: 32px;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.3;
}

.reasonSubHd {
    font-size: 26px;
    font-weight: 700;
    line-height: 2.4;
}

.reasonSubHd .mainColorUnderlineFull {
    padding: 8px 24px;
}

.reasonNoteBlock {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-between;
}

.reasonNote {
    margin-top: 24px;
    width: 76%;
}

.reasonNoteImg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 17%;
}

.reasonEitherBox {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 64px;
}

.reasonEitherBlock {
    display: flex;
    flex-direction: column;
    width: 48%;
    padding: 32px 24px;
}

.reasonEitherGeneral {
    background: #dff1c0;
}

.reasonEitherAucfan {
    background: #78c85a;
    color: #ffffff;
}

.reasonEitherTtl {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

.reasonEitherNote {
    flex-grow: 0.5;
    margin-top: 24px;
}

.reasonEitherTaskNumImg {
    margin-top: 16px;
    padding: 0 32px;
}

.reasonEitherArrowNote {
    position: relative;
    margin-top: 24px;
    z-index: 1;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: #222222;
}

.reasonEitherArrowNote .reasonEitherArrowNoteAdjust {
    position: relative;
    top: 16px;
}

.reasonEitherArrowNote:last-of-type {
    padding-top: 16px;
}

.reasonEitherArrowNote::after {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 80px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: #ffd844;
    z-index: -1;
}

.reasonEitherArrowNote .smallTxt {
    font-size: 16px;
}

.reasonEitherGraphBox {
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 56px;
    margin-bottom: 24px;
}

.reasonEitherGraphBlock {
    position: relative;
}

.reasonEitherGraphWrap {
    width: 50%;
}

.reasonEitherGraph {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
}

.reasonEitherGraphInner {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 130px;
    border-radius: 50%;
    background: #ffffff;
}

.reasonEitherGraphInner::after {
    content: "";
    display: block;
    padding-top: 100%;
}

.reasonEitherGraphImg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
}

.reasonEitherFraction {
    width: 96px;
    margin-left: 24px;
    font-size: 80px;
    font-family: "din-condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    text-align: center;
}

.reasonEitherGeneral .reasonEitherFraction {
    color: #78c85a;
}

.reasonEitherGeneral .reasonEitherFraction div:first-child {
    border-bottom: 2px solid #78c85a;
}

.reasonEitherAucfan .reasonEitherFraction {
    color: #ff773b;
}

.reasonEitherAucfan .reasonEitherFraction div:first-child {
    border-bottom: 2px solid #ff773b;
}

.reasonEitherBlockConclusion {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    margin-top: 24px;
    padding: 24px 24px;
    font-size: 20px;
    font-weight: 600;
}

.reasonEitherGeneral .reasonEitherBlockConclusion {
    background: #ffffff;
    color: #222222;
}

.reasonEitherAucfan .reasonEitherBlockConclusion {
    background: #fff8de;
    color: #ff773b;
}

.reasonEitherBoxSchematic .reasonEitherSchematicImg {
    flex-grow: 1;
    padding: 32px;
}

.reasonEitherBoxSchematic .reasonEitherBlockConclusion {
    flex-grow: 0;
}

.reasonStepBox {
    margin-top: 40px;
    padding: 40px 32px;
    background: #dff1c0;
}

.reasonStepBlock {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin-top: 56px;
    padding: 0 96px;
    height: 312px;
    background: #ffffff;
}

.reasonStepBlock:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 104px;
    height: 48px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: #ffd844;
    z-index: 1;
}

.reasonStepBlock:first-child {
    margin-top: 0;
}

.reasonStepBoxTtl {
    position: absolute;
    top: -24px;
    left: -16px;
    width: 269px;
    height: 109px;
    background: url(../image/index/index_hd_balloon2.svg) no-repeat;
    background-size: contain;
}

.reasonStepBoxTtlInner {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    text-align: center;
}

.reasonCreativeSummary {
    position: relative;
    margin-top: 40px;
}

.reasonCreativeSummary::after {
    content: "";
    position: absolute;
    bottom: -88px;
    left: 50%;
    transform: translateX(-50%);
    width: 104px;
    height: 48px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: #ff773b;
    z-index: 1;
}

.reasonCreativeResult {
    margin: 96px auto 0;
    width: 748px;
}


@media (max-width:750px) {
    .reasonHdNum {
        font-size: 65px;
    }

    .reasonHdNote {
        margin-left: 16px;
        font-size: 18px;
    }

    .reasonSubHd {
        font-size: 17px;
    }

    .reasonSubHd .mainColorUnderlineFull {
        display: table;
        margin-top: 4px;
        padding: 8px 8px;
    }

    .reasonNoteBox {
        display: flex;
        justify-content: space-between;
        align-items: end;
        margin-top: 16px;
    }

    .reasonNoteBlock:first-child {
        width: 65%;
    }

    .reasonNoteBlock:last-child {
        width: 30%;
    }

    .reasonNoteBlock:last-child.reasonNoteBlockImgFirst {
        width: 38%;
    }

    .reasonNote {
        margin-top: 24px;
        width: auto;
    }

    .reasonNoteImg {
        margin-top: 0;
        width: auto;
    }

    .reasonEitherBox {
        display: block;
        margin-top: 24px;
        margin-bottom: 40px;
    }

    .reasonEitherBlock {
        margin-top: 24px;
        width: auto;
        padding: 24px 16px;
    }

    .reasonEitherTtl {
        font-size: 18px;
    }

    .reasonEitherNote {
        margin-top: 16px;
    }

    .reasonEitherTaskNumImg {
        margin-top: 16px;
        padding: 0 32px;
    }

    .reasonEitherArrowNote {
        margin-top: 24px;
        font-size: 18px;
    }

    .reasonEitherArrowNote:last-of-type {
        padding-top: 16px;
    }

    .reasonEitherArrowNote::after {
        top: -8px;
        width: 160px;
        height: 72px;
    }

    .reasonEitherArrowNote .smallTxt {
        font-size: 12px;
    }

    .reasonEitherGraphBox {
        margin-top: 56px;
        margin-bottom: 16px;
    }

    .reasonEitherGraphWrap {
        width: 55%;
    }

    .reasonEitherGraph {
        width: 220px;
        height: 220px;
    }

    .reasonEitherGraphInner {
        width: 96px;
    }

    .reasonEitherGraphImg {
        width: 96px;
    }

    .reasonEitherFraction {
        width: 80px;
        margin-left: 16px;
        font-size: 64px;
    }

    .reasonEitherBlockConclusion {
        margin-top: 24px;
        padding: 24px 16px;
        font-size: 15px;
    }

    .reasonEitherBoxSchematic .reasonEitherSchematicImg {
        margin-top: 16px;
        padding: 0 16px;
    }

    .reasonStepBox {
        margin-top: 24px;
        padding: 64px 16px 24px;
    }

    .reasonStepBlock {
        margin-top: 120px;
        padding: 48px 32px 24px;
        height: auto;
    }

    .reasonStepBlock:not(:last-child)::after {
        bottom: -64px;
        width: 88px;
        height: 40px;
    }

    .reasonStepBoxTtl {
        top: -40px;
        left: -8px;
        width: 210px;
        height: 88px;
    }

    .reasonStepBoxTtlInner {
        top: 45%;
        width: 80%;
        font-size: 18px;
    }

    .reasonCreativeSummary {
        margin-top: 24px;
    }

    .reasonCreativeSummary::after {
        bottom: -64px;
        width: 80px;
        height: 40px;
    }

    .reasonCreativeResult {
        margin: 64px auto 0;
        width: auto;
    }
}


/*    ------------------------------------------------
caseArea
------------------------------------------------    */
.caseArea {
    background: #fffbeb;
}

.caseBox {
    margin-top: 40px;
}

.caseBlock {
    margin-top: 40px;
    padding: 40px 32px;
    background: #ffffff;
}

.caseBlock:first-child {
    margin-top: 0;
}

.caseSummary {
    display: flex;
}

.caseSummaryImg {
    position: relative;
    width: 304px;
}

.caseSummaryImgAnnotation {
    position: absolute;
    right: 8px;
    bottom: 8px;
    text-align: right;
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8),
        0 0 2px rgba(0, 0, 0, 0.8),
        0 0 2px rgba(0, 0, 0, 0.8),
        0 0 2px rgba(0, 0, 0, 0.8);
}

.caseSummaryInfo {
    margin-left: 64px;
}

.caseSummaryInfoName {
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: 600;
}

.caseSummaryInfoDefinition {
    display: flex;
}

.caseSummaryInfoDefinitionTtl {
    margin-top: 8px;
    width: 6em;
    padding: 2px 4px;
    background: #78c85a;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
}

.caseSummaryInfoDefinitionDetail {
    margin-top: 8px;
    margin-left: 8px;
}

.caseSummaryInfoDefinitionDetailMedia {
    display: flex;
    flex-wrap: wrap;
    margin-top: -8px;
    margin-left: -8px;
}

.caseSummaryInfoDefinitionDetailMediaItem {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    margin-top: 8px;
    padding: 8px 16px;
    border-radius: 1000px;
    line-height: 1;
    text-align: center;
    background: #eeeeee;
    font-size: clamp(10px, 3.5vw, 13px);
    font-weight: 500;
    color: #222222;
}

.caseBeforeAfter {
    display: flex;
    margin-top: 56px;
}

.caseBefore,
.caseAfter {
    position: relative;
    width: 50%;
    padding: 56px 24px 24px;
}

.caseBefore {
    position: relative;
    background: #f5f5f5;
}

.caseAfter {
    background: #dff1c0;
}

.caseBeforeTtl,
.caseAfterTtl {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: -32px;
    width: 76px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
}

.caseBeforeTtl::after,
.caseAfterTtl::after {
    content: "";
    display: block;
    padding-top: 100%;
}

.caseBeforeTtl {
    background: #aaaaaa;
}

.caseAfterTtl {
    background: #78c85a;
}

.caseBeforeListItem {
    margin-top: 8px;
    padding-left: 1em;
    font-size: 18px;
    line-height: 1.3;
}

.caseBeforeListItem:first-child {
    margin-top: 0;
}

.caseBeforeListItem::before {
    content: "・";
    margin-left: -1em;
}

.caseAfterDefinitionTtl {
    margin-top: 16px;
    padding-left: 8px;
    border-left: 4px solid #78c85a;
    font-size: 21px;
    font-weight: 600;
    color: #78c85a;
    line-height: 1.2;
}

.caseAfterDefinitionTtl:first-child {
    margin-top: 0;
}

.caseAfterDefinitionDetail {
    margin-top: 8px;
    font-size: 18px;
    line-height: 1.3;
}

.caseSummaryResultBox {
    position: relative;
    margin-top: 120px;
}

.caseSummaryResultBox::after {
    content: "";
    position: absolute;
    top: -88px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 64px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: #ffd844;
    z-index: 1;
}

.caseSummaryResultBlock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 40px;
}

.caseSummaryResultBlockDefinition {
    display: flex;
    flex-wrap: wrap;
    height: 96px;
}

.caseSummaryResultBlockDefinitionTtl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 136px;
    background: #78c85a;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
}

.caseSummaryResultBlockDefinitionDetail {
    width: 584px;
    border: 2px solid #dddddd;
    border-left: none;
}

.caseSummaryResultBlockDefinitionDetailNum {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.caseSummaryResultBlockDefinitionDetailNum .emphasisTxt {
    font-weight: 600;
}

.caseSummaryResultBlockDefinitionDetailNumBefore,
.caseSummaryResultBlockDefinitionDetailNumAfter {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: 18px;
}

.caseSummaryResultBlockDefinitionDetailNumBefore {
    width: 55%;
}

.caseSummaryResultBlockDefinitionDetailNumAfter {
    width: 45%;
}

.caseSummaryResultBlockDefinitionDetailNumBefore .largeTxt {
    font-size: 30px;
}

.caseSummaryResultBlockDefinitionDetailNumAfter .largeTxt {
    font-size: 46px;
}

.caseSummaryResultBlockDefinitionDetailNum::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 73px;
    height: 51px;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path fill-rule="evenodd" fill="rgb(255, 216, 68)" d="M5.450,14.089 L-0.000,14.089 L-0.000,36.905 L5.450,36.905 L5.450,14.089 ZM27.220,36.905 L27.220,14.089 L21.791,14.089 L21.791,36.905 L27.220,36.905 ZM11.056,14.089 L11.056,36.905 L16.184,36.905 L16.184,14.089 L11.056,14.089 ZM32.827,14.089 L32.827,36.905 L42.885,36.905 L42.885,50.999 L72.998,25.500 L42.885,-0.002 L42.885,14.089 L32.827,14.089 Z"/></svg>') no-repeat center center;
}

.caseSummaryResultBlockChange {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin-left: 32px;
    width: 148px;
    border-radius: 50%;
    background: #ffd844;
}

.caseSummaryResultBlockChange::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    transform: translateY(-50%);
    width: 26px;
    height: 18px;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: #ffd844;
}

.caseSummaryResultBlockChange::after {
    content: "";
    display: block;
    padding-top: 100%;
}

.caseSummaryResultBlockChangeNote {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}

.caseSummaryResultBlockChangeNote .largeTxt {
    font-size: 40px;
}

@media (max-width:750px) {
    .caseBlock {
        margin-top: 24px;
        padding: 24px 16px;
    }

    .caseSummary {
        display: flex;
        flex-direction: column-reverse;
    }

    .caseSummaryImg {
        margin-top: 16px;
        width: auto;
    }

    .caseSummaryImgAnnotation {
        font-size: 10px;
    }

    .caseSummaryInfo {
        margin-left: 0;
    }

    .caseSummaryInfoName {
        margin-bottom: 8px;
        font-size: 18px;
    }

    .caseSummaryInfoDefinition {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .caseSummaryInfoDefinitionTtl {
        margin-top: 8px;
        width: 6em;
        padding: 2px 4px;
        font-size: 14px;
    }

    .caseSummaryInfoDefinitionDetail {
        margin-top: 8px;
        margin-left: 8px;
        width: calc(76% - 6vw);
        font-size: 14px;
    }

    .caseBeforeAfter {
        display: block;
        margin-top: 40px;
    }

    .caseBefore,
    .caseAfter {
        margin-top: 32px;
        width: auto;
        padding: 40px 16px 16px;
    }

    .caseBeforeTtl,
    .caseAfterTtl {
        top: -16px;
        width: 48px;
        font-size: 14px;
    }

    .caseBeforeListItem {
        margin-top: 8px;
        font-size: 15px;
    }

    .caseAfterDefinitionTtl {
        font-size: 16px;
    }

    .caseAfterDefinitionTtl:first-child {
        margin-top: 0;
    }

    .caseAfterDefinitionDetail {
        margin-top: 8px;
        font-size: 14px;
    }

    .caseSummaryResultBox {
        margin-top: 72px;
    }

    .caseSummaryResultBox::after {
        top: -56px;
        width: 96px;
        height: 40px;
    }

    .caseSummaryResultBlock {
        display: block;
        position: relative;
        margin-top: 24px;
    }

    .caseSummaryResultBlockDefinition {
        display: block;
        height: auto;
        padding: 0 8px 16px;
        background: #78c85a;
    }

    .caseSummaryResultBlockDefinitionTtl {
        display: block;
        width: auto;
        padding: 16px 0;
        font-size: 20px;
        text-align: center;
    }

    .caseSummaryResultBlockDefinitionDetail {
        width: auto;
        padding: 4px 0;
        border: none;
        background: #ffffff;
    }

    .caseSummaryResultBlockDefinitionDetailNum {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .caseSummaryResultBlockDefinitionDetailNumBefore,
    .caseSummaryResultBlockDefinitionDetailNumAfter {
        display: flex;
        align-items: baseline;
        justify-content: center;
        font-size: 10px;
    }

    .caseSummaryResultBlockDefinitionDetailNumBefore {
        width: 52%;
    }

    .caseSummaryResultBlockDefinitionDetailNumAfter {
        width: 48%;
    }

    .caseSummaryResultBlockDefinitionDetailNumBefore .largeTxt {
        font-size: 20px;
    }

    .caseSummaryResultBlockDefinitionDetailNumAfter .largeTxt {
        font-size: 27px;
    }

    .caseSummaryResultBlockDefinitionDetailNum::after {
        transform: translate(-50%, -50%) scale(0.42)
    }

    .caseSummaryResultBlockChange {
        position: absolute;
        top: -8px;
        right: 8%;
        margin-left: auto;
        width: 80px;
    }

    .caseSummaryResultBlockChange::before {
        left: -14px;
        width: 15px;
        height: 10px;
    }

    .caseSummaryResultBlockChangeNote {
        font-size: 11px;
    }

    .caseSummaryResultBlockChangeNote .largeTxt {
        font-size: 20px;
    }
}

/*    ------------------------------------------------
flowArea
------------------------------------------------    */
.flowArea {
    background: url(../image/index/index_bg_grid.png) repeat;
}

.flowBoxWrap {
    margin: 40px auto 0;
    width: 800px;
}

.flowBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flowBlock {
    display: flex;
    position: relative;
    justify-content: space-between;
    margin-top: 80px;
    width: 100%;
    padding: 32px;
    background: #dff1c0;
}

.flowBlock:first-child {
    margin-top: 0;
}

.flowBlock::after {
    content: "";
    position: absolute;
    bottom: -64px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 48px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: #ffd844;
    z-index: 1;
}

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

.flowDetail {
    width: 416px;
}

.flowHdWrap {
    display: flex;
    align-items: center;
}

.flowNumWrap {
    position: relative;
    margin-right: 24px;
    width: 76px;
    border-radius: 50%;
    background: #78c85a;
}

.flowNumWrap::after {
    content: "";
    display: block;
    padding-top: 100%;
}

.flowNum {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 1.1;
}

.flowNum .largeTxt {
    font-size: 28px;
    line-height: 1;
}

.flowHd {
    font-size: 24px;
    font-weight: 600;
    color: #222222;
}

.flowImg {
    width: 272px;
}

.flowNote {
    margin-top: 24px;
    font-size: 16px;
}

@media (max-width:750px) {
    .flowBoxWrap {
        margin-top: 32px;
        width: auto;
    }

    .flowBox {
        display: block;
    }

    .flowBlock {
        display: block;
        padding: 24px 16px;
    }

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

    .flowDetail {
        width: auto;
    }

    .flowNumWrap {
        margin-right: 16px;
        width: 64px;
    }

    .flowNum {
        font-size: 12px;
    }

    .flowNum .largeTxt {
        font-size: 24px;
    }

    .flowHd {
        line-height: 1.3;
        font-size: 17px;
    }

    .flowImg {
        margin-top: 16px;
        width: 100%;
    }

    .flowNote {
        margin-top: 16px;
        font-size: 15px;
    }
}

/*    ------------------------------------------------
faqArea
------------------------------------------------    */
.faqArea {
    background: #fffbeb;
}

.faqQuestion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: 40px;
    padding: 32px 72px 32px 120px;
    background: #78c85a;
    line-height: 1.3;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
}

.faqQuestion::before,
.faqAnswer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 32px;
    transform: translateY(-50%);
    margin: auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.faqQuestion::before {
    background: #ffffff;
}

.faqAnswer::before {
    background: #78c85a;
}

.faqQuestion::after,
.faqAnswer::after {
    position: absolute;
    top: 50%;
    left: 32px;
    transform: translateY(-50%);
    width: 60px;
    text-align: center;
    font-size: 36px;
}

.faqQuestion::after {
    content: "Q";
    color: #78c85a;
}

.faqAnswer::after {
    content: "A";
    color: #ffffff;
}

.toggleIcon {
    position: absolute;
    right: 30px;
    width: 22px;
    height: 3px;
    background: #ffffff;
}

.toggleIcon::before {
    content: "";
    position: absolute;
    top: -9px;
    right: 9px;
    width: 3px;
    height: 22px;
    background: #ffffff;
}

.on .toggleIcon::before {
    display: none;
}

.faqAnswer {
    display: none;
    position: relative;
    padding: 32px 32px 32px 120px;
    background: #ffffff;
    font-size: 18px;
}

.faqAnswer::before,
.faqAnswer::after {
    top: 32px;
    transform: none;
}

.faqAnswerNote {
    display: block;
    margin: 16px 0;
    padding: 24px;
    background: #f5f5f5;
}

@media (max-width:750px) {
    .faqBlock {
        margin-top: 32px;
    }

    .faqQuestion {
        margin-top: 24px;
        padding: 16px 40px 16px 68px;
        font-size: 15px;
    }

    .faqQuestion::before {
        left: 16px;
        width: 40px;
        height: 40px;
    }

    .faqQuestion::before,
    .faqAnswer::before {
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        margin: auto;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .faqQuestion::after,
    .faqAnswer::after {
        left: 16px;
        width: 40px;
        font-size: 24px;
    }

    .toggleIcon {
        right: 16px;
        width: 16px;
        height: 2px;
    }

    .toggleIcon::before {
        top: -7px;
        right: 7px;
        width: 2px;
        height: 16px;
    }

    .faqAnswer {
        padding: 16px 16px 16px 68px;
        font-size: 15px;
    }

    .faqAnswer::before,
    .faqAnswer::after {
        top: 32px;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
    }

    .faqAnswerNote {
        width: 100%;
        white-space: nowrap;
    }
}

/*    ------------------------------------------------
companyArea
------------------------------------------------    */
.companyArea {
    background: #dff1c0;
}

.companyTable {
    margin-top: 80px;
    width: 100%;
}

.companyTable th,
.companyTable td {
    border-top: 1px solid #dddddd;
}

.companyTable tr:first-of-type th,
.companyTable tr:first-of-type td {
    border: none;
}

.companyTable th {
    width: 230px;
    padding: 32px;
    background: #78c85a;
    color: #ffffff;
}

.companyTable td {
    padding: 32px 32px 32px 40px;
    background: #ffffff;
}

.companyTxt {
    margin-top: 32px;
    font-size: 14px;
}

@media (max-width:750px) {
    .companyTable {
        margin-top: 24px;
    }

    .companyTable th,
    .companyTable td {
        vertical-align: middle;
    }

    .companyTable th {
        width: 28%;
        padding: 16px 12px;
    }

    .companyTable td {
        padding: 16px 12px;
    }
}


/*    ------------------------------------------------
diagnosisArea
------------------------------------------------    */
.diagnosisArea {
    background: #dff1c0;
}

.diagnosisLeadTxt {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

.diagnosisTit {
    display: table;
    margin: 64px auto 48px;
    padding: 0 8px;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    color: #78c85a;
    background: linear-gradient(to top, #ffd844 0% 30%, rgba(255, 216, 68, 0) 30% 30%);
}

.diagnosisRecommendBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 120px;
    padding: 0 32px;
}

.diagnosisRecommendBlock {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 296px;
    border-radius: 50%;
    background: #ffffff;
}

.diagnosisRecommendBlock::after {
    content: "";
    display: block;
    padding-top: 100%;
}

.diagnosisRecommendBlock:nth-child(1),
.diagnosisRecommendBlock:nth-child(4) {
    top: 80px;
}

.diagnosisRecommendBlockInner {
    position: absolute;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.diagnosisRecommendBlockNote {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    width: 100%;
}

.diagnosisRecommendBlockImg {
    margin-top: 16px;
    width: auto;
    height: 120px;
}

.diagnosisRecommendBlockImg img {
    object-fit: contain;
    height: inherit;
}

.diagnosisContentBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: -40px;
}

.diagnosisContentBlock {
    margin-top: 64px;
    position: relative;
    padding: 32px;
    width: 480px;
    background: #ffffff;
}

.diagnosisContentBlockDefinitionTit {
    position: absolute;
    left: 0;
    top: -24px;
    background: #78c85a;
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    padding: 4px 16px;
}

.diagnosisContentBlockDefinitionDetail {
    display: flex;
    justify-content: space-between;
}

.diagnosisContentBlockDefinitionDetailNote {
    width: 288px;
}

.diagnosisContentBlockDefinitionDetailImg {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: #78c85a;
}

.diagnosisContentBlockDefinitionDetailIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
}

.diagnosisContentBlockDefinitionDetailIconPath {
    width: 50%;
    fill: #ffffff;
}

.diagnosisFlowBox {
    margin: 40px auto 0;
    width: 800px;
}

.diagnosisFlowBlock {
    display: flex;
    position: relative;
    justify-content: space-between;
    margin-top: 32px;
}

.diagnosisFlowBlock::after {
    content: "";
    position: absolute;
    left: 44px;
    bottom: -18%;
    width: 5px;
    height: calc(100% - 100px - 20px);
    border-left: 5px dotted #a1d883;
}

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

.diagnosisFlowBlockRoute {
    width: 88px;
}

.diagnosisFlowBlockRouteNum {
    color: #78c85a;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

.diagnosisFlowBlockRouteIconWrap {
    position: relative;
    margin-top: 16px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #78c85a;
}

.diagnosisFlowBlockRouteIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
}

.diagnosisFlowBlockRouteIconPath {
    fill: #ffffff;
}

.diagnosisFlowBlockDefinition {
    margin-left: 48px;
    width: calc(100% - 88px);
}

.diagnosisFlowBlockDefinitionTtl {
    font-size: 24px;
    font-weight: 600;
}

.diagnosisFlowBlockDefinitionDetail {
    position: relative;
    margin-top: 16px;
    width: auto;
    padding: 24px;
    background: #ffffff;
}

.diagnosisFlowBlockDefinitionDetail::after {
    content: "";
    position: absolute;
    top: 35px;
    left: -21px;
    width: 22px;
    height: 18px;
    ;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    background: #ffffff;
}



@media (max-width:750px) {
    .diagnosisLeadTxt {
        font-size: 20px;
    }

    .diagnosisTit {
        margin: 40px auto 24px;
        font-size: 20px;
    }

    .diagnosisRecommendBox {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
        padding: 0;
    }

    .diagnosisRecommendBox .turnBack {
        width: 100%;
    }

    .diagnosisRecommendBlock {
        width: 160px;

    }

    .diagnosisRecommendBlock:nth-child(1),
    .diagnosisRecommendBlock:nth-child(4) {
        top: 0;
    }

    .diagnosisRecommendBlock:nth-of-type(3) {
        margin-right: 16px;
    }

    .diagnosisRecommendBlockInner {
        top: 52%;
    }

    .diagnosisRecommendBlockNote {
        font-size: 13px;
        line-height: 1.3;
    }

    .diagnosisRecommendBlockImg {
        margin-top: 4px;
        height: 60px;
    }

    .diagnosisRecommendBlockImg img {
        object-fit: contain;
        height: inherit;
    }

    .diagnosisContentBox {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: -24px;
    }

    .diagnosisContentBlock {
        margin-top: 48px;
        padding: 16px;
        width: 100%;
    }

    .diagnosisContentBlockDefinitionTit {
        display: flex;
        align-items: center;
        margin: 0px;
        width: 100%;
        height: 64px;
        padding: 0 16px;
        font-size: 16px;
    }

    .diagnosisContentBlockDefinitionDetail {
        display: block;
        margin-top: 40px;
    }

    .diagnosisContentBlockDefinitionDetailNote {
        width: auto;
    }

    .diagnosisContentBlockDefinitionDetailImg {
        position: absolute;
        right: 16px;
        top: -16px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #ffffff;
    }

    .diagnosisContentBlockDefinitionDetailIcon {
        width: 65%;
    }

    .diagnosisContentBlockDefinitionDetailIconPath {
        width: 50%;
        fill: #78c85a;
    }

    .diagnosisFlowBox {
        margin: 24px auto 0;
        width: auto;
    }

    .diagnosisFlowBlock {
        margin-top: 16px;
    }

    .diagnosisFlowBlock:first-child {
        margin-top: 0;
    }

    .diagnosisFlowBlock::after {
        left: 28px;
        bottom: -6%;
        width: 3px;
        height: calc(100% - 88px);
        border-left: 3px dotted #a1d883;
    }

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

    .diagnosisFlowBlockRoute {
        width: 56px;
    }

    .diagnosisFlowBlockRouteNum {
        font-size: 16px;
    }

    .diagnosisFlowBlockRouteIconWrap {
        margin: 8px auto 0;
        width: 56px;
        height: 56px;
    }

    .diagnosisFlowBlockRouteIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
    }

    .diagnosisFlowBlockRouteIconPath {
        fill: #ffffff;
    }

    .diagnosisFlowBlockDefinition {
        margin-left: 32px;
        width: calc(100% - 56px);
    }

    .diagnosisFlowBlockDefinitionTtl {
        font-size: 16px;
    }

    .diagnosisFlowBlockDefinitionDetail {
        margin-top: 8px;
        width: auto;
        padding: 16px;
    }

    .diagnosisFlowBlockDefinitionDetail::after {
        top: 20px;
        left: -18px;
    }
}

@media (max-width:360px) {
    .diagnosisRecommendBlock:nth-of-type(3) {
        margin-right: 8px;
    }

}