/* ============================
   リライブエンジン - Engine Page
============================ */

/* ページ固有のpadding調整 */
#page-engine.page-top-under {
  padding-bottom: 0;
  padding-top: 0;
}

/* engineページ専用: パンくずリストを画像内でabsolute配置 */
.engine-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;
}

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

/* 画像共通スタイル */
.engine-hero-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* pictureタグ */
.engine-hero-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* picture内のimg */
.engine-hero-image picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* PC画像 */
.engine-hero-image .pc {
    object-position: center center;
}

.engine-hero-image .pc img {
    object-position: center center;
}

/* デスクトップ: PC画像を表示、SP画像を非表示 */
.engine-hero-image .sp {
    display: none;
}

/* モバイル（768px以下）: SP画像を表示、PC画像を非表示 */
@media (max-width: 768px) {
    .engine-hero-image .pc {
        display: none;
    }
    .engine-hero-image .sp {
        display: block;
        object-position: center center;
    }
}

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

/* 日本語タイトル */
.engine-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;
}

/* 英語タイトル */
.engine-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) {
    .engine-title-en {
        font-weight: 400;
    }
}

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

/* 説明文（白い背景BOX） */
.engine-desc {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(14.44rem, 12.052rem + 9.799vw, 23.81rem);
    height: clamp(1.7625rem, 1.463rem + 1.229vw, 2.9375rem);
    border-radius: clamp(1rem, 0.881rem + 0.49vw, 1.46875rem);
    background: #FFF;
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(0.75rem, 0.623rem + 0.523vw, 1.25rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: clamp(0.075rem, 0.063rem + 0.052vw, 0.125rem);
    margin: clamp(1.3125rem, 0.866rem + 1.83vw, 3.0625rem) 0 0 0;
}
/* ============================
   Mechanismセクション
============================ */

.engine-mechanism {
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(2rem, -5.444rem + 11.62vw, 8.5rem);
    margin-left: clamp(1.25rem, -3.179rem + 18.17vw, 18.625rem);
    margin-right: clamp(1.25rem, -1.044rem + 9.412vw, 10.25rem);
}

/* 左側のコンテンツエリア */
.mechanism-content {
    width: clamp(28rem, 26.711rem + 5.289vw, 32rem);;
    margin-top: clamp(5rem, 3.295rem + 6.996vw, 11.69rem);
}

/* 右側のグラデーションBOX */
.mechanism-gradient-box {
    width: clamp(21.875rem, 14.738rem + 29.281vw, 49.875rem);
    margin-top: clamp(5rem, 4.044rem + 3.922vw, 8.75rem);
    height: clamp(28.125rem, 23.872rem + 17.448vw, 44.81rem);
    display: flex;
    position: relative;
}

/* 画像共通スタイル */
.mechanism-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: clamp(1rem, 0.618rem + 1.569vw, 3.125rem);
}

/* PC画像 */
.mechanism-image.pc {
    display: block;
}

/* SP画像 */
.mechanism-image.sp {
    display: none;
}

/* Line 63 SVG - 1025px以上のみ表示 */
.mechanism-line-svg {
    display: block;
    margin: 94px auto 0;
    width: clamp(50rem, -7.143rem + 89.286vw, 100rem);
}

/* 1600px以下: 画像切り替え */
@media (max-width: 1600px) {
    .mechanism-image.pc {
        display: none;
    }

    .mechanism-image.sp {
        display: block;
    }
    .mechanism-gradient-box {
        width: clamp(21.875rem, 17.645rem + 17.355vw, 35rem);
    }
    .engine-mechanism {
        margin-left: clamp(5.875rem, -16.853rem + 35.478vw, 18.625rem);
        margin-right: clamp(4.25rem, -9.013rem + 20.703vw, 11.69rem);
    }
}

