@charset "UTF-8";

.inner-header{
  margin-bottom: 40px;
  text-align: center;
  padding: 0 20px;
}
.reservation-inner .inner-header{
  padding-left: 0;
  padding-right: 0;
}
.campaign-inner .inner-header{
  position: relative;
  top: -25px;
  margin-bottom: -25px;
}
.seat-inner .inner-header{
  text-align: center;
  padding: 0;
  position: relative;
  top: -25px;
  margin-bottom: -25px;
}
.title-contents-01{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
}
.title-contents-01 img{
  zoom:0.8;
}
.seat-inner .title-contents-01 img{
  zoom:0.7;
}
.title-contents-01 span{
  display: block;
  margin-top: 30px;
}
.title-contents-02{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
}
.title-contents-02 img{
  position: absolute;
  zoom:0.5;
  bottom:20px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-left: -14%;
}
.title-contents-02 span{
  position: relative;
  z-index: 1;
  margin-right: -14%;
}
.title-contents-03{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
}
.title-contents-03 img{
  zoom:0.7;
  margin-left: -14%;
}
.title-contents-03 span{
  display: block;
  margin-top: 5px;
}
.title-contents-04{
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
}
.title-contents-04 span{
  position:absolute;
  z-index: 2;
  text-align: center;
  margin: 0 auto;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  display:block;
  width: 100%;
}
.title-contents-04:before{
  content: "";
  width: 100%;
  height: 57px;
  transform: skewX(-10deg);
  background: none;
  border:solid 2px #1C1C1C;
  display: block;
  z-index: 1;
}
.inner-header p{
  margin-bottom: 0;
  text-align: left;
  font-size: 16px;
}
#back a{
  color: #f53c7f;
  text-decoration: underline;
}

@media(min-width:767px) {
    .inner-header{
      margin-bottom: 60px;
    }
    .campaign-inner .inner-header{
      top: -45px;
      margin-bottom: -45px;
    }
    .seat-inner .inner-header{
      text-align: left;
      top: 0;
      margin-bottom: 60px;
    }
    .reservation-inner .inner-header{
      margin-bottom: 90px;
    }
    .title-contents-01{
      font-size: 26px;
    }
    .title-contents-01 img{
      zoom:1
    }
    .seat-inner .title-contents-01 img{
      zoom:1;
    }
    .inner-header p{
      text-align: center;
      font-size: 20px;
    }
    .title-contents-02{
      font-size: 28px;
    }
    .title-contents-02 img{
      margin-left: -10%;
      zoom:1;
    }
    .title-contents-02 span{
      margin-right: -10%;
    }
    .title-contents-03{
      font-size: 28px;
    }
    .title-contents-03 img{
      zoom:1;
      margin-left: -14%;
    }
    .title-contents-04{
      font-size: 26px;
    }
    .title-contents-04 span{
      position:absolute;
      z-index: 2;
      text-align: center;
      margin: 0 auto;
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
      display:block;
      width: 394px;
    }
    .title-contents-04:before{
      content: "";
      width: 394px;
      height: 73px;
      transform: skewX(-10deg);
      background: none;
      border:solid 2px #1C1C1C;
      display: block;
      z-index: 1;
    }
}



/*Hero*/
#Hero{
    position: relative;
}
.hero-inner h1{
  margin: 0 auto;
  text-align: center;
}
.pc-on{
  display: none;
}
@media(min-width:576px) {
    .sp-on{
      display: none;
    }
    .pc-on{
      display: block;
      margin:0 auto;
    }
}


/*obi*/
.campaign-obi {
    width: 100%;
    text-align: center;
}

.campaign-obi a {
    transition: .3s;
}

.campaign-obi a:hover {
    opacity: .9;
}

.campaign-obi img {
    margin: auto;
    max-width: 100%;
}

@media(min-width: 767px) {

    .campaign-obi {
        position: absolute;
        bottom: 0;
        z-index: 2;
    }
}



/*btn*/
.campaign-cv-wrap {
/*    background: #e59696;*/
/*  background: #fdf0f0;*/
    padding: 16px 20px 10px;
}

