@charset "UTF-8";

/* ====================================== */
/* 汎用 */
/* ====================================== */
h2 span {
  color: #a70ace;
  font-weight: bold;
}

h2 strong {
  color: #a70ace;
  font-weight: bold;
}

h3 span {
  color: #a70ace;
  font-weight: bold;
}

h4 span {
  color: #a70ace;
  font-weight: bold;
}

p span {
  color: #a70ace;
  font-weight: bold;
}

h3.light span {
  color: #ed36fa;
  font-weight: bold;
}

p.light span {
  color: #ed36fa;
  font-weight: bold;
}



/* ====================================== */
/* ヘッダー */
/* ====================================== */
header .top-bar {
  background-color: #5b23aa;
}

header .top-bar ul li.company p {
  background-color: #d93fff;
}

header .top-bar ul li.agent p {
  background-color: #424242;
}

/* ====================================== */
/* hero */
/* ====================================== */
#hero .hero-text h2 span {
  color: #d93fff;
}

#hero .hero-text p span {
  color: #d93fff;
}

nav ul li a span {
  color: #d93fff;
  font-size: clamp(0.625rem, 0.534rem + 0.45vw, 0.875rem);
}

nav ul li a:hover {
  color: #d93fff;
  transition: all 0.5s;
}

/* ========================================== */
/* 提供する未来*/
/* ========================================== */

.hisho h2 span {
  color: #a70ace;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* アイちゃんが解決 */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#solution {
  background-color: #e2cde5;
}

#solution ul li .scouter h3 span {
  color: #ed36fa;
}

#solution ul li .scouter p span {
  color: #ed36fa;
  font-weight: bold;
}

/* .words p span {
  color: #ed36fa;
} */

/* ====================================== */
/* アイちゃんについて */
/* ====================================== */

.aichan-infotext dt {
  color: #a70ace;
  font-weight: bold;
}

#promise {
  background-color: #e2cde5;
}

/* #promise ul li {
  box-shadow: -5px 5px 15px 5px rgba(0, 161, 255, 0.8), 5px -5px 15px 7px rgba(105, 0, 213, 0.8);
} */

#promise ul li .promise1-text h3 {
  background: linear-gradient(90deg, #3577ca 0%, #ed36fa 100%);
  background-repeat: no-repeat;
  background-size: 100% 10px;
  background-position: bottom;
}

#AIchan::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100px;
  bottom: 0;
  background-color: #e2cde5;
  z-index: -2;
}

/* =========================================== */
/* お問い合わせ */
/* =========================================== */
#contact .contact-box .form .send input[type="submit"]:hover {
  background-color: #a70ace;
  transition: all 0.5s;
}

#works .pik::after {
  content: "A";
  background-color: #ed36fa;
  color: #fff;
  padding: 0.1vw 0.3vw;
}

#works .pik2::after {
  content: "B";
  background-color: #ed36fa;
  color: #fff;
  padding: 0.1vw 0.3vw;
}

#works .pik3::after {
  content: "C";
  background-color: #ed36fa;
  color: #fff;
  padding: 0.1vw 0.3vw;
}

#works .pik4::after {
  content: "D";
  background-color: #ed36fa;
  color: #fff;
  padding: 0.1vw 0.3vw;
}

#works .replace .pasol-box1 .replace-text .pik4::before {
  content: "A";
  position: absolute;
  bottom: -2vw;
  left: 4vw;
  background-color: #ed36fa;
  color: #fff;
  padding: 0.1vw 0.3vw;
}

#works .replace .pasol-box1 .replace-text .pik4::after {
  content: "A";
  position: absolute;
  top: 0;
  left: 7vw;
  background-color: #ed36fa;
  color: #fff;
  padding: 0.1vw 0.3vw;
}

#works .replace .pasol-box1 .replace-text .pik5 {
  position: relative;
  margin: 5px 0;
}

#works .replace .pasol-box1 .replace-text .pik5::before {
  content: "B";
  position: absolute;
  top: 0;
  right: 12vw;
  background-color: #ed36fa;
  color: #fff;
  padding: 0.1vw 0.3vw;
}

#works .replace .pasol-box1 .replace-text .pik5::after {
  content: "C";
  position: absolute;
  top: 0;
  right: 5vw;
  background-color: #ed36fa;
  color: #fff;
  padding: 0.1vw 0.3vw;
}

