/* -----------------------------------
   ページ内リンクの固定ヘッダー分ずれ回避
   ----------------------------------- */
section.anchor {
    padding-top: 50px;
    margin-top:-50px;
}


/* -----------------------------------
   インデックスリスト
   ----------------------------------- */
/* 白背景、右に矢印 */
.indexList	{
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #ddd; /* リストの上に薄い線 */
}

.indexList li	{
  display: flex;
  align-items: center;              /* 縦中央揃え */
  justify-content: space-between;   /* テキストとアイコンを両端に配置 */
  padding: 3.4cqw 2cqw 3.4cqw 4cqw ;	    /* 上 | 右 | 下 | 左 */
  border-bottom: 1px solid #ddd; /* 下線 */
}
	
.indexList a {
  text-decoration: none; /* 下線を消す */
  color: #000000;	 /* テキストカラー */
  font-weight: 500; /* 500=Medium */
  font-size: 4.2cqw;	 /* フォントサイズ */
  letter-spacing: -0.1em; /* 文字間隔 */
  flex: 1;               /* アイコンを右に寄せるためリンクを広げる */}

.indexList li::after {
  /* Font Awesome アイコン (fa-chevron-right) の表示に必要なプロパティ */
  content: "\f054"; /* fa-chevron-right の Unicode */
  font-family: "Font Awesome 7 Free"; 
  font-weight: 900; /* Solid アイコン用 */

  /* スタイルの適用 */
  color: #C0C0C0; /* アイコンの色 */
  font-size: 3.8cqw; /* アイコンサイズ */
  
  /* Flexbox内での調整 */
  margin-left: 2cqw; /* リンクテキストとの間隔を確保 */
  flex-shrink: 0; /* アイコンが縮まないように固定 */
}


/* -----------------------------------
   下線（文章は改行しないで<span>で囲む）
   ----------------------------------- */
/* 色（#D7EEFF）つきの太い下線（少し下線が文字と重なる） */
.colorful-underline {
    position: relative;
    display: inline-block;
}
.colorful-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.12em; /* 文字の下端より少し下に配置 */
    height: 0.7em;  /* 下線の太さ */
    background: #D7EEFF;
    mix-blend-mode: multiply; /* ← 文字の下に自然に馴染む */
}


/* -----------------------------------
   枠線付きの吹き出し
   ----------------------------------- */
/* 外側のコンテナ（上下の余白調整用） */
.balloon-container {
  width: 100%;
  padding: 5cqw 0;
  display: flex;
  justify-content: center;
}

/* 吹き出しの本体（長方形部分） */
.balloon-box {
  position: relative;
  width: 90cqw;         /* 幅 90% */
  height: 35cqw;        /* 高さ 35cqw */
  background: #fff;     /* 背景：白 */
  border: 2px solid #3f8cd0; /* 枠線：水色 */
  border-radius: 5px;   /* 角のわずかな丸み */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  /* text-align: center; */
}

/* 吹き出しの突起（枠線部分：::before） */
.balloon-box::before {
  content: "";
  position: absolute;
  bottom: -8.5cqw;      /* 突起の高さ＋枠線分 */
  left: 50%;
  transform: translateX(-50%);
  border-left: 2.5cqw solid transparent;  /* 幅5cqwの半分 */
  border-right: 2.5cqw solid transparent; /* 幅5cqwの半分 */
  border-top: 8.5cqw solid #3f8cd0;       /* 突起の高さ＋枠線分 */
}

/* 吹き出しの突起（内側の白塗り：::after） */
.balloon-box::after {
  content: "";
  position: absolute;
  bottom: -7.8cqw;        /* 突起の高さ */
  left: 50%;
  transform: translateX(-50%);
  border-left: 2.3cqw solid transparent;
  border-right: 2.3cqw solid transparent;
  border-top: 8cqw solid #fff;            /* 内側を白く塗る */
}

/* 中のテキスト調整 
.balloon-text {
  font-size: 4.2cqw;
  line-height: 1.6;
  color: #333;
  font-weight: bold;
  margin: 0;
  padding: 0 3cqw;
}
 */


