@media (min-width:1400px){
/* ===============================
   基本設定（フォント・背景）
=============================== */

/* 背景レイヤー */
.timeline-wrap::before{
  content:"";
  position:absolute;
	top: 0;
	left: 0;
  inset:0;
  background-image:url("../img/enkaku2.png");
  background-repeat:repeat-x;
  background-position:bottom;
  background-size:auto 50%;
  background-position:center 35%; /* ←ここ */
  opacity:1;   /* ←ここで薄さ調整 */
  z-index:-1;
}

/* ===============================
   レイアウト（全体）
=============================== */
.timeline-wrap{
   width:100%;          
  /*max-width:1200px;   /* ←上限 */
	position: relative;
}

.timeline{
	width: 100%;
  position:relative;
/* 	max-width: 1200px; */
	margin: 0 auto;;
  padding-bottom: 20px;
/*   padding:80px 40px 220px; */
}

/* ===============================
   背景のグレーライン（横）
=============================== */
.timeline-line{
  position:absolute;
  left:0px;
  right:0px;
  bottom:29%;
  height:35px;
  background:#cfcfcf;
  border-radius:0px;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.1);
  transform-origin:left;
  transform:scaleX(0);
}

.timeline-line.active{
  animation:lineGrow 3s ease forwards;
}

@keyframes lineGrow{
  to{ transform:scaleX(1); }
}
/* ===============================
   横並びレイアウト
=============================== */
.timeline-inner{
  display:flex;
  justify-content:center;
  gap:20px;
}

/* ===============================
   各アイテム（1ブロック）
=============================== */
.item{
  width:200px;
  height:450px;
  position:relative;
  text-align:center;
  opacity:0;
  transform:translateY(50px);
  transition:1s;
}

/* 段差（ジグザグ） */
.item:nth-child(even){
  margin-top:50px;
}

/* ===============================
   上部テキスト
=============================== */
.title{
  font-size:12px;
  letter-spacing:0.1em;
  font-weight: bold;
}

.desc{
  font-size:14px;
  line-height:1.5;
  color:#333333;
}

/* 上の装飾ライン */
.bar{
  width:170px;
  height:2px;
  margin:10px auto;
  background: currentColor;
  opacity:0.6;
}

/* ===============================
   上から円につながる線
=============================== */
.line-top{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:100px;
  width: 2px;
  height:100px;
  background:currentColor;
}

/* ===============================
   円（メイン要素）
=============================== */
.circle{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:150px;
  width:90px;
  height:90px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:bold;
  background:#fff;
  border:2px solid currentColor; /* ←これが重要 */
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
 z-index: 3;
}

/* 円のグラデーション枠 */
.circle::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  padding:8px;
  background:var(--grad);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ===============================
   下の縦線（円 → グレーライン）
=============================== */
.line{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top: 150px;
  width: 2px;
  height:200px;
  background:currentColor;
}

/* 段差側は短く */
.item:nth-child(even) .line{
  height:147px;
}

/* ===============================
   下の丸（接点）
=============================== */
.dot{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
/*   bottom:-2%; */
bottom: 20%;
  width:18px;
  height:18px;
  border-radius:50%;
  background:currentColor;
  border:5px solid #fff;
}

/* 段差側だけ位置調整 */
.item:nth-child(even) .dot{
  bottom:31%;
}

/* 外枠リング */
.dot::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:2px solid currentColor;
  opacity:0.4;
   z-index: 3;
}

/* ===============================
   色（グラデーション段階）
=============================== */
/* .item:nth-child(1){ color:#9aa7e8; --grad:linear-gradient(#c5cdf5,#7f92e8);}
.item:nth-child(2){ color:#7d8ee6; --grad:linear-gradient(#aab8f0,#5f74e0);}
.item:nth-child(3){ color:#5e74e0; --grad:linear-gradient(#889ff0,#3f5cd6);}
.item:nth-child(4){ color:#4a63db; --grad:linear-gradient(#6f8be5,#2f4fd1);}
.item:nth-child(5){ color:#2f4fd1; --grad:linear-gradient(#5f7ae0,#1f3fb8);}
.item:nth-child(6){ color:#1f3fb8; --grad:linear-gradient(#4f6bd6,#162f9c);} */

/* ===============================
   色（単色＋濃淡）
=============================== */

/* 基準色 */
.item{
  color:#5f6f95;
}

