/* ============================
   Future Page - 今後の展望
============================ */

/* Page Container */
#page-future.page-top-under {
  padding-bottom: 0;
}

/* ============================
   �-2��໯���
============================ */

/* Section Container */
.vision-intro-section {
  position: relative;
  z-index: 2;
}

.vision-intro-container {
  max-width: clamp(21.875rem, 1.961rem + 81.7vw, 100rem); /* 350px at 390px, 1600px at 1920px */
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(2rem, -0.683rem + 3.902vw, 4rem); /* 30px at 390px, 150px at 1920px */
}

/* ǹ����: *&s */
@media screen and (min-width: 1025px) {
  .vision-intro-container {
    flex-direction: row;
  }

  /* �t: dD'Mjƭ�� */
  .vision-intro-left {
    flex: 0 1 auto;
    width: clamp(19.375rem, 13.863rem + 22.614vw, 41rem);
    margin-top: 6.438rem;
  }

  /* �t: �ƭ�� */
  .vision-intro-right {
    flex: 0 1 auto;
    width: clamp(21.875rem, 3.137rem + 76.87vw, 49.125rem); /* 350px at 390px, 786px at 1920px */
    margin-top: clamp(4rem, 3.187rem + 3.334vw, 7.188rem); 
  }
}

/* �Ф�: &&s */
@media screen and (max-width: 1024px) {
  .vision-intro-container {
    flex-direction: column;
    padding: 0 clamp(2.5rem, 1.861rem + 2.623vw, 3.5rem); /* 20px�� */
    max-width: 820px;
    gap: 0; /* gapを無効化 */
  }

  /* �t: dD'Mjƭ�� */
  .vision-intro-left {
    width: 100%;
    margin-top: clamp(3.75rem, 3.75rem + 0vw, 3.75rem); /* 60px�� */
  }

  /* �t: �ƭ�� */
  .vision-intro-right {
    width: 100%;
    margin-top: clamp(3.75rem, 3.75rem + 0vw, 3.75rem); /* 60px�� */
  }
}

/* �t: dD'Mjƭ�� */
.vision-intro-message {
  color: #BA2A20;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.75rem, -0.5rem + 2.5vw, 2.5rem); /* 20px at 390px, 40px at 1920px */
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: clamp(0rem, 0.157rem + -0.131vw, 0.125rem); /* 2px at 390px, 0px at 1920px */
  margin: 0;
  text-align: left;
}

@media screen and (max-width: 1439px) {
  .vision-intro-message {
  font-size: clamp(1.25rem, 1.064rem + 0.762vw, 1.75rem);
  line-height: 160%;
}
.vision-intro-left {
  margin-top : clamp(3.75rem, 2.752rem + 4.096vw, 6.438rem);
}
}


/* デスクトップ版: 1000px以上で表示 */
.vision-intro-message-desktop {
  display: block;
}

.vision-intro-message-mobile {
  display: none;
}

/* 1行目と3行目を"の位置に合わせるインデント */
.vision-line-indent {
  padding-left: clamp(1rem, 0.457rem + 0.87vw, 1.5rem);
}

/* モバイル版: 999px以下で表示 */
@media screen and (max-width: 1024px) {
  .vision-intro-message {
    letter-spacing: 0.125rem; /* 2px */
  }

  .vision-intro-message-desktop {
    display: none;
  }

  .vision-intro-message-mobile {
    display: block;
  }
}

/* �t: �ƭ�� */
.vision-intro-description {
  color: #050505;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1rem, 0.625rem + 0.417vw, 1.125rem); /* 16px at 390px, 18px at 1920px */
  font-style: normal;
  font-weight: clamp(400, 400 + 0, 500); /* 400 at 390px, 500 at 1920px */
  line-height: clamp(1.75rem, 1.382rem + 1.511vw, 3.195rem); /* 28px at 390px, 51.12px at 1920px */
  letter-spacing: clamp(0rem, 0.1rem + -0.084vw, 0.08rem); /* 1.28px at 390px, 0px at 1920px */
  margin: 0;
  text-align: left;
}

/* ��: letter-spacing�� */
@media screen and (max-width: 1024px) {
  .vision-intro-description {
    font-weight: 400;
    letter-spacing: 0.07rem; /* 1.28px */
  }
}

