body {
 background-size: 100% auto
}

.main-content
{
  background: #F6F6F6;
}

.mainvisual {
 padding-bottom: 0px;
}


.mainvisual img {
    margin-left: 2.5%;
    margin-right: 2.5%;
    width: 95%;
    border-bottom-left-radius: 10vw;
    border-bottom-right-radius: 10vw;
}

@media screen and (max-width: 768px) {
.mainvisual img {
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    border-bottom-left-radius: 20vw;
    border-bottom-right-radius: 20vw;
}

    .c-scroll__icon.--pages {
        top: -80px;
        right: 0px;
        /*right: -12px;*/
    }
}

.wrap {
 max-width: 1280px;
 margin: auto;
 padding: 0 30px;
 font-family: "Zen Kaku Gothic New", sans-serif;
 font-weight: 500;
 font-style: normal
}

@media screen and (max-width:768px) {
  .wrap {
    padding: 0 16px 16px;
  }
  
}


.--text {
 color: #3b3b3b;
 -webkit-font-feature-settings: "palt"on;
 font-feature-settings: "palt"on;
 font-family: "Zen Kaku Gothic New";
 font-style: normal;
 font-weight: 500
}
@media screen and (min-width:769px) {
 .--text {
  width: 407px;
  font-size: 16px;
  line-height: 2.25 !important;
  letter-spacing: .64px
 }
}
@media screen and (max-width:768px) {
 .--text {
  padding: 0 10px;
  font-size: 14px;
  line-height: 2 !important;
  letter-spacing: .48px
 }
 .--text strong {
  font-weight: 900
 }
}
.--text p {
 line-height: 2.25 !important
}
@media screen and (min-width:769px) {
 .title-page {
  padding-top: 20px;
  max-width: 663px;
  width: 46.1475409836%;
  padding-left: 100px;
  padding-bottom: 64px
 }
}
@media screen and (max-width:768px) {
 .title-page {
  max-width: 282px;
  margin-left: -15px;
  padding-bottom: 35px
 }
}
@media screen and (min-width:769px) {
 .lang-en .title-page {
  max-width: 636px;
  width: 52.131147541%;
  padding-left: 50px
 }
}
.section {
 position: relative;
 z-index: 1
}
@media screen and (min-width:769px) {
 .section {
  padding-bottom: 128px
 }
}
@media screen and (max-width:768px) {
 .section {
  padding-bottom: 96px
 }
}


/*********************************************/
/* 背景画像PC */
@media screen and (min-width:769px) {
.ltv-bg-image02 {
  background-image: url(/jp/profile/long-term-vision/img/self-exploration_bg2.png), 
  url(/jp/profile/long-term-vision/img/self-exploration_bg1.png);
    
  background-repeat: no-repeat;
  background-position-y: -250px;
  background-position-x: 100px;
  
  background-size: 100%/*1154px*/ auto, 100% auto;
}
}

/* 背景画像SP */
@media screen and (max-width:768px) {
.ltv-bg-image02 {
  background-image: url(/jp/profile/long-term-vision/img/self-exploration_bg2_sp.png), 
  url(/jp/profile/long-term-vision/img/self-exploration_bg1_sp.png);
    
  background-repeat: no-repeat;
  
  background-size: 100%/*1154px*/ auto, 100% auto;
}
}



/* 縦並びの基本レイアウト（重なり防止は gap で保証） */
.q_and_a_list {
  display:flex;
  flex-direction:column;
  padding: 30px;
  gap:32px; /* 影や三角が触れるなら 24〜32px に調整 */
}


.q_and_a {
  display:flex;
  flex-direction:column;
  gap: 48px;
}

/* 1項目（Q or A）を1行にまとめる */
.balloon-row {
  display:flex;
  align-items:flex-start;     /* ← 上端揃え（Y座標一致） */
  gap: 16px;
}

@media screen and (max-width:768px) {
  .q_and_a_list {
    display:block;
    padding: 20px 0px;
    
  }

  .balloon-row {
    display:block;
  }
}

/* Q行＝テキスト左／画像右、A行＝画像左／テキスト右 */
.balloon-row.question { flex-direction: row; }
.balloon-row.answer {
	flex-direction: row-reverse;
	margin-bottom: 150px;
}

/* 各バルーンの共通 */
.balloon{
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.08));
  width: fit-content;
  max-width: 80%; /* テキスト側の最大幅 */
}