/* 1024px以下: 縦並びに切り替え */
@media (max-width: 1024px) {
    .engine-mechanism {
        flex-direction: column;
        align-items: center;
    }

    .mechanism-gradient-box {
        margin: 1.75rem 0 0 0;
        overflow: visible;
    }
    .mechanism-content {
        width: clamp(19.375rem, 4.381rem + 61.514vw, 43.75rem);
    }
    .mechanism-gradient-box {
        width: clamp(21.875rem, 10.726rem + 45.741vw, 40rem);
        height:clamp(28.125rem, 10.824rem + 70.978vw, 56.25rem);
    }

    /* Line 63 SVGを非表示 */
    .mechanism-line-svg {
        display: none;
    }
    .engine-mechanism {
        margin-left: clamp(1.25rem, -2.376rem + 14.876vw, 12.5rem);
        margin-right: clamp(1.25rem, -1.022rem + 9.322vw, 8.3rem);
    }
    
}

/* Mechanismラベル */
.mechanism-label {
    color: rgba(159, 33, 7, 0.50);
    font-family: Raleway, sans-serif !important;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    margin: 0 0 clamp(0.375rem, 1.63rem - 1.046vw, 1.375rem) 0;
}

/* リライブエンジン技術の仕組み */
.mechanism-title {
    color: #333333;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 1.245rem + 0.021vw, 1.27rem);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0;
    margin: 0 0 clamp(1.875rem, 1.445rem + 1.765vw, 3.563rem) 0;
}

@media (max-width: 390px) {
    .mechanism-title {
        letter-spacing: 0.05em;
    }
}

/* リライブのエッセンスを凝縮した鉱石チップが、身体を内側からサポート。 */
.mechanism-catchphrase {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(1.625rem, 1.529rem + 0.392vw, 2rem);
    font-style: normal;
    font-weight: 500;
    line-height: 190%;
    letter-spacing: 0.1em;
    margin: 0 0 clamp(1.875rem, 1.971rem - 0.392vw, 1.5rem) 0;
}
@media (max-width: 768px) {
    .mechanism-catchphrase {
        font-weight: 400;
        line-height: 44px;
        letter-spacing: 2.08px;
        min-width: 340px;
    }
    .mechanism-content {
        width: clamp(19.375rem, 8.413rem + 44.974vw, 30rem);
        margin-top: clamp(5rem, 3.295rem + 6.996vw, 11.69rem);
    }
    .features-catchphrase {
        font-weight: 400;
      }
      .recommend-catchphrase {
        font-weight: 400;
      }
}

@media (max-width: 390px) {
    .mechanism-catchphrase {
        font-weight: 400;
        line-height: 44px;
        letter-spacing: 2.08px;
        width: 340px;
    }
}

/* 説明文 */
.mechanism-description {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.843rem + 0.131vw, 1rem);
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 0.02em;
    margin: 0;
}

/* 768px以上でのみ改行 */
.mechanism-description .pc-br {
    display: inline;
}

@media (max-width: 768px) {
    .mechanism-description .pc-br {
        display: none;
    }
}

/* ============================
   Features & Recommend 横並びラッパー
============================ */

.features-recommend-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: clamp(4rem, 1.709rem + 3.575vw, 6rem);
    padding-left: clamp(2.5rem, -6.877rem + 14.638vw, 10.688rem);
}

/* 下部の区切り線SVG */
.features-recommend-line-svg {
    display: block;
    margin: clamp(3rem, -2.726rem + 8.939vw, 8rem) auto 0;
    width: clamp(50rem, -7.143rem + 89.286vw, 100rem);
}

/* ============================
   Featuresセクション
============================ */

.engine-features {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.features-content {
    text-align: center;
    width: 100%;
}

/* Featuresラベル */
.features-label {
    color: rgba(159, 33, 7, 0.50);
    font-family: Raleway, sans-serif !important;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 clamp(0.375rem, 1.065rem - 0.654vw, 1rem) 0;
}

/* 特徴 */
.features-title {
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 1.245rem + 0.021vw, 1.27rem);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: clamp(0.0625rem, 0.052rem + 0.013vw, 0rem);
    margin: 0 0 clamp(1.25rem, 1.12rem + 0.131vw, 1.375rem) 0;
}

