@charset "utf-8";
/* CSS Document */
/*
Designed by En-Graphiction Templates
https://en-graphiction.com
*/
@import url("material.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html,
body {
	min-height: 100%;
}
html,
.whole-wrapper {
	overflow-x: hidden;
	position: relative;
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
	overflow-x: hidden;
	margin: 0;
	color: rgba(0,0,0,1);
	background: rgba(255,255,255,1);
	font-family: "Helvetica Neue","Arial","Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Meiryo","sans-serif";
	line-height: 2;
	position: relative;
	font-size: 1rem;
}
.ccm-panel,
.ccm-panel-detail,
.ui-dialog-content{
	font-feature-settings:initial;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
hr {
	display: block;
	height: 1px;
	border-top: 1px solid #ccc;
	margin: 32px 0;
	padding: 0;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	zoom: 1;
	clear: both;
}
a {
	color: rgba(0,0,0,1);
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
a img {
	border: none;
}
img {
	vertical-align: top;
}
.img-responsive,
.img-fluid {
	width: 100%;
	height: auto;
}
ul,
li,
ol {
	padding: 0;
	margin: 0;
	list-style: none;
}
input,
button,
textarea,
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: "Helvetica Neue","Arial","Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Meiryo","sans-serif";
}
time{
	text-align: right;
	width: 100%;
	display: block;
}
/*====================================================================
　　　　　　　　　　　　共通設定
====================================================================*/
/*==================== 文字揃 ====================*/
.tac {
	text-align: center !important;
}
.tal {
	text-align: left !important;
}
.tar {
	text-align: right !important;
}
/*==================== 余白 ====================*/
.pdg-8 {
	padding: 8px !important;
}
.pdg-16 {
	padding: 16px !important;
}
.pdg-32 {
	padding: 32px !important;
}
.pdg-48 {
	padding: 48px !important;
}
.pdg-56 {
	padding: 56px 0 !important;
}
.pdg_t-16 {
	padding-top: 16px;
}
.pdg_b-16 {
	padding-bottom: 16px;
}
.mgn_t-0 {
	margin-top: 0 !important;
}
.mgn_b-0 {
	margin-bottom: 0 !important;
}
.mgn-a {
	margin-left: auto !important;
	margin-right: auto !important;
}
.mgn-0a {
	margin: 0 auto !important;
}
.mgn-0 {
	margin: 0 !important;
}
.mgn_t-8 {
	margin-top: 8px !important;
}
.mgn_b-8 {
	margin-bottom: 8px !important;
}
.mgn_t-16 {
	margin-top: 16px !important;
}
.mgn_b-16 {
	margin-bottom: 16px !important;
}
.mgn-32 {
	margin: 32px auto !important;
}
.mgn_t-32 {
	margin-top: 32px !important;
}
.mgn_b-32 {
	margin-bottom: 32px !important;
}
.mgn-48 {
	margin: 48px auto !important;
}
.mgn_t-48 {
	margin-top: 48px !important;
}
.mgn_b-48 {
	margin-bottom: 48px !important;
}
.mgn-56 {
	margin: 56px auto !important;
}
.mgn_t-56 {
	margin-top: 56px !important;
}
.mgn_b-56 {
	margin-bottom: 56px !important;
}
.dis_block {
	display: block;
}
/*==================== 色 ====================*/
/*==================== 背景色 ====================*/
.bg-wht {
	background: rgba(255, 255, 255, 1.00);
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.bg-blue {
	background: rgba(0, 58, 149, 1.00);
	color: rgba(255, 255, 255, 1.00);
}
.bg-orange {
	background: rgba(243, 152, 0, 1.00);
	color: rgba(255, 255, 255, 1.00);
}
.bg-red {
	background: rgba(230, 0, 18, 1.00);
	color: rgba(255, 255, 255, 1.00);
}
.bg-blue a,
.bg-orange a,
.bg-red a {
	color: rgba(255, 255, 255, 1.00);
}
.bg-gray{
	background: rgba(240,240,240, 1.00);
}
.bg-gold{
	background:rgba(202,177,93,0.15);
}
/*==================== ボックス ====================*/
.box-basic,
.box-blue,
.box-green,
.box-orange,
.box-red {
	padding: 16px 16px 0;
	border-radius: 8px;
	display: inline-block;
	width: 100%;
	margin: 0 auto 32px;
}
.box-basic {
	border: 1px solid #ddd;
	background: #F7F7F7;
}
.box-blue {
	border: 1px solid #C7C7F5;
	background: #F1F1FF;
}
.box-green {
	border: 1px solid #B4E9AC;
	background: #EEFFEC;
}
.box-orange{
	border:1px solid rgba(249,168,37,1.00);
	background:rgba(249,168,37,0.1);
}
.box-red{
	border:1px solid rgba(228,118,120,1);
	background:rgba(228,118,120,0.1);
}
/*==================== ビュレットリスト ====================*/
#page-content ul li{
	margin: 0 0 16px 0px;
	padding-left: 1em;
	position: relative;
}
#page-content ul li::before{
	font-family: "bootstrap-icons";
	font-weight: 400;
	content: "\F287";
	font-size: 0.6rem;
	position: absolute;
	top: 6px;
	left: 2px;
}
/*==================== 数字リスト ====================*/
.number_list{
	width:100%;
	text-align:left;
	line-height:2rem;
	margin:24px auto;
}
.number_list li{
	display: table-row;
	counter-increment:number;
}
.number_list li:before{
	content: counter(number) ".";
	display: table-cell;
	padding-right:4px;
	white-space: nowrap;
}
/*==================== 文字 ====================*/
h1,
h4,
h5,
h6 {
	margin: 16px auto;
	line-height: 2;
}
h2,
h3,
h4,
h5 {
	font-weight: 400;
}
h1 {
	font-size: 4.8rem;
	letter-spacing: -.04em;
}
h2 {
	font-size: 8vw;
	line-height: 1.3;
	position: relative;
	font-weight: bold;
	margin: 64px auto 32px;
	text-align: left;
}
h2:before {
	content: "\F48D";
	font-family: "bootstrap-icons";
	font-weight: 400;
	position: relative;
	bottom: -5px;
	left: 0;
}
#page-privacypolicy h2:before{
	content: "\F537";
}
h3 {
	font-size: 1.8rem;
	line-height: 1.2;
	margin: 0px auto 16px;
	position: relative;
  padding: 28px 0 0 16px;
	border-bottom: 1px solid rgba(255,0,0,1);
}
h3 span{
	position: relative;
	z-index: 2;
}
h3:before {
  content: attr(data-en);
	position: absolute;
	top: 0px;
	left: 0;
	color: rgba(255,255,255,0.2);
	font-size: 2.8rem;
	text-transform: uppercase;
	z-index: 1;
}
h4 {
	font-size: 1.6rem;
	position: relative;
	border-left: 8px solid;
	padding-left: 8px;
}
h5 {
	font-size: 1.4rem;
	padding-left: 16px;
}
h5:before {
	font-family: "bootstrap-icons";
	font-weight: 400;
	content: "\F5A1";
	margin-right: 4px;
	margin-left: -16px;
	top: -3px;
	position: relative;
	font-size: 1rem;
}
h6 {
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: .02em;
}
/*  -  蛍光ペン風  -  */
.attention-red {
	background: linear-gradient(transparent 60%, #Fcc 100%);
}
.attention-yellow {
	background: linear-gradient(transparent 60%, #ff6 100%);
}
/*  -  アンダーライン  -  */
.underline-red{
  text-decoration-line: underline;
  text-decoration-color: rgba(255,0,0,1);
}
.underline-white{
  text-decoration-line: underline;
  text-decoration-color: rgba(255,255,255,1);
}
/*  -  ページタイトル  -  */
#headertitle {
	position: relative;
	width: 100%;
	overflow: hidden;
	background:linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,.6)), url(../images/bg-headertitle.webp);
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
}
#headertitle h1 {
	width: 100%;
	display: block;
	font-size: 2.8rem;
	color: rgba(255, 255, 255, 1.00);
	text-align: center;
	padding: 96px 0;
}
/*  -  文字調整  -  */
p {
	margin: 0 auto 16px;
	letter-spacing: 1px;
}
.small {
	font-size: 0.8rem;
}
.small i{
	font-size: 0.8rem;
}
.text-middle {
	font-size: 1.4rem;
}
.text-large {
	font-size: 1.6rem;
}
.text-danger {
	color: #F66;
}
.weight-bold{
	font-weight: bold;
}
.big_icon i {
	font-size: 5rem !important;
	color: rgba(249, 168, 37, 1.00);
	bottom: 0 !important;
	margin: 0 auto 32px !important;
}
/*==================== ヘッダー ====================*/
header {
	width: 100%;
	z-index: 1;
	background: rgba(255,255,0,1);
}
.header_info {
	margin: 4px 0 0;
	line-height: 1.2;
	text-align: right;
}
.header_logo a {
	text-decoration: none;
}
/*==================== フッター ====================*/
footer {
	clear: both;
	position: relative;
	background: rgba(255,255,0,1);
}
.mega-footer a {
	line-height: 2;
}
.footer-bottom {
	clear: both;
}
footer .copyright i {
	font-size: 0.8rem;
}
.footer-top-image,
.footer-top-image img{
	width: 100%;
	height: auto;
}
/*==================== レイアウト ====================*/
#page-content {
	padding: 0px;
}
.auto_height {
	height: auto;
	width: 100%;
}
/*==================== ボタン ====================*/
.button-basic,
.button-primary,
.button-success,
.button-info,
.button-warning,
.button-danger,
.button-gold,
.button-fab,
.button-text{
	background: #6c757d;
	border: none;
	color: #fff;
	position: relative;
	margin: 0 auto 16px;
	min-width: 64px;
	padding: 4px 24px;
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	line-height: 36px;
	vertical-align: middle;
	-webkit-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	border-radius: 32px;
}
.button-text {
	color: #1A79B3;
	background: rgba(255, 255, 255, 0);
	box-shadow: none;
}
.button-primary {
	background: #0d6efd;
}
.button-success{
	background: #198754;
}
.button-info {
	background: #0dcaf0;
}
.button-warning {
	background: #ffc107;
	color: initial;
}
.button-danger {
	background: #dc3545;
}
.button-gold {
	background: rgba(202, 177, 93, 1);
	color: initial;
}
.button-fab {
	border-radius: 50%;
	height: 64px;
}
.button-basic:active,
.button-basic:focus,
.button-basic:hover {
	background: #5c636a;
}
.button-primary:active,
.button-primary:focus,
.button-primary:hover {
	background: #0b5ed7;
}
.button-success:active,
.button-success:focus,
.button-success:hover{
	background: #157347;
}
.button-info:active,
.button-info:focus,
.button-info:hover {
	background: #31d2f2;
}
.button-warning:active,
.button-warning:focus,
.button-warning:hover {
	background: #ffca2c;
}
.button-danger:active,
.button-danger:focus,
.button-danger:hover {
	background: #bb2d3b;
}
.button-gold:active,
.button-gold:focus,
.button-gold:hover {
	background: rgba(204, 179, 118, 1);
}
.button-text:hover {
	background: rgba(158, 158, 158, .2);
}
.button-text:active,
.button-text:focus {
	background: rgba(158, 158, 158, .4);
}
.button-basic:active,
.button-basic:focus,
.button-basic:hover,
.button-primary:active,
.button-primary:focus,
.button-primary:hover,
.button-success:active,
.button-success:focus,
.button-success:hover,
.button-info:active,
.button-info:focus,
.button-info:hover,
.button-warning:active,
.button-warning:focus,
.button-warning:hover,
.button-danger:active,
.button-danger:focus,
.button-danger:hover,
.button-gold:active,
.button-gold:focus,
.button-gold:hover {
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
}
.pdg-32 span,
.pdg-56 span,
.pdg-32 button,
.pdg-56 button,
.pdg-32 p:last-child,
.pdg-56 p:last-child {
	margin: 0 auto;
}
/*==================== ボーダー ====================*/
.border-c1s {
	border: #ccc 1px solid;
}
.border-right-c1s {
	border-right: #ccc 1px solid;
}
.border-left-c1s {
	border-left: #ccc 1px solid;
}
.border-top-e1s {
	border-top: #e0e0e0 1px solid;
}
.border-bottom-e1s {
	border-bottom: #e0e0e0 1px solid;
}
/*==================== 正方形画像を円に ====================*/
.ccm-circle-image-block {
	border-radius: 50%;
}
/*==================== 埋め込み ====================*/
iframe {
	width: 100% !important;
}
.radius-8{
	border-radius: 8px;
}
/*　スマホ（スマートフォン・タブレット）・タブレット用
---------------------------------------------------------------------*/
@media (max-width: 768px) {
	.tac-ss {
		text-align: center;
	}
	.pdg-0-16-ss {
		padding: 0 16px;
	}
	.pdg-32-0-ss {
		padding: 32px 0px;
	}
	.pdg-32-16-ss {
		padding: 32px 16px;
	}
	.mgn_b-32-ss{
		margin-bottom: 32px !important;
	}
	.mgn_t-32-ss{
		margin-top: 32px !important;
	}
	.small-screen_br {
		/*改行*/
		display: block;
	}
	.small-screen_none {
		/*非表示*/
		display: none;
	}
	.sidebar-page-list-wrapper,
	.side-logo_area {
		display: none;
	}
	.myframe {
		padding: 32px 0;
	}
	.header_logo{
		padding: 4px 8px;
		z-index: 1;
	}
	.header_logo img{
		height: auto;
		width: 100%;
	}
	.header_logo-sub{
		display: none;
	}
	.header_info {
		display: none;
	}
	#headertitle {
		padding: 16px 0;
		margin: 0;
	}
	#headertitle h1 {
		padding: 16px;
		font-size: 2rem;
		text-align: center;
		margin: 0;
	}
	main {
		padding: 32px 0 0;
	}
	.container{
		width: 96%;
	}
	.pdg-8 .container{
		width: 100%;
	}
	main,
	.page-content-right,
	.page-content-left,
	.side-content-left,
	.side-content-right {
		margin: 0 auto;
	}
	.mega-footer {
		padding: 32px 16px 16px;
		margin-top: 0;
	}
	.footer-top-image{
		margin-top: 32px;
	}
	.side-content-left,
	.side-content-right {
		width: 100%;
		margin-top: 32px;
	}
	.img_l img,
	.img_r img {
		width: 88%;
		height: auto;
		margin: 0 auto 16px;
		display: block;
	}
	h1 {
		font-size: 8vw;
	}
	h2 {
		margin: 48px auto 32px;
	}
	h3 {
		font-size: 6vw;
	}
	h4 {
		font-size: 5vw;
	}
	h5 {
		font-size: 5vw;
	}
	h5 {
		font-size: 6vw;
	}
	.text-large {
		font-size: 1.4rem;
	}
	.text-middle {
		font-size: 1.2rem;
	}
	.text-middle-ss {
		font-size: 7vw !important;
	}
	.ccm-ss_big-image-block {
		width: 140%;
		margin-left: -20%;
	}
	.home_catch {
		padding: 0;
	}
	/*==================== ページ上部へ戻る ====================*/
	.page_top {
		background: rgba(255, 255, 255, 1.00);
		width: 100%;
		text-decoration: none;
		text-align: center;
		color: rgba(0,0,0,1) !important;
		display: block;
		padding: 8px 0px;
		line-height: 2;
		position: relative;
		margin: 0 auto 32px;
	}
	.page_top i {
		font-size: 1rem;
		margin-right: 8px;
	}
}
/*　パソコン（PC）用
---------------------------------------------------------------------*/
@media (min-width: 769px) {
	/*==================== レイアウト ====================*/
	.tac-ls {
		text-align: center;
	}
	.side-content-left,
	.side-content-right {
		width: 30%;
	}
	.side-content-left {
		padding: 0 40px 0 0;
	}
	.side-content-right {
		padding: 0 0 0 40px;
	}
	.page-content-right,
	.page-content-left {
		width: 70%;
	}
	#panels {
		padding: 0 32px;
	}
	header {
		padding: 16px;
	}
	.mega-footer {
		padding: 80px 32px 32px;
		margin-top: 0px;
	}
	.footer-top-image{
		margin-top: 80px;
	}
	#headertitle h1 {
		color: rgba(255,255,255,1);
		font-size: 3rem;
		margin: 0 auto 0;
	}
	.header_logo img {
		width: 100%;
		padding: 4px 0;
	}
	.header_logo-sub{
		padding: 0.4% 0 0;
	}
	a[href^="tel:"] {
		pointer-events: none;
		text-decoration: none;
	}
	.large-screen_br {
		/*改行*/
		display: block;
	}
	h2 {
		font-size: 2.4rem;
		padding: 0 0px 0 2.2rem;
	}
