/* ------------------------------------------------
SERVICE - 事業内容 -
------------------------------------------------ */

/* 事業内容ページのスタイル
-----------------------------------------*/
.service__heading02 {
    --min-size: 21;
    --max-size: 36;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-150);
    text-align: center;
    margin-bottom: clamp(20px, 4vw, 50px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

/* reason__titleのクラス名があるもの以外 */
.service__heading02:not(:is(.reason__title, .solution__title))::after {
    content: "";
    display: block;
    width: clamp(36px, 4vw, 56px);
    height: 4px;
    background: #4ACBD0;
}

/* 事業内容セクション
-----------------------------------------*/

.service-intro {
    --min-size: 52;
    --max-size: 147;
    padding-bottom: var(--clamp-size);
    position: relative;
}

.service-intro__inner {
    text-align: center;
}

.service-intro__title {
    margin-bottom: 0.5em;
}


.service-intro__subtitle {
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-150);
    --min-size: 22;
    --max-size: 30;
    margin-bottom: var(--clamp-size);
}

.service-intro__copy {
    --min-size: 27;
    --max-size: 40;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-bold);
    line-break: loose;
    margin-bottom: var(--space-xl);
}

.service-intro__text {
    line-height: var(--lineHeight-160);
    width: fit-content;
    margin-inline: auto;
}

.service-intro::after {
    content: "SERVICE";
    display: block;
    /* グラデーションテキスト */
    background: var(--gradient-light);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    --min-size: 52;
    --max-size: 147;
    font-size: var(--clamp-size);
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-semi-bold);
    line-height: 0.9;

    position: absolute;
    z-index: 0;
    bottom: 0;
    right: 3%;
    z-index: -1;
}

/* ········YOUTUBE MODAL ········ */
/* モーダル本体 */
.video-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-modal.is-open {
    display: flex;
}

.video-modal.is-visible {
    opacity: 1;
}

/* モーダルコンテンツ */
.video-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    max-height: 85vh;
    max-height: 85svh;
    aspect-ratio: 16 / 9;
    cursor: default;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.video-modal.is-visible .video-content {
    transform: scale(1);
}

.video-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* 閉じるボタン */
.modal-close {
    position: absolute;
    top: calc(-1 * clamp(25px, 2.7vw, 40px));
    right: 0;
    color: white;
    --min-size: 30;
    --max-size: 50;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-regular);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: #ccc;
}

/* 動画を見るボタン */
.service-intro__btn {
    font-size: var(--fontSize-sm);
    font-weight: var(--fontWeight-bold);
    padding: 1em 2em;
    background:var(--color-sky);
    border: 1px solid var(--color-sky);
    color: white;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75em;
    margin: clamp(30px, 3.6vw, 50px) auto 0;
}

/* 左に▶︎を追加 */
.service-intro__btn::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 1em solid #fff;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    transition: all 0.3s ease;
}

.service-intro__btn:hover {
    background: #fff;
    color: var(--color-sky);
}

.service-intro__btn:hover::before {
    border-left-color: var(--color-sky);
}

/* 円が５つ並ぶスタイル（parts-service.php利用）
-----------------------------------------*/
.service {
    padding-top: clamp(40px, 5.12vw, 70px);
    padding-bottom: clamp(110px, 12.5vw, 172px);
}

@service (width < 768px) {
    .service {
        background: url(../img/common/bg_grey-sp.avif) center center / 100% repeat;
    }

    .service-intro {
        padding-bottom: clamp(40px, 17vw, 127px);
        position: relative;
    }

    .service-intro::after {
        font-size: clamp(52px, 20vw, 147px);
    }

    .service-intro__text {
        text-align: left;
    }
}


/* カードレイアウト
-----------------------------------------*/

.service-cards {
    width: clamp(300px, 38.6vw, 528px);
}

/* 各カード */
.service-card {
    width: min(100%, 528px);
    padding: clamp(24px, 2.63vw, 36px) clamp(16px, 1.46vw, 20px);
}

