/* CSS読み込み完了後にふわっと表示 */
body {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}
body.loaded {
    visibility: visible;
    opacity: 1;
}

/* スライダー用ローディングアニメーションのスタイル */
.loading-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  display: none; /* 最初は非表示 */
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.loading {
  border: 5px solid rgba(0, 181, 205, 0.3);
  border-radius: 50%;
  border-top: 5px solid #00b5cd;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 画像コンテナのスタイル */
.eyecatch {
  position: relative;
  min-height: 30px; /* 小さな画像のためのスペース確保 */
}

/* ローディングアニメーションのスタイル */
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 3px solid rgba(0, 181, 205, 0.3);
  border-radius: 50%;
  border-top: 3px solid #00b5cd;
  animation: spinCenter 1s linear infinite;
  display: none; /* 初期状態は非表示 */
}

@keyframes spinCenter {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 画像遅延読み込み（Intersection Observer） */
img[data-lazy-src] {
  opacity: 0;
  transition: opacity 0.3s ease;
}
img.lazy-loaded {
  opacity: 1;
}
.lazy-img-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0, 181, 205, 0.3);
  border-radius: 50%;
  border-top: 3px solid #00b5cd;
  animation: spinCenter 1s linear infinite;
  z-index: 1;
  pointer-events: none;
}

/* 年齢認証モーダルのボタンを角丸に */
#age .btn {
  border-radius: 50px;
}

/* パンくずリスト */
.breadcrumb-nav {
  padding: 0 15px;
  margin-top: 70px;
}

/* ログイン時のヘッダースペーサー */
.header-spacer {
  display: block;
  margin-top: 70px;
  height: 24px; /* パンくずリストと同等の高さ */
}
@media (max-width: 767px) {
  .header-spacer {
    margin-top: 60px;
  }
}
.breadcrumb-nav .breadcrumb {
  background: transparent;
  padding: 8px 0;
  margin-bottom: 0;
  font-size: 12px;
}
.breadcrumb-nav .breadcrumb li {
  display: inline;
}
.breadcrumb-nav .breadcrumb li + li:before {
  content: ">";
  padding: 0 5px;
  color: #999;
}
.breadcrumb-nav .breadcrumb a {
  color: #666;
  text-decoration: none;
}
.breadcrumb-nav .breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb-nav .breadcrumb .active {
  color: #333;
}
@media (max-width: 767px) {
  .breadcrumb-nav {
    margin-top: 60px;
  }
}

/* 768px〜950px: スマホ表示（ハンバーガーメニュー）を維持 */
@media (min-width: 768px) and (max-width: 950px) {
  .navbar-header {
    float: none;
  }
  .navbar-toggle {
    display: block !important;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-collapse.collapse.in {
    display: block !important;
  }
  .navbar-nav {
    float: none !important;
    margin: 7.5px -15px;
  }
  .navbar-nav > li {
    float: none;
  }
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar-custom .navbar-nav > li > a {
    padding-left: 15px !important;
    padding-right: 15px !important;
    font-size: 14px !important;
  }
  .navbar-custom .navbar-nav > li > a > i {
    display: inline-block !important;
  }
  /* メンバートグルボタンも表示 */
  .member_toggle.navbar-toggle {
    display: block !important;
  }
}

/* 951px以上: デスクトップ表示 */
@media (min-width: 951px) {
  .navbar-custom .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  .navbar-custom .navbar-header {
    flex-shrink: 0;
  }
  .navbar-custom .navbar-collapse {
    flex: 1;
    display: flex !important;
    justify-content: flex-end;
  }
  .navbar-custom .navbar-nav {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
  }
}

/* 951px〜1300px: メニューを詰める */
@media (min-width: 951px) and (max-width: 1300px) {
  .navbar-nav > li > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }
  .navbar-nav > li > a > i {
    margin-right: 2px;
  }
}

/* 大きめ画面でもメニューを詰める（1300px〜1400px） */
@media (min-width: 1300px) and (max-width: 1400px) {
  .navbar-nav > li > a {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 13px !important;
  }
}
/*
 * overrides.css
 * !important を使用したオーバーライドルールを集約
 * 作成日: 2025-12-18
 *
 * 元ファイル: color.css, pink.css, style_left_column.css, style.css
 */

/* ========================================
   color.css から移設
   ======================================== */

/* メッセージ */
.message_main {
  margin-top: 0px !important;
}

/* ボーダーカラー（color.css版） */
.border-pink-color {
  border-color: #D62415 !important;
}
.border-yellow-color {
  border-color: #F0A118 !important;
}
.border-sky-color {
  border-color: #004D99 !important;
}
.border-blue-color {
  border-color: #414C9F !important;
}
.border-green-color {
  border-color: #00A4A4 !important;
}
.border-orange-color {
  border-color: #ED923F !important;
}

/* ボタンリンク色 */
.inquiry_btn:link,
.inquiry_btn:visited {
  color: #fff !important;
}
.inquiry_btn_pink:link,
.inquiry_btn_pink:visited {
  color: #fff !important;
}

