@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*  widget-sidebar widget-sidebar-standard widget_categories */
:root{
  --main-padding: 5px;
  --main-padding-10: 10px;
  --main-color: #00AAEB;
  --second-color: #f19dac;
  --second-color-text: #f19dac;

  --third-color: #d7b758;
  --fourth-color: #99ad8d;
  --fifth-color: #EBEA0C;
}

.mr-3{
  margin-right:3px;
}

.mr-8{
  margin-right:8px;
}

.maincolor{
  background-color: var(--main-color);
  /* width: 40%; */
  /* width: 100%; */
}

.secondcolor{
  background-color: var(--second-color);
  /* width: 100%; */
}

.thirdcolor{
  background-color: var(--third-color);
  /* width: 50%; */
}

body {
  font-family: "MyYuGothicM", MyYuGothicM, YuGothic, "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", -apple-system, BlinkMacSystemFont, Meiryo, sans-serif;
  /* font-family: "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif; */
}

.dfont {
  font-family: "Quicksand", "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

.widget{
  /* background-color:#02bb80 !important; */
  
  border-radius: 0px;
  padding:3px;
  /* padding:var(--main-padding); */
  position:relative;       
  /* -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; */
  /* -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; */
  box-shadow:0 8px 8px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.1) inset;
  position: relative;

}


.widget:before
,.widget:after{
  content:"";
  position:absolute; 
  z-index:-1;
  -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
  -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
  box-shadow:0 0 20px rgba(0,0,0,0.8);
  /* top:50%; */
  bottom:0;
  left:10px;
  right:10px;
  -moz-border-radius:100px / 10px;
  border-radius:100px / 10px;

}
.sidebar{
  padding: 0;
  background-color:inherit !important;
}

.sidebar h3,.sidebar h2{
  font-size:1.1em;
  /* margin:10px; */
  padding:12px;
  padding-left:10px;
  margin:4px;
  line-height: 1em;
  /* background-color:var( --second-color); */
  /* color:var(--second-color-text); */
  border-bottom: solid 2px var( --main-color);
}

.sidebar ul li{
  padding: 10px;
}
/*
 .sidebar h3:before{

  padding:var(--main-padding-10);

  border-bottom: solid var( --second-color);
} 
*/

/* .sidebar h2{
  font-size:1.1em;

  border-bottom: solid var( --second-color);

} */

/* header */
.logo{
	text-align:left;
    /* width:185px;
    height:20px;
    float:left; */
}

.site-header__inner {
  display: table;
  width: 1164px;
  margin: 0 auto;
}


.site-header__tit{
  display: table-cell;
  width: 382px;
  height: 50px;
  padding:20px;
  /* padding: 20px 0 10px; */
  font-size: 14px;
  line-height: 1;
  vertical-align: middle;
  }

  .site-header__bnr {
    display: table-cell;
    padding: 20px;
    /* padding: 18px 0 22px 10px; */
    font-size: 14px;
    line-height: 1;
    vertical-align: bottom;
}

  .header-search {
    display: table-cell;
    padding: 20px 0 10px;
    /* font-size: 0; */
    line-height: 0;
    text-align: right;
    vertical-align: middle;
}


.header-sns {
  display: table-cell;
  padding: 20px;
  /* font-size: 0; */
  line-height: 0;
  text-align: right;
  vertical-align: middle;
}

/* menu */
.navi-in .current-menu-item a {
  border-bottom: 3px solid #42a9e4;
 }
 
 .navi-in > ul li {
     width: 150px;
 }
 

 /* menu */

/* headerここまで */


/* parts */
.cat-label{
  background-color: var(--second-color);
  color: #fff;
}

/* /parts */



/* index */
.topsubtitlespan{
  font-size: 1.3rem;
}

/* /index */
/* sango */

#header-container{
	margin-bottom:3px;    
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}


.footer-bottom-logo img{
      width:185px;
    height:20px;
}

.post, .sidebar .widget {
    border: none !important;
}
#sidebar1 h4 {
	font-size: 1em;
	border-bottom: 2px solid #000;
}
#archive_header {
    padding: 10px 15px;
}
.archive-header {
	box-shadow:none !important;
}

article.cardtype__article,.post-thumbnail img, .entry-content figure img {
    box-shadow: 0px 2px 38px -7px #00000029;
    border-radius: 8px;
}

.cardtype__img img {
	border-radius: 8px 8px 0 0;
}

