@charset "UTF-8";

:root {
  --main-color: #826650;
  --sub-color: #467065;
  --link-color: #b28e5e;
}

body {
  font-family: 'San Fransisco', 'Helvetica', 'Arial', 'Yu Gothic Medium', '游ゴシック Medium', 'YuGothic', '游ゴシック体', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #434343;
  min-width: 1300px;
}

a {
  color: #333;
  text-decoration: none;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  image-rendering: -webkit-optimize-contrast;
}

.grecaptcha-badge {
  visibility: hidden;
}

/* ==========================================================================

  01. header
  02. gnav
  03. footer
  04. low-common-design (low only)
  05. menu
  06. counseling (low only)

  09. multi-class

========================================================================== */
/*
  common
========================================================================== */
/*
  header
========================================================================== */
.head,
.head ul,
.head li,
.head a,
.head span,
.head i,
.head div,
.head section {
  box-sizing: border-box;
}

.head img {
  max-width: 100%;
}

.head {
  position: absolute;
  z-index: 10;
  width: 100%;
  min-width: 1300px;
  font-size: clamp(calc(15px * 0.93), calc((15 / 1400) * 100vw), calc(15px * 1.5));
}

.head_ttl {
  position: relative;
  z-index: 3;
  font-size: 77.8%;
  color: #fff;
  margin: 0.5em 0 0 1em;
  letter-spacing: 0.1em;
}

/* --------------------------- side */
.side {
  position: fixed;
  z-index: 999;
  right: 0;
  top: 88px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: -4px 0 16px rgba(176, 176, 176, 0.11);
}

.side a {
  display: block;
  position: relative;
  z-index: 3;
  z-index: 3;
  font-size: 13.65px;
  color: #2e2e2e;
  padding: 1em 0;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../images/common/side_bg.png");
  background-size: 4px 4px;
  background-repeat: repeat;
  background-color: rgba(255,255,255,.4);
  transition: 0.3s;
}

.side a:nth-of-type(1) {
  margin-bottom: 10px;
}

.side a:hover {
  opacity: 0.7;
}

.side a p {
  display: flex;
  justify-content: center;
  align-items: center;
}

.side a span:nth-of-type(1) {
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #333;
}

.side a span i {
  display: block;
  line-height: 1;
}

.side a:nth-of-type(2) span:nth-of-type(1) i:nth-of-type(2) {
  margin-top: 0.8em;
}

/* --------------------------- low */
header.lowhd {
  position: relative;
}

.lowhd .logo {
  width: 19.5%;
  position: absolute;
  top: 7.36%;
  left: 2.86%;
}

.lowhd .logo h1 {
  margin-bottom: 25px;
  text-align: center;
  color: #2e2e2e;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .1em;
  white-space: nowrap;
}

.lowhd .info {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  right: 0;
}

.lowhd .info .box {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, .9);
}

.lowhd .info .box .upper {
  padding-bottom: 7px;
  display: flex;
  align-items: center;
}

