@charset "UTF-8";

/* ====================================================
   CodeReverse AI 固有スタイル (完全整形版)
   ==================================================== */

/* p-codereverse-fv */
.p-codereverse-fv__img {
    width: min(800px, 100%);
    margin-inline: auto;
}

.p-codereverse-fv-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(24 * var(--width-ratio-1280));
    max-width: 1000px;
    margin: calc(40 * var(--width-ratio-1280)) auto 0;
}

.p-codereverse-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(12 * var(--width-ratio-1280)) calc(16 * var(--width-ratio-1280));
    box-shadow: 0 4px 10px rgba(190, 219, 255, 0.2);
}

.p-codereverse-fv-badges__img {
    flex-shrink: 0;
    width: calc(80 * var(--width-ratio-1280));
    aspect-ratio: 1;
}

/* p-codereverse-intro */
.p-codereverse-intro__wrapper {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    column-gap: calc(60 * var(--width-ratio-1280));
    align-items: center;
}

/* p-codereverse-box (4カラム図解) */
.p-codereverse-box__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(20 * var(--width-ratio-1280));
    margin-top: calc(30 * var(--width-ratio-1280));
}

.p-codereverse-box__item--ttl {
    font-size: calc(16 * var(--width-ratio-1280));
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: calc(10 * var(--width-ratio-1280));
    min-height: calc(3em * var(--width-ratio-1280)); /* 高さ揃え */
}

/* p-codereverse-trouble (トラブルカード) */
.p-codereverse-trouble__wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    column-gap: calc(60 * var(--width-ratio-1280));
    align-items: center;
}

@media screen and (max-width: 768px) {
.p-codereverse-trouble__wrapper {
    .item-1 { order: 2; }
    .item-2 { order: 1; }    
}    
}

.p-codereverse-trouble__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(15 * var(--width-ratio-1280));
}

.p-codereverse-trouble__card {
    background: #fff;
    padding: calc(30 * var(--width-ratio-1280));
    border-left: 6px solid #8cb5e1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* p-codereverse-compare (比較表) */
.p-codereverse-compare__box {
    background: linear-gradient(to right, #e2f0f9 50%, #FFFFFF 50%);
    border-radius: calc(20 * var(--width-ratio-1280));
    padding: calc(60 * var(--width-ratio-1280)) calc(40 * var(--width-ratio-1280));
}

.p-codereverse-compare__row {
    display: grid;
    grid-template-columns: 1fr calc(120 * var(--width-ratio-1280)) 1fr;
    align-items: center;
    margin-bottom: calc(40 * var(--width-ratio-1280));
}

.p-codereverse-compare__circle {
    width: calc(90 * var(--width-ratio-1280));
    height: calc(90 * var(--width-ratio-1280));
    background: #ff5e5e; color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; margin-inline: auto;
}

/* ====================================================
   レスポンシブ
   ==================================================== */
@media screen and (max-width: 768px) {
    .p-codereverse-fv-badges, .p-codereverse-intro__wrapper,
    .p-codereverse-box__list, .p-codereverse-trouble__wrapper,
    .p-codereverse-trouble__grid {
        grid-template-columns: 1fr;
    }

    .p-codereverse-compare__box {
        background: #f1f8ff;
    }

    .p-codereverse-compare__row {
        grid-template-columns: 1fr;
        background: #fff;
        padding: 1.5rem;
        border-radius: 1rem;
    }
}

/* p-codereverse-types
----------------------------------------------- */
.p-codereverse-types__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(20 * var(--width-ratio-1280));
    margin-top: calc(40 * var(--width-ratio-1280));
}

.p-codereverse-types__item {
    display: flex;
    align-items: center; /* アイコンとテキストを垂直中央揃え */
    column-gap: calc(15 * var(--width-ratio-1280));
    flex: 1;
}

.p-codereverse-types__item--icon {
    flex-shrink: 0;
    width: calc(60 * var(--width-ratio-1280)); /* アイコンの幅 */
}

.p-codereverse-types__item--icon img {
    width: 100%;
    height: auto;
}

.p-codereverse-types__item--content {
    text-align: left;
}

.p-codereverse-types__item--sub {
    font-size: calc(12 * var(--width-ratio-1280));
    color: var(--color-text);
    margin-bottom: 2px;
    white-space: nowrap; /* PCでは1行に収める */
}

.p-codereverse-types__item--ttl {
    font-size: calc(18 * var(--width-ratio-1280));
    font-weight: bold;
    white-space: nowrap;
}

/* ====================================================
   レスポンシブ (スマホ)
   ==================================================== */
@media screen and (max-width: 1024px) {
    /* 画面が狭くなってきたら2カラムに */
    .p-codereverse-types__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(30 * var(--width-ratio-1280)) calc(20 * var(--width-ratio-1280));
    }
    .p-codereverse-types__item {
        justify-content: center; /* 2カラム時は中央に寄せる */
    }
}

