@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:ital,wght@0,600;1,600&display=swap");
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);


/* ヘッダー手動調整 */
/* 既存のスタイル */

div.engagecros2025_hd #content-header .img-fluid {
    max-width: 70%;
}
div.engagecros2025_hd #content-header.appub .service-title .title {
    padding: 10px 0 50px 0;
}
div.engagecros2025_hd #content-header .align-items-end {
	text-align: center;
}
@media (min-width: 640px) {
div.engagecros2025_hd #content-header .align-items-end {
	text-align: left;
}
}
@media (min-width: 1024px) {
div.engagecros2025_hd #content-header .align-items-end {
	text-align: left;
}
}

div.engagecros2025_hd #content-header .container {
    height: 500px;
}
div.engagecros2025_hd #content-header.appub {
    background: radial-gradient(circle, #e60012 30%, #69282e 100%);
    border-bottom: solid 1px #ebebeb;
}
div.engagecros2025_hd #content-header .charaimg {
    bottom: 15px;
}
div.engagecros2025_hd h1.title, div.engagecros2025_hd .txt2 {
    color: white!important;
}
div.engagecros2025_hd .txt3 {
    color: white!important;
    margin-top: 1.5rem;
}
div.engagecros2025_hd .txt4 {
    color: var(--color-gray-900)!important;
	font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;
}
div.engagecros2025_hd #content-header.appub .header-wrap, #content-header.apppub .header-wrap {
    background: unset;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* background-attachment: fixed; */
    max-width: 1400px;
    margin: 0 auto;
}
/* ボタン */
div.engagecros2025_hd .btn-wrap {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 2rem;
}
div.engagecros2025_hd .btn_hdec {
    display: inline-block;
    text-align: center;
    padding: 12px 45px;
    /* border-radius: 9999px; 丸み */
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

div.engagecros2025_hd #content-header.appub .btn-set .btn-top a {
    font-size: 2rem;
    font-weight: normal;
}

/* 赤塗りボタン
div.engagecros2025_hd .btn_hdec.red_btn_hdec {
    background-color: white;
    color: var(--color-gray-800);
} */
/* 赤枠ボタン
div.engagecros2025_hd .btn_hdec.outline_ec {
    background-color: #fff;
    color: var(--color-gray-800);
} */
div.engagecros2025_hd .btn_hdec.red_btn_hdec:hover,div.engagecros2025_hd .btn_hdec.outline_ec:hover {
    opacity: 1;
}
/* hover時
div.engagecros2025_hd .btn_hdec.red_btn_hdec:hover {
    background-color: #fff;
    color: var(--color-brand-red);
    border-color: var(--color-brand-red);
}
div.engagecros2025_hd .btn_hdec.outline_ec:hover {
    background-color: #fff;
    color: var(--color-brand-red);
    border-color: var(--color-brand-red);
} */

/* スマホ対応（縦積み） */
@media (max-width: 767px) {
div.engagecros2025_hd #content-header.appub .service-title {
    padding-top: 0;
	padding-bottom: 0;
}
div.engagecros2025_hd .btn_hdec {
    width: 100%;
    max-width: 300px;
}
}


@media (max-width: 767px) {
div.engagecros2025_hd .btn-wrap {
    flex-direction: column;
    align-items: center;
}
div.engagecros2025_hd .btn_hdec {
    width: 100%;
    max-width: 300px;
}
}
/* 画像埋め込み ---------------------- */

/* Custom Properties (共通設定) */
:root {
--color-brand-red: #db0025;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
}

/* ==================================== */
/* ヒーローセクション (Hero Section) */
/* ==================================== */

#engagecros2025_hero .hero-section {
    position: relative;
    padding-top: 4rem;
    /* padding-bottom: 6rem; pb-24 */
    overflow: hidden;
    background-color: unset;
}

@media (min-width: 1024px) {
#engagecros2025_hero .hero-section {
    padding-top: 7rem;
}
}
/* メインコンテナ */
#engagecros2025_hero .hero-container-main {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
	margin-bottom: 30px;
}

@media (min-width: 640px) {
#engagecros2025_hero .hero-container-main {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
	margin-bottom: 20px;
}
}

