@charset "UTF-8";
/* サブページで、テンプレートで対応しきれないスタイルをこちらに記入します。ASのみ書き込み可能 */

.container p.gakunen {
  font-size:1.8em;
  border-bottom: solid 2px #cccccc;
  color:#262626;
  padding-left:0.3em;
}

.list-design5 h3 {
  position:relative;
  display:inline-block;
    padding:.5rem;
  font-weight:bold;
  text-align: left;
  padding: 1rem 2%;
  padding: .5em 0em .5em -.5em;
  z-index:99;
}

.list-design5 h3 span {
  -webkit-text-stroke: 2px #fff;
    text-stroke: 2px #fff;
  paint-order: stroke;
  margin:0 1rem 0 .5rem;
}

.list-design5 h3::after {
    content: "";
  position: absolute;
  top: 50%;
  left: .7em;
  width: 1.4em;
  height: 50%;
  background: yellow;
  transform: translateY(-50%);
   z-index:-1;
}

@media  (max-width: 767.99px) {
  .list-design5 h3::after {
    left:0.2em;
  }
}

.list-design5#cont1 h3::after {
  background: #fa92a3
  ;
}
.list-design5#cont2 h3::after {background: #4a6afa;}
.list-design5#cont3 h3::after {background: orange;}
.list-design5#cont4 h3::after {background: green;}
.list-design5#cont5 h3::after {background: #553cc9;}
.list-design5#cont6 h3::after {background: #da7d47;}
.list-design5#cont7 h3::after {background: #1aa81a;}
.list-design5#cont8 h3::after {background: #813581;}

.list-design5.angle-circle a {
  color:#262626;
  border-radius: 28px;
  font-size:1.3em;
  font-weight:600;
}

.list-design5#cont1 a{background: rgba(250, 146, 163, .3);}
.list-design5#cont2 a{background: rgba(74, 106, 250, .3);}
.list-design5#cont3 a{background: rgba(255, 165, 0,.3);}
.list-design5#cont4 a{background: rgba(0, 128, 0, .3);}
.list-design5#cont5 a{background: rgba(85, 60, 201, .3);}
.list-design5#cont6 a{background:rgba(218, 125, 71, .3);}
.list-design5#cont7 a{background: rgba(26, 168, 26, .3);}
.list-design5#cont8 a{background: rgba(129, 53, 129, .3);}
.list-design5#cont9 a{border:solid 2px #ccc;background: #fff;}

/*hover時*/
.list-design5#cont1 a:hover {background: rgba(250, 146, 163, 1.0);
   -webkit-text-stroke: 2px #fff;
    text-stroke: 2px #fff;
  paint-order: stroke;
transition: all 0.5s;}
.list-design5#cont2 a:hover {background: rgba(74, 106, 250, 1.0);
   -webkit-text-stroke: 2px #fff;
    text-stroke: 2px #fff;
  paint-order: stroke;
transition: all 0.5s;}
.list-design5#cont3 a:hover {background: rgba(255, 165, 0,1.0);
   -webkit-text-stroke: 2px #fff;
    text-stroke: 2px #fff;
  paint-order: stroke;
transition: all 0.5s;}
.list-design5#cont4 a:hover {background: rgba(0, 128, 0, 1.0);
   -webkit-text-stroke: 2px #fff;
    text-stroke: 2px #fff;
  paint-order: stroke;
transition: all 0.5s;}
.list-design5#cont5 a:hover {background: rgba(85, 60, 201, 1.0);
   -webkit-text-stroke: 2px #fff;
    text-stroke: 2px #fff;
  paint-order: stroke;
transition: all 0.5s;}
.list-design5#cont6 a:hover {background:rgba(218, 125, 71, 1.0);
   -webkit-text-stroke: 2px #fff;
    text-stroke: 2px #fff;
  paint-order: stroke;
transition: all 0.5s;}
.list-design5#cont7 a:hover {background: rgba(26, 168, 26, 1.0);
   -webkit-text-stroke: 2px #fff;
    text-stroke: 2px #fff;
  paint-order: stroke;
transition: all 0.5s;}
.list-design5#cont8 a:hover {background: rgba(129, 53, 129, 1.0);
   -webkit-text-stroke: 2px #fff;
    text-stroke: 2px #fff;
  paint-order: stroke;
transition: all 0.5s;}

.list-design5#cont9 a:hover {background: #9e9e9e;transition: all 0.5s;}