@media screen and (max-width: 560px) {
    /* もっと狭いスマホでは1カラム */
    .p-codereverse-types__list {
        grid-template-columns: 1fr;
    }
    .p-codereverse-types__item {
        justify-content: flex-start;
        padding-left: calc(20 * var(--width-ratio-1280));
        background: #eff6ff;
        padding: 0.75rem;
    }
    .p-codereverse-types__item--sub,
    .p-codereverse-types__item--ttl {
        white-space: normal; /* 折り返しを許可 */
    }
}

/* p-codereverse-compare-table
----------------------------------------------- */
.p-codereverse-compare-table__wrapper {
    background-color: #fff;   
/*    border-radius: calc(24 * var(--width-ratio-1280));    */
    overflow: hidden;
    border: 1px solid #bedbff;
}

.p-codereverse-compare-table__row {
    display: grid;
    grid-template-columns: 0.8fr 1.1fr 1.1fr; /* 項目の幅比率 */
    border-bottom: 1px solid #bedbff;
    padding: 1rem 0.5rem;
}

.p-codereverse-compare-table__row:last-child {
    border-bottom: none;
}

/* ヘッダー行 */
.p-codereverse-compare-table__row--head {
/*    background-color: #f8fafc;    */
    font-weight: bold;
    color: var(--color-main);
    text-align: center;
}

.p-codereverse-compare-table__cell {
    padding: calc(24 * var(--width-ratio-1280)) calc(20 * var(--width-ratio-1280));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.6;
    font-size: calc(15 * var(--width-ratio-1280));
}

/* 左端のラベル列 */
.p-codereverse-compare-table__cell--label {
/*    background-color: #f1f9fe;    */
    font-weight: bold;
    color: var(--color-blue);
/*    border-right: 1px solid #bedbff;  */
}

/* サービス列の強調（背景を薄い青に） */
.u-bg-blue-light {
    background-color: #eff6ff !important;
}

.p-codereverse-compare-table__cell:not(:last-child) {
/*    border-right: 1px solid #bedbff;  */
}

/* ====================================================
   レスポンシブ (スマホ)
   ==================================================== */
@media screen and (max-width: 768px) {
    .p-codereverse-compare-table__inner {
        /* スマホで横幅が足りない場合は横スクロールさせる（お作法） */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .p-codereverse-compare-table__row {
        /* 最低幅を確保して、表としての体裁を保つ */
        min-width: 600px; 
    }

    .p-codereverse-compare-table__cell {
        font-size: calc(14 * var(--width-ratio-1280));
        padding: calc(16 * var(--width-ratio-1280)) calc(10 * var(--width-ratio-1280));
    }
}

/* 左上の空セル専用スタイル */
.p-codereverse-compare-table__cell--empty {
    background-color: transparent !important; /* 背景を消す */
    border-top: none !important;    /* 外枠の線を消す */
    border-left: none !important;   /* 外枠の線を消す */
}

/* ついでに一番外側のラッパーのボーダー設定が干渉する場合は微調整 */
.p-codereverse-compare-table__wrapper {
    border: none; /* 外枠を一度消して、rowごとに線を引く管理にすると綺麗です */
}

/* p-codereverse-docs
----------------------------------------------- */
.p-codereverse-docs__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(30 * var(--width-ratio-1280));
}

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

.p-codereverse-docs__item {
    background-color: #fff;
    border-radius: calc(16 * var(--width-ratio-1280));
    display: flex;
    flex-direction: column;
}

.p-codereverse-docs__head {
    padding: calc(40 * var(--width-ratio-1280)) calc(30 * var(--width-ratio-1280)) calc(24 * var(--width-ratio-1280));
    text-align: center;
    border-bottom: 1px solid #eee; /* 上下の区切り線 */
}

.p-codereverse-docs__icon {
    width: calc(60 * var(--width-ratio-1280));
    margin: 0 auto calc(20 * var(--width-ratio-1280));
}

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

