/* ---------------------------------------------------------------------------------------------

　   MV

--------------------------------------------------------------------------------------------- */
#mv {
  width: 100%;
  position: relative;
}

#page_hero {
  width: 100%;
  position: relative;
  overflow: hidden;
}


/* キャッチコピー、リード文 */
#leadTxt {
  position: absolute;
  top: 15%;
  left: 50%;

  transform: translateX(-50%);

  z-index: 11;

}

@media print, screen and ( min-width : 0 ) and ( max-width :1200px) {
  #leadTxt {
    min-width: 90%;
  }
}

@media print, screen and ( min-width : 1700px ) {
  #leadTxt {
    min-width: 1000px;
    max-width: 1300px;
  }
}

/* ------------------------------------------------
 * 写真の上にのっているロゴ・文字
------------------------------------------------ */

/* 拡大縮小率25％ */

@media print, screen and ( max-width : 7800px ) {
}

/* 拡大縮小率33％ */

@media print, screen and ( max-width : 5800px ) {
}

/* 拡大縮小率50％ */

@media print, screen and ( max-width : 3900px ) {
}


/* 拡大縮小率151％　～ 拡大縮小率67％*/

@media print, screen and ( min-width : 1201px ) and ( max-width : 3800px ){
}


/* 拡大縮小率175％　～　125% % ipad */

@media print, screen and ( min-width : 961px ) and ( max-width : 1200px ) {
}


/* 拡大縮小率200％ & スマホ */

@media print, screen and ( max-width : 960px ) {
}

/* iPad */
@media print, screen and ( max-width : 768px ) {
}

/* スマホ */
@media print, screen and ( max-width : 414px ) {
}


/* ------------------------
 * スライダーの設定
------------------------ */
.main_slider li img {
  width: 100%;
}


.reserve_btn_area {
  background: #333b59;
  background: -moz-linear-gradient(left, #333b59 0%, #192940 51%, #0c192c 100%);
  background: -webkit-linear-gradient(left, #333b59 0%,#192940 51%,#0c192c 100%);
  background: linear-gradient(to right, #333b59 0%,#192940 51%,#0c192c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333b59', endColorstr='#0c192c',GradientType=1 );
  color: #fff;
  border-top: #232f46 solid 1px;
}
    .reserve_btn_area .reserve_btn_area_inner {
        background: url(../img/page_ttl_bg_logo.png) no-repeat center / auto 90%;
    }

    .reserve_btn_area_sec {
        padding: 40px 0;
    }
/*
        .reserve_btn_area_sec p img {
            max-width: 300px;
        }
*/

/* スライダー */
.main_slider {
    z-index: 11;
}

/* IE10,11 */
_:-ms-input-placeholder, :root .selector {
  #mv {
    background: #333b59;
  }

  .main_slider .slide02 {
    position: relative;
    background: none;
  }
    .main_slider .slide02:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/top/slide_bg.jpg) no-repeat center / cover;
        opacity: .4;
    }
}

/* Edge14用 */
@supports (-ms-ime-align: auto) {
  #mv {
    background: #333b59;
  }

  .main_slider .slide02 {
    position: relative;
    background: none;
  }
    .main_slider .slide02:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/top/slide_bg.jpg) no-repeat center / cover;
        opacity: .4;
    }
}

/* ~480px */
@media only screen and ( max-width : 480px ) {
  .main_slider .slide03 {
    background-position: 76% center;
  }
}

/* 900px~ */
@media print, screen and ( min-width : 900px ) {
  .reserve_btn_area_sec {
    padding: 120px 0;
  }
}



/* ---------------------------------------------------------------------------------------------

　   予約フォーム

--------------------------------------------------------------------------------------------- */


.reservation_box.reservation-open {
  z-index: 98;
}

/* タイトル */
.reservations_ttl {
  border-bottom: 1px solid #fff;
  pointer-events: none;
}
  .reservation_box h3 {
    line-height: 1em;
  }

.reservation_box_content {
  color: #fff;
}

/* 全体枠 */

