/* ============================
   リライブシャツコア - General Page
   /products/general/
============================ */

#page-general.page-top-under {
    padding-top: 0;
    padding-bottom: clamp(3.75rem, 2.857rem + 3.66vw, 8.125rem);
}

/* ============================
   共通セクションスタイル
============================ */

.general-section-label {
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.843rem + 0.131vw, 1rem);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    margin: 0;
}

.general-section-title {
    font-family: "Noto Sans JP";
    font-size: clamp(1.375rem, 1.216rem + 0.654vw, 2rem);
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: clamp(0.1375rem, 0.122rem + 0.065vw, 0.2rem);
    margin: clamp(1rem, 0.873rem + 0.523vw, 1.5rem) 0 0 0;
}

.general-section-title--red {
    color: #BA2A20;
}

.general-section-desc {
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.843rem + 0.131vw, 1rem);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: clamp(0.05rem, 0.044rem + 0.026vw, 0.05rem);
    margin: clamp(1.5rem, 1.309rem + 0.784vw, 2.25rem) 0 0 0;
}

/* ============================
   Hero — medicalページのFV構成に準拠
============================ */

/* general ページ専用: パンくずを画像内でabsolute配置 */
.general-hero-image .breadcrumb {
    position: absolute;
    padding: 0 clamp(5rem, 3.725rem + 5.23vw, 10rem);
    top: clamp(5.625rem, 4.191rem + 5.88vw, 11.25rem);
    left: 0;
    right: 0;
    z-index: 10;
}

/* ヒーロー画像エリア */
.general-hero-image {
    width: 100%;
    height: clamp(25.5rem, 21.852rem + 14.967vw, 39.8125rem);
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 0;
}

.general-hero-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* PC(769px以上): Figma のマスク領域をクロップした hero-person-fv.png(1920x637) を使用 */
.general-hero-image .pc {
    object-position: 100% center;
}

.general-hero-image .sp {
    display: none;
}

/* モバイル(768px以下): オリジナル画像を cover で viewport 全体を覆う。
   女性を右寄りに配置してテキストとの重なりを最小化
   (女性の白いTシャツ部分が viewport の一部と重なるが、テキストの可読性は保たれる) */
@media (max-width: 768px) {
    .general-hero-image .pc {
        display: none;
    }
    .general-hero-image .sp {
        display: block;
        object-fit: cover;
        /* 390px: 15% / 768px: 20% (値を下げると女性が右寄りに表示される) */
        object-position: clamp(15%, 10.83% + 1.059vw, 20%) center;
    }
}

/* オーバーレイコンテンツ */
.general-overlay {
    position: absolute;
    top: clamp(11.4375rem, 9.446rem + 8.17vw, 19.25rem);
    left: clamp(2.5rem, -1.148rem + 14.967vw, 16.8125rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 10;
}

/* タイトル行: 日本語タイトル + バッジを横並び */
.general-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(0.5rem, 0.346rem + 0.654vw, 1.125rem);
}

/* 日本語タイトル */
.general-title-ja {
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 1.059rem + 0.784vw, 2rem);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: clamp(0.0625rem, 0.0275rem + 0.144vw, 0.2rem);
    margin: 0 0 0 -6px;
    white-space: nowrap;
}

/* 一般医療機器バッジ (padding/font-size/line-height はピル(着る医療機器) と揃える) */
.general-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.375rem, 0.311rem + 0.261vw, 0.625rem) clamp(1rem, 0.809rem + 0.784vw, 1.75rem);
    background: #FFECE8;
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(0.75rem, 0.623rem + 0.523vw, 1.25rem);
    font-weight: 500;
    line-height: clamp(1.25rem, 1.059rem + 0.784vw, 2rem);
    letter-spacing: clamp(0.0875rem, 0.062rem + 0.105vw, 0.1625rem);
    border-radius: 600px;
    white-space: nowrap;
}

