/* ==================== SECTIONMAP: [ページ] web/サービス詳細 — page-web.php（web_service_examples/tech_stack/tech_case/tech_program。tech_系はpage-techと共有） ==================== */
/* single-tech：ヘッダーを最初から白背景＋カラーロゴに固定 */
body.single-tech .main_header {
    background-color: #fff;
}
body.single-tech .main_header .header_logo #path01 { fill: var(--color-orange); }
body.single-tech .main_header .header_logo #path02 { fill: #63696e; }

/* ==================== single-tech FV（LP風）：左=オレンジ面（右辺が斜め）／右=画像。両者ともFV高さ100% ==================== */
.tech_detail_fv {
    position: relative;
    height: calc(80vh - var(--header-h, 108px)); /* 白ヘッダーの下からビューポート一杯 */
    margin-top: var(--header-h, 108px);
    overflow: hidden;
    background-color: #e5401a; /* フォールバック */
}
.tech_detail_fv_thumbnail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 40%; /* 斜め境界の左端付近から右端まで。この可視領域を基準に画像を object-fit: cover（inner の裏に少し潜り込ませて隙間を防ぐ） */
    z-index: 1;
    margin: 0;
}
.tech_detail_fv_thumbnail picture {
    display: block;
    width: 100%;
    height: 100%;
}
.tech_detail_fv_thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tech_detail_fv_inner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 54%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 10% 0 6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    color: #fff;
    background: linear-gradient(145deg, #ff9422 0%, #ec4d18 55%, #cc330f 100%);
    /* 右辺を斜めに（内角: 左上90 / 右上=鋭角 / 右下=鈍角 / 左下90 のイメージ） */
    clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}
/* テキストのジャンプ率（LPタイトル） */
.tech_detail_fv_title {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tech_detail_fv_headline {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.6;
}
.tech_detail_fv_title_jp {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}
.tech_detail_fv .jisseki {
    max-width: 70%;
}
/* 再利用している up_fv 系サブコピーを新レイアウト用にリセット（絶対配置→フロー） */
.tech_detail_fv_inner .up_fv_content,
.tech_detail_fv_inner .up_fv_sub_copy_content {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
}
.tech_detail_fv_inner .up_fv_sub_copy_content .up_fv_sub_text_jp {
    font-size: 1.7rem;
    line-height: 1.9;
}
/* FV下部のCTA（オレンジ面上）。1つ目=白背景で目立たせる／2つ目=白枠ゴースト */
.tech_detail_fv_cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.tech_detail_fv_cta_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    padding: 16px 30px;
    border-radius: 50px;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.tech_detail_fv_cta_btn--primary {
    background-color: #fff;
    color: var(--color-orange);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.tech_detail_fv_cta_btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}
.tech_detail_fv_cta_btn--secondary {
    background-color: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.85);
}
.tech_detail_fv_cta_btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

