@charset "UTF-8";
/*-----------------------

         変数

-----------------------*/
:root {
  /* setting.txt のブランドカラー */
  --baseColor: #3a352d;   /* 文字色（濃い茶） */
  --mainColor: #544a24;   /* メインカラー（フッター等・濃いオリーブ） */
  --subColor: #e7dfd2;    /* サブカラー（背景のクリーム） */
  --accentColor: transparent; /* アクセントカラー：なし */
  --colorW: #fff;
  /* 50%トーン＝白と50:50で混色したトーン */
  --base50Color: #9d9a96;
  --main50Color: #aaa592;
  --sub50Color: #f3efe9;
  --accent50Color: transparent;
  /* 10%トーン＝白と10:90で混色したトーン */
  --base10Color: #ebebea;
  --main10Color: #eeede9;
  --sub10Color: #fdfcfb;
  --accent10Color: transparent;
}
/*-----------------------

         COMMON

-----------------------*/
/* ページ全体の背景をクリーム（subColor）に */
html,
body {
  background: var(--subColor);
}
body {
  width: 100%;
  color: var(--baseColor);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  /* setting.txt 指定フォント：英数字＝EB Garamond／日本語＝Shippori Mincho B1
     （英数字を先に置き、日本語グリフは Shippori Mincho B1 にフォールバック）
     ＝サイト全体（ヘッダー・本文・フッター）がこの1指定を継承する */
  font-family: "EB Garamond", "Shippori Mincho B1", serif;
}

/* いいね（ハート・件数）の下線とリンク色を消す */
.body-news a[data-event="good"],
.body-news a[data-event="good-list"] {
  text-decoration: none !important;
  color: inherit;
}

/*====================================================================
  ライブ視聴（Zoom Web SDK / /live/join）フッタ崩れ対策
  --------------------------------------------------------------------
  Zoom Meeting SDK は #zmmtg-root 配下にツールバーを
    <footer class="footer main-footer">
  として描画する。これがサイト共通クラス main-footer を持つため、
  配信側 style.css の
    footer.main-footer { position: relative; padding: 5.5rem 0 3rem;
                         margin-top: clamp(9rem … 18rem); }
  （詳細度 0,1,1）が Zoom 既定の「画面下 position:fixed」に勝ってしまい、
  フッタが通常フローへ落ちてヘッダ直下（画面上部）に出る。
  overwrite.css は最後に読まれるので #zmmtg-root にスコープ（詳細度 1,1,1）
  して Zoom 既定の下部固定ツールバーへ戻す。
  ※ 余白は Zoom 内側(.footer__inner)が持つため footer 自体は 0 にする。
==================================================================== */
#zmmtg-root footer.main-footer {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*=====================================================================
  デザインカンプ反映（共通：ヘッダー／メインビジュアル／フッター／下層タイトル）
  ・背景＝subColor（クリーム）／フッター＝mainColor（濃いオリーブ）
  ・フォントは body で全体指定済み（ヘッダー・フッターも継承）
=====================================================================*/

/*-----------------------  ヘッダー  -----------------------*/
/* ロゴと右側アクションを両端に配置 */
header.top .hdr-inner.flex {
  justify-content: space-between;
  align-items: center;
}
/* ロゴ（SHIN＋ただいま、天川）は高さ基準でサイズ調整 */
header .site-logo img,
header .drawer-nav p.logo img {
  width: auto;
  height: clamp(4rem, 3.2vw, 6rem);
  max-width: min(60vw, 66rem);
}
/* 右側アクション：お問い合わせ／ショップ／ログイン */
header .hdr-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(1.6rem, 1.8vw, 3.4rem);
  overflow: visible;
}
header .hdr-actions .hdr-link a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--baseColor);
  font-size: clamp(1.3rem, 1vw, 1.6rem);
  font-weight: 500;
  white-space: nowrap;
}
header .hdr-actions .hdr-link img {
  width: auto;          /* 元画像の縦横比を保持（間延び防止） */
  height: 2.4rem;
  border-radius: 0;
  margin: 0;
}
/* login.html：可視ヘッダーのアカウント（ドロップダウン）ボタン
   ※ login.css の SP 用 header .mypage{border-bottom;margin-bottom:3rem}（本来はドロワー用）が
     効いて「顔アイコン下の下線」＋位置ズレになるため、ヘッダー側だけ打ち消す */
header.top .hdr-actions .linkG {
  display: flex;
  align-items: center;
}
header.top .hdr-actions .mypage.loginBtn {
  border-bottom: none;
  margin-bottom: 0;
}
/* MENUボタン（英字はEB Garamondで字間を広く） */
header.top .drawer-hamburger .text {
  font-family: "EB Garamond", serif;
  letter-spacing: 0.5em;
  text-indent: 0.25em; /* 字間の余白ぶん（片側）を補正して線と中央を揃える */
  text-transform: uppercase;
  color: var(--baseColor);
}
/* MENUアイコン：カンプ準拠で細い1本線に（中央のバーのみ・MENU文字幅に合わせる） */
header.top .drawer-hamburger-icon {
  background-color: var(--baseColor);
  height: 1px;
  /* MENU文字幅（≒font-size×5）に追従させる */
  width: clamp(5.7rem, 4.75rem + 2.64vw, 9.8rem);
}
header.top .drawer-hamburger-icon::before,
header.top .drawer-hamburger-icon::after {
  display: none;
}
/* ドロワー展開時は細い✕（クローズ）に。
   ※閉じ時の線幅が広いため、✕はコンパクトな固定幅にして MENU 文字と重ならないようにする */