.service-card__content {
    padding-inline: 0;
}


/* 画像 -------- */
.service-card__image {
    aspect-ratio: 488/223;
}


.service-card__title {
    font-size: var(--fontSize-2xl);
    line-height: var(--lineHeight-125);
    /* グラデーションタイトル */
    background: var(--gradient-reverse);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
}

.service-card--consulting .service-card__title {
    font-size: clamp(17px, 2.4vw, 26px);
}

.service-card__copy {
    font-size: var(--fontSize-lg);
}

.service-card__text {
    font-size: 14px;
    line-height: 2.3;
}

.page-service .service-card__text {
    --min-size: 14;
    --max-size: 16;
    font-size: var(--clamp-size);
    line-height: var(--lineHeight-150);
}

@media (max-width: 767px) {

    .service__wrap {
        padding: 0;
    }

    .service__circle::after {
        background: unset;
    }

    /* hover：hover時に背景色を透過しグラデーションが出現 */
    .service__circle:hover::after {
        opacity: 0;
        transition: all 0.3s ease;
    }

    .service-cards {
        width: clamp(100px, 100%, 528px);
    }

    /* モバイルではactiveクラスの効果を無効化 */
    .service-card.active {
        opacity: 1;
        transform: none;
    }

    /* 画像 -------- */
    .service-card__image {
        aspect-ratio: 640/390;
    }

    .service-card--consulting .service-card__title {
        font-size: var(--fontSize-2xl)
    }
}

/* ------------------------------------------------
solution - 解決 -
------------------------------------------------ */

.solution__title {
    flex-direction: row;
    gap: 0;
    width: fit-content;
    position: relative;
    margin-inline: auto;
    margin-bottom: var(--space-6xl);
    margin-top: var(--space-lg);
}

.solution__title span {
    color: var(--color-sky);
}

/* タイトル横のイラスト */
.solution__title::after {
    content: "";
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: url(../../img/page/service/illust_solution_title.png) no-repeat center center / contain;
    position: absolute;
    top: 50%;
    right: -7%;
    translate: 0% -50%;
    aspect-ratio: 51/90;
    width: 51px;
    height: auto;
}

/* case1,case2 */
.solution__wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
}

/* 矢印 */
.solution__box:first-of-type:before {
    content: "";
    display: block;
    background: url(../../img/page/service/icon_arrow_double.svg) no-repeat center / contain;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    right: 50%;
    bottom: -46px;
    translate: 13px 0;
    aspect-ratio: 38 / 26;
    width: 38px;
    height: auto;
    z-index: 1;
}

/* case1下の余白 */
.solution__wrap:first-of-type {
    --min-size: 100;
    --max-size: 135;
    margin-bottom: var(--clamp-size);
}

.solution__box {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.56vw, 35px);
    padding: 10px 30px;
    background-color: #fff;
    border: 18px solid #F7F7F7;
    position: relative;
}

/* 解決はborder色を変更 */
.solution__box:nth-of-type(2) {
    border: 18px solid #F0FAFA;
}

/* Case01,Case02のあしらい */
.solution__wrap::after {
    content: attr(data-case);
    display: block;
    background: var(--gradient-reverse);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--fontFamily-en);
    font-weight: var(--fontWeight-semi-bold);
    --min-size: 56;
    --max-size: 76;
    font-size: var(--clamp-size);
    letter-spacing: var(--leterSpacing-0);
    line-height: var(--lineHeight-1);
    position: absolute;
    top: 0;
    right: -1.5%;
    translate: 0% -62%;
}

.solution__img {
    width: min(217px, 100%);
    aspect-ratio: 217/199;
    position: relative;
}

.solution__img::after {
    content: "";
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    translate: -56% -42px;
    width: 74px;
    aspect-ratio: 1/1;
    background: url(../../img/page/service/illust_solution_worry.png) no-repeat center center / contain;
    z-index: 1;
}

