/* --- セクション全体の共通設定 --- */
.step-section {
  position: relative;
  padding: 60px 0;
  /* z-indexを段階的に下げることで、上の三角が下の背景に必ず乗るようにします */
}

/* 1番目のセクションを一番上に */
.step-section:nth-of-type(1) { z-index: 10; }
/* 2番目のセクションをその下に */
.step-section:nth-of-type(2) { z-index: 9; }
/* 3番目のセクションをさらに下に */
.step-section:nth-of-type(3) { z-index: 8; }
/* 4番目のセクションをさらに下に */
.step-section:nth-of-type(4) { z-index: 7; }

/* 三角形の共通設定（色は各クラスで指定） */
.step-section::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
  border-bottom: 0;
  display: block !important;
  /* 親のz-index内で最前面に */
  z-index: 11; 
}

/* --- 白背景と三角の色 --- */
.step-section.is-white {
  background-color: #ffffff;
}
.step-section.is-white::after {
  border-top: 25px solid #ffffff !important;
}

/* --- グレー背景と三角の色 --- */
.step-section.is-gray {
  background-color: #f4f4f4;
}
.step-section.is-gray::after {
  border-top: 25px solid #f4f4f4 !important;
}

/* --- 最後だけ消す --- */
.step-section:last-of-type::after {
  display: none !important;
}

/* 番号とテキストを横並びにする箱 */
.step-item {
  display: flex;
  align-items: flex-start; /* 上揃え */
  gap: 20px;               /* 番号とテキストの間隔 */
  max-width: 900px;        /* コンテンツの最大幅 */
  margin: 0 auto;          /* 中央寄せ */
  padding: 0 20px;
}

/* オレンジの丸い番号 */
.step-num {
  background-color: #f39800; /* ささきカラーのオレンジ */
  color: #fff;
  font-weight: bold;
  font-size: 24px;
  width: 50px;               /* 丸の幅 */
  height: 50px;              /* 丸の高さ */
  border-radius: 50%;        /* 正円にする */
  display: flex;
  align-items: center;       /* 数字を上下中央 */
  justify-content: center;   /* 数字を左右中央 */
  flex-shrink: 0;            /* 画面が狭くなっても丸を潰さない */
}

.step-body {padding-top:5px;}

.nagare-ttl {
	font-size:25px;
	font-weight:bold;
	letter-spacing:0.3em;
}
.nagare-txt {
	font-size: 16px;
    text-align: justify;
    font-feature-settings: "palt";
}

.nagare-telmail {
	display:flex;
	justify-content: space-between;
	margin-top:3%;
}
.nagare-telcontact {width:48%;}
.nagare-mailcontact {width:48%;}
.nagare-telbox {
	display: flex;
    justify-content: space-between;
}

.nagare-telbox a {
	font-size:20px;
	text-decoration: none;
    color: #fff;
    background: #000;
    padding: 0.1em 0.7em;
    border: 1px solid;
    border-radius: 7px;
}
.nagare-telbox a:hover {color: #fcf4ce;}
.nagare-telname-sub2 {
	text-align: center;
    border-top: 1px solid;
    border-bottom: 1px solid;
    font-size: 20px;
    font-weight: 600;
    margin-top: 2%;
}
.nagare-telname-sub2 a {
	color:#000;
	text-decoration:none;
}
/* 外側の青い枠 */
.nagare-mailcontact {
    background: #3498db; /* ヘッダーの青に合わせて調整してください */
    padding: 7px;
    border-radius: 4px;
    text-align: center;
    width: 48%;
    display: inline-block;
}

/* 「フォームからお問い合わせ」の文字 */
.contact-label {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    background: #fff;      /* 白い背景 */
    color: #333;           /* 文字は濃いグレー */
    padding: 5px 10px;
    border-radius: 2px;
    display: block;
}

/* 下側のリンクボタン */
.contact-button {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    transition: opacity 0.3s;
}
.contact-button:hover {
    color: #fcf4ce;
}

.nagare-telmail-smail {
	font-size:13px;
	margin-bottom:3%;
}
.nagare-midashi {
	font-size:25px;
	font-weight:700;
	color:#f39800;
}
/* 写真全体の横並び設定 */
.drone-flex1 {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* 写真同士の隙間 */
  margin: 20px 0;
  width: 100%;
}

/* 左側の大きな写真 */
.drone1 {
  width: 70%;      /* 全体の7割の幅 */
  height: auto;
  object-fit: cover;
  border-radius: 4px; /* 少し角を丸くするとデザインに馴染みます */
}

/* 右側の小さい写真2枚を包む箱 */
.drone-flex2 {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  justify-content: space-between;
  width: 28%;      /* 残りの約3割の幅 */
  gap: 10px;       /* 縦方向の隙間 */
}

/* 右側の小さい写真それぞれ */
.drone2, .drone3 {
  width: 100%;     /* drone-flex2の中で横幅いっぱい */
  height: calc(50% - 5px); /* 上下で半分ずつ（隙間分を引く） */
  object-fit: cover;
  border-radius: 4px;
}

@media screen and (max-width: 1023px){
	.step-item {flex-direction: column;gap:0;}
	.nagare-ttl {font-size:22px;}
	.nagare-txt {font-size:15px;line-height:1.5;}
	.nagare-telmail {flex-direction: column;}
	.nagare-telbox a {font-size:16px;}
	.nagare-telcontact {width:100%;}
	.telname2 {font-size:17px;}
	.nagare-mailcontact {width:100%;margin-top: 5%;}
	.nagare-midashi {
		font-size: 22px;
		line-height: 1.3;
		margin-bottom:3%;
	}
}