.lowhd .info .box .upper .tel {
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.lowhd .info .box .upper .tel i {
  margin-right: 7px;
  width: 15px;
}

.lowhd .info .box .upper .tel i img {
  display: block;
}

.lowhd .info .box .upper .tel span {
  font-size: 28px;
  line-height: 1;
  letter-spacing: .06em;
}

.lowhd .info .box .upper .sns {
  display: flex;
  justify-content: flex-end;
}

.lowhd .info .box .upper .sns a:nth-child(1) {
  width: 21px;
}

.lowhd .info .box .upper .sns a:nth-child(2) {
  margin-left: 15px;
  width: 10px;
}

.lowhd .info .box .address {
  padding-top: 9px;
  color: #2e2e2e;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .05em;
  border-top: 1px solid #2e2e2e;
}

.lowhd .info .btn {
  width: 14.28%;
}

/*
  gnav
========================================================================== */
.gnav,
.gnav nav,
.gnav ul,
.gnav li,
.gnav a,
.gnav span,
.gnav i,
.gnav div {
  box-sizing: border-box;
}

.gnav img {
  max-width: 100%;
  vertical-align: middle;
}

.gnav {
  position: relative;
  z-index: 5;
  background: rgba(46, 46, 46, 0.85);
  padding: 24px 0;
}

.gnav ul {
  margin: 0 auto;
  width: 86%;
  min-width: 1200px;
  max-width: 1500px;
  display: flex;
  justify-content: stretch;
  align-items: center;
  border-left: 1px solid #fff;
}

.gnav li {
  flex: 1;
  text-align: center;
  border-right: 1px solid #fff;
}

.gnav li:nth-of-type(1),
.gnav li:nth-of-type(4) {
  flex: none;
  width: 11%;
}

.gnav li:nth-of-type(3) {
  flex: none;
  width: 13%;
}

.gnav li a {
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #fff;
  display: block;
  transition: 0.3s;
  padding: 8px 0;
}

.gnav li.current a,
.gnav li a:hover {
  opacity: 0.7;
}

/*
  footer
========================================================================== */
.gmap,
.gmap ul,
.gmap li,
.gmap a,
.gmap span,
.gmap i,
.gmap div,
.foot,
.foot p,
.foot ul,
.foot li,
.foot a,
.foot span,
.foot i,
.foot div,
.foot section,
.foot nav {
  box-sizing: border-box;
}

.gmap img,
.foot img {
  max-width: 100%;
}

/* --------------------------- foot map */
.foot_map {
  margin: 0 0 56px;
}

.foot_map_ttl {
  text-align: center;
  font-size: 35.72px;
  color: #4c4c4c;
  line-height: 1;
  letter-spacing: 0.04em;
}

.foot_map_addr {
  min-width: 1280px;
  max-width: 1360px;
  width: calc((1320 / 1400) * 100vw);
  margin: 0 auto 30px;
  text-align: right;
}

.foot_map_addr span {
  display: inline-block;
  font-size: 15.08px;
  background-color: #ededed;
  padding: 0.2em 1em;
  letter-spacing: 0.08em;
}

.gmap {
  width: 100%;
  position: relative;
  margin-bottom: 33px;
}

.gmap::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 10;
  width: 1px;
  height: 80px;
  left: 50%;
  top: -40px;
  background-color: #515151;
}

.gmap iframe {
  width: 100%;
  min-height: 465px;
  aspect-ratio: 1400 / 465;
  vertical-align: top;
  border: 0 none;
}

.foot_map_lnk {
  text-align: right;
  min-width: 1280px;
  max-width: 1360px;
  width: calc((1364 / 1400) * 100vw);
  margin: 0 auto;
}

.foot_map_lnk a {
  display: inline-block;
  padding: 0 1em 0 0.4em;
  position: relative;
  font-size: 19.39px;
  text-decoration: none;
  color: #4a4a4a;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #4a4a4a;
}

.foot_map_lnk a::after {
  content: "";
  display: block;
  position: absolute;
  width: 0.8em;
  height: 1px;
  bottom: 0;
  right: 0;
  background-color: #4a4a4a;
  transform: rotate(45deg);
  transform-origin: right bottom;
}

/* --------------------------- foot_bnr */
.foot_bnr {
  background-color: #faf9f3;
  padding: 48px 0 25px;
  margin: 0 0 52px;
}

.foot_bnr_lst {
  margin: 0 auto;
  max-width: 1200px;
  text-align: center;
}

.foot_bnr_lst a {
  display: inline-block;
  width: 286px;
  margin: 0 5px 28px;
}

.foot_bnr_lst img {
  aspect-ratio: 286 / 77;
}

/* --------------------------- foot_seo */
.foot_seo {
  width: 1168px;
  margin: 0 auto 72px;
  font-size: 12.51px;
  color: #595757;
  line-height: 1.38;
}