.p-codereverse-docs__body {
    padding: calc(30 * var(--width-ratio-1280));
    flex-grow: 1; /* 内容が少なくてもカードの高さを揃える */
}

.p-codereverse-docs__dl dt {
    font-size: calc(15 * var(--width-ratio-1280));
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 4px;
}

.p-codereverse-docs__dl dd {
    font-size: calc(13 * var(--width-ratio-1280));
    color: var(--color-gray);
    margin-bottom: calc(16 * var(--width-ratio-1280));
}

.p-codereverse-docs__dl dd:last-child {
    margin-bottom: 0;
}

/* スマホ時の調整 */
@media screen and (max-width: 768px) {
    .p-codereverse-docs__head {
        padding: calc(32 * var(--width-ratio-1280)) calc(20 * var(--width-ratio-1280));
    }
    .p-codereverse-docs__body {
        padding: calc(24 * var(--width-ratio-1280));
    }
}

/* p-codereverse-security
----------------------------------------------- */
.p-codereverse-security__wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    column-gap: calc(60 * var(--width-ratio-1280));
    align-items: center; /* 2段なので中央揃えにすると綺麗です */
}

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

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

.p-codereverse-security__item {
    background-color: #f1f9fe;
    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-codereverse-security__item--img {
    flex-shrink: 0;
    width: calc(80 * var(--width-ratio-1280)); /* 画像に合わせて少し調整 */
    background-color: #fff;
    padding: calc(10 * var(--width-ratio-1280));
}

.p-codereverse-security__item--ttl {
    color: var(--color-main);
    font-weight: bold;
    font-size: calc(18 * var(--width-ratio-1280));
    margin-bottom: 4px;
}

/* スマホ表示 */
@media screen and (max-width: 768px) {
    .p-codereverse-security__item {
        padding: calc(20 * var(--width-ratio-1280));
    }
    .p-codereverse-security__item--img {
        width: calc(60 * var(--width-ratio-1280));
    }
    .p-codereverse-security__item--ttl {
        font-size: calc(16 * var(--width-ratio-1280));
    }
}

/* p-codereverse-next
----------------------------------------------- */
.p-codereverse-next__wrapper {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: calc(60 * var(--width-ratio-1280));
    align-items: center;
}

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

/* バナー部分の装飾 */
.p-codereverse-next__banner {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #bedbff;
    border-radius: calc(12 * var(--width-ratio-1280));
    padding: calc(20 * var(--width-ratio-1280)) calc(30 * var(--width-ratio-1280));
    column-gap: calc(24 * var(--width-ratio-1280));
    max-width: calc(540 * var(--width-ratio-1280));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (any-hover: hover) {
    .p-codereverse-next__banner:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(190, 219, 255, 0.4);
    }
}

.p-codereverse-next__banner--logo {
    width: calc(180 * var(--width-ratio-1280));
    flex-shrink: 0;
}

.p-codereverse-next__banner--text {
    font-size: calc(18 * var(--width-ratio-1280));
    line-height: 1.4;
}

/* 右側画像 */
.p-codereverse-next__img {
    background-color: #fff;
    border-radius: calc(24 * var(--width-ratio-1280));
    padding: calc(20 * var(--width-ratio-1280));
}

@media screen and (max-width: 768px) {
    .p-codereverse-next__banner {
        padding: calc(16 * var(--width-ratio-1280));
        column-gap: calc(16 * var(--width-ratio-1280));
    }
    .p-codereverse-next__banner--logo {
        width: calc(140 * var(--width-ratio-1280));
    }
    .p-codereverse-next__banner--text {
        font-size: calc(14 * var(--width-ratio-1280));
    }
}

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

.p-codereverse-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-codereverse-case-docs__list2,
	.p-codereverse-case-docs__list3 {
		grid-template-columns: 1fr;
		gap: calc(24 * var(--width-ratio-1280));
	}
}

.p-codereverse-case-docs__item {
	background-color: #fff;
	border-radius: calc(16 * var(--width-ratio-1280));
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

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

.p-codereverse-case-docs__item--img-small {
	width: calc(150 * var(--width-ratio-1280));
	margin: calc(16 * var(--width-ratio-1280)) auto;
}

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

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

.p-codereverse-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;
	/* PC時の高さ揃え */
	min-height: calc(2.8em * var(--width-ratio-1280));
}

@media screen and (max-width: 768px) {
	.p-codereverse-case-docs__item--ttl {
		font-size: calc(16 * var(--width-ratio-1280));
		min-height: auto;
	}
}