/* 英語タイトル */
.general-title-en {
    color: #858585;
    font-family: Raleway, sans-serif !important;
    font-size: clamp(0.875rem, 0.716rem + 0.654vw, 1.5rem);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: clamp(0.0875rem, 0.072rem + 0.065vw, 0.15rem);
    margin: clamp(0.5rem, 0.325rem + 0.719vw, 1.1875rem) 0 0 0;
}

@media (max-width: 390px) {
    .general-title-en {
        font-weight: 400;
    }
}

/* 赤い線 */
.general-line {
    display: block;
    width: clamp(4.9375rem, 4.603rem + 1.373vw, 6.25rem);
    height: clamp(0.25rem, 0.218rem + 0.131vw, 0.375rem);
    background-color: #BA2A20;
    margin: clamp(1rem, 0.761rem + 0.98vw, 1.9375rem) 0 0 0;
}

/* 着る医療機器 ピル(白い角丸ボックス) */
.general-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    width: auto;
    height: auto;
    padding: clamp(0.375rem, 0.311rem + 0.261vw, 0.625rem) clamp(1rem, 0.809rem + 0.784vw, 1.75rem);
    border-radius: clamp(1rem, 0.745rem + 1.046vw, 2rem);
    background: #FFF;
    margin: 0;
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(0.75rem, 0.623rem + 0.523vw, 1.25rem);
    font-style: normal;
    font-weight: 400;
    line-height: clamp(1.25rem, 1.059rem + 0.784vw, 2rem);
    letter-spacing: clamp(0.0875rem, 0.062rem + 0.105vw, 0.1625rem);
}

/* ピル+バッジ(モバイル) を横並びにするコンテナ。元の pill margin-top をここに引っ越し */
.general-pill-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(0.5rem, 0.346rem + 0.654vw, 1.125rem);
    margin: clamp(1.3125rem, 0.866rem + 1.83vw, 3.0625rem) 0 0 0;
}

/* バッジ表示制御: デフォルトは PC 配置(タイトル横)を表示、SP用は非表示 */
.general-badge--sp {
    display: none;
}

@media (max-width: 768px) {
    .general-badge--pc {
        display: none;
    }
    .general-badge--sp {
        display: inline-flex;
    }
}

@media (min-width: 769px) {
    .general-pill {
        letter-spacing: 0.06rem;
    }
}

/* ============================
   Mechanism は medical.css の .medical-mechanism / .mechanism-* を流用
   （inc/enqueue.php で general ページにも medical.css を読み込んでいる）
   Figmaの「Mechanism #3」対応で text3 クラスのみ追加
============================ */

.mechanism-text3 {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(1rem, 0.936rem + 0.261vw, 1.25rem);
    font-style: normal;
    font-weight: 500;
    line-height: 159%;
    letter-spacing: clamp(0.1rem, 0.094rem + 0.026vw, 0.125rem);
    margin: 0;
}

/* ============================
   Mechanism セクション内: 届出効果4アイコン
   キャッチコピー＋説明文の直下、左カラム内に配置
============================ */
.mechanism-effects {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 8rem));
    gap: clamp(0.375rem, 0.343rem + 0.131vw, 0.5rem);
    margin: clamp(2rem, 1.522rem + 1.961vw, 4.25rem) 0 0 0;
    max-width: 33.5rem;
}

.mechanism-effect {
    aspect-ratio: 128 / 168;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* 横パディングは狭い画面ほど小さく(0.125rem 〜 0.5rem) してテキスト幅を確保 */
    padding: clamp(1rem, 0.873rem + 0.523vw, 1.5rem) clamp(0.125rem, -0.3rem + 0.67vw, 0.5rem) clamp(0.75rem, 0.622rem + 0.523vw, 1.25rem);
    background: #FFF;
    border: 2px solid #BA2A20;
    border-radius: clamp(0.75rem, 0.559rem + 0.784vw, 1.25rem);
    min-height: 0;
    overflow: hidden;
}