/* --------------------------- foot bottom */
.foot_btm {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/foot_bg.jpg");
  padding: 66px 0 30px;
  color: #fff;
}

.foot_btm::before {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: calc(50% + 85px);
  background-color: rgba(38, 23, 13, 0.7);
}

.foot_inr {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  margin: 0 auto 80px;
  width: calc((1112/1400) * 100%);
  min-width: 1100px;
  max-width: 1188px;
}

/* --------------------------- foot info */
.foot_info {
  position: relative;
  z-index: 2;
  width: 411px;
}

.foot_logo {
  margin: 0 auto 20px;
}

.foot_logo img {
  aspect-ratio: 411/ 193;
}

.foot_tel {
  margin: 0 0 27px;
  text-align: center;
}

.foot_tel span {
  display: inline-block;
  font-size: 23.59px;
  min-height: 24px;
  padding-left: 1.6em;
  letter-spacing: 0.16em;
  background-repeat: no-repeat;
  background-size: 26px auto;
  background-position: 0 50%;
  background-image: url("../images/common/foot_ico_tel.png");
}

.foot_accs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 306px;
  margin: 0 auto 30px;
}

.foot_addr {
  font-size: 15.29px;
}

.foot_addr span {
  display: block;
  line-height: 1.3;
}

.foot_btn {
  display: flex;
  width: 88px;
  justify-content: space-between;
}

.foot_btn a {
  display: block;
  width: 36px;
}

.foot_btn a img {
  aspect-ratio: 36 / 36;
}

/* --------------------------- foot time table */
.foot_timetable {
  width: 100%;
  border-collapse: collapse;
  line-height: 1;
  margin-bottom: 0.8em;
}

.foot_timetable th,
.foot_timetable td {
  text-align: center;
  vertical-align: middle;
}

.foot_timetable th {
  width: 30%;
  font-weight: normal;
}

.foot_timetable thead th,
.foot_timetable thead td {
  font-size: 14.56px;
  padding: 0.6em 0;
}

.foot_timetable thead td {
  border-left: 1px solid #fff;
}

.foot_timetable tbody th,
.foot_timetable tbody td {
  border-top: 1px solid #fff;
  padding: 0.4em 0;
}

.foot_timetable tbody th {
  font-size: 14.97px;
}

.foot_timetable tbody td {
  border-left: 1px solid #fff;
  font-size: 16.64px;
}

.foot_tt_note {
  font-size: 14.59px;
}

/* --------------------------- foot nav */
.foot_nav {
  position: relative;
  width: 645px;
  padding: 85px 0 0 25px;
}

.foot_nav ul {
  border-bottom: 1px solid #ffffff;
  padding: 1.4em 0 1.4em 0.5em;
  font-size: 14.63px;
  display: grid;
  grid-template-columns: 180px 180px auto;
  gap: 0.8em 1em;
}

.foot_nav ul:nth-of-type(1) {
  border-top: 1px solid #ffffff;
}

.foot_nav ul li {
  position: relative;
  padding: 0 0 0 1.2em;
}

.foot_nav ul li::before {
  content: "";
  display: block;
  width: 0.3em;
  height: 0.3em;
  background-color: #ffdfa3;
  border-radius: 100px;
  position: absolute;
  top: 0.7em;
  left: 0;
}

.foot_nav ul:nth-of-type(1) li:nth-of-type(5),
.foot_nav ul:nth-of-type(1) li:nth-of-type(7) {
  left: 0;
  grid-column: 2 / 4;
}

.foot_nav ul:nth-of-type(2) li:last-child {
  /* grid-column: 2 / 4; */
}

.foot_nav ul:nth-of-type(3) li:nth-of-type(1),
.foot_nav ul:nth-of-type(3) li:nth-of-type(3) {
  grid-column: 1 / 3;
}

.foot_nav a {
  display: inline-block;
  color: #fff;
}

