/*********************************
  共通パーツ
*********************************/

:root {
    --buddies-red: #BA2A3D;
    --buddies-red-dark: #a42536;
    --buddies-pink: #DE4F9B;
    --buddies-yellow: #FCCF00;
    --buddies-yellow-bun: #E0A700;
    --buddies-blue: #1A5BB6;
    --buddies-green: #25875A;
    --base: #333;
    --white: #fff;
    --gray: #F5F5F5;
    --gray-txt: #D9D9D9
}

@media (max-width: 96px) {
    html {
        font-size: calc((100vw - 320px) / 140 + 16px);
    }
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', 'Noto Sans JP', sans-serif;
    color: #333;
    background-color: #fff;
    line-height: 1.5;
    overflow: hidden;
}

img {
    width: 100%;
}


.sp-only {
    display: none;
}

@media (max-width: 560px) {
    .sp-only {
        display: block;
    }

    .pc-only {
        display: none;
    }

    html {
        font-size: 14px;
    }
}

#about, #function, #security, #price-flow, #qa {
    scroll-margin-top: 72px;
}


/* コンテンツ幅
-------------------------*/

.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.content-top {
    margin-top: 5rem;
}


/* 見出し
-------------------------*/

h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}

h2 {
    font-size: 2rem;
    margin-bottom: 2.5rem;
    text-align: center;

    span {
        font-weight: 200;
        font-size: 1.5rem;
        margin-bottom: 8px;
        display: block;
        color: var(--buddies-red);
    }
}

h3 {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

h4 {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}



/* カラー
-------------------------*/

.bg-buddies-red {
    background-color: var(--buddies-red);
}

.bg-buddies-red-dark {
    background-color: var(--buddies-red-dark);
}

.text-buddies-red {
    color: var(--buddies-red);
}

.border-buddies-red {
    border-color: var(--buddies-red);
}

.bg-buddies-yellow {
    background-color: var(--buddies-yellow);
}

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

.hero-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.highlight {
    color: var(--buddies-red);
    font-weight: bold;
}


/* ボタン
-------------------------*/

.cta-button {
    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.btn {
    font-size: 1.25rem;
    padding: 1rem 4rem;
    border-radius: 50px;
    font-weight: bold;
    /* max-width: 440px; */
    width: 100%;
    transition: 0.5s;
}

@media (min-width: 768px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}

/*********************************
  ヘッダー
*********************************/

.nav-link {
    position: relative;
    font-size: 14px;
}

.nav-link:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--buddies-red);
    transition: width 0.3s ease;
}

.nav-link:hover:after {
    width: 100%;
}


/* アクティブなナビリンクのスタイル */

.nav-link.active-nav {
    color: var(--buddies-red);
    font-weight: 600;
}

.nav-link.active-nav:after {
    width: 100%;
}

.gradient-text {
    background: var(--buddies-red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sticky-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}


/* ページ全体のプログレスバー */

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--buddies-red);
    z-index: 1000;
    width: 0%;
}

.case-panel {
    display: none;
}

.case-panel.active {
    display: block;
}

@media (min-width: 768px) and (max-width: 1280px) {
    .md\:flex {
        display: none;
    }
}

@media (min-width: 1281px) {
    .md\:flex {
        display: flex !important;
    }
}

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


/* 波紋アニメーション */

.ripple-bg {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0);
    animation: ripple 2s linear infinite;
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}


/* ドット背景 */

.dot-pattern {
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 20px 20px;
}


/* 波のアニメーション */

.wave-svg {
    position: relative;
    display: block;
    width: calc(120% + 1.3px);
    height: 160px;
    margin-left: -10%;
}