.drawer-open header.top .drawer-hamburger-icon {
  background-color: transparent;
}
.drawer-open header.top .drawer-hamburger-icon::before,
.drawer-open header.top .drawer-hamburger-icon::after {
  display: block;
  height: 1px;
  width: 2.8rem;
  left: 50%;
  margin-left: -1.4rem; /* アイコン中央に配置 */
  background-color: var(--baseColor);
}
/* ドロワーメニューの背景を subColor（クリーム）に */
.drawer--right .drawer-nav,
.drawer--right.drawer-open .drawer-nav {
  background: var(--subColor);
}

/* ===== ドロワーメニューの初期チラつき（FOUC）防止 =====
   drawer プラグインは初期化時に祖先へ .drawer コンテナ（＋方向クラス）を付与し、
   その時点で .drawer-nav が画面外へ退避する。初期化までは position:fixed の
   .drawer-nav が画面左上に一瞬見えてしまうため、.drawer 付与前は非表示にしておく。
   MENUボタン（.drawer-hamburger）も同様で、右寄せは .drawer--right 付与後に効くため
   初期化前は画面左端に一瞬出る。あわせて .drawer 付与前は非表示にする。
   ※方向（左右）に依存しないよう「祖先に .drawer が付いたら表示」で判定する。 */
.drawer-nav,
.drawer-hamburger {
  display: none;
}
.drawer .drawer-nav,
.drawer .drawer-hamburger {
  display: block;
}

/*-----------------------  メインビジュアル  -----------------------*/
.content .mv {
  position: relative;
  padding: clamp(4rem, 6vw, 9rem) 2rem 0;
  text-align: center;
}
.content .mv .mv-catch {
  position: relative;
  display: inline-block;
  padding: clamp(4rem, 6vw, 8rem) 0;
}
/* 透かしロゴ（タイトル背面・やや上寄せ） */
.content .mv .mv-mark {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(16rem, 21vw, 28rem);
  height: auto;
  z-index: 0;
  pointer-events: none;
}
/* タイトル／サブタイトル共通（透かしより前面・字間広め・中央寄せ）
   ※ text-indent は letter-spacing ぶんの右ずれ補正 */
.content .mv .mv-title,
.content .mv .mv-sub {
  position: relative;
  z-index: 1;
  text-align: center;
  letter-spacing: 1.3em;
  text-indent: 1.3em;
}
/* タイトル（Shippori Mincho B1） */
.content .mv .mv-title {
  margin: 0;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  color: var(--baseColor);
  font-size: clamp(2.3rem, 3.1vw, 4.6rem);
  line-height: 1.3;
}
/* サブタイトル（EB Garamond・淡色） */
.content .mv .mv-sub {
  margin: 1rem 0 0;
  font-family: "EB Garamond", serif;
  color: var(--base50Color);
  font-size: clamp(1.1rem, 1.3vw, 1.8rem);
}
/* タイトルとコンテンツの間隔：PC
   会員トップ（page/top）は直下にダッシュボード（.mtop）が入るため、
   カンプに合わせて控えめの間隔にする（MVのみだった従来の200pxから変更）。 */
.content .mv-content {
  margin-top: 9rem;
}

/*-----------------------  フッター  -----------------------*/
footer.main-footer {
  background: var(--mainColor);
  color: var(--colorW);
  /* コンテンツを下寄せするため上パディングを大きめに取る（カンプ準拠） */
  padding: clamp(12rem, 17vw, 25rem) 0 clamp(3rem, 3.4vw, 4.5rem);
  margin-top: clamp(9rem, 12vw, 18rem);
}
/* コンテナ標準の下マージンを打ち消して最下部まで詰める */
footer.main-footer .container {
  margin-bottom: 0;
}
/* フッターの内容幅をヘッダーに揃える。
   ヘッダーは style.css の header{padding:2.5rem 14rem 1.5rem 3.5rem} で画面全幅、
   フッターは .container{width:1280px; margin:0 auto} で中央寄せのため、
   1280pxを超えるワイド画面だけロゴの左端がヘッダーとずれる。
   （1280px以下は sp.css で .container{width:100%} になるためズレない） */