.mechanism-effect-icon {
    width: auto;
    height: auto;
    max-width: clamp(3.75rem, 3.431rem + 1.307vw, 5rem);
    max-height: clamp(2.625rem, 2.402rem + 0.915vw, 3.5rem);
    object-fit: contain;
}

/* 2つ目(疲労回復/relax) は SVG が横に広めなので一回り大きく＋上寄せ表示(約1.3倍) */
.mechanism-effect:nth-child(2) .mechanism-effect-icon {
    max-width: clamp(5rem, 4.617rem + 1.569vw, 6.25rem);
    max-height: clamp(3.5rem, 3.213rem + 1.176vw, 4.5rem);
    transform: translateY(clamp(-0.625rem, -0.313rem - 0.196vw, -0.25rem));
}

.mechanism-effect-label {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(0.8125rem, 0.764rem + 0.196vw, 1.0625rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: center;
    margin: 0;
}

/* 3つ目(腰・肩などの筋肉のコリを改善) のみ Figma 準拠で letter-spacing -4%、
   テキスト位置を若干下にずらして他カードのラベル下端と揃える */
.mechanism-effect:nth-child(3) .mechanism-effect-label {
    letter-spacing: -0.04em;
    transform: translateY(clamp(0.25rem, 0.155rem + 0.392vw, 0.625rem));
}

@media (min-width: 1501px) and (max-width: 1670px) {
    .mechanism-effect:nth-child(3) .mechanism-effect-label {
        font-size: clamp(0.75rem, 0.719rem + 0.131vw, 0.875rem);
    }
}

/* PC広幅(1501px以上)で 1行ラベル(血行促進・疲労回復)を 3行カードの中央行に縦揃え */
@media (min-width: 1501px) {
    .mechanism-effect:nth-child(1) .mechanism-effect-label,
    .mechanism-effect:nth-child(2) .mechanism-effect-label {
        transform: translateY(-0.75em);
    }
}

/* 1500px以下では 2x2 レイアウトに切替(4列だとカードが小さくテキスト溢れ) */
@media (max-width: 1500px) {
    .mechanism-effects {
        grid-template-columns: repeat(2, minmax(0, 8rem));
        gap: clamp(0.5rem, 0.3rem + 0.8vw, 0.75rem);
        max-width: 17rem;
        margin-inline: auto;
    }

    /* 2x2 ではカードが縦長になり space-between だとアイコンとテキストが離れすぎるので
       中央寄せ＋gap でクラスタリング */
    .mechanism-effect {
        justify-content: center;
        gap: clamp(0.875rem, 0.5rem + 1.6vw, 1.5rem);
    }

    /* 2x2 ではアイコンを一回り大きく表示(高さ揃え) */
    .mechanism-effect-icon {
        max-width: 5rem;
        max-height: 4rem;
    }
    .mechanism-effect:nth-child(2) .mechanism-effect-icon {
        max-width: 6.25rem;
        max-height: 5rem;
        transform: translateY(-0.25rem);
    }
}

/* text2 の margin-bottom を text1 と統一
   (medical は Mech#2 で終わるため大きな余白だが、general は Mech#3 が続くため) */
#page-general .mechanism-text2 {
    margin-bottom: clamp(2.5rem, 1.385rem + 4.575vw, 6.875rem);
}

/* ============================
   Mechanism 画像の差し替え（Figma に合わせて順序を変更）
   general: #1=肌(medical2.png) / #2=生地(medical1.png) / #3=血流(mechanism-03.png)
   medical: #1=生地 / #2=肌 / #3=血流
   → img1 と img2 のスタイルをスワップする必要がある
============================ */

/* PC: img1 = 肌の楕円 (medical の img2 スタイルを流用) */
#page-general .mechanism-img1 {
    width: clamp(11.05rem, 5.03rem + 12.525vw, 20.06rem);
    height: clamp(5.25rem, 2.369rem + 5.995vw, 9.563rem);
    mix-blend-mode: screen;
    transform: none;
    /* 肌画像を若干上側に配置するため margin-top を縮小 */
    margin-top: 0.75rem;
    margin-bottom: 3rem;
}

