@charset "UTF-8";

/* p-migration-sec1 (FV)
----------------------------------------------- */
.p-migration-sec1__img {
    width: min(800px, 100%); /* マッチングより少し幅広に設定 */
    margin-inline: auto;
}

/* p-migration-fv-badges
----------------------------------------------- */
.p-migration-fv-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(24 * var(--width-ratio-1280));
    max-width: 1000px; /* バッジが広がりすぎないように調整 */
    margin-inline: auto;
    margin-top: 3rem;
}

@media screen and (max-width: 768px) {
    .p-migration-fv-badges {
        grid-template-columns: 1fr; /* スマホでは縦並び */
/*        gap: calc(12 * var(--width-ratio-1280));
        padding-inline: calc(20 * var(--width-ratio-1280));
        */
    }
}

.p-migration-fv-badges__item {
    background-color: #fff;
    border: 1px solid #bedbff; /* 画像に合わせた薄い青のボーダー */
    border-radius: calc(16 * var(--width-ratio-1280));
    display: flex;
    align-items: center;
    column-gap: calc(16 * var(--width-ratio-1280));
    padding: calc(16 * var(--width-ratio-1280)) calc(20 * var(--width-ratio-1280));
    box-shadow: 0 4px 10px rgba(190, 219, 255, 0.2); /* 軽いシャドウで浮かせる */
}

@media screen and (max-width: 768px) {
    .p-migration-fv-badges__item {
        padding: calc(12 * var(--width-ratio-1280)) calc(16 * var(--width-ratio-1280));
    }
}

.p-migration-fv-badges__img {
    flex-shrink: 0;
    width: calc(80 * var(--width-ratio-1280)); /* ロゴサイズ調整 */
    aspect-ratio: 1 / 1;
}
.p-migration-fv-badges__img img {
    object-fit: contain;
}

/*
.p-migration-fv-badges__text {
    font-family: var(--font-ja);
    font-size: calc(13 * var(--width-ratio-1280));
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
    text-align: left;
}

*/

/*
@media screen and (max-width: 768px) {
    .p-migration-fv-badges__text {
        font-size: calc(12 * var(--width-ratio-1280));
    }
}
*/