@media screen and (min-width: 1281px) {
  footer.main-footer .container {
    width: 100%;
    padding-left: 3.5rem;  /* header の padding-left と同値 */
    padding-right: 3.5rem;
  }
}
/* ロゴ（上段左）／ナビ（上段右・ロゴと同じ高さ）／コピーライト（下段左） */
footer.main-footer .ftr-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "logo nav"
    "copy copy";
  align-items: end;
  column-gap: 3rem;
  row-gap: clamp(1.6rem, 2vw, 2.8rem);
}
/* ロゴ（大きめに） */
footer.main-footer .ftr-logo {
  grid-area: logo;
  margin: 0;
  padding: 0;
  max-width: none;
}
footer.main-footer .ftr-logo img {
  width: auto;
  height: clamp(4rem, 5vw, 6.4rem);
  max-width: 100%;
}
/* フッターナビ（右・区切りは「｜」） */
footer.main-footer .ftr-navi {
  grid-area: nav;
}
footer.main-footer .ftr-navi ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
}
footer.main-footer .ftr-navi li {
  display: inline-flex;
  align-items: center;
}
footer.main-footer .ftr-navi li:not(:last-child)::after {
  content: "|";
  margin: 0 2rem;
  color: rgba(231, 223, 210, 0.5); /* subColor の半透明 */
}
footer.main-footer .ftr-navi a {
  color: var(--subColor);
  font-size: clamp(1.3rem, 1vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* コピーライト（下段・文字間を広く／英語含む）
   ※ style.css の footer.main-footer p.copy の余白を打ち消すため p.copy で指定 */
footer.main-footer p.copy {
  grid-area: copy;
  margin: 0;
  padding: 0;
}
footer.main-footer p.copy small,
footer.main-footer .copylight {
  color: var(--subColor) !important;
  font-size: clamp(1.1rem, 1vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.2em;
}
/* SP専用のお問い合わせボタンはPCでは非表示 */
footer.main-footer .ftr-contact {
  display: none;
}

/*-----------------------  下層ページ タイトル  -----------------------*/
/* 濃い帯をやめ、クリーム背景に透かしロゴ＋中央タイトル */
.content-header {
  background: transparent;
  /* タイトル〜コンテンツの間隔（下の余白 + この margin） */
  margin-bottom: 12rem;
  /* タイトルを少し上へ（上パディングを控えめに） */
  padding: clamp(4rem, 6vw, 9rem) 5vw clamp(2rem, 3vw, 4rem);
  position: relative;
  overflow: hidden;
}
.content-header::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 上下中央に配置して見切れを防ぐ */
  width: clamp(12rem, 12vw, 16rem); /* タイトル帯に収まるよう小さめに */
  aspect-ratio: 1 / 0.92;
  background: url(../img/sub-mark.webp) center / contain no-repeat;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}
.page-header {
  position: relative;
  z-index: 1;
  color: var(--baseColor);
  text-align: center;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-size: clamp(2.2rem, 1.5rem + 1.2vw, 4rem);
}

/*-----------------------  表組み（特商法・利用規約など）  -----------------------*/
/* Bootstrap 既定の罫線 #ddd はクリーム背景（subColor）と明度が近く溶けてしまうため、
   mainColor を薄めたオリーブ系の罫線に置き換えてコントラストを上げる */
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
  border-color: rgba(84, 74, 36, 0.35); /* var(--mainColor) の 35% */
}
/* 見出しセル（項目名の列）の背景。既定はいずれも白ベースのグレーで、
   クリーム背景（subColor）に対して青白く浮くため subColor 寄りの暖色トーンに揃える。
   ・フォーム系（form.css）＝ var(--main10Color) #eeede9
   ・特商法ページ＝CMS本文にインラインで background-color:#f5f5f5
   　インライン指定に勝つ必要があるため、こちらのみ !important */
table.entry > tbody > tr > th,
table.entry table.product > tbody > tr > th {
  background: #ded6c8; /* mainColor 6% + subColor 94% */
}
table.commerce > tbody > tr > th {
  background-color: #ded6c8 !important;
}

/*-----------------------  ログイン画面  -----------------------*/
/* メッセージ枠（「ログアウトしました。」等）の横幅。
   タイトル・入力欄・ログインボタンは配信側CSSで max-width:400px の中央寄せだが、
   login.css の .login-page #messages{max-width:none} で枠だけ全幅になり横幅が揃わない。
   同じ400px中央寄せに戻す。 */
.login-page #messages {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/*-----------------------  .box-footer（申込等のボタン下枠）  -----------------------*/
/* AdminLTE 既定の box-footer は上部に白い罫線（border-top:1px #f4f4f4）＋白背景を持ち、
   クリーム背景（subColor）上で白い線／白帯として浮くため打ち消す。 */
.box-footer {
  border-top: none;
  background-color: transparent;
}

/*-----------------------  お知らせ一覧 カテゴリタブ（.catArea）  -----------------------*/
/* 素のテキストリンクを mainColor の角丸（ピル）ボタンに。選択中(.active)は塗り。
   ※ mayim 等と同じ .catArea 方式。body-info-list に限定。 */
.body-info-list .catArea {
  margin-bottom: clamp(2.4rem, 3vw, 3.6rem);
}
.body-info-list .catArea ul.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.body-info-list .catArea li a {
  display: inline-block;
  text-decoration: none;
  color: var(--mainColor);
  background: transparent;
  border: 1px solid var(--mainColor);
  border-radius: 100px;
  padding: 0.5em 1.5em;
  font-family: "Shippori Mincho B1", serif;
  font-size: clamp(1.3rem, 1.4vw, 1.5rem);
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}
.body-info-list .catArea li a:hover,
.body-info-list .catArea li a.active {
  background: var(--mainColor);
  color: var(--subColor);
  border-color: var(--mainColor);
}
@media screen and (max-width: 559px) {
  .body-info-list .catArea ul.flex {
    gap: 0.7rem;
  }
  .body-info-list .catArea li a {
    font-size: 1.3rem;
    padding: 0.4em 1.1em;
  }
}

/*=====================================================================
  AdminLTE 共通コンポーネントのブランド調整（マイページ / フォーム 等 全体）
  ・既定の「白箱・グレー罫線・青アクセント」がクリーム背景で浮くため、
    箱=カード地（#fbf9f5）／罫線=淡オリーブ（baseColor 16%）／
    アクセント=mainColor に寄せる。色・罫線・背景のみ（レイアウトは不変）。
  ・AdminLTE専用クラスへの指定なので、これらを使う画面全体に共通で効く。
    他テナントは overwrite.css 未読込のため影響なし。
  ・タイムラインのノードアイコン色（入会=青/参加=赤 等）は意味を持つため据え置き。
=====================================================================*/

/* ---- box / panel ---- */
/* クリームより“ほんの少しだけ”明るい暖色地＋柔らかい影＋角丸で、
   白くならずに浮くカード感を出す。余白も広めに。 */
.box {
  background: #ece5d9;
  border: 1px solid rgba(84, 74, 36, 0.08);
  border-top: 1px solid rgba(84, 74, 36, 0.08); /* 既定の3px色帯を細い罫線に */
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(84, 74, 36, 0.07);
  margin-bottom: clamp(2rem, 3vw, 3rem);
}
/* 中身の余白を広めに（カードらしいゆとり） */
.box-body {
  padding: clamp(1.6rem, 2vw, 2.4rem);
}
/* 色付きbox（box-success の緑 等）の上罫線を打ち消し */
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger,
.box.box-default,
.box.box-solid {
  border-top-color: rgba(84, 74, 36, 0.08);
}
.box-header.with-border {
  border-bottom: 1px solid rgba(84, 74, 36, 0.12);
}

/* ---- テーブル（会員履歴/購入履歴 等）の行罫線・ホバー ---- */
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
  border-color: rgba(84, 74, 36, 0.14); /* 既定の #f4f4f4 系をクリームに馴染む淡オリーブへ */
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: rgba(84, 74, 36, 0.04);
}