/* ナビゲーション */
.navbar-custom .dropdown-menu > li > a {
  border-bottom: 1px solid rgba(73, 71, 71, 0.15) !important;
}
.navbar-custom .dropdown-menu > li > a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.navbar-custom .nav li > a.login-btn:hover {
  color: #fff !important;
}

/* 幅100% */
.w100 {
  width: 100% !important;
}

/* スマホ表示時のプロフィールページ画像 */
@media (max-width: 767px) {
  .swiper-container-one {
    width: 100vw !important;
  }
  .swiper-container-one .swiper-slide {
    width: 100vw !important;
  }
}

/* ========================================
   pink.css から移設
   ======================================== */

/* ボーダーカラー（pink.css版 - テーマカラー） */
.border-pink {
  border-color: #737373 !important;
}
.border-yellow {
  border-color: #ff9776 !important;
}
.border-sky {
  border-color: #5bc0de !important;
}
.border-blue {
  border-color: #414C9F !important;
}
.border-green {
  border-color: #aae89a !important;
}
.border-orange {
  border-color: #ED923F !important;
}

/* ログインボタン */
.login-btn {
  color: #fff !important;
}
.login-btn:hover {
  color: #fff !important;
}

/* ニュースヘッダー */
.news-header .module-title:first-letter {
  color: #fff !important;
}

/* ========================================
   style_left_column.css から移設
   ======================================== */

/* ログアウトアイコン */
.modern-menu .logout-item i {
  color: #95a5a6 !important;
}
.modern-menu .logout-item:hover i {
  color: #7f8c8d !important;
}

