@charset "utf-8";

/* ==========================================
カバー
========================================== */

.top-cover-wrapper {
    background: url(../../../../uploads/top_cover_bg.jpg) no-repeat center top / cover;
    padding: 20rem 0 13.8rem;
    position: relative;
}

.top-cover-inner {
    max-width: 123rem;
    width: 100%;
    display: flex;
    padding: 0 1.5rem;
    margin: auto;
    gap: 4.5rem;
    position: relative;
}

.top-cover-img-area {
    max-width: 57.3rem;
    width: 100%;
    box-shadow: 0 0 1.3rem rgb(0 0 0 / 31%);
}

.top-cover-text-area {
    max-width: 58.2rem;
    width: 100%;
    z-index: 99;
}

.cover-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    font-size: 4.0rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.25em;
}

.cover-title-marker {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    padding: 0.5rem 1.5rem;
}

.top-cover-wrapper:before {
    content: "";
    display: block;
    max-width: 9.2rem;
    width: 15%;
    height: 10rem;
    background: url(../../../../uploads/top_cover_illust01.png) no-repeat center top / contain;
    position: absolute;
    left: 0;
    bottom: 9.8rem;
    margin: auto;
    z-index: 9;
}

.top-cover-wrapper:after {
    content: "";
    display: block;
    width: 100%;
    height: 12.6rem;
    background: url(../../../../uploads/cover_decoration01.png) no-repeat center top / cover;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -6.4rem;
    margin: auto;
}

/* ==========================================
お知らせ
========================================== */

.top-news-wrapper {
    background: var(--quaternary);
    padding: 13.9rem 0 14.6rem;
}

.top-news-inner {
    max-width: 127.8rem;
    width: 100%;
    padding: 0 0 0 1.5rem;
    margin: 0 0 0 auto;
}

.top-news-frame {
    padding: 1.4rem 0 0 1.5rem;
    position: relative;
}

.top-news-frame:before {
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 1.4rem);
    background: var(--primary);
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
}

.top-news-frame-inner {
    background: var(--white);
    box-shadow: 0 0 0.8rem rgb(0 0 0 / 13%);
    padding: 10.3rem 1.5rem 8.5rem;
    position: relative;
}

.top-news-flex-area {
    max-width: 108rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: auto;
}

.top-news-left-block {
    max-width: 22.1rem;
    width: 100%;
}

.top-news-right-block {
    max-width: 70.7rem;
    width: 100%;
}

.top-news-list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.top-news-item {
    display: flex;
    align-items: center;
    padding: 0 0 2rem;
    border-bottom: solid 1px var(--gray);
}

.top-news-date {
    display: block;
    max-width: 8.6rem;
    width: 100%;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}

.top-news-link {
    flex: 1;
    display: block;
    margin: 0 0 0 5rem;
}

/* .top-news-title {
    letter-spacing: 0.05em;
} */

.top-news-link:hover {
    text-decoration: underline;
}

.top-news-btn {
    justify-content: flex-start;
    margin: 4.8rem auto 0;
}

/* ==========================================
チョイソコとは？
========================================== */

.top-about-wrapper {
    padding: 9.4rem 0 0;
}

.top-about-inner {
    max-width: 113rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.top-about-title-img {
    display: inline-block;
    max-width: 32.8rem;
    width: 100%;
    margin: 0 2.3rem 0 0;
}

.top-about-area {
    background: var(--white);
    box-shadow: 0 0 0.8rem rgb(0 0 0 / 20%);
    margin: 4.8rem 0 0;
}

.top-about-header {
    background: var(--primary);
    color: var(--white);
    text-align: center;
    padding: 2.7rem 1.5rem 2.6rem;
}

.top-about-title {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.25em;
}

.top-about-title-marker {
    display: inline-block;
    /* max-width: 17.7rem; */
    max-width: 17rem; /*1225*/
    width: 100%;
    background: var(--secondary);
    padding: 0.5rem 1rem 0.6rem;
    margin: 0 0.5rem;
}

.top-about-body {
    padding: 3.6rem 1.5rem 3.4rem;
}

.top-about-img-box {
    max-width: 98.5rem;
    width: 100%;
    margin: auto;
    text-align: center;
}

.top-about-btn {
    margin: 6.5rem auto 0;
}

.top-about-decoration01 {
    max-width: 18.2rem;
    width: 100%;
    margin: 10rem 15rem -0.2rem auto;
}

/* ==========================================
導入のメリット
========================================== */

.top-merit-wrapper {
    background: url(../../../../uploads/top_merit_bg.png) no-repeat center top / cover, var(--quaternary);
    padding: 12rem 0;
}

.top-merit-inner {
    max-width: 123rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.top-merit-lead-area {
    margin: 6.6rem 0 0;
}

.top-merit-area01 {
    margin: 14.3rem 0 0;
}

.top-merit-card-list01 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 6rem;
}

.top-merit-card01 {
    padding: 3rem;
}

.top-merit-card01-bg-primary {
    background: #ea7724;
    color: var(--white);
}

.top-merit-card01-bg-secondary {
    background: #50b195;
    color: var(--white);
}

.top-merit-card01-bg-tertiary {
    background: #f27082;
    color: var(--white);
}

.top-merit-card01-bg-quaternary {
    background: #00a0e9;
    color: var(--white);
}

.top-merit-card01-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 12.5rem;
    text-align: center;
    position: relative;
}