/* --------------------------- foot_humanity */
.foot_humanity {
  width: 70px;
  right: 160px;
  bottom: 27px;
  position: absolute;
  z-index: 3;
}

.foot_humanity img {
  aspect-ratio: 70 / 60;
}

/* --------------------------- copyright */
.foot_copyright {
  position: relative;
  z-index: 3;
  text-align: center;
  font-size: 15.08px;
}

/* --------------------------- pagetop */
.pagetop {
  display: none;
  overflow: hidden;
  position: fixed;
  bottom: 40px;
  right: 64px;
  z-index: 9999;
  cursor: pointer;
}

.pagetop img {
  width: 90px;
}

/*
  low-common-design (low only)
========================================================================== */
.pc-contents {
  margin: 60px auto 180px auto;
  width: 1200px;
}

.left-contents {
  width: 280px;
  float: left;
}

.right-contents {
  width: 800px;
  float: right;
}

.mainPhoto {
  width: 100%;
}

/*
  05. menu
========================================================================== */
.sidemenu {
  margin-top: 20px;
}

.sidemenu .ttl {
  width: 136px;
}

.sidemenu ul {
  margin-top: 25px;
  border-top: 1px solid #2f271b;
}

.sidemenu ul li {
  border-bottom: 1px solid #2f271b;
}

.sidemenu ul li a {
  padding: 18px 0 15px 12px;
  display: block;
  padding-left: 12px;
  color: #2e2e2e;
  font-size: 16.5px;
  line-height: 1.4;
  letter-spacing: .06em;
  background: url('../images/common/smn_ar.png') right 8px center no-repeat;
  background-size: 6.5px auto;
}

.sidebanner {
  margin: 65px auto 0 auto;
  width: 270px;
}

.sidebanner ul li + li {
  margin-top: 30px;
}

/*
  06. reservebanner (low only)
========================================================================== */
.counseling {
  margin-top: 80px;
}

.counseling .banner {
  margin-top: 20px;
  padding: 28px 10px 28px 29px;
  background: url('../images/common/lowinfo_bg.jpg') right bottom no-repeat;
  background-size: cover;
}

.counseling .banner .inner {
  padding-bottom: 29px;
  box-sizing: border-box;
  border: 2px solid #fff;
}

.counseling .banner .inner .logo {
  margin-top: 28px;
  margin-left: 95px;
  width: 225px;
}

.counseling .banner .inner .station {
  margin-top: 11px;
  margin-left: 25px;
  padding: 7px 0 4px 0;
  width: 360px;
  text-align: center;
  position: relative;
}

.counseling .banner .inner .station span {
  color: #fff;
  font-size: 16px;
  line-height: 1;
  position: relative;
  z-index: 2;
}

.counseling .banner .inner .station span i {
  font-size: 20px;
}

.counseling .banner .inner .station::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(116, 61, 38, .6);
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.counseling .banner .inner .tel {
  margin-top: 13px;
  margin-left: 91px;
  display: flex;
  align-items: center;
}

.counseling .banner .inner .tel i {
  margin-right: 12px;
  width: 26px;
}

.counseling .banner .inner .tel i img {
  display: block;
}

.counseling .banner .inner .tel span {
  color: #fff;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .16em;
}

.counseling .banner .inner .btn {
  margin-top: 15px;
  margin-left: 25px;
  width: 360px;
  display: flex;
  justify-content: space-between;
  gap: 0 12px;
}

.counseling .banner .inner .time {
  margin-top: 17px;
  margin-left: 47px;
  color: #fff;
  font-size: 16px;
  line-height: 1.56;
}

.counseling .banner .inner .hosoku {
  margin-top: 14px;
  margin-left: 56px;
  display: flex;
  flex-direction: column;
  gap: 0 1em;
  color: #fff;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: .02em;
}

/*
  09. multi-class
========================================================================== */
/* clearfix */
.cf::after {
  display: block;
  content: '';
  clear: both;
}