/* ǹ����: font-weight�� */
@media screen and (min-width: 1025px) {
  .vision-intro-description {
    font-weight: 500;
    letter-spacing: 0;
  }
}

/* ============================
   ビジョンカードセクション
============================ */

/* Section Container */
.vision-cards-section {
  margin-top: clamp(6.875rem, 4.23rem + 10.85vw, 17.25rem); /* 97px at 390px, 276px at 1920px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3.75rem, 2.363rem + 5.69vw, 9.188rem); /* 60px at 390px, 147px at 1920px */
  padding-right: 20px;
  padding-left: 20px;
  position: relative; /* 縦線の基準位置 */
}

/* 縦線: カードを貫通する1本の線 */
.vision-cards-section::before {
  content: '';
  position: absolute;
  left: clamp(5.563rem, 0.656rem + 20.13vw, 24.813rem); /* 89px at 390px, 397px at 1920px */
  top: clamp(-9.375rem, -2.317rem - 5.88vw, -3.75rem); /* -150px at 1920px, -60px at 390px */
  width: 1px;
  height: clamp(103.25rem, 163.17rem - 49.93vw, 151rem); /* 1652px at 1920px, 2416px at 390px */
  background: #BA2A20;
  z-index: 0; /* カードの背面 */
}

/* Vision Card */
.vision-card {
  width: clamp(21.875rem, 1.961rem + 81.7vw, 100rem); /* 350px at 390px, 1600px at 1920px */
  border-radius: clamp(1rem, 0.459rem + 2.22vw, 3.125rem); /* 16px at 390px, 50px at 1920px */
  border: 1px solid #BA2A20;
  background: #FFF;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  position: relative; /* z-indexを有効にする */
  z-index: 1; /* 縦線の前面 */
}

/* デスクトップ: 横並び（左に画像、右にコンテンツ） */
@media screen and (min-width: 1024px) {
  .vision-card {
    flex-direction: row;
    height: clamp(21.875rem, 19.82rem + 8.43vw, 29.938rem); /* カードの高さを画像と同じにする */
  }

  .vision-cards-section::before {
    height: 1450px; /* 1652px at 1920px, 2416px at 390px */
  }

  .vision-card-image {
    width: clamp(21.875rem, 19.82rem + 8.43vw, 29.938rem); /* 350px at 390px, 479px at 1920px */
    height: calc(100% + 2px); /* カードの高さ + ボーダー分 */
    margin: -1px 0 -1px -1px; /* ボーダーの位置まで拡張（上、右、下、左） */
    flex-shrink: 0;
  }

  .vision-card-content {
    flex: 1;
    padding-top: clamp(2.063rem, 1.553rem + 2.09vw, 4.063rem); /* 上: 33px→65px, 右: 32px→82px, 下: 32px→50px, 左: 32px→82px */
    padding-left:clamp(1.563rem, 1.165rem + 1.633vw, 3.125rem) ;
    padding-right:clamp(0.94rem, 0.67rem + 1.108vw, 2rem) ;
    padding-bottom:clamp(2.063rem, 1.553rem + 2.09vw, 4.063rem);
  }
  .vision-card-content {
    flex: 1;
    padding-top: clamp(1rem, -2.329rem + 5.327vw, 4.063rem); /* 上: 33px→65px, 右: 32px→82px, 下: 32px→50px, 左: 32px→82px */
    padding-left:clamp(1.563rem, 1.165rem + 1.633vw, 3.125rem) ;
    padding-right:clamp(0.94rem, 0.67rem + 1.108vw, 2rem) ;
    padding-bottom:clamp(1rem, -2.329rem + 5.327vw, 4.063rem);
  }
}