@media (min-width: 1024px) {
#engagecros2025_hero .hero-container-main {
    flex-direction: row;
    padding-left: 2rem;
    padding-right: 2rem;
	margin-bottom: 20px;
}
}
/* 背景要素 (Background Elements) */
#engagecros2025_hero .bg-slant-area {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -10;
    width: 66.666667%;
    height: 100%;
    background: linear-gradient(to bottom left, var(--color-gray-50), white);
    opacity: 0.8;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}
#engagecros2025_hero .bg-blur-circle {
    position: absolute;
    top: 5rem;
    left: 2.5rem;
    width: 16rem;
    height: 16rem;
    background-color: #fef2f2;
    border-radius: 50%;
    filter: blur(3rem);
    opacity: 0.3;
}
/* テキストコンテンツ (Text Content) */
#engagecros2025_hero .hero-text-content {
    width: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 1024px) {
#engagecros2025_hero .hero-text-content {
    width: 50%;
}
}
#engagecros2025_hero .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background-color: #fef2f2;
    border: 1px solid #fee2e2;
    color: var(--color-brand-red);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: flex-start;
}
#engagecros2025_hero .hero-heading {
    font-size: 2.25rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--color-gray-900);
}

@media (min-width: 1024px) {
#engagecros2025_hero .hero-heading {
    font-size: 3.75rem;
}
}
#engagecros2025_hero .sm-break {
    display: block;
}
#engagecros2025_hero .lg-break {
    display: none;
}

@media (min-width: 1024px) {
#engagecros2025_hero .sm-break {
    display: none;
}
#engagecros2025_hero .lg-break {
    display: block;
}
}
#engagecros2025_hero .hero-subheading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gray-800);
}
#engagecros2025_hero .text-brand-red-main {
    color: var(--color-brand-red);
}
#engagecros2025_hero .hero-description-bar {
    font-size: 1rem;
    color: var(--color-gray-600);
    font-weight: 500;
    line-height: 1.625;
    background-color: var(--color-gray-100);
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}
/* CTAグループ */
#engagecros2025_hero .hero-cta-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.5rem;
}

@media (min-width: 640px) {
#engagecros2025_hero .hero-cta-group {
    flex-direction: row;
}
}
#engagecros2025_hero .cta-button {
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
#engagecros2025_hero .hero-primary-button {
    color: white;
    background-color: var(--color-brand-red);
    border: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
#engagecros2025_hero .hero-primary-button:hover {
    background-color: #b91c1c;
    transform: translateY(-0.125rem);
}
#engagecros2025_hero .hero-secondary-button {
    color: var(--color-gray-700);
    background-color: white;
    border: 1px solid var(--color-gray-300);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
#engagecros2025_hero .hero-secondary-button:hover {
    background-color: var(--color-gray-50);
}
/* ビジュアルコンテンツ (Visual Content) */
#engagecros2025_hero .hero-visual-content {
    width: 100%;
    position: relative;
    z-index: 10;
}

@media (min-width: 1024px) {
#engagecros2025_hero .hero-visual-content {
    width: 50%;
}
}
#engagecros2025_hero .device-mockup-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-gray-900);
    border: 6px solid var(--color-gray-900);
    border-radius: 2.5rem;
    height: 200px;
    width: 90%;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.05), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 0.5s ease;
}

/* スマホ表示（〜767px）でサイズ変更 */
@media (max-width: 767px) {
  #engagecros2025_hero .device-mockup-container {
    height: 300px;
    width: 60%;
  }
}

#engagecros2025_hero .device-mockup-container:hover {
    transform: scale(1.02);
}

@media (min-width: 640px) {
#engagecros2025_hero .device-mockup-container {
    width: 600px;
    height: 400px;
}
}
#engagecros2025_hero .device-screen-frame {
    background-color: white;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
#engagecros2025_hero .dynamic-screen-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
#engagecros2025_hero .screen-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    object-fit: cover;
}
#engagecros2025_hero .screen-panel.active {
    opacity: 1;
}
/* フローティングバッジ (Floating Badge) */
#engagecros2025_hero .floating-badge {
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    background-color: white;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--color-gray-100);
    animation: bounce-slow 4s infinite ease-in-out;
    display: none;
}

@media (min-width: 640px) {
#engagecros2025_hero .floating-badge {
    display: block;
}
}
#engagecros2025_hero .badge-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
#engagecros2025_hero .badge-icon-bg {
    background-color: #d1fae5;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: #059669;
}
#engagecros2025_hero .badge-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    font-weight: 700;
}
#engagecros2025_hero .badge-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--color-gray-900);
}
@keyframes bounce-slow {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.5rem);
}
}
/* ==================================== */
/* ナビゲーションドット (Navigation Dots) */
/* ==================================== */