#breadcrumb ul a {
    color: #333 !important;
    font-weight: bold;
    font-size: 12px;
}



/************************************
** リスト用
************************************/

.list-box-3{
  background: #fef9ed; /* 背景色 */
  border-radius: 4px;
  max-width: 600px; /* 横幅 */
  padding: 2em;
  margin:0 auto;
}

.utl-3{
  list-style: none;
  padding:0;
  margin:0;
}
.utl-3 li { 
  position: relative;
  margin:0.5em 0 !important;
  padding-left: 25px;
}
.utl-3 li:before {
  font-family: FontAwesome;
  content: "\f058"; /*アイコン*/
  color:  #ffa952; /* 色 */
  position: absolute;
  left:0;
}

#header-image {
 background: #5d5d5d;
 background-blend-mode:difference;
 background-size: cover;
}

.header-image__text {
 padding: 4% 20px 5%;
}
/************************************
**見出しのスタイル変更
************************************/
.entry-content h2 {
font-size: 1.4em;
 padding: 0.5em;
 border-top: solid #000 4px;
 border-bottom: solid #000 4px;

}

.entry-content h3 {
 padding: 0.5em;/*文字周りの余白*/
 color: #494949;/*文字色*/
 background: #F7F7F7;/*背景色*/
 border-left: solid 5px #00aaeb;/*左線（実線 太さ 色）*/
}

.entry-content h4 {
 position: relative;
 padding-left: 35px;
}
.entry-content h4:before {
 position: absolute;
 font-family: "Font Awesome 5 Free";
 content: "\f0eb";
 background: #F19DAC;
 color: white;
 font-weight: normal;
 font-size: 15px;
 border-radius: 50%;
 left: 0;
 width: 25px;
 height: 25px;
 line-height: 25px;
 text-align: center;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}
.entry-content h4:after {
 /*吹き出しのちょこんと出た部分*/
 content: '';
 display: block;
 position: absolute;
 left: 20px;
 height: 0;
 width: 0;
 border-top: 7px solid transparent;
 border-bottom: 7px solid transparent;
 border-left: 12px solid #F19DAC;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}

/************************************
**追加パーツ
************************************/

p.mainv-bottom__kanren {
 font-weight: bold;
 padding: 10px 20px;
 background: #f9f9f9;
 border-radius: 100px;
}
p.mainv-bottom__kanren span {
 border-radius: 100px;
 padding: 5px 15px
}
p.mainv-bottom__kanren span a {
 color: #fff;
}

/************************************
**カテゴリ記事
************************************/

.main-bdr, #inner-content .main-bdr {
 border-radius: 10px;
 border: none;
}

@media only screen and (min-width: 1030px) {
#archive_header {
   margin: 0 0 40px;
}
}

@media only screen and (min-width: 481px) {
#archive_header {
   margin: 0 0 40px;
}
}

@media only screen and (min-width: 1030px) {
.cardtype__article {
  margin: 0 1.8% 25px;
}
}

/************************************
**Rinkerカスタマイズ
************************************/
div.yyi-rinker-contents div.yyi-rinker-box {
 flex-wrap: wrap;
}

.aff-banner {
 margin: 20px auto;
}

