@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal; }

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal; }

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal; }

_:lang(x)::-internal-media-controls-overlay-cast-button, img {
  image-rendering: -webkit-optimize-contrast; }

/*--------------------------------------------------------------
/pub/template/
--------------------------------------------------------------*/
/* *****************************************
/*+  common  +******************************
/***************************************** */
body {
  margin: 0;
  padding: 0; }
  @media (min-width: 513px) {
    body {
      background: #FFF url("../img/sp/pc_bg.jpg") no-repeat center;
      background-size: cover;
      background-attachment: fixed; } }

#template {
  max-width: 512px;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
  font-family: "Noto Sans JP", -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","游ゴシック Medium",YuGothic,YuGothicM,メイリオ,Meiryo,sans-serif;
  background-color: #FFF;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: .16em;
  line-height: 1.65;
  font-size: 3.75vw;
  color: #000000;
  font-weight: 400; }
  @media (min-width: 513px) {
    #template {
      box-shadow: 0px 0px 54px 0px rgba(0, 0, 0, 0.3); } }
  @media (min-width: 513px) {
    #template {
      font-size: 19.2px; } }
  #template a {
    color: #563285;
    text-decoration: underline; }
    #template a:link, #template a:visited {
      color: #563285;
      text-decoration: underline; }
    #template a:hover, #template a:active {
      color: #563285;
      text-decoration: none; }
  @media (min-width: 513px) {
    #template a[href*="tel:"] {
      pointer-events: none;
      cursor: default;
      text-decoration: none; }
    #template a {
      transition: .3s all; }
      #template a:hover {
        opacity: .7; } }
  #template * {
    margin: 0;
    padding: 0;
    line-height: 1.65; }
  #template img, #template input[type="image"] {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: bottom; }
  #template video {
    width: 100%;
    height: auto;
    display: block; }
  #template ol, #template ul {
    list-style: none; }
  #template sup {
    font-size: 60%;
    vertical-align: top;
    position: relative;
    top: -0.1em;
    letter-spacing: .05em; }
  #template .clearfix:after {
    content: "";
    display: block;
    clear: both; }
  #template *, #template *:before, #template *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  #template .fade {
    transition: 0.5s; }
    #template .fade:hover {
      opacity: .75; }
  #template .text-purple {
    color: #563285; }
  #template .bold {
    font-weight: bold; }
  #template .notes {
    margin: 0 6.25%; }
  #template .note {
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    letter-spacing: .16em;
    line-height: 1.65;
    font-size: 2.8125vw;
    text-align: left;
    letter-spacing: 0.05em;
    color: #404040; }
    @media (min-width: 513px) {
      #template .note {
        font-size: 14.4px; } }
    #template .note li {
      letter-spacing: normal;
      text-indent: -1em;
      padding-left: 1em; }
  #template dl.note {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.4;
    text-align: left; }
    #template dl.note dt {
      width: 1em; }
    #template dl.note02 dt {
      width: 2em; }
    #template dl.note dd {
      width: calc(100% - 1em); }
    #template dl.note02 dd {
      width: calc(100% - 3em); }
    #template dl.note.numbering dt {
      width: 2em; }
    #template dl.note.numbering dd {
      width: calc(100% - 2em); }
  #template .tr {
    text-align: right; }
  #template .tl {
    text-align: left; }
  #template .tc {
    text-align: center; }
  #template .under-line {
    background: linear-gradient(0deg, #f9ba00 15%, white 15%); }
  #template #footer {
    padding: 1em 0; }
  #template .fadeIn {
    opacity: 0;
    transition: .3s; }
  #template .fadeIn.lazyloaded {
    opacity: 1; }

.effected, .effected::before, .effected::after {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1, 1) !important; }

/* *****************************************
/*+  content  +********************************
/***************************************** */
/*+ common object + ------------------------------ */
#template .todokede {
  background-color: #FFF;
  border: solid 2px #563285;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: .16em;
  line-height: 1.65;
  font-size: 2.8125vw;
  text-align: left;
  margin: 1.5em;
  padding: 1.5em; }
  @media (min-width: 513px) {
    #template .todokede {
      font-size: 14.4px; } }
  #template .todokede__ttl {
    color: #563285;
    font-weight: 700;
    margin-bottom: .5em; }