#engagecros2025_hero .slider-dots-container {
    display: flex;
    justify-content: center;
    gap: 0.75rem; /* gap-3 */
    margin-top: 2rem; /* mt-8 */
    /* 親要素 (hero-visual-content) の幅いっぱいに広がることを確認 */
    width: 90%;
}

@media (min-width: 640px) {
#engagecros2025_hero .slider-dots-container {
    width: 588px;
}
}

@media (min-width: 1024px) {
#engagecros2025_hero .slider-dots-container {
    width: 588px;
}
}
#engagecros2025_hero .dot {
    height: 0.375rem;
    width: 0.75rem;
    background-color: var(--color-gray-200);
    border-radius: 9999px;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
    cursor: pointer;
}
#engagecros2025_hero .dot.is-active {
    width: 3rem;
    background-color: white;
}
/* 以下、生成 ------------------------- */


/* 全体セクション */

#engagecros2025 p {
	font-size: 16px;
}

#engagecros2025 .container_2025 {
    margin: 0 auto; 
	max-width: 1140px;
}
#engagecros2025 .problems-solutions-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
/* コンテナ */
#engagecros2025 .container-main {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
/* 差し替え */

#engagecros2025 h2.title.add {
	font-size: 30px;
}
#engagecros2025 .container-main p.info-txt {
    text-align: right;
	color: #d1d5db;
    margin-top: 0.75rem;
}

@media (min-width: 640px) {
#engagecros2025 .container-main {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
	#engagecros2025 h2.title.add {
	font-size: 40px;
}
}

@media (min-width: 1024px) {
#engagecros2025 .container-main {
    padding-left: 2rem;
    padding-right: 2rem;
}
		#engagecros2025 h2.title.add {
	font-size: 40px;
}
}
/* ヘッダー部分 */
#engagecros2025 .text-center-heading {
    text-align: center;
    margin-bottom: 5rem; 
}
#engagecros2025 .main-heading {
    /* font-size: 1.875rem; text-3xl */
    /* font-weight: 700; font-bold */
    color: var(--color-gray-900);
    margin-bottom: 1.5rem;
    line-height: 1.2; /* 行間調整 */
}

@media (max-width: 639px) {
#engagecros2025 .sm-hidden {
    display: none; /* sm:hidden */
}
}
#engagecros2025 .heading-underline {
    width: 4rem;
    height: 0.25rem;
    background-color: var(--color-brand-red);
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.25rem;
    margin-bottom: 1.5rem;
}
/* カードグリッド */
#engagecros2025 .cards-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
#engagecros2025 .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (min-width: 1024px) {
#engagecros2025 .cards-grid {
    gap: 2.5rem;
}
}
/* 各カードアイテム */
#engagecros2025 .card-item {
    background-color: white;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--color-gray-100);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
}

@media (min-width: 640px) {
#engagecros2025 .card-item {
    flex-direction: row;
}
}
/* 問題側 (左/上側) */
#engagecros2025 .card-problem {
    background-color: var(--color-gray-100);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    width: 100%;
}

@media (min-width: 640px) {
#engagecros2025 .card-problem {
    width: 41.666667%;
}
}
/* アイコンの円形 */
#engagecros2025 .icon-circle {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background-color: white;
    border-radius: 9999px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: var(--color-gray-600);
    display: flex;
    justify-content: center;
    align-items: center;
}
#engagecros2025 .icon-svg {
    width: 1.5rem;
    height: 1.5rem;
}
/* 問題テキスト */
#engagecros2025 .problem-text {
    font-weight: 700;
    color: var(--color-gray-700);
    font-size: 1.9rem;
    line-height: 1.625;
}
#engagecros2025 .problem-text br {
    display: none;
}

@media (min-width: 640px) {
#engagecros2025 .problem-text {
    font-size: 1.5rem;
}
}
/* 矢印インジケータ */
#engagecros2025 .arrow-indicator {
    position: absolute;
    z-index: 10;
    background-color: white;
    border-radius: 9999px;
    padding: 0.25rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-gray-100);
    color: var(--color-brand-red);
    display: flex;
    justify-content: center;
    align-items: center;
}
#engagecros2025 .arrow-svg {
    width: 2rem;
    height: 2rem;
    stroke-width: 2;
}
#engagecros2025 .arrow-svg.rotated-90 {
    transform: rotate(90deg);
}
/* 右矢印 (デスクトップ/タブレット向け) */
#engagecros2025 .right-arrow {
    display: none;
}