@media screen and (max-width:768px) {
  .balloon{
    max-width: 100%;
  }
}

/* （誤）.balloon .q →（正）.balloon.q （必要なら個別で調整） */
.question .balloon { max-width: 60%; }

@media screen and (max-width:768px) {
  .question .balloon { max-width: 100%; }
}

/* ====== 共通形状 ====== */
.balloon__shape{
  --tip: 24px;
  --pad: 32px;
  --pad-bottom: 10px;
  position:relative;
  display:inline-block;
  background:#fff;
  border-radius: 24px;
}

/* 本文（Q/Aの中身）。QとAで同じ。アイコン＋テキストを横並び */
.balloon__body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  padding: var(--pad);
  padding-bottom: var(--pad-bottom);
  padding-left: 48px;
  padding-right: 96px;
  line-height: 2.25 !important;
  letter-spacing: 0.04em;
  word-break: break-word;
}

@media screen and (max-width:960px) {
  .question .balloon__body {
    padding-right: 48px;
    padding-bottom: 12px;    
  }

  .answer .balloon__body {
    padding-right: 48px;
    padding-bottom: 12px;    
  }

  .balloon__body .text {
      /*font-size: 12px ;*/
  }  
}

@media screen and (max-width:768px) {
  .answer .balloon__body {
    padding: var(--pad);
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 12px;
  }

  .question .balloon__body {
    padding-left: 24px;
    padding-right: 32px;
    padding-bottom: 12px;    
  }

  .balloon__body .text {
      font-size: 14px ;
  }
}

.question .balloon__body { font-weight: 700; }
.answer .balloon__body { font-weight: 500; }

/* 三角（高さに含めない） */
.balloon__shape::before{
  content:"";
  position:absolute;
  width:var(--tip);
  height:var(--tip);
  background:inherit;
}
.balloon__shape::after{
  content:"";
  display:block;
  height:var(--tip);
}

/* 質問（左下三角・グレー） */
.question .balloon .balloon__shape{
  --bg:#D8DBDF;
  background: var(--bg);
  border-radius: 20px 20px 60px 0; /* TL, TR, BR, BL */
}
.question .balloon .balloon__shape::before{
  left: 0;
  bottom: calc(-1 * var(--tip));
  clip-path: polygon(0 100%, 0 0, 100% 0);
}

/* 回答（右下三角・白） */
.answer .balloon { align-self: flex-start; } /* 右寄せはrow側で管理するためここは上端揃えでOK */
.answer .balloon .balloon__shape{
  background:#fff;
  border-radius: 30px 30px 0 90px;
}
.answer .balloon .balloon__shape::before{
  right: 0;
  bottom: calc(-1 * var(--tip));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* 画像コンテナ（複数画像の塊） */
/* --- デフォルト：見切れない（contain） --- */
.media-grid{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 列幅は自動 */
  gap: 8px;
  max-width: min(48vw, 420px); /* お好みで上限 */
}

.media-grid figure{
  margin: 0;
  border-radius: 12px;
  overflow: hidden;        /* 角丸のために維持（クロップには影響しない） */
  background: transparent;        /* レターボックス時の背景 */
}

/* 画像はトリミングしない */
.media-grid img{
  width: 100%;
  height: auto;            /* ← これが重要：高さ自動 */
  object-fit: contain;     /* ← 見切れない */
  display: block;
  max-height: clamp(120px, 40vh, 560px); /* 暴れ防止（必要に応じ調整/削除可） */
}

/* --- 必要なときだけ：均一タイル（クロップ） --- */
.media-grid--cover{
  grid-template-columns: repeat(2, 120px);
  grid-auto-rows: 120px;
  max-width: 280px;
}
.media-grid--cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* ← クロップ */
}


/* アイコンは固定サイズで縦に詰める */
.icon_q, .icon_a {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}
.icon_q:after{
  content: "Q";
  width: 32px; height: 28px;
  font-family: 'Poppins';
  font-weight: 700; font-size: 40px; line-height: 40px;
  leading-trim: both; text-edge: cap;
  letter-spacing: 0.06em; font-feature-settings: 'palt' on;
  color: #C2C2C2;
}
.icon_a:after{
  content: "A";
  width: 30px; height: 28px;
  font-family: 'Poppins';
  font-weight: 700; font-size: 40px; line-height: 40px;
  leading-trim: both; text-edge: cap;
  letter-spacing: 0.06em; font-feature-settings: 'palt' on;
  color: #ECECEC;
}