/* ---- タブ（.nav-tabs-custom）：お知らせ一覧の catArea と同じ角丸pillに統一 ---- */
.nav-tabs-custom {
  background: transparent;
  box-shadow: none;
}
.nav-tabs-custom .nav-tabs {
  border-bottom: none;
  margin-bottom: clamp(1.4rem, 2.2vw, 2.2rem);
}
.nav-tabs-custom .nav-tabs > li {
  border-top: none;      /* 既定の3px上帯を消す */
  margin-bottom: 0;
  margin-right: 0.5rem;
  background: transparent !important; /* サイト標準の淡い箱（li側）を消す */
}
/* タブ行コンテナの地色も透明化（保険） */
.nav-tabs-custom .tab-area,
.nav-tabs-custom .tab-cust {
  background: transparent !important;
}
/* 非アクティブ：mainColor のアウトラインpill（未選択が一目で分かる／catArea と同一） */
.nav-tabs-custom .nav-tabs > li > a {
  color: var(--mainColor);
  font-family: "Shippori Mincho B1", serif;
  letter-spacing: 0.06em;
  background: transparent !important;
  border: 1px solid var(--mainColor) !important;
  border-radius: 100px !important;
  padding: 0.55em 1.6em;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
/* ホバー／アクティブ：mainColor 塗り＋クリーム文字（catArea・mt-btn--fill と統一） */
.nav-tabs-custom .nav-tabs > li > a:hover,
.nav-tabs-custom .nav-tabs > li.active > a,
.nav-tabs-custom .nav-tabs > li.active > a:hover,
.nav-tabs-custom .nav-tabs > li.active > a:focus {
  background: var(--mainColor) !important;
  color: var(--subColor) !important;
  border-color: var(--mainColor) !important;
  box-shadow: 0 3px 12px rgba(84, 74, 36, 0.12);
}
.nav-tabs-custom > .tab-content {
  padding: clamp(0.4rem, 1vw, 1rem) 0.2rem;
}

/* ---- タイムライン（.timeline） ---- */
/* 縦線 */
.timeline:before {
  background: rgba(84, 74, 36, 0.16);
}
/* 年ラベル（bg-blue/red/yellow を mainColor に統一） */
.timeline > li.time-label > span {
  background-color: var(--mainColor) !important;
  color: var(--subColor);
  border-radius: 3px;
}
/* 各項目の箱（.box と同じカード感） */
.timeline > li > .timeline-item {
  background: #ece5d9;
  border: 1px solid rgba(84, 74, 36, 0.08);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(84, 74, 36, 0.06);
  margin-bottom: 1.4rem;
}
.timeline > li > .timeline-item > .timeline-header {
  border-bottom: 1px solid rgba(84, 74, 36, 0.12);
  color: var(--baseColor);
}
.timeline > li > .timeline-item > .time {
  color: var(--base50Color);
}
/* 吹き出しの三角をカード地色に合わせる */
.timeline > li > .timeline-item:before {
  border-right-color: #ece5d9;
}

/*=====================  タブレット以下（〜1024px）  =====================*/
@media screen and (max-width: 1024px) {
  /* ドロワーヘッダーのログインが account.css/login.css の header .mypage{width:100%}（〜1024px）で
     横いっぱいに広がりロゴにくっつく不具合を解消（ログイン時の .linkG と挙動を合わせる） */
  header .drawer-nav .hdr-inner .mypage.login {
    width: auto;
  }
}

/*=====================  スマホ（〜559px）  =====================*/
@media screen and (max-width: 559px) {
  /* ---- ヘッダー ---- */
  header.top .sp .hdr-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  header .site-logo img {
    /* SP は縦積みロゴ（アセット9・アスペクト約5.5:1） */
    width: clamp(18rem, 50vw, 24rem);
    height: auto;
    max-width: 24rem;
  }
  header.top .sp .hdr-actions {
    flex-direction: row;
    gap: 1.3rem;
  }
  header.top .sp .hdr-actions .hdr-link img {
    width: auto;
    height: 2.2rem;
  }
  /* login.html：アカウントのドロップダウン。
     sp.css の .mypage-list{left:6%} でアイコン左基準に展開し右へはみ出すため、
     アイコン右端基準（right:0）で左方向に開くよう上書き */
  header.top .hdr-actions .linkG .mypage-list {
    top: 3.8rem;
    left: auto;
    right: 0;
    min-width: 22rem;
  }
  /* ドロワーのログインの白枠を除去
     （sp.css の header .drawer-nav p.mypage{border:2px #fff} が、
       ドロワー背景を subColor にしたことで見えてしまうため） */
  header .drawer-nav p.mypage {
    border: none;
  }
  /* SP は MENU の字間・線幅を控えめにして見切れを防ぐ（線幅は文字幅に合わせる） */
  header.top .drawer-hamburger .text {
    letter-spacing: 0.2em;
    text-indent: 0.1em;
  }
  header.top .drawer-hamburger-icon {
    width: 4.4rem;
  }

  /* ---- メインビジュアル ---- */
  .content .mv-content {
    margin-top: 5rem; /* タイトルとコンテンツの間隔 SP（ダッシュボードに合わせて控えめに） */
  }
  /* SP は画面幅に収まるよう字間を抑える */
  .content .mv .mv-title,
  .content .mv .mv-sub {
    letter-spacing: 0.7em;
    text-indent: 0.7em;
  }

  /* ---- フッター ---- */
  footer.main-footer {
    padding: 0;
    margin-top: 5rem;
  }
  footer.main-footer .container {
    /* 下部は固定の「お問い合わせ」ボタンぶんの余白を確保 */
    padding: 8rem 8% 11rem;
    margin-bottom: 0;
  }
  footer.main-footer .ftr-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  /* 表示順：ナビ → ロゴ → コピーライト（カンプ準拠） */
  footer.main-footer .ftr-navi {
    order: 1;
  }
  footer.main-footer .ftr-logo {
    order: 2;
    margin-top: 3.5rem; /* メニューに寄せる（間隔を詰める） */
    /* SP は縦積みロゴ（アセット13）。幅は<p>側に持たせる（imgの循環max-width回避） */
    width: clamp(20rem, 55vw, 26rem);
    max-width: 100%;
  }
  footer.main-footer .copy {
    order: 3;
    margin-top: 2rem; /* ロゴ直下 */
  }
  /* メニューは詰めて縦並び（カンプ準拠） */
  footer.main-footer .ftr-navi ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
  footer.main-footer .ftr-navi li:not(:last-child)::after {
    display: none;
  }
  /* imgは<p>いっぱいに（縦横比保持・つぶれ防止）
     ※ sp.css の footer.main-footer p.logo img{max-width:40vw} に勝つよう詳細度を上げる */
  footer.main-footer p.logo.ftr-logo img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  /* お問い合わせ：画面下部に固定追従する全幅ボタン */
  footer.main-footer .ftr-contact.sp {
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 90;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    width: 100%;
    padding: 2.2rem;
    /* 透過して下のレイヤーを見せる */
    background: rgba(58, 53, 45, 0.8);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: var(--colorW);
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
  }
  footer.main-footer .ftr-contact.sp img {
    width: auto;
    height: 2.8rem;
    filter: brightness(0) invert(1); /* メールアイコンを白に */
  }

  /* ---- 下層ページ タイトル ---- */
  .content-header {
    margin-bottom: 7.5rem; /* タイトルとコンテンツの間隔 SP 75px */
    padding: 10vw 7vw 6vw;
  }
}

/*=====================================================================
  会員トップ（ログイン後ダッシュボード）
  ・トップページ本文 .col-lg-12.detail.fr-element.fr-view 内の .mtop に配置
  ・各コンテンツをダイジェスト表示（本日のライブ／お知らせ／新着アーカイブ／
    カウンセリング／カレンダー埋め込み）
  ・全ルールを .mtop 配下にスコープし、Bootstrap（.btn/.badge）や
    Froala（.fr-view a の下線）等サイト共通CSSとの衝突を回避。
    ボタン＝.mt-btn／バッジ＝.mt-badge に改名。
  ・カラーは :root のブランド変数を継承。カード地色/罫線のみ .mtop で追加定義。
=====================================================================*/
.mtop {
  --card: #fbf9f5;              /* カード地色（クリームより明るい） */
  --line: rgba(58, 53, 45, .16); /* 罫線（baseColor 16%） */
  max-width: 104rem;
  margin: 0 auto;
}
/* Vue（script_sukumane）マウント前のちらつき防止 */
.mtop[v-cloak] { display: none; }
.mtop * { box-sizing: border-box; }
.mtop img { max-width: 100%; display: block; }
/* Froala（.col-lg-12.detail.fr-element.fr-view a）の下線・色を打ち消す
   ※同等以上の詳細度で上書き（overwrite.css は最後に読まれる） */
.col-lg-12.detail.fr-element.fr-view .mtop a {
  text-decoration: none;
  color: inherit;
}
/* 上の a{color:inherit} が塗りボタン等の文字色より優先されるため、
   ボタン（a要素）の配色を同ラインの高詳細度で復元する */
.col-lg-12.detail.fr-element.fr-view .mtop a.mt-btn--fill { color: var(--subColor); }
.col-lg-12.detail.fr-element.fr-view .mtop a.mt-btn--fill:hover { color: var(--mainColor); }
.col-lg-12.detail.fr-element.fr-view .mtop a.mt-btn--line { color: var(--mainColor); }

/*-----------------------  セクション共通  -----------------------*/
.mtop .dsec { padding: clamp(3.5rem, 5vw, 5.5rem) 0; }
.mtop .dsec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1.8rem;
  margin-bottom: clamp(2.4rem, 3vw, 3.4rem);
  border-bottom: 1px solid var(--line);
}
.mtop .dsec-head .ttl .en {
  display: block;
  font-family: "EB Garamond", serif;
  color: var(--main50Color);
  letter-spacing: .35em;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  margin-bottom: .6rem;
}
.mtop .dsec-head .ttl .ja {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 2.4vw, 2.8rem);
  letter-spacing: .12em;
  margin: 0;
  line-height: 1.3;
}
.mtop .more {
  font-family: "EB Garamond", serif;
  color: var(--mainColor);
  white-space: nowrap;
  font-size: clamp(1.2rem, 1.3vw, 1.4rem);
  letter-spacing: .12em;
  border-bottom: 1px solid var(--line);
  padding-bottom: .3rem;
}
.mtop .more:hover { border-color: var(--mainColor); }
/* 実データが無い場合の空表示 */
.mtop .mtop-empty {
  color: var(--base50Color);
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  letter-spacing: .06em;
  padding: 1rem 0;
  margin: 0;
}