.wave1 {
    animation: wave1 3s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

.wave2 {
    animation: wave2 2s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

.wave3 {
    animation: wave3 4s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

@keyframes wave1 {
    0% {
        transform: translateX(-30px) scaleY(1.05);
    }

    100% {
        transform: translateX(30px) scaleY(0.95);
    }
}

@keyframes wave2 {
    0% {
        transform: translateX(25px) scaleY(0.95);
    }

    100% {
        transform: translateX(-25px) scaleY(1.05);
    }
}

@keyframes wave3 {
    0% {
        transform: translateX(-20px) scaleY(1);
    }

    100% {
        transform: translateX(20px) scaleY(1.02);
    }
}


/* バブルアニメーション */

.bubble {
    fill: rgba(255, 255, 255, 0.4);
    animation: bubbleRise 3s ease-in infinite;
    opacity: 0;
}

@keyframes bubbleRise {
    0% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-100px) scale(1.5);
        opacity: 0;
    }
}

@media (max-width: 960px) {
    .hero .md\:flex-row {
        flex-direction: column;
    }

    .md\:w-3\/5 {
        width: 100%;
    }

    .md:w-2/5 {
        order: 1;
    }

    .md\:w-2\/5 {
        width: 100%;
    }

    .max-w-lg {
        max-width: fit-content;
    }
}

.mv-cta-btn .rounded-lg {
    border-radius: 50px;
    position: relative;

    &:after {
        content: "\e5e1";
        font-family: "Material Symbols Outlined";
        position: absolute;
        right: 1.25rem;
    }
}


/*********************************
  悩みセクション
*********************************/

#worries {
    text-align: center;
    position: relative;
}

.silhouette {
    position: absolute;
    right: -70px;
    top: 0;
    width: 150px;
    animation: alert-listening 0.6s ease-out infinite;
}

@keyframes alert-listening {

    0%,
    100% {
        transform: translateX(0) scale(1);
    }

    30% {
        transform: translateX(-12px) scale(1.05);
    }

    60% {
        transform: translateX(-4px) scale(1.02);
    }
}

@media screen and (max-width: 767px) {
    .silhouette {
        right: -40px;
        top: 30%;
        width: 80px;
    }
}

@media screen and (max-width: 560px) {
    .worries_answer {
        padding: 0;
    }

    .worries_hero-sp {
        .worries-list {
            text-align: left;
        }

        .worries-list {
            padding: 20px;
            border: 2px solid var(--base);
            border-radius: 10px;
            margin-bottom: 2rem;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                bottom: -24px;
                left: 50%;
                margin-left: -15px;
                border: 12px solid transparent;
                border-top: 12px solid #FFF;
                z-index: 2;
            }

            &::after {
                content: "";
                position: absolute;
                bottom: -30px;
                left: 50%;
                margin-left: -17px;
                border: 14px solid transparent;
                border-top: 14px solid var(--base);
                z-index: 1;
            }


        }

        .worries-list li {
            padding-bottom: 5px;

            span {
                font-weight: bold;
                color: #1A5BB6;
                font-size: 1.25rem;
            }

            &::before {
                content: "";
                width: 10px;
                height: 10px;
                display: inline-block;
                margin-right: 10px;
                background-color: #1A5BB6;
                border-radius: 50%;
            }
        }
    }
}


/*********************************
  解決セクション
*********************************/

#answer {
    margin-top: -1.5rem;
    text-align: center;
    color: var(--white);
    font-weight: bold;

    .answer_inner {
        padding-top: 5rem;
        background: url("../img/top/solution-back.png") no-repeat top center;
        background-size: 100% 600px;
    }

    .answer-sub {
        font-size: 1.5rem;
        background-color: var(--base);
        max-width: fit-content;
        margin: 0 auto;
        border-radius: 50px;
        position: relative;
        color: var(--txt-white);
        padding: 1rem 4rem 1.2rem;

        &::before {
            content: "";
            border: 10px solid transparent;
            border-top: 10px solid #333;
            margin-left: -10px;
            top: 100%;
            left: 50%;
            position: absolute;
        }
    }

    .answer-headline {
        font-size: 3.25rem;
        line-height: 1.8;
        margin-bottom: 2rem;
        color: var(--txt-white);
    }

    @media screen and (max-width: 960px) {
        .answer_inner {
            background-size: 100% 500px;
        }
    }

    @media screen and (max-width: 767px) {
        .answer_inner {
            background-position: 0 120%;
        }

        .answer-sub {
            margin-bottom: 10px;
        }

        .answer-headline {
            font-size: 3rem;
        }
    }

    @media screen and (max-width: 560px) {
        margin-top: -1rem;

        .answer_inner {
            background: url("../img/top/solution-back-sp.png") no-repeat top center;
            background-size: cover;
        }
    }

}

/*********************************
  解決セクション
*********************************/

