@charset "utf-8";
/* ============================================================
   基本スタイル(共通)
============================================================ */
.container {}

.works-list {
    display: grid;
}
.btn-more .btn {
    margin: 2rem 0 5rem; /* 上下の余白（お好みで） */
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid #1860ad;
    color: #1860ad;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.2em;
    transition: all 0.3s;
}
.btn-more .btn:hover {
    background: #1860ad;
    color: #fff;
}
/* ============================================================
 サブビジュアル
============================================================ */
.sbu-visual {
    height: 350px;
    width: auto;
    background-color: #f0f5f5;
}
/* ============================================================
事業内容
============================================================ */
.services .section-title img {
    max-width: 160px;
    position: relative;
    text-align: center;
    z-index: 10;
    margin: -55px auto 6rem;
}

.service-items{
	margin: 120px 0;
}

.service-item {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  margin-bottom: 80px;
  position: relative; /* relative にして子要素を基準にする */
  max-width:770px;
  margin: 0 auto 80px;
}

.service-item:nth-child(2) {
  flex-direction: row-reverse;
}

.service-item:nth-child(2) .service-content {
  margin-left: auto;
}

/* 左ブロック（番号＋タイトル＋テキスト） */
.service-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30px 0;
}


.service-left {
  flex: 1;
  position: relative; /* 線を絶対配置する基準 */
  gap: 20px;
}

.service-number {
  display: flex;
  align-items: center;
  position: relative;
}

.service-number img {
  margin-right: 10px;
  display: block;
  width:60px;
  hight:auto;
	
}

/* 横線 */
.service-number::after {
  content: "";
  flex-grow: 1;              
  height: 2px;
  background-color: #1a4f8e;
  margin-left: 10px;

  /* ← 追加ポイント */
  margin-right: -20px; /* 右に20pxはみ出す（かぶせたい分調整） */
  position: relative;
}

/* 右端の● */
.service-number::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1a4f8e;
  position: absolute;
  right: -20px;             /* はみ出した分だけ位置を合わせる */
  top: 50%;
  transform: translateY(-50%);
}


.service-title img {
  display: block;
  padding-bottom: 25px;
  max-width: 180px;
}

.service-text {
  max-width: 500px;
  text-align: left; /* リストは読みやすく左寄せ */
}

.service-text .sub {
  color: #4db6ac;
  font-weight: bold;
  margin: 10px 0;
}

.service-text ul li {
  position: relative;
  list-style-type: none;
  line-height: 1.6;
  color: #333;
  padding-left: 1.5em;   /* 2行目以降の左端をそろえる */
  text-indent: -1.5em;   /* 1行目（●）だけ左に戻す */
  list-style-position: outside; /* ●が外側に来るようにする */
}

.service-text ul li:before {
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 1em;
  height: 1em;
  background: #beddd6;
  border-radius: 50%;
  margin-right: 8px;
}

.service-image img {
  max-width: 380px;
  height: auto;
}

/* ▼ スマホ表示（例: 768px以下） */

  @media screen and (max-width: 768px) {

  .service-item {
    flex-direction: column;
    align-items: center;
    text-align: left;
	gap: 30px;
  }
  .service-item:nth-child(2) {
    flex-direction: column;   /* ← スマホは縦並びに戻す */
  }

  .service-item:nth-child(2) .service-content {
    margin-left: 0;
  }
	  
  /* ★ service-number と service-content を横並びにする ★ */
  .service-left {
    width: 100%;
    display: flex;
    flex-direction: row;        /* ← ここが重要！横並びにする */
    align-items: flex-start;
    gap: 15px;
    padding: 0 15px;            /* 少し左右に余白を入れる */
  }

  /* 左：番号＋縦線＋● */
 .service-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
	  
 .service-number img {
  width: 60px;
  height: auto;
  display: block;
  margin-right:0;
}

  /* 画像 → 縦線 → ● の順番にする */

  /* 縦線（画像の下） → ::before */
  .service-number::before {
  content: "";
  width: 2px;
  height: 240px;
  background-color: #1860ad;
  margin: auto 0;
  display: block;
  right: 50%;
  top: 170px;
}

   /* ●（縦線の下） → ::after */
  .service-number::after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #1860ad;
  border-radius: 50%;
  margin: 5px auto 0;
  display: block;
  top:250px;
}


  /* 右：タイトル＋テキスト */
  .service-content {
    flex: 1;                  /* タイトル＋文章が右側を広く使う */
  }

  .service-title img {
    max-width: 160px;
    margin-bottom: 10px;
    height: auto;
  }

  .service-text {
    width: 100%;
  }
	  
 

  /* 番号＆文章の下に画像を配置 */
  .service-image {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .service-image img {
    max-width: 90%;
    height: auto;
  }
}