/* p-migration-sec2 (About)
----------------------------------------------- */
.p-migration-sec2__box {
    background-color: #fff;
    border: solid 1px #bedbff;
    border-radius: calc(24 * var(--width-ratio-1280));
    display: grid;
    grid-template-columns: clamp(350px, 400 / 1668 * 100vw, 400px) 1fr;
    align-items: center;
    column-gap: 40px;
    padding: calc(25 * var(--width-ratio-1280)) calc(52 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
    .p-migration-sec2__box {
        grid-template-columns: 1fr;
        row-gap: calc(16 * var(--width-ratio-1280));
        padding: calc(32 * var(--width-ratio-1280)) calc(17 * var(--width-ratio-1280));
    }
}

/* 課題解決リスト (matching-sec2の流用) */
.p-migration-sec2__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(24 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
    .p-migration-sec2__list {
        grid-template-columns: 1fr;
    }
}

.p-migration-sec2__item {
    background-color: #fff;
    border: solid 1px #bedbff;
    border-radius: calc(24 * var(--width-ratio-1280));
    padding: calc(32 * var(--width-ratio-1280)) calc(24 * var(--width-ratio-1280));
}

/* p-migration-sec4 (特徴・機能)
----------------------------------------------- */
.p-migration-sec4__tab {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: calc(20 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
    .p-migration-sec4__tab {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* p-migration-sec6 (4つのステップ)
----------------------------------------------- */
.p-migration-sec6__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4ステップなので4カラム */
    gap: calc(20 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
    .p-migration-sec6__list {
        grid-template-columns: 1fr;
    }
}

.p-migration-sec6__item {
    background-color: #fff;
    border-radius: calc(24 * var(--width-ratio-1280));
    padding: calc(24 * var(--width-ratio-1280));
    position: relative;
    border: 1px solid #e2e8f0;
}
/* ステップ番号用 */
.p-migration-sec6__item::before {
    content: "STEP " counter(step-counter);
    counter-increment: step-counter;
    display: block;
    color: #0540f2;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
}

/* p-migration-risk
----------------------------------------------- */
/* 外枠のグレーボックス（Matchingのsec2__boxをアレンジ） */
.p-migration-risk__box {
    background-color: #f8fafc; /* 少し青みのあるグレー */
    border: 1px solid #e2e8f0;
    border-radius: calc(24 * var(--width-ratio-1280));
    padding: calc(40 * var(--width-ratio-1280)) calc(50 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
    .p-migration-risk__box {
        padding: calc(30 * var(--width-ratio-1280)) calc(20 * var(--width-ratio-1280));
    }
}

/* 3カラムリスト */
.p-migration-risk__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(20 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
    .p-migration-risk__list {
        grid-template-columns: 1fr;
    }
}

/* 個別カード（白背景） */
.p-migration-risk__item {
    background-color: #fff;
    border-radius: calc(16 * var(--width-ratio-1280));
    padding: calc(24 * var(--width-ratio-1280)) calc(16 * var(--width-ratio-1280));
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.p-migration-risk__item--ttl {
    font-size: calc(16 * var(--width-ratio-1280));
    margin-bottom: calc(12 * var(--width-ratio-1280));
    display: block;
}

/* 結論部分（下部の白帯） */
.p-migration-risk__conclusion {
    position: relative;
    padding-top: calc(60 * var(--width-ratio-1280)); /* 矢印アイコン用の余白 */
    margin-top: calc(20 * var(--width-ratio-1280));
}

/* 中央の矢印アイコン（擬似要素） */
.p-migration-risk__conclusion::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(40 * var(--width-ratio-1280));
    height: calc(40 * var(--width-ratio-1280));
    background: url("/business/migration/arrow_bottom.webp") no-repeat center center/contain; /* 既存の矢印パーツを想定 */
}

.p-migration-risk__conclusion--text {
    background-color: #fff;
    padding: calc(15 * var(--width-ratio-1280)) 0;
    width: 100%;
}

/* カラム内画像の設定（Matchingのitem--imgのルールを流用） */
.p-migration-risk__item--img {
    width: 100%;
    max-width: calc(180 * var(--width-ratio-1280)); /* 画像の最大幅を制限 */
    aspect-ratio: 4 / 3; /* 必要に応じて比率を調整 */
    margin-inline: auto; /* 中央寄せ */
    margin-bottom: calc(16 * var(--width-ratio-1280)); /* 下のテキストとの余白 */
}

/* モバイル表示時の調整 */
@media screen and (max-width: 768px) {
    .p-migration-risk__item--img {
        max-width: calc(150 * var(--width-ratio-1280));
        margin-bottom: calc(12 * var(--width-ratio-1280));
    }
}

/* 念のため、item全体を flex/grid で中央寄せにする設定を追加 */
.p-migration-risk__item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 全要素を中央寄せ */
    text-align: center;  /* テキストも中央寄せ */
    background-color: #fff;
    border-radius: calc(16 * var(--width-ratio-1280));
    padding: calc(24 * var(--width-ratio-1280)) calc(16 * var(--width-ratio-1280));
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* タイトルと画像の間にも少し余白を作る場合 */
.p-migration-risk__item--ttl {
    margin-bottom: calc(16 * var(--width-ratio-1280));
}

/* p-migration-features
----------------------------------------------- */
.p-migration-features__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2カラム */
    column-gap: calc(60 * var(--width-ratio-1280)); /* 広めの余白 */
    row-gap: calc(40 * var(--width-ratio-1280));
    max-width: 1000px; /* 横に広がりすぎないよう制限 */
    margin-inline: auto;
}

@media screen and (max-width: 768px) {
    .p-migration-features__list {
        grid-template-columns: 1fr; /* スマホは1カラム */
        gap: calc(32 * var(--width-ratio-1280));
    }
}

.p-migration-features__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-migration-features__item--img {
    width: 100%;
    max-width: calc(350 * var(--width-ratio-1280));
    aspect-ratio: 5 / 3; /* 画像の比率に合わせて調整 */
    margin-bottom: calc(20 * var(--width-ratio-1280));
}

.p-migration-features__item--img img {
    object-fit: contain; /* イラストが切れないように */
}

.p-migration-features__item--ttl {
    font-size: calc(20 * var(--width-ratio-1280));
    font-weight: bold;
    margin-bottom: calc(16 * var(--width-ratio-1280));
}

@media screen and (max-width: 768px) {
    .p-migration-features__item--ttl {
        font-size: calc(18 * var(--width-ratio-1280));
    }
}

/* p-migration-process
----------------------------------------------- */
.p-migration-process__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: calc(30 * var(--width-ratio-1280));
    row-gap: calc(20 * var(--width-ratio-1280));
    align-items: stretch;
}

@media screen and (max-width: 768px) {
    .p-migration-process__list {
        grid-template-columns: 1fr;
    }
}

.p-migration-process__item {
    position: relative;
    background-color: #fff;
    border-radius: calc(16 * var(--width-ratio-1280));
    overflow: hidden;
    box-shadow: var(--shadow-default);
    display: flex;
    flex-direction: column;
}

/* カード間の右矢印（PCのみ） */
@media screen and (min-width: 769px) {
    .p-migration-process__item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: calc(-20 * var(--width-ratio-1280));
        transform: translateY(-50%);
        width: calc(12 * var(--width-ratio-1280));
        height: calc(24 * var(--width-ratio-1280));
        background: url("/business/migration/arrow_right.webp") no-repeat center center/contain;
        z-index: 2;
    }
}

/* カード見出し（既存の青色を流用） */
.p-migration-process__head {
    background-color: #85b1f0; /* Matching xCのサブカラー寄り、または var(--color-blue) */
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: calc(12 * var(--width-ratio-1280)) 0;
    font-size: calc(18 * var(--width-ratio-1280));
}

.p-migration-process__body {
    padding: calc(24 * var(--width-ratio-1280)) calc(16 * var(--width-ratio-1280));
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.p-migration-process__img {
    width: calc(80 * var(--width-ratio-1280));
    margin-bottom: calc(16 * var(--width-ratio-1280));
}

.p-migration-process__text {
    font-size: calc(14 * var(--width-ratio-1280));
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
}

/* 結論部分 */
.p-migration-process__conclusion {
    text-align: center;
}

.p-migration-process__conclusion--arrow {
    width: calc(60 * var(--width-ratio-1280));
    margin: 0 auto calc(24 * var(--width-ratio-1280));
}

/* p-migration-support
----------------------------------------------- */
.p-migration-support__box {
    border: 1px solid #bedbff;
    border-radius: calc(24 * var(--width-ratio-1280));
    padding: calc(60 * var(--width-ratio-1280)) calc(40 * var(--width-ratio-1280));
}

.p-migration-support__list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(10 * var(--width-ratio-1280));
    margin-bottom: calc(40 * var(--width-ratio-1280));
}

/* PC時の矢印（Matchingのお作法流用） */
@media screen and (min-width: 769px) {
    .p-migration-support__item:not(:last-child) {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* ステップ間の薄いグレー矢印 */
    .p-migration-support__item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 60%; /* 画像の高さあたり */
        right: calc(-10 * var(--width-ratio-1280));
        width: calc(12 * var(--width-ratio-1280));
        height: calc(12 * var(--width-ratio-1280));
        border-top: 2px solid #e2e8f0;
        border-right: 2px solid #e2e8f0;
        transform: translateY(-50%) rotate(45deg);
    }
}

.p-migration-support__item--ttl {
    display: block;
    text-align: center;
    font-size: calc(14 * var(--width-ratio-1280));
    color: #90a1b9;
    font-weight: bold;
    margin-bottom: calc(16 * var(--width-ratio-1280));
    height: 3em; /* タイトルの高さを揃える */
}

.p-migration-support__item--img {
    background-color: #f1f1f1; /* 画像の背景グレー */
    border-radius: calc(12 * var(--width-ratio-1280));
    overflow: hidden;
    aspect-ratio: 1;
    width: 100%;
    max-width: calc(160 * var(--width-ratio-1280));
    margin-inline: auto;
}

/* 下部ラインのデザイン */
.p-migration-support__conclusion {
    position: relative;
    text-align: center;
    padding-top: calc(20 * var(--width-ratio-1280));
}
.p-migration-support__conclusion::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, #2891ff, transparent);
    z-index: 1;
}
.p-migration-support__conclusion--text {
    position: relative;
    display: inline-block;
    background-color: #fff; /* ラインを隠すために背景白 */
    padding: 0 2em;
    z-index: 2;
    font-size: calc(18 * var(--width-ratio-1280));
}

/* 【重要】モバイル対応：5つ並びは厳しいので2カラムにする */
@media screen and (max-width: 768px) {
    .p-migration-support__box {
        padding: calc(30 * var(--width-ratio-1280)) calc(16 * var(--width-ratio-1280));
    }
    .p-migration-support__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(20 * var(--width-ratio-1280));
    }
    .p-migration-support__item--ttl {
        height: auto;
        margin-bottom: calc(8 * var(--width-ratio-1280));
    }
    .p-migration-support__conclusion--text {
        font-size: calc(15 * var(--width-ratio-1280));
        padding: 0 1em;
    }
}