/*-----------------------  ボタン共通（.mt-btn）  -----------------------*/
.mtop .mt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 500;
  letter-spacing: .14em;
  text-indent: .14em;
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  padding: 1.3rem 2.4rem;
  border-radius: 100px;
  transition: background .3s, color .3s, border-color .3s;
  cursor: pointer;
}
.mtop .mt-btn--fill {
  background: var(--mainColor);
  color: var(--subColor);
  border: 1px solid var(--mainColor);
}
.mtop .mt-btn--fill:hover { background: transparent; color: var(--mainColor); }
.mtop .mt-btn--line {
  background: transparent;
  color: var(--mainColor);
  border: 1px solid var(--line);
}
.mtop .mt-btn--line:hover { border-color: var(--mainColor); }

/*-----------------------  ① 本日のライブ配信  -----------------------*/
.mtop .live-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 2vw, 2.4rem);
}
.mtop .live-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 16:9 サムネイル（実データの配信バナーに差し替え） */
.mtop .live-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #8a7f63, #544a24);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mtop .live-thumb.evening { background: linear-gradient(135deg, #4a4636, #2c2820); }
.mtop .live-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mtop .live-thumb .mt-mark {
  color: rgba(231, 223, 210, .5);
  font-family: "Shippori Mincho B1", serif;
  font-size: clamp(3rem, 4vw, 4.4rem);
  letter-spacing: .3em;
  text-indent: .3em;
}
.mtop .live-body {
  padding: clamp(2.2rem, 2.8vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  flex: 1;
}
.mtop .live-top { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
/* ステータスバッジ（.mt-badge） */
.mtop .mt-badge {
  font-family: "Shippori Mincho B1", serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1;
  padding: .7rem 1.2rem;
  border-radius: 100px;
  white-space: nowrap;
}
.mtop .mt-badge--live {
  background: var(--mainColor);
  color: var(--subColor);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.mtop .mt-badge--live .dot {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--subColor);
  animation: mtop-blink 1.4s ease-in-out infinite;
}
@keyframes mtop-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.mtop .mt-badge--soon { background: var(--mainColor); color: var(--subColor); }
.mtop .mt-badge--done { background: transparent; color: var(--base50Color); border: 1px solid var(--line); }
.mtop .live-time {
  font-family: "EB Garamond", serif;
  font-size: clamp(1.8rem, 2vw, 2.2rem);
  letter-spacing: .08em;
  color: var(--baseColor);
}
.mtop .live-title {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 2vw, 2.2rem);
  letter-spacing: .06em;
  margin: 0;
  line-height: 1.5;
}
/* ナビゲーター：丸抜き顔写真＋名前 */
.mtop .live-nav { display: flex; align-items: center; gap: 1.2rem; }
.mtop .live-nav .avatar {
  width: clamp(4rem, 4.6vw, 4.8rem);
  aspect-ratio: 1;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #c9bfa8, #8a7f63);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--card);
  font-family: "Shippori Mincho B1", serif;
  font-size: 1.8rem;
  font-weight: 600;
}
.mtop .live-nav .avatar img { width: 100%; height: 100%; object-fit: cover; }
.mtop .live-nav .role {
  font-family: "EB Garamond", serif;
  color: var(--base50Color);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 1rem;
  margin: 0;
  line-height: 1.4;
}
.mtop .live-nav .name {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.6vw, 1.7rem);
  letter-spacing: .06em;
  margin: 0;
  line-height: 1.4;
}
.mtop .live-card .mt-btn { margin-top: auto; } /* ボタンをカード下端に揃える */