@media screen and (max-width:1399px) and (min-width:1100px) {
    .tech_detail_fv_inner {
        gap: 0;
    }
    .tech_detail_fv_headline {
        font-size: 1.3rem;
    }
    .tech_detail_fv_title_jp {
        font-size: 2.4rem;
        margin-bottom: 20px;
    }
    .tech_detail_fv_description {
        font-size: 1.2rem;
        margin: 20px 0;
    }
    .tech_detail_fv_cta_btn {
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1.3;
        text-align: center;
        padding: 12px 20px;
        border-radius: 50px;
    }
}
@media screen and (max-width:640px) {
    /* SP：縦積み（画像→オレンジ面）。斜めは解除 */
    .tech_detail_fv {
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .tech_detail_fv_thumbnail {
        position: static;
        width: 100%;
        height: 26vh;
    }
    .tech_detail_fv_inner {
        position: static;
        width: 100%;
        height: auto;
        clip-path: none;
        padding: 40px 5%;
        gap: 20px;
    }
    .tech_detail_fv_headline {
        font-size: 1.4rem;
        text-align: center;
    }
    .tech_detail_fv_title_jp {
        font-size: 2rem;
        text-align: center;
    }
    .tech_detail_fv .jisseki {
        max-width: 100%;
    }
    .tech_detail_fv_cta {
        flex-direction: column;
    }
    .tech_detail_fv_cta_btn {
        width: 100%;
    }
}
/* サービス詳細FVのサブコピー（single-tech / page-web で使用。旧 tech.css から移設） */
.up_fv_sub_copy_content .up_fv_sub_text_jp {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2;
    color: #fff;
}
/* ==================== up.css から移設：single-tech（web詳細）のセクション（PROBLEMS / Q&A / 旧FVタイトル） ==================== */
/* お悩みブロック（LP風）：中央見出し＋吹き出しカード */
.onayami {
    background: linear-gradient(180deg, #f6f7f9 0%, #d6d6d6 100%);
    padding: 90px 0;
}
.onayami .web_section_title {
    text-align: center;
    padding-left: 0;
    margin-bottom: 52px;
}
.onayami .web_section_title .web_section_title_en {
    font-size: 1.6rem;
    color: var(--color-orange);
    letter-spacing: 0.08em;
}
.onayami .web_section_title .web_section_title_en::before {
    display: none; /* 中央寄せのため左のダイヤは非表示 */
}
.onayami .web_section_title .web_section_title_jp {
    font-size: 3rem;
    line-height: 1.45;
    margin-top: 10px;
}
.problems_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    max-width: 824px; /* カード最大400px×2＋列間24px。これで常に最大2列（3枚並びを防止） */
    margin: 0 auto;
}
.problems_item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 同じ行で高さが揃った際、中身（引用符＋テキスト）を縦中央に＝タイトルのみでも間延びしない */
    width: calc((100% - 24px) / 2); /* 2列（列間 24px） */
    max-width: 400px;
    background: #fff;
    border-radius: 16px;
    padding: 34px 24px 30px;
    text-align: center;
    color: #333;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
}
.problems_item_title {
    font-size: 1.6rem;
    line-height: 1.7;
    font-weight: 700;
}
.problems_item_desc {
    font-size: 1.35rem;
    line-height: 1.75;
    font-weight: 500;
    color: #666;
    margin-top: 12px;
}
/* 上部にお悩みアイコン */
.problems_item::before {
    content: "";
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    background: url(../images/up/problem_icon.svg) no-repeat center center;
    background-size: contain;
}
/* 解決セクション（お悩み→解決の流れ）。FVと同じオレンジグラデーション背景 */
.tech_solution {
    position: relative;
    background: linear-gradient(145deg, #ff9422 0%, #ec4d18 55%, #cc330f 100%);
    padding: 150px 0 92px; /* 上部余白は三角形(48px)分を加算し、コンテンツが詰まって見えないようにする */
    text-align: center;
    overflow: hidden;
}
/* 上部：画面幅いっぱいの下向き三角（onayami 背景の下端色 #d6d6d6 と同色）で流れを可視化 */
.tech_solution_arrow {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 48px;
    background: #d6d6d6;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tech_solution_text {
    position: relative;
    color: #fff;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.8;
}
/* 「解決」をやや大きく＋上部に傍点（ドット）で強調 */
.tech_solution_text .solve {
    font-size: 1.3em;
    -webkit-text-emphasis: filled dot;
    text-emphasis: filled dot;
    -webkit-text-emphasis-position: over;
    text-emphasis-position: over;
}
@media screen and (max-width:640px) {
    .tech_solution {
        padding: 96px 0 54px; /* 三角形(30px)分を上部余白に加算 */
    }
    .tech_solution_arrow {
        height: 30px;
    }
    .tech_solution_text {
        font-size: 1.9rem;
    }
}
/* サービスについて（SERVICE）：テキスト＋添え画像の2カラム */
.tech_service_about {
    padding: 180px 0;
}
.tech_service_about .web_section_title {
    margin-bottom: 48px;
}
.tech_service_about_body {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 56px;
}
.tech_service_about_text {
    flex: 1 1 auto;
    max-width: 500px;
}
.tech_service_about_subtitle {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
}
.tech_service_about_desc {
    font-size: 1.5rem;
    line-height: 2;
    color: #555;
}
.tech_service_about_img {
    flex: 0 0 44%;
    max-width: 44%;
    margin: 0;
}
.tech_service_about_img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}
/* 画像未設定時の cpc グラフ差し込み枠：列内で中央寄せ */
.tech_service_about_chart {
    display: flex;
    justify-content: center;
}
/* 画像が無い場合はテキストを読みやすい幅で中央寄せ */
.tech_service_about_body:not(:has(.tech_service_about_img)) .tech_service_about_text {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
@media screen and (max-width:640px) {
    .tech_service_about {
        padding: 60px 0;
    }
    .tech_service_about .web_section_title {
        margin-bottom: 32px;
    }
    .tech_service_about_body {
        flex-direction: column;
        gap: 28px;
    }
    .tech_service_about_img {
        flex-basis: auto;
        max-width: 100%;
    }
    .tech_service_about_subtitle {
        font-size: 1.7rem;
    }
    .tech_service_about_desc {
        font-size: 1.35rem;
    }
}
.qa_section_up {
    padding: 100px 0;
}
.up_fv_title_headline {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
}
.up_fv_title_jp.webservice_title {
    font-size: 3.4rem;
    font-weight: 800;
    margin: 10px 0 40px;
}
@media screen and (max-width:640px) {
    .tokub .up_fv_inner {
        left: 5%;
    }
    .onayami {
        padding: 54px 0;
    }
    .onayami .web_section_title {
        margin-bottom: 34px;
    }
    .onayami .web_section_title .web_section_title_jp {
        font-size: 2.2rem;
    }
    .problems_list {
        gap: 16px;
    }
    .problems_item {
        width: 100%;
    }
    .problems_item_title {
        font-size: 1.5rem;
    }
    .problems_item_desc {
        font-size: 1.3rem;
    }
    .qa_section_up {
        padding: 50px 0;
    }
    .up_fv_title_headline {
        font-size: 1.3rem;
        text-align: center;
        color: #fff;
        font-weight: 600;
    }
    .up_fv_title_jp.webservice_title {
        font-size: 2.4rem;
        font-weight: 800;
        margin: 10px 0 40px;
        text-align: center;
    }
    .tokub .up_fv_content {
        display: none;
    }
    .service_page_fv.tokub.up_fv::after {
        display: none;
    }
}
.web_service_examples {
    background-color: #f8f8f8;
    padding: 80px;
    width: fit-content;
    margin: 0 auto;
    border-radius: 24px;
}
.web_service_examples .upper-textarea {
    display: flex;
    justify-content: space-between;
}
.web_section_title {
    padding-left: 24px;
}
.web_section_title .web_section_title_en {
    font-size: 3.6rem;
    position: relative;
}
.web_section_title .web_section_title_en::before {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: -24px;
    transform: translateY(-50%) rotate(45deg);
    display: block;
    background: var(--color-orange);
}
.web_section_title .web_section_title_jp {
    font-size: 1.6rem;
    font-weight: 700;
}
.web_service_examples .upper-textarea .web_service_examples_text {
    max-width: 450px;
    font-size: 1.6rem;
    line-height: 2;
}
.service_examples_items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 50px;
}
.service_examples_items li {
    position: relative;
    width: calc( (100% - 20px) / 2); /* 2列（タイトル＋サブタイトル＋詳細に対応して幅を確保） */
    background-color: #fff;
    border-radius: 14px;
    padding: 30px 24px 26px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.service_examples_items li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--color-orange);
}
.service_examples_items li:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
}
.service_examples_items li .number {
    display: block;
    color: var(--color-orange);
    font-size: 3.4rem;
    font-weight: 900;
    line-height: 1;
}
.service_examples_items li .service_examples_title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 14px;
    line-height: 1.5;
}
.service_examples_items li .service_examples_subtitle {
    font-size: 1.45rem;
    font-weight: 500;
    color: #333;
    line-height: 1.8;
    margin-top: 12px;
}
.service_examples_items li .service_examples_desc {
    font-size: 1.3rem;
    font-weight: 400;
    color: #777;
    line-height: 1.9;
    margin-top: 12px;
}