/* p-migration-support
----------------------------------------------- */

/* ...中略（boxやlistの設定はそのまま）... */

@media screen and (min-width: 769px) {
    .p-migration-support__item {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 矢印の設定を修正 */
    .p-migration-support__item:not(:last-child)::after {
        content: "";
        position: absolute;
        /* 画像エリアの中央付近に来るように調整 */
        /* タイトル(3em分) + 画像の中央(160px/2) くらいの場所 */
        top: calc(3em + (80 * var(--width-ratio-1280))); 
        /* アイテムの右端ぴったりに配置 */
        right: calc(-5 * var(--width-ratio-1280)); 
        
        width: calc(10 * var(--width-ratio-1280));
        height: calc(10 * var(--width-ratio-1280));
        border-top: 2px solid #e2e8f0;
        border-right: 2px solid #e2e8f0;
        transform: translateY(-50%) rotate(45deg);
        z-index: 2;
    }
}

/* もし一番右の要素にうっすら矢印が見えてしまっている場合は以下を追加 */
.p-migration-support__item:last-child::after {
    display: none !important;
}

/* p-migration-methods
----------------------------------------------- */
.p-migration-methods__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(32 * var(--width-ratio-1280));
}

@media screen and (max-width: 768px) {
	.p-migration-methods__list {
		grid-template-columns: 1fr;
		gap: calc(24 * var(--width-ratio-1280));
	}
}