/* 身体パフォーマンスを後押し。 */
.features-catchphrase {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(1.5rem, 0.927rem + 0.894vw, 2rem);
    font-style: normal;
    font-weight: 500;
    line-height: clamp(2.75rem, 2.25rem + 0.392vw, 3.8rem);
    letter-spacing: clamp(0.1875rem, 0.176rem + 0.013vw, 0.2rem);
    margin: 0;
}

/* PC用改行 */
.features-catchphrase .sp-br {
    display: none;
}

/* 1440px以上では改行なし */
.features-description .pc-br,
.recommend-description .pc-br {
    display: none;
}

/* 1440px以下で改行表示 */
@media (max-width: 1440px) {
    .features-description .pc-br,
    .recommend-description .pc-br {
        display: inline;
    }
}

/* 説明文 */
.features-description {
    color: #000;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.843rem + 0.131vw, 1rem);
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 0.02rem;
    margin: 18px 0 0 0;
}

/* 画像ラッパー */
.features-image-wrapper {
    margin-top: 46px;
    width: clamp(26.363rem, 6.235rem + 31.419vw, 43.938rem);
    aspect-ratio: 1406 / 1546;
    position: relative;
}

.features-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.features-graph-text {
    position: absolute;
    top: 81.76%;
    left: 13.37%;
    right: 12.40%;
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(0.5rem, 0.124rem + 0.626vw, 0.875rem);
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.02em;
}

/* PC/SP 両画像とも注釈テキストが画像に焼き込まれているため、HTMLテキストを全ビューポートで非表示にして重複を防ぐ */
.features-graph-text {
    display: none;
}

.features-graph-text p {
    margin: 0;
}

.features-graph-text p + p {
    margin-top: 0.5em;
}

/* PC画像を表示、SP画像を非表示 */
.features-image-wrapper .pc {
    display: block;
    height: 100%;
}

.features-image-wrapper .sp {
    display: none;
    height: 100%;
}

/* ============================
   区切り線
============================ */

.features-recommend-divider {
    margin-left: clamp(2.5rem, -1.508rem + 6.257vw, 6rem);
    margin-top: -8px;
    flex-shrink: 0;
}

.features-recommend-divider svg {
    display: block;
    height: clamp(41.875rem, 23.122rem + 29.274vw, 58.25rem);
}

/* ============================
   Recommendセクション
============================ */

.engine-recommend {
    margin-left: clamp(2.5rem, -0.649rem + 4.916vw, 5.25rem);
    text-align: center;
    flex-shrink: 0;
}

/* Recommendラベル */
.recommend-label {
    color: rgba(159, 33, 7, 0.50);
    font-family: Raleway, sans-serif !important;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 clamp(0.375rem, 1.065rem - 0.654vw, 1rem) 0;
}

/* こんな時におすすめ */
.recommend-title {
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 1.245rem + 0.021vw, 1.27rem);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: clamp(0.0625rem, 0.052rem + 0.013vw, 0rem);
    margin: 0 0 clamp(1.25rem, 1.12rem + 0.131vw, 1.375rem) 0;
}

/* 挑戦の場面も、毎日の頑張りも。 */
.recommend-catchphrase {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(1.5rem, 0.927rem + 0.894vw, 2rem);
    font-style: normal;
    font-weight: 500;
    line-height: clamp(2.75rem, 2.25rem + 0.392vw, 3.8rem);
    letter-spacing: clamp(0.1875rem, 0.176rem + 0.013vw, 0.2rem);
    margin: 0;
}

/* 改行制御 */
.recommend-catchphrase .sp-br {
    display: none;
}