@media screen and (max-width: 768px) {
  .icon_q:after {
    width: 24px; height: 21px;
  }
  .icon_a:after {
    width: 24px; height: 21px;
  }  
}

/* 既存のfigure個別指定を“グリッド用に”最小限流用したければここで */
.fig0101, .fig0102 { margin:0; }

.fig0101 {
    width: 250px !important;
}

/* スマホ：上下積みにするなら */
@media (max-width: 600px){
  .balloon__shape{ --pad: 24px; }
  .balloon-row{ flex-direction: column; }
  .media-grid{
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 96px;
    max-width: 100%;
  }
}


/* 画像コンテナ（左右どちらにも置ける） */
.media-stack{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;   /* 縦にスタック */
  gap: 8px;                 /* アイテム間の基本間隔 */
  max-width: min(48vw, 420px);
}

/* 念のため、回答行では画像の方を先に（左側） */
.balloon-row.answer .media-stack{ order: 1; }
.balloon-row.answer .balloon  { order: 0;     }

.balloon-row.question .media-stack{ order: 1; }
.balloon-row.question .balloon   { order: 0;  }

@media screen and (max-width:768px) {
.balloon-row.answer .media-stack{ order: 0; }
.balloon-row.answer .balloon  { order: 1;     }

.balloon-row.question .media-stack{ order: 0; }
.balloon-row.question .balloon   { order: 1;  }

}

/* Q側＝右に寄せたいなら */
._media-stack--right{ margin-left: auto; }
/* A側＝左に寄せたいなら */
._media-stack--left{ margin-right: auto; }

/* 行（横並びをしたい時に使う。1〜N個OK） */
.media-row{
  display: flex;
  align-items: flex-start;
  /*gap: 8px;*/                 /* 同じ行内の間隔 */
  max-width: 40%;
}

/* 画像アイテム（重ならない。サイズはクラスで調整可能） */
.media-item{
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;         /* 角丸 */
  background: transparent;  /* 透過PNG活かす */
  box-sizing: border-box;
}

/* 画像は見切らない（必要なら cover 版クラスを別途用意可能） */
.media-item img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  background: transparent;
}

/* —— 幅プリセット（必要に応じて増減） —— */
.w-120{ width:120px; } .w-160{ width:160px; } .w-200{ width:200px; } .w-240{ width:240px; }

/* —— 縦方向の位置を“少し”ずらすための安全なオフセット（マージンで重ならない） —— */
.mt-0{ margin-top: 0; }  .mt-8{ margin-top: 8px; }  .mt-16{ margin-top: 16px; }
.mt-24{ margin-top: 24px; } .mt-32{ margin-top: 32px; } .mt-40{ margin-top: 40px; }

/* スマホで窮屈なら、1列に落とす（任意） */
@media (max-width: 600px){
  .media-stack{ max-width: 100%; }
  .media-row{ flex-wrap: wrap; } /* 横幅が足りないと自動で折返す */
}



/* 全体コンテナ */
.introduction {
  /*max-width: 1062px;*/
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 140px;
  position: relative; /* 保険的に設定（不要なら削除OK） */
  box-sizing: border-box;
}

@media screen and (max-width:768px) {
  .introduction {
    padding: 6px;
  }
}


/* 画像とボタンをまとめるコンテナ */
.image-area-wrapper {
  position: relative;        /* ボタンのabsolute配置の基準になる */
  display: inline-block;     /* 画像サイズに合わせる */
  vertical-align: bottom;    /* 周囲との整列を安定させる */
}

/* 画像を横並びに配置 */
.image-area {
  display: flex;
  gap: 0;                 /* 画像同士の間隔 */
  padding: 16px;
  background-color: #FFF;  
}

.image-area img {
  /*margin-left: -2px;*/
  display: block;           /* インライン要素の隙間対策 */
  width: 33%;
  height: auto;
  vertical-align: bottom;
}

@media screen and (max-width:768px) {
  .image-area {
    display: block;
  }
  .image-area img {
    display: block;           /* インライン要素の隙間対策 */
    width: 100%;  
  }
}