.solution__box:nth-of-type(2) .solution__img::after {
    background: url(../../img/page/service/illust_solution_bulb.png) no-repeat center center / contain;
}

.solution__content {
    flex: 1;
    padding: 1em 0;
}

.solution__subtitle {
    --min-size: 18;
    --max-size: 24;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-bold);
    line-height: var(--lineHeight-150);
    margin-bottom: var(--space-md);
    width: fit-content;
}

.solution__box:nth-of-type(2) .solution__subtitle {
    background: var(--gradient-reverse);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.solution__list {
    line-height: var(--lineHeight-160);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .solution__title {
        flex-direction: column;
        align-items: center;
    }

    /* タイトル横のイラスト */
    .solution__title::after {
        width: 1.5em;
        height: 1.5em;
        top: 50%;
        right: 0%;
        translate: 85% -50%;
        aspect-ratio: 51/90;
        width: 51px;
        height: auto;
    }

    .solution__box {
        /* スマホでは少し細く */
        flex-direction: column;
        padding: 10px 20px 20px;
        width: 100%;
    }

    .solution__img::after {
        translate: -70% -42%;
    }
}


/* ------------------------------------------------
REASON - 選ばれる理由 -
------------------------------------------------ */

.reason__title {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    align-items: center;
    gap: 0.36em;
    margin-bottom: var(--space-3xl);
}

.reason__title span {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.reason__title strong {
    background: var(--gradient-reverse);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reason__title::before,
.reason__title::after {
    content: "";
    background: url(../../img/page/service/reason_title_left.svg) no-repeat center center / contain;
    aspect-ratio: 28/55;
    width: 1em;
    align-self: stretch;
    margin: 0;
}

.reason__title::after {
    background: url(../../img/page/service/reason_title_right.svg) no-repeat center center / contain;
}

@media (width < 480px) {
    .reason__title span {
        flex-direction: column;
    }

    .reason__title::before,
    .reason__title::after {
        width: 1.5em;
        aspect-ratio: 28/55;
    }
}

.reason__list {
    display: flex;
    --min-size: 8;
    --max-size: 36;
    gap: var(--clamp-size);
    margin-bottom: clamp(52px, 4.97vw, 68px);
}

.reason__list li {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2em;
    counter-increment: reason-counter;
    position: relative;
}

.reason__icon {
    width: min(164px, 100%);
    aspect-ratio: 1/1;
    height: auto;
    border-radius: 999px;
    background-color: #F6F9F9;
    position: relative;
}

.reason__icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    aspect-ratio: 82/93;
}

.reason__icon::before {
    content: "0" counter(reason-counter);
    display: block;
    font-size: 39px;
    font-weight: var(--fontWeight-bold);
    font-family: var(--fontFamily-en);
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    top: 0.1em;
    left: -0.2em;
    line-height: var(--lineHeight-1);
}

.reason__list li h3 {
    --min-size: 14;
    --max-size: 21;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-semi-bold);
    text-align: center;
}

.reason__list li:nth-of-type(3) h3 {
    --min-size: 12;
    --max-size: 20;
}

.reason__list li p {
    line-height: var(--lineHeight-150);
}

@media (width < 768px) {


    /* 左右あしらい共通設定 */
    .reason__title::before,
    .reason__title::after {
        margin-right: 0em;
    }

    /* 右側のあしらい */
    .reason__title::after {
        margin-left: 0em;
    }

    .reason__list {
        flex-direction: column;
        gap: clamp(20px, 3.6vw, 50px);
    }

    .reason__list li {
        align-items: center;
        width: min(410px, 100%);
        margin-inline: auto;
    }

    .reason__list li h3 {
        --min-size: 18 !important;
        --max-size: 24 !important;
        font-size: var(--clamp-size);
        font-weight: var(--fontWeight-semi-bold);
        text-align: center;
    }
}

/* CTA お問い合わせボタン
------------------------------------------------ */
.cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta__catch {
    font-size: var(--fontSize-md);
    font-weight: var(--fontWeight-medium);
    line-height: var(--lineHeight-150);
    text-align: center;
    margin-bottom: var(--space-md);
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-inline: auto;
}

/* 左側のスラッシュ */
.cta__catch::before,
.cta__catch::after {
    content: "\\";
    font-size: 1.2em;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: var(--fontWeight-thin);
}

/* 右側のスラッシュ */
.cta__catch::after {
    content: "/";
}

.btn__cta {
    width: clamp(280px, 100%, 365px);
    font-size: clamp(18px, 2.86vw, 22px);
    padding: 1em 1.5em;
    border-radius: 5px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    transform: translateY(0);
    transition: all 0.3s ease;
}

.btn__cta::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 24px;
    z-index: 1;
    background-color: #fff;
    border-radius: 999px;
    width: 36px;
    aspect-ratio: 1;
    height: auto;
    translate: 0% -50%;
}