.aff-banner img{
 display: block;
 margin: 0 auto;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 {
 background: #02bb80;
}

.abtn-mc1 a {
 position: relative;
 padding: 5px 0;
 text-align: center;
   display: inline-block;
   width: 100%;
   margin: 0;
   border-radius: 5px;
   background: #02bb80;
   color: #fff;
   font-size: 1.1em;
   font-weight: 500;
   line-height: 44px;
   text-decoration: none;
   box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
}
.abtn-mc1 a:after {
 position:absolute;
 right: 20px;
   content: "\f0da";
   font-family: "font awesome 5 free";
   font-weight: 900;
   margin-left: 15px;
}
.abtn-mc1 a:hover{
   text-decoration: none;
   box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
   -webkit-tap-highlight-color: transparent;
}
.abtn-mc1 img{
 display: block;
}
p.abtn-mc1-top-text {
 text-align: center;
   font-weight: bold;
   margin-bottom: 3px;
}
p.abtn-mc1-under-text {
 text-align: center;
   font-size: .8em;
   margin-top: 3px;
}

/*--------------------------------------
 Rinker
--------------------------------------*/
div.yyi-rinker-contents {
   padding: 20px;
   border: solid 1px #f2f2f2;
   box-shadow: none;
}
div.yyi-rinker-img-m div.yyi-rinker-image {
   width: 200px;
   min-width: 200px;
}
div.yyi-rinker-contents img.yyi-rinker-main-img {
 width: auto;
 height: 150px;
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
   width: calc(100% - 225px);
}
div.yyi-rinker-contents div.yyi-rinker-info {
   margin-left: 12px;
   align-self: center;
   padding-left: 0;
}
.yyi-rinker-title {
   margin-bottom: 10px;
   font-size: 1em;
}
div.yyi-rinker-contents div.yyi-rinker-title a {
   color: #0066c0;
   font-weight: 500;
}
div.yyi-rinker-contents div.yyi-rinker-title a:hover {
   text-decoration: underline;
   color: #c45500;
}
div.yyi-rinker-contents div.yyi-rinker-detail {
   font-size: 1em;
}
div.yyi-rinker-detail .brand {
   font-size: 75%;
}
div.yyi-rinker-contents div.yyi-rinker-detail {
   color: inherit;
   padding-left: 0;
   opacity: .9;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
   margin: 14px 0 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
   position: relative;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
   margin: 0px 12px 0px 0px;
   -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.2), 0 2px 3px -2px rgba(0,0,0,0.15);
   box-shadow: 0 2px 3px rgba(0,0,0,0.2), 0 2px 3px -2px rgba(0,0,0,0.15);
   transition: 0.3s ease-in-out;
   height: 44px;
   padding: 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:last-child {
   margin-right: 0px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
   padding: 0 20px 0 12px;
   height: 44px;
   line-height: 44px;
   font-weight: 500;
}
.fa5 div.yyi-rinker-contents ul.yyi-rinker-links li:before{
   display: none;
}
.yyi-rinker-links li:after {
   position: absolute;
   right: 8px;
   z-index: 1;
   top: 0;
   line-height: 44px;
   color: white;
   font-weight: 900;
   font-family: "font awesome 5 free";
   content: "\f0da";
}
/*****  hover  *****/
.yyi-rinker-image a:hover {
   opacity: .7;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
   opacity: 1;
   box-shadow: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
   -webkit-box-shadow: 0 13px 20px -3px rgba(0,0,0,0.24);
   box-shadow: 0 13px 20px -3px rgba(0,0,0,0.24);
}


/************************************
** スマホで見やすい比較表
************************************/
.comparison-table-wrap{
  width:100%;
  max-width:600px;
  margin: 0 auto 2em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.comparison-table-title{
  background : linear-gradient(90deg, rgb(235, 99, 8) 0%, rgb(234, 185, 138) 100%);
  text-align: center;
   color: #fff;
   font-weight: bold;
   padding: 1em;
   letter-spacing: 1px;
  margin: 0;
  font-size:14px;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
}
.comparison-table{
  background:#f8f9fb;
  margin:0;
  padding:0.3em 1em;
}
.comparison-table table{
  border-collapse: separate;
  border-spacing:5px 10px;
  border:none;
  margin-bottom: 0;
}
.comparison-table table th,.comparison-table table td {
  width:50%;
}
.comparison-table table thead th{
  background : #fdefe6;
  border:none;
  color:#eb6100;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  padding: 0.8em 0.5em;
  line-height: 1.5;
  border-radius: 3px;
  font-size: 14px;
}
.comparison-table table tbody th{
  background : linear-gradient(90deg, rgb(235, 99, 8) 0%, rgb(234, 185, 138) 100%);
  text-align: center;
  color:#fff;
  border:none;
  border-radius:30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  padding: 0.4em 1em;
  font-size: 14px;
  line-height: 1.3;
}
.comparison-table table tbody td{
  background:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  border-radius:3px;
  border:none;
  padding:1.2em;
  color: #555;
  line-height: 1.8;
  text-align:justify;
  vertical-align:top;
}
.comparison-table table tbody td p{
  margin:0;
  padding:0;
  margin-bottom:1em;
  font-size: 14px;
}
.comparison-table table tbody td .td-h{
  text-align:center;
  font-weight:bold;
  color:#eb6100;
  font-size: 16px;
  margin-bottom:7px;
}


.wp-block-button__link {
	box-shadow: 0 5px 6px rgba(0,0,0,.2);
}

.wp-block-columns > div{
	margin-top:10px;
}

.cat-link{
  background-color:var(--second-color);
}
/************************************
** スマホで見やすい比較表(画像比較)
************************************/
/* 比較名背景 */
.comparison-table-img .comparison-table table thead th{
  padding:0;
  margin:0;
}
.comparison-table-img .comparison-table table thead th img{
  display:block;
}
.comparison-table table thead th p{
  margin:0;
}
/* 画像タイトル */
.comparison-table-img .comparison-table table thead th .th-h{
  padding-top:10px;
  margin-bottom:10px;
  font-size:14px;
}


a {
  color: #4f96f6
}

.main-c, .has-sango-main-color {
  color: #eb6100
}

.main-bc, .has-sango-main-background-color {
  background-color: #eb6100
}

.main-bdr, #inner-content .main-bdr {
  border-color: #eb6100
}

.pastel-c, .has-sango-pastel-color {
  color: #fdefe6
}

.pastel-bc, .has-sango-pastel-background-color, #inner-content .pastel-bc {
  background-color: #fdefe6
}