.campaign-cv-wrap .wrap-reservebtn {
    margin-top: 0;
}

.campaign-cv-wrap .btn-reserve {
    box-shadow: none;
    font-weight: 700;
    padding: 14px 10px;
    font-size: 15px;
}

@media(min-width: 767px) {
    .campaign-cv-wrap {
        padding: 24px 20px 30px;
    }
    
    .campaign-cv-wrap .btn-reserve {
        padding: 20px 10px;
        font-size: 18px;
    }
}



/*Navi*/
#Navi{
  padding: 20px 0 20px 0;
}

.ul-local{
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 800px;
  margin:0 auto 20px;
}
.ul-local > li{
  width: 50%;
  display: flex;
  justify-content: center;
}
.ul-local > li a{
  display: flex;
  width: 100%;
  padding:15px 0px;
  color: #333;
  justify-content: center;
  border-left: 2px solid #333;
  font-size: 14px;
  font-weight: bold;
  align-items: center;
  text-align: center;
  position: relative;
}

.ul-local > li:first-child a{
  border-left: none;
}
.ul-local > li a:hover{
  text-decoration: none;
}

.ul-local > li a::after {
    content: '\f0d7';
    position: absolute;
    bottom: -6px;
    left: 50%;
    font-family: "Font Awesome 5 free";
    font-size: 18px;
    color: #333;
}


@media(min-width:767px) {
    #Navi{
      padding: 40px 0 40px 0;
    }
    .ul-local > li a{
      font-size: 24px;
      border-left: 3px solid #333;
    }
}

@media(max-width: 340px) {
    .ul-local > li a {
       font-size: 11px;
    }
    
    .ul-local > li a::after {
       font-size: 10px;
    }
}


/*Info*/
#Info{
  background: #F59394;
}
.info-inner{
  padding: 20px 0;
}
.lead-info{
  text-align: center;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}
.lead-info + .lead-info{
  margin-top: 5px;
}
@media(min-width:767px) {
    #Info{
      margin-bottom: 20px;
    }
    .info-inner{
      padding:40px 0 40px 0;
    }
    .lead-info{
      font-size: 26px;
    }
}


/*Gallery*/
#Gallery{
  position: relative;
}
#Gallery:after {
    content: "";
    background: #FDF0F0;
    width: 90%;
    height: 70px;
    position: absolute;
    right: 0;
    bottom: -60px;
    z-index: 1;
}
.gallery-inner{
  padding: 20px 15px 40px;
  background: #F8CDCD;
  position: relative;
  z-index: 2;
}
.row-gallery-header{
  display: flex;
  margin-bottom: 20px;
}
.col-header-img{
  width: 11%;
  order:1;
}

.col-header-text{
  width: 89%;
  order:2;
  padding:30px 20px 0 30px;
}
.lead-gallery-header{
  padding: 0 0 0 10px;
  font-size: 14px;
  margin-bottom: 25px;
}
.title-seat-feature{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 15px;
  justify-content: center;
}
.title-seat-feature > img{
  width: 100%;
  max-width: 44px;
}
.title-seat-feature b{
  padding-left: 5px;
  color: #D9346B;
  font-size: 16px;
  line-height: 1;
}
.bottom-title{
  width: 100%;
  margin-top: 10px;
  text-align: center;
}
.bottom-title img{
  zoom:0.7;
  margin:0 auto;
}
.row-gallery-body .box-seat-feature .bottom-title img{
  zoom:0.5;
  margin:0 auto;
}
.col-header-text .box-seat-feature{
  padding: 0 0 0 10px;
}
.dl-seat-feature{
  margin-bottom: 20px;
}
.dl-seat-feature dt{
  margin-bottom: 5px;
  font-size: 16px;
  text-align: center;
}
.dl-seat-feature dd{
  font-size: 14px;
  text-align: center;
}
.col-header-text .dl-seat-feature{
  margin-bottom: 0;
}
.col-header-text .dl-seat-feature dt{
  text-align: left;
}
.col-header-text .dl-seat-feature dd{
  text-align: left;
}
.row-gallery-body .box-seat-feature + .box-seat-feature{
  margin-top: 50px;
}
.list-seat-beforeafter > li.li-before{
  margin-left: -15px;
  position: relative;
}
.list-seat-beforeafter > li.li-after{
  margin-right: -15px;
  margin-top: 10px;
  position: relative;
}