@media (max-width: 768px) {
    .recommend-catchphrase .sp-br {
        display: inline;
    }
    .recommend-catchphrase {
        font-weight: 400;
    }
    .features-catchphrase .sp-br {
        display: inline;
    }
    .features-catchphrase {
        font-weight: 400;
    }
    .features-description .pc-br {
        display: none;
    }
}
.recommend-description {
    color: #000;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.843rem + 0.131vw, 1rem);
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 0.02rem;
    margin: 18px 0 0 0;
}

/* ============================
   Recommendカードセクション
============================ */

/* カードコンテナ - 常に縦並び */
.recommend-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 46px;
    width: clamp(26.363rem, 6.235rem + 31.419vw, 43.938rem);
    aspect-ratio: 1406 / 1546;
    overflow: hidden;
    border-radius: 1rem;
}

.recommend-card {
    position: relative;
    width: clamp(26.363rem, 6.235rem + 31.419vw, 43.938rem);
    height: 50%;
    flex-shrink: 0;
}

/* 画像共通スタイル */
.recommend-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* PC画像を表示、SP画像を非表示 */
.recommend-card .pc {
    display: block;
    height: 100%;
}

.recommend-card .sp {
    display: none;
    height: 100%;
}

/* 個別カードの角丸はコンテナのoverflow:hiddenで制御するため不要 */
.recommend-card-1 {
    border-radius: 0;
}

.recommend-card-2 {
    border-radius: 0;
}

.recommend-card-3 {
    border-radius: 0;
}

/* オーバーレイ */
.card-overlay {
    position: absolute;
    top: clamp(3rem, 1.471rem + 6.275vw, 9rem);
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* カード1と3: 左寄せ */
.recommend-card-1 .card-overlay,
.recommend-card-2 .card-overlay {
    align-items: flex-start;
    left: clamp(1.22rem, 0.639rem + 2.384vw, 3.5rem);
}

/* カード2: 右寄せ */
.recommend-card-3 .card-overlay {
    align-items: flex-end;
    right: clamp(1.22rem, 0.639rem + 2.384vw, 3.5rem);
}

/* カードタイトル */
.card-title {
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: clamp(1rem, 0.841rem + 0.654vw, 1.625rem);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: clamp(0.0875rem, 0.084rem + 0.052vw, 0.1rem);
    margin: 0 0 clamp(0.313rem, 0.271rem + 0.523vw, 0.813rem) 0;
    text-align: left;
}

.recommend-card-3 .card-title {
    text-align: right;
}

/* カードボタン共通 */
.card-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(1.188rem, 0.869rem + 1.307vw, 2.438rem);
    border-radius: clamp(0.73rem, 0.709rem + 0.209vw, 1.469rem);
    border: clamp(0.031rem, 0.03rem + 0.01vw, 0.063rem) solid #DC3714;
    background: #BA2A20;
    padding-bottom: 1px;
}

.card-button span {
    color: #FFF;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: clamp(0.75rem, 0.686rem + 0.261vw, 1rem);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: clamp(0.075rem, 0.073rem + 0.021vw, 0.1rem);
}

/* カードごとの個別ボタンサイズ */
.recommend-card-1 .card-button {
    width: clamp(11.125rem, 9.675rem + 5.948vw, 16.813rem);
}

.recommend-card-2 .card-button {
    width: clamp(11.125rem, 10.408rem + 2.942vw, 13.938rem);
}

.recommend-card-3 .card-button {
    width: clamp(9rem, 8.363rem + 2.614vw, 11.5rem);
}

/* ============================
   Introductionセクション
============================ */

.engine-introduction {
    margin-top: clamp(5rem, 4.443rem + 2.285vw, 7.185rem);
    text-align: center;
}

/* Introduction recordラベル */
.introduction-label {
    color: rgba(159, 33, 7, 0.50);
    font-family: Raleway, sans-serif !important;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 clamp(0.375rem, 1.065rem - 0.654vw, 1rem) 0;
}