#solution {
    .solution_headline {
        line-height: 1.5;
        text-align: center;

        span {
            font-size: 4rem;
            color: var(--buddies-red);
            display: inline;
            font-weight: bold;
            padding: 0 5px;
            line-height: 1.4;
        }

        img {
            max-width: 260px;
            display: inline;
        }
    }

    .point_list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .point_list-item {
        background: var(--gray);
        padding: 3rem 1.25rem;
        border-radius: 10px;
        min-height: 480px;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .point-list_headline {
            text-align: center;
            margin-bottom: 0;

            span {
                color: var(--buddies-red);
                font-size: 1.25rem;
                margin-bottom: 5px;
                display: block;
            }
        }

        .point-img {
            max-height: 160px;
            display: block;
            width: auto;
            object-fit: contain;
        }

        .list-item-roi {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
    }

    .last-item {
        grid-column: span 2;
    }

    .point_ai-list {
        display: flex;
        gap: 20px;
        background: var(--white);
        padding: 20px;
        justify-content: space-between;
        border-radius: 10px;

        span {
            font-size: 0.8rem;
            color: #8F8F8F;
            margin-top: 1rem;
        }

        img {
            width: 56px;
        }
    }

    .point-list-item_left {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .roi-sample {
        background: var(--white);
        padding: 2rem 1.5rem;
        border-radius: 10px;

        .roi-sample_inner {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .roi-sample_headline01 {
            font-size: 1.25rem;
            font-weight: bold;

            span {
                font-size: 1rem;
            }
        }

        .roi-sample_headline02 {
            color: var(--buddies-red);
            font-size: 1.2rem;
            padding: 0 0.5em;
            font-weight: bold;
            /*上下 左右の余白*/
            background: transparent;
            /*背景透明に*/
            border-left: solid 8px var(--buddies-red);
            ;
            /*左線*/
        }
    }

    table {
        tr:last-child>* {
            border-top: 1px solid #DEDEDE;

            th {
                margin-top: 20px;
            }
        }

        th {
            padding: 10px 0;
            font-weight: normal;

            span {
                font-size: 0.8rem;
            }
        }

        td {
            text-align: right;

            strong {
                font-size: 1.25rem;
                font-weight: bold;
            }
        }

        .roi-result strong {
            color: var(--buddies-red);
            font-size: 1.8rem;
            padding-right: 5px;
        }
    }

    .roi-hukidashi {
        background: var(--buddies-red);
        padding: 10px;
        position: relative;
        color: var(--white);
        text-align: center;
        font-weight: bold;

        &::before {
            content: "";
            border: 10px solid transparent;
            border-bottom: 10px solid var(--buddies-red);
            margin-right: -10px;
            bottom: 100%;
            right: 15%;
            position: absolute;
        }
    }

    .roi-notes {
        font-size: 0.7rem;
    }

    @media screen and (max-width: 767px) {
        .solution_headline {
            span {
                font-size: 3rem;
            }

            img {
                max-width: 200px;
                display: inline;
            }
        }

        .solution_inner {
            margin-top: 2.5rem;
        }
    }

    @media screen and (max-width: 960px) {
        .point_list {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media screen and (max-width:560px) {
        .point_list {
            display: flex;
            flex-direction: column;
        }

        .point_list-item {
            min-height: auto;
        }

        .point_list-item .list-item-roi {
            grid-template-columns: 1fr;
        }

    }

}

/*********************************
  ABOUT
*********************************/


/* 波 */

#wave {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

#about {
    background: var(--buddies-red);
    color: var(--white);
    text-align: center;
    padding-bottom: 8rem;

    .about_headline {
        span {
            color: var(--buddies-white);
        }

        img {
            max-width: 250px;
            display: inline;
        }
    }

    .about_txt {
        line-height: 2;
        margin-bottom: 2.5rem;
    }

    .video_area {
        position: relative;
    }

    video {
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
        border-radius: 10px;
    }

    .about_fukidashi01 {
        position: absolute;
        top: 0;
        right: 0;
        width: 25%;
    }

    .about_fukidashi02 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 25%;
    }

    @media screen and (max-width: 960px) {
        .about_fukidashi01 {
            top: -10px;
        }

        .about_fukidashi02 {
            left: -10px;
        }

    }
}

/*********************************
  機能
*********************************/

.function-box {
    position: relative;
    margin-bottom: 7.5rem;
}

.content_inner {
    width: 70%;
    padding: 5rem 7.5rem;
    color: var(--white);
}

.content-box,
.function_know-how {
    position: relative;
    z-index: 3;
}


/* 各項目ごとの色分け・レイアウト分け */

.function01 .content_inner {
    background: var(--buddies-green);
}

.function02 .content_inner {
    background: var(--buddies-pink);
}

.function03 .content_inner {
    background: var(--buddies-yellow-bun);
}

.function04 .content_inner {
    background: var(--buddies-blue);
}

.function01 .content_inner,
.function03 .content_inner {
    margin-left: auto;
    border-radius: 40px 0 0 40px;
}

.function02 .content_inner,
.function04 .content_inner {
    margin-right: auto;
    border-radius: 0 40px 40px 0;
}

.function01 .icon {
    color: var(--buddies-green);
}

.function02 .icon {
    color: var(--buddies-pink);
}

.function03 .icon {
    color: var(--buddies-yellow-bun);
}

.function04 .icon {
    color: var(--buddies-blue);
}

.function-character {
    position: absolute;
    width: 30vw;
    max-width: 500px;
    min-width: 200px;
    height: auto;
    z-index: 2;
    bottom: 0;
}

.function-back {
    position: absolute;
    width: 25vw;
    max-width: 400px;
    min-width: 160px;
    z-index: -2;
    bottom: 0;
}

.chara01,
.chara03 {
    left: 10%;
}

.chara02,
.chara04 {
    right: 10%;
}

.back01,
.back03 {
    left: 0;
}

.back02,
.back04 {
    right: 0;
}


/* 機能BOX */

.content-box {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 2.5rem;

    .box_white {
        background: var(--white);
        color: var(--base);
        padding: 2rem;
        border-radius: 10px;
    }

    .icon {
        font-size: 2rem;
    }
}

.know-how_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;

    .know-how_item img {
        margin-bottom: 8px;
    }

    a {
        transition: 0.5s;

        &:hover {
            opacity: 0.8;
        }
    }
}

.feature_headline {
    font-size: 2rem;

    span {
        font-size: 1.25rem;
        display: block;
        margin-bottom: 10px;
        font-weight: normal;
    }
}

.function03 .intro-txt,
.function04 .intro-txt {
    margin-bottom: 2.5rem;
}


/* 犬 */

.function_other {
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;

    img {
        width: 10vw;
        max-width: 100px;
        display: inline-block;
    }

    span {
        font-size: 3rem;
        color: var(--buddies-red);
    }
}

.slide-element {
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.slide-element.character {
    transition-delay: 0.1s !important;
}

.slide-element.background {
    transition-delay: 0.4s !important;
}

/* 初期状態では非表示 */
.slide-element:not(.slide-in) {
    opacity: 0 !important;
}

/* slide-inが付いた時のみ表示 */
.slide-element.slide-in {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.slide-left-to-right {
    transform: translateX(-100px) !important;
}

.slide-right-to-left {
    transform: translateX(100px) !important;
}

@media screen and (max-width: 1100px) {
    .content_inner {
        width: 90%;
        padding: 5rem 4rem;
    }

    .function-character {
        width: 40vw;
    }

    .chara01,
    .chara03 {
        left: -10%;
    }

    .chara02,
    .chara04 {
        right: -10%;
    }
}

@media screen and (max-width:560px) {
    #function .content_inner {
        width: 100%;
        border-radius: 20px;
        padding: 5rem 2rem;
    }

    .function01 {
        margin-top: 5rem;
    }

    .function-box {
        margin-bottom: 5rem;
    }

    .content-box {
        grid-template-columns: 1fr;
    }

    #function .function-character {
        top: -3%;
        right: -8%;
        min-width: 180px;
    }

    .chara01,
    .chara03,
    .chara02,
    .chara04 {
        right: 0;
        left: auto;
    }

    .function-back {
        display: none;
    }

    .feature_headline,
    .intro-txt {
        z-index: 3;
        position: relative;
    }

    .know-how_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .function_other {
        padding: 0 20px;

        img {
            width: 30vw;
        }
    }

    .slide-element.slide-left-to-right,
    .slide-element.slide-right-to-left {
        transform: translateX(0px) !important;
    }
}


/*********************************
  CTA
*********************************/

#cta {
    margin-top: 15rem;
    background: var(--buddies-red);
    color: var(--white);
}