/* PC: img2 = 黄色い生地 (medical の img1 スタイルを流用)
   margin-bottom を大きく取って Mechanism #3 ラベルと img3 の高さを揃える */
#page-general .mechanism-img2 {
    width: clamp(10.674rem, 8.448rem + 9.133vw, 19.407rem);
    height: auto;
    mix-blend-mode: screen;
    transform: translateX(-0.75rem);
    /* 生地画像を若干下側に配置するため margin-top を追加 */
    margin-top: 1.5rem;
    /* 390px: 2.5rem(40px) / 1920px: 9.3125rem(149px) */
    margin-bottom: clamp(2.5rem, 0.764rem + 7.124vw, 9.3125rem);
}

#page-general .mechanism-img2-sp {
    display: none;
}

/* Arrow 2 / Divider 2 は Figma の位置に合わせ再配置（img2 と img3 の間）
   PC: img2 に近づけるため top 値を 25px 縮小 */
#page-general .mechanism-arrow2 {
    /* 1440px: 約363px / 1920px: 約423px (box-right 基準) */
    top: clamp(12.9375rem, 9.305rem + 14.902vw, 27.1875rem);
    /* arrow1 と同じサイズに揃える (medical.cssのデフォルトはarrow2が小さい) */
    width: clamp(2rem, 1.92rem + 0.327vw, 2.313rem);
    height: clamp(1.438rem, 1.39rem + 0.196vw, 1.625rem);
}

/* img3 は Mechanism #3 ラベルと高さが揃うよう微調整 */
#page-general .mechanism-img3 {
    margin-top: clamp(0.5rem, 0.309rem + 0.784vw, 1.5rem);
}

/* 赤い点線区切り（Mech#1/#2、#2/#3 の間に配置、フルワイド） */
#page-general .mechanism-divider {
    position: absolute;
    left: clamp(1.25rem, 0.867rem + 1.569vw, 2.375rem);
    right: clamp(1.25rem, 0.867rem + 1.569vw, 2.375rem);
    height: 0;
    border-top: 1px dotted #BA2A20;
    z-index: 2;
    pointer-events: none;
}

/* divider1 を arrow1 の直下に配置（PCで上にシフトして矢印に近づける）
   390px: ~200px(12.5rem) / 1440px: ~246px(15.375rem) / 1920px: ~267px(16.69rem) */
#page-general .mechanism-divider1 {
    top: clamp(12.5rem, 11.43rem + 4.381vw, 16.69rem);
}

/* divider2 を arrow2 の下、img3 の上に配置
   390px: ~330px(20.625rem) / 1440px: ~498px(31.125rem) / 1920px: ~575px(35.925rem) */
#page-general .mechanism-divider2 {
    top: clamp(20.625rem, 16.725rem + 16vw, 35.925rem);
}