/* 導入実績 */
.introduction-title {
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 1.217rem + 0.033vw, 1.2703rem);
    font-style: normal;
    font-weight: 700;
    line-height: clamp(normal, normal, 140%);
    letter-spacing: clamp(0.0625rem, 0.052rem + 0.013vw, 0rem);
    margin: 0;
}

/* Bリーグ導入実績 */
.introduction-bleague {
    position: relative;
    margin: clamp(2.5rem, 1.672rem + 3.399vw, 5.75rem) auto 0;
    width: clamp(57.04rem, 10.371rem + 72.92vw, 97.875rem);
    height: clamp(11.325rem, 5.841rem + 22.516vw, 24.125rem);
}

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

/* PC画像 */
.introduction-bleague .pc {
    display: block;
    border: 1px solid #000;
background: #1E1E1E;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

/* SP画像 */
.introduction-bleague .sp {
    display: none;
}

/* PC用: 画像上のテキスト（1025px以上） */
.bleague-text-overlay {
    position: absolute;
    top: clamp(6.875rem, 0.946rem + 9.263vw, 12.063rem);
    right: clamp(0.75rem, 0.179rem + 0.893vw, 1.25rem);
    transform: translateY(-50%);
    width: clamp(45rem, 16.429rem + 44.643vw, 70rem);
    display: block;
}

.bleague-text {
    color: #FFF;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: clamp(1.5rem, 0.929rem + 0.893vw, 2rem);
    font-style: normal;
    font-weight: 500;
    line-height: 190%;
    letter-spacing: clamp(0.2rem, 0.188rem + 0.013vw, 0.2rem);
    margin: 0;
}

/* Bリーグテキストの下線（デスクトップのみ） */
.bleague-text-underline {
    position: relative;
    display: inline-block;
}

.bleague-text-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #FFF;
}

/* SP用: 画像下のテキスト（デフォルトは非表示） */
.bleague-text-below {
    display: none;
}

/* 1024px以下: 画像切り替えとテキスト配置変更 */
@media (max-width: 1024px) {
    .introduction-bleague .pc {
        display: none;
    }

    .introduction-bleague .sp {
        display: block;
        width: 100%;
        border-radius: clamp(1rem, 0.385rem + 2.524vw, 2rem);
    }

    /* 画像上のテキストを非表示 */
    .bleague-text-overlay {
        display: none;
    }

    /* 画像下のテキストを表示 */
    .bleague-text-below {
        display: block;
        margin: clamp(0.5625rem, 0.5625rem + 0vw, 0.5625rem) auto 0;
        color: #050505;
        text-align: center;
        font-family: "Noto Sans JP";
        font-size: clamp(0.875rem, 0.798rem + 0.315vw, 1rem);
        font-style: normal;
        font-weight: 500;
        line-height: 151%;
        letter-spacing: clamp(0.044rem, 0.044rem + 0vw, 0.044rem);
    }
    .introduction-bleague {
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: clamp(21.875rem, 10.726rem + 45.741vw, 40rem);
        margin-left: auto;
        margin-right: auto;
    }
    .engine-introduction {
        text-align: left;
        margin-right: clamp(1.25rem, -4.209rem + 22.397vw, 10.125rem);
        margin-left: clamp(1.25rem, -4.209rem + 22.397vw, 10.125rem);
    }
    /* オーバーレイ */
.card-overlay {
    position: absolute;
    top: clamp(4.5rem, 1.732rem + 11.356vw, 9rem);
    width: 100%;
    display: flex;
    flex-direction: column;
}
.features-catchphrase {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(1.875rem, 1.843rem + 0.131vw, 2rem);
    font-style: normal;
    
    line-height: clamp(2.75rem, 2.25rem + 0.392vw, 3.8rem);
    letter-spacing: clamp(0.1875rem, 0.176rem + 0.013vw, 0.2rem);
    margin: 0;
}
/* 挑戦の場面も、毎日の頑張りも。 */
.recommend-catchphrase {
    color: #BA2A20;
    font-family: "Noto Sans JP";
    font-size: clamp(1.875rem, 1.843rem + 0.131vw, 2rem);
    font-style: normal;
    
    line-height: clamp(2.75rem, 2.25rem + 0.392vw, 3.8rem);
    letter-spacing: clamp(0.1875rem, 0.176rem + 0.013vw, 0.2rem);
    margin: 0;
}
}

