@charset "utf-8";
/* CSS Document */

.modal-zindex {
    z-index: +10;
}

.news a {
  color: var(--light);
  transition: color 0.3s ease;
}

.news a:hover,
.news a:focus {
  color: var(--yellow);
  text-decoration: none;
}
.news_line {
  margin-bottom: 10px;
}

/* フォント設定 */
.kaisei-opti-regular {
  font-family: "Kaisei Opti", serif;
  font-weight: 400;
  font-style: normal;
}

.barh1-font{
  font-family: "Kaisei Opti", serif;
}

/* h2の複数設置時のバリエーション */
.barh2 {
  padding-bottom: 10px;;
  margin-bottom: 1rem;
  text-align: center;
  color: #39FF14;
  font-weight: bold;
  position: relative;
  font-family: "Kaisei Opti", serif;
}

.barh2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-image: url("data:image/svg+xml,%3csvg width='100' height='4' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 2 Q10 1 20 2 T40 2 Q50 3 60 2 T80 2 Q90 1 100 2' stroke='%23333333' stroke-width='2' fill='none' opacity='0.8'/%3e%3cpath d='M0 2.5 Q15 1.5 30 2.5 T60 2.5 Q75 3.5 90 2.5 T100 2.5' stroke='%231a1a1a' stroke-width='1.5' fill='none' opacity='0.6'/%3e%3c/svg%3e");
  background-repeat: repeat-x;
  background-size: 50px 4px;
}

/* h3の複数設置時のバリエーション */
.barh3 {
  margin-bottom: 0.75rem;
  text-align: center;
  color: var(--yellow) !important;
  position: relative;
  font-family: "Kaisei Opti", serif;
}

.barh3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}


.barh3-2 {
  margin-bottom: 1rem;
  text-align: left;
  color: #fff;
  position: relative;
  font-family: "Kaisei Opti", serif;
  padding-bottom: 10px;
}

.barh3-2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-image: url("data:image/svg+xml,%3csvg width='100' height='4' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 2 Q25 0 50 2 T100 2' stroke='%23cccccc' stroke-width='2' fill='none'/%3e%3c/svg%3e");
  background-repeat: repeat-x;
  background-size: 50px 4px;
}

/* h4の複数設置時のバリエーション */
.barh4 {
  margin-bottom: 1rem;
  text-align: center;
  color: #39FF14;
  position: relative;
  font-family: "Kaisei Opti", serif;
  padding-bottom: 10px;
}

.barh4:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-image: url("data:image/svg+xml,%3csvg width='100' height='4' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 2 Q25 0 50 2 T100 2' stroke='%23383735' stroke-width='2' fill='none'/%3e%3c/svg%3e");
  background-repeat: repeat-x;
  background-size: 50px 4px;
}

/* 湯平温泉の歴史セクションの背景画像設定 */
.history-section {
  position: relative;
}

.history-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('../images/back_img.png');
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: auto;
  opacity: 0.1;
  z-index: -2;
  pointer-events: none;
  padding: 20px;
}

.history-section::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, rgba(56, 55, 53, 0.3) 0%, rgba(56, 55, 53, 0.1) 100%);
  z-index: -1;
  pointer-events: none;
}

/* スクロール時のナビゲーションスタイル */
.ftco-navbar-light.scrolled {
  background: rgba(56, 55, 53, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--light);
}

.ftco-navbar-light.scrolled .navbar-nav > .nav-item > .nav-link {
  color: var(--light) !important;
  transition: color 0.3s ease;
}

.ftco-navbar-light.scrolled .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--yellow) !important;
}

.ftco-navbar-light.scrolled .navbar-nav > .nav-item.active > .nav-link {
  color: var(--yellow) !important;
}

.ftco-navbar-light.scrolled .navbar-brand {
  color: var(--light) !important;
}

.ftco-navbar-light.scrolled .navbar-brand:hover {
  color: var(--yellow) !important;
}

.ftco-navbar-light.scrolled .navbar-toggler {
  border-color: var(--light) !important;
}

.ftco-navbar-light.scrolled .navbar-toggler .oi {
  color: var(--light) !important;
}

/* ブランドロゴの色変更 */
.navbar-brand img {
  transition: filter 0.3s ease;
}