.list-seat-beforeafter > li.li-before:before{
  border: 20px solid transparent;
  border-top: 20px solid #1C1C1C;
  left:50%;
  content: "";
  display: block;
  bottom:-35px;
  position: absolute;
  z-index: 1;
  transform: translate(-50%, 0);
}

.list-seat-before {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 8px;
}

.list-seat-after {
    position: absolute;
    z-index: 2;
    top: 38px;
    left: -10px;
}


@media(min-width:767px) {
    .gallery-inner{
        padding:40px 30px 60px;
        width: 90%;
        margin: 0 auto 0 0;
    }
    #Gallery:after {
        content: "";
        width: 80%;
        height: 1050px;
        bottom: -110px;
    }
    .container-gallery{
      width: 100%;
      max-width: 1110px;
      margin:0 0 0 auto;
    }
    .row-gallery-body{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .col-header-text .box-seat-feature{
      width: 70%;
    }
    .col-header-text .box-seat-feature .title-seat-feature{
      justify-content: flex-start;
    }
    .col-header-text .box-seat-feature .bottom-title{
      text-align: left;
    }
    .bottom-title img{
      zoom:0.8;
    }
    .row-gallery-body .box-seat-feature .bottom-title img{
      zoom:0.6;
    }
    .box-seat-feature.feature-01{
      width: 100%;
    }
    .box-seat-feature.feature-02{
      width: calc(50% - 20px);
    }
    .box-seat-feature.feature-03{
      width: calc(50% - 20px);
    }
    .lead-gallery-header{
      padding: 0 0 0 30px;
      font-size: 20px;
    }
    .title-seat-feature{
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      margin-bottom: 15px;
      justify-content: center;
    }
    .title-seat-feature > img{
      max-width: 46px;
      position: relative;
    }
    .title-seat-feature b{
      padding-left: 10px;
      color: #D9346B;
      font-size: 22px;
      line-height: 1;
    }
    .row-gallery-body .title-seat-feature{
      display: block;
      text-align: center;
    }
    .row-gallery-body .title-seat-feature > img{
      max-width: 46px;
      display: inline-block;
      margin-bottom: 10px;
    }
    .row-gallery-body .title-seat-feature b{
      padding-left: 0;
      display: block;
    }
    .bottom-title{
      margin-top: 10px;
    }
    .dl-seat-feature dt{
      font-size: 20px;
    }
    .dl-seat-feature dd{
      font-size: 18px;
    }
    .list-seat-beforeafter{
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-top: -20px;
    }
    .list-seat-beforeafter > li.li-before{
      width: 46.4%;
      margin:0;
      position: relative;
    }
    .list-seat-beforeafter > li.li-before:before{
      border: 40px solid transparent;
      border-top: 40px solid transparent;
      border-left: 40px solid #1C1C1C;
      left: auto;
      right:-70px;
      bottom:auto;
      content: "";
      display: block;
      top: 50%;
      position: absolute;
      z-index: 1;
      transform: translate(0, -50%);
    }
    .list-seat-beforeafter > li.li-after{
      width: 51.4%;
      margin:0;
    }

    .list-seat-after {
        top: 5px;
        left: 20px;
    }
}

@media(min-width:992px) {
    .gallery-inner{
      padding:40px 30px 60px;
      width: 80%;
    }
    .col-header-text .box-seat-feature{
      width: 40%;
    }
    .box-seat-feature.feature-02{
      width: calc(50% - 40px);
    }
    .box-seat-feature.feature-03{
      width: calc(50% - 40px);
    }
    .list-seat-beforeafter{
      margin-top: -20px;
    }
    .row-gallery-body .title-seat-feature{
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      margin-bottom: 15px;
      justify-content: center;
    }
    .row-gallery-body .title-seat-feature > img{
      position: relative;
      margin-bottom: 0;
    }
    .row-gallery-body .title-seat-feature b{
      padding-left: 10px;
      color: #D9346B;
      font-size: 22px;
      line-height: 1;
      display: inline-block;
    }

    .list-seat-before {
        top: -44px;
        left: -18px;
    }

    .list-seat-before {
        top: -5px;
        left: -18px;
    }
}