@media (min-width: 640px) {
#engagecros2025 .right-arrow {
    display: flex;
    right: -1.25rem;
    top: 50%;
    transform: translateY(-50%);
}
}
/* 下矢印 (モバイル向け) */
#engagecros2025 .bottom-arrow {
    bottom: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 640px) {
#engagecros2025 .bottom-arrow {
    display: none;
}
}
/* 解決策側 (右/下側) */
#engagecros2025 .card-solution {
    padding: 1.5rem 1.5rem 1.5rem 3rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: white;
}

@media (min-width: 640px) {
#engagecros2025 .card-solution {
    width: 58.333333%;
}
}
/* タグ */
#engagecros2025 .solution-tag {
    /* font-size: 0.625rem; text-[10px] */
    font-weight: 700;
    color: var(--color-brand-red);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* 解決策のタイトル */
#engagecros2025 .solution-heading {
    /* tfont-size: 1.125rem; ext-lg */
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.25rem;
}
/* 解決策のサブテキスト */
#engagecros2025 .solution-subtext {
    /* font-size: 0.75rem; text-xs */
    color: var(--color-gray-500);
    font-weight: 500;
}




/* 強み ---------------------------------- */

/* 強みカードグリッド */
#engagecros2025 .strengths-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

#engagecros2025 .strength-card_img {
		width: 100%;
		text-align: center;
	margin-bottom: 3rem;
	}
@media (min-width: 768px) {
#engagecros2025 .strengths-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));}
#engagecros2025 .strength-img {
    width: 30%;
}
}

@media (min-width: 1024px) {
#engagecros2025 .strengths-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
#engagecros2025 .strengths-grid img {
    width: 30%;
}


/* 各強みカード */
#engagecros2025 .strength-card {
    background-color: white;
    padding: 3rem 2rem 2rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-gray-200);
}

#engagecros2025 .card-title {
    /* font-size: 1.25rem; text-xl */
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 1rem;
	text-align: center;
}
#engagecros2025 .card-description {
    color: var(--color-gray-600);
    margin-bottom: 1.5rem;
    /* font-size: 0.875rem; text-sm */
    line-height: 1.625;
	font-size: 1.5rem;
}
#engagecros2025 .card-cta-text {
    /* font-size: 0.75rem; text-xs */
    font-weight: 700;
    color: var(--color-gray-400);
}


/* 中間CTA (Intermediate CTA) */
#engagecros2025 .intermediate-cta-wrapper {
    margin-top: 3rem;
    text-align: center;
    /* background-color: var(--color-gray-50); bg-gray-50 */
    /* padding: 2rem; p-8 */
    /* border-radius: 1rem; rounded-2xl */
    /* border: 1px solid var(--color-gray-100); border border-gray-100 */
}
#engagecros2025 .cta-inner-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) { /* md:flex-row */
#engagecros2025 .cta-inner-content {
    flex-direction: row;
}
}
#engagecros2025 .cta-text {
    /* font-size: 0.875rem; text-sm */
    color: var(--color-gray-600);
    margin-bottom: 3rem;
}
/* CTAボタンの共通スタイル */
#engagecros2025 .cta-button {
	font-size: 1.75rem;
    font-weight: 500;
    padding: 1.2rem 4rem;
     /* border-radius: 0.25rem; rounded */
    /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); shadow */
    transition: background-color 0.15s ease-in-out; /* transition */
    cursor: pointer;
    width: 100%;
    box-sizing: border-box; /* paddingとborderを幅に含める */
}

@media (min-width: 768px) { /* md:w-auto */
#engagecros2025 .cta-button {
    width: auto;
}
}
/* プライマリボタン (資料請求) */
#engagecros2025 .primary-button {
    background-color: var(--color-brand-red);
    color: white;
	border: solid 2px var(--color-brand-red);
}
#engagecros2025 .primary-button:hover {
        background-color: #fff;
    color: #ed7f92;
	border: solid 2px #ed7f92;
}
/* セカンダリボタン (お問い合わせ) */
#engagecros2025 .secondary-button {
    background-color: white;
    color: var(--color-brand-red);
	border: solid 2px var(--color-brand-red);
}
#engagecros2025 .secondary-button:hover {
    background-color: #ed7f92;
    color: white;
	border: solid 2px #ed7f92;
}
/* CTA間の区切り線 (デスクトップのみ表示) */
#engagecros2025 .cta-divider {
    display: none; /* hidden (mobile) */
}