.cta_inner {
    padding: 5rem 0;
}

.cta_top-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    padding-left: 4rem;

    .hero_headline {
        margin-bottom: 1rem;
        text-align: left;
        grid-row: 1;
        grid-column: 1;

        .b_logo {
            max-width: 280px;
            display: inline;
        }
    }

    .hero_txt {
        grid-row: 2;
        grid-column: 1;
    }

    .hero_img {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        margin: -10rem -20px 0 0;
    }
}


.cta_btn-area {
    grid-column: span 2;
    margin-top: 5rem;
}

.cta-btn_main {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.cta-btn {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;

    .microcopy {
        font-size: 1rem;
    }

    .btn-demo {
        background: var(--white);
        color: var(--buddies-red);
        border: 5px solid var(--white);
        position: relative;

        &:hover {
            background: none;
            color: var(--white);
            border: 5px solid var(--white);
        }

        &::after {
            content: "\e5e1";
            font-family: "Material Symbols Outlined";
            position: absolute;
            right: 1.25rem;
        }
    }

    .btn-trial {
        background: var(--buddies-yellow);
        color: var(--base);
        border: 5px solid var(--buddies-yellow);
        position: relative;

        &:hover {
            background: none;
            color: var(--buddies-yellow);
            border: 5px solid var(--buddies-yellow);
        }

        &::after {
            content: "\e5e1";
            font-family: "Material Symbols Outlined";
            position: absolute;
            right: 1.25rem;
        }
    }
}

.cta_tel-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;

    p {
        margin-bottom: 5px;
    }

    .btn-tel {
        background: var(--white);
        color: var(--buddies-red);
        font-size: 1.75rem;
        border: 5px solid #D9D9D9;
        gap: 0;
        padding: 5px;
        max-width: 360px;

        span {
            color: #838383;
            font-size: 0.8rem;
            font-weight: normal;
        }
    }
}

