@charset "utf-8";

.maincont{padding-bottom: 100px}
.mt5px{margin-top: 5px}

.subinline{display: inline-block; text-align: center}

/* リスト全体のスタイルと矢印の基準点設定 */
.flow li {list-style:none !important;
  padding-bottom: 30px; margin-bottom: 10px;
  position: relative; /* 矢印を絶対配置するための基準点 */
}

/* 最後のステップ（li）は矢印と余白を不要にする */
.flow li:last-child {
  padding-bottom: 0;
}

/* dlをflexにして横並び */
.flow dl {
  display: flex; margin-bottom: 5px
}

/* dt（アイコン側）の幅を固定 */
.flow dt {
  width: 90px;
  flex-shrink: 0; /* 画面が狭くなっても幅をキープ */
}

/* dd（テキスト側）をレスポンシブに広げる */
.flow dd {font-size: 14px;
  flex: 1;
  margin-left: 0; /* ブラウザ標準の余白をリセット */
}

/* アイコン画像のサイズ指定 */
.flow dt img {
  width: 58px;
  height: auto;
  display: block; /* 下部の謎の隙間対策 */
}

/* タイトルの文字装飾 */
.flow dd .tit {
  font-size: 20px;
  letter-spacing: 3px;
  margin-top: 0;
  margin-bottom: 10px; /* テキストとの間隔（お好みで調整） */
}

.flow dd .tit span{font-size:13px }

/* ==========================================
   【修正】1pxの下向き線付き矢印
========================================== */

/* 1. 縦の直線を描画 */
.flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 29px; /* アイコン（58px）の真ん中に合わせる */
  bottom: 15px; 
  width: 1px;
  height: 15px; 
  background-color: #333; 
  /* ★追加：矢印の先端と同じ計算式で中央を揃える */
  transform: translateX(-50%); 
}

/* 2. 先端の矢印（V字）を描画 */
.flow li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 29px;
  bottom: 15px;
  
  width: 6px;
  height: 6px;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  
  /* ★既存のまま：translateX(-50%)で中心を29px地点に合わせ、45度回転 */
  transform: translateX(-50%) rotate(45deg);
}

.flow .flel{margin-bottom: 30px}
.flow .att{padding-top: 40px; font-size: 13px}


@media screen and (max-width: 979px) {
.flow .titbox{display: none}
}

@media screen and (min-width: 980px) {
.maincont{margin-top: 0}
.maincont .titbox{display: none}

.flow{display: flex; max-width:1068px; margin: 0 auto}
.flow .titbox {display:inline-block; width:200px; position: sticky; top: 0; align-self: flex-start; }
.flow ul{ flex: 1;}
.flow .titbox h2{ font-size:40px; letter-spacing: 5px ; line-height:1; margin-bottom: 10px}
.flow .titbox p{font-size: 12px; letter-spacing: 3px}
.flow dd{font-size: 13px}

.fle{display: flex; justify-content:space-between }
.fle .flel{width: 40%; margin-bottom: 0}
.fle .fler{width: 58%}



}