/* =================
共通カラーset02
================= */
.tc00 {
	color: #333129;
}

.tc01 {
	color: #dcd3b2;
}

.tc02 {
	color: #4340f5;
}

.tc03 {
	color: #fff;
}

.bc01 {
	background-color: #333129;
}

.bc02 {
	background-color: #004445;
}

.bc03 {
	background-color: #DCD3B2;
}

.boxbg01 {
	background-color: #DCD3B2;
}

.boxbg02 {
	background-color: #fff;
}

.boxbg03 {
	background-color: #4340f5;
}
.boxbg04 {
	background-color: #01c213;
}
.boxbg05 {
	background-color: #f54040;
}
.boxbg06 {
	background-color: #fa8904;
}

.lng {
	background:linear-gradient(transparent 50%, #99ff99 0%);
}

.ulg {
	background:linear-gradient(transparent 80%, #99ff99 0%);
}

.out2w {
	color:#000;
	-webkit-text-fill-color:#fff;
	-webkit-text-stroke:2px #000;
}
/* =================
共通カラーset01
================= */
.tc00bp {
	color: #000;
}

.tc01bp {
	color: #4340f5;
}

.tc02bp {
	color: #f5f5f5;
}

.bc01bp {
	background-color: #a2ffe4;
}

.bc02bp {
	background-color: #4340f5;
}

.boxbg01bp {
	background-color: #f5f5f5;
}

.boxbg02bp {
	background-color: #fff;
}

/* =================
共通グラデーション
================= */

.gradation {
	display: inline-block;
	background: linear-gradient(45deg, #4158D0, #C850C0 30%, #FFCC70, #C850C0, #4158D0);
	background: -webkit-linear-gradient(45deg, #4158D0, #C850C0 30%, #FFCC70, #C850C0, #4158D0);
	background-size: 300% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradientEffect 8.0s infinite alternate;
}
	
.gradation2 {
	display: inline-block;
	background: linear-gradient(45deg, #4340f5 16%, #98bcdf 57%, #C850C0 90%);
	background: -webkit-linear-gradient(45deg, #4340f5 16%, #98bcdf 57%, #C850C0 90%);
	background-size: 300% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradientEffect 4.5s infinite alternate;
}
	
@keyframes gradientEffect {
	from {background-position: left}
	to {background-position: right}
}

/* =================
ボタンデザイン
================= */
.btn--cl,
a.btn--cl,
button.btn--cl {
  color: #fff;
  background-color: blue;
}
.btn--cl:hover,
a.btn-cl:hover
button.btn--cl:hover {
  color: #fff;
  background: #FF7518;
}

.btn--cl2,
a.btn--cl2,
button.btn--cl2 {
  color: #fff;
  background-color: #4340f5;
}
.btn--cl2:hover,
a.btn-cl2:hover
button.btn--cl2:hover {
  color: #fff;
  background: #000;
}

.btn--cl3,
a.btn--cl3,
button.btn--cl3 {
  color: #000;
  background-color: #fff;
}
.btn--cl3:hover,
a.btn-cl3:hover
button.btn--cl3:hover {
  color: #000;
  background: #FF7518;
}

.btn--cl4,
a.btn--cl4,
button.btn--cl4 {
  color: #fff;
  background-color: #000;
}
.btn--cl4:hover,
a.btn-cl4:hover
button.btn--cl4:hover {
  color: #fff;
  background: blue;
}

.btn--cl5,
a.btn--cl5,
button.btn--cl5 {
  color: #fff;
  background-color: #00B900;
}
.btn--cl5:hover,
a.btn-cl5:hover
button.btn--cl5:hover {
  color: #00B900;
  background: #a2ffe4;
}

.btn--cl6,
a.btn--cl6,
button.btn--cl6 {
  color: #fff;
  background-color: #ea3559;
}
.btn--cl6:hover,
a.btn-cl6:hover
button.btn--cl6:hover {
  color: #fff;
  background: #FF7518;
}

.btn--cl7,
a.btn--cl7,
button.btn--cl7 {
  color: #000;
  background-color: #ddfe5a;
}
.btn--cl7:hover,
a.btn-cl7:hover
button.btn--cl7:hover {
  color: #fff;
  background: #FF7518;
}

.fa-position-left {
  position: absolute;
  top: calc(40% - .5em);
  left: 2.5rem;
}

.fa-position-left2 {
	position: absolute;
	top: calc(50% - .5em);
	left: 2.5rem;
  }

.btn--radius,
a.btn--radius,
button.btn--radius
{
    border-radius: 100vh;
}

/* =================
共通グラデーション
================= */
.hdblue{
	padding: 0.5em;
	color: #000;
	background: #0596ff;
	border-left: solid 5px #e50000;
}

.hdsky{
	padding: 1rem 2rem;
	color:#fff;
  	border-left: 6px double #fff;
  	background: #00a9e0;
}

.hdg{
	padding: 1rem 2rem;
	color:#fff;
  	border-left: 6px double #fff;
  	background: #02d55d;
}

.hdbk{
	padding: 1rem 2rem;
	color:#fff;
  	border-left: 6px double #fff;
  	background: #000;
}

.hdli {
	position: relative;
	display: inline-block;
	height: 64px;
	margin-left: 30px;
	padding: 1.5rem 2rem 1rem 3rem;
	color: #fff;
	background: #fa4141;
	max-width: 600px;
}
  
.hdli:before {
	position: absolute;
	top: 0;
	left: -30px;
	content: '';
	border-width: 32px 30px 32px 0;
	border-style: solid;
	border-color: transparent #fa4141 transparent transparent;
}
  
.hdli:after {
	position: absolute;
	top: calc(50% - 7px);
	left: -10px;
	width: 14px;
	height: 14px;
	content: '';
	border-radius: 50%;
	background: #fff;
}


.hdsq {
	position: relative;
	padding: 1rem 2rem;
	border: 4px solid #000;
	background: yellow;
}
  
.hdsq:before {
	position: absolute;
	top: 4px;
	left: 4px;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	content: '';
	border: 2px solid #000;
}

.hdsqw {
	position: relative;
	padding: 1rem 2rem;
	border: 3px solid #000;
	background: #fff;
}
  
.hdsqw:before {
	position: absolute;
	top: 4px;
	left: 4px;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	content: '';
	border: 2px solid #000;
}

.hdra {
	position: relative;
	padding: 1rem 2rem;
	border: 1px solid #000;
	border-radius: 10px;
	background: #fff;
}

.boxstp {
    padding: 1.5rem;
    background: repeating-linear-gradient(-45deg, #5ECCED 0 5px, #fff 5px 10px);
    color: #353535;
}

.boxstp-body {
    padding: 1rem;
    border-radius: 1rem;
    background-color: white;
    color: #353535;
}

.boxstp p {
    line-height: 1.5;
}

.boxtag {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #ED1A3D;
}
.boxtag .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #ED1A3D;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.boxtag p {
    margin: 0; 
    padding: 0;
}