@media screen and (min-width: 1440px) {
    .cta_top-content {
        max-width: 1440px;
        margin: 0 auto;
    }

    .b_logo {
        max-width: 340px;
    }
}

@media screen and (max-width: 960px) {
    .cta_top-content {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        padding: 0;
        gap: 20px;

        .hero_headline {
            grid-row: 1;
            grid-column: 1;
            padding-left: 2rem;

            .b_logo {
                max-width: 180px;
            }
        }

        .hero_txt {
            grid-row: 2;
            grid-column: 1 / 3;
            text-align: center;
        }

        .hero_img {
            grid-column: 2 / 3;
            grid-row: 1 / 3;
            margin-top: -10rem;
        }
    }

    .cta_btn-area {
        padding: 0 20px;
        margin-top: 2rem;

        .btn-demo,
        .btn-trial {
            font-size: 1.25rem;
            /* padding: 1rem; */
        }

        .microcopy {
            font-size: 0.7rem;
        }
    }
}

@media screen and (max-width: 767px) {
    .cta_top-content .hero_img {
        margin-top: -6rem;
    }
}

@media screen and (max-width: 560px) {
    .cta_top-content {
        .hero_headline {
            grid-row: 2;
            grid-column: 1 / 3;
            padding: 0 20px;
            font-size: 1.8rem;
        }

        .hero_txt {
            grid-row: 3;
            grid-column: 1 / 3;
            text-align: left;
            padding: 0 20px;
        }

        .hero_img {
            margin: -10rem auto 0;
            width: 80%;
            grid-row: 1;
            grid-column: 1 / 3;
        }
    }

    .cta-btn_main {
        flex-direction: column;
    }

    .cta_tel-btn .btn-tel {
        max-width: 440px;
    }
}




/*********************************
  セキュリティ
*********************************/

.security-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.security-item {
    background: var(--gray);
    padding: 2rem 1.25rem;
    border-radius: 10px;
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    justify-content: center;
    gap: 20px;

    h3 {
        font-size: 1.3rem;
        margin-bottom: 0;
        margin: 0 auto;
    }

    img {
        max-width: 80px;
        height: 80px;
        margin: 0 auto;
        object-fit: contain;
    }
}