.accent-c, .has-sango-accent-color {
  color: #8ec946
}

.accent-bc, .has-sango-accent-background-color {
  background-color: #8ec946
}

.header, #footer-menu, .drawer__title {
  background-color: #ffffff
}

#logo a {
  color: #eb6100
}

.desktop-nav li a, .mobile-nav li a, #footer-menu a, #drawer__open, .header-search__open, .copyright, .drawer__title {
  color: #000000
}

.drawer__title .close span, .drawer__title .close span:before {
  background: #000000
}

.desktop-nav li:after {
  background: #000000
}

.mobile-nav .current-menu-item {
  border-bottom-color: #000000
}

.widgettitle {
  color: #000000;
  background-color: #ffffff
}

/* .footer {
  background-color: #fdefe6
} */

.footer, .footer a, .footer .widget ul li a {
  color: #eb6100
}

#toc_container .toc_title, .entry-content .ez-toc-title-container, #footer_menu .raised, .pagination a, .pagination span, #reply-title:before, .entry-content blockquote:before, .main-c-before li:before, .main-c-b:before {
  color: var(--second-color-text);
}


blockquote::before, blockquote::after{
  color: var(--second-color-text);
}


#searchsubmit, #toc_container .toc_title:before, .ez-toc-title-container:before, .cat-name, .pre_tag>span, .pagination .current, .post-page-numbers.current, #submit, .withtag_list>span, .main-bc-before li:before {
  background-color: #eb6100
}

#toc_container, #ez-toc-container, h3, .li-mainbdr ul, .li-mainbdr ol {
  border-color: #eb6100
}

.search-title i, .acc-bc-before li:before {
  background: #8ec946
}

.li-accentbdr ul, .li-accentbdr ol {
  border-color: #8ec946
}

.pagination a:hover, .li-pastelbc ul, .li-pastelbc ol {
  background: #fdefe6
}

body {
  font-size: 100%
}

@media only screen and (min-width:481px) {
  body {
    font-size: 100%
  }
}

@media only screen and (min-width:1030px) {
  body {
    font-size: 100%
  }
}

.totop {
  background: #5ba9f7
}