.clear {
  clear: both;
}

/* fade */
.fade {
  transition: .3s ease-in-out;
}

.fade:hover {
  opacity: .5;
}

/* link */
.p-link {
  color: var(--link-color);
  text-decoration: underline;
  margin: 0 1px;
  transition: .3s ease-in-out;
}

.p-link:hover {
  opacity: .5;
}

/* font */
.gothic {
  font-family: 'San Fransisco', 'Helvetica', 'Arial', 'Yu Gothic Medium', '游ゴシック Medium', 'YuGothic', '游ゴシック体', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

.mincho {
  font-family: 'Times New Roman', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
}

.noto_sans {
  font-family: 'Noto Sans JP', sans-serif;
}

.noto_serif {
  font-family: 'Noto Serif JP', serif;
}

/* テキスト */
.bold,
.bold * {
  font-weight: bold;
}

.txt130 {
  font-size: 130%;
}

.txt120 {
  font-size: 120%;
}

.txt110 {
  font-size: 110%;
}

.txt90 {
  font-size: 90%;
}

.txt80 {
  font-size: 80%;
}

.or {
  color: #fc9b2a;
}

.re {
  color: #FF373A;
}

i.fas,
i.far,
i.fa {
  margin: 0 5px;
}

.nowrap {
  white-space: nowrap !important;
}

.underline {
  text-decoration: underline;
}

/* 画像 */
.img-border {
  box-sizing: border-box;
  padding: 4px;
  max-width: 100%;
  border: 1px solid #ccc;
  background: #fff;
}

.img-right {
  float: right;
  margin: 0 0 10px 15px;
  max-width: 300px;
}

.img-left {
  float: left;
  margin: 0 15px 10px 0;
  max-width: 300px;
}

/* object-fit */
.object-fit-img {
  object-fit: contain;
  font-family: 'object-fit: contain;';
}

/* flex */
.flex {
  display: flex;
}

.flex img {
  max-width: 100%;
  height: auto;
}

.fdC {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.between {
  justify-content: space-between;
}

.justC {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.align-base {
  align-items: baseline;
}

.fx_grow_1 {
  flex: 1 0 auto;
}

/* align */
.center {
  text-align: center;
}

.alignR {
  text-align: right !important;
}

.alignL {
  text-align: left !important;
}

.vAlignM {
  vertical-align: middle !important;
}

.vAlignT {
  vertical-align: top !important;
}

.vAlignB {
  vertical-align: bottom !important;
}

/* display */
.dispB {
  display: block;
}

.dispI {
  display: inline;
}

.dispFr {
  display: flow-root;
}

/* 余白 */
.p10 {
  padding: 10px;
}

.pt10 {
  padding-top: 10px;
}

.pr10 {
  padding-right: 10px;
}

.pl10 {
  padding-left: 10px;
}

.pb10 {
  padding-bottom: 10px;
}

.mb5 {
  margin-bottom: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb50 {
  margin-bottom: 50px;
}

.mb60 {
  margin-bottom: 60px;
}

.mt5 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mr5 {
  margin-right: 5px;
}

.mr10 {
  margin-right: 10px;
}

.mr15 {
  margin-right: 15px;
}

.mr20 {
  margin-right: 20px;
}

.mr30 {
  margin-right: 30px;
}

.ml5 {
  margin-left: 5px;
}

.ml10 {
  margin-left: 10px;
}

.ml15 {
  margin-left: 15px;
}

.ml20 {
  margin-left: 20px;
}

.ml30 {
  margin-left: 30px;
}

/* 非表示 */
.pc-none {
  display: none !important;
}
/* 表のCSS */
.case-table {
  width: 100%; /* デフォルトの幅を100%に設定 */
  border-collapse: collapse;
  font-family: "Noto Sans JP", sans-serif; /* フォントを設定 */
  table-layout: auto; /* テーブルレイアウトを自動に設定 */
}

.case-table th, .case-table td {
  padding: 12px;
  border: 1px solid #ddd;
  text-align: left;
}

.case-table th {
  background-color: #887D71;
  font-weight: normal; /* thの文字の太さを通常に設定 */
  color: white; /* thの文字色を白に設定 */
}

.case-table td {
  background-color: #fff;
  color: #666666; /* tdの文字色を#666666に設定 */
}

.case-table th.gold, .case-table td.gold {
  background-color: #887D71; /* 背景色をthと同じに設定 */
  color: white; /* フォント色を白に設定 */
}

.case-table th.narrow, .case-table td.narrow {
  background-color: #887D71; /* 背景色をピンクに設定 */
  color: white; /* フォント色を白に設定 */
}

/* デスクトップ版のスタイル */
@media (min-width: 1024px) {
  .case-table {
      margin-left: auto; /* 表を中央に配置する */
      margin-right: auto; /* 表を中央に配置する */
  }

  .case-table th.narrow, .case-table td.narrow {
      width: auto; /* デスクトップ版で幅を自動調整 */
      background-color: #887D71; /* 背景色をピンクに設定 */
  }

  .case-table th {
      width: auto; /* デスクトップ版で幅を自動調整 */
  }
}
/* トグルボタン */
.chat-toggle-button {
  position: fixed;
  bottom: 20px;
  right: 150px;
  background: #977356;
  color: #fff;
  padding: 12px 18px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

/* チャットウィンドウ */
.chat-box {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 600px;
  max-height: 80%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.chat-box.active {
  opacity: 1;
  pointer-events: auto;
  animation: fadeInUpZoom 0.5s ease forwards;
  height: 100vh;
  z-index: 20;
}

@keyframes fadeInUpZoom {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-header {
  background: linear-gradient(90deg, #977356, #b38b6d);
  color: #fff;
  padding: 12px 16px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.chat-header button {
  background: transparent;
  color: #fff;
  font-size: 18px;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background 0.3s;
}

.chat-header button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  font-size: 14px;
  background: #FBF6F1;
  scroll-behavior: smooth;
}

.chat-input {
  display: flex;
  border-top: 1px solid #ccc;
}

.chat-input input {
  flex: 1;
  border: none;
  padding: 10px;
  font-size: 16px;
  border-radius: 73px;
  border: 1px solid #ccc;
  margin: 5px;
}

.chat-input button {
  border: none;
  background: linear-gradient(90deg, #977356, #b38b6d);
  color: white;
  padding: 10px 15px;
  cursor: pointer;
}

.bot-message {
  background: #FBF6F1;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  animation: fadeInUp 0.3s ease;
  color: #977356;
}

.user-message {
  background: #977356;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  text-align: right;
  color: #ffffff;
  animation: fadeInUp 0.3s ease;
}

.chat-body a {
  color: #977356;
  font-weight: bold;
  text-decoration: underline;
  transition: all 0.3s ease;
}

.chat-body a:hover {
  color: #7a5d3e;
  background-color: #efe6dd;
  padding: 2px 4px;
  border-radius: 4px;
  text-decoration: none;
}

.chat-body table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.chat-body th {
  background-color: #977356;
  color: white;
  padding: 8px;
  border: 1px solid #ccc;
  text-align: center;
}

.chat-body td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: center;
}

.typing-indicator::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  background: #977356;
  border-radius: 50%;
  animation: blink 1s infinite;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blink {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 1; }
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .chat-box {
    width: 100%;
    max-height: 80vh;
    left: 0;
    bottom: 10px;
    border-radius: 8px;
  }
  .chat-toggle-button {
    bottom: 70px;
    right: 5px;
    padding: 10px 18px;
    z-index: 0;
  }
  .bot-message img {
    width: 100%;
  }
  .chat-box.active {
    bottom: 64px;
  }
  .chat-input {
    z-index: 500;
  }
}