#template .green_btn, #template a.green_btn {
  position: relative;
  color: #FFF;
  background-color: #563285;
  border-radius: 999px;
  display: inline-block;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: .16em;
  line-height: 1.65;
  font-size: 4.0625vw;
  text-decoration: none;
  font-weight: bold;
  padding: .6em 3em; }
  @media (min-width: 513px) {
    #template .green_btn, #template a.green_btn {
      font-size: 20.8px; } }
  #template .green_btn.icon-plus::before, #template .green_btn.icon-plus::after, #template a.green_btn.icon-plus::before, #template a.green_btn.icon-plus::after {
    content: "";
    display: block;
    position: absolute;
    width: .85em;
    height: 2px;
    background-color: #FFF;
    right: 1em;
    top: calc(50% - 1px); }
  #template .green_btn.icon-plus::after, #template a.green_btn.icon-plus::after {
    transform: rotate(90deg);
    transition: all .3s; }
  #template .green_btn.icon-plus.active::after, #template a.green_btn.icon-plus.active::after {
    transform: rotate(180deg);
    opacity: 0; }
  #template .green_btn.icon-arrow::after, #template a.green_btn.icon-arrow::after {
    content: "";
    display: block;
    position: absolute;
    width: .6em;
    height: .6em;
    border-bottom: #FFF solid 2px;
    border-right: #FFF solid 2px;
    right: 1em;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg); }

/*+ block + ------------------------------ */
#content > section, #content .area {
  position: relative;
  z-index: 0; }
#content .kv {
  position: relative; }
#content .cv01 {
  position: relative; }
  #content .cv01 .cv_btn input {
    position: absolute;
    top: 49.876%;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    display: block;
    width: calc(568 / 640 * 100%);
    height: 0;
    padding-top: calc(132 / 640 * 100%);
    border: none;
    text-indent: -9999px;
    background: url(../img/sp/cv_btn.png) no-repeat 0 0/100% auto;
    transition: all .3s; }
    #content .cv01 .cv_btn input:hover {
      opacity: .9;
      transform: translateY(5px) translateX(-50%); }
  #content .cv01 .cv_btn_member input {
    position: absolute;
    top: 58.8312784%;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    display: block;
    width: calc(460 / 640 * 100%);
    height: 0;
    padding: calc(80 / 640 * 100%) 0 0;
    border: #404040 solid 1px;
    border-radius: 999px;
    text-indent: -9999px;
    background: url("../img/sp/cv_btn_member.png") no-repeat 0 0/100% auto;
    transition: all .3s; }
    #content .cv01 .cv_btn_member input:hover {
      opacity: .7;
      transform: translateY(5px) translateX(-50%); }

#content .cv02 .cv02__container {
  position: relative; }
  #content .cv02 .cv_btn input {
    position: absolute;
    top: 51.08%;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    display: block;
    width: calc(568 / 640 * 100%);
    height: 0;
    padding-top: calc(132 / 640 * 100%);
    border: none;
    text-indent: -9999px;
    background: url(../img/sp/cv_btn.png) no-repeat 0 0/100% auto;
    transition: all .3s; }
    #content .cv02 .cv_btn input:hover {
      opacity: .9;
      transform: translateY(5px)  translateX(-50%); }
  #content .cv02 .cv_btn_member input {
    position: absolute;
    top: 65.24846%;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    display: block;
    width: calc(460 / 640 * 100%);
    height: 0;
    padding: calc(80 / 640 * 100%) 0 0;
    border: #404040 solid 1px;
    border-radius: 999px;
    text-indent: -9999px;
    background: url("../img/sp/cv_btn_member.png") no-repeat 0 0/100% auto;
    transition: all .3s; }
    #content .cv02 .cv_btn_member input:hover {
      opacity: .7;
      transform: translateY(5px)  translateX(-50%); }