#works .double .pasol-box1 .double-text .pik::before {
  content: "A";
  position: absolute;
  top: 0vw;
  left: -2vw;
  background-color: #ed36fa;
  color: #fff;
  padding: 0.1vw 0.3vw;
}

#works .double .pasol-box1 .double-text .pik::after {
  content: "B";
  position: absolute;
  bottom: 0vw;
  right: 7vw;
  background-color: #ed36fa;
  color: #fff;
  padding: 0.1vw 0.3vw;
}

#works .double .pasol-box1 .double-text .pik3 {
  position: relative;
}

#works .double .pasol-box1 .double-text .pik3::after {
  content: "C";
  position: absolute;
  top: 0vw;
  left: -2vw;
  background-color: #ed36fa;
  color: #fff;
  padding: 0.1vw 0.3vw;
}

#works .double .pasol-box1 .double-text .pik4 {
  position: relative;
}

#works .double .pasol-box1 .double-text .pik4::after {
  content: "D";
  position: absolute;
  top: 0vw;
  left: -2vw;
  background-color: #ed36fa;
  color: #fff;
  padding: 0.1vw 0.3vw;
}

#works .pasol .background-color,
#works .replace .background-color,
#works .double .background-color {
  background-color: #e2cde5;
}

#price {
  background-color: #e2cde5;
}

#price ul li .price-box1 dd span {
  color: #a70ace;
  font-weight: bold;
}

.acMenu dt.active {
  background-color: #a70ace;
}

.acMenu dt span {
  color: #a70ace;
}

.acMenu dd span {
  color: #a70ace;
}

/* ===================================== */
/* お知らせ */
/* ===================================== */

#news td.label:nth-child(1) {
  display: none;
}

#news .archive-info ul li .label a:nth-child(1) {
  display: none;
}

#news .archive-info ul li .label a {
  background-color: #a70ace;
  padding: 1px;
  display: block;
  text-align: center;
  border-radius: 3px;
}

#news {
  background-color: #e2cde5;
}

#news h2 span {
  color: #ed36fa;
}

#news .news-info {
  position: relative;
  background-color: #0d0310a0;
  padding: 32px;
  border-radius: 5px;
  box-shadow: -5px 5px 15px 5px rgba(0, 161, 255, 0.8),
    5px -5px 15px 7px rgba(105, 0, 213, 0.8);
}

/* ====================================== */
/* フッター */
/* ====================================== */
footer {
  background-color: #5b23aa;
}

footer ul li a:hover {
  color: #ed36fa;
  transition: all 0.5s;

}

@media screen and (max-widrh: 768px) {
  #contact .contact-box {
    background-color: #e2cde5;
  }
}

@media screen and (max-width: 768px) {
  /* #contact {
    background-color: #e2cde5;
  } */

  #works .replace .pasol-box1 .replace-text .pik4::after {
    top: 0;
    left: 16vw;
    background-color: #ed36fa;
    color: #fff;
    padding: 0.1vw 0.3vw;
  }

  #works .replace .pasol-box1 .replace-text .pik4::before {
    content: "A";
    position: absolute;
    bottom: -8.5vw;
    left: 10.5vw;
    background-color: #ed36fa;
    color: #fff;
    padding: 0.1vw 0.3vw;
  }

  #works .replace .pasol-box1 .replace-text .pik5::before {
    content: "B";
    position: absolute;
    top: 25px;
    right: 69vw;
    background-color: #ed36fa;
    color: #fff;
    padding: 0.1vw 0.3vw;
  }

  #works .replace .pasol-box1 .replace-text .pik5::after {
    content: "C";
    position: absolute;
    top: 25px;
    right: 48vw;
    background-color: #ed36fa;
    color: #fff;
    padding: 0.1vw 0.3vw;
  }

  #works .double .pasol-box1 .double-text .pik::after {
    content: "B";
    position: absolute;
    bottom: 0vw;
    right: 27vw;
    background-color: #ed36fa;
    color: #fff;
    padding: 0.1vw 0.3vw;
  }
}

@media screen and (max-width: 520px) {
  #works .replace .pasol-box1 .replace-text .pik5::before {
    content: "B";
    position: absolute;
    top: 15px;
    right: 63vw;
    background-color: #ed36fa;
    color: #fff;
    padding: 0.1vw 0.3vw;
  }

  #works .replace .pasol-box1 .replace-text .pik5::after {
    content: "C";
    position: absolute;
    top: 14px;
    right: 42vw;
    background-color: #ed36fa;
    color: #fff;
    padding: 0.1vw 0.3vw;
  }
}