/* モバイル: 縦並び（上に画像、下にコンテンツ） */
@media screen and (max-width: 1024px) {
  .vision-card {
    flex-direction: column;
    height: auto;
    min-height: clamp(40rem, 36.522rem + 14.264vw, 49.5rem); /* 640px at 390px, 792px at 768px */
    max-width: 650px;
  }

  .vision-card-image {
    width: calc(100% + 2px); /* カードの幅 + ボーダー分 */
    height: clamp(21.875rem, 11.956rem + 40.694vw, 38rem); /* 350px at 390px, 440px at 768px */
    margin: -1px -1px 0 -1px; /* ボーダーの位置まで拡張（上、右、下、左） */
    flex-shrink: 0;
  }

  .vision-card-content {
    flex: 1;
    padding: clamp(2.063rem, 2.063rem + 0vw, 2.063rem) clamp(0.938rem, 0.592rem + 1.418vw, 1.5rem) clamp(2.5rem, 2.5rem + 0vw, 2.5rem) clamp(1.438rem, 1.091rem + 1.42vw, 2rem); /* 上: 33px, 右: 25px, 下: 25px, 左: 25px */
  }
}

/* Card Image */
.vision-card-image {
  overflow: hidden;
  position: relative;
  border-radius: clamp(1rem, 0.459rem + 2.22vw, 3.125rem); /* 16px at 390px, 50px at 1920px - 4つの角すべて */
}

.vision-card-image img {
  display: block; /* インライン要素の隙間を削除 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card Content */
.vision-card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Label (Short-term, Mid-term, Long-term) */
.vision-card-label {
  color: rgba(159, 33, 7, 0.50);
  font-family: Raleway, sans-serif;
  font-size: 0.988rem; /* 15.808px */
  font-style: italic;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 clamp(0.313rem, -0.026rem + 0.543vw, 0.625rem) 0; /* 下に10px */
}

.vision-card-subtitle {
  color: #050505;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.875rem, 0.774rem + 0.413vw, 1.270rem); /* 14px at 390px, 20.324px at 1920px */
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: clamp(0.044rem, 0.044rem + 0vw, 0.044rem); /* 0.7px at 390px, 0px at 1920px */
  margin: 0 0 clamp(0.5rem, -0.995rem + 2.391vw, 1.875rem) 0; /* 下: 20px at 390px, 30px at 1920px */
}

/* デスクトップ: letter-spacing 0 */
@media screen and (min-width: 1025px) {
  .vision-card-subtitle {
    letter-spacing: 0;
  }
}

/* モバイル: letter-spacing 0.7px */
@media screen and (max-width: 1024px) {
  .vision-card-subtitle {
    letter-spacing: 0.044rem; /* 0.7px */
  }
  .vision-card-subtitle {
    margin-bottom:20px;
  }
}


.vision-card-title {
  color: #BA2A20;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.25rem, 1.059rem + 0.784vw, 2rem); /* 20px at 390px, 32px at 1920px */
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: clamp(0.063rem, 0.063rem + 0vw, 0.2rem); /* 1px at 390px, 3.2px at 1920px */
  margin: 0 0 clamp(0.5rem, -1.878rem + 3.805vw, 2.688rem) 0; /* 下: 12px at 390px, 43px at 1920px */
}

/* デスクトップ: line-height 190%, letter-spacing 3.2px */
@media screen and (min-width: 1600px) {
  .vision-card-title {
    line-height: 190%;
  }
}

@media screen and (min-width: 1200px) {
  .vision-card-title {
    letter-spacing: 0.2rem; /* 3.2px */
  }
}

@media screen and (max-width: 1807px) {
.vision-card-content {
  justify-content: center;
}
}

/* モバイル: line-height 160%, letter-spacing 1px */
@media screen and (max-width: 1024px) {
  .vision-card-title {
    line-height: 160%;
    letter-spacing: 0.063rem; /* 1px */
    margin: 0 0 clamp(0.75rem, 0.43rem + 1.311vw, 1.25rem) 0; /* 下: 12px at 390px, 43px at 1920px */
  }
}

/* Description (説明文) */
.vision-card-description {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.875rem, 0.843rem + 0.131vw, 1rem); /* 14px at 390px, 16px at 1920px */
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  letter-spacing: clamp(0.018rem, 0.018rem + 0vw, 0rem); /* 0.28px at 390px, 0px at 1920px */
  margin: 0;
}



/* デスクトップ: letter-spacing 0 */
@media screen and (min-width: 1025px) {
  .vision-card-description {
    letter-spacing: 0;
  }
}