#content .cv {
  background-color: #f8f6f2;
  padding: 0 0 calc( 30 / 640 * 100%); }
  #content .cv__block {
    overflow: hidden;
    margin: 0 calc( 30 / 640 * 100%) calc( 70 / 640 * 100%);
    border-radius: clamp(6px, 1.875vw, 9.6px);
    outline: clamp(2px, 0.78125vw, 4px) solid #563285;
    outline-offset: clamp(-2px, -0.78125vw, -4px);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.12); }
  #content .cv__block.cv__trial {
    border-radius: 0 0 clamp(6px, 1.875vw, 9.6px) clamp(6px, 1.875vw, 9.6px);
    border: clamp(2px, 0.78125vw, 4px) solid #563285;
    background: #fff;
    border-top: none;
    outline: none; }
  #content .cv__head img {
    vertical-align: top; }
  #content .cv .cv_btn input {
    position: relative;
    cursor: pointer;
    display: block;
    width: calc( 518 / 580 * 100%);
    height: 0;
    margin: 0 auto calc( 20 / 580 * 100%);
    padding-top: calc( 132 / 580 * 100%);
    border: none;
    text-indent: -9999px;
    background: url(../img/sp/cv_btn.png) no-repeat 0 0/100% auto;
    transition: all .3s; }
    #content .cv .cv_btn input:hover {
      opacity: .9;
      transform: translateY(5px); }
  #content .cv .cv_btn_member input {
    position: relative;
    cursor: pointer;
    display: block;
    width: calc( 430 / 580 * 100% + 1px);
    height: 0;
    margin: 0 auto calc( 40 / 580 * 100%);
    padding: calc( 80 / 580 * 100%) 0 0;
    border: #404040 solid 1px;
    border-radius: 999px;
    text-indent: -9999px;
    background: url("../img/sp/cv_btn_member.png") no-repeat 0 0/100% auto;
    transition: all .3s; }
    #content .cv .cv_btn_member input:hover {
      opacity: .7;
      transform: translateY(5px); }
  #content .cv .link_seibun, #content .cv .link_guide {
    margin: calc( 20 / 580 * 100%) calc( 40 / 580 * 100%);
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    letter-spacing: .16em;
    line-height: 1.65;
    font-size: 3.75vw;
    letter-spacing: .05em; }
    @media (min-width: 513px) {
      #content .cv .link_seibun, #content .cv .link_guide {
        font-size: 19.2px; } }
    #content .cv .link_seibun a, #content .cv .link_guide a {
      color: #563285; }
  #content .cv .note {
    margin: 0 calc( 25 / 580 * 100%) 1em;
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    line-height: 1.65;
    font-size: 2.8125vw;
    font-weight: 500;
    letter-spacing: normal; }
  #content .cv .note02 {
    font-weight: normal; }
    @media (min-width: 513px) {
      #content .cv .note {
        font-size: 14.4px; } }
    #content .cv .note.red {
      color: #e80000; }
    #content .cv .note.numbering {
      margin-bottom: 0; }
  #content .cv__tel-contents {
    margin: calc( 60 / 580 * 100%) 0 0; }
  #content .cv__tel-btn {
    margin: 0 calc( 30 / 580 * 100%) calc( 20 / 580 * 100%);
    transition: all .3s; }
    #content .cv__tel-btn:hover {
      opacity: .9;
      transform: translateY(5px); }
  #content .cv__normal {
    outline-color: #34a559;
    padding-bottom: .5em; }
    #content .cv__normal-list {
      margin: 0 calc( 20 / 580 * 100%);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around; }
      #content .cv__normal-list p {
        width: calc( 256 / 540 * 100%);
        margin: 0 0 .75em;
        transition: all .3s; }
        #content .cv__normal-list p:hover {
          opacity: .9;
          transform: translateY(5px); }
  #content .cv__shop {
    outline-color: #4cacd4; }
    #content .cv__shop-btn {
      width: calc( 526 / 580 * 100%);
      margin: 0 auto;
      transition: all .3s; }
      #content .cv__shop-btn:hover {
        opacity: .9;
        transform: translateY(5px); }
    #content .cv__shop-telbtn {
      margin-top: 1.5em; }
#content .nayami {
  position: relative;
  z-index: 2; }
#content .component {
  background: url("../img/sp/component_bg.jpg") no-repeat center top/100% auto;
  padding-bottom: calc( 80 / 640 * 100%);
  margin-top: calc( -150 / 640 * 100%); }
  #content .component__txt {
    margin-top: calc(-12 / 640 * 100%); }
  #content .component__note {
    margin: 0 calc( 30 / 640 * 100%) 2em;
    letter-spacing: .04em; }
  #content .component__source {
    margin: 0 calc( 30 / 640 * 100%);
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    letter-spacing: .16em;
    line-height: 1.65;
    font-size: 2.5vw;
    letter-spacing: .04em; }
    @media (min-width: 513px) {
      #content .component__source {
        font-size: 12.8px; } }
