@charset "UTF-8";
/* base */
*{margin: 0; padding: 0;}
body{font-family: 'M PLUS 1p', sans-serif; font-size:0.9em; color: var(--text); line-height: 1.5;}
html{scroll-behavior: smooth;}
/* 基本色指定 */
:root {
    --text: #343434;/*  */
    --link_a: #6948BA;/*  */
    --link_hover: #3B286A;/*  */
    --link_hover_btn: #ffffff;/*  */
    --text_active: rgba(69,16,116,0.50);/*  */
    --deeppurple: #6948BA;/* H3、address */
    --darkpurple: #451074;/* H2、footer */
    --yellow: #fff600;/*  */
    --red: #E35520;/*  */
    --border: #cccccc;/*  */
}

/* テキスト */
h1{color: var(--darkpurple); font-weight: 700; font-size: 1.9em;}
h2{color: var(--darkpurple); font-weight: 500; font-size: 1.6em;padding-bottom: 20px;}
@media screen and (max-width:768px){h2{font-size: 1.4em;}}
h3{color: var(--deeppurple); font-weight: 500; font-size: 1.3em;padding-bottom: 10px;}
h4{color: var(--red); font-weight: 500; font-size: 1.0em;}
h6{font-size: 0.6em; color:#fff; font-weight:400;}/* footer-txt */
button.btn,a{color:var(--link_a); font-weight: 500; font-size:1.1em;}
button.btn:hover,a:hover{color:var(--link_hover); font-weight: 500;}
button.btn:active,a:active{color:var(--link_active); font-weight: 500;}
button.btn,a.btn{text-decoration: none; padding: 5px 20px; background-color: rgba(255,255,255,0.50); border: 1px var(--link_a) solid; border-radius: 50px;transition: .4s cubic-bezier(0.37, 0, 0.63, 1);cursor: pointer;}
button.btn:hover,a.btn:hover{color:var(--link_hover_btn); font-weight: 500; background-color: var(--text_active);letter-spacing: 0.15em;cursor: pointer;}

p{padding-bottom: 20px;}
.bg_deeppurple p,.bg_deeppurple ul li,.bg_deeppurple a{color:#fff !important;}
.bg_deeppurple h2,.bg_deeppurple h3{color:rgba(255,253,191,1);}

/* background */
.bg_white{background:rgba(254,254,254,.8);}
.bg_co{background:url("../img/favicon/logomark.svg") top 40px right 40px no-repeat,rgba(254,254,254,.8); background-blend-mode: screen,normal; background-size: 250px,auto;}
@media screen and (max-width:768px){
.bg_co{background:url("../img/favicon/logomark.svg") top 40px right 10px no-repeat,rgba(254,254,254,.8); background-blend-mode: screen,normal; background-size: 150px,auto;}
}
.bg_yellow{background:rgba(255,253,191,.4);}
.bg_yellow_service{background:url("../img/bg_service.png")top center no-repeat,rgba(255,253,191,.4); background-size:cover; background-blend-mode: overlay,normal; }
.bg_jsc{background:url("../img/bg_jsc.png")0 0,rgba(255,253,191,.4); background-attachment: fixed,scroll;}
.bg_purple{background:rgba(218,209,238,.4);}
.bg_purple_head{background:url("../img/bg_head_logo.png") left bottom no-repeat,rgba(218,209,238,.4); background-size: auto 100%,auto;}
@media screen and (max-width:768px){
	.bg_purple_head{background:url("../img/bg_head_logo.png") center bottom no-repeat,rgba(218,209,238,.4); background-size: auto 100%,auto;}
}
.bg_dot{background: url("../img/bg_dot.png"),rgba(218,209,238,.4);}
.bg_deeppurple{background:#6948BA;}
footer{background:#451074; border-top:10px #6948BA solid;}

/* 区切り */
section{width: 100%; padding: 60px 0;}
.container{width: 80%; margin: 0 auto;}
@media screen and (min-width:1200px){.container{width: 60%; margin: 0 auto;}}
footer{width: 100%; padding: 60px 0; margin: 0 auto; text-align: center;position: absolute; botom:0;}

/* 各種パーツ */
/* card設定 */
.card{padding:20px; border-radius: 10px;  background-color: rgba(255,255,255,0.50); box-shadow: 0px 1px 2px 1px rgba(0,0,51,0.2); display: block; min-height: 100px;
}

/* ul・dl */
ul{padding-bottom: 20px;}
li{list-style: none;}
ul.list li{list-style: inside; padding-left: 0.5em;}
/* table */
table,th,td{border:1px var(--border) solid; border-collapse: collapse; color: var(--text);}
th{background:rgba(218,209,238,.4);}
tr:nth-child(even){background:rgba(255,255,255,0.5);}
tr:nth-child(odd){background:rgba(245,245,245,0.5);}
th,td{padding:10px 20px;}

/* header設定 */
header{height: 80px; background: #fff; box-shadow: 0px 1px 2px 1px rgba(0,0,51,0.2);}
header .container{display: flex; justify-content:space-between;}
header h1 img{ width: auto; height: 60px; padding:10px 0;}
.nav_mail_icon{padding-top: 20px;}
@media screen and (max-width:960px){
	.nav_mail_icon{ display:none;}
}
@media screen and (max-width:768px){
	header{height: 70px; background: #fff; box-shadow: 0px 1px 2px 1px rgba(0,0,51,0.2);}
	header h1 img{ width: auto; height: 40px; padding-top: 15px;margin-left: -20px;}
}

/*===========================================================*/
/*グローバルナビゲーション＆ドロップダウンメニュー */
/*===========================================================*/

.nav_ls{background: var(--deeppurple);}
.li_sm{display: none;}
@media screen and (max-width:980px){.li_sm{display: block;}}
/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*ナビゲーションを横並びに*/
nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
	padding-bottom: 0;
}
/*2階層目以降は横並びにしない*/
nav ul ul{
	display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
	position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a{
	display: block;
	text-decoration: none;
	color: #fff;
	padding:15px 30px;
	transition:all .3s;
}
nav ul li.active a{color: rgba(255,253,191,1); }

nav ul li li a{
	padding:15px 20px;
}


@media screen and (max-width:1200px) {
nav ul li a{
	padding:20px;
}
nav ul li li a{
	padding:10px 20px;
}
}

nav ul li a:hover{
	color:rgba(255,253,191,1);
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
	content:'';
	position: absolute;
	right:15px;
	top:20px;
	width:6px;
	height:6px;
	border-top: 2px solid #eee;
    border-right:2px solid #eee;
    transform: rotate(135deg);
}

@media screen and (max-width:1200px) {
nav ul li.has-child::before{
    right:8px;
	top:25px
}
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	left:0;
	top:40px;
	z-index: 4;
    /*形状を指定*/
	background:rgba(218,209,238,.9);
	width:16em;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
	color: var(--deeppurple);
	border-bottom:solid 1px rgba(255,255,255,0.4);
}

nav li.has-child ul li:last-child a{
	border-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
	background:var(--darkpurple);
	color: #fff;
}

/*==960px以下の形状*/

@media screen and (max-width:960px){
	nav{
		padding: 0;
	}
	
	nav ul{
		display: block;
	}
	
nav ul li a{
	border-bottom:1px solid rgba(255,255,255,0.4);
}

/*矢印の位置と向き*/

nav ul li.has-child::before{
	left:20px;
	margin-top: -5px;
		border-top: 2px solid var(--deeppurple);
    border-right:2px solid var(--deeppurple);
}

nav ul ul li.has-child::before{
    transform: rotate(135deg);
	left:20px;
}
    
nav ul li.has-child.active::before{
    transform: rotate(-45deg);
}

}

/*==================================================
ハンバーガー：クリックしたらナビが上から下に出現
===================================*/

@media screen and (max-width:960px) {
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:-120%;
    left:0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:rgba(218,209,238,.9);
	/*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    width: 90%;
    margin:100px auto 0 auto;
}
    
#g-nav ul ul{
    width: 100%;
    margin: 0;
}
 
/*プルダウンナビのCSS*/
#g-nav ul li.has-child ul{
  	position: relative;
	left:0;
	top:0;
	width:100%;
	visibility:visible;/*JSで制御するため一旦表示*/
	opacity:1;/*JSで制御するため一旦表示*/
	display: none;/*JSのslidetoggleで表示させるため非表示に*/
	transition:none;/*JSで制御するためCSSのアニメーションを切る*/
    transform: none;
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center; 
}

#g-nav li a{
	color: var(--deeppurple);
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}
	#g-nav li a:hover{background: var(--darkpurple); color: #fff;}
}

/*==================================================
　ハンバーガー：3本線が奥行きを持って回転して×に
===================================*/

.g-nav-openbtn{
    display: none;
}
 
@media screen and (max-width:960px) {
.g-nav-openbtn{
    display: block;
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 30px;
	cursor: pointer;
    width: 50px;
    height:50px;
	 background: var(--deeppurple);
	border-radius: 10px;
}

/*ボタン内側*/

.g-nav-openbtn .openbtn-area{
    transition: all .4s;
}

.g-nav-openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background: #fff;
  	width: 45%;
  }


.g-nav-openbtn span:nth-of-type(1) {
	top:15px;	
}

.g-nav-openbtn span:nth-of-type(2) {
	top:23px;
}

.g-nav-openbtn span:nth-of-type(3) {
	top:31px;
}

/*activeクラスが付与されると
線と周りのエリアが回転して×になる*/

.g-nav-openbtn.active .openbtn-area{
	transform: rotateY(-360deg);
}

.g-nav-openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-135deg);
    width: 30%;
}

.g-nav-openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.g-nav-openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(135deg);
    width: 30%;
}
}