.top-merit-card01-decoration {
    position: absolute;
}

.top-merit-card01-decoration01 {
    max-width: 10rem;
    width: 17.54%;
    top: -1.2rem;
    right: 0;
}

.top-merit-card01-decoration02 {
    max-width: 11.8rem;
    width: 20.7%;
    top: -1.4rem;
    right: -1.8rem;
}

.top-merit-card01-decoration03 {
    max-width: 10.4rem;
    width: 18.24%;
    top: -1.7rem;
    right: -1.6rem;
}

.top-merit-card01-decoration04 {
    max-width: 10rem;
    width: 17.54%;
    top: -1.6rem;
    right: 0.8rem;
}

.top-merit-card01-sub-title {
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    position: relative;
}

.top-merit-card01-sub-title > span {
    font-size: 1.8rem;
    letter-spacing: 0.05em;
}

.top-merit-card01-title {
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.75em;
    margin: 0.5rem 0 0;
    position: relative;
    font-size: 3.0rem;
}

.top-merit-card01-body {
    background: var(--white);
    color: var(--base-font-color);
    letter-spacing: 0.05em;
    line-height: 1.75em;
    padding: 2rem 1.5rem;
    margin: 3rem 0 0;
}

.top-merit-card01-list-item {
    display: flex;
    /* font-size: 1.8rem; */
    font-size: 15px; /*1225*/
}

.top-merit-card01-list-item:before {
    content: "・";
}

.top-merit-text-box01 {
    background: var(--primary);
    color: var(--white);
    text-align: center;
    padding: 3rem 1.5rem;
    margin: 6rem 0 0;
}

.top-merit-area02 {
    margin: 8rem 0 0;
}

.top-merit-frame01 {
    background: var(--white);
    box-shadow: 0 0 0.8rem rgb(0 0 0 / 20%);
    padding: 7rem 1.5rem 10rem;
}

.top-merit-frame01-inner {
    max-width: 101rem;
    width: 100%;
    margin: auto;
}

.top-merit-block-list01 {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    margin: 7rem 0 0;
}

.top-merit-block01 {
    border: solid 0.4rem;
    border-radius: 0.5rem;
    position: relative;
}

.top-merit-block01-primary {
    border-color: #f27082;
}

.top-merit-block01-secondary {
    border-color: #50b195;
}

.top-merit-block01-tertiary {
    border-color: #0c3492;
}

.top-merit-block01-inner01 {
    display: flex;
    /* font-size: 1.63rem; */
    font-size: 15px; /*1225*/
}

.top-merit-block01-left {
    max-width: 20rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1.5rem;
}

.top-merit-block01-left-primary {
    background: #f27082;
    color: var(--white);
}

.top-merit-block01-left-secondary {
    background: #50b195;
    color: var(--white);
}

.top-merit-block01-title {
    /* font-size: 1.8rem; */
    font-size: 15px; /*1225*/
    font-weight: bold;
    letter-spacing: 0.05em;
}

.top-merit-block01-right {
    flex: 1;
    padding: 3rem 1.5rem;
    color: var(--dark);
}

.top-merit-card-list02 {
    max-width: 72.7rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 3.3rem;
    margin: auto;
}