@media (min-width: 768px) { /* md:block */
#engagecros2025 .cta-divider {
    display: block;
    width: 1px; /* w-px */
    height: 4rem; /* h-16 */
    background-color: var(--color-gray-200); /* bg-gray-200 */
}
}
#engagecros2025 .cta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* モバイルで幅全体を使用 */
}

@media (min-width: 768px) {
#engagecros2025 .cta-item {
    width: auto;
}
}
/* 問い合わせ3列ここから ---------------*/

/* 共通部分（前回と同様） */
#engagecros2025 .feature-columns {
    width: 100%;
    padding: 3% 0 0;
}

#engagecros2025 .feature-list {
    display: grid;
    gap: 2.5%;
    width: 100%;
}
#engagecros2025 .feature-item {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 14px;
    padding: 8%;
    text-align: center;
	margin-bottom: 10px;
}
#engagecros2025 .feature-img {
    width: 35%;
    height: auto;
    margin-bottom: 12px;
}
#engagecros2025 .feature-title {
    /* font-size: 16px; */
    font-weight: bold;
    margin-bottom: 8px;
}
#engagecros2025 .card-underline {
    width: 100%;
    height: 0.25rem; /* h-1 */
    background-color: var(--color-brand-red);
    margin: 1.5rem 0;
}
#engagecros2025 .feature-text {
    /* font-size: 14px; */
    color: #444;
    line-height: 1.6;
    margin-bottom: 16px;
	text-align: left;
}
#engagecros2025 .feature-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    color: #555;
	width: 100%;
}
#engagecros2025 .feature-contact img {
    width: 14px;
    margin-right: 6px;
}
/*  ここから「PC：3列」「スマホ：1列」の指定 */
#engagecros2025 .feature-3col .feature-list {
    grid-template-columns: 1fr 1fr 1fr 1fr; /* PCで3列 */
	margin-bottom: 50px;
}

br.float-del {clear: both; margin-bottom: 2rem;}

@media (max-width: 768px) {
#engagecros2025 .feature-3col .feature-list {
    grid-template-columns: 1fr 1fr; /* スマホは1列 */
	margin-bottom: 90px;
}
#engagecros2025 .feature-img {
    width: 32%; /* ★高さ固定値で入れた方が良い？ */
}
}
/* アイコン色 */
.feature-contact .material-icons {
    color: #999;
    margin-right: 0.5em;
	font-size: 20px;
}

/* 問い合わせ3列ここまで ---------------*/




/* ==================================== */
/* 信頼性セクション (Reliability Section) */
/* ==================================== */

#engagecros-reliability .reliability-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-color: var(--color-gray-50); /* bg-gray-50 */
    /* border-top: 1px solid var(--color-gray-200); border-y
    border-bottom: 1px solid var(--color-gray-200); */
}

#engagecros-reliability .reliability-container {
    /* max-width: 72rem; /* max-w-6xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    #engagecros-reliability .reliability-container {
        padding-left: 1.5rem; /* sm:px-6 */
        padding-right: 1.5rem;
    }
}
@media (min-width: 1024px) {
    #engagecros-reliability .reliability-container {
        padding-left: 2rem; /* lg:px-8 */
        padding-right: 2rem;
    }
}

/* ヘッダー */
#engagecros-reliability .reliability-header {
    text-align: center;
    margin-bottom: 4rem; /* mb-16 */
}

#engagecros-reliability .reliability-heading {
    /* font-size: 1.875rem; text-3xl */
    font-weight: 700;
    color: var(--color-gray-900);
}
#engagecros2025 .reliability-card_img {
		width: 100%;
		text-align: center;
	margin-bottom: 2rem;
	}
#engagecros2025 .reliability-grid img {
    width: 50%;
}
/* カードグリッド */
#engagecros-reliability .reliability-grid {
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) {
    #engagecros-reliability .reliability-grid {
        grid-template-columns: 1fr 1fr; /* md:grid-cols-3 */
    }
}

