﻿/* 全体余白はそのまま */
.purpose_text {
 --section-leading: 45px; /* .section-title の margin-left と同じ */
 --title-text-gutter: 18px; /* .section-title の padding-left と同じ */
 height: auto;
 padding: 160px 0;
}

.section-lead {
 max-width: 680px;
 margin: 0 60px 40px;
 line-height: 1.7;
 font-size: 17px;
}

/* ===== 2カラムレイアウト ===== */
/* ===== 2カラムレイアウト ===== */
.purpose_text_inner {
 display: flex;
 flex-direction: column;
 align-items: center;
 max-width: 100%;
 margin: 0;
 margin-top: 20px;
 padding-inline: 61px;
}

/* 左側のビジュアル枠（画像が無くてもグレー箱で成立） */
.purpose-visual {
 background: #e9e9e9; /* 画像が無い場合の背景 */
 max-width: 960px;
 width: 100%;
 margin-inline: auto;
 aspect-ratio: 16 / 9;
 display: flex;
 align-items: center;
 justify-content: center;
}

.purpose-visual img {
 max-width: 62%;
 height: auto;
 object-fit: contain;
 display: block;
}

/* 右側テキストのベース */
.purpose__text-wrapper {
 position: relative;
 max-width: 800px;
 margin: 0 auto;
 padding: 0;
 overflow: visible;
 text-align: left;
}
.purpose__text {
 position: relative;
 display: block;
 z-index: 1;
 padding-block: 80px 0;
}

.purpose__text + .purpose__text {
 margin-top: 80px;
}

/* 行 */
.purpose__text p + p {
 margin-top: 0.4em;
}

/* 英語用（黄色棒） */
.purpose__en::before {
 content: none;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 width: 100%;
 height: 1px;
 background: #ffd600; /* より明るい黄色 */
 border-radius: 0;
}

/* 日本語用（グレー棒） */
.purpose__jp::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 width: 100%;
 height: 1px;
 background: #ffd600; /* グレー */
 border-radius: 0;
}

/* ベトナム語用（グレー棒） */
.purpose__vi::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 width: 100%;
 height: 1px;
 background: #ffd600;
 border-radius: 0;
}

.purpose__en::before {
 top: 0.2em; /* 文字の上に少し余白 */
}

/* 先頭のハッシュタグはマーカーを消す */
.purpose__line.no-marker {
 padding-left: 0;
}

.purpose__line.no-marker::before {
 display: none;
}

/* 英語・日本語・ベトナム語の文字サイズ */
.purpose__en {
 display: block;
 font-size: 24px;
 line-height: 1.5;
 margin-bottom: 0;
 font-weight: 700;
}

.purpose__jp,
.purpose__vi {
 display: block;
 font-size: 16px;
 line-height: 1.7;
}

.purpose__vi {
 margin-bottom: var(--set-gap);
}

.purpose__jp {
 margin-bottom: var(--set-gap);
}

.purpose__en_top {
 font-size: 34px;
 margin-left: 0;
}

/* タブレット */
@media (max-width: 768px) {
 .purpose_text {
  padding-block: 160px 100px;
 }
 .section-lead {
  max-width: unset;
  font-size: 16px;
  margin: 0 30px 40px;
 }
 .purpose_text_inner {
  margin-top: 20px;
  padding-inline: 30px;
 }
 .purpose__text-wrapper {
  max-width: unset;
 }
 .purpose__text + .purpose__text {
  margin-top: 60px;
 }

 .purpose__en {
  font-size: 20px;
 }
 .purpose__jp,
 .purpose__vi {
  font-size: 16px;
 }
 .purpose__en_top {
  font-size: 24px;
 }
}

.purpose-visual {
    background: #e9e9e9;
    max-width: 960px;
    width: 100%;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.purpose-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@media (max-width: 600px) {
 .purpose_text {
  padding-block: 100px 100px;
 }
 .section-lead {
  font-size: min(15.7px, 4.18vw);
  margin: 0 20px 20px;
 }
 .purpose_text_inner {
  margin-top: 20px;
  padding-inline: 0;
 }
 .purpose__text-wrapper {
  padding-inline: 20px;
 }
 .purpose__text {
  padding-block: 50px 0;
 }
 .purpose__text + .purpose__text {
  margin-top: 50px;
 }
 .purpose__en {
  font-size: 20px;
  font-weight: 600;
 }
 .purpose__jp,
 .purpose__vi {
  font-size: min(16.7px, 4.45vw);
 }

 .purpose__en_top {
  font-size: 24px;
 }
}


.purpose-subtitle-overlay {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: inline-block;
    width: auto;
    max-width: calc(100% - 32px);
    padding: 6px 12px;
    text-align: center;
    color: #fff;
    font-size: 22px;
    line-height: 1.6;
    text-shadow: 0 2px 8px rgba(0,0,0,.85);
    pointer-events: none;
    z-index: 9999;
    background: rgba(255, 0, 0, 0.25);
    box-sizing: border-box;
}