@media print, screen and ( min-width : 0 ) and ( max-width :1200px) {
  #nitteiarea > div > div,
  #ryokinarea,
  #searchtypearea {
    margin-bottom: 15px;
  }
}

@media print, screen and ( min-width : 576px ) and ( max-width :1200px) {
  #nitteiarea > div {
    display: flex;
  }

  #nitteiarea > div > div {
    margin-right: 24px;
  }

  #reservationButton {
    display: flex;
  }
}

@media print, screen and ( min-width : 1201px ) {
  #booking_inner {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }

  #booking_inner .booking_date:first-child {
    margin-bottom: 30px;
  }

  #booking_inner > div:nth-child(1) {
    width: 44%;
  }
  #booking_inner > div:nth-child(2),
  #booking_inner > div:nth-child(3) {
    width: 22%;
  }


  /* ご宿泊日(年/月/日) */
  #nitteiarea > div {
    display: flex;
  }
  #nitteiarea > div > div {
    width: 49%;
  }
}



/* 予約ボタン */
.reservation_box .button {
  display: block;
  border: none;
  background: #c9a873;
  color: #15243b;
  font-family: inherit;
  font-size: inherit;
  text-align: center;
  cursor: pointer;
  margin-bottom: 10px;
  font-weight: bold;
}

/* キャンセルボタン */
.reservation_box .cancel_btn {
  background: #666;
  color: #fff;
}


h4.booking {
  border-left: 3px solid #c9a873;
  padding-left: 10px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #c9a873;
}

.slash {
  display: inline-block;
  margin: 0 5px;
  vertical-align: middle;
}

.reservation_text {
  font-weight: bold;
}

/* スマホ用の指定 ~1200px */
@media only screen and ( max-width : 1200px ) { /* 991px -> 1149px -> 1280px -> 1500px */
  
  .reservation_box {
    padding: 5px;
    background: rgba(0,0,0,.8);
  }

  .reservation_box_col_block1,.reservation_box_col_block2 {
    margin-bottom: 20px;
  }
  #nitteiarea .span_6 {
    margin-bottom: 10px;
  }
  .form_text {
    margin-bottom: 5px;
  }
  .nitteiarea_wrap {
    display: flex;
  }
  .nitteiarea_wrap .nitteiarea_box {
    width: 49%;
    margin-right: 2%;
  }
  .nitteiarea_wrap .nitteiarea_box:last-child {
    margin-right: 0;
  }
  .reservations_search_btn {
    display: flex;
  }
  .reservation_box .button {
    width: 49%;
    padding: 20px;
    margin: 0 1% 2% 1%;
  }

  .reservations_ttl {
    margin-bottom: 12px;
  }
  .reservation_box h3 {
    padding: 0 0 6px;
  }
}

/* ~575px */
@media only screen and ( max-width : 575px ) {
  .nitteiarea_wrap {
    display: block;
  }
  .nitteiarea_wrap .nitteiarea_box {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  .nitteiarea_wrap .nitteiarea_box:last-child {
    margin-bottom: 0;
  }
  .reservations_search_btn {
    display: block;
  }
  .reservation_box .button {
    width: 100%;
    margin: 0;
    margin-bottom: 15px;
  }
}

/* ~320px */
@media only screen and ( max-width : 320px ) {
  .toggle::-webkit-scrollbar{height:5px; width: 5px;}/*バーの太さ*/
  .toggle::-webkit-scrollbar-track{background:#dddddd;}/*バーの背景色*/
  .toggle::-webkit-scrollbar-thumb{background:#cc9900;}/*バーの色*/
  .toggle {
    display: none;
  }
}

/* 1201px~ */
@media print, screen and ( min-width : 1201px ) {/* 992px -> 1150px -> 1281px -> 1501px */
  .reservation_box {
    position: absolute;
    z-index: 95;
    width: 100%;
    left: 0;
    bottom: 0;
  }

  .reservation_box {
    padding-bottom: 20px;
  }
  .reservations_ttl {
    padding-bottom: 10px;
    margin-bottom: 15px;
  }

  .reservation_box h3 {
    font-size: 22px;
  }
  .reservation_box h3 span {
    font-size: 14px;
    margin-left: 20px;
  }
  .reservation_text {
    font-size: 16px;
  }
  h4.booking {
    font-size: 14px;
  }
  .reservation_box_content {
    padding: 15px 20px;
    margin-bottom: 0;
    background: rgba(0,0,0,.7);
  }
  .reservation_box .button {
    font-size: 15px;
  }
  .reservation_box_col {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }
  .reservation_box .button {
    width: 100%;
    padding: 20px;
  }
  .reservation_box_col_block1 {
    width: 44%;
  }
  .reservation_box_col_block2 {
    width: 24%;
  }
  .reservations_search_btn {
    width: 24%;
  }
  .reservations_child {
    display: flex;
  }

  .nitteiarea_wrap .nitteiarea_box {
    margin-bottom: 10px;
  }
  .nitteiarea_wrap .nitteiarea_box:last-child {
    margin-bottom: 0;
  }

}

/* 1200px~ */
@media print, screen and ( min-width : 1200px ) {
  .reservation_box .container {
    min-width: 1000px;
    max-width: 1300px;
  }
  
}

/* 1150px~ */
@media print, screen and ( min-width : 1150px ) {
  .nitteiarea_wrap {
    display: flex;
  }
  .nitteiarea_wrap .nitteiarea_box {
    width: 49%;
    margin-right: 2%;
    margin-bottom: 0;
  }
  .nitteiarea_wrap .nitteiarea_box:last-child {
    margin-right: 0;
  }
}

/*　---------------------------------------------------------------------------------------------

　   特典

---------------------------------------------------------------------------------------------　*/
.container_benefit {
  width: 100%;
  padding: 25px 0 5px;
  margin: 0;
  background-color: #1a1312;
}

  .container_benefit h3 {
    margin-bottom: 18px;
    color: #fff;
    font-size: 300%;
    text-align: center;
  }

  .container_benefit p.attention {
    color: #fff;
    margin: 10px 6px 10px 0;
    text-align: right;
  }

#benefit_longterm,
#benefit_btn {
  margin: 32px auto 0 ;
  width: 94%;
}

  #benefit_longterm li,
  #benefit_btn li {
    margin-bottom: 12px;
  }

  #benefit_longterm li {
    text-align: center;
  }

  #benefit_longterm a,
  #benefit_btn a {

    width: 100%;
    position: relative;
    display: inline-block;
    padding: 16px 0.5em 10px;

    text-decoration: none;
    color: #000;
    font-size: 170%;
    text-align: center;
    font-weight: bold;

    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);


    border: 4px solid #CAA846;

    background: #fff64f; /* Old browsers */
    background: -moz-linear-gradient(top,  #fff64f 0%, #ebb512 50%, #d19e03 51%, #c29715 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #fff64f 0%,#ebb512 50%,#d19e03 51%,#c29715 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #fff64f 0%,#ebb512 50%,#d19e03 51%,#c29715 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff64f', endColorstr='#c29715',GradientType=0 ); /* IE6-9 */
  }


  #benefit_longterm a {
    width: 60%;
    margin: 0 auto;
  }

    #benefit_longterm a:active,
    #benefit_btn a:active {
      border-bottom: solid 2px #fd9535;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
    }

    #benefit_longterm a span,
    #benefit_btn a span {
      filter: drop-shadow(0px 0px 3px white);
    }


/* ~869px */
@media screen and (max-width: 896px) {
  #benefit_longterm a,
  #benefit_btn a {
    font-size: 180%;
  }
}


/* ~480px */
@media screen and (max-width: 480px) {
  .container_benefit h3 {
    font-size: 190%;
  }
  #benefit_longterm,
  #benefit_btn {
    display: block;
  }
  #benefit_longterm li,
  #benefit_btn li {
    width: 100%;
  }
  #benefit_longterm a {
    width: 100%;
  }
}



/* ---------------------------------------------------------------------------------------------

　   新着情報

--------------------------------------------------------------------------------------------- */

#info {
  position: relative;
  background: #e7d0b0;
}

  .info_inner article a {
    color: #1a1311;
    font-weight: bold;
  }
    /* 日付 */
    .info_inner article a time {
      display: block;
      color: #15243b;
      margin-bottom: 10px;
    }


/* ~768px */
@media only screen and ( max-width : 768px ) {
  #info{
    width: 100%;
  }
}


/* ~767px */
@media only screen and ( max-width : 767px ) {
  #info{
    width: 100%;
  }

  .info_inner article {
    width: 48%;
    margin-right: 4%;
    margin-top: 30px;
  }

    .info_inner article:nth-child(2n) {
      margin-right: 0;
    }

    .info_inner article:nth-child(1),
    .info_inner article:nth-child(2) {
      margin-top: 0;
    }

    /* 写真 */
    .info_inner article .thumb {
      margin-bottom: 15px;
    }

  /* MORE */
  #info .more_link {
    display: none;
  }
}



/* 768px~ */
@media print, screen and ( min-width : 768px ) {
  /* 横幅50% */
  .w50p{
    width: 50%;
  }

  #info h2 {
    position: relative;
    display: inline-block;
  }

  .info_inner{
    padding: 0 4%;
  }

    .info_inner article {
      width: 49%;
      margin-right: 2%;
      margin-top: 40px;
    }

      .info_inner article:nth-child(1),
      .info_inner article:nth-child(2) {
        margin-top: 0;
      }

      .info_inner article:nth-child(2n) {
        margin-right: 0;
      }

      /* 写真 */
      .info_inner article .thumb {
        width: 48%;
      }

      /* テキスト部分 */
      .info_inner article .txt {
        width: 48%;
      }


  /* 新着情報一覧へ */
  #info .btn {
    display: none;
  }

  


  /* MORE */
  #info .more_link {
    position: absolute;
    font-size: 12px;
    color: #15243b;
    right: 6%;
    bottom: 15px;
    z-index: 10;
  }
    #info .more_link span {
      position: relative;
      display: block;
    }
      #info .more_link span:before {
        content: "";
        height: 1px;
        width: 10px;
        background: #15243b;
        position: absolute;
        top: 50%;
        margin-top: -0.5px;
        left: -15px;
        transition: .3s;
      }
        #info .more_link:hover span:before {
          width: calc(100% + 30px)
        }

}


/* 1000px~ */
@media print, screen and ( min-width : 1000px ) {
  .info_inner{
    padding: 0 6%;
  }

    .info_inner article {
      width: 49%;
    }

}


/* ---------------------------------------------------------------------------------------------

　   お客様の声

--------------------------------------------------------------------------------------------- */

#customer{
  background: #e7d0b0;
}


.btn--voice{
  background: #1a1312;
}
  .btn--voice span{
    text-align: center;
  }



/* ~768px */
@media only screen and ( max-width : 768px ) {
  #customer{
    width: 100%;
    border-top: 1px solid #1a1312;
  }
}

/* ~767px */
@media only screen and ( max-width : 767px ) {
  #customer{
    width: 100%;
  }
}


/* 768px~ */
@media print, screen and ( min-width : 768px ) {
  .btn--voice{
    margin: 60px auto 0;
  }
}


/* 769px~ */
@media print, screen and ( min-width : 769px ) {
  #customer{
    border-left: 1px solid #1a1312;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 1200px~ */
@media print, screen and ( min-width : 1200px ) {
  #customer{
    padding-left: 80px;
    padding-right: 80px;
  }
}


/* ---------------------------------------------------------------------------------------------

　   SNS

--------------------------------------------------------------------------------------------- */
#twitter {
  background: #e7d0b0;
}
#twitter .insta,
#twitter .tw {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
#twitter .instaTitle {
  margin-top: 2em;
}
#twitter .navy {
  margin-top: 1em;
}

/* ---------------------------------------------------------------------------------------------

　   コンセプト

--------------------------------------------------------------------------------------------- */

#concept {
  background: #1a1312;
  color: #fff;
}

/* ---------------------------------------------------------------------------------------------

　   客室、館内設備・サービス、ロケーション

--------------------------------------------------------------------------------------------- */

.content_menu_box .txt {
  color: #fff;

  background: #333b59;
  background: -moz-linear-gradient(left, #333b59 0%, #192940 51%, #0c192c 100%);
  background: -webkit-linear-gradient(left, #333b59 0%,#192940 51%,#0c192c 100%);
  background: linear-gradient(to right, #333b59 0%,#192940 51%,#0c192c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333b59', endColorstr='#0c192c',GradientType=1 );
}


/* ~767px */
@media only screen and ( max-width : 767px ) {
  .content_menu_box .img {
    height: 250px;
  }

  .content_menu_box .txt_inner {
    padding: 40px 5%;
    text-align: center;
  }

  .content_menu_box .txt p {
    text-align: center;
  }
}

/* 768px~ */
@media print, screen and ( min-width : 768px ) {
  .content_menu_box h2 span {
    text-align: left;
  }
  .content_menu_box .txt_inner {
    padding: 100px 50px;
  }
}

/* 1400px */
@media print, screen and ( min-width : 1400px ) {
  .content_menu_box .txt_inner {
    padding: 160px 50px;
  }
}



/* 客室 */

/* 注釈 */
.content_menu_box .img {
  position: relative;
}
.content_menu_box .img p {
  margin: 0;

  font-size: 85%;
  color: #c9a873;
  text-shadow: 0 0 3px #303030, 0 0 3px #303030, 0 0 3px #303030;
}


.content_menu_box01 .img {
  position: relative;
  background: url(../img/guestroom_img.jpg) no-repeat center / cover;
}
  /* 注釈 */
  .content_menu_box01 .img p {
    position: absolute;
    left: 10px;
    bottom: 0;
  }

.content_menu_box01 .txt_inner {
  background: url(../img/top/content_menu_box01_logo.png) no-repeat center / cover;
}



/* 館内設備・サービス */
.content_menu_box02 .img {
  background: url(../img/service_img.jpg) no-repeat center / cover;
}
  /* 注釈 */
  .content_menu_box02 .img p {
    position: absolute;
    right: 10px;
    bottom: 0;
  }
  /* ~767px */
  @media only screen and ( max-width : 767px ) {
    .content_menu_box02 .img p {
      
      left: 10px;
      
    }
  }


.content_menu_box02 .txt_inner {
  background: url(../img/top/content_menu_box02_logo.png) no-repeat center / cover;
}

/* ロケーション */
.content_menu_box03 .txt_inner {
  background: url(../img/top/content_menu_box03_logo.png) no-repeat center / cover;
}
/* ロケーション地図 */
.map {
  height: 100%;
}
  .map iframe {
    display: block;
    width: 100%;
    height: 100%;
  }




/* ブラウザ縮小表示対策 */
/* 背景画像を設定しているので必要な設定 */

/* 2000px~ */
@media print, screen and (min-width: 2000px) {
  #contents_menu .content_menu_box {
    min-height: 600px;
  }
}

/* 3000px~ */
@media print, screen and (min-width: 3000px) {
  #contents_menu .content_menu_box {
    min-height: 800px;
  }
}

/* 4000px~ */
@media print, screen and (min-width: 4000px) {
  #contents_menu .content_menu_box {
    min-height: 1000px;
  }
}

/* 5000px~ */
@media print, screen and (min-width: 5000px) {
  #contents_menu .content_menu_box {
    min-height: 1200px;
  }
}

/* 6000px~ */
@media print, screen and (min-width: 6000px) {
  #contents_menu .content_menu_box {
    min-height: 1400px;
  }
}


/* ---------------------------------------------------------------------------------------------

　   アクセス

--------------------------------------------------------------------------------------------- */
#access {
  background: #e7d0b0;
}