.security-item:last-child {
    grid-column: span 4;
    background: url("../img/top/security-back01.png") no-repeat left 40px bottom 0px, url("../img/top/security-back02.png") no-repeat right 40px bottom 0px, var(--gray);

    .security-declaration {
        color: var(--buddies-red);
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
    }
}

@media screen and (max-width: 1980px) {
    .security-item:last-child {
        background: url("../img/top/security-back01.png") no-repeat left 0 bottom 0px, url("../img/top/security-back02.png") no-repeat right 0 bottom 0px, var(--gray);
        background-size: 20%;
        padding-bottom: 5rem;
    }
}

@media screen and (max-width: 767px) {
    .security-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .security-item:last-child {
        grid-column: span 2;
        background: url("../img/top/security-back01.png") no-repeat left 0 bottom 0px, url("../img/top/security-back02.png") no-repeat right 0 bottom 0px, var(--gray);
        background-size: 20%;
        padding-bottom: 5rem;
    }
}

@media screen and (max-width: 560px) {
    .security-list {
        grid-template-columns: 1fr;
    }

    .security-item:last-child {
        grid-column: span 1;
    }

    .security-item:last-child {
        background-size: auto 80px;
    }
}


/*********************************
  コスト
*********************************/

.cost_table {
    overflow-x: auto;

    table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #D9D9D9;
    }

    th,
    td {
        border: 1px solid #D9D9D9;
        padding: 1rem;
        white-space: nowrap;
    }

    tr td:first-child {
        font-weight: bold;
    }

    th {
        background: var(--buddies-red);
        padding: 10px;
        align-items: center;
        color: var(--white);
        vertical-align: middle;

        img {
            max-width: 60px;
            max-height: 60px;
            object-fit: contain;
            margin: 0 auto 10px;
        }
    }

    .txt-left {
        text-align: left;
    }

    .txt-center {
        text-align: center;
    }

    .effect {
        color: var(--buddies-red);
        font-weight: bold;
        font-size: 1.25rem;
    }
}


/*********************************
  導入事例
*********************************/

#case {
    background: #FDF5F6;
    padding: 5rem 0;
}

.case-card {
    background: var(--white);
    height: auto;
    padding: 2.5rem;
    border-radius: 10px;
    border: 1px solid #D9D9D9;

    .company-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .company-info {
        display: grid;
        grid-template-columns: 100px 1fr;
        align-items: center;
        gap: 0 1rem;
    }

    .company-logo {
        width: 100px;
        height: 60px;
        object-fit: contain;
        grid-row: 1 / 3;
        grid-column: 1 / 2;
        margin-right: 10px;
    }

    .company-name {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        text-align: left;
        padding: 0;
        margin: 0;
        font-size: 1.25rem;
        font-weight: bold;
    }

    .company-job {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        text-align: left;
        color: #A0A0A0;
    }

    .case-icon a {
        width: 48px;
        height: 48px;
        border-radius: 50px;
        background: var(--buddies-red);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        transition: 0.5s;
    }

    .case-icon a:hover {
        opacity: 0.8;
    }
}


/* スライダー */

.slick-list {
    overflow: visible;
    margin: 0 -10px;
}

.slick-track {
    display: flex;
}

.slick-slide {
    margin: 0 10px;
}

.case_content-area {
    padding: 0 40px;
    margin: 0 auto;
}

@media screen and (max-width:767px) {
    .case_content-area {
        padding: 0;
    }

    .case-card {
        padding: 2rem;
    }

    .case-card .company-info {
        display: block;
    }

    .company-logo {
        height: 60px;
        margin-bottom: 1rem;
    }
}


/* スライダー矢印 */

.arrow_box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0 0;
    position: relative;
    gap: 20px;
}


/* カスタム矢印のスタイル */

.custom-arrow {
    /* transform: translateY(-50%); */
    z-index: 80;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.custom-arrow:before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-top: 3px solid;
    border-right: 3px solid;
    transform: rotate(-45deg);
}

.custom-prev {
    left: -60px;
}