.btn__cta::after {
    content: "";
    background: url(../../img/common/btn_arrow_gradient.svg) no-repeat center center / contain;
    width: 12px;
    height: 6px;
    position: absolute;
    top: 50%;
    right: calc(24px + 12px);
    transform: translate(0, -50%);
    z-index: 1;
}

/* hover時に浮き上がり効果 */
@media (hover:hover) and (pointer:fine) {
    .btn__cta:hover {
        transform: translateY(-8px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }
}

/* ------------------------------------------------
FLOW - 導入から運用までの流れ -
------------------------------------------------ */
.flow__title {
    margin-bottom: clamp(18px, 2.19vw, 30px);
}

.flow__text {
    --min-size: 30;
    --max-size: 50;
    margin-bottom: var(--clamp-size);
    line-height: var(--lineHeight-160);
    text-align: center;
    width: fit-content;
    margin-inline: auto;
}

.flow__wrap {
    background-color: #F4F4F4;
    padding: clamp(30px, 3.6vw, 50px) clamp(24px, 1.7vw, 70px);
    position: relative;
}

.flow__wrap::after {
    content: "";
    display: block;
    background: url(../../img/page/service/illust_flow_title.png) no-repeat center / contain;
    width: clamp(70px, 11.9vw, 92px);
    height: auto;
    aspect-ratio: 184 / 192;
    position: absolute;
    top: -34%;
    right: 15%;
    translate: 0 0;
}

.flow__wrap ul {
    display: flex;
    gap: clamp(20px, 3.3vw, 40px);
    max-width: 1025px;
    margin-inline: auto;
    line-height: var(--lineHeight-150);
    position: relative;
    z-index: 1;
}

/* .flow__wrap ul::before {
    content: "";
    position: absolute;
    top: 0.8em;
    left: 50%;
    translate: 0 -50%;
    width: 100%;
    height: 1px;
    background-color: #1289A5;
    transform: translateX(-50%);
    z-index: -1;
} */

.flow__wrap li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em 1em;
}

/* .flow__period {
    margin-bottom: 0.5em;
    font-weight: var(--fontWeight-medium);
    align-self: center;
}

.flow__period span {
    color: #004B79;
    display: inline-block;
    padding: 0 0.5em;
    background-color: #F4F4F4;
} */

.flow__icon {
    background-color: #fff;
    width: 100%;
    text-align: center;
    padding: 0px 2px 15px;
    position: relative;
}

.flow__icon figcaption {
    font-weight: var(--fontWeight-medium);
    font-size: var(--fontSize-sm);
}

.flow__icon--hearing figcaption {
    font-size: clamp(12px, 1vw, 14px);
}