/* 予約情報パネル */
.modern-reservation-box .panel.panel-default {
  border: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
.modern-reservation-box .panel-heading {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  padding: 15px 20px !important;
  border-radius: 15px 15px 0 0 !important;
}
.modern-reservation-box .panel-body,
.modern-reservation-box .table {
  background: white !important;
}
.modern-reservation-box .panel-title a {
  color: white !important;
}
.modern-reservation-box .panel-title .badge {
  background: white !important;
  color: #667eea !important;
}

/* 料金表示 */
.modern-reservation-box .price-amount {
  font-size: 24px !important;
  font-weight: bold !important;
}

/* ステップバー */
.modern-reservation-box .step_bar li.current {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #fff !important;
}
.modern-reservation-box .step_bar li.current::before {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
.modern-reservation-box .step_bar li.current::after {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
.modern-reservation-box .step_bar li.current2 {
  background: #f39c12 !important;
  color: #fff !important;
}
.modern-reservation-box .step_bar li.current2::before {
  background: #f39c12 !important;
}
.modern-reservation-box .step_bar li.current2::after {
  background: #f39c12 !important;
}

/* ========================================
   style.css から移設（主要なもの）
   ======================================== */

/* ドロップダウン */
.dropdown-menu-right {
  text-align: left !important;
  right: 0 !important;
  left: auto !important;
}

/* ========================================
   スマホ版キャストBOX 角丸一体化
   ======================================== */
@media screen and (max-width: 480px) {
  /* 写真：上だけ角丸、下は直角 */
  .action-xs .box_cast img {
    border-radius: 4px 4px 0 0 !important;
  }

  /* 名前：下だけ角丸、上は直角 */
  .action-xs .box_cast .cast_name,
  .action-xs .box_cast .cast_name2,
  .action-xs .box_cast .cast_name2nd {
    border-radius: 0 0 4px 4px !important;
    margin-top: 0 !important;
  }
}

/* ========================================
   ニュースカード レイアウト
   ======================================== */
.news-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

/* 日時・カテゴリ エリア */
.news-meta {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 12px 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.news-date {
  font-size: 13px;
}

.news-date i {
  margin-right: 5px;
}

.news-category {
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 10px;
  border-radius: 15px;
  font-size: 12px;
}

.news-cast {
  color: #fff !important;
  text-decoration: underline;
  font-size: 13px;
}

.news-cast:hover {
  color: #ffd700 !important;
}

/* 写真エリア */
.news-image {
  width: 100%;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.news-image a:hover img {
  transform: scale(1.03);
}

/* テキストエリア */
.news-text {
  padding: 15px;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

/* 詳細リンクエリア */
.news-link {
  padding: 0 15px 15px;
  text-align: right;
}

.news-detail-btn {
  display: inline-block;
  background: rgb(220, 104, 126);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 13px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(220, 104, 126, 0.3);
}

.news-detail-btn:hover {
  background: rgb(200, 84, 106);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(220, 104, 126, 0.4);
}

.news-detail-btn i {
  margin-right: 5px;
}

/* スマホ対応 */
@media screen and (max-width: 480px) {
  .news-meta {
    padding: 10px 12px;
    gap: 8px;
  }

  .news-date {
    font-size: 12px;
  }

  .news-category {
    font-size: 11px;
    padding: 2px 8px;
  }

  .news-text {
    padding: 12px;
    font-size: 13px;
  }

  .news-link {
    padding: 0 12px 12px;
    text-align: center;
  }

  .news-detail-btn {
    display: block;
    padding: 12px 20px;
    font-size: 14px;
  }

  /* スマホ版2名表示（グリッドモード） */
  .action-pc.sp-grid-mode {
    display: block !important;
  }
}

/* ========================================
   ページタイトル smallタグ調整
   ======================================== */
.module-title {
    white-space: nowrap !important;
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    gap: 0.5em !important;
}

.module-title small {
    font-size: 60%;
    margin-left: 0;
    white-space: nowrap !important;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .module-title {
        font-size: 14px !important;
    }
    .module-title small {
        font-size: 10px !important;
    }
}

/* ========================================
   写メ日記 検索フィルター
   ======================================== */
.photo-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.photo-filter-form {
  flex: 1;
  min-width: 0;
}

.photo-filter-form .form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.photo-filter-form select.form-control,
.photo-filter-form input.form-control {
  width: auto;
  flex: 1;
  min-width: 120px;
  max-width: 200px;
}

.photo-view-toggle {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .photo-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .photo-filter-form {
    width: 100%;
  }

  .photo-filter-form .form-inline {
    flex-direction: column;
    width: 100%;
  }

  .photo-filter-form select.form-control,
  .photo-filter-form input.form-control {
    width: 100% !important;
    max-width: none;
    margin-bottom: 8px;
  }

  .photo-view-toggle {
    justify-content: flex-end;
    margin-top: 10px;
  }
}

/* ========================================
   店舗型：3ステップ進捗バー
   ======================================== */
.step_bar.step_bar_3 li {
  width: 31%;
}

/* ========================================
   店舗型：来店案内カード
   ======================================== */
.tenpo-info-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.tenpo-info-header {
  background: #6c757d;
  color: #fff;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: bold;
}

.tenpo-info-header i {
  font-size: 20px;
}

.tenpo-info-body {
  padding: 20px;
  background: #f8f5ff;
}

/* ご来店待ち時の背景色 */
.tenpo-info-card-waiting .tenpo-info-body {
  background: #f0fff4;
}

.tenpo-info-thanks {
  color: #333;
  font-size: 14px;
  margin: 0 0 15px 0;
  line-height: 1.6;
}

.tenpo-info-notice {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 12px 15px;
  margin-bottom: 15px;
  border-radius: 0 8px 8px 0;
  color: #856404;
  font-weight: bold;
  font-size: 14px;
}

.tenpo-info-notice i {
  margin-right: 8px;
  color: #f57c00;
}

.tenpo-info-details {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
}

.tenpo-info-row {
  display: flex;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed #dee2e6;
}

.tenpo-info-row:last-child {
  border-bottom: none;
}

.tenpo-info-label {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 15px;
  min-width: 60px;
  text-align: center;
  flex-shrink: 0;
  margin-right: 12px;
}

.tenpo-info-value {
  flex: 1;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-all;
}

/* シンプル表示（ラベルなし） */
.tenpo-info-simple {
  text-align: center;
}

.tenpo-info-row-simple {
  padding: 8px 0;
  border-bottom: 1px dashed #dee2e6;
}

.tenpo-info-row-simple:last-child {
  border-bottom: none;
}

.tenpo-room-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: block;
}

.tenpo-room-number {
  font-size: 24px;
  font-weight: bold;
  color: #667eea;
  display: block;
}

.tenpo-room-suffix {
  font-size: 14px;
  font-weight: normal;
  color: #666;
  margin-left: 2px;
}

/* 明細ボタン角丸 */
.btn.rounded-pill {
  border-radius: 50px;
}

/* 指名欄の小さい丸アイコン（スマホのみ表示） */
.cast-icon-small {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  vertical-align: middle;
  display: none;
}

@media (max-width: 767px) {
  .cast-icon-small {
    display: inline-block;
  }
}

.tenpo-address-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tenpo-address {
  font-size: 14px;
  color: #555;
}

.tenpo-bikou-row {
  margin-top: 5px;
}

.tenpo-bikou {
  font-size: 13px;
  color: #888;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  display: block;
  text-align: left;
}

.tenpo-info-bikou {
  flex-direction: column;
  gap: 8px;
}

.tenpo-info-bikou .tenpo-info-label {
  align-self: flex-start;
  margin-bottom: 8px;
}

.tenpo-info-bikou .tenpo-info-value {
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  font-size: 13px;
  color: #666;
}

.tenpo-copy-btn {
  background: #667eea;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 10px;
  flex-shrink: 0;
}

.tenpo-copy-btn:hover {
  background: #5a67d8;
  transform: scale(1.05);
}

.tenpo-copy-btn:active {
  transform: scale(0.95);
}

.tenpo-copy-btn.copied {
  background: #28a745;
}

.tenpo-map-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tenpo-map-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.tenpo-map-google {
  background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
  color: #fff !important;
}

.tenpo-map-google:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4);
  color: #fff !important;
}

.tenpo-map-apple {
  background: linear-gradient(135deg, #333 0%, #555 100%);
  color: #fff !important;
}

.tenpo-map-apple:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  color: #fff !important;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .tenpo-info-header {
    padding: 14px 16px;
    font-size: 15px;
  }

  .tenpo-info-body {
    padding: 15px;
  }

  .tenpo-info-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .tenpo-info-label {
    font-size: 10px;
    padding: 3px 8px;
    min-width: 50px;
  }

  .tenpo-info-value {
    font-size: 13px;
  }

  .tenpo-room-number {
    font-size: 18px;
  }

  .tenpo-room-suffix {
    font-size: 12px;
  }

  .tenpo-copy-btn {
    padding: 5px 10px;
    font-size: 11px;
  }

  .tenpo-map-btn {
    padding: 12px 16px;
    font-size: 13px;
  }
}
/*--------------------------------------------------------------
  Slide Menu
--------------------------------------------------------------*/

/* ============================================
   Overlay
   ============================================ */
.slide-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9998;
}

.slide-menu-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   Slide Menu Panel
   ============================================ */
.slide-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.slide-menu.is-open {
  transform: translateX(0);
}

/* ============================================
   Menu Header
   ============================================ */
.slide-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #333;
  color: #fff;
  min-height: 56px;
}

