/* kintoneSFA */
/* 固定ページ共通CSS */
/* 不要要素の非表示 */
.sidebar,
.sns-share,
.date-tags,
.article-footer,
.entry-title {
    display: none;
}

/* リンクの下線を消す */
a {
    text-decoration: none;
}

/* レイアウト基本設定 */
.content-in {
    justify-content: center;
}

.wrap {
    width: 100%;
}

.main {
    width: 100%;
    padding: 0px;
}

.content {
    margin-top: 0px;
}

.footer {
    margin-top: 0px;
}

.entry-content {
    margin-bottom: 0px !important;
}

.article {
    margin-bottom: 0px !important;
}

.article p {
    padding: 0;
}

p {
    line-height: normal;
    margin-bottom: 0px !important;
    font-weight: bold;
    color: var(--text-main);
}



/* このページのみのCSS */

/* パンくずリスト */
.breadcrumb {
    background-color: var(--yellow-6);
}



/* フッター */
.contact-details p, 
.footer-menu-col p {
    color: var(--white);
}



/* 全セクション共通 */
.kintone-SFA-wrap {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.kintone-SFA-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

span.text-color-yellow-4 { 
    color: var(--yellow-4);
}

.kintone-SFA-eng-title {
    background-color: var(--yellow-1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.kintone-SFA-eng-title-text p {
    color: var(--white);
}



/* 課題セクション */
.kintone-SFA-prob {
    background-color: var(--yellow-3);
}

.kintone-SFA-prob.kintone-SFA-wrap {
    position: relative;
    overflow: hidden;
}

.kintone-SFA-prob .kintone-SFA-container {
    position: relative;
    z-index: 1;
}

.kintone-SFA-prob-top-bg {
    position: absolute;
    z-index: 0;
    background-color: var(--yellow-6);
}

.kintone-SFA-prob-title-label-area {
    display: flex;
    justify-content: center;
}

.kintone-SFA-prob-title-label {
    background-color: var(--yellow-4);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kintone-SFA-prob-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kintone-SFA-prob-main-title {
    text-align: center;
}

.kintone-SFA-prob-main-contents {
    width: 100%;
}

.kintone-SFA-prob-main-contents-circle {
    background-color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kintone-SFA-prob-main-contents-text {
    text-align: center;
}

.kintone-SFA-prob-img {
    position: absolute;
    bottom: 0;
    z-index: 1;
}

.kintone-SFA-prob-title-label-text p {
    color: var(--white);
}



/* 変化セクション */
.kintone-SFA-changes {
    background-color: var(--white);
}

.kintone-SFA-changes-title-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kintone-SFA-changes-icons {
    display: flex;
    align-items: center;
}

.kintone-SFA-changes-icon-contents {
    display: flex;
    align-items: center;
}

.kintone-SFA-changes-main {
    display: flex;
    flex-direction: column;
}

.kintone-SFA-changes-main-contents {
    display: flex;
    align-items: center;
    background-color: var(--yellow-3);
}

.kintone-SFA-changes-main-title-number {
    background-color: var(--yellow-1);
    border-radius: 50px;
}

.kintone-SFA-changes-main-number-text p {
    color: var(--white);
}



/* サービスセクション */
.kintone-SFA-service {
    background: linear-gradient(
        to bottom,
        var(--white) 0%,
        var(--yellow-3) 100%
    );
}

.kintone-SFA-service-intro-block {
    position: relative;
    background-color: var(--yellow-1);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kintone-SFA-service-intro-block-text p {
    color: var(--white);
}

.kintone-SFA-service-top {
    display: flex;
}

.kintone-SFA-service-top-contact-button {
    background-color: var(--green-1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.kintone-SFA-service-top-contact-button-arrow {
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.kintone-SFA-service-top-contact-button-text-area p {
    color: var(--white);
}


.kintone-SFA-service-main {
    background-color: var(--white);
    box-shadow: 4px 4px 8px 4px var(--yellow-2);
    display: flex;
    justify-content: center;
    border-radius: 10px;
}

.kintone-SFA-service-main-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kintone-SFA-service-main-contents-number p {
    color: var(--yellow-4);
}

.kintone-SFA-service-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kintone-SFA-service-bottom-main {
    display: flex;
}

.kintone-SFA-service-bottom-main-contents {
    background-color: #FDFDF6;
    border: solid var(--yellow-1) 4px;
    border-radius: 30px;
    display: flex;
}

.kintone-SFA-why-main-contents-recommend-box {
    background-color: #009354;
}

.kintone-SFA-why-main-contents-recommend-text p {
    color: var(--white);
}




/* なぜkintoneなのか */
.kintone-SFA-why {
    background-color: var(--gray-3);
}

.kintone-SFA-why .kintone-SFA-eng-title {
    background-color: #009354;
}

.kintone-SFA-why-top {
    align-self: flex-start;
}

.kintone-SFA-why-main {
    align-self: center;
    display: flex;
}

.kintone-SFA-why-main-contents {
    background-color: var(--white);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kintone-SFA-why-main-contents.our-service {
    position: relative;
}

.kintone-SFA-why-main-contents-recommend-box {
    position: absolute;
    top: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kintone-SFA-why-main-contents-title-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kintone-SFA-why-main-contents-sub-title-text p {
    color: var(--gray-1);
}

.kintone-SFA-why-main-contents-lists-area {
    background-color: var(--gray-4);
    display: flex;
    flex-direction: column;
}

.our-service .kintone-SFA-why-main-contents-lists-area {
    background-color: rgba(0, 147, 84, 0.11);
}

.kintone-SFA-why-main-contents-list {
    display: flex;
    align-items: center;
}

.kintone-SFA-why-main-contents-list-circle {
    background-color: var(--gray-5);
    border-radius: 50px;
}

.kintone-SFA-why-main-contents-button {
    background-color: #009354;
    border-radius: 50px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kintone-SFA-why-main-contents-button-text-area p {
    color: var(--white);
}



/* 4つのアプリ */
.kintone-SFA-application-top {
    width: 100%;
    background-color: var(--green-1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kintone-SFA-application-title-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kintone-SFA-application .kintone-SFA-eng-title {
    background-color: var(--white);
}

.kintone-SFA-application .kintone-SFA-eng-title-text p {
    color: var(--green-1);
}

.kintone-SFA-application-top p {
    color: var(--white);
}

.kintone-SFA-application-main-title span {
    color: var(--yellow-4);
}

.kintone-SFA-application-tab-area {
    display: flex;
}

.kintone-SFA-application-tab-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kintone-SFA-application-tab-explain-area { 
    width: 100%;
    display: flex;
    justify-content: center;
}

.kintone-SFA-application-tab-explain-text {
    text-align: center;
}

.kintone-SFA-application-tab-explain-arrow { 
    transition: transform 0.2s ease;
}


.kintone-SFA-application-bottom {
    width: 100%;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kintone-SFA-application-bottom-container {
    display: flex;
}

.kintone-SFA-application-bottom-app-title-area {
    background-color: var(--green-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kintone-SFA-application-bottom-app-title-text p {
    color: var(--white);
}


/* タブ切り替え部分のCSS */
/* ① radioは非表示 */
.kintone-SFA-application input[type="radio"] {
    display: none;
}

/* ② 全コンテンツを一旦非表示 */
.kintone-SFA-application-bottom-container {
    display: none;
}

/* ③ 選択されたタブだけ表示 */
#tab1:checked ~ .kintone-SFA-application-bottom .content1 {
    display: flex;
}

#tab2:checked ~ .kintone-SFA-application-bottom .content2 {
    display: flex;
}

#tab3:checked ~ .kintone-SFA-application-bottom .content3 {
    display: flex;
}

#tab4:checked ~ .kintone-SFA-application-bottom .content4 {
    display: flex;
}

/* クリックできるように */
.kintone-SFA-application-tab {
    cursor: pointer;
}

/* 選択中タブの背景 */
#tab1:checked ~ .kintone-SFA-application-top .kintone-SFA-application-tab-area label[for="tab1"],
#tab2:checked ~ .kintone-SFA-application-top .kintone-SFA-application-tab-area label[for="tab2"],
#tab3:checked ~ .kintone-SFA-application-top .kintone-SFA-application-tab-area label[for="tab3"],
#tab4:checked ~ .kintone-SFA-application-top .kintone-SFA-application-tab-area label[for="tab4"] {
    background-color: var(--white);
}

/* 選択中タブのテキスト色 */
#tab1:checked ~ .kintone-SFA-application-top .kintone-SFA-application-tab-area label[for="tab1"] .kintone-SFA-application-tab-text p,
#tab2:checked ~ .kintone-SFA-application-top .kintone-SFA-application-tab-area label[for="tab2"] .kintone-SFA-application-tab-text p,
#tab3:checked ~ .kintone-SFA-application-top .kintone-SFA-application-tab-area label[for="tab3"] .kintone-SFA-application-tab-text p,
#tab4:checked ~ .kintone-SFA-application-top .kintone-SFA-application-tab-area label[for="tab4"] .kintone-SFA-application-tab-text p {
    color: var(--green-1);
}

/* 初期状態（白アイコン表示） */
/* .icon-green {
    display: none;
} */

/* 選択中タブ → 緑アイコン表示 */
/* #tab1:checked ~ .kintone-SFA-application-top label[for="tab1"] .icon-white,
#tab2:checked ~ .kintone-SFA-application-top label[for="tab2"] .icon-white,
#tab3:checked ~ .kintone-SFA-application-top label[for="tab3"] .icon-white,
#tab4:checked ~ .kintone-SFA-application-top label[for="tab4"] .icon-white {
    display: none;
}

#tab1:checked ~ .kintone-SFA-application-top label[for="tab1"] .icon-green,
#tab2:checked ~ .kintone-SFA-application-top label[for="tab2"] .icon-green,
#tab3:checked ~ .kintone-SFA-application-top label[for="tab3"] .icon-green,
#tab4:checked ~ .kintone-SFA-application-top label[for="tab4"] .icon-green {
    display: block;
} */

/* ホバー時（未選択タブ） */
.kintone-SFA-application-tab:hover {
    background-color: var(--white);
}

/* ホバー時のテキスト色 */
.kintone-SFA-application-tab:hover .kintone-SFA-application-tab-text p {
    color: var(--green-1);
}

/* ホバー時：白→非表示 */
/* .kintone-SFA-application-tab:hover .icon-white {
    display: none;
} */

/* ホバー時：緑→表示 */
/* .kintone-SFA-application-tab:hover .icon-green {
    display: block;
} */


/* アイコンがふわっと変化 */
/* 親を基準にする */
.kintone-SFA-application-tab-icon {
    position: relative;
}

/* 画像を重ねる */
.kintone-SFA-application-tab-icon img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}

/* 初期状態 */
.icon-white {
    opacity: 1;
}

.icon-green {
    opacity: 0;
}

/* ホバー */
.kintone-SFA-application-tab:hover .icon-white {
    opacity: 0;
}

.kintone-SFA-application-tab:hover .icon-green {
    opacity: 1;
}

/* 選択中（最優先） */
#tab1:checked ~ .kintone-SFA-application-top label[for="tab1"] .icon-white,
#tab2:checked ~ .kintone-SFA-application-top label[for="tab2"] .icon-white,
#tab3:checked ~ .kintone-SFA-application-top label[for="tab3"] .icon-white,
#tab4:checked ~ .kintone-SFA-application-top label[for="tab4"] .icon-white {
    opacity: 0;
}

#tab1:checked ~ .kintone-SFA-application-top label[for="tab1"] .icon-green,
#tab2:checked ~ .kintone-SFA-application-top label[for="tab2"] .icon-green,
#tab3:checked ~ .kintone-SFA-application-top label[for="tab3"] .icon-green,
#tab4:checked ~ .kintone-SFA-application-top label[for="tab4"] .icon-green {
    opacity: 1;
}



/* 選択中は常にこの状態を維持 */
#tab1:checked ~ .kintone-SFA-application-top label[for="tab1"] .icon-white,
#tab2:checked ~ .kintone-SFA-application-top label[for="tab2"] .icon-white,
#tab3:checked ~ .kintone-SFA-application-top label[for="tab3"] .icon-white,
#tab4:checked ~ .kintone-SFA-application-top label[for="tab4"] .icon-white {
    display: none;
}

#tab1:checked ~ .kintone-SFA-application-top label[for="tab1"] .icon-green,
#tab2:checked ~ .kintone-SFA-application-top label[for="tab2"] .icon-green,
#tab3:checked ~ .kintone-SFA-application-top label[for="tab3"] .icon-green,
#tab4:checked ~ .kintone-SFA-application-top label[for="tab4"] .icon-green {
    display: block;
}


.kintone-SFA-application-tab {
    transition: background-color 0.2s ease;
}

.kintone-SFA-application-tab-text p {
    transition: color 0.2s ease;
}

.kintone-SFA-application-tab-text {
    transition: all 0.2s ease;
}

.kintone-SFA-application-tab-text:hover {
    transform: translateY(-5px);
}

.kintone-SFA-application-tab:hover .kintone-SFA-application-tab-explain-arrow {
    transform: translateY(-50%) translateX(10px);
}




/* 導入の流れ */
.kintone-SFA-process {
    background: linear-gradient(
        to bottom,
        var(--white) 31%,
        #E4F4ED 100%
    );
}

.kintone-SFA-process-title-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kintone-SFA-process .kintone-SFA-eng-title {
    background-color: #009354;
}

.kintone-SFA-process-main {
    display: flex;
}

.kintone-SFA-process-main-contents {
    position: relative;
}

.kintone-SFA-process-numbers {
    display: flex;
    position: relative;
}

.kintone-SFA-process-number-circle {
    z-index: 1;
    background-color: var(--white);
    border: solid #009354 2px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kintone-SFA-process-number-text p {
    color: #009354;
}

.kintone-SFA-process-main-contents-wrap {
    display: flex;
}

.kintone-SFA-process-main-contents {
    display: flex;
}



/* CTA */
.kintone-SFA-CTA {
    background-image: url(/wp-content/uploads/2026/04/kintone-SFA-CTA-bg-PC.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.kintone-SFA-CTA p {
    color: var(--white);
    text-align: center;
}

.kintone-SFA-CTA-tag {
    border: solid var(--yellow-4) 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kintone-SFA-CTA-tag-text p {
    color: var(--yellow-4);
}

.kintone-SFA-CTA-contact-button {
    position: relative;
    background-color: var(--yellow-4);
    box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.25);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* よくある質問 */
.kintone-SFA-FAQ {
    background-color: var(--yellow-3);
}

.kintone-SFA-FAQ-main-title {
    text-align: center;
}

.kintone-SFA-FAQ-main { 
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kintone-SFA-FAQ-QandA {
    width: 100%;
    background-color: var(--white);
    border-radius: 20px;
}

.kintone-SFA-FAQ-QandA-question {
    display: flex;
    align-items: center;
}

.kintone-SFA-FAQ-QandA-answer {
    display: flex;
}

.kintone-SFA-FAQ-QandA-question-icon {
    background-color: var(--yellow-4);
}

.kintone-SFA-FAQ-QandA-question-icon,
.kintone-SFA-FAQ-QandA-answer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.kintone-SFA-FAQ-QandA-question-icon p {
    color: var(--white);
}

.kintone-SFA-FAQ-QandA-answer-icon p {
    color: var(--yellow-4);
}





/* PC表示（1024px以上） */
@media screen and (min-width: 1024px) {

    /* 全セクション共通 */
    .sp-only {
        display: none;
    }



    /* ファーストビュー */
    .first-view-contact {
        width: 240px;
    }



    /* 全セクション共通 */
    .kintone-SFA-container {
        width: 1200px;
    }

    .kintone-SFA-eng-title {
        width: 310px;
        height: 50px;
    }

    .kintone-SFA-eng-title-text p {
        font-size: 26px;
    }



    /* 課題セクション */
    .kintone-SFA-prob-top-bg {
        width: 111vw;
        height: 816px;
        border-radius: 50%;
        top: -510px;
    }

    .kintone-SFA-prob .kintone-SFA-container {
        margin: 48px 0 38px;
    }

    .kintone-SFA-prob-title-area {
        margin-bottom: 136px;
    }

    .kintone-SFA-prob-title-label-area {
        margin-bottom: 8px;
        column-gap: 20px;
    }

    .kintone-SFA-prob-title-label {
        width: 130px;
        height: 54px;
    }

    .kintone-SFA-prob-title {
        margin-bottom: 60px;
    }

    .kintone-SFA-prob-main-contents {
        position: relative;
        height: 450px;
    }

    .kintone-SFA-prob-main-contents-circle {
        position: absolute;
        width: 300px;
        height: 300px;
    }

    .item-1 {
        top: 150px;
        left: 0;
    }

    .item-2 {
        top: 0;
        right: 51%;
    }

    .item-3 {
        top: 0;
        left: 51%;
    }

    .item-4 {
        top: 150px;
        right: 0;
    }

    .kintone-SFA-prob-title-label-text p {
        font-size: 20px;
    }

    .kintone-SFA-prob-main-title p {
        font-size: 18px;
    }

    .kintone-SFA-prob-main-title .SFA-prob-font-size-mid {
        font-size: 30px;
    }

    .kintone-SFA-prob-main-title .SFA-prob-font-size-big {
        font-size: 50px;
    }

    .kintone-SFA-prob-title {
        font-size: 30px;
    }

    .kintone-SFA-prob-main-contents-text p {
        font-size: 20px;
    }



    /* 変化セクション */
    .kintone-SFA-changes .kintone-SFA-container {
        margin: 85px 0;
    }

    .kintone-SFA-changes-title-area {
        margin-bottom: 50px;
    }

    .kintone-SFA-changes .kintone-SFA-eng-title {
        margin-bottom: 30px;
    }

    .kintone-SFA-changes-icons {
        margin-bottom: 50px;
    }

    .kintone-SFA-changes-icon-contents {
        width: 197px;
        flex-direction: column;
    }

    .kintone-SFA-changes-icon-img {
        margin-bottom: 20px;
    }

    .kintone-SFA-changes-icon-explain {
        text-align: center;
    }

    .kintone-SFA-changes-main {
        margin-bottom: 30px;
        row-gap: 20px;
    }

    .kintone-SFA-changes-main-contents {
        width: 800px;
        padding: 30px 0 30px 45px;
        border-radius: 10px;
    }

    .contents-1 .kintone-SFA-changes-main-text-area,
    .contents-3 .kintone-SFA-changes-main-text-area {
        margin-left: 30px;
    }

    .contents-2 .kintone-SFA-changes-main-img,
    .contents-4 .kintone-SFA-changes-main-img {
        margin-left: 30px;
    }

    .kintone-SFA-changes-main-title-area {
        display: flex;
        margin-bottom: 20px;
    }

    .kintone-SFA-changes-main-title-number {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .kintone-SFA-changes-main-title-text {
        margin-left: 20px;
    }

    .kintone-SFA-changes-main-explain-text {
        margin-left: 60px;
    }


    .kintone-SFA-changes-main-title p {
        font-size: 42px;
    }

    .kintone-SFA-changes-icon-explain p {
        font-size: 16px;
    }

    .kintone-SFA-changes-main-number-text p {
        font-size: 26px;
    }

    .kintone-SFA-changes-main-title-text p {
        font-size: 24px;
    }

    .kintone-SFA-changes-main-explain-text p {
        font-size: 14px;
        line-height: 26px;
    }



    /* サービスセクション */
    .kintone-SFA-service-intro-block {
        height: 140px;
    }

    .kintone-SFA-service-intro-block::after {
        content: "";
        position: absolute;
        bottom: -65px; /* 親要素の外に出す */
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 90px solid transparent;
        border-right: 90px solid transparent;
        border-top: 80px solid var(--yellow-1);
    }

    .kintone-SFA-service-intro-block-text p {
        font-size: 40px;
    }

    .kintone-SFA-service-intro-block-text span {
        font-size: 56px;
    }

    .kintone-SFA-service .kintone-SFA-container {
        margin: 196px 0 97px 0;
    }

    .kintone-SFA-service-top {
        margin-bottom: 100px;
    }

    .kintone-SFA-service-top-text-area {
        margin-top: 12px;
        width: 603px;
    }

    .kintone-SFA-service .kintone-SFA-eng-title {
        margin-bottom: 30px;
    }

    .kintone-SFA-service-top-main-title {
        margin-bottom: 27px;
    }

    .kintone-SFA-service-top-sub-title {
        margin-bottom: 32px;
    }

    .kintone-SFA-service-top-contact-button {
        width: 380px;
        height: 70px;
    }

    .kintone-SFA-service-top-contact-button-arrow {
        margin-left: 30px;
        width: 25px;
        height: 25px;
    }

    .kintone-SFA-service-top-main-title p {
        font-size: 40px;
    }

    .kintone-SFA-service-top-sub-title p {
        font-size: 16px;
    }

    .kintone-SFA-service-top-contact-button-text-area p {
        font-size: 24px;
    }

    .kintone-SFA-service-top-contact-button-arrow-text p {
        font-size: 16px;
    }

    .kintone-SFA-service-main {
        padding: 45px 95px;
        width: 1100px;
        column-gap: 70px;
        margin-bottom: 70px;
    }

    .kintone-SFA-service-main-contents {
        width: 257px;
    }

    .kintone-SFA-service-main-contents-number {
        margin-bottom: 10px;
    }

    .kintone-SFA-service-main-contents-title {
        margin-bottom: 9px;
    }

    .kintone-SFA-service-main-contents-img {
        margin-bottom: 10px;
    }

    .kintone-SFA-service-main-contents-number p {
        font-size: 60px;
    }

    .kintone-SFA-service-main-contents-title p {
        font-size: 20px;
    }

    .kintone-SFA-service-main-explain P {
        font-size: 16px;
    }

    .kintone-SFA-service-bottom-main {
        column-gap: 30px;
    }

    .kintone-SFA-service-bottom-title {
        margin-bottom: 50px;
    }

    .kintone-SFA-service-bottom-main-contents {
        padding: 40px;
        align-items: center;
    }
    
    .kintone-SFA-service-bottom-main-contents-text-area {
        width: 366px;
        margin-left: 20px;
    }

    .kintone-SFA-service-bottom-main-contents-title {
        margin-bottom: 10px;
    }

    .kintone-SFA-service-bottom-main-contents-explain {
        height: 80px;
    }

    .kintone-SFA-service-bottom-title p {
        font-size: 28px;
    }

    .kintone-SFA-service-bottom-main-contents-title p {
        font-size: 20px;
    }

    .kintone-SFA-service-bottom-main-contents-explain p {
        font-size: 16px;
    }



    /* なぜkintoneなのか */
    .kintone-SFA-why .kintone-SFA-container {
        width: 1180px;
        margin: 100px 0;
        align-items: flex-start;
    }

    .kintone-SFA-why-top {
        margin-bottom: 90px;
    }

    .kintone-SFA-why .kintone-SFA-eng-title {
        margin-bottom: 20px;
    }

    .kintone-SFA-why-top-title {
        margin-bottom: 20px;
    }

    .kintone-SFA-why-top-title p {
        font-size: 42px;
    }

    .kintone-SFA-why-top-explain p {
        font-size: 20px;
    }

    .kintone-SFA-why-main-contents {
        width: 370px;
        border: solid var(--gray-5) 4px;
        box-shadow: 4px 4px 8px 3px var(--gray-5);
    }

    .kintone-SFA-why-main-contents.our-service {
        width: 400px;
        border: solid #009354 4px;
    }

    .kintone-SFA-why-main-contents-recommend-box {
        width: 100px;
        height: 40px;
    }

    .kintone-SFA-why-main {
        column-gap: 20px;
    }

    .kintone-SFA-why-main-contents-title-area {
        height: 80px;
        margin: 40px 0;
    }
    
    .kintone-SFA-why-main-contents-lists-area {
        width: 326px;
        padding: 30px 15px;
        row-gap: 12px;
    }

    .our-service .kintone-SFA-why-main-contents-lists-area {
        width: 352px;
        padding: 30px 20px;
    }

    .kintone-SFA-why-main-contents-list {
        height: 30px;
    }

    .kintone-SFA-why-main-contents-list-circle {
        width: 18px;
        height: 18px;
    }

    .kintone-SFA-why-main-contents-list-text {
        margin-left: 6px;
    }

    .kintone-SFA-why-main-contents-bottom-text {
        margin: 30px 0 10px 0;
    }

    .kintone-SFA-why-main-contents-button {
        width: 260px;
        height: 60px;
        margin-bottom: 60px;
    }

    .kintone-SFA-why-main-contents-button-arrow {
        margin-left: 10px;
    }

    .kintone-SFA-why-main-contents-recommend-text p {
        font-size: 20px;
    }

    .kintone-SFA-why-main-contents-title-text p {
        font-size: 30px;
    }

    .kintone-SFA-why-main-contents-sub-title-text p {
        font-size: 20px;
    }

    .kintone-SFA-why-main-contents-list-text p {
        font-size: 16px;
    }

    .kintone-SFA-why-main-contents-bottom-text p {
        font-size: 16px;
    }

    .kintone-SFA-why-main-contents-button-text-area p {
        font-size: 18px;
    }



    /* 4つのアプリ */
    .kintone-SFA-application-title-area {
        margin: 140px 0 60px;
    }

    .kintone-SFA-application .kintone-SFA-eng-title {
        margin-bottom: 20px;
    }

    .kintone-SFA-application-main-title {
        margin-bottom: 30px;
    }

    .kintone-SFA-application-tab {
        width: 300px;
        padding: 20px 0;
    }

    .kintone-SFA-application-tab-number {
        margin-bottom: 3px;
    }

    .kintone-SFA-application-tab-title {
        margin-bottom: 12px;
    }

    .kintone-SFA-application-tab-icon { 
        margin-bottom: 10px;
        width: 80px;
        height: 80px;
    }

    .kintone-SFA-application-tab-explain-area {
        position: relative;
    }

    .kintone-SFA-application-tab-explain-arrow { 
        position: absolute;
        top: 50%;
        left: 210px;
        transform: translateY(-50%);
    }

    .kintone-SFA-application-main-title p {
        font-size: 40px;
    }

    .kintone-SFA-application-main-title span {
        font-size: 70px;
    }

    .kintone-SFA-application-sub-title p {
        font-size: 24px;
    }

    .kintone-SFA-application-tab-number p {
        font-size: 18px;
    }

    .kintone-SFA-application-tab-title p {
        font-size: 20px;
    }

    .kintone-SFA-application-tab-explain-text p {
        font-size: 18px;
    }

    .kintone-SFA-application-tab-explain-arrow p {
        font-size: 20px;
    }

    .kintone-SFA-application-bottom-container {
        width: 1200px;
        margin: 100px 0;
    }

    .kintone-SFA-application-bottom-text-area {
        width: 480px;
    }

    .kintone-SFA-application-bottom-app-title-area {
        width: 240px;
        height: 44px;
        margin-bottom: 30px;
    }

    .kintone-SFA-application-bottom-title-text {
        margin-bottom: 32px;
    }


    .kintone-SFA-application-bottom-app-title-text p {
        font-size: 20px;
    }

    .kintone-SFA-application-bottom-title-text p {
        font-size: 30px;
    }

    .kintone-SFA-application-bottom-explain-text p {
        font-size: 16px;
    }



    /* 導入の流れ */
    .kintone-SFA-process .kintone-SFA-container {
        margin: 100px 0;
    }
    
    .kintone-SFA-process-title-area {
        margin-bottom: 85px;
    }

    .kintone-SFA-process .kintone-SFA-eng-title {
        margin-bottom: 20px;
    }

    .kintone-SFA-process-main-title {
        margin-bottom: 30px;
    }

    .kintone-SFA-process-main {
        flex-direction: column;
    }

    .kintone-SFA-process-numbers {
        column-gap: 124px;
        justify-content: center;
    }

    .kintone-SFA-process-number-circle {
        width: 70px;
        height: 70px;
    }
    
    .kintone-SFA-process-main-contents-wrap {
        margin-top: 10px;
        justify-content: center;
        column-gap: 12px;
    }

    .kintone-SFA-process-main-contents {
        position: relative;
        width: 182px;
        flex-direction: column;
        text-align: center;
    }

    .kintone-SFA-process-main-contents-title-text {
        height: 74px;
        margin-bottom: 203px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .kintone-SFA-process-main-contents-img {
        position: absolute;
        width: 150px;
        top: 104px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 疑似要素で横線 */
    .kintone-SFA-process-numbers::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1000px;
        height: 1px;
        background-color: #009354;
        transform: translate(-50%, -50%);
        z-index: 0;
    }

    .kintone-SFA-process-main-contents:not(:last-child)::after {
        content: "";
        position: absolute;
        right: -20px;
        top: 179px;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 13px solid transparent;
        border-bottom: 13px solid transparent;
        border-left: 22px solid #009354;
    }

    .kintone-SFA-process-main-title p {
        font-size: 40px;
    }

    .kintone-SFA-process-sub-title p {
        font-size: 20px;
    }

    .kintone-SFA-process-number-text p {
        font-size: 36px;
    }

    .kintone-SFA-process-main-contents-title-text p {
        font-size: 22px;
    }

    .kintone-SFA-process-main-contents-explain-text p {
        font-size: 14px;
    }



    /* CTA */
    .kintone-SFA-CTA .kintone-SFA-container {
        margin: 60px 0;
    }

    .kintone-SFA-CTA-tag {
        width: 240px;
        height: 40px;
        margin-bottom: 50px;
    }

    .kintone-SFA-CTA-title {
        margin-bottom: 10px;
    }

    .kintone-SFA-CTA-explain {
        margin-bottom: 50px;
    }

    .kintone-SFA-CTA-contact-button {
        width: 370px;
        height: 90px;
    }

    /* 疑似要素でボタン上の矢印 */
    .kintone-SFA-CTA-contact-button::before {
        content: "";
        position: absolute;
    
        /* サイズ */
        width: 10px;
        height: 10px;
    
        /* 「く」の形を作る */
        border-top: 4px solid var(--white);
        border-right: 4px solid var(--white);
    
        /* 位置（ボタン上に配置） */
        top: 50%;
        right: 33px;
        transform: translateY(-50%) rotate(45deg);
    }
    

    .kintone-SFA-CTA-tag-text p {
        font-size: 18px;
    }

    .kintone-SFA-CTA-title p {
        font-size: 38px;
    }

    .kintone-SFA-CTA-explain p {
        font-size: 18px;
    }

    .kintone-SFA-CTA-contact-button-text p {
        font-size: 24px;
    }



    /* よくある質問 */
    .kintone-SFA-FAQ .kintone-SFA-container {
        margin: 100px 0;
    }

    .kintone-SFA-FAQ-title-area { 
        margin-bottom: 90px;
    }

    .kintone-SFA-FAQ .kintone-SFA-eng-title {
        margin-bottom: 20px;
    }

    .kintone-SFA-FAQ-main {
        row-gap: 40px;
    }

    .kintone-SFA-FAQ-QandA {
        height: 260px;
        padding: 51px 0 0 80px;
    }

    .kintone-SFA-FAQ-QandA-question {
        margin-bottom: 30px;
    }
    
    .kintone-SFA-FAQ-QandA-question-icon,
    .kintone-SFA-FAQ-QandA-answer-icon {
        width: 64px;
        height: 64px;
        border: solid var(--yellow-4) 3px;
    }

    .kintone-SFA-FAQ-QandA-question-text,
    .kintone-SFA-FAQ-QandA-answer-text {
        margin-left: 30px;
    }

    .kintone-SFA-FAQ-QandA-answer-text {
        margin-top: 6px;
    }


    .kintone-SFA-FAQ-main-title p {
        font-size: 40px;
    }

    .kintone-SFA-FAQ-QandA-question-icon-text p,
    .kintone-SFA-FAQ-QandA-answer-icon-text p {
        font-size: 36px;
    }

    .kintone-SFA-FAQ-QandA-question-text p {
        font-size: 24px;
    }

    .kintone-SFA-FAQ-QandA-answer-text p {
        font-size: 18px;
    }





}


/* SP表示（1023px以下） */
@media screen and (max-width: 1023px) {

    /* 全セクション共通 */
    main.main {
        padding: 0;
    }

    .pc-only {
        display: none;
    }

    .kintone-SFA-container {
        width: 343px;
    }

    .kintone-SFA-eng-title {
        width: 120px;
        height: 26px;
    }

    .kintone-SFA-eng-title-text p {
        font-size: 10px;
    }



    /* ファーストビュー */
    .first-view-description {
        row-gap: 20px;
    }

    .first-view-link-area {
        margin-top: 50px;
    }



    /* 課題セクション */
    .kintone-SFA-prob-top-bg {
        width: 141vw;
        height: 326px;
        border-radius: 50%;
        top: -166px;
    }

    .kintone-SFA-prob .kintone-SFA-container {
        margin: 16px 0 92px;
    }

    .kintone-SFA-prob-title-area {
        margin-bottom: 80px;
    }

    .kintone-SFA-prob-title-label-area {
        margin-bottom: 10px;
        column-gap: 6px;
    }

    .kintone-SFA-prob-title-label {
        width: 72px;
        height: 38px;
    }

    .kintone-SFA-prob-title {
        margin-bottom: 30px;
    }

    .kintone-SFA-prob-main-contents {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .kintone-SFA-prob-main-contents-circle {
        width: 150px;
        height: 150px;
    }

    .kintone-SFA-prob-img {
        width: 200px;
    }

    .kintone-SFA-prob-title-label-text p {
        font-size: 12px;
    }

    .kintone-SFA-prob-main-title p {
        font-size: 12px;
    }

    .kintone-SFA-prob-main-title .SFA-prob-font-size-mid {
        font-size: 18px;
    }

    .kintone-SFA-prob-main-title .SFA-prob-font-size-big {
        font-size: 24px;
    }

    .kintone-SFA-prob-title {
        font-size: 14px;
    }

    .kintone-SFA-prob-main-contents-text p {
        font-size: 12px;
    }

    .kintone-SFA-prob-main-contents-text span {
        font-size: 14px;
    }



    /* 変化セクション */
    .kintone-SFA-changes .kintone-SFA-container {
        margin: 45px 0;
    }

    .kintone-SFA-changes-title-area {
        margin-bottom: 30px;
    }

    .kintone-SFA-changes .kintone-SFA-eng-title {
        margin-bottom: 14px;
    }

    .kintone-SFA-changes-icons {
        margin-bottom: 30px;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 10px;
        row-gap: 6px;
    }

    .kintone-SFA-changes-icon-contents {
        width: 153px;
    }

    .kintone-SFA-changes-icon-img {
        width: 38px;
    }

    .kintone-SFA-changes-icon-explain {
        margin-left: 5px;
    }

    .kintone-SFA-changes-main {
        row-gap: 20px;
    }

    .kintone-SFA-changes-main-contents {
        width: 100%;
        padding: 15px 0 15px 30px;
    }




    .kintone-SFA-changes-main-title p {
        font-size: 18px;
    }

    .kintone-SFA-changes-icon-explain p {
        font-size: 10px;
    }

    .kintone-SFA-changes-main-number-text p {
        font-size: 14px;
    }

    .kintone-SFA-changes-main-title-text p {
        font-size: 14px;
    }

    .kintone-SFA-changes-main-explain-text p {
        font-size: 10px;
        line-height: 20px;
    }






}