@charset "UTF-8";

/* ===== 共通スタイル ===== */
#lineH,
#lineH-dotted,
#lineH-dashed {
  display: inline;
  line-height: 1.4;         /* 行間調整 */
  background-repeat: repeat-x;
  background-position: 0 100%; /* 下線を文字下に配置 */
}

/* ===== PC用（769px以上） ===== */
@media screen and (min-width: 769px) {

  /* 二重線 */
#lineH {
  display: inline;
  padding-bottom: 5px; 
  background-image: linear-gradient(
    to bottom,
    #ffff00 0%, #ffff00 3px,   /* 上の線を3pxに */
    transparent 3px 5px,       /* 線の間隔 2px */
    #ffff00 5px, #ffff00 8px    /* 下の線 3px */
  );
  background-size: 100% 8px;   /* 線全体の縦幅 8px */
  background-position: 0 100%;
  background-repeat: no-repeat;
}

  /* 点線 */
#lineH-dotted {
  display: inline;
  padding-bottom: 5px;
  background-image: radial-gradient(circle, #71e9ff 50%, transparent 0);
  background-size: 16px 10px; /* 横18px：点と点の間隔広め、縦10px：点の大きさ */
  background-position: 0 100%;
  background-repeat: repeat-x;
}

  /* 破線 */
  #lineH-dashed {
    display: inline;
    padding-bottom: 5px;
    background-image: repeating-linear-gradient(
      to right,
      #ff8dc8 0 12px,       /* 線の横幅 */
      transparent 12px 20px /* 線と線の間隔 12px+8px */
    );
    background-size: auto 6px; /* 線の縦幅 */
    background-position: 0 100%;
    background-repeat: repeat-x;
  }
}

/* ===== スマホ用（768px以下） ===== */
@media screen and (max-width: 768px) {

  /* 二重線 */
  #lineH {
    background-image: linear-gradient(
      to bottom,
      #ffff00 0%, #ffff00 2px,
      transparent 2px 4px,
      #ffff00 4px, #ffff00 6px
    );
    background-size: 100% 6px; 
    padding-bottom: 8px; /* 文字との間隔はスマホで広め */
  }

  /* 点線 */
  #lineH-dotted {
    border-bottom: none;       
    position: relative;
    padding-bottom: 6px;
  }

  #lineH-dotted::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
    background-image: radial-gradient(circle, #71e9ff 50%, transparent 0);
    background-size: 12px 6px; 
    background-repeat: repeat-x;
  }

  /* 破線 */
  #lineH-dashed {
    background-image: repeating-linear-gradient(
      to right,
      #ff8dc8 0 8px,
      transparent 8px 16px
    );
    background-size: auto 4px; 
    padding-bottom: 8px; 
  }
}

.is-colorset--2 .l-TextLinkUnit__link > .cmn-icon {
    color: #ffffff !important; /* フォントアイコンの場合 */
}