/* 共通カードスタイル */
#engagecros-reliability .reliability-card {
    background-color: white;
    padding: 2rem 3rem 2rem 4rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-gray-100);
    text-align: center;
    position: relative;
    transition: all 0.3s ease-in-out; /* 特徴カードの変形用 */
}

/* アイコン背景 */
#engagecros-reliability .card-icon-bg {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
}
/* アイコンサイズ調整 */
#engagecros-reliability .card-icon-bg svg {
    width: 2rem;
    height: 2rem;
}

/* タイトル */
#engagecros-reliability .card-title {
    /* font-size: 1.125rem; text-lg */
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 1rem;
}

/* 説明文 */
#engagecros-reliability .card-description {
    /* font-size: 0.875rem; text-sm */
    color: var(--color-gray-600);
    line-height: 1.625;
    margin-bottom: 1rem;
	text-align: left;
	  text-indent: -1em;
  padding-left: 1em;
}
#engagecros-reliability .card-description .material-icons {
line-height: 100%;
    vertical-align: bottom;
}

/* 特徴カード (サポート体制) */
#engagecros-reliability .card-featured {
    border-top: 4px solid var(--color-brand-red); /* border-t-4 border-brand-red */
}
@media (min-width: 768px) {
    #engagecros-reliability .card-featured {
        transform: translateY(-1rem); /* md:-translate-y-4 */
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* md:shadow-lg */
    }
}

/* サポートバッジ */
#engagecros-reliability .support-badge {
    background-color: #fef2f2;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #fee2e2;
}

#engagecros-reliability .support-badge-text {
    /* tfont-size: 0.75rem; ext-xs */
    font-weight: 700;
    color: #b91c1c;
    line-height: 1.5;
}

#engagecros-reliability .badge-emphasized {
    font-size: 1.125rem;
}


/* ==================================== */
/* 成功事例セクション (Case Study Section - 2 Columns) */
/* ==================================== */

#engagecros-casestudy .case-study-section {
    padding-top: 5rem; 
    padding-bottom: 0; 
    background-color: white; 
}

#engagecros-casestudy .case-study-container-outer {
    max-width: 1140px;           /* コンテンツ幅を固定 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    #engagecros-casestudy .case-study-container-outer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    #engagecros-casestudy .case-study-container-outer {
        padding-left: 0;         /* PCでは左右の余白を詰める */
        padding-right: 0;
    }
}
/* ヘッダー */
#engagecros-casestudy .case-study-header {
    text-align: center; 
    margin-bottom: 3rem; 
}

#engagecros-casestudy .case-study-heading {
    font-size: 1.5rem; 
    font-weight: 700; 
    margin-bottom: 0.5rem; 
    color: var(--color-gray-900);
}

/* ==================================== */
/* カードの基本スタイル (前回同様) */
/* ==================================== */

/* カードの最小幅は不要になったため、case-card-widthはグリッドが幅を決定します */
#engagecros-casestudy .case-card {
    background-color: white;
    border-radius: 0.75rem; 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 
    border: 1px solid var(--color-gray-100); 
    overflow: hidden;
    flex-direction: column;
    display: flex; /* Flexコンテナを維持 */
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow 0.3s ease;
}
#engagecros-casestudy .case-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 
}

/* ロゴエリア */
#engagecros-casestudy .case-bg-gray {
    background-color: var(--color-gray-50);
}/* ロ
#engagecros-casestudy .case-logo-area {
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}
#engagecros-casestudy .case-logo-overlay {
    position: absolute; inset: 0;
    background-color: rgba(0, 0, 0, 0); 
    transition: background-color 0.3s ease;
}
#engagecros-casestudy .group-hover-card:hover .case-logo-overlay {
    background-color: rgba(0, 0, 0, 0.05); 
} */
#engagecros-casestudy .case-logo-text {
    font-size: 1.25rem; 
    font-weight: 700; 
    color: var(--color-gray-400); 
    text-align: center;
    line-height: 1.25; 
    position: relative;
    z-index: 10;
}

/* コンテンツエリア */
#engagecros-casestudy .case-content-area {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* タグ */
#engagecros-casestudy .case-tag {
    display: inline-block;
    background-color: #fff1f3; 
    color: var(--color-brand-red); 
    /* font-size: 0.75rem; */ 
    padding: 0.25rem 0.5rem; 
    border-radius: 0.25rem; 
    margin-right: 0.5rem; 
    margin-bottom: 0.5rem; 
}