/* ボタンを画像右下に重ねる */
.introduction .btn {
  position: absolute;
  display: flex;               /* ★ 追加：フレックスボックス化 */
  align-items: center;         /* ★ 追加：上下中央寄せ */
  justify-content: center;     /* ★ 追加：左右中央寄せ */

  right: 0;                /* 親(image-area-wrapper)の右端基準 */
  bottom: 0;               /* 親の下端基準 */
  width: 360px;
  height: 61px;
  background-color: #D32D26;

  color: #fff !important;
  padding: 0;
  font-size: 18px !important;
  font-weight: bold;
  cursor: pointer;
  
  transition: background-color 0.3s ease;
  white-space: nowrap;     /* テキストが折り返されないように */
}

.icon-right-arrow {
  width: 20px;
  margin-left: 8px;
}

@media screen and (max-width: 768px) {
    .footer-content__title {
        font-size: 12px;
    }
}

.introduction .btn .text
{
  font-size: 18px !important;
}

.lang-en .introduction .btn .text
{
  font-size: 16px !important;
}


@media screen and (max-width:768px) {
  .introduction .btn
  {
      width: 260px;
      left: 16px;
  }

.introduction .btn .text
{
  font-size: 14px !important;
}

.lang-en .introduction .btn .text
{
  font-size: 13px !important;
}

}

.introduction .btn:visited {
  color: #fff;
}

.introduction .btn:hover {
  color: #fff;
  background-color: #8f0d0d;
}

@media screen and (min-width:769px) {
.row-02-1 {
  margin-left: 200px;
  margin-left: min(200px, calc(30vw - 200px));
}


.row-03-1 {
  margin-left: calc(5vw - 20px);
}

.row-05-1 {
  margin-left: min(140px, calc(20vw - 100px));
  margin-top: 260px;
}
}

/* 画像レイアウト調整 */
@media screen and (min-width:769px) {
.fig-01 {
    margin-top: 0px;
    width: 20vw;
    max-width: 250px;
}

.fig-02 {
    margin-top: 250px;
    margin-left: -50px;
    width: 15vw;
    max-width: 200px;
}

.fig-03 {
    margin-top:  max(-260px, calc(80px - 26vw));
    margin-left: 70px;
    width: 25vw;
    max-width: 360px;
}

.fig-04 {
    margin-top: 120px;
    margin-right: 100px;
    width: 27vw;
    max-width: 270px;
}

.fig-05 {
    margin-top: -180px;
    margin-top: max(-200px, calc(100px - 20vw));
    margin-left: min(120px, calc(-200px + 25vw));
    width: 12vw;
    max-width: 190px;
}

.fig-06 {
    margin-top: -100px;
    margin-left: 30px;
    width: 20vw;
    max-width: 270px;
}

.fig-07 {
    margin-top: 120px;
    margin-right: 100px;
    margin-right: min(100px, max(10px, calc(-200px + 25vw)));
    width: 28vw;
    max-width: 330px;
}

.fig-08 {
    margin-top: -180px;
    margin-top: max(-180px, calc(50px - 18vw));
    /*margin-left: 100px;*/
    margin-left: min(100px, calc(-200px + 25vw));
    width: 24vw;
    max-width: 300px;
}

.fig-09 {
    /*margin-top: -300px;*/
    margin-top: max(-350px, calc(150px - 40vw));
    margin-left: 30px;
    width: 36vw;
    max-width: 460px;
}

.fig-10 {
    margin-top: 120px;
    margin-right: 100px;
    width: 27vw;
    max-width: 270px;
}
}

@media screen and (max-width:768px) {
.fig-01 {
    margin-top: 0px;
    width: 50vw;
    max-width: 250px;
}

.fig-02 {
    margin-left: 90%;
    width: 40vw;
}

.fig-03 {

    margin-left: 80%;
    width: 60vw;
}

.fig-04 {
    width: 50vw;
}

.fig-05 {
    width: 30vw;
}

.fig-06 {
    width: 50vw;
    margin-left: 80%;
}

.fig-07 {
    width: 50vw;
}

.fig-08 {
  margin-left: 30vw;
  margin-top: -60px;
  width: 50vw;    
}

.fig-09 {
    margin-left: 5%;
    margin-top: -50px;
    width: 90vw;
}

.fig-10 {
    margin-left: 10%;
    width: 50vw;
}
}

@media screen and (max-width: 768px) {
    .footer-navi {
        padding: 64px 30px;
    }
}