.header-info a {
  color: #FFF;
  background: linear-gradient(95deg, #eb6100, #eaba8c)
}

.fixed-menu ul {
  background: #FFF
}

.fixed-menu a {
  color: #a2a7ab
}

.fixed-menu .current-menu-item a, .fixed-menu ul li a.active {
  color: #6bb6ff
}

.post-tab {
  background: #FFF
}

.post-tab>div {
  color: #a7a7a7
}

.post-tab>div.tab-active {
  background: linear-gradient(45deg, #bdb9ff, #67b8ff)
}



.body_bc {
  background-color: #f2f2f2;
}

/* 吹き出し右 */
.right .sc {
    background:#78ce56; /* ふきだしの中の色 */
    border: solid 2px #78ce56; /* ふきだしの線の色 */
    color: #fff; /* 文字の色 */
}
.right .sc:before,
.right .sc:after {
    border-left-color:#78ce56;
}
/* ふきだし左 */
.sc {
    background: #eee; /* ふきだしの中の色 */
    border: solid 2px #eee; /* ふきだしの線の色 */
    color: #000; /* 文字の色 */
}
.sc:before,
.sc:after {
    border-right: 12px solid #eee; /* ふきだしの線の色 */
}
/* wppのランキングカラーをアクセントカラーに */
.my-widget.show_num li:nth-child(-n+3):before {
    background: #8ec946;
}
/* topオススメの下線をアクセントカラーに */
div.osusume-b {
    border-bottom: solid 3px #8ec946;
}
div.shinchaku-b {
    border-bottom: solid 3px #eb6100;
}


/* header */
.search-box {
width:100%;
margin:0 1.5px 0.5em; 
position: relative; display: flex;
}

.search-submit {
background: #fff; /*ボタン部分の背景色*/
color: #aeab92;/*アイコンの色*/
position: absolute; margin:6px 6px 3px; 
cursor: pointer; line-height:0; /*検索アイコンの高さや位置*/ 
border:none;padding: 0;}

.search-box input::placeholder {
font-size: 14px; color: #aeab92;/*プレースホルダーのフォント大きさと色*/
}


.search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select {
  padding: 3px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
}


/*ロゴ表示調整*/
.site-logo-image.header-site-logo-image{
  padding-top:0px;
  padding-left:10px
  text-align:left;
}

/*検索窓*/
/* .add-header-contents{position:relative;bottom:36px;left:285px;width:auto;
float:left;
} */




/* sabgo ここまで */
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/

  .comparison-table{
    padding:7px;
  }
  .comparison-table table{
    border-spacing:3px 10px;
  }
  .comparison-table table thead th{
    position: -webkit-sticky;
    position: sticky;
    top:0px;
    z-index:100;
  }

  /*タブレット・スマホの時は非表示*/
  .add-header-contents {display: none; }

  .no-sticky .comparison-table table thead th{
    position:static;
  }

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

  div.yyi-rinker-contents div.yyi-rinker-box {
    flex-direction: column;
}

div.yyi-rinker-contents div.yyi-rinker-box {
  flex-direction: column;
}
div.yyi-rinker-img-m div.yyi-rinker-image, div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
  width: 100%;
}
div.yyi-rinker-contents div.yyi-rinker-info {
  margin-left: 0px;
  text-align: center;
  margin-top: 12px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
  margin: 0px 0px 12px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:last-child {
  margin-bottom: 0px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
  padding: 0;
}
.yyi-rinker-links li:after {
  right: 12px;
}

}



/* 拡張色 */
.has-sred-1-color{
  color: #00A8EB ;
}
.has-sred-2-color{
  color: #f19dac ;
}
.has-sred-3-color{
  color: #d7b758 ;
}
.has-sred-4-color{
  color: #99ad8d ;
}

.body .has-sred-1-background-color{
  /* text-align: center; */
  /* border-radius: 1.9em !important; */
  background: #00A8EB;
  font-weight: normal;
  text-align: center;
  display: grid;
  place-items: center;
  max-width: 450px;
  height: 60px;
  border-radius: 20px;
}

.body .has-sred-2-background-color{
  /* text-align: center; */
  /* border-radius: 1.9em !important; */
  background: #f19dac;
  font-weight: normal;
  text-align: center;
  display: grid;
  place-items: center;
  max-width: 450px;
  height: 60px;
  border-radius: 20px;
}

.body .has-sred-3-background-color{
  /* text-align: center; */
  /* border-radius: 1.9em !important; */
  background: #d7b758;
  font-weight: normal;
  text-align: center;
  display: grid;
  place-items: center;
  max-width: 450px;
  height: 60px;
  border-radius: 20px;
}

.body .has-sred-4-background-color{
  /* text-align: center; */
  /* border-radius: 1.9em !important; */
  background: #99ad8d;
  font-weight: normal;
  text-align: center;
  display: grid;
  place-items: center;
  max-width: 450px;
  height: 60px;
  border-radius: 20px;
}


.btn.has-sred-1-background-color{
  background: #00A8EB !important;
  font-weight: normal;
  text-align: center;
  display: grid;
  place-items: center;
  max-width: 450px;
  height: 60px;
  border-radius: 20px;
}

.btn.has-sred-2-background-color{
  background: #f19dac !important;
  font-weight: normal;
  text-align: center;
  display: grid;
  place-items: center;
  max-width: 450px;
  height: 60px;
  border-radius: 20px;
}

.btn.has-sred-3-background-color{
  background: #d7b758 !important;
  font-weight: normal;
  text-align: center;
  display: grid;
  place-items: center;
  max-width: 450px;
  height: 60px;
  border-radius: 20px;
}

.btn.has-sred-4-background-color{
  background: #99ad8d !important;
  font-weight: normal;
  text-align: center;
  display: grid;
  place-items: center;
  max-width: 450px;
  height: 60px;
  border-radius: 20px;
}