/* 会社名 */
#engagecros-casestudy .case-company-name {
    /* font-size: 0.75rem;  */
    /* color: var(--color-gray-500); */
    margin-bottom: 0.5rem; 
    font-weight: 700;
	font-size: 1.75rem;
}

/* 事例タイトル */
#engagecros-casestudy .case-title {
    font-weight: normal; 
    color: var(--color-gray-900); 
    font-size: 1.5rem;
    line-height: 1.625; 
    margin-bottom: 1rem; 
    flex: 1; 
    transition: color 0.3s ease;
}/*
#engagecros-casestudy .group-hover-card:hover .case-title {
    color: var(--color-brand-red); 
}*/

/* 詳細リンク */
#engagecros-casestudy .case-detail-link {
    text-align: right;
    color: #666; 
    /* font-weight: 700;  */
    font-size: 1.2rem; 
    display: flex;
    justify-content: flex-end;
    align-items: center;
    opacity: 1;
    transform: translateX(0.5rem); 
    transition: all 0.3s ease;
}
#engagecros-casestudy .group-hover-card:hover .case-detail-link {
    opacity: 1;
    transform: translateX(0); 
}
#engagecros-casestudy .case-detail-icon {
    width: 1rem;
    height: 1rem; 
    margin-left: 0.25rem; 
    display: inline-flex;
}









/* ==================================== */
/* 成功事例セクション (Case Study Section) */
/* ==================================== */

/* グリッドコンテナ */
#engagecros-casestudy .case-study-grid-fixed {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    padding: 0 1rem;
}

@media (min-width: 768px) {
  #engagecros-casestudy .case-study-grid-fixed {
      grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
      justify-content: center;  /* 余白を左右均等に */
      padding: 0;
  }
}

/* 各カードの幅調整（必要に応じて数値は微調整） */
#engagecros-casestudy .case-card {
    width: 100%;
    max-width: 560px;       /* 1枚の最大幅。デザイン見ながら調整可 */
    justify-self: center;   /* 各カラム内で中央寄せ */
}

/* ==================================== */
/* カードの基本スタイル */
/* ==================================== */



/* ロゴエリアのスタイル (高さ固定 200px) */
#engagecros-casestudy .case-bg-gray {
    background-color: var(--color-gray-50);
}
#engagecros-casestudy .case-logo-area {
    height: 200px; /* 高さ固定 */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: 1.5rem; 
    position: relative;
    overflow: hidden;
}

/* ロゴ画像のスタイル (縮小表示) */
#engagecros-casestudy .case-logo-image {
    width: 100%;
    height: 100%;
    
    /* 縦横比を維持し、領域に合わせて画像を縮小表示 */
    object-fit: contain; 
    
    position: relative; 
    z-index: 2; /* オーバーレイより下に配置 */
}

/* ホバー時のオーバーレイ */
#engagecros-casestudy .case-logo-overlay {
    position: absolute; inset: 0;
    background-color: rgba(0, 0, 0, 0); 
    transition: background-color 0.3s ease;
    z-index: 3; /* 画像より上に配置 */
}
#engagecros-casestudy .group-hover-card:hover .case-logo-overlay {
    background-color: rgba(0, 0, 0, 0.05); 
}