#content .function {
  background: #eae4de;
  padding-bottom: calc( 120 / 640 * 100%); }
  #content .function__ttl {
    width: calc( 557 / 640 * 100%);
    margin: 0 auto;
    transform: translateY(-1.4em); }
  #content .function__block {
    background: #FFF;
    box-shadow: 0px 5px 10px 0px rgba(124, 124, 124, 0.25);
    border-radius: clamp(8px, 2.5vw, 12.8px);
    margin: calc( 60 / 640 * 100%) calc( 30 / 640 * 100%) 0;
    padding: 0 0 calc( 30 / 640 * 100%); }
    #content .function__block:first-of-type {
      margin-top: calc( 30 / 640 * 100%); }
  #content .function__graph-note {
    margin: 0 calc( 30 / 580 * 100%);
    padding: 1.25em;
    border: #666 solid 1px;
    text-align: left;
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    letter-spacing: .16em;
    line-height: 1.65;
    font-size: 2.8125vw;
    letter-spacing: .04em; }
    @media (min-width: 513px) {
      #content .function__graph-note {
        font-size: 14.4px; } }
  #content .function__graph-result {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em; }
    #content .function__graph-result dt {
      width: 5em; }
    #content .function__graph-result dd {
      width: calc(100% - 5em);
      margin-bottom: .25em; }
  #content .function__graph-figure {
    margin-top: calc( 30 / 580 * 100%); }
  #content .function .slider {
    margin: 0; }
  #content .function .slick-dots {
    position: absolute;
    bottom: -3em;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center; }
    #content .function .slick-dots li {
      position: relative;
      text-indent: -999em;
      margin: 0 .5em; }
      #content .function .slick-dots li::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: solid 4px #a0a0a0;
        border-radius: 50%; }
      #content .function .slick-dots li.slick-active::after {
        border: solid 4px #4d288f; }
  #content .function .slick-arrow {
    line-height: 0;
    position: absolute;
    top: 23em;
    display: block;
    width: calc( 62 / 580 * 100%);
    height: 0;
    padding: calc( 62 / 580 * 100%) 0 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index: 99; }
  #content .function .slick-prev {
    left: -4%;
    background: url("../img/sp/function_carousel_prev.png") no-repeat center center/100% auto; }
  #content .function .slick-next {
    right: -4%;
    background: url("../img/sp/function_carousel_next.png") no-repeat center center/100% auto; }
#content .kodawari__01 {
  position: relative; }
  #content .kodawari__01 a {
  position: absolute;
  bottom: 13.693%;
  left: 50%;
  transform: translateX(-50%);
  width: 71.875%;
  font-size: min(2.5vw, 12.8px);
  line-height: 1.4375;
  color: #563285;
  text-decoration: underline;
  text-align: left; }
#content .voice {
  background: #f2eeef;
  padding-bottom: calc( 80 / 640 * 100%); }
  #content .voice .slider {
    margin-bottom: 3em; }
  #content .voice .slick-slide {
    padding: 0 2.75em; }
  #content .voice .slick-dots {
    position: absolute;
    bottom: -2em;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center; }
    #content .voice .slick-dots li {
      position: relative;
      text-indent: -999em;
      margin: 0 .5em; }
      #content .voice .slick-dots li::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: solid 4px #a0a0a0;
        border-radius: 50%; }
      #content .voice .slick-dots li.slick-active::after {
        border: solid 4px #4d288f; }
  #content .voice .slick-arrow {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: calc( 49 / 640 * 100%);
    height: 0;
    padding: calc( 49 / 640 * 100%) 0 0;
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index: 99; }
  #content .voice .slick-prev {
    left: 1.25%;
    background: url("../img/sp/voice_carousel_prev.png") no-repeat center center/100% auto; }
  #content .voice .slick-next {
    right: 1.25%;
    background: url("../img/sp/voice_carousel_next.png") no-repeat center center/100% auto; }
  #content .voice__note {
    margin: 0 calc( 30 / 640 * 100%) 2em;
    letter-spacing: .04em; }
