@charset "utf-8";

/* CSS Document */
/* ==========================================
   Common styles
   ========================================== */
/*共通*/
/* バナー下のマージン削除 */
#top .hero {
    margin-bottom: 0 !important;
}

#top .pc--none {
    display: none;
}

@media screen and (max-width: 895px) {
    #top .pc--none {
        display: block;
    }
}

#top hgroup .heading01 {
    font-family: 'Poppins', sans-serif;
    font-size: 8.6rem;
    font-weight: 500;
    color: #1db68a;
    line-height: 1;
    margin-bottom: 0;
    text-align: center;

}

#top hgroup .heading01_jpn {
    font-size: 2.4rem;
    font-weight: bold;
    color: #000;
    text-align: center;
}

/*各パーツ*/
#top .cta_wrap {
    box-sizing: border-box;
    padding: 8rem 0 5rem 0;
    background: #f5f5f5;
}

#top .cta_wrap .cta_basic {
    box-sizing: border-box;
    margin-bottom: 0;
}

/* ==========================================
   em styles
   ========================================== */
#top .fv_wrap,
#top .solution_wrap {
    /* 1920pxの時に「10px」になる設計 */
    --fv-base-size: 10px;
    font-size: var(--fv-base-size);
}

/* 【PC〜タブレット】上限なし～896pxの間：1920px比率で等倍伸縮 */
@media screen and (min-width: 895px) {

    #top .fv_wrap,
    #top .solution_wrap {
        /* 10px ÷ 1920px × 100 = 0.5208333333vw */
        --fv-base-size: 0.5208333333vw;
    }
}

/* 【スマホ】895px以下：スマホ画面に合わせて自動縮小 */
@media screen and (max-width: 895px) {

    #top .fv_wrap,
    #top .solution_wrap {
        /* スマホカンプの基準に合わせて調整（現在は768pxで16pxになる設定） */
        --fv-base-size: 2.0833333333svw;
        max-width: none;
        height: auto;
    }
}

/* 文字潰れ防止 */
@media screen and (max-width: 414px) {

    #top .fv_wrap {
        --fv-base-size: 10px;
    }
}

/* ==========================================
   FV styles
   ========================================== */

#top .fv_wrap .fv_inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    height: 79em;
}

/* 回転する緑の円 */
#top .fv_wrap .fv_bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#top .fv_wrap .fv_green_circle {
    width: 131.5em;
    height: auto;
    transform-origin: 50% 50%;
    animation: fv-rotate 120s linear infinite;
    z-index: 1;
}

@keyframes fv-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ぼけている左右の円 */
#top .fv_wrap .fv_bg_blur {
    position: absolute;
    z-index: 0;
    filter: blur(8px);
}

#top .fv_wrap .fv_bg_blur--left {
    width: 31.3em;
    height: 14.6em;
    left: 10.9em;
    bottom: 0;
}

#top .fv_wrap .fv_bg_blur--right {
    width: 84.5em;
    height: 58.2em;
    right: -32em;
    bottom: 0;
}

/* メディア（左右の丸画像） */
#top .fv_wrap .fv_media__left,
#top .fv_wrap .fv_media__right,
#top .fv_wrap .fv_media__topright {
    position: absolute;
}

#top .fv_wrap .fv_media__left {
    width: 77.7em;
    height: 72.6em;
    left: -19.4em;
    top: -8.5em;
}

#top .fv_wrap .fv_media__right {
    width: 46.6em;
    height: 40.5em;
    right: 15.9em;
    bottom: -6em;
}

#top .fv_wrap .fv_media__topright {
    width: 19.9em;
    height: 19.9em;
    top: 3em;
    right: 3em;
    z-index: -1;
}

#top .fv_wrap .fv_media__img--staff-top {
    filter: blur(4px);
    opacity: 0.78;
}

/* 中央のテキストエリア */
#top .fv_wrap .fv_center {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#top .fv_wrap .fv_text_circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3.6em;
}

#top .fv_wrap .fv_title {
    line-height: 1.5;
    font-family: 'FP-こぶりなゴシック StdN W9', sans-serif;
    /* 累積計算防止：親要素の文字サイズは基準の1em（10px相当）にする */
    font-size: 1em;
    /* 完全な中央でないためずらす */
    margin-top: 10em;
}

/* 文字サイズ（font-size）だけは、入れ子エラーを防ぐためにcalcで指定 */
#top .fv_wrap .fv_title_line--a {
    display: block;
    /* 64px */
    font-size: calc(var(--fv-base-size) * 6.4);
    font-weight: 900;

    /* グラデーション */
    .grad--green {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        background-image: linear-gradient(90deg, rgba(24, 146, 111, 1) 25%, rgb(104, 207, 178) 50%, rgba(24, 146, 111, 1) 75%);
        background-size: 300%;
        animation: gradation 5s infinite linear;
    }
}

/* グラデーションアニメーション */
@keyframes gradation {
    0% {
        background-position: 0% 0%;
    }

    20% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 0%;
    }

    70% {
        background-position: 100% 0%;
    }

    100% {
        background-position: 0% 0%;
    }
}

#top .fv_wrap .fv_title_line--b {
    display: block;
    /* 68px */
    font-size: calc(var(--fv-base-size) * 6.8);
    font-weight: 900;
}

#top .fv_wrap .fv_lead {
    /* 20px */
    font-size: calc(var(--fv-base-size) * 2.0);
    font-weight: bold;
    line-height: 1.7;
    margin-top: calc(var(--fv-base-size) * 3.2);
}

/* 実績バッジ */
#top .fv_wrap .fv_badges {
    display: flex;
    gap: 1.4em;
    margin-top: 5.4em;
}

#top .fv_wrap .fv_stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8em;
}

/* 丸のラベル */
#top .fv_wrap .stat_circle {
    border-radius: 9999px;
    background: linear-gradient(180deg, #FF7900 0%, #E10C1B 100%);
    color: #fff;
    display: flex;
    width: 6.5em;
    height: 6.5em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#top .fv_wrap .stat_label {
    font-size: calc(var(--fv-base-size) * 1.4);
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
}

/* 数字部分（丸の右側） */
#top .fv_wrap .stat_value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#top .fv_wrap .stat_number {
    display: inline-flex;
    align-items: flex-end;
    gap: calc(var(--fv-base-size) * 0.2);
    font-size: calc(var(--fv-base-size) * 2.0);
    font-weight: 700;
    line-height: 1.6;
}

#top .fv_wrap .stat_number .grad--orange {
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: calc(var(--fv-base-size) * 4.8);
    line-height: 1;
    background: var(--grad, linear-gradient(180deg, #FF7900 0%, #E10C1B 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 葉っぱの装飾画像 */
#top .fv_wrap .fv_leaf {
    position: absolute;
    width: 4.6em;
    height: auto;
    top: 0.8em;
    z-index: 2;
}

#top .fv_wrap .fv_leaf--left {
    top: 50%;
    transform: translateY(-50%);
    left: -4.8em;
}

#top .fv_wrap .fv_leaf--right {
    top: 50%;
    transform: translateY(-50%);
    right: -4.8em;
}

/* レスポンシブ */
/* 896pxより小さい場合 */
@media (width <=895px) {
    #top .fv_wrap .fv_inner {
        height: 53.5em;
    }

    #top .fv_wrap .fv_bg_blur {
        filter: blur(4px);
    }

    #top .fv_wrap .fv_bg_blur--left {
        left: -16em;
    }

    #top .fv_wrap .fv_bg_blur--right {
        display: none;
    }

    #top .fv_wrap .fv_green_circle {
        width: 59.9em;
    }

    #top .fv_wrap .fv_media__left {
        width: 22.2em;
        height: 20.8em;
        left: -6.4em;
        top: -4.5em;
    }

    #top .fv_wrap .fv_media__right {
        width: 18.2em;
        height: 15.8em;
        right: -2em;
        bottom: -5em;
    }

    #top .fv_wrap .fv_media__topright {
        width: 11.3em;
        height: 11.3em;
        top: 0;
        right: -2em;
    }

    #top .fv_wrap .fv_title {
        margin-top: 5em;
    }

    #top .fv_wrap .fv_title_line--a {
        font-size: calc(var(--fv-base-size) * 3.5);
    }

    #top .fv_wrap .fv_title_line--b {
        font-size: calc(var(--fv-base-size) * 4.0);
    }

    #top .fv_wrap .fv_lead {
        font-size: calc(var(--fv-base-size) * 1.6);
        margin-top: calc(var(--fv-base-size) * 1.6);
    }

    #top .fv_wrap .fv_badges {
        margin-top: 2.5em;
    }

    #top .fv_wrap .fv_stat {
        gap: 0.2em;
    }

    #top .fv_wrap .fv_leaf {
        width: 2.3em;
    }

    #top .fv_wrap .fv_leaf--left {
        left: -2.4em;
    }

    #top .fv_wrap .fv_leaf--right {
        right: -2.4em;
    }

    #top .fv_wrap .stat_circle {
        width: 4em;
        height: 4em;
    }

    #top .fv_wrap .stat_label {
        font-size: calc(var(--fv-base-size) * 1.0);
    }

    #top .fv_wrap .stat_number {
        gap: 0;
        font-size: calc(var(--fv-base-size) * 1.2);
    }

    #top .fv_wrap .stat_number .grad--orange {
        font-size: calc(var(--fv-base-size) * 2.0);
    }
}


/* ==========================================
   Solution styles
   ========================================== */

#top .solution_wrap {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: auto;
    background-color: #fff;
    padding-top: 8em;
    /* 80px相当 */
    font-size: var(--fv-base-size);
}

/* GSAP Pin留め専用ラッパー */
#top .solution_wrap .solution__pin-inner {
    position: relative;
    width: 100%;
}

/* 画面高からヘッダー高を引いた有効領域 */
#top .solution_wrap .solution__content-sticky {
    position: relative;
    width: 100%;
    height: calc(100lvh - 8em);
    padding: 0 16.4em;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

#top .solution_wrap .solution_head {
    position: absolute;
    right: 0;
    top: 0;
    width: 42%;
    margin-bottom: 0;
    z-index: 10;
}

#top .solution_wrap hgroup .heading01,
#top .solution_wrap hgroup .heading01_jpn {
    text-align: left;
}

#top .solution_wrap .solution__list {
    position: relative;
    height: 63.3em;
    width: 100%;
    margin-bottom: 1em;
}

/* 各ブロックの絶対配置およびフェード重なり制御 */
#top .solution_wrap .solution__block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
}

#top .solution_wrap .solution__block.current {
    opacity: 1;
    visibility: visible;
}

/* 左側：画像エリア */
#top .solution_wrap .solution__fig-wrap {
    width: 53%;
}

#top .solution_wrap .solution__figarea {
    overflow: hidden;
}

#top .solution_wrap .solution__figarea img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 右側：テキスト・コンテンツエリア */
#top .solution_wrap .solution__textarea {
    width: 42%;
    margin-top: 24em;
}

/* ページネーション */
#top .solution_wrap .solution__page-num {
    display: flex;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
}

#top .solution_wrap .solution__page-num .current-num {
    font-size: 2em;
    font-weight: 400;
    color: #1DB68A;
    width: 2em;
}

#top .solution_wrap .solution__page-num .bar {
    width: 8.4em;
    height: 0.1em;
    background-color: #D9D9D9;
}

#top .solution_wrap .solution__page-num .total-num {
    font-size: 2em;
    font-weight: 400;
    color: #D9D9D9;
    margin-left: 1em;
}

/* ラベルグループ */
#top .solution_wrap .solution__label-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2em;
    margin-top: 2.4em;
}

#top .solution_wrap .solution__label-tag {
    display: inline-block;
    background-color: #1DB68A;
    color: #fff;
    font-size: 4.2em;
    font-weight: bold;
    white-space: nowrap;
    padding: 0 calc(var(--fv-base-size) * 1.8);
}

#top .solution_wrap .solution__textarea p {
    font-size: 1.8em;
    margin-top: calc(var(--fv-base-size) * 4.8);
    line-height: 1.75;
}

/* レスポンシブ：--fv-base-sizeのvw値を調整するだけで全て追従 */
@media screen and (max-width: 895px) {
    #top .solution_wrap {
        /* スマホ向けのvw基準へ切り替え */
        --fv-base-size: clamp(8px, 2.0833vw, 10px);
        padding-top: 5em;
    }

    #top .solution_wrap .solution__content-sticky {
        padding: 5em 1.5em;
        height: auto;
        display: block;
        min-height: calc(100lvh - 5em);
    }

    #top .solution_wrap .solution_head {
        position: static;
        width: 100%;
        margin-bottom: 2em;
    }

    #top .solution_wrap hgroup .heading01 {
        font-size: 5.6em;
    }

    #top .solution_wrap hgroup .heading01_jpn {
        font-size: 1.6em;
    }

    #top .solution_wrap .solution__list {
        height: 48em;
    }

    #top .solution_wrap .solution__block {
        position: relative;
        flex-direction: column;
        gap: 2.5em;
        opacity: 1;
        visibility: visible;
        display: none;
    }

    #top .solution_wrap .solution__block.current {
        display: flex;
    }

    #top .solution_wrap .solution__fig-wrap,
    #top .solution_wrap .solution__textarea {
        width: 100%;
    }

    #top .solution_wrap .solution__figarea img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        max-height: 30vh;
    }

    #top .solution_wrap .solution__textarea {
        margin-top: 0;
    }

    #top .solution_wrap .solution__page-num {
        gap: 1.4em;
    }

    #top .solution_wrap .solution__page-num .current-num {
        font-size: 1.6em;
    }

    #top .solution_wrap .solution__page-num .bar {
        width: 6em;
    }

    #top .solution_wrap .solution__page-num .total-num {
        font-size: 1.6em;
    }

    #top .solution_wrap .solution__label-group {
        gap: 1em;
        margin-top: calc(var(--fv-base-size) * 1.8);
    }

    #top .solution_wrap .solution__label-tag {
        font-size: 2.4em;
        padding: calc(var(--fv-base-size) * 0.4) calc(var(--fv-base-size) * 1.2);
    }

    #top .solution_wrap .solution__textarea p {
        font-size: 1.5em;
        margin-top: calc(var(--fv-base-size) * 2.0);
    }
}

/* ==========================================
   Service styles
   ========================================== */
#top .service_wrap hgroup .summary {
    font-size: 1.8rem;
    text-align: center;
    margin-top: 3.6rem;
}

#top .service_wrap {
    position: relative;
    padding: 10rem 0;
    /* margin: 18rem 0; */
    z-index: 1;
}

/* オーバーレイ */
#top .service_wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(249, 249, 249, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
    pointer-events: none;
}

/* 背景サークル */
/* 共通 */
#top .service_wrap .service_bg_circle {
    position: absolute;
    z-index: 1;
}

#top .service_wrap .service_bg_circle img {
    max-width: 100%;
    height: auto;
    display: block;
    transform-origin: 50% 50%;
    animation: fv-rotate 100s linear infinite;
}

/* 右上 */
/* 横スクロールが発生しないように */
#top .service_wrap .service_circle_right_clip {
    position: absolute;
    /* 上部に余白 */
    top: -100rem;
    left: 0;
    width: 100%;
    height: calc(100% + 100rem);
    /* 右側を隠す */
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

#top .service_wrap .service_bg_circle.circle--right {
    position: absolute;
    z-index: 1;
    /* 箱が上に100rem広がった分、元の「-32rem」と同じ位置に固定する計算（100 - 32 = 68rem） */
    top: 68rem;
    left: 50%;
    transform: translateX(-10rem);
    width: 350rem;
}

/* 左下 */
/* 下のセクションにはみ出ないように */
#top .service_wrap .service_circle_left_clip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

#top .service_wrap .service_bg_circle.circle--left {
    bottom: -50rem;
    left: 0;
    transform: translateX(-15rem);
    width: 106rem;
}


@keyframes service-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#top .service_wrap .service_head,
#top .service_wrap .service_item_list,
#top .service_wrap .service_btn {
    position: relative;
    z-index: 3;
    transform: translateZ(0);
    will-change: transform;
}

#top .service_wrap .service_item_list {
    margin-top: 7rem;
}

/* ボタン */
#top .service_wrap .service_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 36rem;
    height: 6.4rem;
    margin: 8rem auto 0 auto;
    background-color: #fff;
    border: 2px solid #1DB68A;
    border-radius: 100vh;
    color: #1DB68A;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#top .service_wrap .service_btn svg {
    position: absolute;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.9rem;
    height: 3.9rem;
}

#top .service_wrap .service_btn svg circle {
    fill: #1DB68A;
    transition: fill 0.3s ease;
}

#top .service_wrap .service_btn svg path {
    stroke: #fff;
    transition: stroke 0.3s ease;
}

#top .service_wrap .service_btn:hover {
    background-color: #1DB68A;
    color: #fff;
}

#top .service_wrap .service_btn:hover svg circle {
    fill: #fff;
}

#top .service_wrap .service_btn:hover svg path {
    stroke: #1DB68A;
}

/* カラムアイテム */
#top .service_wrap .service_item {
    display: flex;
    align-items: top;
    width: 100%;
    margin: 0 auto 10rem auto;
    box-sizing: border-box;
}

#top .service_wrap .service_item:last-of-type {
    margin-bottom: 0;
}

/* 画像エリア */
#top .service_wrap .service_item_image {
    position: relative;
    width: 44vw;
    max-width: 84rem;
    height: 64rem;
    max-height: 64rem;
    overflow: hidden;
    z-index: 2;
    flex-shrink: 0;
}

#top .service_wrap .service_item_image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#top .service_wrap .carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
}

#top .service_wrap .carousel_slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
    z-index: 1;
}

#top .service_wrap .carousel_slide--active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

#top .service_wrap .carousel_dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 10;
}

#top .service_wrap .carousel_dot {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

#top .service_wrap .carousel_dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

#top .service_wrap .carousel_dot--active {
    background: white;
}

/* テキスト */
#top .service_wrap .service_inner {
    flex: 1;
    background: #ffffff;
    margin-top: 7.2rem;
}

#top .service_wrap .service_content {
    width: 100%;
}

#top .service_wrap .service_item:not(.service_item--reverse) .service_item_image {
    border-radius: 0 1rem 1rem 0;
}

#top .service_wrap .service_item:not(.service_item--reverse) .service_inner {
    /* 画像の下480px分潜り込ませる */
    margin-left: -48rem;
    /* 48rem + 4rem(gap)=53rem */
    padding: 7rem 0 7rem 52rem;
}

/* カラム落ちまで画面端まで伸長 */
@media (min-width: 1200px) {
    #top .service_wrap .service_item:not(.service_item--reverse) .service_inner {
        padding-right: calc(((100vw - 120rem) / 2) + 5rem);
    }
}

/* カラムの並びを反転 */
#top .service_wrap .service_item--reverse {
    flex-direction: row-reverse;
}

#top .service_wrap .service_item--reverse .service_item_image {
    border-radius: 1rem 0 0 1rem;
}

#top .service_wrap .service_item--reverse .service_inner {
    margin-right: -48rem;
    padding: 7rem 52rem 7rem 0rem;
}

@media (min-width: 1200px) {
    #top .service_wrap .service_item--reverse .service_inner {
        padding-left: calc(((100vw - 120rem) / 2) + 5rem);
    }
}

/* 共通タイトル */
#top .service_wrap .service_title {
    font-size: 4.2rem;
    font-weight: bold;
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
}

#top .service_wrap .service_description {
    font-size: 1.6rem;
}


/* カラム1 */
/* カードリンク */
#top .service_wrap .service_cards {
    display: flex;
    gap: 2.5rem;
    margin: 4rem 0;
}

#top .service_wrap .service_card {
    flex: 1;
    position: relative;
    padding: 2.8rem 2rem 1.8rem 2rem;
    border-radius: 1rem;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#top .service_wrap .service_card--green {
    background-color: #F7FBEA;
}

#top .service_wrap .service_card--pink {
    background-color: #FFF5F5;
}

/* 吹き出し */
#top .service_wrap .service_card_tag {
    position: absolute;
    top: -1.3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 19.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 2.4rem;
    border-radius: 2rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

#top .service_wrap .service_card--green .service_card_tag {
    background: #99C435;
}

#top .service_wrap .service_card--pink .service_card_tag {
    background: #EF7979;
}

/* 吹き出し三角（▼） */
#top .service_wrap .service_card_tag::after {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 2.5rem 1.4rem 0 1.4rem;
    z-index: -1;
}

#top .service_wrap .service_card--green .service_card_tag::after {
    border-color: #99C435 transparent transparent transparent;
}

#top .service_wrap .service_card--pink .service_card_tag::after {
    border-color: #EF7979 transparent transparent transparent;
}

/* カード内タイトル */
#top .service_wrap .service_card_title {
    grid-column: 1 / -1;
    font-size: 1.6rem;
    font-weight: bold;
    margin: 1.3rem 0 0.8rem 0;
}

#top .service_wrap .service_card--green .service_card_title {
    color: #9ece3f;
}

#top .service_wrap .service_card--pink .service_card_title {
    color: #EF7979;
}

/* カード内説明文 */
#top .service_wrap .service_card_text {
    grid-column: 1;
    font-size: 1.4rem;
    padding-right: 1.5rem;
}

#top .service_wrap .service_card_arrow {
    grid-column: 2;
    /* 右側に配置 */
    grid-row: 2;
    /* テキストと同じ行に並べる */
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    display: block;
    /* 隙間バグ防止 */
    align-self: center;
}

/* ホバー時 */
#top .service_wrap .service_card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.04);
}

/* シーンに合わせて選べるオプション */
#top .service_wrap .service_options_box {
    border-radius: 1rem;
    overflow: hidden;
    margin-top: 3rem;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #eee;
}

#top .service_wrap .service_more_text {
    font-size: 1.6rem;
    font-weight: 700;
    background: #eee;
    padding: 1rem 2rem;
}

#top .service_wrap .service_option_body {
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}


#top .service_wrap .service_option_list li {
    padding-left: 2rem;
    position: relative;

    span {
        font-weight: 600;
    }
}

/* 丸ポチ */
#top .service_wrap .service_option_list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-color: #D9D9D9;
    border-radius: 50%;
}

/* 「など」テキスト */
#top .service_wrap .service_option_note {
    margin-left: 2rem;
    white-space: nowrap;
}

@media (max-width: 600px) {
    #top .service_wrap .service_option_body {
        flex-direction: column;
        align-items: flex-end;
        gap: 1.5rem;
    }
}


/* カラム2 */
/* タイムライン */
#top .service_wrap .service_support_list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 3rem;
    position: relative;
}

#top .service_wrap .support_item {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    position: relative;
}

#top .service_wrap .support_circle {
    width: 3rem;
    height: 3rem;
    background-color: #1DB68A;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    text-indent: -9999px;
    z-index: 1;
}

#top .service_wrap .support_item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: -3.5rem;
    width: 0.8rem;
    background-image: radial-gradient(circle 0.4rem at 50% 0.4rem, #e5e5e5 99%, transparent 100%);
    background-size: 0.8rem 2.1rem;
    background-repeat: repeat-y;
    background-position: center top;
    z-index: 0;
}

#top .service_wrap .support_item_content {
    flex: 1;
}

#top .service_wrap .support_item_title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1DB68A;
    margin: 0 0 0.8rem 0;
}

#top .service_wrap .support_item_text {
    font-size: 1.5rem;
}


/* カラム3 */
#top .service_wrap .service_digital_list {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin: 4rem 0;
}

#top .service_wrap .service_digital_card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F5F5F5;
    border-radius: 1rem;
    padding: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバー時 */
#top .service_wrap .service_digital_card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.04);
}

#top .service_wrap .digital_card_content {
    flex: 1;
    padding-right: 1rem;
}

#top .service_wrap .digital_card_title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1DB68A;
    margin-bottom: 1.4rem;
}

#top .service_wrap .digital_card_text {
    font-size: 1.5rem;
}

/* arrow */
#top .service_wrap .digital_card_arrow {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    display: block;
    /* 隙間バグ防止 */
}

#top .service_wrap .digital_card_arrow circle {
    fill: #1DB68A;
}

#top .service_wrap .service_digital_note em {
    font-weight: bold;
}

#top .service_wrap .service_digital_note a {
    color: #1DB68A;
    text-decoration: underline;
    font-weight: 700;
}


/* レスポンシブ */
/* 1920pxyより大きい場合 */
@media (width > 1920px) {

    /* カラム全体の伸縮制御 */
    #top .service_wrap .service_item:not(.service_item--reverse) .service_item_image {
        width: calc(50vw - 12rem);
        max-width: none;
    }

    #top .service_wrap .service_item:not(.service_item--reverse) .service_inner {
        padding-right: 21.35vw;
    }

    #top .service_wrap .service_item--reverse .service_item_image {
        width: calc(50vw - 12rem);
        max-width: none;
    }

    #top .service_wrap .service_item--reverse .service_inner {
        padding-left: 21.35vw;
    }

    /* フォントサイズアップ */
    #top .service_wrap hgroup .summary {
        font-size: 2.2rem;
        margin-top: 4.2rem;
    }

    #top .service_wrap .service_title {
        font-size: 4.8rem;
        /* 42px → 48px */
        margin-bottom: 2.5rem;
    }

    /* リード文 */
    #top .service_wrap .service_description {
        font-size: 1.8rem;
        /* 16px → 18px */
        line-height: 1.8;
    }

    /* 2連カード内 */
    #top .service_wrap .service_card_title {
        font-size: 1.8rem;
        /* 16px → 18px */
    }

    #top .service_wrap .service_card_text {
        font-size: 1.6rem;
        /* 14px → 16x */
        line-height: 1.6;
    }

    /* オプションボックス */
    #top .service_wrap .service_more_text {
        font-size: 1.8rem;
        /* 16px → 18px */
    }

    #top .service_wrap .service_option_list li,
    #top .service_wrap .service_option_note {
        font-size: 1.6rem;
        /* 15px相当 → 16px */
    }

    /* 伴走サポート・デジタルセクション */
    #top .service_wrap .support_item_title,
    #top .service_wrap .digital_card_title {
        font-size: 2.0rem;
        /* 18px → 20px */
    }

    #top .service_wrap .support_item_text,
    #top .service_wrap .digital_card_text {
        font-size: 1.6rem;
        /* 15px → 16px */
        line-height: 1.7;
    }
}

/* 1200pxより小さい場合 */
@media (width <=1199px) {

    /* リスト全体の外周マージン（中画面用：左右40px） */
    #top .service_wrap .service_item_list {
        margin: 5rem 4rem;
    }

    /* 各ブロックの共通設定（横に広がりすぎないよう最大幅を制限し中央寄せ） */
    #top .service_wrap .service_item {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 84rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5rem;
        min-height: auto;
        box-sizing: border-box;
    }

    #top .service_wrap .service_item:last-child {
        margin-bottom: 0;
    }

    /* 画像エリアの設定 */
    #top .service_wrap .service_item_image {
        width: 100%;
        max-width: none !important;
        height: auto;
        max-height: none;
        aspect-ratio: 840 / 640;
        border-radius: 1rem 1rem 0 0 !important;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
    }

    /* コンテンツエリアの設定（中画面用：左右パディング40px） */
    #top .service_wrap .service_item:not(.service_item--reverse) .service_inner,
    #top .service_wrap .service_item--reverse .service_inner {
        width: 100%;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 4.5rem 4rem 5rem 4rem;
        border-radius: 0 0 1rem 1rem;
        box-sizing: border-box;
    }

    #top .service_wrap .service_digital_card {
        flex: 1;
        padding: 2rem;
    }
}

/* 896pxより小さい場合 */
@media (width <=895px) {

    #top .service_wrap {
        padding: 5rem 0;
    }

    #top .service_wrap hgroup .heading01 {
        font-size: 5.6rem;
    }

    #top .service_wrap hgroup .heading01_jpn {
        font-size: 1.6rem;
    }


    /* 背景サークル非表示 */
    #top .service_wrap .service_circle_right_clip,
    #top .service_wrap .service_circle_left_clip {
        display: none;
    }

    /* 外周マージンを15px（1.5rem）に縮小 */
    #top .service_wrap .service_item_list {
        margin: 3.5rem 1.5rem;
    }

    /* 最大幅制限を解除して画面幅に追従、ブロック間を35px（3.5rem）に調整 */
    #top .service_wrap .service_item {
        max-width: 100%;
        margin-bottom: 3.5rem;
    }

    #top .service_wrap .service_title {
        font-size: 2.8rem;
        margin-bottom: 1rem;
    }

    /* コンテンツエリアの左右パディングを15px（1.5rem）に縮小 */
    #top .service_wrap .service_item:not(.service_item--reverse) .service_inner,
    #top .service_wrap .service_item--reverse .service_inner {
        padding: 3.5rem 1.5rem 4rem 1.5rem;
    }

    #top .service_wrap .support_circle {
        width: 2.5rem;
        height: 2.5rem;
    }

    #top .service_wrap .support_item:not(:last-child)::after {
        left: 0.8rem;
        bottom: -3.4rem;
    }

    #top .service_wrap .service_options_header {
        flex-direction: column;
        gap: 0.8rem;
    }

    #top .service_wrap .service_option_list li::before {
        top: 1rem;
    }

    /* 2連カードおよびデジタルリストの縦並び化 */
    #top .service_wrap .service_cards {
        flex-direction: column;
        gap: 3.5rem;
    }

    #top .service_wrap .service_digital_list {
        flex-direction: column;
    }

    #top .service_wrap .service_btn {
        margin: 4rem auto 0 auto;
    }
}

/* ==========================================
   Our Office styles
   ========================================== */
/*営業拠点*/
.shuffle {
    visibility: hidden;
    min-height: 1.5em;
}

#top .offices_wrap {
    box-sizing: border-box;
    padding: 100px 0;
}

#top .offices_wrap .offices_description {
    font-size: 1.6rem;
    margin-top: 3rem;
}

#top .offices_wrap .offices_contents_box {
    box-sizing: border-box;
    width: min(100%, 1200px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

}

#top .offices_wrap .offices_contents_box .offices_contents_left_box {
    box-sizing: border-box;
    width: 50%;

}

#top .offices_wrap .offices_contents_left_box_data {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    gap: 3%;
    margin: 4rem 0;
}

#top .offices_wrap .offices_contents_left_box_data dl {
    box-sizing: border-box;
    width: 48.5%;
    margin-bottom: 3%;
    background: #f5f5f5;
    padding: 15px;
}

#top .offices_wrap .offices_contents_left_box_data dl dt {
    box-sizing: border-box;
    width: 100%;
    font-size: 2.0rem;
}

#top .offices_wrap .offices_contents_left_box_data dl dd {
    box-sizing: border-box;
    width: 100%;
    padding-right: 0.25em;
    line-height: 1.25;
}

#top .offices_wrap .numbers {
    font-family: 'Poppins', sans-serif;
    font-size: 6.4rem;
    font-weight: bold;
    color: #1db68a;
}

#top .offices_wrap .unit {
    font-size: 2.0rem;
    font-weight: bold;
}

#top .offices_wrap .reference {
    font-size: 1.2rem;
}

#top .offices_wrap .offices_contents_box .offices_contents_right_box {
    width: calc(50% - 50px);
}

#top .offices_wrap hgroup .heading01 {
    text-align: left;
}

#top .offices_wrap hgroup .heading01_jpn {
    text-align: left;
}

/* ==========================================
   Case styles
   ========================================== */
/*導入事例*/
#top .case_wrap {
    box-sizing: border-box;
    background: #1db68a;
    padding: 100px 0;
}

#top .case_wrap_heading {
    box-sizing: border-box;
    width: min(100%, 1200px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1.5rem;
}

#top .case_wrap .case_wrap_heading_inner {
    display: flex;
    align-items: center;
    gap: 3rem;
}

#top .case_wrap_heading .contracts_box {
    color: #fff;
}

#top .case_wrap hgroup .heading01 {
    color: #fff;
    text-align: left;
}

#top .case_wrap hgroup .heading01_jpn {
    color: #fff;
    text-align: left;
}

#top .case_wrap .slick-track {
    display: flex;
}

#top .case_wrap .swiper_box {
    position: relative;
    margin-top: 7rem;
}

#top .case_wrap .swiper_box .slick-slide {
    box-sizing: border-box;
    width: min(100%, 350px) !important;
    height: auto !important;
    border-radius: 10px;
    margin: 0 30px;
}

/*#top .case_wrap .swiper_box .slick-slide:hover  {
    transform:  scale(0.9);
}*/
#top .case_wrap .slider-controls {
    display: flex;
    gap: 15px;
    /* ボタンとボタンの間の隙間 */
    margin-left: auto;
}

/* ボタン本体（丸い背景）のスタイル */
#top .case_wrap .slider-controls .slick-prev,
#top .case_wrap .slider-controls .slick-next {
    display: block !important;
    position: relative !important;
    /* absoluteからrelativeに変更 */
    width: 75px !important;
    height: 75px !important;
    background: #fff !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

#top .case_wrap .slider-controls .slick-prev {
    left: 0;
}

#top .case_wrap .slider-controls .slick-next {
    right: 0;
}

/* 中の矢印（::after）をど真ん中に配置 */
#top .case_wrap .slider-controls .slick-prev::before,
#top .case_wrap .slider-controls .slick-next::before {
    content: '' !important;
    display: none !important;
}

#top .case_wrap .slider-controls .slick-prev::after,
#top .case_wrap .slider-controls .slick-next::after {
    position: absolute !important;
    top: 20% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    /* 矢印のサイズ */
    height: 10px !important;
    /* 矢印のサイズ */
    border-top: 2px solid #1db68a !important;
    /* 上の線（緑色） */
    border-left: 2px solid #1db68a !important;
    /* 左の線（緑色） */
}

/* 「前へ」ボタンの矢印（L字のまま45度左に回転させて「＜」にする） */
#top .case_wrap .slider-controls .slick-prev::after {
    /* 縦横中央補正（-50%）を維持したまま回転させます */
    transform: translate(-50%, -50%) rotate(-45deg) !important;
    /* 視覚的な中心を合わせるための微調整 */
    left: 50% !important;
}

/* 「次へ」ボタンの矢印（135度右に回転させて「＞」にする） */
#top .case_wrap .slider-controls .slick-next::after {
    /* 縦横中央補正（-50%）を維持したまま回転させます */
    transform: translate(-50%, -50%) rotate(135deg) !important;
    /* 視覚的な中心を合わせるための微調整 */
    left: 30% !important;
}

#top .case_wrap .swiper_card_box {
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* #top .case_wrap .swiper_card_box:hover {transform:  scale(0.9);} */

#top .case_wrap .swiper_card_txt {
    box-sizing: border-box;
    padding: 2.4rem;
    position: relative;
    padding-bottom: 55px;
    flex-grow: 1;
}

#top .case_wrap .swiper_card_txt svg {
    position: absolute;
    right: 2.4rem;
    bottom: 2.4rem;
    overflow: visible;
}

#top .case_wrap .swiper_card_tag {
    display: flex;
    gap: 1.4rem;
}

#top .case_wrap .swiper_card_tag li {
    font-size: 1.4rem;
    color: #1db68a;
}

#top .case_wrap .swiper_card_name {
    font-size: 2.4rem;
    font-weight: bold;
}

#top .case_wrap .swiper_card_title {
    font-size: 1.6rem;
    margin-top: 2rem;
}

#top .case_wrap .service_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 36rem;
    height: 6.4rem;
    margin: 8rem auto 0 auto;
    background-color: #fff;
    border: 2px solid #1DB68A;
    border-radius: 100vh;
    color: #1DB68A;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#top .case_wrap .service_btn svg {
    position: absolute;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.9rem;
    height: 3.9rem;
}

#top .case_wrap .service_btn svg circle {
    fill: #1DB68A;
    transition: fill 0.3s ease;
}

#top .case_wrap .service_btn svg path {
    stroke: #fff;
    transition: stroke 0.3s ease;
}

#top .case_wrap .service_btn:hover {
    background-color: #1DB68A;
    color: #fff;
    border-color: #fff;
}

#top .case_wrap .service_btn:hover svg circle {
    fill: #fff;
}

#top .case_wrap .service_btn:hover svg path {
    stroke: #1DB68A;
}

/* ホバーアクション */
#top .case_wrap .swiper_card_box img {
    transition: transform 0.3s ease;
}

#top .case_wrap .swiper_card_link a:hover .swiper_card_box img {
    transform: scale(1.05);
}

#top .case_wrap .swiper_card_txt svg circle {
    transition: transform 0.3s ease;
    transform-origin: center;
}

#top .case_wrap .swiper_card_link a:hover .swiper_card_txt svg circle {
    transform: scale(1.15);
}

/* ==========================================
   Download styles
   ========================================== */
/* お役立ち資料 */
#top .download_wrap {
    box-sizing: border-box;
    padding: 100px 0;
    background: url("/img/top-v2/download_bg.webp") no-repeat;
    background-size: contain;
    background-position: bottom center;
}

#top .download_wrap .download_wrap_inner {
    box-sizing: border-box;
    width: min(100%, 1200px);
    margin: 0 auto;
}

#top .download_wrap .download_useful_box {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6.6rem 3.3rem;
    margin-top: 7rem;
}

/* --- カード本体（aタグ）の共通スタイル --- */
#top .download_wrap .download_useful_box_container {
    display: flex;
    flex-direction: column;
    /* ★修正：画面幅が変わっても絶対に綺麗に3等分されるように計算式に変更 */
    width: calc((100% - 3.3rem * 2) / 3);
    background: #fff;
    box-shadow: 4px 8px 20px 0 rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

/* 1番目のカード（横長）の個別スタイル */
#top .download_wrap .download_useful_box_container:first-of-type {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: stretch;
}

/* --- 画像エリアの設定 --- */
#top .download_wrap .download_useful_box_container_img {
    box-sizing: border-box;
    overflow: hidden;
}

/* 2〜4番目のカードの画像アスペクト比 */
#top .download_wrap .download_useful_box_container .download_useful_box_container_img {
    width: 100%;
    aspect-ratio: 126/85;
}

/* 1番目のカードの画像サイズ */
#top .download_wrap .download_useful_box_container:first-of-type .download_useful_box_container_img {
    /* ★修正：固定値（61.6rem）を廃止し、全体の「52%」の幅に可変するよう変更 */
    width: 52%;
    aspect-ratio: 308/173;
}

/* すべてのカード内画像にアニメーションを設定 */
#top .download_wrap .download_useful_box_container_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* --- テキストエリアの設定 --- */
#top .download_wrap .download_useful_box_container .download_useful_box_container_txt {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 3.6rem 2.4rem;
}

/* 1番目のカード（横長）のテキストエリア */
#top .download_wrap .download_useful_box_container:first-of-type .download_useful_box_container_txt {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    /* ★修正：残り幅（48%）にして画像と連動して縮むように変更 */
    width: 48%;
    /* ★修正：左右の余白（6rem）が狭い画面だと文字を潰してしまうため、％（5%）にして可変に */
    padding: 4rem 5%;
}

/* テキストエリア内の一番最後の子要素（ボタン）を最下部に押し出す */
#top .download_wrap .download_useful_box_container .download_useful_box_container_txt> :last-child {
    margin-top: auto;
}

/* 1番目のカードのみ、最下部への押し出しを解除する */
#top .download_wrap .download_useful_box_container:first-of-type .download_useful_box_container_txt> :last-child {
    margin-top: 0;
}

#top .download_wrap .download_useful_box_container .download_useful_box_container_heading {
    font-size: 2.0rem;
    font-weight: bold;
}

#top .download_wrap .download_useful_box_container:first-of-type .download_useful_box_container_heading {
    font-size: 2.4rem;
}

#top .download_wrap .download_useful_box_container_heading {
    margin-bottom: 2.0rem;
}

#top .download_wrap .download_description {
    font-size: 1.6rem;
    margin-bottom: 3.6rem;
}

/* --- ダウンロードボタンの設定 --- */
#top .download_wrap .download_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 36rem;
    height: 6.4rem;
    margin: 2rem auto 0;
    background-color: #e10c1b;
    border: 2px solid #e10c1b;
    border-radius: 100vh;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#top .download_wrap .download_btn svg {
    position: absolute;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.9rem;
    height: 3.9rem;
}

#top .download_wrap .download_btn svg path {
    stroke: #fff;
    transition: stroke 0.3s ease;
}


/* ホバーアクション */
#top .download_wrap .download_useful_box_container:hover .download_useful_box_container_img img {
    transform: scale(1.05);
}

#top .download_wrap .download_useful_box_container:hover .download_btn {
    background-color: #fff;
    color: #e10c1b;
}

#top .download_wrap .download_useful_box_container:hover .download_btn svg path {
    stroke: #e10c1b;
}

/* 下部一覧ボタン */
#top .download_wrap .service_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 36rem;
    height: 6.4rem;
    margin: 8rem auto 0 auto;
    background-color: #fff;
    border: 2px solid #1DB68A;
    border-radius: 100vh;
    color: #1DB68A;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#top .download_wrap .service_btn svg {
    position: absolute;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.9rem;
    height: 3.9rem;
}

#top .download_wrap .service_btn svg circle {
    fill: #1DB68A;
    transition: fill 0.3s ease;
}

#top .download_wrap .service_btn svg path {
    stroke: #fff;
    transition: stroke 0.3s ease;
}

#top .download_wrap .service_btn:hover {
    background-color: #1DB68A;
    color: #fff;
}

#top .download_wrap .service_btn:hover svg circle {
    fill: #fff;
}

#top .download_wrap .service_btn:hover svg path {
    stroke: #1DB68A;
}

/* ==========================================
   Provide styles
   ========================================== */
/*しくみ*/
#top .provide_wrap {
    box-sizing: border-box;
    padding: 100px 0;
    overflow: hidden;
}

#top .provide_wrap .provide_wrap_innner {
    box-sizing: border-box;
    width: min(100%, 1500px);
    margin: 0 auto;
    position: relative;
    height: 46vw;
}

#top .provide_wrap_animation {
    position: relative;
    width: 100%;
    height: auto;
}

#top .provide_wrap_animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 250%;
    height: 250%;
    background-image: url('/img/top-v2/an_slogan.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: 80s 0s an_slogan linear infinite;
    z-index: -1;
}

@keyframes an_slogan {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


#top .provide_wrap .provide_wrap_innner .slogan_box {
    box-sizing: border-box;
    content: '';
    position: absolute;
    width: 70%;
    height: 100%;
    top: 0;
    right: 0;
}

#top .provide_wrap hgroup {
    content: '';
    position: absolute;
    top: 0;
    right: 10%;
    writing-mode: vertical-rl;
    width: 20%;
}

#top .provide_wrap hgroup .heading_support {
    font-size: 4.8rem;
    font-weight: bold;
    color: #E10C1B;
}

#top .provide_wrap hgroup .heading_support span {
    background: #fff;
}

#top .provide_wrap hgroup .heading_support_sub {
    font-size: 2.0rem;
    font-weight: bold;
}

#top .provide_wrap .provide_wrap_innner .message_box {
    position: absolute;
    content: '';
    left: 10%;
    bottom: 15%;
    width: 40%;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 200%;
}

@media screen and (max-width: 1200px) {
    #top .cta_wrap .cta_basic {
        padding: 0 1.5rem;
    }

    #top .offices_wrap .offices_contents_box {
        display: block;
        padding: 0 1.5rem;
    }

    #top .offices_wrap .offices_description {
        text-align: center;
        font-size: 1.8rem;
    }

    #top .offices_wrap .offices_contents_box .offices_contents_left_box {
        width: 100%;
    }

    #top .offices_wrap .offices_contents_box .offices_contents_right_box {
        width: 100%;
    }

    #top .offices_wrap hgroup .heading01 {
        text-align: center;
    }

    #top .offices_wrap hgroup .heading01_jpn {
        text-align: center;
    }


    #top .case_wrap_heading .heading_box {
        margin-right: 0;
    }

    #top .case_wrap hgroup .heading01 {
        text-align: center;
    }

    #top .case_wrap .case_description {
        text-align: center;
        font-size: 1.8rem;
        margin-top: 3.6rem;
    }

    #top .download_wrap .download_wrap_inner {
        padding: 0 1.5rem;
    }

    #top .download_wrap .download_useful_box_container .download_useful_box_container_heading {
        font-size: 1.8rem;
    }

    #top .download_wrap .download_btn {
        font-size: 1.4rem;
    }

    #top .download_wrap .download_btn svg {
        width: 2.9rem;
        height: 2.9rem;
    }

    #top .provide_wrap .provide_wrap_innner {
        width: min(100%, 1200px);
        padding: 0 1.5rem;
    }

    #top .provide_wrap .provide_wrap_innner .slogan_box {}

    #top .provide_wrap .provide_wrap_innner .message_box {
        left: 30px;
        width: 40%;
    }
}

/*タブレットサイズ以下*/
@media screen and (max-width: 895px) {

    /*共通*/
    #top hgroup .heading01 {
        font-size: 5.6rem;
    }

    #top hgroup .heading01_jpn {
        font-size: 1.6rem;
    }

    /*各パーツ*/
    #top .cta_wrap {
        padding: 5rem 0 2rem 0;
    }

    #top .offices_wrap {
        padding: 5rem 0;
    }


    #top .offices_wrap .offices_contents_left_box_data dl dd .numbers {
        font-size: 3.8rem;
    }

    #top .offices_wrap .unit {
        font-size: 1.6rem;
    }

    #top .offices_wrap .offices_contents_left_box_data dl dt {
        font-size: 1.5rem;
    }

    #top .offices_wrap .offices_contents_left_box_data dl dd {
        font-size: 1.3rem;
    }

    #top .offices_wrap .reference {
        font-size: 1rem;
    }

    #top .case_wrap {
        padding: 5rem 0;
    }

    #top .case_wrap hgroup .heading01_jpn {
        text-align: center;
    }

    #top .case_wrap_heading {
        display: block;
    }

    #top .case_wrap .case_wrap_heading_inner {
        display: block;
        align-items: center;
        gap: 1rem;
    }

    #top .case_wrap .case_description {}


    #top .case_wrap .swiper_box .slick-slide {
        width: min(100%, 300px) !important;
        margin: 0 20px;
    }


    #top .case_wrap .slider-controls {
        margin-top: 3.6rem;
        justify-content: center;
    }

    #top .case_wrap .slider-controls .slick-prev,
    #top .case_wrap .slider-controls .slick-next {
        width: 45px !important;
        height: 45px !important;
    }

    #top .case_wrap .slider-controls .slick-prev::after,
    #top .case_wrap .slider-controls .slick-next::after {
        width: 7px !important;
        height: 7px !important;
    }

    #top .case_wrap .swiper_box {
        margin-top: 3.6rem;
    }

    #top .case_wrap .swiper_card_name {
        font-size: 1.8rem;
    }

    #top .case_wrap .service_btn {
        margin: 4rem auto 0 auto;
        width: calc(100% - 3rem)
    }

    #top .download_wrap {
        padding: 5rem 0;
    }

    #top .download_wrap .download_useful_box_container {
        width: 100%;
    }

    #top .download_wrap .download_useful_box {
        gap: 2rem;
    }

    #top .download_wrap .download_useful_box_container:first-of-type {
        display: block;
    }

    #top .download_wrap .download_useful_box_container:first-of-type .download_useful_box_container_img {
        width: 100%;
    }

    #top .download_wrap .download_useful_box_container:first-of-type .download_useful_box_container_txt {
        width: 100%;
        padding: 1.5rem;
    }

    #top .download_wrap .download_useful_box_container .download_useful_box_container_txt {
        padding: 1.5rem;
    }

    #top .download_wrap .download_useful_box_container .download_useful_box_container_heading {
        font-size: 1.8rem;
    }

    #top .download_wrap .download_useful_box_container:first-of-type .download_useful_box_container_heading {
        font-size: 1.8rem;
    }

    #top .download_wrap .service_btn {
        margin: 4rem auto 0 auto;
    }

    #top .provide_wrap {
        padding: 5rem 0;
    }

    #top .provide_wrap .provide_wrap_innner {
        height: 100%;
        margin-top: 30px;
    }

    #top .provide_wrap_animation::before {
        top: -150px;
        left: -50%;
        width: 200%;
        height: 200%;

    }

    #top .provide_wrap .provide_wrap_innner .slogan_box {
        position: relative;
        width: 100%;
    }

    #top .provide_wrap .provide_wrap_innner .message_box {
        position: relative;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 1.6rem;
    }
}

/*スマホサイズ*/
@media screen and (max-width: 414px) {
    #top .provide_wrap_animation::before {
        top: -220px;
    }
}