/* ============================
   Product lineupセクション
============================ */

.engine-lineup {
    margin-top: clamp(5rem, 4.443rem + 2.285vw, 7.185rem);
    text-align: center;
    padding-bottom: clamp(0rem, -1.593rem + 6.536vw, 6.25rem);
}

.lineup-label {
    color: rgba(159, 33, 7, 0.50);
    font-family: Raleway, sans-serif !important;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 clamp(0.375rem, 1.065rem - 0.654vw, 1rem) 0;
}

.lineup-title {
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 1.217rem + 0.033vw, 1.2703rem);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: clamp(0.0625rem, 0.052rem + 0.013vw, 0rem);
    margin: 0;
}

/* ============================
   Product lineup - 商品リスト
============================ */

.lineup-products {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(1.5625rem, 0.021rem + 3.212vw, 3.875rem);
    margin-top: clamp(1.875rem, 1.397rem + 1.961vw, 3.75rem);
}

.lineup-product {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lineup-product picture {
    display: block;
}

.lineup-product-image {
    width: clamp(20rem, 12.833rem + 14.931vw, 30.75rem);
    height: auto;
    aspect-ratio: 492 / 278;
    object-fit: cover;
    border-radius: clamp(0.75rem, 0.623rem + 0.523vw, 1.25rem);
    display: block;
}

.lineup-product-name {
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.779rem + 0.392vw, 1.25rem);
    font-style: normal;
    font-weight: 500;
    line-height: 200%;
    letter-spacing: 0.05em;
    margin: clamp(0.75rem, 0.623rem + 0.523vw, 1.25rem) 0 0 0;
    width: clamp(20rem, 12.833rem + 14.931vw, 30.75rem);
    text-align: left;
}

/* ============================
   公式ショップボタン
============================ */

.lineup-shop-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: clamp(19.375rem, 18.148rem + 5.035vw, 24.19rem);
  height: clamp(3.938rem, 3.91rem + 0.114vw, 3.938rem);
  border-radius: 1.969rem;
  border: 1px solid #000;
  background: #FFF;
  text-decoration: none;
  margin-top: clamp(3.125rem, 2.376rem + 3.072vw, 6.0625rem);
  margin-left: auto;
  margin-right: auto;
  padding-top: clamp(1.188rem, 1.16rem + 0.114vw, 1.188rem);
  padding-bottom: clamp(1.188rem, 1.16rem + 0.114vw, 1.188rem);
  padding-left: clamp(1.875rem, 1.811rem + 0.261vw, 1.875rem);
  padding-right: 1.875rem;
  gap: 0;
  transition: all 0.3s ease;
  position: relative;
}

.lineup-shop-button-text {
  color: #050505;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.75rem, 0.718rem + 0.131vw, 0.938rem);
  font-style: normal;
  font-weight: 500;
  line-height: clamp(1.5rem, 1.436rem + 0.261vw, 1.75rem);
  letter-spacing: clamp(0.075rem, 0.072rem + 0.013vw, 0.094rem);
  white-space: nowrap;
  flex: 1;
  text-align: center;
}