.p-migration-methods__item {
	background-color: #fff;
	border: 1px solid #bedbff; /* Matching XC共通の薄い青ボーダー */
	border-radius: calc(24 * var(--width-ratio-1280));
	padding: calc(40 * var(--width-ratio-1280)) calc(32 * var(--width-ratio-1280));
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* カード内のタイトルエリア */
.p-migration-methods__item--head {
	margin-bottom: calc(24 * var(--width-ratio-1280));
}

.p-migration-methods__item--en {
	font-family: var(--font-en);
	font-size: calc(28 * var(--width-ratio-1280));
	font-weight: 800;
	line-height: 1.2;
}

.p-migration-methods__item--ja {
	font-size: calc(14 * var(--width-ratio-1280));
	color: var(--color-gray);
	font-weight: bold;
	display: block;
	margin-top: 4px;
}

/* 画像エリア */
.p-migration-methods__item--img {
	width: 100%;
	aspect-ratio: 3/2;
	margin-bottom: calc(32 * var(--width-ratio-1280));
}

.p-migration-methods__item--img img {
	object-fit: contain;
}

/* 下部説明文 */
.p-migration-methods__item .c-text--small {
	text-align: left;
	line-height: 1.8;
}

@media screen and (max-width: 768px) {
	.p-migration-methods__item {
		padding: calc(32 * var(--width-ratio-1280)) calc(24 * var(--width-ratio-1280));
	}
	.p-migration-methods__item--en {
		font-size: calc(24 * var(--width-ratio-1280));
	}
}

/* p-migration-security
----------------------------------------------- */
.p-migration-security__wrapper {
	display: grid;
	grid-template-columns: 1fr 1.2fr; /* 左右の比率を調整 */
	column-gap: calc(60 * var(--width-ratio-1280));
	align-items: center;
}

@media screen and (max-width: 768px) {
	.p-migration-security__wrapper {
		grid-template-columns: 1fr;
		row-gap: calc(40 * var(--width-ratio-1280));
	}
}

.p-migration-security__list {
	display: flex;
	flex-direction: column;
	row-gap: calc(16 * var(--width-ratio-1280));
}

.p-migration-security__item {
	background-color: #f1f9fe; /* Matching共通の薄い水色背景 */
	border: 1px solid #bedbff;
	border-radius: calc(12 * var(--width-ratio-1280));
	padding: calc(24 * var(--width-ratio-1280));
	display: flex;
	column-gap: calc(20 * var(--width-ratio-1280));
	align-items: flex-start;
}

.p-migration-security__item--img {
	flex-shrink: 0;
	width: calc(64 * var(--width-ratio-1280));
	background-color: #fff; /* アイコンの背景を白に */
	border-radius: 4px;
	padding: 8px;
}

.p-migration-security__item--ttl {
	color: var(--color-main);
	font-weight: bold;
	font-size: calc(16 * var(--width-ratio-1280));
	margin-bottom: 4px;
	line-height: 1.4;
}

.p-migration-security__item .c-text--small {
	line-height: 1.6;
}

@media screen and (max-width: 768px) {
	.p-migration-security__item {
		padding: calc(20 * var(--width-ratio-1280));
		column-gap: calc(15 * var(--width-ratio-1280));
	}
	.p-migration-security__item--img {
		width: calc(48 * var(--width-ratio-1280));
	}
	.p-migration-security__item--ttl {
		font-size: calc(14 * var(--width-ratio-1280));
	}
}

/* p-migration-case
----------------------------------------------- */
.p-migration-case__list {
	display: flex;
	flex-direction: column;
	row-gap: calc(24 * var(--width-ratio-1280));
}

.p-migration-case__item {
	background-color: #fff;
	border: 1px solid #bedbff;
	border-radius: calc(16 * var(--width-ratio-1280));
	padding: calc(32 * var(--width-ratio-1280));
	display: grid;
	grid-template-columns: calc(200 * var(--width-ratio-1280)) 1fr;
	column-gap: calc(40 * var(--width-ratio-1280));
	align-items: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.p-migration-case__item:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-default);
}