.tech_stack {
    padding: 100px 0;
}
.tech_stack_wrapper {
    display: flex;
    justify-content: space-between;
}
.tech_stack_list {
    width: 60%;
}
.tech_stack_list li {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 20px 24px;
    border-radius: 12px;
    background: #f8f9fb;
    margin-bottom: 12px;
    transition: background .2s ease, box-shadow .2s ease;
}
.tech_stack_list li:hover {
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.tech_stack_list li .num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-orange);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tech_stack_list li .stack_genre {
    flex-shrink: 0;
    width: 200px;
    font-size: 1.8rem;
    font-weight: 700;
}
.tech_stack_list li .stack_cord {
    font-size: 1.5rem;
    color: #555;
    line-height: 1.6;
}

.tech_case {
    padding: 150px 0;
    background-color: var(--color-orange);
}
/* Caseセクション末尾のCTA（オレンジ背景の上に、FVと同じ白地ボタンを中央配置） */
.tech_case_cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 60px;
}
.tech_case_cta_note {
    text-align: center;
    color: #fff;
    font-size: 1.35rem;
    margin-top: 16px;
}
.web_section_title.center {
    text-align: center;
    margin-bottom: 60px;
}
.tech_case .web_section_title .web_section_title_en {
    color: #fff;
}
.tech_case .web_section_title .web_section_title_en::before {
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    top: -30px;
    background-color: #fff;
}
.tech_case .web_section_title .web_section_title_jp {
    color: #fff;
}
.tech_case_description {
    max-width: 600px;
    color:#fff;
    line-height: 2;
    margin: 0 auto;
}
.case_list {
    display: flex;
    gap: 20px;
    margin-top: 60px;
}
.case_list .case_item {
    width: calc(25% - 15px);
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* サムネイルは 16:9 に統一（元画像の縦横比に依存させずカード高さを揃える） */
.case_list .case_item .case_thumbnail {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0;
}
.case_list .case_item .case_thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.case_list .case_item .case_list_content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.case_list .case_item .case_list_content .case_list_item_title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.case_list .case_item .case_list_content .case_list_item_description {
    font-size: 1.5rem;
    line-height: 1.8;
}
.case_list .case_item .case_list_content .tags {
    display: flex;
    gap: 5px;
    margin: 15px 0;
}
.case_list .case_item .case_list_content .tags .tag {
    font-size: 1.2rem;
    color: #fff;
    background-color: #323232;
    padding: 2px 10px;
    border-radius: 20px;
}
.case_list .case_item .case_list_content .damybtn {
    display: flex;
    font-size: 1.4rem;
    font-weight: 500;
    align-items: center;
    justify-content: center;
    margin-top: auto; /* 常にカード最下部へ */
}
.case_list .case_item .case_list_content .damybtn span.icon {
    width: 28px;
    height: 28px;
    background-color: #323232;
}
.case_list .case_item .case_list_content .damybtn span.icon span {
    font-size: .7em;
}
.tech_case .more_btn {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 60px;
}
.tech_case .more_btn span.icon {
    background-color: #fff;
}
.tech_case .more_btn span.icon span {
    color: var(--color-orange);
    font-size: 1em;
}

/* ==================== 他の参画事例（other_cases_title / ease_cases）※ page-client.css から移設。client・single-tech 共通 ==================== */
.other_cases_title {
    margin: 60px auto 40px;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
}
/* tech_case（オレンジ背景）内は白文字。page-client（グレー背景）側は既定の濃色のまま */
.tech_case .other_cases_title {
    color: #fff;
}
.ease_cases {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.ease_case {
    width: calc( ( 100% - 40px) / 3 );
    border-radius: 20px;
    background-color: #fff;
    padding: 20px;
}
.ease_case .upper {
    display: flex;
    gap: 20px;
}
.ease_case .upper .ease_case_img {
    width: 170px;
}
.ease_case .upper .ease_case_title {
    width: calc( 100% - 190px );
    font-size: 1.7rem;
    font-weight: 600;
}
.ease_case .ease_case_list {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.2rem;
    font-weight: 400;
    gap: 6px 10px;
    margin-top: 20px;
}
/* 課題 / 弊社の対応（タイトル＋詳細） */
.ease_case_detail {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #e0e0e0;
}
.ease_case_detail_label {
    position: relative;
    padding-left: 12px;
    margin-bottom: 6px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.5;
    color: #333;
}
.ease_case_detail_label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    bottom: 0.25em;
    width: 4px;
    border-radius: 2px;
    background: #9aa0a6; /* 課題＝グレー */
}
.ease_case_solution .ease_case_detail_label {
    color: var(--color-orange, #e63200);
}
.ease_case_solution .ease_case_detail_label::before {
    background: var(--color-orange, #e63200); /* 対応＝オレンジ */
}
.ease_case_detail_text {
    font-size: 1.25rem;
    line-height: 1.85;
    color: #555;
}
@media screen and (min-width: 1000px) and (max-width: 1399px) {
    .ease_case .upper {
        gap: 10px;
    }
    .ease_case .upper .ease_case_img {
        width: 140px;
    }
    .ease_case .upper .ease_case_title {
        width: calc(100% - 150px);
        font-size: 1.4rem;
        font-weight: 600;
    }
    .ease_case .ease_case_list {
        margin-top: 10px;
        font-size: .9rem;
        gap: 7px 5px;
        line-height: 1;
    }
}
@media screen and (max-width:640px) {
    .ease_cases {
        gap: 10px;
    }
    .ease_case {
        width: calc(50% - 5px);
        border-radius: 10px;
    }
    .ease_case .upper {
        flex-direction: column;
        gap: 10px;
    }
    .ease_case .upper .ease_case_img {
        width: 100%;
    }
    .ease_case .upper .ease_case_title {
        width: 100%;
        font-size: 1.5rem;
    }
    .ease_case .ease_case_list {
        margin-top: 10px;
        gap: 5px;
        font-size: 1rem;
    }
}

/* ==================== 参画までの流れ（tech_flow）※アイコンは assets/images/up/flow_icon_0X.svg を後日設置 ==================== */
/* 選ばれる理由（3つの特徴）：最大3カードを横並び。薄グレー地×白カード */
.tech_features {
    padding: 100px 0;
    background: #f6f7f9;
}
.tech_features .web_section_title {
    margin-bottom: 48px;
}
.tech_features_list {
    display: flex;
    gap: 24px;
    align-items: stretch;
}
.tech_feature_card {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-radius: 12px;
    padding: 32px 28px;
}
.tech_feature_title {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.55;
    color: #1a1a1a;
    margin-bottom: 16px;
    text-align: center;
}
/* タイトルと詳細文の間の画像（高さ統一） */
.tech_feature_img {
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
}
.tech_feature_img img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.tech_feature_text {
    font-size: 1.4rem;
    line-height: 1.9;
    color: #555;
}
@media screen and (max-width: 999px) {
    .tech_features {
        padding: 60px 0;
    }
    .tech_features .web_section_title {
        margin-bottom: 32px;
    }
    .tech_features_list {
        flex-direction: column;
        gap: 16px;
    }
    .tech_feature_title {
        font-size: 1.55rem;
    }
}
/* 高品質マッチング（tech_flow の前）：画像左・テキスト右、白背景（前後のオレンジ/グレーと対比） */
.tech_matching {
    padding: 100px 0;
    background: #fff;
}
.tech_matching_body {
    display: flex;
    align-items: center;
    gap: 56px;
}
.tech_matching_img {
    flex: 0 0 44%;
    max-width: 44%;
    margin: 0;
}
.tech_matching_img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}
.tech_matching_text {
    flex: 1 1 auto;
}
.tech_matching .web_section_title {
    margin-bottom: 24px;
}
.tech_matching_desc {
    font-size: 1.5rem;
    line-height: 2;
    color: #555;
}
/* 画像が無い場合はテキストを読みやすい幅で中央寄せ */
.tech_matching_body:not(:has(.tech_matching_img)) .tech_matching_text {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
@media screen and (max-width:640px) {
    .tech_matching {
        padding: 60px 0;
    }
    .tech_matching_body {
        flex-direction: column;
        gap: 28px;
    }
    .tech_matching_img {
        flex-basis: auto;
        max-width: 100%;
    }
    .tech_matching_desc {
        font-size: 1.35rem;
    }
}
.tech_flow {
    padding: 100px 0;
    background: #f6f7f9;
}
.tech_features .web_section_title .web_section_title_en::before,
.tech_flow .web_section_title .web_section_title_en::before {
    left: 50%;
    top: -28px;
    transform: translateX(-50%) rotate(45deg);
}
.tech_flow_wrap {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 28px;
    margin-top: 70px;
}
.tech_flow_item {
    position: relative;
    flex: 1 1 0;
    max-width: 270px;
    background: #fff;
    border-radius: 16px;
    padding: 44px 24px 30px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
}
/* 番号バッジ */
.tech_flow_num {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-orange);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* アイコン（SVG差し込み） */
.tech_flow_icon {
    width: 84px;
    height: 84px;
    margin: 8px auto 20px;
    border-radius: 50%;
    background: #fff2ec;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tech_flow_icon img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}
.tech_flow_title {
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 12px;
}
.tech_flow_text {
    font-size: 1.4rem;
    line-height: 1.75;
    color: #555;
    text-align: left;
}
/* ステップ間の矢印（右向き） */
.tech_flow_item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-left-color: var(--color-orange);
    border-right: 0;
}
@media screen and (max-width:1399px) and (min-width:1100px) {
    .tech_flow_wrap {
        gap: 20px;
    }
    .tech_flow_item {
        padding: 40px 18px 26px;
    }
    .tech_flow_title {
        font-size: 1.7rem;
    }
    .tech_flow_item:not(:last-child)::after {
        right: -15px;
    }
}
@media screen and (max-width:640px) {
    .tech_flow {
        padding: 54px 0;
    }
    .tech_flow_wrap {
        flex-direction: column;
        align-items: center;
        gap: 56px; /* 番号バッジ(上に-20px飛び出す)と矢印が重ならないよう広めに */
        margin-top: 44px;
    }
    .tech_flow_item {
        width: 100%;
        max-width: 400px;
    }
    /* 矢印を下向きに。前カード寄り(上部)に置き、次カードの番号バッジと分離 */
    .tech_flow_item:not(:last-child)::after {
        top: auto;
        right: auto;
        left: 50%;
        bottom: -18px;
        transform: translateX(-50%);
        border: 10px solid transparent;
        border-top-color: var(--color-orange);
        border-bottom: 0;
    }
}

.tech_program_details {
    padding: 100px 0;
    background-color: #f8f8f8;
}
.tech_program_details .upper-textarea {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}
.tech_program_details .upper-textarea .web_service_examples_text {
    max-width: 570px;
    font-size: 1.6rem;
    line-height: 2;
}
.tech_program_flow_phase {
    display: flex;
    justify-content: center;
    gap: 390px;
    position: relative;
}
.tech_program_flow_phase::after {
    content: "";
    width: 900px;
    height: 1px;
    display: block;
    background-color: var(--color-orange);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
}
.tech_program_flow_phase .phase_counter {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 400;
    color: #fff;
    background-color: var(--color-orange);
    line-height: 1.1;
    position: relative;
    z-index: 2;
}
.tech_program_flow_phase .phase_counter .num {
    font-size: 2rem;
    font-weight: 700;
}
.tech_program_flow_content {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 20px
}
.tech_program_flow_content .tech_program_flow_inner {
    width: calc( (100% - 40px) / 3);
    background-color: #fff;
    border-radius: 10px;
    padding: 40px;
}
.tech_program_flow_content .tech_program_flow_inner .tech_program_flow_title {
    color: var(--color-orange);
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 30px;
}
.tech_program_flow_content .tech_program_flow_inner .tech_program_head {
    width: 100%;
    background-color: #d9dde4;
    padding: 10px 20px;
    border-radius: 4px;
    display: flex;
    font-size: 1.6rem;
    font-weight: 600;
}
.tech_program_flow_content .tech_program_flow_inner .tech_program_head .number {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    width: 40px;
    display: block;
}
.tech_program_flow_content .tech_program_flow_inner .tech_program_flow_description {
    font-size: 1.6rem;
    line-height: 1.6;
    margin: 20px 0;
}

/* ==================== SECTIONMAP: [ページ] web/tech — レスポンシブ ==================== */
@media screen and (max-width:1399px) and (min-width:1100px) {
    .tech_program_flow_phase {
        gap: 260px;
    }
    .tech_program_flow_phase::after {
        width: 700px;
    }
    .tech_program_flow_content .tech_program_flow_inner {
        padding: 25px;
    }
}
@media screen and (max-width:640px) {
    .up_fv_title_en.web_fv {
        line-height: 1.3;
    }
    .up_fv_sub_copy_content .up_fv_sub_text_jp {
        font-size: 1.2rem;
    }
    .tech_fv_fix.up_fv_sub_copy_content {
        width: auto;
    }
    .web_service_examples {
        width: 100%;
        padding: 40px 0 60px;
        margin-top: 20px;
    }
    .web_service_examples .upper-textarea {
        flex-direction: column;
        gap: 30px;
    }
    .web_section_title .web_section_title_en {
        font-size: 2.4rem;
    }
    .web_section_title .web_section_title_en::before {
        width: 8px;
        height: 8px;
    }
    .web_section_title .web_section_title_jp {
        font-size: 1.5rem;
    }
    .web_service_examples .upper-textarea .web_service_examples_text {
        font-size: 1.4rem;
    }
    .service_examples_items {
        gap: 10px;
        margin-top: 30px;
        flex-wrap: wrap;
    }
    .service_examples_items li {
        width: 100%;
        padding: 24px 18px;
    }
    .service_examples_items li .number {
        font-size: 2.8rem;
    }
    .service_examples_items li .service_examples_title {
        font-size: 1.6rem;
    }
    .service_examples_items li .service_examples_subtitle {
        font-size: 1.35rem;
    }
    .service_examples_items li .service_examples_desc {
        font-size: 1.25rem;
    }

    .tech_stack {
        padding: 60px 0;
    }
    .tech_stack_wrapper {
        flex-direction: column;
    }
    .tech_stack_list {
        width: 100%;
        margin-top: 20px;
    }
    .tech_stack_list li {
        padding: 18px;
        flex-wrap: wrap;
        gap: 12px;
    }
    .tech_stack_list li .num {
        width: 38px;
        height: 38px;
        font-size: 1.4rem;
    }
    .tech_stack_list li .stack_genre {
        font-size: 1.6rem;
        width: calc(100% - 50px);
    }
    .tech_stack_list li .stack_cord {
        width: 100%;
        font-size: 1.4rem;
    }

    .tech_case {
        padding: 80px 0 60px;
    }
    .tech_case .web_section_title {
        padding-left: 0;
    }
    .tech_case .web_section_title .web_section_title_en::before {
        top: -20px;
    }
    .web_section_title.center {
        margin-bottom: 30px;
    }
    .tech_case_description {
        font-size: 1.5rem;
    }
    .case_list {
        margin-top: 30px;
        flex-direction: column;
        align-items: center;
    }
    .case_list .case_item {
        width: 85%;
    }
    .tech_program_details {
        padding: 60px 0;
    }
    .tech_program_details .upper-textarea {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }
    .tech_program_flow_wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .tech_program_flow_phase {
        flex-direction: column;
        gap: 300px;
        display: none;
    }
    .tech_program_flow_phase .phase_counter {
        width: 60px;
        height: 60px;
    }
    .tech_program_flow_phase::after {
        display: none;
    }
    .tech_program_flow_content {
        flex-direction: column;
        width: 100%;
        margin-top: 0;
    }
    .tech_program_flow_content .tech_program_flow_inner {
        width: 100%;
        padding: 30px 20px;
    }
    .tech_program_flow_content .tech_program_flow_inner .tech_program_flow_title {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }
    .tech_program_flow_content .tech_program_flow_inner .tech_program_head {
        font-size: 1.5rem;
    }
    .tech_program_flow_content .tech_program_flow_inner .tech_program_flow_description {
        font-size: 1.5rem;
        margin: 15px 0;
    }
}