/* 通常状態のロゴ（明るく表示） */
.ftco-navbar-light .navbar-brand img {
  filter: brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(189%) hue-rotate(314deg) brightness(102%) contrast(92%);
}

/* ロゴホバー時（黄色系に変更） */
.ftco-navbar-light .navbar-brand:hover img {
  filter: brightness(0) saturate(100%) invert(89%) sepia(73%) saturate(4498%) hue-rotate(40deg) brightness(106%) contrast(101%);
}

/* スクロール時のロゴ（明るく表示） */
.ftco-navbar-light.scrolled .navbar-brand img {
  filter: brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(189%) hue-rotate(314deg) brightness(102%) contrast(92%);
}

/* スクロール時のロゴホバー（黄色系に変更） */
.ftco-navbar-light.scrolled .navbar-brand:hover img {
  filter: brightness(0) saturate(100%) invert(89%) sepia(73%) saturate(4498%) hue-rotate(40deg) brightness(106%) contrast(101%);
}

/* モバイル版のロゴスタイル */
@media (max-width: 991.98px) {
  .ftco-navbar-light .navbar-brand img {
    filter: brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(189%) hue-rotate(314deg) brightness(102%) contrast(92%);
  }
  
  .ftco-navbar-light .navbar-brand:hover img {
    filter: brightness(0) saturate(100%) invert(89%) sepia(73%) saturate(4498%) hue-rotate(40deg) brightness(106%) contrast(101%);
  }
}

/* ロゴサイズの調整 */
.navbar-brand img {
  max-height: 40px;
  width: auto;
}

/* インラインスタイルをクラス化 */

/* スライダー背景画像 */
.slider-bg-01 {
  background-image: url('../images/slide01.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slider-bg-02 {
  background-image: url('../images/slide02.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slider-bg-03 {
  background-image: url('../images/slide03.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 黄色テキスト */
.text-yellow {
  color: var(--yellow) !important;
}

/* ニュースセクションスタイル */
.news-container,
.news_box {
  line-height: 130%;
  width: 100%;
  height: 500px;
  overflow: auto;
  overflow-x: hidden;
}

/* 詳細ボタンの白色テキスト */
.btn-white-text {
  color: #FFFFFF !important;
}

/* 施設カードの背景画像 */
.facility-bg-spa {
  background-image: url('../facility/spa/images/top_catch.jpg');
}

.facility-bg-lodging {
  background-image: url('../facility/lodging/images/top_catch.jpg');
}

.facility-bg-meal {
  background-image: url('../facility/meal/images/top_catch.jpg');
}

.facility-bg-view {
  background-image: url('../facility/view/images/top_catch.jpg');
}

.facility-bg-gallery {
  background-image: url('../facility/gallery/images/top_catch.jpg');
}

.facility-bg-rvpark {
  background-image: url('../facility/rvpark/images/top_catch.jpg');
}

/* iframeのボーダー除去 */
.iframe-no-border {
  border: 0;
}

/* フッター背景画像設定 */
.ftco-footer {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  background-image: url('../images/footer_back.png');
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 25% auto;
  background-color: rgba(56, 55, 53, 0.1);
}

.ftco-footer::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, rgba(56, 55, 53, 0.6) 0%, rgba(56, 55, 53, 0.1) 100%);
  z-index: 1;
  pointer-events: none;
}

.ftco-footer .container,
.ftco-footer .ftco-footer-widget,
.ftco-footer .row {
  position: relative;
  z-index: 2;
}

/* フッター下部のスペースを調整 */
.ftco-footer .row:last-child {
  margin-bottom: -50px;
}

.slider-text p{
   position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  top: 50%;
  left: 10%;
  text-shadow:1px 1px #222;
}
.slider-text h1{
   position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
   top: 20%;
  left: 10%;
  margin:0;
  padding:0;
  text-shadow:1px 1px #222;
}

/* 施設カードの画像の高さを4分の1削る */
.block-20 {
  height: 225px !important; /* 元の300pxから75px削って225px */
}

/* スライダーのh1とpテキストを100px近づける */
.slider-text h1 {
  margin-bottom: 1rem !important; /* 元のmb-5（3rem）から1remに変更 */
}

.slider-text p {
  margin-top: -2rem; /* pをさらに上に移動させて近づける */
}

a.anchor{
    display: block;
    padding-top: 80px;
    margin-top: -80px;
}

/* アンカー用スペーサー */
.acp {
	width: 100%;
	float: left;
	display: block;
	height: 8em;
}

.tablebox {
	width: 100%;
	float: left;
	display: block;
	margin-bottom: 45px;
}
.tablebox dl {
	width: 100%;
	float: left;
	display: block;
	border-bottom: dotted #5A5A5A 1px;
}
.tablebox dt {
	float: left;
	display: block;
	font-weight: normal;
}
.tablebox dd {
	float: left;
	display: block;
}
/*========================
　smartphone　bottom menu
　========================*/


.mini-text{font-size:10px;}/*文字大きさ*/

ul.bottom-menu {
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
    height:70px;/*高さ*/
    margin:0;
    padding: 0 25px;
    background-color:#000;/*背景色*/
    border-top:2px solid #808080;/*バーの上の線*/
    border-bottom:2px solid #808080;/*バーの下の線*/
    z-index:30;}

ul.bottom-menu li {
    float:left;
    width:25%;
    background-color:#000;/*背景色*/
    list-style-type:none;
    text-align:center;
    font-size:25px;/*アイコンのサイズ*/}

.bottom-menu li a {
    display: block;
    color:#fff;/*アイコン＆文字の色*/
    padding-top:10px;
    padding-bottom:5px;
    line-height:10px;
    text-decoration:none;}

.bottom-menu li a:hover {
    color:#a9a9a9;/*マウスオーバー時の色*/}

/* === 展開メニュー === */

ul.menu-second-level {
    visibility: hidden;
    opacity: 0;
    z-index:1;}

ul.menu-second-level li a{
    border-top:1px dashed #a9a9a9;/*展開の枠点線*/
        font-size:15px;/*展開メニューの文字サイズ*/
        line-height:30px;/*文字の縦幅*/}

.menu-second-level li a:hover {
    height:100%;
    background: lightgrey;/*マウスオーバーの色*/}

li.menu-width-max ul.menu-second-level {
    position: absolute;
    bottom: 47px;/*高さ*/
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding:0;}

li.menu-width-max:hover ul.menu-second-level {
    bottom: 47px;/*高さ*/
    visibility: visible;
    opacity: 1;}

li.menu-width-max ul.menu-second-level li {
    float: left;
    width: 100%;
    border: none;
}

/* 四つ角が逆半円のボタンスタイル */
.btn-inverse-rounded {
  font-family: "Kaisei Opti", serif;
  position: relative;
  background-color: var(--yellow) ;
  color: #FFFFFF !important;
  border: none;
  padding: 10px 25px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  clip-path: polygon(
    15px 0%, 
    calc(100% - 15px) 0%, 
    100% 15px, 
    100% calc(100% - 15px), 
    calc(100% - 15px) 100%, 
    15px 100%, 
    0% calc(100% - 15px), 
    0% 15px
  );
}

.btn-inverse-rounded:hover {
  background-color: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-inverse-rounded a {
  position: relative;
  z-index: 2;
  color: #FFFFFF !important;
  text-decoration: none;
}

/* 予約ボタンのスタイル */
.btn-reservation {
  font-family: "Kaisei Opti", serif;
  display: block;
  width: 100%;
  border: 1px solid;
  position: relative;
  background: #fff;
  color: #614f38;
  border: 2px solid #614f38;
  padding: 1rem 5.5rem 1rem 1.8rem;
  transition: all .3s;
  text-decoration: none;
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 2rem;
  text-align: left;
  box-sizing: border-box;
}

.btn-reservation:after {
  content: "";
  position: absolute;
  display: block;
  transition: all .3s;
  width: 7px;
  height: 18px;
  top: 50%;
  right: 2.5rem;
  box-shadow: 2px -2px 0 #fff;
  border-top: solid 2px #614f38;
  border-right: solid 2px #614f38;
  transform: translateY(-50%) rotate(45deg) skewX(-45deg);
}

.btn-reservation:hover {
  color: #614f38;
  text-decoration: none;
}

.btn-reservation:hover:after {
  right: 5px;
  height: 40px;
}

/* 温泉説明文の色をデフォルトに戻す */
.blog-entry .text .facility-description {
  color: var(--light) !important;
}

.facility-description {
  color: var(--light) !important;
}

/* blog-entryの白い背景を維持 */
.blog-entry {
  background: #ffffff !important;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* blog-entryの見出しと文字色を修正（可読性を考慮） */
.blog-entry .text .heading a {
  color: var(--dark) !important;
}

.blog-entry .text {
  color: var(--dark) !important;
}

/* hrタグを白いラインに設定 */
hr {
  border: 0;
  height: 1px;
  background-color: var(--light);
  margin: 20px 0;
}

/* 施設カードの画像の高さを4分の1削る */
.block-20 {
  height: 225px !important; /* 元の300pxから75px削って225px */
}

/* スライダーのh1とpテキストを100px近づける */
.slider-text h1 {
  margin-bottom: 1rem !important; /* 元のmb-5（3rem）から1remに変更 */
}

.slider-text p {
  margin-top: -2rem; /* pをさらに上に移動させて近づける */
}

/* メニューセクションのh3タイトルスタイル */
.menus .text h3 {
  color: white !important;
}

/* スマホでのスライダー高さ調整 - 画面の一部だけ使用してスクロールを阻害しない */
@media (max-width: 767.98px) {
  .owl-carousel.home-slider,
  .owl-carousel.home-slider .slider-item,
  .owl-carousel.home-slider .slider-item .slider-text {
    height: 60vh !important;
    min-height: 400px !important;
    max-height: 500px !important;
  }
  
  /* スライダーのテキストサイズ調整 */
  .slider-text h1 {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
    padding: 0 15px;
  }
  
  /* スライダードット（インジケーター）を大きく */
  .owl-carousel.home-slider .owl-dots {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
  }
  
  .owl-carousel.home-slider .owl-dots .owl-dot {
    width: 12px !important;
    height: 12px !important;
    margin: 5px !important;
  }
  
  .owl-carousel.home-slider .owl-dots .owl-dot span {
    width: 12px !important;
    height: 12px !important;
  }
}

/* タブレットサイズでの調整 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .owl-carousel.home-slider,
  .owl-carousel.home-slider .slider-item,
  .owl-carousel.home-slider .slider-item .slider-text {
    height: 70vh !important;
  }
}

/* 小さなスマホ（iPhone SE等）での追加調整 */
@media (max-width: 575.98px) and (max-height: 667px) {
  .owl-carousel.home-slider,
  .owl-carousel.home-slider .slider-item,
  .owl-carousel.home-slider .slider-item .slider-text {
    height: 50vh !important;
    min-height: 350px !important;
    max-height: 450px !important;
  }
  
  .slider-text h1 {
    font-size: 1.4rem !important;
  }
}

/* メールフォーム確認画面の文字色修正 */
div#mfp_overlay_inner {
  color: #333 !important;
}

div#mfp_overlay_inner * {
  color: #333 !important;
}

table#mfp_confirm_table tr th,
table#mfp_confirm_table tr td {
  color: #333 !important;
}

div#mfp_phase_confirm {
  color: #333 !important;
}

div#mfp_phase_confirm * {
  color: #333 !important;
}

/* Firefox対応 - メールフォームの入力欄レイアウト修正 */
@-moz-document url-prefix() {
  form#mailformpro dl dd {
    padding: 10px 15px 20px 15px !important;
    box-sizing: border-box;
    display: block !important;
    clear: both !important;
  }
  
  form#mailformpro dl dt {
    box-sizing: border-box;
    display: block !important;
    clear: both !important;
  }
  
  form#mailformpro input[type="text"] {
    width: 49% !important;
    max-width: 49% !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    margin: 2px 0 5px 0 !important;
    display: inline-block !important;
    float: none !important;
  }
  
  form#mailformpro input[name="姓"] {
    margin-right: 2% !important;
  }
  
  form#mailformpro input[type="email"],
  form#mailformpro input[type="tel"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    margin: 2px 0 5px 0 !important;
    display: block !important;
    float: none !important;
  }
  
  form#mailformpro input[name="email"],
  form#mailformpro input[name="confirm_email"],
  form#mailformpro input[name="電話番号"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  form#mailformpro textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    margin: 0 !important;
    display: block !important;
    resize: vertical !important;
  }
  
  form#mailformpro dd.mfp {
    overflow: visible !important;
    width: 100% !important;
    display: block !important;
    clear: both !important;
  }
}

/* Firefox 追加対応 - より強力な修正 */
@supports (-moz-appearance: none) {
  form#mailformpro dl {
    display: block !important;
    width: 100% !important;
  }
  
  form#mailformpro dl dt.mfp {
    width: 100% !important;
    float: none !important;
    display: block !important;
    clear: both !important;
    margin-bottom: 5px !important;
  }
  
  form#mailformpro dl dd.mfp {
    width: 100% !important;
    float: none !important;
    display: block !important;
    clear: both !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  form#mailformpro input,
  form#mailformpro textarea {
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }
}