@media(min-width:1200px) {
    .list-seat-beforeafter{
      margin-top: -50px;
    }
}


#Campaign{
  background: #FDF0F0;
  margin-bottom: 40px;
}
.campaign-inner{
  padding: 0 0 40px 0;
  position: relative;
}
.campaign-inner .container{
  position: relative;
  z-index: 2;
}
.lead-end{
  font-size: 16px;
  text-align: center;
}
@media(min-width:768px) {
    #Campaign{
      margin-bottom: 80px;
    }
    .lead-end{
      font-size: 22px;
    }
}


/*Seat*/
#Seat{
  position: relative;
}

.seat-inner{
  padding: 0 15px 25px;
  background: #FDF0F0;
  position: relative;
  z-index: 2;
}
.container-seat{

}
.ul-seatspec{
  width: 100%;
  margin:0 auto 0 0;
  display: flex;
  flex-wrap: wrap;
}
.ul-seatspec > li{
  width: 100%;
  margin-bottom: 30px;
  padding: 0 5px;
}
.seat-img{
  margin-bottom: 20px;
  text-align: center;
}
.seat-text{
  margin: 0;
  padding: 0;
}
.title-seat-spec{
  text-align: center;
  margin-bottom: 10px;
  font-size: 18px;
}
.text-seat-spec{
  padding: 0 10px;
  font-size: 16px;
}

@media(min-width:576px) {
    .ul-seatspec > li{
      width: 50%;
      margin-bottom: 60px;
    }
}

@media(min-width:767px) {
    #Seat:after{
      content: "";
      background: #FADCDC;
      width: 80%;
      height: 1110px;
      position: absolute;
      left: 0;
      bottom:-110px;
      z-index: 1;
    }
    .seat-inner{
      padding: 60px 50px 25px;
      width: 90%;
      margin:0 0 0 auto;
    }
    .container-seat{
      width: 100%;
      max-width: 1110px;
      margin:0 auto 0 0;
    }
    .ul-seatspec{
      width: 100%;
      margin:0 auto 0 0;
      display: flex;
      flex-wrap: wrap;
    }
    .ul-seatspec > li{
      width: 33.33%;
      margin-bottom: 60px;
    }
}

@media(min-width:992px) {
    .seat-inner{
      padding: 60px 100px 70px;
      width: 80%;
    }
}


.wrap-news{
  margin-top: 20px;
}
.btn-taisaku{
  display: block;
  padding: 15px 15px 15px 25px;
  background: #1C1C1C;
  color: #fff;
  border-radius: 100px;
  text-decoration: none;
  line-height: 1.4;
  position: relative;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 15%);
}
.btn-taisaku:after{
  content: "\f24d";
  font-family: "Font Awesome 5 Free";
  font-weight: normal;
  margin-left: 12px;
  color: #fff;
}
.btn-taisaku:hover{
  text-decoration: none;
  opacity: 0.7;
}
@media(min-width:767px) {
    .btn-taisaku{
      display: inline-block;
      font-size: 16px;
    }
}


/*reservation*/
#reservation{
  background: none;
}
.liner-reserve{
  padding-bottom: 20px;
  border-bottom: 1px solid #1C1C1C;
}
.reservation-inner{
  padding: 120px 0 140px 0;
}
#reservation img{
  width: auto;
  max-width: auto;
}
#reservation .seat-set{
  border-top: none;
}
#reservation .seat-set{
  padding: 0;
}
#reservation .rosen-api-item{
  padding: 0;
}
#reservation .rosen-api-item + .rosen-api-item{
  margin-top: 25px;
}
#reservation .rosen-api-item{
  border-bottom: 0;
}
#reservation .rosen-api-search-btn-set{
  margin-bottom: 0;
}
#reservation .rosen-api-area-route{
  margin-bottom: 15px;
}