.top-merit-card02 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.6rem 1.5rem 2.2rem;
    border-radius: 2.3rem;
    background: #f3bdc4;
}

.top-merit-card02-text {
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    text-align: center;
}

.top-merit-card03 {
    padding: 0 1.5rem 2.2rem;
    border-radius: 2.3rem;
    background: #d9f4ec;
    margin: 4.6rem 0 0;
}

.top-merit-card03-img {
    max-width: 9.9rem;
    width: 100%;
    text-align: center;
    margin: -4.6rem auto 0;
}

.top-merit-card03-list {
    margin: 1rem 0 0;
    letter-spacing: 0.05em;
    line-height: 1.75em;
}

.top-merit-card03-list-item {
    display: flex;
    align-items: flex-start;
}

.top-merit-block01-inner02 {
    padding: 5.7rem 1.5rem 3.5rem;
}

.top-merit-text-box02 {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    background: var(--primary);
    color: var(--white);
    padding: 2.4rem 1.5rem 2.3rem;
    border-radius: 5rem;
}

.top-merit-logo {
    max-width: 21.9rem;
    width: 100%;
    margin: 4rem auto 0;
}

.top-merit-block01:not(:last-child):after {
    content: "";
    display: block;
    max-width: 5rem;
    width: 100%;
    height: 2rem;
    background: #bfbfbf;
    clip-path: polygon(100% 1%, 0 0, 50% 100%);
    position: absolute;
    bottom: -4rem;
    right: 0;
    left: 0;
    margin: auto;
}

/* ==========================================
導入の流れ
========================================== */

.top-flow-wrapper {
    background: var(--fifth);
    padding: 11.7rem 0 22.3rem;
    position: relative;
}

.top-flow-inner {
    max-width: 123rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
    position: relative;
    z-index: 9;
}

.top-flow-decoration01 {
    max-width: 74.2rem;
    width: 57.07%;
    position: absolute;
    bottom: -9rem;
    right: 0;
    margin: auto;
}

.top-flow-lead-area {
    margin: 6.2rem 0 0;
}

.top-flow-area {
    margin: 8rem 0 0;
}

.top-flow-card-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6rem;
    overflow: hidden;
}

.top-flow-card {
    background: var(--white);
    position: relative;
}

.top-flow-card:before {
    content: "";
    display: block;
    max-width: 2rem;
    width: 100%;
    height: 3rem;
    background: var(--primary);
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    position: absolute;
    top: 50%;
    right: -4.5rem;
    transform: translateY(-50%);
    margin: auto;
}

.top-flow-card-header {
    background: var(--primary);
    color: var(--white);
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.58;
    text-align: center;
    padding: 1.6rem 1.5rem;
}

.top-flow-card-body {
    padding: 3.6rem 1.5rem;
}

.top-flow-card-text {
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.9em;
    text-align: center;
    color: var(--primary);
}

.top-flow-arrow-block {
    max-width: 50rem;
    width: 100%;
    padding: 0 0 5.5rem;
    margin: auto;
    position: relative;
}

.top-flow-arrow-block:before {
    content: "";
    display: block;
    width: 100%;
    height: 5.5rem;
    background: var(--primary);
    position: absolute;
    right: 0;
    left: 0;
    /* bottom: 0; */
    bottom: 0.5px; /*1225*/
    margin: auto;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.top-flwo-arrow-title {
    background: var(--primary);
    color: var(--white);
    text-align: center;
    padding: 5.2rem 1.5rem 1.1rem;
}

.top-flow-after-block {
    color: var(--white);
    text-align: center;
    padding: 2.5rem 1.5rem;
    position: relative;
}

.top-flow-after-icon {
    max-width: 11.8rem;
    width: 100%;
    height: 11.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--secondary);
    color: var(--white);
    border-radius: 50%;
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    position: absolute;
    top: 50%;
    left: 4.5rem;
    transform: translateY(-50%);
}

.top-flow-after-block:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--secondary-light);
    opacity: 0.9;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.top-flow-after-title {
    position: relative;
}

/* ==========================================
導入事例・導入インタビュー
========================================== */

.top-case-wrapper {
    padding: 13.2rem 0 11rem;
    background: var(--quaternary);
}

.top-case-inner {
    max-width: 123rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.top-case-area {
    margin: 7.2rem 0 0;
}

.top-case-card-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6rem;
}