/* SP */
@media (max-width: 768px) {
    /* box-right全体を上にシフトして肌画像をMech#1ラベルに近づける
       390px時: 40px (box-leftと同じ高さ) / 768px時: 約52px
       また right値を約8px減らして画像を右寄りに配置 */
    #page-general .mechanism-box-right {
        top: clamp(2.5rem, 1.736rem + 3.137vw, 3.25rem);
        right: clamp(0.659rem, 0.046rem + 2.514vw, 3.063rem);
    }
    #page-general .mechanism-img1 {
        width: clamp(11.055rem, 8.753rem + 9.444vw, 20.085rem);
        height: clamp(5.528rem, 4.377rem + 4.721vw, 10.042rem);
        /* margin-top をさらに減らして肌画像を上側に配置 */
        margin-top: 0;
        /* img2位置を維持するためmargin-bottomで相殺 */
        margin-bottom: clamp(4.25rem, 3.697rem + 2.213vw, 6rem);
    }
    #page-general .mechanism-img2 {
        width: clamp(10.625rem, 4.779rem + 12.163vw, 19.375rem);
        /* medical.css の translateX(-0.625rem) を解除し、さらに少し右へシフト */
        transform: translateX(0.375rem);
        /* PC用の margin-top: 1.5rem をモバイルでは打ち消す */
        margin-top: 0;
        margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
    }
    #page-general .mechanism-img2-pc {
        display: none;
    }
    #page-general .mechanism-img2-sp {
        display: block;
    }
    /* img3 を下側にシフトして Mech#3 とより離した配置に */
    #page-general .mechanism-img3 {
        margin-top: clamp(3.125rem, 2.934rem + 0.784vw, 4.125rem);
    }

    /* arrow1 を img1(肌) と img2(生地) の間にクリーンに配置
       (box-right 基準) img1の位置変更に合わせて微調整 */
    #page-general .mechanism-arrow1 {
        top: clamp(6.35rem, 5.37rem + 4.02vw, 7.3rem);
        right: clamp(4.5rem, 3.5rem + 2.5vw, 6rem);
    }

    /* divider1 をさらに上にシフト (arrow1 の中ほどに重なる位置) */
    #page-general .mechanism-divider1 {
        top: clamp(9.75rem, 8.715rem + 4.233vw, 10.75rem);
    }

    /* Mech#2 ラベル(num2) に padding-top で余白を追加 (margin だと相殺されるため)
       線の位置は変えず、Mech#2 ラベル+本文が下にシフト */
    #page-general .mechanism-box-left > .mechanism-num:nth-child(3) {
        padding-top: 2rem;
    }

    /* Mech#3 ラベル(num3) にも padding-top を追加して Mech#3 全体を下にシフト */
    #page-general .mechanism-box-left > .mechanism-num:nth-child(5) {
        padding-top: 1rem;
    }

    /* divider2 を arrow2 と一緒に+18px下にシフト (arrow2 の中ほどに重なる位置を維持) */
    #page-general .mechanism-divider2 {
        top: clamp(19.25rem, 14.935rem + 17.72vw, 23.435rem);
    }

    /* arrow2 を img2 と img3 の中間にクリーンに配置 (+18px下にシフト)
       right も arrow1 と同じ値にして横位置を揃える */
    #page-general .mechanism-arrow2 {
        top: clamp(16.125rem, 12.493rem + 14.902vw, 30.375rem);
        right: clamp(4.5rem, 3.5rem + 2.5vw, 6rem);
    }

    /* gradient-box の padding-bottom を増やしてモバイルで高さを確保
       (img3の下に約50pxの余白を確保) */
    #page-general .mechanism-gradient-box {
        padding-bottom: clamp(30rem, 21.36rem + 35.45vw, 38.4rem);
    }
}

/* ============================
   PC専用: Mechanism #1 の各要素を上にシフト
   (Mech#2/#3 の位置は維持するため text1/img1 の margin-bottom で相殺)
============================ */
@media (min-width: 769px) {
    /* Mech#1 ラベル (最初の mechanism-num のみ) を上にシフト */
    #page-general .mechanism-box-left > .mechanism-num:first-child {
        margin-top: -1rem;
    }

    /* text1 の margin-bottom を増やして Mech#2 ラベルの位置を維持 */
    #page-general .mechanism-text1 {
        margin-bottom: clamp(3.5rem, 2.385rem + 4.575vw, 7.875rem);
    }

    /* img1 を上にシフトしつつ img2 位置を維持するため margin-bottom も増やす */
    #page-general .mechanism-img1 {
        margin-top: -0.25rem;
        margin-bottom: 4rem;
    }

    /* arrow1 を上にシフト (medical.css のデフォルトから -1rem) */
    #page-general .mechanism-arrow1 {
        top: clamp(7.125rem, 5.079rem + 4.256vw, 10.187rem);
    }

    /* divider1 をさらに上にシフト (矢印の中ほどに重なる位置)
       1440px時: ~214px(13.4rem) / 1920px: ~235px(14.69rem) */
    #page-general .mechanism-divider1 {
        top: clamp(10.5rem, 9.43rem + 4.381vw, 14.69rem);
    }

    /* divider2 を arrow2 と一緒にさらに上へシフト
       1440px時: ~432px(27rem) / 1920px: ~508px(31.75rem) */
    #page-general .mechanism-divider2 {
        top: clamp(20.4375rem, 12.7475rem + 15.833vw, 31.7475rem);
    }

    /* gradient-box の padding-bottom (緩やかな成長カーブ)
       1372px時: ~688px / 1440px時: ~696px / 1920px時: ~752px */
    #page-general .mechanism-gradient-box {
        padding-bottom: clamp(28.236rem, 32.98rem + 11.68vw, 47rem);
    }

    /* img2 の margin-bottom を縮小して img3 を上にシフト
       (1920px で img3 が box からはみ出ないようにする) */
    #page-general .mechanism-img2 {
        margin-bottom: clamp(2.5rem, 0.764rem + 7.124vw, 5rem);
    }
}