/* モバイル: letter-spacing 0.28px */
@media screen and (max-width: 1024px) {
  .vision-card-description {
    letter-spacing: 0.018rem; /* 0.28px */
  }
}

/* 長期ビジョン: 「を」の左側スペース調整（デスクトップのみ） */
@media screen and (min-width: 1025px) {
  .vision-card-title .adjust-space {
    margin-left: -0.5em; /* 半角スペース分左に寄せる */
  }
}

/* 460px以下でbrを非表示 */
@media screen and (max-width: 460px) {
  .hide-mobile-460 {
    display: none;
  }
}

/* ============================
   CEOメッセージセクション
============================ */

/* Section Container */
.vision-ceo-section {
  margin-top: clamp(6.25rem, 4.902rem + 5.53vw, 11.25rem); /* 100px at 390px, 180px at 1920px */
  position: relative;
}

.vision-ceo-container {
  max-width: clamp(21.875rem, 3.745rem + 74.379vw, 93rem); /* 350px at 390px, 1600px at 1920px */
  margin-left: clamp(2.5rem, 0.589rem + 7.843vw, 10rem); /* 40px at 390px, 160px at 1920px */
  margin-right: clamp(2.5rem, 0.589rem + 7.843vw, 10rem);
  display: flex;
  box-sizing: border-box;
  position: relative; /* デコレーション画像の基準位置 */
}

/* デスクトップ: 横並び（左に画像、右にコンテンツ） */
@media screen and (min-width: 1025px) {
  .vision-ceo-container {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(2rem, -3.118rem + 7.987vw, 5.563rem); /* 89px at 1920px */
  }

  .vision-ceo-image {
    width: clamp(19.38rem, 16.688rem + 11.043vw, 29.94rem); /* 310px at 390px, 479px at 1920px */
    height: clamp(25.06rem, 21.698rem + 13.793vw, 38.25rem); /* 401.374px at 390px, 612.198px at 1920px */
    flex-shrink: 0;
  }

  .vision-ceo-content {
    flex: 1;
    padding-top: clamp(3rem, 2.426rem + 2.353vw, 5.25rem); /* 84px at 1920px */
  }
}

/* モバイル: 縦並び（上に画像、下にコンテンツ） */
@media screen and (max-width: 1024px) {
  .vision-ceo-container {
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    max-width: 650px;
    width: clamp(21.875rem, 1.961rem + 81.7vw, 100rem);
}

  .vision-ceo-image {
    width: clamp(19.38rem, 6.996rem + 50.807vw, 38.75rem);
    height: clamp(25.06rem, 9.032rem + 65.757vw, 50.13rem);
    flex-shrink: 0;
  }

  .vision-ceo-content {
    max-width: 620px;
    /* width: 100%; */
    width: clamp(19.38rem, 6.996rem + 50.807vw, 38.75rem);
    margin-top: clamp(3.813rem, 3.813rem + 0vw, 3.813rem);
    position: relative; /* テキストを前面に表示するため */
    z-index: 1; /* テキストを前面に */
}
}

/* CEO Image */
.vision-ceo-image {
  overflow: hidden;
}

.vision-ceo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CEO Content */
.vision-ceo-content {
  display: flex;
  flex-direction: column;
}

/* Title (原点は"人を助けたい"。) */
.vision-ceo-title {
  color: #BA2A20;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.25rem, 1.059rem + 0.784vw, 2.5rem); /* 20px at 390px, 40px at 1920px */
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: clamp(0.125rem, 0.125rem + 0vw, 0rem); /* 2px at 390px, 0px at 1920px */
  margin: 0;
}

/* デスクトップ: letter-spacing 0 */
@media screen and (min-width: 1025px) {
  .vision-ceo-title {
    letter-spacing: 0;
  }
}

/* モバイル: letter-spacing 2px, line-height 160% */
@media screen and (max-width: 1024px) {
  .vision-ceo-title {
    letter-spacing: 0.125rem; /* 2px */
    line-height: 160%;
  }
  .vision-ceo-image img {
    border-radius: clamp(1.88rem, 0.282rem + 6.557vw, 4.38rem);
  }
}