/*キャンペーン プラン
-------------------------*/
.campaign-box {
    border-radius: 30px;
    border: 2px solid #3ca6b0;
    overflow: hidden;
    background: #e5fdff;
}

.wrap-campaign-copy {
    font-size: 32px;
    font-weight: 700;
    position: relative;
    text-align: center;
    color: #3ca6b0;
    padding: 6% 3% 4%;
}

/*集中線*/
.wrap-campaign-copy .line {
    display: inline-block;
    position: relative;
    font-size: 24px;
    font-weight: 700;
    padding: 0 20px;
}

.wrap-campaign-copy .line::before,
.wrap-campaign-copy .line::after {
        content: '';
        position: absolute;
        display: inline-block;
        width: 2px;
        height: 80%;
        bottom: 0;
        border-radius: 50px;
        background: #3ca6b0;
}

.wrap-campaign-copy .line::before {
    left: -8px;
    transform: translateX(-50%) rotate(-24deg);
}

.wrap-campaign-copy .line::after{
    right: -8px;
    transform: translateX(-50%) rotate(24deg);
}

/* sub */
.wrap-campaign-copy .sub {
    display: inline-block;
    font-size: 80%;
    padding-top: 2px;
    margin-bottom: 2px;
    border-bottom: 2px dotted #ff9999;
    line-height: 1.3;
    text-align: center;
}

.wrap-campaign-copy .main {
   line-height: 1.2;
    text-align: center;
}

/* 期間 obi*/
.wrap-campaign-day {
    font-size: 15px;
    font-weight: 700;
    background: #3ca6b0;
    color: #fff;
    padding: 5px 10px;
}

.wrap-campaign-attention {
    background: #fff;
}

#reservation .campaign-box .seat-set {
    padding:  4% 3% 3%;
    background: #fff;
}

/*通常プラン
----------------------------*/
.normal-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
}


@media(min-width:767px) {
    #reservation .rosen-api-area-route{
      margin-bottom: 0;
    }
    .reservation-inner{
      padding: 240px 0 240px 0;
    }
    
    /*キャンペーン　プラン
    -------------------------*/
    .wrap-campaign-copy {
        font-size: 40px;
        padding: 3% 3% 1.5%;
    }

    /*集中線*/
    .wrap-campaign-copy .line {
        display: inline-block;
        position: relative;
        font-size: 24px;
        font-weight: 700;
        padding: 0 20px;
    }

    .wrap-campaign-copy .line {
        font-size: 20px;
        padding: 0 20px;
    }

    .wrap-campaign-copy .line::before,
    .wrap-campaign-copy .line::after {
        content: '';
        position: absolute;
        display: inline-block;
        width: 2px;
        height: 80%;
        bottom: 0;
        border-radius: 50px;    
    }

    .wrap-campaign-copy .line::before {
        left: -24px;
        transform: translateX(-50%) rotate(-45deg);
    }

    .wrap-campaign-copy .line::after{
        right: -24px;
        transform: translateX(-50%) rotate(45deg);
    }

    /* sub */
    .wrap-campaign-copy .sub {
        display: inline-block;
        font-size: 22px;
        padding-top: 2px;
        margin-bottom: 2px;
        line-height: 1.2;
    }

    .wrap-campaign-copy .main {
        font-size: 32px;
        line-height: 1.2;
    }

    /* 期間 obi*/
    .wrap-campaign-day {
        font-size: 18px;
    }
    
    /*通常プラン
    ----------------------------*/
    .normal-title {
        font-size: 30px;
    }


}


/*Youtube*/
.youtube-inner{
  padding: 50px 0;
  background: #F8CDCD;
}
.lead-youtube{
  text-align:center;
  font-size: 16px;
}
.btn-go-youtube{
  display: block;
  background: #1C1C1C;
  color: #fff;
  padding: 20px 10px;
  font-size: 18px;
  text-align: center;
  border-radius: 100px;
  text-decoration: none;
  position: relative;
  box-shadow: 0 8px 0 #FFFFFF;
}
.btn-go-youtube:hover{
  opacity: 0.5;
  color: #fff;
  text-decoration: none;
}
.btn-go-youtube:after{
  content: "\f24d";
  font-family: "Font Awesome 5 Free";
  font-weight: normal;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0, -50%);
  font-size: 80%;
}