/* 濃淡で変化 */
.item:nth-child(1){ opacity:0.5;}
.item:nth-child(2){ opacity:0.6;}
.item:nth-child(3){ opacity:0.7;}
.item:nth-child(4){ opacity:0.8;}
.item:nth-child(5){ opacity:0.9;}
.item:nth-child(6){ opacity:1;}

/* ===============================
   アニメーション（表示）
=============================== */
.item.active{
  opacity:1;
  transform:translateY(0);
}

/* ===============================
   年代フォント
=============================== */
.year{
    font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: clamp(14px, 1vw, 17px);
}
.item:nth-child(1){ transition-delay:0.1s; }
.item:nth-child(2){ transition-delay:0.3s; }
.item:nth-child(3){ transition-delay:0.5s; }
.item:nth-child(4){ transition-delay:0.7s; }
.item:nth-child(5){ transition-delay:0.9s; }
.item:nth-child(6){ transition-delay:1.1s; }
}

@media (max-width:1399px) and (min-width:601px){

.item .desc br{
  display:none;
}

/* ===============================
   基本設定（フォント・背景）
=============================== */

/* 背景レイヤー */
.timeline-wrap::before{
  content:"";
  position:absolute;
	top: 0;
	left: 0;
  inset:0;
  background-image:url("../img/enkaku2.png");
  background-repeat:repeat-x;
  background-position:bottom;
  background-size:auto 50%;
  background-position:center 35%; /* ←ここ */
  opacity:1;   /* ←ここで薄さ調整 */
  z-index:-1;
}

/* ===============================
   レイアウト（全体）
=============================== */
.timeline-wrap{
   width:100%;          /* ←画面に合わせる */
  /*max-width:1200px;   /* ←上限 */
	position: relative;
}

.timeline{
	width: 100%;
  position:relative;
/* 	max-width: 1200px; */
	margin: 0 auto;;
  padding-bottom: 20px;
/*   padding:80px 40px 220px; */
}

/* ===============================
   背景のグレーライン（横）
=============================== */
.timeline-line{
  position:absolute;
  left:0px;
  right:0px;
  bottom:29%;
  height:35px;

  background:#cfcfcf;
  border-radius:0px;

  /* ここだけ追加 */
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.1);

  transform-origin:left;
  transform:scaleX(0);

}

.timeline-line.active{
  animation:lineGrow 3s ease forwards;
}

@keyframes lineGrow{
  to{ transform:scaleX(1); }
}
/* ===============================
   横並びレイアウト
=============================== */
.timeline-inner{
  display:flex;
  justify-content:center;
  gap:1%;
  width: auto;
  position: relative;
  padding: 0 2%;  /* ← これが正解 */
}

/* ===============================
   各アイテム（1ブロック）
=============================== */
.item{
  width:16.666%; 
  height:450px;
  position:relative;
  text-align:center;
  opacity:0;
  transform:translateY(50px);
  transition:1s;
}

/* 段差（ジグザグ） */
.item:nth-child(even){
  margin-top:50px;
}

/* ===============================
   上部テキスト
=============================== */
.title{
 font-size: clamp(10px, 1vw, 14px);
  letter-spacing:0.1em;
  font-weight: bold;
}

.desc{
  font-size: clamp(10px, 1.2vw, 14px);
  line-height:1.5;
  color:#333333;
  width: 100%;
}

/* 上の装飾ライン */
.bar{
  width:auto; 
  position:relative;
  height:2px;
  margin:10px auto;
  background: currentColor;
  opacity:0.6;
}

/* ===============================
   上から円につながる線
=============================== */
.line-top{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:100px;

  width: 2px;
  height:100px;

  background:currentColor;

}



/* ===============================
   円（メイン要素）
=============================== */
.circle{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:150px;

  width:90px;
  height:90px;

  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  font-weight:bold;

  background:#fff;
  border:2px solid currentColor; /* ←これが重要 */

  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
 z-index: 3;
 
}
/* 円のグラデーション枠 */
.circle::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  padding:8px;
  background:var(--grad);

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ===============================
   下の縦線（円 → グレーライン）
=============================== */
.line{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top: 150px;
  width: 2px;
  height:200px;
  background:currentColor;
}

/* 段差側は短く */
.item:nth-child(even) .line{
  height:147px;
}

/* ===============================
   下の丸（接点）
=============================== */
.dot{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
/*   bottom:-2%; */
bottom: 20%;
  width:18px;
  height:18px;
  border-radius:50%;
  background:currentColor;
  border:5px solid #fff;
}