/*-----------------------  ② お知らせ  -----------------------*/
.mtop .news-list { border-top: 1px solid var(--line); }
.mtop .news-row {
  display: grid;
  grid-template-columns: 12rem 11rem 1fr;
  align-items: center;
  gap: 1.6rem 2.4rem;
  padding: clamp(1.8rem, 2.2vw, 2.4rem) .5rem;
  border-bottom: 1px solid var(--line);
  transition: background .3s;
}
.mtop .news-row:hover { background: var(--sub10Color); }
.mtop .news-date {
  font-family: "EB Garamond", serif;
  color: var(--base50Color);
  font-size: 1.5rem;
  letter-spacing: .08em;
}
.mtop .news-cat {
  justify-self: start;
  font-family: "Shippori Mincho B1", serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  padding: .6rem 1.2rem;
  border: 1px solid var(--main50Color);
  border-radius: 100px;
  color: var(--mainColor);
  white-space: nowrap;
}
.mtop .news-ttl {
  margin: 0;
  font-size: clamp(1.5rem, 1.6vw, 1.7rem);
  letter-spacing: .04em;
  line-height: 1.6;
}

/*-----------------------  ③ 新着アーカイブ  -----------------------*/
.mtop .arc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 2.5vw, 3rem);
}
.mtop .arc-card { display: flex; flex-direction: column; gap: 1.4rem; }
.mtop .arc-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(135deg, #6b6142, #3f3a2c);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mtop .arc-thumb.v2 { background: linear-gradient(135deg, #8a7f63, #544a24); }
.mtop .arc-thumb.v3 { background: linear-gradient(135deg, #9d9581, #6b6142); }
.mtop .arc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mtop .arc-thumb .mt-mark {
  color: rgba(231, 223, 210, .55);
  font-family: "Shippori Mincho B1", serif;
  font-size: clamp(2.2rem, 3vw, 3.4rem);
  letter-spacing: .3em;
  text-indent: .3em;
}
.mtop .arc-thumb .play {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(251, 249, 245, .9);
  color: var(--mainColor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  padding-left: .3rem;
}
.mtop .arc-thumb .dur {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  background: rgba(58, 53, 45, .72);
  color: var(--subColor);
  font-family: "EB Garamond", serif;
  font-size: 1.2rem;
  letter-spacing: .06em;
  padding: .4rem .9rem;
  border-radius: 3px;
}
.mtop .arc-title {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 1.7vw, 1.9rem);
  letter-spacing: .04em;
  line-height: 1.55;
  margin: 0;
}
.mtop .arc-date {
  font-family: "EB Garamond", serif;
  color: var(--base50Color);
  font-size: 1.3rem;
  letter-spacing: .08em;
  margin: 0;
}

/*-----------------------  ④ カウンセリングの部屋  -----------------------*/
.mtop .coun-lead {
  margin: -.5rem 0 2.8rem;
  color: #4a443a;
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  letter-spacing: .06em;
}
.mtop .coun-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 2vw, 2.4rem);
}
.mtop .coun-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 16:9 サムネイル（実装ではカウンセラー写真に差し替え） */
.mtop .coun-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #c9bfa8, #8a7f63);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mtop .coun-thumb.v2 { background: linear-gradient(135deg, #b0a894, #6b6142); }
.mtop .coun-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mtop .coun-thumb .mt-mark {
  color: rgba(251, 249, 245, .6);
  font-family: "Shippori Mincho B1", serif;
  font-size: clamp(2.8rem, 3.6vw, 4rem);
  letter-spacing: .3em;
  text-indent: .3em;
}
.mtop .coun-info {
  padding: clamp(2.2rem, 2.8vw, 3rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mtop .coun-info .mt-btn { width: 100%; }

/*-----------------------  ⑤ カレンダー（埋め込み）  -----------------------*/
.mtop .iframe-calendar {
  width: 100%;
  border: 0;
  display: block;
  overflow: hidden;
}

/*=====================  会員トップ：スマホ（〜559px）  =====================*/
@media screen and (max-width: 559px) {
  .mtop .live-grid,
  .mtop .coun-grid { grid-template-columns: 1fr; }
  .mtop .arc-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.4rem; }
  .mtop .news-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "date cat" "ttl ttl";
    gap: .8rem 1.4rem;
  }
  .mtop .news-date { grid-area: date; }
  .mtop .news-cat { grid-area: cat; justify-self: end; }
  .mtop .news-ttl { grid-area: ttl; }
  .mtop .coun-card { text-align: center; }
}

/*=====================================================================
  カレンダー（iframe /iframe/calendar）ブランド調整
  ・iframe ページも overwrite.css を読み込む（layout-iframe-common の
    isShinMeditation 分岐）ため、body.body-calendar 配下にスコープして
    FullCalendar 既定のグレー罫線などをブランド調（クリーム地＋淡オリーブ罫）に整える。
  ・.body-calendar 限定なので他ページ・他テナントには影響しない。
  ・月表示（dayGridMonth）はそのまま。見た目のみ調整。
=====================================================================*/
.body-calendar {
  background: var(--subColor);
}
.body-calendar .fc {
  font-family: "EB Garamond", "Shippori Mincho B1", serif;
  color: var(--baseColor);
}
/* 罫線：既定の #ddd 系グレーを淡いオリーブ罫に統一（テーマ差異に強いよう td/th を直接） */
.body-calendar .fc table,
.body-calendar .fc td,
.body-calendar .fc th,
.body-calendar .fc-unthemed td,
.body-calendar .fc-unthemed th,
.body-calendar .fc-unthemed .fc-divider,
.body-calendar .fc-unthemed .fc-row,
.body-calendar .fc-unthemed .fc-popover,
.body-calendar .fc-row .fc-content-skeleton td {
  border-color: rgba(84, 74, 36, 0.16) !important;
}
/* 日付セル地色（クリームより明るいカード地に） */
.body-calendar .fc-day,
.body-calendar .fc-day-top {
  background-color: #fbf9f5;
}
.body-calendar .fc-disabled-day {
  background-color: #f1ece3;
}
/* 曜日ヘッダー行 */
.body-calendar .fc-day-header {
  background-color: #eeede9; /* main10Color 相当 */
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--mainColor);
  padding: .8rem 0;
}
/* 日付番号 */
.body-calendar .fc-day-number,
.body-calendar .fc-day-top {
  font-family: "EB Garamond", serif;
  color: var(--baseColor);
  padding: .4rem .6rem;
}
/* 日曜/土曜：赤青をブランド寄りの落ち着いたトーンに */
.body-calendar .fc-sun { color: #b5675f; background-color: #fbf5f1; }
.body-calendar .fc-sat { color: #6f7d88; background-color: #f4f6f8; }
/* 今日 */
.body-calendar .fc-today {
  background-color: #f0eadc !important;
}
.body-calendar td.fc-today .fc-day-number {
  color: var(--mainColor);
  font-weight: 700;
}
/* イベント（ライブ配信 等）：オリーブ地＋クリーム文字 */
.body-calendar .fc-event,
.body-calendar .fc-event:hover {
  background-color: var(--mainColor);
  border-color: var(--mainColor);
  border-radius: 3px;
  padding: 1px 4px;
  font-family: "Shippori Mincho B1", serif;
  letter-spacing: .02em;
}
.body-calendar .fc-event,
.body-calendar .fc-event .fc-title,
.body-calendar .fc-event .fc-time {
  color: var(--subColor);
}
/* ツールバー見出し（例：2026年7月） */
.body-calendar .fc-toolbar h2 {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--baseColor);
}
/* ツールバーボタン（一覧/週/←/→ 等） */
.body-calendar .fc-button {
  background: transparent;
  background-image: none;
  border: 1px solid rgba(84, 74, 36, 0.28);
  color: var(--mainColor);
  box-shadow: none;
  text-shadow: none;
  font-family: "EB Garamond", serif;
  letter-spacing: .04em;
}
.body-calendar .fc-button:hover,
.body-calendar .fc-button.fc-state-active,
.body-calendar .fc-state-active,
.body-calendar .fc-state-down {
  background: var(--mainColor);
  border-color: var(--mainColor);
  color: var(--subColor);
}