@media screen and (min-width: 769px) {

   /* ★ 2つ目の service-item のみ ★ */
  .service-item:nth-child(2) .service-number {
    display: flex;
    flex-direction: row;        /* 横並び（重要） */
    align-items: center;
  }

  /* ●（::before or ::after どちらか？ → 今の構造では ::before が丸） */
  .service-item:nth-child(2) .service-number::before {
    order: 1;                   /* ●を左側へ */
    position: static;           /* 元の絶対位置指定を解除 */
	margin-top: 5px;
  }

  /* 横線（::after） */
  .service-item:nth-child(2) .service-number::after {
    order: 2;                   /* 線を真ん中へ */
    width: 80px;
    height: 2px;
    background-color: #1860ad;
    display: block;
    margin-right: 10px;
    position: static;           /* 絶対配置を解除 */
	margin-left: 0px;
  }

  /* 画像を右側へ */
  .service-item:nth-child(2) .service-number img {
    order: 3;
    margin-right: 0;
  }
}

/* ============================================================
 納品までの流れ
============================================================ */
.flow-section .section-title img {
    max-width: 270px;
    position: relative;
    text-align: center;
    margin: 0 auto 6rem;
}

/* ▼ 全幅背景 */
.flow-section {
  width: 100%;
  background: #faf7ea; /* 背景色 */
  padding: 70px 0;
  margin: 40px 0 120px 0;
}
.flow-inner {
  max-width: 770px;
  padding: 0 10px;
  margin: 0 auto;
  position: relative;
}
.flow-item{
 display: flex;
 margin-bottom: 20px;
}
/* 番号＋タイトル画像 */
.flow-title-img {
  width: 200px;
  height: auto;
  display: block;
  margin-bottom: 20px;
}

/* 棒＋●画像と本文を横並び */
.flow-body {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

/* 棒＋●画像 */
.flow-line {
  position: relative;
  width: 10px;     /* 適宜調整 */
  height: 200px;   /* 縦線の長さを調整 */
}

/* 縦線 */
.flow-line::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;         /* 線の太さ */
  height: 100%;
  background: #1860ad; /* 線の色（青） */
}

/* 下の丸 */
.flow-line::after {
  content: "";
  position: absolute;
  left: 100%;
  bottom: -8px;   /* 丸の位置調整（線の外に少し出す） */
  transform: translateX(-50%);
  width: 10px;       /* 丸の大きさ */
  height: 10px;
  background: #1860ad; /* 丸の色（線と同じ） */
  border-radius: 50%;
}
.flow-item.no-line .flow-line {
  display: none;
}



/* 左側テキスト */
.flow-content {
  width: 50%;
  margin-top: 15px;
}

/* 本文 */
.flow-content p {
    line-height: 1.8;
    max-width:75%;
	letter-spacing: 1px;
}

/* 右の写真 */
.flow-image {
  width: 50%;
}

.flow-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ボタン */
.works .btn-more {
    text-align: center; /* 子要素を中央寄せ */
}

/* ▼ スマホ */
@media screen and (max-width: 768px) {
	.flow-inner{
		padding: 0 20px;
	}
    /* flow-item は縦方向 */
  .flow-item {
    display: flex;
	gap:5px;
  }

  /* タイトル画像 */
  .flow-title-img {
    width: 130px;
    display: block;
	margin-bottom: 10px;
  }

  /* 文章＋画像 を横並びのままに */
  .flow-body {
   display: flex;
    flex-direction:column-reverse;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
  }

  /* 文章（左） */
  .flow-content {
    width: 50%;
    margin-top: 5px;
  }
  .flow-content p {
    margin: 0;
    line-height: 1.5;
	max-width: none;
  }

  /* 画像（右） */
  .flow-image {
   width: 60%;
  }
  .flow-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* flow-line（縦線＋●）を中央寄せにする */
  .flow-line {
    display: flex;
    justify-content:right; /* 右端に寄せて中央配置のようにみせる */
    width: 100%;
  }

  /* 縦線 */
.flow-line::before {
  left: 0%;
  top: 0;
  width: 2px;         /* 線の太さ */
  height: 100%;
}

/* 下の丸 */
.flow-line::after {
  left: 0%;
}
}
@media screen and (max-width: 420px) {
	.flow-item{
		margin-bottom: 5px;
	}
	.flow-content p {
        font-size: 12px;
    }
	.flow-line {
        height: 115px;
        margin-top: 5px;
    }
	 /* 縦線 */
.flow-line::before {
  left: 100%;
  top: 0;
  width: 2px;         /* 線の太さ */
  height: 100px;
}

/* 下の丸 */
.flow-line::after {
  left:100%;
  bottom: 5px;
}
}