#content .commitment {
  background-color: #f0f0f0;
  padding-bottom: calc( 100 / 640 * 100%); }
  #content .commitment .inner {
    position: relative; }
  #content .commitment__ttl {
    margin-bottom: 2.5em; }
  #content .commitment__block {
    text-align: left;
    margin: 0 calc( 60 / 640 * 100%) calc( 40 / 640 * 100%);
    padding: 0 0 calc( 40 / 640 * 100%);
    border-bottom: #d6d8d7 solid 1px; }
    #content .commitment__block:last-of-type {
      margin-bottom: 0; }
  #content .commitment__head {
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    letter-spacing: .16em;
    line-height: 1.65;
    font-size: 4.53125vw;
    letter-spacing: .075em;
    font-weight: bold;
    color: #563285;
    padding: 0 1em 0 0;
    position: relative;
    cursor: pointer;
    display: flex;
    align-content: center; }
    @media (min-width: 513px) {
      #content .commitment__head {
        font-size: 23.2px; } }
    #content .commitment__head .icon_num {
      align-self: center;
      -moz-font-feature-settings: "palt";
      -webkit-font-feature-settings: "palt";
      font-feature-settings: "palt";
      letter-spacing: .16em;
      line-height: 1.65;
      font-size: 7.8125vw;
      line-height: 1;
      letter-spacing: .02em;
      font-family: "Roboto", sans-serif;
      font-weight: 100;
      font-style: normal;
      padding-right: .3em;
      color: #000; }
      @media (min-width: 513px) {
        #content .commitment__head .icon_num {
          font-size: 40px; } }
    #content .commitment__head::before, #content .commitment__head::after {
      content: "";
      display: block;
      position: absolute;
      width: calc(1em - 12px);
      height: 1px;
      background-color: #FFF;
      right: 6px;
      top: 0;
      bottom: 0;
      margin: auto;
      z-index: 3; }
    #content .commitment__head::after {
      transform: rotate(90deg);
      transition: all .3s; }
    #content .commitment__head.active::after {
      transform: rotate(180deg); }
  #content .commitment__head-txt {
    align-self: center;
    margin: -.2em 0;
    line-height: 1.4; }
    #content .commitment__head-txt::after {
      content: "";
      display: block;
      position: absolute;
      width: 1em;
      height: 1em;
      background-color: #563285;
      border-radius: 50%;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      z-index: 2; }
  #content .commitment__content {
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    letter-spacing: .16em;
    line-height: 1.65;
    font-size: 3.90625vw; }
    @media (min-width: 513px) {
      #content .commitment__content {
        font-size: 20px; } }
  #content .commitment__content-inner {
    margin: 1em 0; }
    #content .commitment__content-inner > p, #content .commitment__content-inner > div {
      margin-bottom: 1em; }
      #content .commitment__content-inner > p:last-child, #content .commitment__content-inner > div:last-child {
        margin-bottom: 0; }
    #content .commitment__content-inner .point {
      color: #563285;
      -moz-font-feature-settings: "palt";
      -webkit-font-feature-settings: "palt";
      font-feature-settings: "palt";
      letter-spacing: .16em;
      line-height: 1.65;
      font-size: 3.4375vw; }
      @media (min-width: 513px) {
        #content .commitment__content-inner .point {
          font-size: 17.6px; } }
      #content .commitment__content-inner .point__list li {
        position: relative;
        margin-bottom: 0.5em;
        padding-left: .8em; }
        #content .commitment__content-inner .point__list li::before {
          content: "";
          position: absolute;
          display: block;
          width: 3px;
          height: 3px;
          background-color: #563285;
          left: 0;
          top: 0.7em;
          border-radius: 999px; }
  #content .commitment__linkbtn span {
    display: block;
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    letter-spacing: .16em;
    line-height: 1.65;
    font-size: 3.4375vw; }
    @media (min-width: 513px) {
      #content .commitment__linkbtn span {
        font-size: 17.6px; } }

#template .guide {
  margin: 0;
  padding: 2em 0 0;
  letter-spacing: normal; }
  #template .guide .guidance {
    width: 49.21875%;
    margin: 2em auto 6.25%; }
  #template .guide #tokushou, #template .guide .company-outline, #template .guide .policy {
    margin-bottom: 1em; }
  #template .guide .note {
    text-align: left;
    margin: 0 4.6875%; }
    #template .guide .note h3 {
      margin-top: 1em; }
    #template .guide .note p {
      margin-bottom: 1em; }
  #template .guide .returnTop {
    text-align: right;
    margin: 1.5em 3.125%; }
  #template .guide a {
    color: #563285; }

.floating {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  padding-bottom: 0.5% !important;
  transition: all .3s;
  opacity: 0;
  z-index: 100;
}
.floating.visible {
  animation: .5s ease-in forwards fadein;
}
@keyframes fadein {
  0% {
    bottom: 0;
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}
.floating.hidden {
  animation: .5s ease-in forwards fadeout;
}
@keyframes fadeout {
  0% {
    bottom: 0;
    opacity: 1;
  }
  99% {
    bottom: 0;
    opacity: 0;
  }
  100% {
    bottom: -100%;
    opacity: 0;
  }
}
.floating a {
  width: 98.125%;
  margin: 0 auto;
}
.floating .close {
  position: absolute;
  top: -18%;
  right: 2.1875%;
  width: 7.8125% !important;
  cursor: pointer;
}