.top-case-card {
    background: #fff;
    padding: 3.8rem 2rem;
    position: relative;
}

.top-case-card:before {
    content: "";
    display: block;
    max-width: 13rem;
    width: 100%;
    height: 16.7rem;
    background: var(--quaternary-dark);
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.top-case-card-img {
    max-width: 28.2rem;
    width: 100%;
    aspect-ratio: 282 / 169;
    background: var(--gray);
    position: relative;
    margin: auto;
}

.top-case-card-img > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.top-case-card-text {
    margin: 2.2rem 0 0;
    /* font-size: 1.8rem; */
    font-size: 15px;
}

/* ==========================================
導入エリア
========================================== */

.top-area-wrapper {
    background: url(../../../../uploads/top_area_bg.jpg) no-repeat center bottom / cover;
    color: var(--white);
    padding: 15.5rem 0 44.1rem;
}

.top-area-inner {
    max-width: 123rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.top-area-lead-area {
    margin: 4.5rem 0 0;
}

.top-area-btn {
    margin: 8rem auto 0;
}

/* ==========================================
チョイソコの想い
========================================== */

.top-philosophy-wrapper {
    padding: 17.2rem 0 9.7rem;
    position: relative;
}

.top-philosophy-wrapper:before {
    content: "";
    width: 100%;
    height: 77.6%;
    background: var(--quaternary);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.top-philosophy-frame {
    background: var(--white);
    box-shadow: 0 0 0.8rem rgb(0 0 0 / 20%);
    padding: 9.6rem 1.5rem 7.3rem;
    position: relative;
}

.top-philosophy-inner {
    max-width: 106rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.top-philosophy-lead-area {
    margin: 4.8rem 0 0;
}

.top-philosophy-img-area {
    max-width: 70.1rem;
    width: 100%;
    text-align: center;
    margin: 9.2rem auto 0;
}

.top-philosophy-slider {
    position: relative;
    margin: 8.8rem 0 0;
}

.top-philosophy-slider .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
          transition-timing-function: linear !important;
}

.top-partner-slide-img {
    background: var(--white);
    display: block;
    height: 0;
    padding: 0 0 65.58%;
    position: relative;
    box-shadow: 0 0 0.8rem rgb(0 0 0 / 28%);
}

.top-partner-slide-img > img {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

/* ==========================================
チョイソコを支えるパートナー
========================================== */

.top-partner-wrapper {
    padding: 9.3rem 0 9.7rem;
    background: var(--fifth);
    margin: 11.6rem 0 0;
}

.top-partner-inner {
    max-width: 123rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

.top-partner-area {
    margin: 7.8rem 0 0;
}

.top-partner-list {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 2.6rem;
}

.top-partner-list-item {
    background: var(--white);
}

.top-partner-link {
    display: block;
    height: 0;
    padding: 0 0 34.16%;
    position: relative;
    box-shadow: 0 0 0.8rem rgb(0 0 0 / 20%);
}

.top-partner-link:hover {
    opacity: 0.65;
}
.top-partner-link.no-link:hover {
    opacity: 1;
}

.top-partner-link > img {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1920px) {

	

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1550px) {

	

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1024px) {

	/* ==========================================
    カバー
    ========================================== */

    .top-cover-wrapper {
        padding: 10rem 0;
    }
    
    .top-cover-inner {
        gap: 2.5rem;
    }
    
    .cover-title {
        font-size: 3.2rem;
    }

    .top-cover-wrapper:after {
        height: 8rem;
        bottom: -3rem;
    }

    /* ==========================================
    お知らせ
    ========================================== */
    
    .top-news-wrapper {
        padding: 8rem 0;
    }
    
    .top-news-frame {
        padding: 1rem 0 0 1rem;
    }
    
    .top-news-frame-inner {
        padding: 5rem 1.5rem;
    }
    
    .top-news-btn {
        margin: 3rem auto 0;
    }

    /* ==========================================
    チョイソコとは？
    ========================================== */

    .top-about-wrapper {
        padding: 8rem 0 0;
    }
    
    .top-about-title-img {
        width: 50%;
        margin: 0 1.5rem 0 0;
    }
    
    .top-about-area {
        margin: 3rem 0 0;
    }
    
    .top-about-header {
        padding: 1.5rem;
    }

    .top-about-title-marker {
        margin: 0 0.5rem 1rem;
    }
    
    .top-about-body {
        padding: 2.5rem 1.5rem;
    }
    
    .top-about-btn {
        margin: 4rem auto 0;
    }
    
    .top-about-decoration01 {
        margin: 5rem 5rem -0.2rem auto;
    }

    /* ==========================================
    導入のメリット
    ========================================== */

    .top-merit-wrapper {
        padding: 8rem 0;
    }
    
    .top-merit-lead-area {
        margin: 4rem 0 0;
    }
    
    .top-merit-area01 {
        margin: 8rem 0 0;
    }
    
    .top-merit-card-list01 {
        gap: 3rem;
    }
    
    .top-merit-card01-decoration {
        position: static;
    }
    
    .top-merit-card01-sub-title {
        font-size: 2rem;
        margin: 1rem 0 0;
    }
    
    .top-merit-card01 {
        padding: 3rem 1.5rem 1.5rem;
    }
    
    .top-merit-card01-body {
        padding: 1.5rem;
        margin: 2rem 0 0;
    }
    
    .top-merit-text-box01 {
        padding: 1.5rem;
        margin: 3rem 0 0;
    }
    
    .top-merit-area02 {
        margin: 6rem 0 0;
    }
    
    .top-merit-frame01 {
        padding: 5rem 1.5rem;
    }
    
    .top-merit-block-list01 {
        margin: 5rem 0 0;
    }
    
    .top-merit-block01-left {
        padding: 1.5rem;
    }
    
    .top-merit-block01-right {
        padding: 1.5rem;
    }
    
    .top-merit-block01-inner02 {
        padding: 3rem 1.5rem 2rem;
    }
    
    .top-merit-logo {
        margin: 3rem auto 0;
    }

    /* ==========================================
    導入の流れ
    ========================================== */

    .top-flow-wrapper {
        padding: 8rem 0 15rem;
    }
    
    .top-flow-lead-area {
        margin: 4rem 0 0;
    }
    
    .top-flow-area {
        margin: 6rem 0 0;
    }

    .top-flow-card-list {
        gap: 4rem;
    }
    
    .top-flow-card:before {
        max-width: 1.5rem;
        height: 2rem;
        right: -3rem;
    }
    
    .top-flow-card-header {
        font-size: 2rem;
    }
    
    .top-flow-card-body {
        padding: 2rem 1.5rem;
    }
    
    .top-flow-card-text {
        font-size: 1.8rem;
    }
    
    .top-flwo-arrow-title {
        padding: 3rem 1.5rem 0.5rem;
    }
    
    .top-flow-arrow-block {
        padding: 0 0 3rem;
    }
    
    .top-flow-arrow-block:before {
        height: 3rem;
        bottom: 1px;
    }
    
    .top-flow-after-block {
        padding: 1.5rem;
    }
    
    .top-flow-after-icon {
        max-width: 10rem;
        height: 10rem;
        font-size: 2rem;
        left: 2.5rem;
    }
    
    .top-flow-decoration01 {
        bottom: -4.5rem;
    }

    /* ==========================================
    導入事例・導入インタビュー
    ========================================== */
    
    .top-case-wrapper {
        padding: 8rem 0;
    }
    
    .top-case-area {
        margin: 4rem 0 0;
    }
    
    .top-case-card-list {
        gap: 4rem;
    }
    
    .top-case-card {
        padding: 2rem 1.5rem;
    }
    
    .top-case-card-text {
        margin: 1.5rem 0 0;
    }

    /* ==========================================
    導入エリア
    ========================================== */
    
    .top-area-wrapper {
        padding: 8rem 0 20rem;
    }
    
    .top-area-lead-area {
        margin: 3rem 0 0;
    }
    
    .top-area-btn {
        margin: 6rem auto 0;
    }

    /* ==========================================
    チョイソコの想い
    ========================================== */
    
    .top-philosophy-wrapper {
        padding: 8rem 0;
    }
    
    .top-philosophy-frame {
        padding: 5rem 1.5rem;
    }
    
    .top-philosophy-lead-area {
        margin: 3rem 0 0;
    }
    
    .top-philosophy-img-area {
        margin: 6rem auto 0;
    }
    
    .top-philosophy-slider {
        margin: 6rem 0 0;
    }

    /* ==========================================
    チョイソコを支えるパートナー
    ========================================== */

    .top-partner-wrapper {
        padding: 8rem 0;
        margin: 8rem 0 0;
    }
    
    .top-partner-area {
        margin: 6rem 0 0;
    }
    
    .top-partner-list {
        gap: 1.5rem;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 768px) {

	/* ==========================================
    カバー
    ========================================== */
    
    .top-cover-inner {
        display: block;
    }
    
    .top-cover-text-area {
        max-width: 100%;
        width: auto;
        position: absolute;
        top: 90%;
        transform: translateY(-90%);
        right: 1.5rem;
    }

	/* ==========================================
    お知らせ
    ========================================== */

    .top-news-flex-area {
        flex-direction: column;
    }

    .top-news-left-block {
        max-width: 100%;
    }

    .top-news-right-block {
        max-width: 100%;
        margin: 4rem 0 0;
    }

	/* ==========================================
    チョイソコとは？
    ========================================== */

	/* ==========================================
    導入のメリット
    ========================================== */

    .top-merit-card-list01 {
        grid-template-columns: repeat(1,1fr);
    }
    
    .top-merit-card01 {
        width: 100%;
        margin: auto;
    }
    
    .top-merit-card01-header {
        min-height: unset;
    }
    
    .top-merit-block01-inner01 {
        flex-direction: column;
    }
    
    .top-merit-block01-left {
        max-width: 100%;
    }
    
    .top-merit-card-list02 {
        grid-template-columns: repeat(1,1fr);
        gap: 1.5rem;
    }
    
    .top-merit-card02 {
        padding: 1.5rem;
    }
    
    .top-merit-block01-inner02 {
        padding: 1.5rem;
    }
    
    .top-merit-text-box02 {
        font-size: 1.6rem;
    }
    
    /* ==========================================
    導入の流れ
    ========================================== */

    .top-flow-card-list {
        grid-template-columns: repeat(1,1fr);
    }
    
    .top-flow-card:before {
        max-width: 2.5rem;
        height: 1.5rem;
        clip-path: polygon(100% 1%, 0 0, 50% 100%);
        top: auto;
        left: 0;
        right: 0;
        bottom: -3.5rem;
    }

    /* ==========================================
    導入事例・導入インタビュー
    ========================================== */

    .top-case-card-list {
        grid-template-columns: repeat(1,1fr);
    }

    /* ==========================================
    導入エリア
    ========================================== */


    
    /* ==========================================
    チョイソコの想い
    ========================================== */


    
    /* ==========================================
    チョイソコを支えるパートナー
    ========================================== */

    .top-partner-list {
        grid-template-columns: repeat(2,1fr);
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 576px) {

    /* ==========================================
    カバー
    ========================================== */

    .top-cover-text-area {
        left: 1.5rem;
    }
    .cover-title {
        font-size: 2.4rem;
    }

	/* ==========================================
    お知らせ
    ========================================== */

    .top-news-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 0 1.5rem;
    }
    
    .top-news-link {
        margin: 1rem 0 0;
    }

	/* ==========================================
    チョイソコとは？
    ========================================== */

    /* .top-about-title {
        font-size: 1.6rem;
    } */
    
    .top-about-title-marker {
        max-width: 100%;
        width: auto;
        margin: 0 0.5rem 1rem 0;
    }

	/* ==========================================
    導入のメリット
    ========================================== */

    .top-merit-card01-decoration {
        max-width: 8rem;
    }

    .top-merit-card01-sub-title {
        font-size: 1.8rem;
    }
    
    .top-merit-card01-sub-title > span {
        font-size: 1.4rem;
    }
    
    .top-merit-block01-title {
        font-size: 1.6rem;
    }
    
    /* ==========================================
    導入の流れ
    ========================================== */

    .top-flow-card-header {
        font-size: 1.8rem;
    }
    
    .top-flow-card-text {
        font-size: 1.6rem;
    }
    
    .top-flow-after-icon {
        max-width: 8rem;
        height: 8rem;
        font-size: 1.6rem;
    }

    /* ==========================================
    導入事例・導入インタビュー
    ========================================== */



    /* ==========================================
    導入エリア
    ========================================== */


    
    /* ==========================================
    チョイソコの想い
    ========================================== */


    
    /* ==========================================
    チョイソコを支えるパートナー
    ========================================== */



}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 414px) {

	

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */