/* ==================== SECTIONMAP: [ページ] client — page-client.php（FV/points/about_service/service_item/usecase/voices/insight） ==================== */
.client_fv {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* ノイズの mix-blend-mode を FV 内に閉じ込める */
    height: 100vh;
    background-color: #bc421c; /* 暗い部分（ベース色） */
}
/* ▼ FV背景：動画（client_fv_bg.mov）。JS で 2倍速ループ再生（.client_fv_bg_video）。 */
.client_fv_bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.client_fv_bg_video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.client_fv_inner {
    position: relative;
    z-index: 1; /* 背景グラデーション・ノイズより前面 */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    height: 100%;
}
.client_fv_headline {
    font-size: 2.4rem;
    color: #fff;
    text-align: center;
    font-weight: 700;
    margin-bottom: 20px;
}
.client_fv_title {
    font-size: 4.8rem;
    font-weight: 900;
    color: var(--color-orange);
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.7;
}
.client_fv_title .wbg {
    background-color: #fff;
    padding: 0 10px;
}
.client_fv_merits {
    text-align: center;
}
.client_fv_available_domain_list {
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
    line-height: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px auto;
    width: 650px;
}
.client_fv_available_domain_list .domain {
    border: solid 1px #fff;
    border-radius: 20px;
    padding: 5px 20px;
}
.client_fv_available_domain_list_text {
    font-size: 1.8rem;
    color: #fff;
    font-weight: 700;
    text-align: center;
}
.client_fv_available_domain_list_text .bigger {
    font-size: 2.4rem;
}
.client_fv_btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
}
.client_fv_btn {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-orange);
    border-radius: 50px;
    background-color: #fff;
    padding: 12px;
    padding-left: 24px;
    width: 300px;
    position: relative;
}
.client_fv_btn span.icon {
    width: 30px;
    height: 30px;
    background-color: var(--color-orange);
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
.client_fv_btn span.icon span {
    font-size: .8em;
}
.client_fv_btn_bottom {
    font-size: 1.6rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}
.client_fv_btn_bottom span.icon {
    width: 30px;
    height: 30px;
    background-color: #fff;
}
.client_fv_btn_bottom span.icon span {
    color: var(--color-orange);
    font-size: .8em;
}
.client_fv_form {
    width: 500px;
    padding: 30px;
    background-color: #f4f4f4;
    border-radius: 10px;
    max-height: 80vh;
    overflow-y: auto;
}
.client_fv_form_text {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 15px;
}
.client_fv_form_text .orange {
    color: var(--color-orange);
}
.client_fv_form.contact_form .row {
    margin-bottom: 10px;
}
.client_fv_form.contact_form .row .th {
    font-size: 1.3rem;
    margin-bottom: 8px;
}
.client_fv_form.contact_form .row .th .required {
    font-size: 1.1rem;
    padding: 1px 10px;
}
.client_fv_form.contact_form .row .td input[type="text"],
.client_fv_form.contact_form .row .td input[type="tel"],
.client_fv_form.contact_form .row .td input[type="email"],
.client_fv_form.contact_form .row .td select {
    background-color: #fff;
    padding: 10px;
    font-size: 1.4rem;
}
.client_fv_form.contact_form .row .td textarea {
    font-size: 1.4rem;
    height: 8em;
    padding: 10px;
    font-family: YakuHanJP, "Noto Sans JP", sans-serif;
}
.client_fv_form.contact_form .row .td .wpcf7-list-item {
    font-size: 1.4rem;
}
.client_fv_form.contact_form .row .td .client_fv_form_acceptance_text {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-orange);
    text-decoration: underline;
}
.client_fv_form.contact_form .row .td .client_fv_form_acceptance_desc {
    font-size: 1.4rem;
    font-weight: 400;
}
.wpcf7-not-valid-tip {
    font-size: 1.2rem;
}
.clients_loop_block {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
    background: #fff;
}
.clients_loop_track {
    display: flex;
    align-items: center;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    will-change: transform;
}
.clients_loop_track--top {
    animation: clientsLoopLeft 60s linear infinite;
}
.clients_loop_track--bottom {
    animation: clientsLoopRight 60s linear infinite;
}
.clients_loop_item {
    flex-shrink: 0;
    padding: 0 18px;
}
.clients_loop_track img {
    display: block;
    width: 150px;
    height: auto;
    max-width: none;
}
.client_fv_form.contact_form .submit_wrap {
    margin-top: 20px;
}
.client_fv_form.contact_form .wpcf7-spinner {
    display: none;
}
/* ==================== SECTIONMAP: [ページ] client — keyframes / レスポンシブ ==================== */
@keyframes clientsLoopLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes clientsLoopRight {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .clients_loop_track {
        animation: none;
    }
}

@media screen and (max-width:1399px) and (min-width:1100px) {
    .client_fv_inner {
        gap: 30px;
    }
    .client_fv_content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .client_fv_headline {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    .client_fv_title {
        font-size: 2.8rem;
        margin-bottom: 20px;
    }
    .client_fv_merits {
        width: 400px;
    }
    .client_fv_available_domain_list {
        font-size: 1rem;
        width: 500px;
    }
    .client_fv_available_domain_list .domain {
        padding: 2px 10px;
    }
    .client_fv_available_domain_list_text {
        font-size: 1.5rem;
    }
    .client_fv_available_domain_list_text .bigger {
        font-size: 2rem ;
    }
    .client_fv_form {
        width: 380px;
    }
    .client_fv_form_text {
        font-size: 1.5rem;
    }
    .client_fv_form.contact_form .row .th {
        font-size: 1.1rem;
        line-height: 1;
    }
    .client_fv_form.contact_form .row .th .required {
        font-size: 1rem;
    }
    .client_fv_form.contact_form .row .td input[type="text"], .client_fv_form.contact_form .row .td input[type="tel"], .client_fv_form.contact_form .row .td input[type="email"], .client_fv_form.contact_form .row .td select {
        font-size: 1.2rem;
    }
    .client_fv_form.contact_form .row .td .wpcf7-list-item {
        font-size: 1rem;
    }
    .client_fv_form.contact_form .row .td input[type="checkbox" i] {
        margin: 0;
        transform: translateY(3px);
    }
    .client_fv_form.contact_form .row .td .client_fv_form_acceptance_text {
        font-size: 1.1rem;
    }
    .client_fv_form.contact_form .row .td .client_fv_form_acceptance_desc {
        font-size: 1.1rem;
    }
    .contact_form .submit_wrap input[type="submit"] {
        width: 280px;
        font-size: 1.2rem;
    }
}

@media screen and (max-width:640px) {
    .client_fv {
        padding: 40px 0;
        height: auto;
    }
    .client_fv_inner {
        flex-direction: column;
        align-items: center;
        padding: 0 5%;
        gap: 20px;
    }
    .client_fv_headline {
        font-size: 1.6rem;
        margin-bottom: 10px;
    }
    .client_fv_title {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }
    .client_fv_available_domain_list {
        width: 100%;
        font-size: 1.2rem;
        margin-top: 20px;
    }
    .client_fv_available_domain_list_text {
        font-size: 1.6rem;
    }
    .client_fv_available_domain_list_text .bigger {
        font-size: 2rem;
    }
    .client_fv_form {
        width: 100%;
        margin-top: 0;
        padding: 20px;
        max-height: unset;
    }
    .client_fv_form_text {
        font-size: 1.6rem;
    }
}

.clients_loop_block {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}

.client_section_title {
    text-align: center;
    margin-bottom: 40px;
}
.client_section_title.white {
    color: #fff;
}
.client_section_title_en {
    font-size: 1.4rem;
    color: var(--color-orange);
}
.client_section_title.white .client_section_title_en {
    color: #fff;
}
.client_section_title_jp {
    font-size: 3.4rem;
    font-weight: 900;
}

.client_points {
    padding: 60px 0 100px;
}
.client_points_title {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 40px;
}
.client_points_title .orange {
    color: var(--color-orange);
}
.client_points_text {
    text-align: center;
    margin-bottom: 50px;
    line-height: 2;
}
.client_points_wrap {
    display: flex;
    justify-content: center;
    gap: 40px;
    align-items: flex-start;
    margin-top: 40px;
}
.client_points_wrap + .client_points_wrap {
    margin-top: 80px;
}
.client_points_wrap.reverse {
    flex-direction: row-reverse;
}
.client_points_text_content {
    max-width: 40%;
}
.client_points_text_title_en {
    font-size: 1.4rem;
    color: var(--color-orange);
}
.client_points_text_title_jp {
    font-size: 2.4rem;
    font-weight: 700;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.client_points_text_title_jp::after {
    content: "";
    width: 60px;
    height: 4px;
    background-color: var(--color-orange);
    position: absolute;
    bottom: 0;
    left: 0;
    transform: skewX(-35deg);
}
.client_points_text_description {
    line-height: 2;
}

.client_about_service {
    background: linear-gradient(135deg,rgba(238, 53, 2, 1) 0%, rgba(169, 37, 0, 1) 100%);
    padding: 100px 0;
}
.client_about_service_text {
    text-align: center;
    font-size: 1.6rem;
    color: #fff;
    margin-top: 20px;
    line-height: 2;
}
.service_item_list {
    display: flex;
}
.service_item_link {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}
.service_item_link .thumbnail {
    width: 100%;
}
.service_item_link .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service_item_title {
    padding: 15px;
    font-weight: 700;
}
.service_item_vm {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--color-orange);
    font-size: 1.4rem;
    font-weight: 700;
    padding-right: 20px;
    padding-bottom: 20px;
    margin-top: auto;
}
.service_item_vm span.icon {
    width: 30px;
    height: 30px;
}
.service_item_vm span.icon span {
    font-size: .8em;
}
.service_item_slider {
    position: relative;
    margin-top: 60px;
    padding: 0 64px;
}
.service_item_slider .swiper-slide {
    height: auto;
}
.usecase_slider {
    position: relative;
    margin-top: 50px;
    padding: 0 64px;
}
.usecase_slider .swiper-slide {
    height: auto;
}
.service_item_slider_arrow,
.usecase_slider_arrow,
.service_research_slider_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    transition: opacity .2s;
}
.service_item_slider_arrow::before,
.usecase_slider_arrow::before,
.service_research_slider_arrow::before {
    content: "";
    width: 11px;
    height: 11px;
    border-top: 2px solid var(--color-orange);
    border-right: 2px solid var(--color-orange);
}
.service_item_slider_prev,
.usecase_slider_prev,
.service_research_slider_prev {
    left: 10px;
}
.service_item_slider_prev::before,
.usecase_slider_prev::before,
.service_research_slider_prev::before {
    transform: rotate(-135deg);
    margin-left: 4px;
}
.service_item_slider_next,
.usecase_slider_next,
.service_research_slider_next {
    right: 10px;
}
.service_item_slider_next::before,
.usecase_slider_next::before,
.service_research_slider_next::before {
    transform: rotate(45deg);
    margin-right: 4px;
}
.service_item_slider_arrow.swiper-button-disabled,
.usecase_slider_arrow.swiper-button-disabled,
.service_research_slider_arrow.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}
/* PC はカード約1枚分内側に寄せて、カードとカードの間に矢印を置く。
   （service=5.4枚表示→カード幅≒18%、usecase=4.4枚→≒22%。44pxボタンの半分22pxを引いて境界の真上に中央を合わせる） */
@media screen and (min-width:1025px) {
    .service_item_slider_prev {
        left: calc(22% - 22px);
    }
    .service_item_slider_next {
        right: calc(22% - 22px);
    }
    .usecase_slider_prev,
    .service_research_slider_prev {
        left: calc(15% - 22px);
    }
    .usecase_slider_next,
    .service_research_slider_next {
        right: calc(15% - 22px);
    }
}

.about_service_tab_area {
    width: 900px;
    margin: 70px auto 0;
}
.about_service_tabs {
    display: flex;
    align-items: flex-end;
}
.about_service_tabs .about_service_tab {
    width: 20%;
    text-align: center;
    padding: 14px 6px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
    color: #7a7a7a;
    background-color: #eff2f3;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.about_service_tabs .about_service_tab.active {
    color: #fff;
    background-color: var(--color-orange);
    border: solid 2px #fff;
}
#about_service_content {
    border: solid 2px var(--color-orange);
    border-radius: 0 0 10px 10px;
    padding: 40px;
    background-color: #f2f2f2;
    border: solid 2px #ffffff;
}
.about_service_content_item {
    display: none;
}
.about_service_content_item.active {
    display: block;
}
.about_service_content_item_ttl {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--color-orange);
    margin: 20px 0 10px;
}
.about_service_content_item_description {
    font-size: 1.5rem;
    line-height: 2;
}
.about_service_content_item_table .row {
    display: flex;
    padding-bottom: 20px;
}
.about_service_content_item_table .row .th {
    width: 30%;
    font-weight: 700;
    color: var(--color-orange);
}
.about_service_content_item_table .row .td {
    width: 70%;
}

.about_service_lower_content {
    margin: 50px auto 0;
    text-align: center;
}
.about_service_lower_content .about_service_lower_content_headline {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
}
.about_service_lower_content_description {
    font-size: 1.6rem;
    color:#fff;
    margin: 25px 0;
}
.about_service_lower_more_btn {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    margin-top: 40px;
}
.about_service_lower_more_btn span.icon {
    background-color: #fff;
}
.about_service_lower_more_btn span.icon span {
    color: var(--color-orange);
}
/* ホバー：TOP の arrow__btn と同じ演出（矢印を横スワップ／黒丸フィル／下線伸長）。下線は白文字に合わせて白 */
.about_service_lower_more_btn span.text:after {
    background-color: #fff;
}
@media only screen and (min-width: 1025px) {
    .about_service_lower_more_btn:hover span.icon:before {
        transform: translate(-50%, -50%) scale(1);
        transition-delay: 0.2s;
    }
    .about_service_lower_more_btn:hover span.icon span:after {
        transform: translate(300%, -50%);
    }
    .about_service_lower_more_btn:hover span.icon span:before {
        transform: translate(-50%, -50%);
        transition-delay: 0.3s;
    }
    .about_service_lower_more_btn:hover span.text:after {
        width: 100%;
    }
}
.about_service_lower_more_btn:focus-visible span.icon:before {
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.2s;
}
.about_service_lower_more_btn:focus-visible span.icon span:after {
    transform: translate(300%, -50%);
}
.about_service_lower_more_btn:focus-visible span.icon span:before {
    transform: translate(-50%, -50%);
    transition-delay: 0.3s;
}
.about_service_lower_more_btn:focus-visible span.text:after {
    width: 100%;
}

/* client_points 下部の CTA ボタン（中央揃え） */
.client_points_cta {
    margin-top: 60px;
    text-align: center;
}
.client_points_cta_btn {
    display: inline-block;
    min-width: 320px;
    padding: 20px 48px;
    background-color: var(--color-orange);
    color: #fff;
    font-size: 1.9rem;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(230, 50, 0, 0.25);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.client_points_cta_btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(230, 50, 0, 0.35);
    background-color: #cf2c00;
}
/* client_about_service はセクション背景がオレンジで同色ボタンが埋もれるため、白地×オレンジ文字に反転（このセクション限定） */
.client_about_service .client_points_cta_btn {
    background-color: #fff;
    color: var(--color-orange);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.client_about_service .client_points_cta_btn:hover {
    background-color: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

/* Q&A 下部：資料ダウンロードボタン（arrow__btn を中央配置） */
.qa_download_cta {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
@media screen and (max-width:640px) {
    .client_points_cta { margin-top: 40px; }
    .client_points_cta_btn {
        min-width: 0;
        width: 100%;
        padding: 16px 24px;
        font-size: 1.6rem;
    }
}

.client_service_voices {
    padding: 100px 0;
    background-color: #f9f9f9;
}
.client_service_voices .client_section_title {
    color: #000;
}
.client_service_voices .client_section_title .client_section_title_en {
    color: var(--color-orange);
}
.client_service_voices_list {
    display: flex;
    gap: 35px;
    margin-top: 60px;
}
.client_service_voices_list .client_service_voices_item {
    background-color: #fff;
    border-radius: 10px;
    width: calc( (100% - 70px) / 3);
    padding: 30px;
}
.client_service_voices_item_head {
    display: flex;
    align-items: center;
    gap: 25px;
    padding-bottom: 20px;
    border-bottom: solid 1px #cacaca;
    margin-bottom: 20px;
}
.client_service_voices_item_head .client_service_voice_img {
    flex-shrink: 0;
}
.client_service_voices_item_head_text .position {
    color: #505050;
    font-size: 1.4rem;
}
.client_service_voices_item_head_text .name {
    color: #000;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 6px;
}
.client_service_voices_item_description {
    font-size: 1.5rem;
    line-height: 2;
}
/* .other_cases_title / .ease_cases 系は client・single-tech 共通のため page-web.css へ移設 */

.service_insight {
    padding: 100px 0;
}
.service_insight_title {
    text-align: center;
}

.service_insight_title .service_insight_title_en {
    font-size: 1.4rem;
    color: var(--color-orange);
}
.service_insight_title .service_insight_title_jp {
    font-size: 3.4rem;
    font-weight: 700;
}
.service_insight_description {
    text-align: center;
    margin: 40px auto 0;
}
.service_research_content {
    margin-top: 60px;
}
.service_research_title {
    color: var(--color-orange);
    font-weight: 700;
    margin-bottom: 20px;
}
.service_research_slider {
    position: relative;
}
/* 全スライドを最も高いカードに合わせて高さ統一。
   ※ Swiper11 既定の .swiper-slide{height:100%} に詳細度で確実に勝つため .service_research_slider を前置。 */
.service_research_slider .swiper-wrapper {
    align-items: stretch;
}
.service_research_item {
    background-color: #f6f6f6;
    border-radius: 10px;
    overflow: hidden;
}
.service_research_slider .swiper-slide {
    height: auto;   /* Swiper既定 height:100% を上書きし、stretch を効かせる */
    display: flex;  /* 中のリンクをスライド全高に伸ばす */
}
.service_research_link {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: inherit;
}
.service_research_img img {
    display: block;
    width: 100%;
    height: auto;
}
.service_research_item_title {
    padding: 10px 20px 20px;
    font-weight: 700;
}
.service_research_item_description {
    font-size: 1.4rem;
    padding: 0 20px 20px;
}
.service_research_tags {
    padding: 10px 20px 0;
    display: flex;
    gap: 5px;
}
.service_research_tag {
    font-size: 1.1rem;
    color: #000;
    background-color: #fff;
    border-radius: 50px;
    padding: 2px 12px;
}
.service_research_tag.primary {
    color: #fff;
    background-color: #000;
}
.lookout_block {
    width: calc(100% - 40px);
    padding: 20px;
    border-top: solid 1px #cacaca;
    margin: 0 auto;
}
.lo_ttl {
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
}
.lolist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lolist li {
    font-size: 1.3rem;
    position: relative;
    padding-left: 18px;
}
.lolist li::before {
    content: "";
    width: 12px;
    height: 12px;
    background: url(../images/up/check-mark.svg) no-repeat;
    background-size: contain;
    position: absolute;
    top: .4em;
    left: 0;
}

@media screen and (max-width:640px) {
    .clients_loop_track img {
        width: 130px;
    }
    .clients_loop_item {
        padding: 0 12px;
    }
    .clients_loop_block {
        gap: 16px;
        padding: 24px 0;
    }

    .client_points {
        padding: 50px 0;
    }
    .client_points_title {
        font-size: 2rem;
    }
    .client_points_text {
        font-size: 1.5rem;
    }
    .client_points_wrap {
        flex-direction: column;
        gap: 20px;
    }
    .client_points_text_content {
        max-width: 100%;
    }
    .client_points_text_title_jp {
        font-size: 2rem;
    }
    .client_points_text_description {
        font-size: 1.5rem;
    }
    .client_points_wrap.reverse {
        flex-direction: column;
    }
    .client_about_service {
        padding: 60px 0;
    }
    .client_section_title_en {
        font-size: 1.2rem;
    }
    .client_section_title_jp {
        font-size: 2.2rem;
    }
    .service_item_slider {
        margin-top: 40px;
        padding: 0 40px;
    }
    .usecase_slider {
        margin-top: 30px;
        padding: 0 40px;
    }
    .service_item_link {
        width: 100%;
    }
    .service_item_slider_arrow,
    .usecase_slider_arrow,
    .service_research_slider_arrow {
        width: 36px;
        height: 36px;
    }
    .service_item_slider_prev,
    .usecase_slider_prev,
    .service_research_slider_prev {
        left: 6%;
    }
    .service_item_slider_next,
    .usecase_slider_next,
    .service_research_slider_next {
        right: 6%;
    }
    .about_service_tabs {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 10px;
    }
    .about_service_tabs .about_service_tab {
        width: 100%;
        border-radius: 4px;
    }
    #about_service_content {
        padding: 20px;
    }
    .about_service_lower_content .about_service_lower_content_headline {
        font-size: 2.4rem;
    }
    .about_service_lower_content_description {
        font-size: 1.5rem;
    }
    .client_service_voices {
        padding: 60px 0;
    }
    .about_service_tab_area {
        width: 100%;
    }
    .client_service_voices_list {
        flex-direction: column;
        margin-top: 30px;
    }
    .client_service_voices_list .client_service_voices_item {
        width: 100%;
    }
    .service_insight_title .service_insight_title_jp {
        font-size: 2rem;
    }
    .service_insight {
        padding: 50px 0;
    }
    .service_insight_description {
        margin-top: 25px;
    }
    .service_research_content {
        margin-top: 30px;
    }
}



.available_info_img {
    text-align: center;
    margin: 40px auto 0;
}

/* ==================== 円グラフ（client_points_img01 をコード化）＋スクロール描画アニメ ==================== */
.client_points_chart {
    width: 460px;
    max-width: 100%;
    flex-shrink: 0;
    margin: 0;
}
.cpc_graph {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cpc_donut {
    width: 60%;                        /* ドーナツ本体。周囲にラベルの余白を残す */
    height: auto;
    overflow: visible;
}
/* ドーナツの各セグメント（描画アニメ） */
.cpc_seg {
    fill: none;
    stroke-width: 54;
    stroke-linecap: butt;
    stroke-dasharray: var(--len) 100;  /* pathLength=100 なので % がそのまま長さ */
    stroke-dashoffset: 0;              /* 既定は表示（JS無効時のフォールバック） */
}
.js .client_points_chart .cpc_seg {
    stroke-dashoffset: var(--len);     /* JS有効時は初期は隠す */
}
.js .client_points_chart.is-inview .cpc_seg {
    animation: cpc_draw .9s ease forwards;
    animation-delay: var(--delay, 0s);
}
@keyframes cpc_draw {
    from { stroke-dashoffset: var(--len); }
    to   { stroke-dashoffset: 0; }
}
/* セグメント上の％（セグメント描画に続けてフェードイン） */
.cpc_pcts text { font-family: "montserrat", "Noto Sans JP", sans-serif; }
.js .client_points_chart .cpc_pcts text { opacity: 0; }
.js .client_points_chart.is-inview .cpc_pcts text {
    animation: cpc_fade .5s ease forwards;
    animation-delay: var(--delay, 0s);
    font-size: 1.5rem;
}
@keyframes cpc_fade { from { opacity: 0; } to { opacity: 1; } }
/* カウントアップ中に桁数で幅が変わらないよう固定（レイアウトのガタつき防止） */
.cpc_count {
    display: inline-block;
    min-width: 4ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* 中央テキスト（ドーナツの穴） */
.cpc_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.15;
    pointer-events: none;
}
.cpc_center_label {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
}
.cpc_center_num {
    display: block;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--color-orange);
}
.cpc_center_num .cpc_count {
    font-family: "montserrat", "Noto Sans JP", sans-serif;
    font-size: 3rem;
    letter-spacing: -3px;
    color: var(--color-orange);
}
/* 周囲のカテゴリラベル（画像の配置を再現。位置は下記 top/left/right で微調整可） */
.cpc_label {
    position: absolute;
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--c);                                            /* 最古フォールバック */
    background: color-mix(in srgb, var(--c), #000 14%);              /* color-mix対応（相対色未対応）用フォールバック */
    background: hsl(from var(--c) h calc(s * 1.5) calc(l * 0.55));   /* 彩度を上げつつ暗く：黒混色のくすみを避け、白文字が乗る濃さに */
    color: var(--tc, #fff); /* 明るい背景色のラベルは --tc で文字色を暗くして可読性を確保 */
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
/* 個別色の上書き（QA・AI は上の式のまま＝白文字の暗色でOK）。
   backend=鮮やかオレンジ／frontend・infra=対応セグメントに寄せたやや暗めの淡色（暗文字, --tc:#333）で互いを区別。 */
.cpc_label--backend  { background: #ee5a1e; }   /* 鮮やかなオレンジ */
.cpc_label--frontend { background: #f0805f; }   /* 対応セグメント(#ff987b)を少し暗くしたサーモン */
.cpc_label--infra    { background: #f2c1a4; }   /* 対応セグメント(#ffd0c3)を少し暗くしたピーチ */
.cpc_label--qa       { top: 0%; left: 6%; }
.cpc_label--backend  { top: -2%;  right: 40px;  }
.cpc_label--frontend { top: 58%;  right: -5%; }
.cpc_label--infra    { bottom: 6%; left: 10%; }
.cpc_label--ai       { top: 42%;  left: -2%; }
.js .client_points_chart .cpc_label { opacity: 0; transform: translateY(6px); }
.js .client_points_chart.is-inview .cpc_label {
    animation: cpc_label_in .5s ease forwards .5s;
}
@keyframes cpc_label_in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* 下部：認定資格取得件数 */
.cpc_cert {
    margin-top: 22px;
    background: #f4f4f4;
    border-radius: 10px;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.cpc_cert_title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1b2733;
}
.cpc_cert_num {
    font-size: 2rem;
    font-weight: 900;
    color: #1b2733;
}
.cpc_cert_num .cpc_count {
    font-family: "montserrat", "Noto Sans JP", sans-serif;
    font-size: 2.8rem;
    color: var(--color-orange);
}
.cpc_cert_list {
    flex: 1 1 180px;
    font-size: 1.2rem;
    color: #555;
    line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
    .js .client_points_chart .cpc_seg { stroke-dashoffset: 0; }
    .js .client_points_chart .cpc_pcts text,
    .js .client_points_chart .cpc_label { opacity: 1; transform: none; }
    .js .client_points_chart.is-inview .cpc_seg,
    .js .client_points_chart.is-inview .cpc_pcts text,
    .js .client_points_chart.is-inview .cpc_label { animation: none; }
}
@media screen and (max-width:640px) {
    .client_points_chart { width: 100%; }
    .cpc_graph { max-width: 360px; margin: 0 auto; }
    .cpc_cert { justify-content: center; text-align: center; }
    .cpc_label--qa       { top: 0%; left: 0; }
    .cpc_label--backend  { top: -2%;  right: 0;  }
    .cpc_label--frontend { top: 58%;  right: -2%; }
    .cpc_label--infra    { bottom: 6%; left: 2%; }
    .cpc_label--ai       { top: 42%;  left: -2%; }
}

/* ==================== 横型棒グラフ（client_points_img02 をコード化）＋伸びるアニメ ==================== */
.client_bars_chart {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    position: relative;
}
.client_bars {
    --bar-scale: 2.3%;      /* バー長 = 値 × この倍率。最長(29.3%)がバー領域の約67%になる */
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.cbar_row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cbar_label {
    flex: 0 0 165px;        /* ラベル列幅を固定してバーの開始位置を揃える */
    text-align: right;
    font-size: 1.2rem;
    color: #333;
    line-height: 1.3;
    white-space: nowrap;
}
.cbar_area {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}
.cbar_fill {
    flex-shrink: 0;
    height: 20px;
    width: calc(var(--val) * var(--bar-scale));
    background: var(--color-orange);
    border-radius: 0 3px 3px 0;
}
.cbar_pct {
    margin-left: 8px;       /* バー先端に続けて表示。バーの伸長に合わせて右へ動く */
    font-size: 1.5rem;
    font-weight: 800;
    color: #1b2733;
    white-space: nowrap;
}
.client_bars_title {
    margin-top: 18px;
    text-align: right;
    font-size: 1.8rem;
    font-weight: 800;
    color: #1b2733;
    position: absolute;
    bottom: 0;
    right: 0;
}
.client_bars_note {
    display: inline-block;
    margin-left: 10px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #888;
}
/* 可視領域でバーが左→右に伸びる（％はバー先端に付いて動く） */
.js .client_bars_chart .cbar_fill { width: 0; }
.js .client_bars_chart.is-inview .cbar_fill {
    animation: cbar_grow .9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--delay, 0s);
}
@keyframes cbar_grow {
    from { width: 0; }
    to   { width: calc(var(--val) * var(--bar-scale)); }
}
@media (prefers-reduced-motion: reduce) {
    .js .client_bars_chart .cbar_fill { width: calc(var(--val) * var(--bar-scale)); }
    .js .client_bars_chart.is-inview .cbar_fill { animation: none; }
}
@media screen and (max-width:640px) {
    .client_bars_chart { width: 100%; }
    .cbar_label { flex-basis: 128px; font-size: 1.05rem; }
    .cbar_fill { height: 16px; }
    .cbar_pct { font-size: 1.3rem; margin-left: 6px; }
    .client_bars_title { font-size: 1.5rem; position: relative; bottom: unset; right: unset; }
}

.client_points_svg {
    width: 460px;
}
@media screen and (max-width:640px) {
    .client_points_svg {
        width: 100%;
    }
}