/* ============================
   Effects
============================ */

.general-effects {
    width: 100%;
    max-width: 120rem;
    margin: clamp(4rem, 3.006rem + 4.085vw, 8.75rem) auto 0;
    padding: 0 clamp(1.25rem, -2rem + 13.333vw, 14rem);
}

.general-effects .general-section-desc {
    max-width: 74.125rem;
    margin-left: auto;
    margin-right: auto;
}

.general-effects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 0.745rem + 1.046vw, 2.188rem);
    margin: clamp(2rem, 1.522rem + 1.961vw, 4.25rem) 0 0 0;
}

.general-effects-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.general-effects-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: clamp(1rem, 0.809rem + 0.784vw, 1.75rem);
    background: #F5F5F5;
}

.general-effects-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.general-effects-text {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.748rem + 0.523vw, 1.25rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: clamp(0.088rem, 0.074rem + 0.052vw, 0.125rem);
    text-align: center;
    margin: clamp(0.75rem, 0.559rem + 0.784vw, 1.5rem) 0 0 0;
}

/* ============================
   Showcase (Product image background + Device + Recommend)
============================ */

.general-showcase {
    position: relative;
    width: 100%;
    max-width: 120rem;
    margin: clamp(4rem, 3.006rem + 4.085vw, 8.75rem) auto 0;
    padding: 0 clamp(1.25rem, -2rem + 13.333vw, 14rem);
}

.general-showcase-bg {
    position: absolute;
    top: 0;
    left: clamp(1.25rem, -2rem + 13.333vw, 14rem);
    right: clamp(1.25rem, -2rem + 13.333vw, 14rem);
    bottom: 0;
    z-index: 0;
    border-radius: clamp(1rem, 0.618rem + 1.569vw, 3.125rem);
    overflow: hidden;
    background: linear-gradient(180deg, #f4f4f4 0%, #ebebeb 100%);
}

.general-showcase-bg img {
    position: absolute;
    top: 0;
    right: 4%;
    width: auto;
    height: 70%;
    max-width: 45%;
    object-fit: contain;
    display: block;
}

.general-showcase-inner {
    position: relative;
    z-index: 1;
    padding: clamp(3rem, 2.181rem + 3.366vw, 6.75rem) clamp(1rem, 0.364rem + 2.614vw, 4.125rem);
}

/* ============================
   Device Info
============================ */

/* SP専用: ラベルとタイトルの間に表示する T シャツ画像（デフォルト非表示） */
.general-device-image-sp {
    display: none;
}

.general-device-body {
    display: flex;
    justify-content: flex-start;
    margin: clamp(2rem, 1.522rem + 1.961vw, 4.25rem) 0 0 0;
}

.general-device-table {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 0.622rem + 0.523vw, 1.25rem);
    width: 100%;
    max-width: 25.25rem;
    margin: 0;
    padding: clamp(1rem, 0.804rem + 0.784vw, 1.75rem) clamp(1.25rem, 1.14rem + 0.458vw, 1.6875rem);
    background: #FFF;
    border-radius: clamp(0.75rem, 0.559rem + 0.784vw, 1.125rem);
}

