/* 1. シンプルな左線＋背景（定番・ビジネス向け）*/
.design-01 span {
  display: block;            /* ブロック要素にして背景を広げる */
  padding: 0.5em 1em;        /* 内側の余白 */
  background: #f4f4f4;       /* 背景色（薄いグレー） */
  border-left: 5px solid #3b82f6; /* 左側の太線（青） */
  color: #333;
}

/* 2. 蛍光マーカー風（ブログ・強調向け）*/
.design-02 span {
  /* 透明から始まり、下半分(60%)から色をつける */
  background: linear-gradient(transparent 60%, #fff100 60%);
  display: inline;          /* 文字の長さに合わせる */
  padding: 0 5px;
}

/* 3. 上下ボーダー＋中央寄せ（エレガント・和風）*/
.design-03 {
  text-align: center;       /* 中央寄せ */
  margin: 30px 0;
}
.design-03 span {
  display: inline-block;
  padding: 10px 30px;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  letter-spacing: 0.1em;    /* 文字間を少し開ける */
}
/* 4. ステッチ（点線）囲み（ポップ・女性向け）*/
.design-04 {
  margin: 20px 0;
  text-align: center;
}
.design-04 span {
  display: inline-block;
  padding: 0.5em 1.5em;
  color: #5d627b;
  background: white;
  border: 2px dashed #b1b5cc; /* 点線の色 */
  border-radius: 10px;        /* 角丸 */
  box-shadow: 0 0 0 5px #f0f1f5; /* 外側の二重線風エフェクト */
}

/* 5. 括弧（カギカッコ）デザイン（テック・引用向け） */
.design-05 {
  text-align: center;
  margin: 30px 0;
}
.design-05 span {
  position: relative;
  display: inline-block;
  padding: 0 20px;
}
/* 左のカギカッコ */
.design-05 span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 100%;
  border-top: 2px solid #333;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
}
/* 右のカギカッコ */
.design-05 span::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 100%;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
}

/* 6. リボン風（見出しを目立たせる） */
.design-06 {
  text-align: center;
  margin: 30px 0;
}
.design-06 span {
  position: relative;
  display: inline-block;
  padding: 0.5em 2em;
  background: #e65100; /* リボンの色 */
  color: #fff;
}
/* 左の三角 */
.design-06 span::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  border-width: 0 0 45px 20px; /* 高さや角度の調整 */
  border-style: solid;
  border-color: transparent transparent #e65100 transparent;
}
/* 右の三角 */
.design-06 span::after {
  content: '';
  position: absolute;
  top: 0;
  right: -20px;
  border-width: 45px 0 0 20px;
  border-style: solid;
  border-color: #e65100 transparent transparent transparent;
}
/* future neon */
.future-01 {
  background: #1a1a1a; /* 確認用の仮背景色 */
  padding: 20px;       /* 余白 */
  text-align: center;
}

.future-01 span {
  display: inline-block;
  color: #fff;
  border: 2px solid #00f2ff;     /* ネオン色の枠 */
  padding: 0.5em 1em;
  box-shadow: 0 0 10px #00f2ff, inset 0 0 10px #00f2ff; /* 外側と内側の発光 */
  text-shadow: 0 0 5px #00f2ff;  /* 文字の発光 */
  letter-spacing: 0.2em;         /* 文字間を広げて機械的に */
  font-family: monospace;        /* 等幅フォントでデジタル感を出す */
}

.future-02 {
  text-align: left;
  margin: 30px 0;
  border-bottom: 0px solid #ddd; /* 薄い下線 */
}

.future-02 span {
  display: inline-block;
  font-weight: 900;              /* 太字にする */
 /* font-size: 1.2em; */
  /* 文字をグラデーションにする魔法の記述 */
  background: linear-gradient(45deg, #2196F3, #a855f7); 
  -webkit-background-clip: text;
  color: transparent;  
  padding-bottom: 10px;
  border-bottom: 4px solid #2196F3; /* 下線も青系 */
}

.future-04 {
  margin: 30px 0;
  text-align: center;
}

.future-04 span {
  display: inline-block;
  position: relative;
  color: #333;
  font-weight: bold;
  padding: 5px 20px;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    #eee 3px
  ); /* 横縞の走査線風背景 */
  border: 1px solid #333;
}

/* 擬似要素でズレた影を作る */
.future-04 span::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
  border: 1px solid #00f2ff; /* シアンのズレ枠 */
  z-index: -1;
}