@media(min-width:767px) {
    .youtube-inner{
      padding: 60px 0;
    }
    .lead-youtube{
      font-size: 20px;
    }
    .btn-go-youtube{
      width: 100%;
      max-width: 560px;
      background: #1C1C1C;
      margin:0 auto;
      color: #fff;
      font-size: 24px;
    }
}


/*Voice*/
.voice-inner{
  padding: 160px 0;
}

    
/**/
.row-fukidashi {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.col-fukidashi-face{
  order: 1;
  width: 100%;
  max-width: 70px;
  text-align: center;
}

.col-fukidashi{
  width: 80%;
  order: 2;
  padding: 0 10px;
  position: relative;
}

.col-fukidashi p{
  font-size: 14px;
  margin:0;
}
/**/
 
.label-name{
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.wrap-reservebtn{
  text-align: center;
  margin-top: 25px;
}

    
.btn-reserve{
  display: block;
  width: 100%;
  max-width: 560px;
  margin:0 auto;
  padding: 20px 10px;
  border-radius: 100px;
  font-size: 18px;
  background: #1C1C1C;
  color: #fff;
  text-decoration: none;
  position: relative;
  box-shadow: 0 8px 0 #F8CDCD;
}
.btn-reserve:hover{
  opacity: 0.5;
  text-decoration: none;
  color: #fff;
}
.btn-reserve:after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0, -50%);
}

@media(min-width:767px) {
    .voice-inner{
      padding: 300px 0 125px;
      width: 100%;
      max-width: 940px;
      margin:0 auto;
    }

     
/**/
  .col-fukidashi{
    padding: 20px 30px;
  }

  .col-fukidashi p{
    font-size:18px;
  }
  .col-fukidashi-face{
    max-width: 85px;
  }    
/*/
    

    .label-name{
      font-size: 18px;
    }
    .btn-reserve{
      font-size: 24px;
    }
    .row-fukidashi.ver-01 .col-fukidashi:before{
      bottom:-20px;
      left: 110px;
    }
    .row-fukidashi.ver-02 .col-fukidashi:before{
      bottom:-20px;
      left: auto;
      right: 100px;
    }
    .row-fukidashi.ver-03 .col-fukidashi:before{
      -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      transform: rotate(30deg);
    }
    .row-fukidashi.ver-03 .col-fukidashi:before{
      bottom:-20px;
      right: auto;
      left: 110px;
    }
}


.answer-inner{
  padding: 30px 0 90px 0;
}
@media(min-width:767px) {
    .answer-inner{
      padding: 30px 0 140px 0;
    }
}


.lead-answer{
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  color: #D9346B;
  margin-bottom: 20px;
}
.bar{
  position: relative;
  width: 100%;
  border-radius: 5px;
  display: flex;
}
.bar > span{
  width: 35%;
  padding-right: 10px;
  font-size: 12px;
  font-weight: bold;
}
.bar + .bar{
  margin-top: 10px;
}
.bar-info{
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 0.75rem;
  background: #eee;
  height: 30px;
  width: 100px;
  position: relative;
  transition: width 3.3s ease-in-out;
  font-size: 16px;
}
.bar-info.yes-01{
  background: #ff9999;
  color: #fff;
  font-weight: bold;
}
.bar-info.yes-02{
  background: #f5b5b5;
  color: #fff;
  font-weight: bold;
}
.percent:after{
  content: "%";
  font-size: 80%;
}

@media(min-width:767px) {
    .bar{
      position: relative;
      width: 100%;
      height: 50px;
      border-radius: 5px;
      display: flex;
      align-items: center;
    }
    .bar-info{
      display: flex;
      align-items: center;
      border-radius: 5px;
      padding: 0.75rem;
      background: #eee;
      height: 50px;
      width: 100px;
      position: relative;
      transition: width 3.3s ease-in-out;
      font-size: 16px;
    }
    .bar > span{
      width: 30%;
      font-size: 16px;
    }
}