.p-migration-case__item--img {
	width: 100%;
	aspect-ratio: 3/2;
	background-color: #f8fafc;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.p-migration-case__item--img img {
	object-fit: contain;
	max-height: 100%;
}

.p-migration-case__item--label {
	display: inline-block;
	background-color: #f1f9fe;
	color: var(--color-blue);
	font-size: calc(12 * var(--width-ratio-1280));
	font-weight: bold;
	padding: 4px 12px;
	border-radius: 4px;
	margin-bottom: calc(12 * var(--width-ratio-1280));
}

.p-migration-case__item--ttl {
	font-size: calc(20 * var(--width-ratio-1280));
	color: var(--color-main);
	font-weight: bold;
	margin-bottom: calc(12 * var(--width-ratio-1280));
	line-height: 1.4;
}

@media screen and (max-width: 768px) {
	.p-migration-case__item {
		grid-template-columns: 1fr;
		row-gap: calc(20 * var(--width-ratio-1280));
		padding: calc(24 * var(--width-ratio-1280));
	}
	.p-migration-case__item--img {
		max-width: 200px;
		margin-inline: auto;
	}
	.p-migration-case__item--ttl {
		font-size: calc(18 * var(--width-ratio-1280));
	}
}

@media screen and (max-width: 768px) {
    /* リスト自体を grid にし、行の最小高さを揃える設定を追加 */
    .p-migration-support__list {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-auto-rows: auto; 
        gap: calc(24 * var(--width-ratio-1280)) calc(15 * var(--width-ratio-1280));
    }

    .p-migration-support__item {
        /* 各アイテムを grid 内で縦並びにする */
        display: contents; 
    }

    /* もし HTML 構造が <li><span>タイトル</span><div>画像</div></li> の場合、
       一番手っ取り早いのは見出しに最小高さを設定することです 
    */
    .p-migration-support__item--ttl {
        display: block;
        text-align: left;
        height: auto;
        font-size: calc(14 * var(--width-ratio-1280));
        line-height: 1.4;
        padding-left: 2rem;
    }
}

/* p-migration-case-docs
----------------------------------------------- */
/* 上段2カラム */
.p-migration-case-docs__list2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(32 * var(--width-ratio-1280));
}

/* 下段3カラム */
.p-migration-case-docs__list3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(24 * var(--width-ratio-1280));
}

@media screen and (max-width: 768px) {
	.p-migration-case-docs__list2,
	.p-migration-case-docs__list3 {
		grid-template-columns: 1fr;
		gap: calc(24 * var(--width-ratio-1280));
	}
}

/* 共通カードスタイル */
.p-migration-case-docs__item {
	background-color: #fff;
	border-radius: calc(16 * var(--width-ratio-1280));
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.p-migration-case-docs__item--img {
	aspect-ratio: 16 / 9;
}
.p-migration-case-docs__item--img img {
	object-fit: cover;
}

/* 下段用の小さいイラスト */
.p-migration-case-docs__item--img-small {
	width: calc(150 * var(--width-ratio-1280));
	margin: calc(16 * var(--width-ratio-1280)) auto;
}

.p-migration-case-docs__item--body {
	padding: calc(24 * var(--width-ratio-1280));
	flex-grow: 1;
}

.p-migration-case-docs__item--client {
	font-size: calc(12 * var(--width-ratio-1280));
	font-weight: bold;
	color: var(--color-gray);
	margin-bottom: 4px;
}

.p-migration-case-docs__item--ttl {
	font-size: calc(18 * var(--width-ratio-1280));
	font-weight: bold;
	margin-bottom: calc(12 * var(--width-ratio-1280));
	line-height: 1.4;
	/* スマホ時のガタつき防止 */
	min-height: calc(2.8em * var(--width-ratio-1280));
}

@media screen and (max-width: 768px) {
	.p-migration-case-docs__item--body {
		padding: calc(20 * var(--width-ratio-1280));
	}
	.p-migration-case-docs__item--ttl {
		font-size: calc(16 * var(--width-ratio-1280));
		min-height: auto; /* スマホ1カラム時は高さ固定不要 */
	}
}