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

/* ====== CSS ====== */

/*-----------------------------------
ボトックスの適応表
------------------------------------*/
/* ベース */
.table-menu-section { margin-top: 20px; }

/* スクロール枠 */
.menu-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #E8DFD1;
}

/* テーブル */
.all-menu-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  min-width: 720px; /* スマホで横スクロールを発生させる基準幅 */
}
.all-menu-table caption {
  text-align: left;
  font-weight: 600;
  padding: .75rem 1rem;
  color: #555;
}
.all-menu-table th,
.all-menu-table td {
  padding: .75rem 1rem;
/*border-bottom: 1px solid #E8DFD1;*/
  border-bottom: 1px solid #C0B495;
  background: #fff;
  vertical-align: top;
  text-wrap: pretty;
}


/* ヘッダー */
.all-menu-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
	background-color: #8A7C63;
	color: #FFFFFF;
	border: solid 1px #FFFFFF;
	text-align: center;
  /*background: #F4F2ED;*/
  /*border-bottom: 1px solid #E8DFD1;*/
  font-weight: 700;
}

.all-menu-table tbody tr.menurow-bk{
	background-color: #F8F1E0;
}

/* ---- デスクトップ（既定）：スクロールなし／固定なし ---- */
.menu-table-scroll { overflow-x: visible; }
.all-menu-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.all-menu-table thead th { position: static; color: #fff;
  letter-spacing: .02em;}              /* ヘッダー固定オフ */
.all-menu-table th:first-child,
.all-menu-table td:first-child {
	position: static;
	background-color: #F4F1E9;
	/*background-color: #FAF9F6;*/
}        /* 左列固定オフ */
/* 最後の列（目的・改善する悩み）に薄い背景色 */
/* 左上の空セルは背景ナシ＆枠線ナシ */
.all-menu-table thead th:first-child {
  background: transparent !important;
  border: none !important;
  box-shadow: none;     /* 念のため */
}
/* 既定＝デスクトップでは外枠なし */
.menu-table-scroll { border: none; }


/* ---- スマホだけ：左列固定＋横スクロール ---- */
@media (max-width: 768px) {
  .menu-table-scroll {
    overflow-x: auto;                 /* 横スクロールを出す */
    -webkit-overflow-scrolling: touch;
    border: 1px solid #E8DFD1;
    border-radius: 12px;
  }
  .all-menu-table {
    width: max-content;               /* コンテンツ幅のまま → はみ出してスクロール */
    min-width: 720px;                 /* 列数に応じて調整 */
    font-size: 14px;
    border-collapse: separate;
    border-spacing: 0;
  } /* 左列だけ固定（thでもtdでもOK） */
  .all-menu-table th:first-child,
  .all-menu-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;                       /* 交差部の重なり解消 */
    background: #fff;                 /* 下地を白で塗る */
    max-width: 260px;                 /* 任意：長文の折返し制御 */
  }
  /* 左列が奇数行でグレー行のときの背景も合わせる場合 */
  .all-menu-table tbody tr:nth-child(odd) td:first-child,
  .all-menu-table tbody tr:nth-child(odd) th:first-child {
    background: #F4F2ED;
  }
}


/*-----------------------------------
ボトックスの効果と特徴の表
------------------------------------*/
.botox-kouka-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 15px;
  background-color: #fff;
}

.botox-kouka-table th,
.botox-kouka-table td {
  border: 1px solid #C0B495;
  padding: 12px 15px;
  text-align: left;
  vertical-align: top;
}

.botox-kouka-table thead th {
	background-color: #D9D2BE;
	padding: 8px 8px 5px 10px;
  /*background-color: #f9f8f0;*/ /* 見出し背景をやわらかい色に */
  font-weight: bold;
	color: #5F5327;
}

.botox-kouka-table tbody tr:nth-child(even) {
  background-color: #fafafa; /* 偶数行を薄グレーで見やすく */
}

.botox-kouka-table tbody tr:hover {
  background-color: #f5f5f5; /* ホバーで少し濃くして視認性アップ */
}

.botox-kouka-table td {
  color: #555;
  line-height: 1.6;
}
.kouka-tag{
	font-weight: bold;
}

.katuyou-tag{
	color: #6B123B;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 5px;
	font-size: 18px;
}


@media (max-width: 768px) {
	.botox-kouka-table th,
.botox-kouka-table td {
  padding: 10px;
}
}

.merit-b_title{
	text-align: center;
	font-size: 20px;
	color: #800040;
	padding-bottom: 18px;
	font-weight: bold;
}

.merit-b{
	background-color: #FBEFEF;
	font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
	padding: 25px;
}
.merit-b ul {
	max-width: 750px;
	margin: 0 auto;
  display: flex;
  flex-wrap: wrap;    /* 折り返し可能に */
 /* margin: 0;*/
  padding: 0;
  list-style: none;   /* デフォルトの●を消す */
}

.merit-b ul li {
  width: 50%;         /* 2列 */
  box-sizing: border-box;
  padding: 6px 12px;
  display: flex;       /* アイコンとテキスト横並び */
  align-items: center; /* 縦位置を揃える */
	font-size: 16.5px;
}

.merit-b ul li i {
  color: #B5A119;      /* アイコンの色（例：ピンク） */
  margin-right: 8px;   /* アイコンと文字の間隔 */
  font-size: 1.1em;
}
@media screen and (max-width: 768px) {
  .merit-b ul li {
    width: 100%;   /* スマホでは1列 */
  }
}