.access_box h3 {
  background: #1a1312;
  color: #fff;
  position: relative;
  padding: 10px 10px 10px 40px;
  text-align: center;
  font-size: 15px;
}
  .access_box h3 i {
    position: absolute;
    left: 10px;
    top: 50%;
    font-size: 26px;
    height: 1em;
    line-height: 1em;
    margin-top: -0.5em;
  }

.access_time {
  background: #846944;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 20px;
}
  .access_time span {
    font-size: 20px;
    margin-right: 10px;
    vertical-align: middle;
  }

.access_box li {
  position: relative;
  padding-left: 50px;
  padding-bottom: 4em;
  font-size: 18px;
  font-weight: bold;
}
  .access_box li:before {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    border: 5px solid #1a1312;
    border-radius: 50%;
    left: 10px;
    top: 5px;
    background: #e7d0b0;
    z-index: 2;
  }
  .access_box li:after {
    content: "";
    left: 19px;
    width: 3px;
    height: 100%;
    top: 5px;
    background: #1a1312;
    position: absolute;
    z-index: 1;
  }

  /* 後ろから2番目 */
  .access_box li:nth-last-child(2):after {
    border-left: 3px dotted #846944;
    background: none;
  }

.access_box li:last-child:before {
  border: 5px solid #846944;
}

  .access_box li:last-child:after {
    content: none;
  }

.access_box li span {
  position: absolute;
  left: 50px;
  bottom: 2em;
  color: #846944;
  font-size: 13px;
}

.access_txt {
  font-size: 18px;
  margin-top: 20px;
  font-weight: bold;
}

.pc_access_box {
  display: none;
}

@media print, screen and ( min-width : 768px ) {
  .access_box {
    margin: 0 1%;
  }
}


/* 1000px~ */
@media print, screen and ( min-width : 1000px ) {
  .pc_access_box {
    display: block;
  }
    .pc_access_box h3 {
      padding-left: 60px;
    }

  #access .slick-track {
    width: 100% !important;
  }

  .slider .access_box {
    width: 32% !important;
    margin: 0;
    margin-right: 2%;
  }

  /* 後ろから二番目 */
  /* お車でお越しのお客様を表示する際以下のブロックは削除 */
  .slider .access_box:last-child {
    margin-right: 0;
  }

  /* お車でお越しのお客様を表示する際以下のコメントアウトを解除し、有効にする */
    /* 後ろから二番目 */
    /*
    .slider .access_box:nth-last-child(2) {
      margin-right: 0;
    }
    */

  /* 
  .slider .access_box:last-child {
    display: none !important;
  }
  */
}


/* 1200px~ */
@media print, screen and ( min-width : 1200px ) {
  .access_box h3 {
    font-size: 18px;
  }
}

/* ---------------------------------------------------------------------------------------------

　   法人、団体向けサービス

--------------------------------------------------------------------------------------------- */
#group_service {
  background: #333b59;
  background: -moz-linear-gradient(left, #333b59 0%, #192940 51%, #0c192c 100%);
  background: -webkit-linear-gradient(left, #333b59 0%,#192940 51%,#0c192c 100%);
  background: linear-gradient(to right, #333b59 0%,#192940 51%,#0c192c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333b59', endColorstr='#0c192c',GradientType=1 );
  color: #fff;
}

/* ホテル名、電話番号 */
.contact_box {
  background: #2c3755;
  background: rgba(255,255,255,.1);
}
.contact_notice {
    font-size: 80%;
}

/* ~767px */
@media only screen and ( max-width : 767px ) {
  .contact_box {
    padding: 20px;
    font-size: 18px;
  }
    .contact_box p {
      text-align: center;
    }
    .contact_notice {
        font-size: 60%;
    }
}

/* 768px~ */
@media print, screen and ( min-width : 768px ) {
  #group_service {
    font-size: 16px;
  }

  .contact_box {
    padding: 50px;
    max-width: 700px;
    margin: 0 auto;
  }

  .hotel_name {
    border-right: 1px solid #fff;
    padding-right: 50px;
    margin-right: 50px;
    font-size: 20px;
    display: flex;
    align-items: center;
  }
}