.custom-prev:before {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.custom-next {
    right: -60px;
}

.custom-next:before {
    transform: rotate(45deg);
    margin-right: 3px;
}


/* アクティブ状態（ピンク） */

.custom-arrow.active {
    color: var(--buddies-red);
    border: 2px solid var(--buddies-red);
}

.custom-arrow.active:before {
    border-color: var(--buddies-red);
}


/* 無効状態（グレー） */

.custom-arrow.disabled {
    color: #BFBFBF;
    cursor: not-allowed;
    border: 1px solid #BFBFBF;
}

.custom-arrow.disabled:before {
    border-color: #BFBFBF;
}


/* dots */

.dots-wrap {
    display: flex;
    justify-content: center;
}

.dots-wrap li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #BFBFBF;
    border-radius: 50%;
    cursor: pointer;
}

.dots-wrap li:hover,
.dots-wrap li.slick-active {
    background: var(--buddies-red);
}

.dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}


/*********************************
  シンプルな料金体系
*********************************/

#price-flow {
    background: var(--buddies-red);
    padding: 7.5rem 0;
}

.price-flow_inner {
    background: var(--white);
    padding: 5rem;
    border-radius: 40px;
}

.price-content {
    display: flex;
    align-items: stretch;
    gap: 10px;

    .plus-icon {
        display: flex;
        align-items: center;
        /* プラス記号を縦中央に */
        justify-content: center;
    }
}

.price-content-box {
    border: 1px solid var(--gray-txt);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    align-items: center;

    .content-ttl {
        font-weight: bold;
        font-size: 1.25rem;
        text-align: center;
    }

    .content-price {
        color: var(--buddies-red);
        font-weight: bold;
        font-size: 1.25rem;

        span {
            font-size: 2.5rem;

            &::before {
                content: '￥';
            }
        }
    }

    .big-txt {
        font-size: 2.5rem;
    }

    .box-list {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--gray-txt);
    }

    .box-item {
        text-indent: -1em;
        padding-left: 1rem;
    }

    .box-item::before {
        content: '';
        width: 10px;
        height: 10px;
        background: var(--gray-txt);
        display: inline-block;
        border-radius: 50px;
        margin-right: 10px;
    }
}

@media screen and (max-width:1100px) {
    #price-flow {
        padding: 2rem 20px;
    }

    .price-flow_inner {
        padding: 2.5rem;
    }
}

@media screen and (max-width:786px) {
    .price-content {
        flex-direction: column;
    }
}

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

.flow_list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    counter-reset: num;
}