/* 全ブラウザ共通 - レスポンシブ対応 */
@media screen and (max-width: 768px) {
  form#mailformpro input[type="text"][name="姓"],
  form#mailformpro input[type="text"][name="名"] {
    width: 100% !important;
    margin: 2px 0 5px 0 !important;
  }
}

/* 全ブラウザ共通 - フォーム要素の幅調整（左右いっぱいに表示） */
form#mailformpro input[type="text"][name="姓"] {
  width: 49%;
  max-width: 49%;
  box-sizing: border-box;
  padding: 8px;
  margin: 2px 2% 5px 0;
  display: inline-block;
}

form#mailformpro input[type="text"][name="名"] {
  width: 49%;
  max-width: 49%;
  box-sizing: border-box;
  padding: 8px;
  margin: 2px 0 5px 0;
  display: inline-block;
}

form#mailformpro input[type="email"],
form#mailformpro input[type="tel"],
form#mailformpro textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px;
  margin: 0;
  display: block;
}

/* お名前の姓・名を横並びにするための専用CSS */
form#mailformpro input[name="姓"],
form#mailformpro input[name="名"] {
  width: 49% !important;
  max-width: 49% !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  margin: 2px 0 5px 0 !important;
  display: inline-block !important;
  vertical-align: top !important;
  float: none !important;
}

form#mailformpro input[name="姓"] {
  margin-right: 2% !important;
}

form#mailformpro input[name="名"] {
  margin-right: 0 !important;
}

/* dd.mfp要素でのfloatクリア */
form#mailformpro dd.mfp:after {
  content: "";
  display: table;
  clear: both;
}

/* gallery-owl内の画像を中央寄せ＆高さ揃え */
.gallery-owl .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px; /* スライダーの高さを統一 */
  background: #f8f8f8; /* 余白色（任意） */
}

.gallery-owl .item img {
  max-height: 340px;   /* 画像の最大高さ */
  max-width: 100%;     /* 横幅は枠内で自動調整 */
  width: auto;
  height: auto;
  object-fit: contain; /* 枠内に収める */
  display: block;
  margin: 0 auto;
  background: #fff;    /* 画像の背景色（任意） */
}

/* インスタ風ギャラリー用 */
.gallery-grid {
  /* BootstrapのrowでOK。グリッド数を変えたい場合はgridレイアウトも可 */
}

.gallery-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fafafa;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s;
}
.gallery-img-wrap img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.gallery-img-wrap:hover img {
  transform: scale(1.05);
}
.gallery-img-wrap .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 1rem;
  text-align: center;
  padding: 0.5em 0;
  opacity: 0.9;
  letter-spacing: 0.05em;
}

/* 独自クラスでMagnific Popupの矢印を画像中央左右に重ねて表示 */
.yunohira-mfp-arrow {
  width: 48px;
  height: 48px;
  margin-top: -24px;
  top: 50%;
  position: absolute;
  z-index: 1046;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  cursor: pointer;
}
.yunohira-mfp-arrow-left {
  left: 16px;
  right: auto;
}
.yunohira-mfp-arrow-right {
  right: 16px;
  left: auto;
}
.yunohira-mfp-arrow:before, .yunohira-mfp-arrow:after {
  font-size: 32px;
  color: #fff;
}

.yunohira-mfp-arrow:hover {
  background: rgba(0,0,0,0.6);
}

@media (max-width: 600px) {
  .yunohira-mfp-arrow {
    width: 36px;
    height: 36px;
    margin-top: -18px;
  }
  .yunohira-mfp-arrow-left {
    left: 5px;
  }
  .yunohira-mfp-arrow-right {
    right: 5px;
  }
}