@supports(padding-top: env(safe-area-inset-top)) {
  .slide-menu-header {
    padding-top: calc(16px + env(safe-area-inset-top));
  }
}

.slide-menu-title {
  font-size: 18px;
  font-weight: bold;
}

.slide-menu-close {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-menu-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.slide-menu-close i {
  font-size: 20px;
  color: #fff;
}

/* ============================================
   User Info Section
   ============================================ */
.slide-menu-user {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
}

.slide-menu-user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #dc687e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  overflow: hidden;
  flex-shrink: 0;
}

.slide-menu-user-avatar i {
  font-size: 22px;
  color: #fff;
}

.slide-menu-user-avatar.has-image {
  background: #f0f0f0;
}

.slide-menu-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-menu-user-info {
  flex: 1;
}

.slide-menu-user-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.slide-menu-user-status {
  font-size: 13px;
  color: #888;
}

.slide-menu-user-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: #dc687e;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 22px;
  text-align: center;
  border-radius: 11px;
}

/* ============================================
   Login Form (Guest)
   ============================================ */
.slide-menu-login-form {
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #eee;
}

.slide-menu-form-group {
  margin-bottom: 12px;
}

.slide-menu-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.slide-menu-input:focus {
  outline: none;
  border-color: #dc687e;
  box-shadow: 0 0 0 3px rgba(220, 104, 126, 0.1);
}

.slide-menu-input::placeholder {
  color: #aaa;
}

.slide-menu-login-submit {
  width: 100%;
  padding: 14px 20px;
  background: #dc687e;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.slide-menu-login-submit:hover {
  background: #c75a6f;
}

.slide-menu-login-submit:active {
  transform: scale(0.98);
}

.slide-menu-login-submit i {
  margin-right: 8px;
}

.slide-menu-login-links {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
}

.slide-menu-login-links a {
  color: #666;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.slide-menu-login-links a:hover {
  color: #dc687e;
  text-decoration: underline;
}

/* ============================================
   Account Menu (Top)
   ============================================ */
.slide-menu-account {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 8px 0;
}

.slide-menu-account .slide-menu-item {
  padding: 12px 20px;
}

.slide-menu-account .slide-menu-item i {
  color: #888;
}

/* Account Menu Badge */
.slide-menu-badge {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #dc687e;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  border-radius: 10px;
  margin-left: 10px;
}

/* Logout Item */
.slide-menu-logout {
  color: #999;
}

.slide-menu-logout i {
  color: #999 !important;
}

.slide-menu-logout:hover {
  color: #666;
}

/* ============================================
   Menu Content
   ============================================ */
.slide-menu-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0;
}

/* ============================================
   Menu Items
   ============================================ */
.slide-menu-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  color: #333;
  text-decoration: none;
  transition: background 0.2s ease;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
}

.slide-menu-item:hover,
.slide-menu-item:focus {
  background: #f5f5f5;
  color: #333;
  text-decoration: none;
}

.slide-menu-item i {
  width: 24px;
  font-size: 18px;
  color: #666;
  margin-right: 15px;
  text-align: center;
}

.slide-menu-item span {
  flex: 1;
}

/* Badge */
.slide-menu-item .badge,
.slide-menu-item .count-badge {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #dc687e;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  border-radius: 10px;
  margin-left: 10px;
}

/* ============================================
   Section Divider & Title
   ============================================ */
.slide-menu-divider {
  height: 1px;
  background: #eee;
  margin: 10px 20px;
}

.slide-menu-section-title {
  padding: 15px 20px 8px;
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
}

/* ============================================
   Submenu (Accordion)
   ============================================ */
.slide-menu-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #fafafa;
}

.slide-menu-submenu.is-open {
  max-height: 300px;
}

.slide-menu-submenu .slide-menu-item {
  padding-left: 55px;
  font-size: 14px;
}

.slide-menu-submenu .slide-menu-item i {
  font-size: 14px;
  width: 20px;
}