/* ===== スマホ固定ボタン ===== */
.floating-btn .btn {
  display: inline-block;
  text-align: center;
  padding: 10px 40px;
  /* border-radius: 9999px; */
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.floating-btn .btn.red {
  background-color: #e60012;
  color: #fff;
}

.floating-btn .btn.red:hover {
  background-color: #cc0010;
}

.floating-btn {
  display: none; /* PCでは非表示 */
}

/* スマホ時のみ表示・固定 */
@media (max-width: 767px) {
  .floating-btn {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 9999;
  }

  .floating-btn .btn {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }
}



/* 配信エンジンの実力 ----------------------------- */

/* 配信性能事例セクション専用スタイル */
#engagecros2025 .delivery-case-section {
  padding: 5rem 0;
	background: #8a8a8a;
background: linear-gradient(90deg,rgba(138, 138, 138, 1) 0%, rgba(84, 82, 81, 1) 100%);
  position: relative;
  overflow: hidden;
}
/*
#engagecros2025 .delivery-case-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.03)"/></svg>') repeat;
  background-size: 50px 50px;
}
*/
#engagecros2025 .delivery-case-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
#engagecros2025 .delivery-case-header {
  text-align: center;
  margin-bottom: 3rem;
}
#engagecros2025 .delivery-case-header .delivery-section-tag {
  display: inline-block;
  background: var(--color-brand-red);
  color: #fff;
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 1rem;
}
#engagecros2025 .delivery-case-header h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3rem, 3rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}
#engagecros2025 .delivery-case-header .subtitle {
  color: rgba(255,255,255,0.85);
  margin-top: 0.5rem;
}
#engagecros2025 .delivery-case-lead {
  text-align: center;
  color: rgba(255,255,255,0.85);
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto 3rem;
}
#engagecros2025 .delivery-case-lead .highlight-question {
  display: block;
  color: #ffe837;
  font-size: 2.5rem;
  font-weight: 600;
  margin-top: 1rem;
	letter-spacing: 0.25rem;
}
/* ビフォーアフター表示 */
#engagecros2025 .case-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  #engagecros2025 .case-comparison {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
#engagecros2025 .case-card-before, .case-card-after {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
#engagecros2025 .case-card-before {
  border: 3px solid #434c55;
}
#engagecros2025 .case-card-after {
  border: 3px solid var(--color-brand-red);
}
#engagecros2025 .case-card-label {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 20px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
#engagecros2025 .case-card-before .case-card-label {
  background: #434c55;
  color: #fff;
}
#engagecros2025 .case-card-after .case-card-label {
  background: var(--color-brand-red);
  color: #fff;
}
#engagecros2025 .case-card-company {
  color: #666;
  margin-bottom: 0.5rem;
	font-weight: bold;
}
#engagecros2025 .case-card-title {
  color: #333;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
#engagecros2025 .case-card-number {
  font-size: clamp(2.5rem, 8vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.5rem;
}
#engagecros2025 .case-card-before .case-card-number {
  color: #434c55;
}
#engagecros2025 .case-card-after .case-card-number {
  color: var(--color-brand-red);
}
#engagecros2025 .case-card-unit {
  font-size: 1rem;
  color: #666;
}
#engagecros2025 .case-card-desc {
  color: #888;
  margin-top: 1rem;
font-weight: bold;
}
/* 矢印 */
#engagecros2025 .case-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
	margin-bottom: 2rem;
}
#engagecros2025 .case-arrow svg {
  width: 50px;
  height: 50px;
  color: #ffe837;
}
#engagecros2025 .case-arrow-text {
  background: linear-gradient(135deg, #ffe837, #f1c00b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  text-align: center;
	font-size: 1.5rem;
}
@media (max-width: 768px) {
  #engagecros2025 .case-arrow svg {
    transform: rotate(90deg);
  }
}
/* 復活数ハイライト */
#engagecros2025 .recovery-highlight {
  background: linear-gradient(135deg, rgb(59 59 59 / 10%) 0%, rgb(37 37 37 / 10%) 100%);
  border: 3px solid rgb(255 255 255 / 30%);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  text-align: center;
  margin-bottom: 2.5rem;
}
#engagecros2025 .recovery-highlight-text {
  color: #fff;
  margin-bottom: 0.5rem;
}
#engagecros2025 .recovery-highlight-number {
  color: #ffe837;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 800;
}
/* メッセージ */
#engagecros2025 .case-message {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
}
#engagecros2025 .case-message p {
  color: rgba(255,255,255,0.9);
  line-height: 1.9;
  margin-bottom: 1rem;
}
#engagecros2025 .case-message p:last-child {
  margin-bottom: 0;
}
#engagecros2025 .case-message .emphasis {
  color: #ffe837;
  font-weight: 600;
}
/* Engage Cros訴求 */
#engagecros2025 .case-cta-box {
  background: linear-gradient(135deg, #db0025 0%, #b1000d 100%);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}
#engagecros2025 .case-cta-box p {
  color: #fff;
  line-height: 1.8;
  margin-bottom: 1rem;
}
#engagecros2025 .case-cta-box .tagline {
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  margin-top: 1rem;
}
/* 注記 */
#engagecros2025 .case-notes {
  margin-top: 2rem;
  padding-top: 1.5rem;
  /* border-top: 1px solid rgba(255,255,255,0.1); */
}
#engagecros2025 .case-notes p {
  color: rgba(255,255,255,0.5);
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 0.3rem;
}
/* 配信エンジンの実力ここまで ----------------------------- */