/* 段差側だけ位置調整 */
.item:nth-child(even) .dot{
  bottom:31%;
}

/* 外枠リング */
.dot::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:2px solid currentColor;
  opacity:0.4;
   z-index: 3;
}

/* 基準色 */
.item{
  color:#5f6f95;
}

/* 濃淡で変化 */
.item:nth-child(1){ opacity:0.5;}
.item:nth-child(2){ opacity:0.6;}
.item:nth-child(3){ opacity:0.7;}
.item:nth-child(4){ opacity:0.8;}
.item:nth-child(5){ opacity:0.9;}
.item:nth-child(6){ opacity:1;}

/* ===============================
   アニメーション（表示）
=============================== */
.item.active{
  opacity:1;
  transform:translateY(0);
}

/* ===============================
   年代フォント
=============================== */
.year{
    font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: clamp(14px, 1vw, 17px);
}

.item:nth-child(1){ transition-delay:0.1s; }
.item:nth-child(2){ transition-delay:0.3s; }
.item:nth-child(3){ transition-delay:0.5s; }
.item:nth-child(4){ transition-delay:0.7s; }
.item:nth-child(5){ transition-delay:0.9s; }
.item:nth-child(6){ transition-delay:1.1s; }


}

@media (max-width: 600px){
  
.item .desc br{
  display:none;
}
  
.desc{
  font-size:14px;
  line-height:1.5;
  color:#333333;
    min-height:3.2em; /* ← 2行分確保 */
}
  
  .timeline{
    padding:60px 20px;
  }

  .timeline-inner{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:20px;
  }



  /* ===== 縦グレーライン ===== */
  .timeline-inner::before{
    content:"";
    position:absolute;
    left:37px;          /* ← 中心基準 */
    top:0;
    width:30px;          /* ← 太く */
    height:0;
  background:#cfcfcf;
  border-radius:999px;

  /* ここだけ追加 */
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.1);
    animation:lineGrowY 1.5s ease forwards;
  }

  @keyframes lineGrowY{
    to{ height:95%; }
  }

  /* ===== アイテム ===== */
  .item{
    position:relative;
    width:100%;
    padding-left:120px;  /* ← 円＋余白 */
    text-align:left;
    padding-top:10px; 
  }

  /* 段差解除 */
  .item:nth-child(even){
    margin-top:0;
  }

  /* ===== 円 ===== */
  .circle{
    position:absolute;
    left:50px;
    top:0;
    transform:translateX(-50%);

    width:80px;
    height:80px;
    font-size:15px;

    border-radius:50%;
    background:#fff;
    border:2px solid currentColor;

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:2;
  }

  /* ===== 横ライン ===== */
  .bar{
    width:70%; /* ← 長すぎない */
    height:2px;
    background:currentColor;
    margin:6px 0 12px;
      margin-left:-50px;  /* ← 円半径分 */
  width:calc(100% + 40px);
  }

  /* ===== テキスト ===== */
  .title{
    font-size:15px;
    margin-bottom:5px;
  }

  .desc{
    font-size:13px;
    line-height:1.6;
  }

  /* ===== 不要削除 ===== */
  .line-top,
  .line,
  .dot,
  .timeline-line{
    display:none;
  }


/* ===============================
   色（単色＋濃淡）
=============================== */

/* 基準色 */
.item{
  color:#5f6f95;
}

/* 濃淡で変化 */
.item:nth-child(1){ opacity:0.5;}
.item:nth-child(2){ opacity:0.6;}
.item:nth-child(3){ opacity:0.7;}
.item:nth-child(4){ opacity:0.8;}
.item:nth-child(5){ opacity:0.9;}
.item:nth-child(6){ opacity:1;}

/* ===============================
   アニメーション（表示）
=============================== */
.item.active{
  opacity:1;
  transform:translateY(0);
}

/* ===============================
   年代フォント
=============================== */
.year{
    font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: clamp(14px, 1vw, 17px);
}

.item:nth-child(1){ transition-delay:0.1s; }
.item:nth-child(2){ transition-delay:0.3s; }
.item:nth-child(3){ transition-delay:0.5s; }
.item:nth-child(4){ transition-delay:0.7s; }
.item:nth-child(5){ transition-delay:0.9s; }
.item:nth-child(6){ transition-delay:1.1s; }


}