/* Toggle Arrow */
.slide-menu-toggle {
  transition: transform 0.3s ease;
  margin-left: auto;
  font-size: 14px !important;
  width: auto !important;
  color: #999 !important;
}

.slide-menu-toggle.is-rotated {
  transform: rotate(180deg);
}

/* External link icon */
.slide-menu-item .external-icon {
  margin-left: 8px;
  font-size: 12px !important;
  color: #bbb !important;
  width: auto !important;
}

/* ============================================
   Login Button
   ============================================ */
.slide-menu-login-btn {
  display: block;
  margin: 20px;
  padding: 15px 30px;
  background: #dc687e;
  color: #fff !important;
  text-align: center;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
}

.slide-menu-login-btn:hover {
  background: #c75a6f;
  color: #fff;
  text-decoration: none;
}

/* ============================================
   Footer
   ============================================ */
.slide-menu-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  background: #f8f9fa;
  text-align: center;
}

.slide-menu-footer-logo img {
  height: 25px;
  opacity: 0.5;
}

/* ============================================
   Body Lock & Footer Hide
   ============================================ */
body.menu-is-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

body.menu-is-open .tel-area {
  display: none !important;
}

/* ============================================
   Desktop: Hide slide menu
   ============================================ */
@media (min-width: 768px) {
  .slide-menu,
  .slide-menu-overlay {
    display: none !important;
  }
}
/*
 * layout.css
 * ヘッダー・フッター共通スタイル
 * 作成日: 2026-01-29
 */

/* ========================================
   PWA Safe Area対応
   ======================================== */
@supports(padding-top: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); }
  .navbar-fixed-top {
    padding-top: env(safe-area-inset-top);
    background-clip: padding-box;
  }
  .navbar-fixed-top::before {
    content: '';
    position: absolute;
    top: calc(-1 * env(safe-area-inset-top));
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: inherit;
    z-index: 1;
  }
}
@media all and (display-mode: standalone) {
  .navbar-fixed-top {
    padding-top: env(safe-area-inset-top, 20px);
  }
  .navbar-fixed-top::before {
    content: '';
    position: absolute;
    top: calc(-1 * env(safe-area-inset-top, 20px));
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 20px);
    background: inherit;
    z-index: 1;
  }
}

/* ========================================
   スライドメニューボタン（スマホ）
   ======================================== */
@media (max-width: 767px) {
  #slideMenuBtn {
    display: block !important;
    float: right;
    padding: 8px 10px;
    margin-top: 8px;
    margin-right: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
  }
  #slideMenuBtn .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #333 !important;
    border-radius: 1px;
    margin-left: auto;
    margin-right: auto;
  }
  #slideMenuBtn .icon-bar + .icon-bar {
    margin-top: 4px;
  }
  #slideMenuBtn .small {
    display: block;
    font-size: 9px;
    color: #333;
    text-align: center;
    margin-top: 3px;
  }
}

/* ========================================
   明細モーダル
   ======================================== */
.meisai-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  overflow: hidden;
}
.meisai-overlay.show {
  display: block;
}
.meisai-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 16px;
  width: calc(100% - 30px);
  max-width: 360px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: meisaiSlideIn 0.3s ease;
}
@keyframes meisaiSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.meisai-body {
  padding: 0;
  overflow-y: auto;
  max-height: calc(80vh - 55px);
}
.meisai-header {
  background: linear-gradient(135deg, #17a2b8 0%, #5bc0de 100%);
  color: #fff;
  padding: 16px 20px;
  text-align: center;
}
.meisai-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}
.meisai-header .meisai-icon {
  font-size: 24px;
  margin-bottom: 5px;
}
.meisai-content {
  padding: 15px;
}
.meisai-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}
.meisai-item:last-child {
  border-bottom: none;
}
.meisai-item-label {
  color: #555;
}
.meisai-item-value {
  font-weight: 600;
  color: #333;
}
.meisai-item-value.discount {
  color: #e53935;
}
.meisai-total {
  background: linear-gradient(135deg, #f8f9fa 0%, #e8f4f8 100%);
  margin: 10px 15px;
  padding: 15px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #17a2b8;
}
.meisai-total-label {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.meisai-total-value {
  font-size: 22px;
  font-weight: bold;
  color: #17a2b8;
}
.meisai-footer {
  background: #f8f9fa;
  padding: 12px 20px;
  text-align: center;
  border-top: 1px solid #eee;
}
.meisai-close-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 25px;
  padding: 10px 40px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.meisai-close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* ========================================
   フッター モダンデザイン（共通）
   ======================================== */
/* メインフッターエリア */
.module-extra-small.footer {
  background: #1e1e2e;
  border-top: none;
  padding: 50px 0 30px;
}

/* ちゃんこテーマ用フッター背景色 */
.module-extra-small.footer.chanko-footer-upper {
  background: var(--main-color) !important;
  border-top: none;
}

.footer_box {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

/* フッターカラム */
.footer .footer-col {
  flex: 1 1 0;
  min-width: 140px;
  padding: 0 12px;
}
.footer .footer-col-shop {
  flex: 1.5 1 0;
  min-width: 200px;
  padding: 0 12px;
}

/* ウィジェットスタイル */
.footer .widget {
  margin-bottom: 30px;
}

.footer .widget-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: relative;
}

.footer .widget-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--main-color) 0%, var(--main-color-light) 100%);
  border-radius: 2px;
}