/*===========================================================*/
/*ページトップリンクボタン・スクロール設定 */
/*===========================================================*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:rgba(69,16,116,0.8);
	border-radius: 5px;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: rgba(218,209,238,.8);
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 30px;
	bottom:140px;
	z-index: 50;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: .9;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: .9;
	transform: translateY(100px);
  }
}

/* toIndex設定 */
#toIndex{text-align: center;}

/* index.html設定 */

/* hero設定 */
#hero{width: 100%; aspect-ratio: 16 / 9; background: url("../img/index_main01.jpg") center 0 no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center;
animation-name: fadeOut;
animation-duration:3s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeOut{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.copy{text-align: center;}
.copy h2,.copy p{ text-shadow:1px 1px 2px rgba(0,0,51,0.2); }
.copy p{padding-top: 40px;}
.hide-md{display: none;}
@media screen and (max-width:768px){
 #hero{text-align: center;  width: 100%;}
	.copy h2{font-weight: 700;}
	.copy p{padding-top: 10px;}
	.hide-md{display: block;}
}
@media screen and (max-width:600px){ #hero{aspect-ratio: 9 / 16;}}
/* main-concept設定 */
#main-concept{text-align: center;}
#main-concept h2{font-size:2.5em; font-family: 'Rubik', sans-serif; padding-bottom: 0;}
@media screen and (max-width:768px){#main-concept h2{font-size:2em;} }
/* service設定 */
.card-wrapper{ display: flex; gap:40px; flex-wrap: wrap;}
.card-wrapper .card{flex:1 3 300px; text-align: center;}
@media screen and (max-width:768px){.card-wrapper .card{flex:1 2 200px;} }
.card-wrapper .card a{ color: var(--text); text-decoration: none; font-weight: normal;display: flex; flex-direction: column; align-items: center; justify-content: center;}
.card-wrapper .seika a{background: url("../img/logo_color/red.png") center center no-repeat; background-blend-mode: lighten; background-size: 30%; transition: .4s cubic-bezier(0.37, 0, 0.63, 1);}
.card-wrapper .seika a:hover{background-size: 40%;  }
.card-wrapper .kagai a{background: url("../img/logo_color/blue.png") center center no-repeat; background-blend-mode: lighten; background-size: 30%; transition: .4s cubic-bezier(0.37, 0, 0.63, 1);}
.card-wrapper .kagai a:hover{background-size: 40%;  }
.card-wrapper .season a{background: url("../img/logo_color/green.png") center center no-repeat; background-blend-mode: lighten; background-size: 30%; transition: .4s cubic-bezier(0.37, 0, 0.63, 1);}
.card-wrapper .season a:hover{background-size: 40%;  }
.card-wrapper .oyako a{background: url("../img/logo_color/pink.png") center center no-repeat; background-blend-mode: lighten; background-size: 30%; transition: .4s cubic-bezier(0.37, 0, 0.63, 1);}
.card-wrapper .oyako a:hover{background-size: 40%;  }
.card-wrapper .senior a{background: url("../img/logo_color/yellow.png") center center no-repeat; background-blend-mode: lighten; background-size: 30%; transition: .4s cubic-bezier(0.37, 0, 0.63, 1);}
.card-wrapper .senior a:hover{background-size: 40%;  }
.card-wrapper .rope a{background: url("../img/logo_color/purple.png") center center no-repeat; background-blend-mode: lighten; background-size: 30%; transition: .4s cubic-bezier(0.37, 0, 0.63, 1);}
.card-wrapper .rope a:hover{background-size: 40%;  }
/* 募集ブロック設定 */
.half-box-container{display: flex;}
.half-box{width: 50vw; text-align: center;}
@media screen and (max-width:768px){
.half-box-container{display: flex; flex-direction: column;}
.half-box{width: 100vw;}
}
/* address設定 */
.box-address{display: grid; gap:20px;}
.siteIndex{grid-row: 1 / 3; grid-column: 1 / 2;}
.ca{grid-row: 1 / 2;grid-column: 2 / 3; background: url("../img/logomark.png")bottom 10px right no-repeat; background-size:auto 60%;}
.GoogleMap{grid-row: 2 / 3; grid-column: 2 / 3;}
.ca li a{text-decoration: none; font-weight: normal;}
@media screen and (max-width:768px){
	.box-address{display: grid; gap:20px;}
.siteIndex{grid-row: 1 / 2; grid-column: 1 / 2; border-bottom: 1px var(--darkpurple) solid; margin-bottom: 20px;}
.ca{grid-row: 2 / 3;grid-column: 1 / 2;background: url("../img/logomark.png")center right no-repeat; background-size:auto 60%;}
.GoogleMap{grid-row: 3 / 4; grid-column: 1 / 2;}	
}
@media screen and (max-width:600px){
.ca{grid-row: 2 / 3;grid-column: 1 / 2;background: url("../img/logomark.png")bottom 10px right no-repeat; background-size:auto 30%;}
}
.siteIndex h3{background: var(--darkpurple); padding: 5px 10px; margin-right: 20px; margin-bottom: 20px;}
.siteIndex a{text-decoration: none; line-height: 2;}
.siteIndex a:hover{text-decoration: underline;}
.GoogleMap{
  position: relative;
  width: 100%;
}
.GoogleMap iframe{
width:100%;
aspect-ratio: 16/9;
}

/* about.html設定 */
/* 研究所概要table設定 */
table.co{ width: 100%;}
table.co a{ text-decoration: none; color: var(--text); font-weight: normal;}
@media screen and (max-width:768px){
  table.co th {display: block; text-align:center; font-size:0.9em;}
  table.co td {display: block; text-align: left; font-size:0.8em;}
}
.about_logo{max-width: 240px; height:auto;}
/* card_bg設定 */
div.card.purple{background:url("../img/logo_color/purple.png")center center no-repeat,rgba(255,255,255,0.50); background-blend-mode: screen,normal; background-size: auto 80%,auto;}
div.card.red{background:url("../img/logo_color/red.png")center center no-repeat,rgba(255,255,255,0.50); background-blend-mode: screen,normal; background-size: auto 80%,auto;}
div.card.yellow{background:url("../img/logo_color/yellow.png")center center no-repeat,rgba(255,255,255,0.50); background-size: auto 80%,auto;}

/* service.html設定 */
.anchor_link_btn{display: flex; flex-direction: row; justify-content: center; gap:20px; flex-flow: wrap;}
@media screen and (max-width:768px){
.anchor_link_btn{ flex-direction: column;}	
}
.box1-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap:40px;}
.box1-3 .card dl{display: flex; flex-wrap: nowrap; width: 100%; padding: 5px 0;}
.box1-3 .card dt {width: 30%; text-align: center; }
.box1-3 .card dd {width: 70%; padding-left:10px;}
.box1-3 .card dl:nth-child(odd){background:#fff; }
.box1-3 .card dl:nth-child(even){background:rgba(255,253,191,.5); }
.box1-3 img,.box1-2 img,.box2-1 img,.grid-img-sm img{width:100%; height: auto; border-radius: 10px; margin-bottom: 20px;}
section#kagai hr{margin: 20px auto; border-top:1px var(--border) dotted;}
.box1-2{ display: grid; grid-template-columns: repeat(1,2fr 1fr); gap:40px;}
.box2-1{ display: grid; grid-template-columns: repeat(1,160px 3fr); gap:20px;}
.box_season{ display: grid; grid-template-columns: repeat(2,1fr); gap:40px;}
.box_season .card{ display: grid; grid-template-columns: repeat(2,1fr); gap:40px;}
.box_season_img{display: grid; grid-template-columns: repeat(2,1fr); gap:10px;}
.box_season_img img{width: 100%; border-radius: 6px;}
.grid-img-sm{display: none;}
@media screen and (max-width:960px){.box_season .card{ display: grid; grid-template-columns: repeat(1,1fr); gap:00px;}}
@media screen and (max-width:768px){
.box1-3{ display: grid; grid-template-columns: repeat(1,1fr); gap:20px;}
.box1-2,.box2-1{ display: grid; grid-template-columns: repeat(1,1fr); gap:0px;}
.grid-img-sm{display: grid; grid-template-columns: repeat(2,1fr); gap:20px;}
.grid-img{display: none;}
dl.max-768{margin-bottom: 20px;}
.box_season{grid-template-columns: repeat(1,1fr);}
.padding-sm{padding-top: 20px;}
}
.schedule h3{display: block; background: var(--deeppurple); color: #fff; padding: 5px 10px; border-radius: 10px 10px 0 0;}
.schedule-body{padding:20px; background:rgba(218,209,238,.4);border-radius:  0 0 10px 10px;line-height: 1.8;}
.info-body dl,.schedule-body dl{border-bottom: 1px var(--border) solid; padding-bottom: 10px; margin-bottom: 10px;}
.info-body dl dt,.schedule-body dl dt{font-weight: 600;}
.info-body dl dd:first-of-type,.schedule-body dl dd:first-of-type{font-weight: 700;color:var(--deeppurple); font-size:1.1em;}
.info-body dl dt.date a{text-decoration: none !important;}
.btn-right{display: flex; flex-direction: row-reverse; padding-top: 10px;}
/* つなひき連盟設定 */
	table.history{ width: 100%;}
@media screen and (max-width:960px){
	table.history .thead {font-size:0.9em;}
	table.history td {
    font-size:0.8em; padding: 5px 10px;
	}	
}
@media screen and (max-width:768px){
	table.history .thead {
    display: none;
  }
  table.history tr {
    width: 100%;
  }
  table.history td {
    display: block; text-align: left; font-size:0.8em;
	}
  table.history td:first-child {
    background: rgba(218,209,238,.4); color: var(--text); font-weight: bold; text-align: center;
}
  table.history td:before {
    content: attr(data-label);
    float: left; font-weight: bold; margin-right: 10px;}
}

/* form.html設定 */

/* formレイアウト設定 */
.submit{display:flex; flex-direction: column; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px var(--border) solid;}
.submit p{margin-top:20px;}
.submit p a{cursor: pointer;}
.badge{ padding: 2px 10px; background: var(--red); color: #fff; border-radius:50px; font-size: 0.5em;}
.invalid-feedback{color: red; font-weight: 500; display: none;}
.form-group{margin-bottom:20px;}
.form-group:last-child{margin-bottom: 0;}
.form-group dl dd input,.form-group dl dd textarea{padding: 10px 10px; margin-top: 10px; border:1px var(--border) solid; border-radius: 5px; width: 80%;}
.form-container{ display:flex; flex-direction:row; justify-content:center; align-items:stretch; width:100%; gap:40px;}
.LeftSide,.RightSide{width:40%;}
@media screen and (max-width:960px){
   .form-container{ display:flex; flex-direction: column; justify-content:center; width:100%; gap:40px;}
	.LeftSide,.RightSide{width:100%;}
	.form-group dl dd input,.form-group dl dd textarea{width: 95%;}
	}

/* form cgi 設定 */
span.msg{color:var(--red); font-weight:600;}
/* wordpress 文字色 設定 */
.has-black-color{color:#000;}
.has-cyan-bluish-gray-color{color:#abb8c3;}
.has-white-color{color:#fff;}
.has-pale-pink-color{color:#f78da7;}
.has-vivid-red-color{color:var(--red);}
.has-luminous-vivid-orange-color{color:#ff6900;}
.has-luminous-vivid-amber-color{color:#fcb900;}
.has-light-green-cyan-color{color:#7bdcb5;}
.has-vivid-green-cyan-color{color:#00d084;}
.has-pale-cyan-blue-color{color:#8ed1fc;}
.has-vivid-cyan-blue-color{color:#0693e3;}
.has-vivid-purple-color{color:#9b51e0;}