.flow_item {
    background: var(--gray);
    padding: 2.5rem;
    border-radius: 10px;
    counter-increment: num;

    .flow_item--inner {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 1.5rem;

        img {
            width: 220px;
            height: 180px;
            object-fit: contain;
            margin: 0 auto;
        }
    }

    .flow_item--content {
        border-left: 1px solid var(--gray-txt);
        padding-left: 1.5rem;
    }

    h3 {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;

        &::before {
            content: counter(num);
            background: var(--buddies-red);
            color: var(--white);
            width: 40px;
            height: 40px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .time-box {
        font-size: 0.8rem;
        color: #757575;
        border: 1px solid #757575;
        padding: 10px;
        border-radius: 5px;
    }

    .time-box.pink {
        color: var(--buddies-red);
        border-color: var(--buddies-red);
    }

    .time-box.yellow {
        color: var(--buddies-yellow);
        border-color: var(--buddies-yellow);
    }
}

.cta_btn-area a {
    transition: 0.5s;
}


.flow_item .cta_btn-area {
    margin-top: 1.25rem;
    display: flex;
    gap: 1.25rem;
    padding: 0;

    .cta-btn {
        font-size: 1rem;
        padding: 10px 1.5rem;
        flex-direction: row;
        justify-content: center;
        position: relative;

        &::after {
            content: "\e5e1";
            font-family: "Material Symbols Outlined";
            position: absolute;
            right: 1.25rem;
        }
    }

    .btn-demo {
        background: var(--buddies-red);
        color: var(--white);
        border: 2px solid var(--buddies-red);
    }

    .btn-trial {
        background: var(--buddies-yellow);
        color: var(--base);
        border: 2px solid var(--buddies-yellow);
    }

    a.btn.cta-btn.btn-demo:hover {
        border: 2px solid var(--buddies-red);
        background: none;
        color: var(--buddies-red);
    }

    a.btn.cta-btn.btn-trial:hover {
        border: 2px solid var(--buddies-yellow);
        background: none;
    }
}

@media screen and (max-width:786px) {
    .price-flow_inner {
        padding: 2.5rem 20px;
        border-radius: 20px;
    }

    .flow_item {
        padding: 2.5rem 20px;

        h3 {
            flex-wrap: wrap;
        }

        /* .time-box {
            display: block;
            width: 100%;
        } */

        .flow_item--inner {
            grid-template-columns: 1fr;
        }

        .cta_btn-area {
            flex-direction: column;
        }

        .flow_item--content {
            padding: 20px 0 0 0;
            border-left: none;
            border-top: 1px solid var(--gray-txt);
        }
    }
}


/*********************************
  よくあるご質問
*********************************/


/* 必須 */

.answer {
    display: none;
    transition: none;
    max-height: none;
}

details::details-content {
    transition: height 0.4s ease, opacity 0.4s ease, content-visibility 0.4s ease allow-discrete;
}

.details {
    border: 1px solid var(--gray-txt);
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    transition: none !important;
}

.details[open] .summary {
    &::after {
        content: "\e5ce";
    }
}

.summary {
    display: block;
    /*デフォルトの三角形を削除*/
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2rem;
    position: relative;
    /* transition: 0.4s; */

    &::before {
        content: 'Q';
        font-size: 1.2rem;
        font-weight: bold;
        padding-right: 10px;
        color: var(--buddies-red);
        margin-bottom: 10px;
    }

    &::after {
        content: "\e313";
        font-family: "Material Symbols Outlined";
        position: absolute;
        right: 1.25rem;
        transition: transform 0.4s ease;
    }
}

.summary::-webkit-details-marker {
    /* Safari-デフォルトの三角形を削除*/
    display: none;
}

.answer {
    overflow: hidden;
    /* iOSでのちらつき防止 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* details要素のデフォルトアニメーションを完全に無効化 */
details, details * {
    transition: none !important;
    animation: none !important;
}

/* アイコンのアニメーションのみ有効に */
.summary::after {
    transition: transform 0.4s ease !important;
}

.answer_inner {
    padding: 1.25rem;
}

@media screen and (max-width: 767px) {
    .summary {
        padding: 0 4rem 0 2rem;
        text-indent: -1.5rem;

        &::after {
            right: 1rem;
            font-size: 2rem;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}


/*********************************
  CTA フォームエリア
*********************************/

.cta_form-area {
    margin-top: 7.5rem;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr 1fr;
}

.cta_form-area>div {
    padding: 1.25rem;
    background: var(--white);
    border-radius: 10px;
}

.form_headline {
    padding: 10px;
    text-align: center;
    border-radius: 5px;
}

.form_demo .form_headline {
    background: var(--buddies-red);
}

.form_trial .form_headline {
    background: var(--buddies-yellow-bun);
}



/*********************************
    フッター
*********************************/

footer {
    padding-bottom: 5rem;
}

.f-logo {
    max-width: 240px;
    object-fit: contain;
}

.f_inner {
    margin: 5rem 40px 0 40px;
}

.f-menu_content {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--gray-txt);
}

.f-menu_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 50%;
    gap: 10px 0;
}

.f-menu_item {
    margin-right: 20px;

    a::before {
        content: "\e5e1";
        font-family: "Material Symbols Outlined";
        margin-right: 10px;
        color: var(--buddies-red);
    }
}

footer a {
    transition: 0.5s;
}

footer a:hover {
    opacity: 0.8;
}


.f-menu_sub {
    margin-top: 2.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.f-sub_menu {
    display: flex;
    gap: 20px;
    font-weight: bold;
}

@media screen and (max-width: 767px) {
    .f-logo {
        max-width: 200px;
    }
}

@media screen and (max-width: 560px) {
    footer {
        padding-bottom: 2rem;
    }

    .f-menu_content {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        border: none;
        padding-bottom: 0;
    }

    .f-menu_list {
        width: 100%;
        display: grid;
        justify-content: unset;

        .f-menu_item {
            margin-right: 0;

            a {
                display: block;
                font-weight: bold;
                padding: 10px 0;
                border-bottom: 1px solid var(--gray-txt);
            }
        }
    }

    .f-menu_sub {
        flex-direction: column;
        gap: 40px;

        .f-sub_menu {
            flex-direction: column;
            gap: 5px;
            width: 100%;

            a {
                display: block;
                padding: 5px 0;
            }
        }
    }

    .f-copy {
        order: 2;
    }
}