/* ロゴコンテナ */
.footer .logo-container {
  margin-bottom: 16px;
  padding: 10px;
  background: rgba(255,255,255,0.92);
  border-radius: 10px;
  display: inline-block;
}

.footer .logo-container img {
  max-width: 160px;
  height: auto;
  border-radius: 6px;
  display: block;
}

/* 店舗情報 */
.footer .widget p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
  line-height: 1.7;
}
.footer .widget p i.fa {
  width: 18px;
  text-align: center;
  margin-right: 6px;
  color: rgba(255,255,255,0.4);
}

/* リンクリスト */
.footer .icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .icon-list li {
  margin-bottom: 10px;
}

.footer .icon-list li a {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.footer .icon-list li a::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  margin-right: 10px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.footer .icon-list li a:hover {
  color: #fff;
  padding-left: 4px;
}

.footer .icon-list li a:hover::before {
  background: var(--main-color);
}

.footer .icon-list li a .badge {
  background: var(--main-color);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 8px;
}

/* 下部フッター（コピーライト） */
.pc-footer-modern {
  background: #16162a !important;
  padding: 18px 0 !important;
  margin-top: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.pc-footer-modern .copyright {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin: 0;
}

.pc-footer-modern .copyright a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.pc-footer-modern .copyright a:hover {
  color: #fff;
}

/* ========================================
   フッター スマホ用調整
   ======================================== */
@media screen and (max-width: 767px) {
  .module-extra-small.footer {
    padding: 30px 15px 100px;
  }

  .footer .footer-col,
  .footer .footer-col-shop {
    flex: 1 1 50%;
    min-width: 0;
    padding: 0 10px;
  }
  .footer .footer-col-shop {
    flex: 1 1 100%;
    margin-bottom: 10px;
  }

  .footer .widget {
    margin-bottom: 20px;
  }

  .footer .widget-title {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .footer .logo-container {
    padding: 10px;
    margin-bottom: 12px;
  }

  .footer .logo-container img {
    max-width: 130px;
  }

  .footer .widget p {
    font-size: 12px;
    margin-bottom: 5px;
  }

  .footer .icon-list li {
    margin-bottom: 8px;
  }

  .footer .icon-list li a {
    font-size: 12px;
  }

  .footer .icon-list li a::before {
    width: 4px;
    height: 4px;
    margin-right: 8px;
  }

  .pc-footer-modern {
    padding: 15px 0 !important;
  }

  .pc-footer-modern .copyright {
    font-size: 11px;
    text-align: center;
  }
}

/* ========================================
   予約申請ボタン キラキラアニメーション
   ======================================== */
@keyframes sparkle {
  0%, 100% {
    box-shadow: 0 0 5px rgba(51, 122, 183, 0.5), 0 0 10px rgba(51, 122, 183, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(51, 122, 183, 0.8), 0 0 30px rgba(51, 122, 183, 0.6), 0 0 40px rgba(51, 122, 183, 0.4);
  }
}

.reserve-submit-btn {
  animation: sparkle 2s ease-in-out infinite;
}

.reserve-submit-btn:hover {
  box-shadow: 0 0 25px rgba(51, 122, 183, 1), 0 0 35px rgba(51, 122, 183, 0.8), 0 0 45px rgba(51, 122, 183, 0.6) !important;
}

/* ========================================
   スマホ用フッターナビ - モダンデザイン
   ======================================== */
.sp-footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(to top, #1a1a2e 0%, #16213e 100%);
  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

@media screen and (min-width: 480px) {
  .sp-footer-nav {
    display: none;
  }
}

.sp-footer-nav-inner {
  display: grid;
  padding: 0 10px;
  margin: 0;
  gap: 8px;
}

.sp-footer-nav-2col {
  grid-template-columns: repeat(2, 1fr);
}

.sp-footer-nav-3col {
  grid-template-columns: repeat(3, 1fr);
}

.sp-footer-nav-4col {
  grid-template-columns: repeat(4, 1fr);
}

.sp-footer-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  text-decoration: none;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 10px;
  transition: all 0.25s ease;
  position: relative;
}

.sp-footer-btn:hover,
.sp-footer-btn:active {
  background: rgba(255,255,255,0.15);
  text-decoration: none;
  color: #fff;
  transform: translateY(-2px);
}

.sp-footer-btn i {
  font-size: 18px;
  margin-bottom: 5px;
  color: rgba(255,255,255,0.9);
  transition: all 0.25s ease;
}

.sp-footer-btn:hover i,
.sp-footer-btn:active i {
  transform: scale(1.1);
}

.sp-footer-btn span {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* アクティブ状態（現在のページ） */
.sp-footer-btn.active {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.sp-footer-btn.active i {
  color: #fff;
}

/* フッターバッジ */
.sp-footer-badge {
  position: absolute;
  top: 3px;
  right: 10px;
  background: #ff4757;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* ========================================
   ページローディングオーバーレイ
   ======================================== */
.page-loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 999999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.page-loading-overlay.active {
  display: flex;
}
.page-loading-spinner {
  text-align: center;
}
.spinner-circle {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #333;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 15px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-text {
  color: #666;
  font-size: 14px;
  margin: 0;
}

/* ========================================
   ログイン後スマホ版ちゃんこヘッダー非表示
   ======================================== */
@media (max-width: 767px) {
    body.is-logged-in .header_top,
    body.is-logged-in .chan_header,
    body.is-logged-in #ticker {
        display: none !important;
    }
    body.is-logged-in .header-spacer {
        display: none !important;
        margin-top: 0 !important;
        height: 0 !important;
    }
    body.is-logged-in {
        padding-top: 0 !important;
    }
}
body.age-modal-open .sp-footer-nav {
    display: none !important;
}

/* ========================================
   ちゃん娘ボイス カードデザイン（共通）
   ======================================== */
.voice-list .msg__left.action-pc-tweet {
    max-width: 100% !important;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 16px 16px 16px 80px;
    margin-bottom: 16px;
    min-height: 70px;
    transition: box-shadow 0.2s;
}
.voice-list .msg__left.action-pc-tweet:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.voice-list .msg__left figure {
    width: 56px;
    height: 56px;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-light) 100%);
    padding: 2px;
}
.voice-list .msg__left figure img {
    width: 52px;
    height: 52px;
}
.voice-list .msg__left .msg__left-text {
    margin-left: 0;
}
.voice-list .msg__left .msg__left-text .post-meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 6px;
}
.voice-list .msg__left .msg__left-text .post-meta a {
    color: #E667A2;
    font-weight: 600;
    text-decoration: none;
}
.voice-list .msg__left .msg__left-text .post-meta a:hover {
    text-decoration: underline;
}
.voice-list .msg__left .msg__left-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}
.voice-list hr.divider-w {
    display: none;
}
.voice-list .msg__left:not(.bg-white) {
    background: #f8f8f8;
    border-radius: 12px;
    padding: 16px 16px 16px 80px;
    margin-bottom: 16px;
    min-height: 70px;
    opacity: 0.7;
}
@media (max-width: 767px) {
    .voice-list .msg__left.action-pc-tweet {
        padding: 14px 14px 14px 72px;
        border-radius: 10px;
    }
    .voice-list .msg__left figure {
        width: 48px;
        height: 48px;
        left: 12px;
    }
    .voice-list .msg__left figure img {
        width: 44px;
        height: 44px;
    }
    .voice-list .msg__left .msg__left-text p {
        font-size: 13px;
    }
}

/* ========================================
   message.css から統合（メッセージ/チャットUI）
   ======================================== */
/*/////////////////////////////////////////////////
//list
/////////////////////////////////////////////////*/
@media (min-width:768px){
.list_msg{
	height: 680px;
	overflow-y: scroll;
	overflow-x: hidden;
}
}

.list_msg{
	margin:0 -15px;
}
.list_msg li{
	border-left:none;
	border-right:none;
	display:flex;
}
.list_msg li:first-child{
	border-top:none;
}
.list_msg li .list-images{
	align-self:center;
}
.list-images{width:65px;}
.list-images img{
	width: 55px;
	height: 55px;
	object-fit: cover;
	object-position: 100% 0;
}
.list-data{width:calc(100% - 60px);}
.list_msg .list-data p{line-height:1.2;}
/*/////////////////////////////////////////////////
//detail
/////////////////////////////////////////////////*/

.msg__container {
  padding:0;
  background: #8cadb5;
  overflow: hidden;
  margin: auto;
  margin-bottom: 60px;
  font-size: 100%;
	width:100%;
}

/* タイトル部分 */
.msg__container .msg__title {
	background: #06c755;
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 10px;
	font-size: 150%;
	color: #ffffff;
	position:fixed;
	z-index:10000;
	top:0;
	left:0;
}
.msg_category,.msg_category:hover, .msg_category:focus{ text-align: left; width: 30%;color:#fff;}
.msg_subject  { text-align: center;width: 70%;color:#fff;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.msg_date     { text-align: right; width: 30%;color:#fff;}

/* 会話部分 */
.msg__container .msg__contents {
  padding:70px 10px 180px;
  overflow: hidden;
  line-height: 135%;
}

.msg__container .scroll {
  height: 700px;
  overflow-y: scroll;
}

/* スタンプ画像最大幅 */
.msg__container .stamp img {
  max-width:150px;
}

/* 相手の会話 */
.msg__contents .msg__left {
    width: 100%;
    position: relative;
    display: block;
    margin-bottom: 5px;
    max-width: 90%;
    clear: both;
}

/* アイコン画像 */
.msg__contents .msg__left figure {
    width: 50px;
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 0px;
    margin: 0;
    background: linear-gradient(45deg, #38B8C8, #7F90E5, #E667A2);
    border-radius: 50%;
    height: 50px;
    text-align: center;
    overflow: hidden;
    padding: 2px;
}

.msg__contents .msg__left figure img {
    border-radius: 50%;
    border: 2px solid white;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    object-fit: cover;
}

/* 正方形を用意 */
.msg__contents .msg__left figure img{
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
.msg__contents .msg__left figure i{color:#fff;    font-size: 2.5em;
    margin-top: 0.1em;}
.msg__contents .msg__left .msg__left-text {
  margin-left: 70px;
}

.msg__contents .msg__left .msg__left-text .name,
.msg__contents .msg__left .msg__left-text .date{
  font-size: 80%;
  color: #2d5016;
}
.msg__contents .msg__left .msg__left-text .name a
{
	color:#2d5016;
}
/* コメントエリア */
.msg__contents .msg__left .text {
  margin: 0;
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background-color: #ffffff;
	min-height: 2.6em;
}

/* 吹き出し */
.msg__contents .msg__left .text::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 10px;
  border-right: 20px solid #ffffff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* 自分の会話 */
.msg__contents .msg__right {
    position: relative;
    display: block;
    margin: 5px 0;
    max-width: 90%;
    float: right;
    margin-right: 15px;
    clear: both;
}

/* コメントエリア */
.msg__contents .msg__right .text {
  padding: 10px;
  border-radius: 20px;
  background-color: #8de055;
  margin: 0;
  margin-left: 80px;
	    min-height: 3em;
}

/* 吹き出し */
.msg__contents .msg__right .text::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -10px;
  top: 10px;
  border-left: 20px solid #8de055;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* 自分がスタンプを送る時 */
.msg__contents .msg__right .stamp {
  position: relative;
  margin-left: 80px;
}

/* 既読エリア */
.msg__contents .msg__right .date {
  content: '';
  position: absolute;
  display: block;
  width: 100px;
  text-align: right;
  left: -30px;
  bottom: 0px;
  font-size: 80%;
  color: #2d5016;
}
.msg_image{
  position:relative;
  overflow:hidden;
  padding-bottom:100%;
}
.image img{
  position:absolute;
}
.msg_bg {
color: #000000;
background: #8cadb5;
}

/* メッセージボタンエリア */
.msgbtn-area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba( 255, 255, 255, 0.6 );
    z-index: 10000;
}
.msgbtn-area .msgbtn-area-inner {
    position: relative;
    width: 100%;
    margin: 0px auto;
    padding: 10px 5px;
    display: flex;
    justify-content: space-between;
}
.msgbtn-area-inner span {
    color: #fff;
}

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 103000;
	padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
	height:38px;
    font-size: 16px;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}.input-group > .form-control, .input-group > .custom-select, .input-group > .custom-file {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}
.input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}.input-group-append {
    margin-left: -1px;
}
.input-group-prepend, .input-group-append {
    display: flex;
}
.btn{
	padding: 0.375rem 0.75rem;
}

/*背景白の場合*/
.msg__bg_wh .msg__contents .msg__left .msg__left-text .name{
	color:#000;
}
.msg__bg_wh .msg__contents .msg__left .text {
 	position: relative;
	display: inline-block;
 	margin: 0;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 100%;
 	color: #555;
	font-size: 16px;
	background: #FFF;
 	border: solid 1px #555;
 	box-sizing: border-box;
	border-radius:10px;
}

.msg__bg_wh .msg__contents .msg__left .text:before{
	content: "";
	position: absolute;
	top: 50%;
	left: -19px;
    margin-top: -10px;
    border: 10px solid transparent;
    border-right: 10px solid #FFF;
 	z-index: 2;
}

.msg__bg_wh .msg__contents .msg__left .text:after{
	content: "";
	position: absolute;
	top: 50%;
	left: -20px;
    margin-top: -10px;
    border: 10px solid transparent;
    border-right: 10px solid #555;
 	z-index: 1;
}

.msg__bg_wh .msg__contents .msg__left .text p {
	margin: 0;
	padding: 0;
}
.messageModal{
	width: 90%;
    margin:-10% 0 0 -5%;
}
#msg_bt{height:1px;}

/*to 女の子*/
.girls_message.msg_bg,
.girls_message .msg__container{
	background:#fce4ec;
}
.girls_message .msg__container .msg__title{
	background:#f35691;
}
.girls_message .msg__contents .msg__right .text{
	background: linear-gradient(135deg, #ec407a 0%, #d81b60 100%);
	color:#fff;
}
.girls_message .msg__contents .msg__right .text::after{
	border-left: 20px solid #d81b60;
}
.girls_message .btn-success{
	background-color: #f35691;
    border-color: #f35691;
}
.girls_message .msgbtn-area{
	background:#fce4ec;
}
.girls_message .msg__contents .msg__left .msg__left-text .name,
.girls_message .msg__contents .msg__left .msg__left-text .date,
.girls_message .msg__contents .msg__left .msg__left-text .name a,
.girls_message .msg__contents .msg__right .date{color:#f35691;}
@media(min-width:768px){
	.messageModal{
		width: 500px;
		margin: -120px 0 0 -250px;
	}
}