h2:before,
h2:before {
	margin-left: -2.2rem;
}
.mgn-0-0-16-16 {
	margin: 0 0 16px 16px !important;
}
	.mgn_t-32-ls{
		margin-top: 32px !important;
	}
	.mgn_b-32-ls{
		margin-bottom: 32px !important;
	}
	.mgn_t-64-ls{
		margin-top: 64px !important;
	}
	.mgn_b-64-ls{
		margin-bottom: 64px !important;
	}
	.mgn_t-80-ls{
		margin-top: 80px !important;
	}
	.mgn_b-80-ls{
		margin-bottom: 80px !important;
	}
	.mgn_t-96-ls{
		margin-top: 96px !important;
	}
	.mgn_b-96-ls{
		margin-bottom: 96px !important;
	}
	.mgn_t-144-ls{
		margin-top: 144px !important;
	}
	.mgn_b-144-ls{
		margin-bottom: 144px !important;
	}
	.pdg-96-ls {
		padding: 96px 0 !important;
	}
	/*==================== 縦書き ====================*/
	.w_m_vertical {
		-ms-writing-mode: tb-rl;
		/* for MS IE8+ */
		-webkit-writing-mode: vertical-rl;
		-moz-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		-webkit-text-orientation: upright;
		-moz-text-orientation: upright;
		text-orientation: upright;
	}
	.w_m_vertical-y {
		-ms-text-combine-horizontal: all;
		-webkit-text-combine: all;
		-moz-text-combine: all;
		text-combine-upright: all;
	}
	/*==================== 画像寄せ ====================*/
	.img_l img,
	.img_r img {
		width: 40%;
		height: auto;
	}
	.img_l img {
		float: left;
		margin: 0 16px 16px 0;
	}
	.img_r img {
		float: right;
		margin: 0 0 16px 16px;
	}
	/*==================== PC（パソコン）のみフロート ====================*/
	.float_r-ls {
		float: right;
	}
	.float_l-ls {
		float: left;
	}
	/*==================== ページ上部へ戻る ====================*/
	.page_top {
		position: fixed;
		right: 0px;
		bottom: 0px;
		display: block;
		z-index: 5;
		line-height: 0 !important;
	}
	.page_top i {
		font-size: 3rem;
		color: rgba(175,175,175, 1.00);
	}
	.page_top i:hover {
		color: rgba(175,175,175, 0.5);
	}
	.page_top span {
		display: none;
	}
	.anchor {
		margin-top: -60px;
		padding-top: 60px;
	}
}
/*====================================================================
　　　　　　　　　　グリッドレイアウト
====================================================================*/
@media (min-width:769px) {
	.container {
		width: 750px
	}
}
@media (min-width:992px) {
	.container {
		width: 970px
	}
}
@media (min-width:1200px) {
	.container {
		width: 1170px
	}
}
.container {
	margin: auto;
}
.flex_box-wrapper {
	margin: 0 auto;
	display: -webkit-box;
	display: -moz-box;
	display: box;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	flex-direction: row;
	-moz-box-pack: justify;
	-ms-box-pack: justify;
	box-pack: justify;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	flex-flow: row wrap;
}
.flex_box-around {
	-webkit-justify-content: space-around;
	-moz-justify-content: space-around;
	justify-content: space-around;
}
.flex_box-center {
	-webkit-justify-content: center;
	-moz-justify-content: center;
	justify-content: center;
}
@media (max-width: 768px) {
	.ccm_s-s-12 {
		width: 100%
	}
	.ccm_s-s-11 {
		width: 88%
	}
	.ccm_s-s-10 {
		width: 80%
	}
	.ccm_s-s-9 {
		width: 72%
	}
	.ccm_s-s-8 {
		width: 64%
	}
	.ccm_s-s-7 {
		width: 56%
	}
	.ccm_s-s-6 {
		width: 48%
	}
	.ccm_s-s-5 {
		width: 40%
	}
	.ccm_s-s-4 {
		width: 32%
	}
	.ccm_s-s-3 {
		width: 24%
	}
	.ccm_s-s-2 {
		width: 16%
	}
	.ccm_s-s-1 {
		width: 8%
	}
}
@media (min-width:769px) {
	.ccm_m-s-12 {
		width: 100%
	}
	.ccm_m-s-11 {
		width: 88%
	}
	.ccm_m-s-10 {
		width: 80%
	}
	.ccm_m-s-9 {
		width: 72%
	}
	.ccm_m-s-8 {
		width: 64%
	}
	.ccm_m-s-7 {
		width: 56%
	}
	.ccm_m-s-6 {
		width: 48%
	}
	.ccm_m-s-5 {
		width: 40%
	}
	.ccm_m-s-4 {
		width: 32%
	}
	.ccm_m-s-3 {
		width: 24%
	}
	.ccm_m-s-2 {
		width: 16%
	}
	.ccm_m-s-1 {
		width: 8%
	}
}
@media (min-width:992px) {
	.ccm_l-s-12 {
		width: 100%
	}
	.ccm_l-s-11 {
		width: 88%
	}
	.ccm_l-s-10 {
		width: 80%
	}
	.ccm_l-s-9 {
		width: 72%
	}
	.ccm_l-s-8 {
		width: 64%
	}
	.ccm_l-s-7 {
		width: 56%
	}
	.ccm_l-s-6 {
		width: 48%
	}
	.ccm_l-s-5 {
		width: 40%
	}
	.ccm_l-s-4 {
		width: 32%
	}
	.ccm_l-s-3 {
		width: 24%
	}
	.ccm_l-s-2 {
		width: 16%
	}
	.ccm_l-s-1 {
		width: 8%
	}
}
/*====================================================================
　　　　　　　　　　リップルエフェクト
====================================================================*/
.ripple {
	position: relative;
	overflow: hidden;
}
.ripple .rp-effect {
	position: absolute;
	border-radius: 50%;
	opacity: 0.35;
	transform: scale(0);
	background: #FFF;
	animation: ripple 700ms;
}
@-webkit-keyframes ripple {
	to {
		opacity: 0;
		transform: scale(2.0);
	}
}
@keyframes ripple {
	to {
		opacity: 0;
		transform: scale(2.0);
	}
}