/* -----------------------------------
   ご相談の流れセクション
   ----------------------------------- */
/* 全体
.step-section {
    width: 100%;
    padding: 5cqw 0;
    background: #f9f9f9;
}
 */

/* 共通の長方形ボックス */
.step-box {
    position: relative;
    width: 90cqw;         /* 横幅90cqw */
    height: 42.5cqw;      /* 高さ42.5cqw */
    margin: 0 auto;       /* 横中央配置 */
    background: #fff;     /* 背景白 */
    border-radius: 10px;  /* 角丸（任意） */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直方向中央 */
    align-items: center;     /* 水平方向中央 */
}

/* STEPラベルの配置計算：
   画面左端(0)から7cqwの位置。
   親の.step-boxが中央寄せ(左右余白5cqw)なので、
   box内では left: 2cqw にすると (5+2=7cqw) になります。
*/
.step-label {
    position: absolute;
    top: -6.0cqw;
    left: 2cqw;
    width: 11cqw;         /* 指定の幅 */
}

/* イラスト共通設定 */
.step-content {
    text-align: center;
    width: 100%;
}

.step-content img {
    display: block;
    margin: 0 auto 2cqw;
}

/* 各イラストごとの幅指定
.illust-01 { width: 51.5cqw; }
.illust-02 { width: 46.9cqw; }
.illust-03 { width: 40.6cqw; }
.illust-04 { width: 43.7cqw; }
 */

/* テキスト設定
.step-text {
    font-size: 3.8cqw;
    line-height: 1.4;
    color: #333;
    font-weight: bold;
    margin: 0;
}
 */

/* ステップ間の矢印（CSSで作成） */
/* ::after 擬似要素を使い、正方形の右と下の辺だけに線を引いて45度回転させる */
.step-arrow {
    width: 100%;
    height: 16cqw; /* ステップ間の余白 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.step-arrow::after {
    content: "";
    width: 5cqw;
    height: 5cqw;
    border-right: 4px solid #ccc;
    border-bottom: 4px solid #ccc;
    transform: rotate(45deg); /* V字の矢印 */
}


/* -----------------------------------
   写真の角を丸く
   ----------------------------------- */
.img-rounded {
    border-radius: 3cqw;
}


/* -----------------------------------
    Font Awesome（文頭にアイコン）
   ----------------------------------- */
/* Icon Name ： check - ----------------------------- */
/* アイコン用クラスの定義 */
.fa-check-before-text {
    /* <span>自体を非表示にするか、インラインブロック要素として扱う */
    display: inline-block;
    vertical-align: 0%; /* テキストとの縦位置を合わせる */
}

.fa-check-before-text::before {
    /* 1. checkアイコンの Unicode を指定 */
    content: "\f00c"; 
    /* 2. Font Awesome のフォントとウェイトを指定 (Solidアイコン用) */
    font-family: "Font Awesome 7 Free"; 
    font-weight: 900; 
    /* 3. アイコンのスタイル調整 */
    color: #000000; /* 黒 */
/*    font-size: 1em; */ /* フォントサイズは別に指定 */
    margin-right: 2cqw; /* テキストとの間に隙間を空ける */
}


/* -----------------------------------------------------------
   リンク案内
   ----------------------------------------------------------- */
/* リンク案内のタイトル */
.l_title {
	display: flex;               /* Flexboxを有効化 */
	justify-content: center;    /* 水平方向に中央揃え */
	margin:0 auto; /* 横方向の中央揃え */
}


/* リンク案内のBOX */
.l_box {
	display: flex;               /* Flexboxを有効化 */
	justify-content: center;    /* 水平方向に中央揃え */
	align-items: center;        /* 垂直方向に中央揃え */
	width:84cqw;
	height:11cqw;
	margin:0 auto; /* 横方向の中央揃え */
	line-height:11cqw;
	background:#418FD6;
	color:#fff;
	border-radius:5.5cqw;
	text-align:center;
}

.l_box a {
	text-decoration:underline;
}