.lineup-shop-button-arrow {
  width: 2.045rem;
  height: 2.045rem;
  border: 1px solid #050505;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  overflow: hidden;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.lineup-shop-button-arrow .arrow-line,
.lineup-shop-button-arrow .arrow-tip {
  position: absolute;
  top: 50%;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.lineup-shop-button-arrow .arrow-line {
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: #050505;
  transform: translate(-4.5px, -50%);
}

.lineup-shop-button-arrow .arrow-tip {
  left: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #050505;
  border-right: 1.5px solid #050505;
  transform: translate(-1.2px, -50%) rotate(45deg);
}

.lineup-shop-button-text .button-text-pc {
  display: inline;
}

.lineup-shop-button-text .button-text-sp {
  display: none;
}

/* エンジンプロジェクト詳細ボタン */
.engine-project-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: clamp(19.375rem, 18.148rem + 5.035vw, 24.19rem);
  height: clamp(3.938rem, 3.91rem + 0.114vw, 3.938rem);
  border-radius: 1.969rem;
  border: 1px solid #000;
  background: #FFF;
  text-decoration: none;
  margin-top: clamp(5rem, 4.729rem + 1.111vw, 6.063rem);
  margin-left: auto;
  margin-right: auto;
  padding-top: clamp(1.188rem, 1.16rem + 0.114vw, 1.188rem);
  padding-bottom: clamp(1.188rem, 1.16rem + 0.114vw, 1.188rem);
  padding-left: clamp(1.875rem, 1.811rem + 0.261vw, 1.875rem);
  padding-right: 1.875rem;
  gap: 0;
  transition: all 0.3s ease;
  position: relative;
}

/* ボタンテキスト */
.engine-project-button-text {
  color: #050505;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.75rem, 0.718rem + 0.131vw, 0.938rem);
  font-style: normal;
  font-weight: 500;
  line-height: clamp(1.5rem, 1.436rem + 0.261vw, 1.75rem);
  letter-spacing: clamp(0.075rem, 0.072rem + 0.013vw, 0.094rem);
  white-space: nowrap;
  flex: 1;
  text-align: center;
}

/* 矢印アイコン（円形） */
.engine-project-button-arrow {
  width: 2.045rem;
  height: 2.045rem;
  border: 1px solid #050505;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  overflow: hidden;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* 矢印パーツ */
.engine-project-button-arrow .arrow-line,
.engine-project-button-arrow .arrow-tip {
  position: absolute;
  top: 50%;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

/* 矢印の棒 */
.engine-project-button-arrow .arrow-line {
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: #050505;
  transform: translate(-4.5px, -50%);
}

/* 矢印の先端 */
.engine-project-button-arrow .arrow-tip {
  left: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #050505;
  border-right: 1.5px solid #050505;
  transform: translate(-1.2px, -50%) rotate(45deg);
}

/* ホバーエフェクト（PC画面のみ） */
@media (min-width: 769px) {
  .engine-project-button:hover {
    background: #f5f5f5;
  }

  .engine-project-button:hover .engine-project-button-arrow {
    background: #050505;
    border-color: #050505;
  }

  .engine-project-button:hover .engine-project-button-arrow .arrow-line {
    background: #FFF;
  }

  .engine-project-button:hover .engine-project-button-arrow .arrow-tip {
    border-top-color: #FFF;
    border-right-color: #FFF;
  }

  .lineup-shop-button:hover {
    background: #f5f5f5;
  }

  .lineup-shop-button:hover .lineup-shop-button-arrow {
    background: #050505;
    border-color: #050505;
  }

  .lineup-shop-button:hover .lineup-shop-button-arrow .arrow-line {
    background: #FFF;
  }

  .lineup-shop-button:hover .lineup-shop-button-arrow .arrow-tip {
    border-top-color: #FFF;
    border-right-color: #FFF;
  }

}

/* ボタンテキストの切り替え */
.engine-project-button-text .button-text-pc {
  display: inline;
}

.engine-project-button-text .button-text-sp {
  display: none;
}

@media (max-width: 1024px) {
  .engine-project-button-text .button-text-pc {
    display: none;
  }

  .engine-project-button-text .button-text-sp {
    display: inline;
  }

  /* Features & Recommend ラッパー: 縦並びに変更 */
  .features-recommend-wrapper {
    flex-direction: column;
    align-items: center;
    padding-left: 0;
    margin-top: clamp(3.125rem, 2.51rem + 2.524vw, 5.125rem);
  }

  /* 区切り線を非表示 */
  .features-recommend-divider {
    display: none;
  }

  /* 下部のLine 63 SVGを非表示 */
  .features-recommend-line-svg {
    display: none;
  }

  /* Featuresセクションの調整 */
  .engine-features {
    text-align: left;
    align-items: flex-start;
    margin-right: clamp(1.25rem, -4.209rem + 22.397vw, 10.125rem);
    margin-left: clamp(1.25rem, -4.209rem + 22.397vw, 10.125rem);
  }

  .features-content {
    text-align: left;
  }

  .features-description {
    text-align: left;
  }

  .features-label {
    margin-left: 20px;
  }

  .features-title {
    margin-left: 20px;
  }

  .features-catchphrase {
    margin-left: 20px;
  }

  .features-description {
    margin-left: 20px;
    margin-right: 20px;
  }

  .features-image-wrapper {
    width: clamp(21.875rem, 10.726rem + 45.741vw, 40rem);
    margin-left: auto;
    margin-right: auto;
  }

  .features-graph-text {
    font-size: clamp(0.4375rem, 0.214rem + 0.911vw, 0.65rem);
  }

  /* 1024px以下: SP画像を表示 */
  .features-image-wrapper .pc {
    display: none;
  }

  .features-image-wrapper .sp {
    display: block;
  }

  /* Recommendセクションの調整 */
  .engine-recommend {
    margin-left: 0;
    margin-top: clamp(3.125rem, 2.51rem + 2.524vw, 5.125rem);
    text-align: left;
    margin-right: clamp(1.25rem, -4.209rem + 22.397vw, 10.125rem);
    margin-left: clamp(1.25rem, -4.209rem + 22.397vw, 10.125rem);
  }

  .recommend-label {
    margin-left: 20px;
  }

  .recommend-title {
    margin-left: 20px;
  }

  .recommend-catchphrase {
    margin-left: 20px;
  }

  .recommend-description {
    text-align: left;
    margin-left: 20px;
  }

  /* Recommendカードの調整 */
  .recommend-cards {
    width: clamp(21.875rem, 10.726rem + 45.741vw, 40rem);
  }

  .recommend-card {
    width: clamp(21.875rem, 10.726rem + 45.741vw, 40rem);
  }

  /* 1024px以下: SP画像を表示 */
  .recommend-card .pc {
    display: none;
  }

  .recommend-card .sp {
    display: block;
  }

  .introduction-label {
    margin-left: 20px;
  }

  .introduction-title {
    margin-left: 20px;
  }

  /* Product lineupセクションの調整 */
  .engine-lineup {
    text-align: center;
    margin-right: clamp(1.25rem, -4.209rem + 22.397vw, 10.125rem);
    margin-left: clamp(1.25rem, -4.209rem + 22.397vw, 10.125rem);

  }

  .lineup-shop-button-text .button-text-pc {
    display: none;
  }

  .lineup-shop-button-text .button-text-sp {
    display: inline;
  }
}

/* ============================
   768px以下: 商品縦並び
============================ */

@media (max-width: 768px) {
  .lineup-products {
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
  }

  .lineup-product {
    width: clamp(21.875rem, 10.726rem + 45.741vw, 34.375rem);
    align-items: flex-start;
  }

  .lineup-product-image {
    width: 100%;
  }

  .lineup-product-name {
    width: 100%;
  }

}

@media (max-width: 390px) {
  /* Keep 20px side margins on 375px screens */
  .mechanism-catchphrase {
    min-width: 0;
    width: auto;
  }

  .mechanism-gradient-box,
  .features-image-wrapper,
  .recommend-cards,
  .recommend-card,
  .introduction-bleague,
  .lineup-product {
    width: 100%;
    max-width: none;
  }
}