.general-device-row {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 0.622rem + 0.523vw, 1.25rem);
    padding: 0 0 clamp(0.75rem, 0.622rem + 0.523vw, 1.25rem) 0;
    border-bottom: 1px dotted #C4C4C4;
}

.general-device-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.general-device-row dt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(5rem, 4.68rem + 1.307vw, 6.25rem);
    height: clamp(1.375rem, 1.311rem + 0.261vw, 1.5625rem);
    background: rgba(5, 5, 5, 0.1);
    border-radius: 0.25rem;
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(0.75rem, 0.718rem + 0.131vw, 0.875rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: clamp(0.038rem, 0.035rem + 0.013vw, 0.044rem);
    margin: 0;
    text-align: center;
}

.general-device-row dd {
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(0.75rem, 0.718rem + 0.131vw, 0.875rem);
    font-weight: 500;
    line-height: 1.95;
    letter-spacing: clamp(0.038rem, 0.035rem + 0.013vw, 0.044rem);
    margin: 0;
}

/* ============================
   Recommend (inside showcase)
============================ */

.general-recommend {
    margin: clamp(3rem, 2.181rem + 3.366vw, 6.75rem) 0 0 0;
}

.general-recommend-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.75rem, 0.559rem + 0.784vw, 1.5rem);
    margin: clamp(2rem, 1.522rem + 1.961vw, 4.25rem) 0 0 0;
}

.general-recommend-item {
    display: flex;
    align-items: center;
    background: #FFF;
    border-radius: clamp(1rem, 0.936rem + 0.261vw, 1.125rem);
    min-height: clamp(5rem, 4.538rem + 1.895vw, 6.813rem);
    overflow: hidden;
}

.general-recommend-item img {
    flex-shrink: 0;
    align-self: stretch;
    width: clamp(5rem, 4.394rem + 2.484vw, 7.375rem);
    height: auto;
    object-fit: cover;
}

.general-recommend-item p {
    flex: 1;
    padding: 0 clamp(1rem, 0.809rem + 0.784vw, 1.75rem);
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.748rem + 0.523vw, 1rem);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: clamp(0.044rem, 0.038rem + 0.026vw, 0.05rem);
    margin: 0;
}

/* ============================
   モバイル (max-width: 768px)
============================ */

@media (max-width: 768px) {
    .general-effects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1rem, 0.5rem + 2vw, 1.5rem);
    }

    .general-recommend-grid {
        grid-template-columns: 1fr;
        gap: clamp(0.625rem, 0.4rem + 1vw, 0.875rem);
    }

    .general-recommend-item {
        min-height: auto;
    }

    .general-device-table {
        max-width: 100%;
    }

    /* SP: 背景の T シャツ画像とグラデーションを非表示にしてカード色だけ残す */
    .general-showcase-bg {
        background-color: #F5F5F5;
    }

    .general-showcase-bg > img,
    .general-showcase-bg::after {
        display: none;
    }

    /* SP: ラベルとタイトルの間に T シャツ画像をインライン表示
       drop-shadow をTシャツのアルファ形状に沿って適用（デスクトップ写真の陰影を再現） */
    .general-device-image-sp {
        display: block;
        width: 60%;
        max-width: 15rem;
        height: auto;
        margin: clamp(1rem, 0.619rem + 1.905vw, 2rem) auto;
        filter:
            drop-shadow(0 0.5rem 1rem rgba(0, 0, 0, 0.08))
            drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, 0.12));
    }
}

/* ============================
   スマホ (max-width: 480px)
============================ */

@media (max-width: 480px) {
    .general-section-title {
        line-height: 1.7;
    }
}