/* Subtitle (健康をデザインする企業として...) */
.vision-ceo-subtitle {
  color: #BA2A20;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.25rem, 1.059rem + 0.784vw, 2.5rem); /* 20px at 390px, 40px at 1920px */
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: clamp(0.125rem, 0.125rem + 0vw, 0rem); /* 2px at 390px, 0px at 1920px */
  margin: clamp(1.875rem, 1.461rem + 1.699vw, 3.5rem) 0 0 0; /* 30px at 390px, 56px at 1920px */
}

/* デスクトップ: letter-spacing 0 */
@media screen and (min-width: 1025px) {
  .vision-ceo-subtitle {
    letter-spacing: 0;
  }
}

/* モバイル: letter-spacing 2px, line-height 160% */
@media screen and (max-width: 1024px) {
  .vision-ceo-subtitle {
    letter-spacing: 0.125rem; /* 2px */
    line-height: 160%;
  }
}

/* Description (説明文) */
.vision-ceo-description {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1rem, 0.968rem + 0.131vw, 1.125rem); /* 16px at 390px, 18px at 1920px */
  font-style: normal;
  font-weight: 500;
  line-height: clamp(1.75rem, 1.75rem + 0vw, 2.25rem); /* 28px at 390px, 36px at 1920px (200%) */
  letter-spacing: clamp(0rem, 0.08rem + -0.067vw, 0.08rem); /* 1.28px at 390px, 0px at 1920px */
  margin: clamp(2.5rem, 1.929rem + 2.353vw, 4.75rem) 0 0 clamp(0rem, -0.191rem + 0.784vw, 0.438rem); /* 上: 40px at 390px, 76px at 1920px, 左: 0px at 390px, 7px at 1920px */
  
}

/* デスクトップ: letter-spacing 0, line-height 200% */
@media screen and (min-width: 1025px) {
  .vision-ceo-description {
    letter-spacing: 0;
    line-height: 200%;
   
  }
}

@media screen and (min-width: 1500px) {
  .vision-ceo-description {
    min-width: 45rem;
  }
}

/* モバイル: letter-spacing 1.28px, line-height 28px */
@media screen and (max-width: 1024px) {
  .vision-ceo-description {
    color: #050505;
    letter-spacing: 0.08rem; /* 1.28px */
    line-height: 1.75rem; /* 28px */
  }
}

/* CEO Decoration Image */
.vision-ceo-decoration {
  position: absolute;
  z-index: 0; /* テキストの背面 */
  overflow: hidden;
}

/* デスクトップ: CEOの写真の右端から710px右、64px低い位置 */
@media screen and (min-width: 1025px) {
  .vision-ceo-decoration {
    left: clamp(10.3rem, -6.014rem + 66.928vw, 74.3rem);
    top: clamp(2rem, 1.936rem + 0.261vw, 2.25rem);
    width: clamp(12.75rem, 11.221rem + 6.275vw, 18.75rem);
    height: clamp(17.94rem, 15.806rem + 8.753vw, 26.31rem);
}
}

/* モバイル: .vision-ceo-containerの右端に合わせる、画像の30px下 */
@media screen and (max-width: 1024px) {
  .vision-ceo-decoration {
    position: absolute; /* 絶対配置 */
    z-index: 0; /* テキストの背面 */
    right: 0; /* 右寄せ */
    top: calc(clamp(25.06rem, 9.032rem + 65.757vw, 50.13rem) + 1.875rem); /* 画像の高さ + 30px */
    width: clamp(12.75rem, 12.75rem + 0vw, 12.75rem); /* 204px固定 */
    height: clamp(17.938rem, 17.938rem + 0vw, 17.938rem); /* 287px固定 */
    margin-right: 20px;
  }
}

.vision-ceo-decoration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  
}

/* Contact Section Spacing - Vision Page Only */
#page-future ~ #contact {
  margin-top: clamp(10rem, 7.642rem + 9.673vw, 19.25rem);
}

/* 1750px以上で改行を表示 */
.pc-br-1750 {
  display: none;
}

@media screen and (min-width: 1750px) {
  .pc-br-1750 {
    display: inline;
  }
}

/* 389px以下でbrを非表示 */
@media screen and (max-width: 389px) {
  .br-hide-389 {
    display: none;
  }
}