/* 矢印 */
.flow__wrap li:not(:first-of-type) .flow__icon::after {
    content: "";
    display: inline-block;
    background: url(../../img/page/service/icon_arrow.svg) no-repeat center/contain;
    width: clamp(10px, 1.3vw, 16px);
    aspect-ratio: 19/38;
    position: absolute;
    top: 50%;
    left: calc(-1*clamp(20px, 3.6vw, 40px) / 2);
    translate: -50% -50%;
    z-index: 1;
}

.flow__desc {
    font-size: var(--fontSize-sm);
}


@media (width < 1024px) {

    .flow__wrap {
        max-width: 760px;
        margin-inline: auto;
        position: relative;
        padding: clamp(var(--padding-container), 5.12vw, 70px) clamp(var(--padding-container), 5.12vw, 70px);
    }

    figcaption {
        display: none;
    }

    .flow__text {
        margin-bottom: 70px;
    }

    /* イラスト */
    .flow__wrap::after {
        top: -10%;
        right: 6%;
        translate: -10% 0;
    }

    .flow__wrap ul {
        gap: clamp(64px, 7.6vw, 100px);
        display: flex;
        flex-direction: column;
        line-height: var(--lineHeight-150);
        position: relative;
        z-index: 1;
    }

    .flow__wrap ul::before {
        width: 0;
        height: 0;
    }

    .flow__wrap li {
        display: grid;
        grid-template-columns: 132px 1fr;
        position: relative;
        grid-template-rows: auto 1fr;
    }

    .flow__wrap li:not(:first-of-type) .flow__icon::after {
        content: "";
        display: inline-block;
        background: url(../../img/page/service/icon_arrow.svg) no-repeat center / contain;
        width: clamp(16px, 1.5vw, 20px);
        aspect-ratio: 19 / 38;
        position: absolute;
        top: calc(-1 * clamp(64px, 7.3vw, 100px) / 2);
        translate: -50% -50%;
        rotate: 90deg;
        z-index: 1;
        left: 50%;
    }

    /* 矢印 */
    .flow__wrap li:not(:first-of-type)::after {}

    .flow__period {
        position: absolute;
        left: calc(132px / 2 + 24px);
        top: calc(-1 * clamp(64px, 7.3vw, 100px) + 21px);
        z-index: 1;
    }

    .flow__wrap ul li:first-of-type .flow__period {
        display: none;
    }

    .flow__icon {
        grid-row: 1/3;
        grid-column: 1/2;
    }

    .flow__label {
        display: block !important;
        grid-row: 1 / 2;
        grid-column: 2 / 2;
    }

    .flow__desc {
        grid-row: 2/3;
        grid-column: 2/2;
    }
}

@media (width < 768px) {

    /* イラスト */
    .flow__wrap::after {
        top: -4.5%;
        right: 6%;
        translate: -10% 0;
    }

    .flow__label {
        font-size: 16px;
        font-weight: var(--fontWeight-medium);
    }
}

/* ------------------------------------------------
FAQ - よくある質問 -
------------------------------------------------ */
.faq {
    padding-bottom: var(--space-6xl);
}

.faq__wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.faq__item {
    background-color: #F3F7F9;
    padding: clamp(32px, 2.9vw, 40px) clamp(var(--padding-container), 3.8vw, 52px);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.faq__question,
.faq__answer {
    line-height: var(--lineHeight-160);
    display: flex;
    gap: var(--space-lg);
}

.faq__question {
    --min-size: 18;
    --max-size: 24;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-semi-bold);
}

.faq__question::before,
.faq__answer::before {
    content: "Q";
    display: inline-grid;
    place-items: center;
    width: 1.9em;
    height: 1.9em;
    background-color: var(--color-sky);
    font-weight: var(--fontWeight-bold);
    font-family: "Roboto", sans-serif;
    color: var(--color-white);
    border-radius: 5px;
    text-align: center;
    font-size: var(--fontSize-lg);
}

.faq__question span,
.faq__answer p {
    flex: 1;

}

.faq__answer::before {
    content: "A";
    background-color: #fff;
    color: var(--color-sky);
}