/**
 * エックスモバイル カスタマイズ CSS
 * SWELLテーマとの統合に最適化されたスタイル
 */

@charset "utf-8";

/* ===============================================
SWELLテーマとの統合調整
=============================================== */

/* SWELLテーマのヘッダーとフッターを非表示 */
.l-header,
.l-footer {
  display: none !important;
}

/* SWELLテーマのパンクズリストを非表示 */
.l-mainContent .c-breadcrumb {
  display: none !important;
}

/* SWELLテーマのメインコンテンツエリアの調整 */
.l-mainContent {
  margin-top: 0 !important;
}

/* SWELLテーマのコンテンツ幅調整 */
.l-mainContent__inner {
  max-width: none !important;
  padding: 0 !important;
}

/* SWELLテーマの投稿タイトル調整 */
.p-articleHead__title {
  display: none !important;
}

/* SWELLテーマのメタ情報調整 */
.p-articleHead__meta {
  display: none !important;
}

/* SWELLテーマのサイドバー調整 */
.l-sidebar {
  display: none !important;
}

/* SWELLテーマのコンテンツ幅をフルに */
.l-mainContent {
  width: 100% !important;
}

/* SWELLテーマのコンテナ調整 */
.l-container {
  max-width: none !important;
  padding: 0 !important;
}

/* SWELLテーマのボディクラス調整 */
body {
  background: #fff !important;
  overflow-x: hidden;
}

/* SWELLテーマのフォント調整 */
body {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic",
    sans-serif !important;
}

/* SWELLテーマのリンク色調整 */
a {
  color: #1558d6;
}

a:hover {
  color: #00b4e6;
}

/* ===============================================
    Styles for base
=============================================== */

/* --- デフォルト（PC） --- */
.br_pc { display: block; }
.br_sp { display: none; }

.pc { display: block !important; }
.sp { display: none !important; }

/* --- タブレットのみ表示（768px～1023px） --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .br_pc { display: block; }
  .br_sp { display: none; }

  .pc { display: block; }
  .ceo-button_url { display: block !important; }
  .header__myPage { display: none !important; }
  .header__myPage_sp { display: block !important; }
  .sp { display: none; }
}

/* --- スマホのみ表示（～767px） --- */
@media screen and (max-width: 767px) {
  .br_pc { display: none; }
  .br_sp { display: block; }

  .pc { display: none !important; }
  .sp { display: block !important; }
}

@media screen and (max-width: 839px) {
  /*　画面サイズ 839pxまで適用　*/
  #wrapper {
    min-width: auto;
    width: 100%;
    overflow-x: hidden;
  }
  .inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 4%;
  }
  .inner_nav {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 3%;
  }

  .inner_sub {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 4%;
  }
}

table {
  font-size: inherit;
  font: 100%;
}
pre,
code,
kbd,
samp,
tt {
  font-family: monospace;
  font: 115% monospace;
  line-height: 150%;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/*----------------------------------------------------------
    Styles for layout
----------------------------------------------------------*/
.inner {
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
.inner_nav {
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
.inner_gray {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  background-color: #fafafa;
  padding-bottom: 1px;
}
.inner_sub {
  width: 100%;
  max-width: 1242px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
.fixed {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}
#wrapper {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  min-width: 100%;
}
#header {
  width: 100%;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",
    sans-serif;
}
#footer {
  width: 100%;
  min-width: auto;
}
#container {
  width: 100%;
}

#chatplusview #eye_catcher img {
  margin: auto;
}

/* ===============================================
エックスモバイル ヘッダー・フッター スタイル（新デザイン）
=============================================== */

/*----------------------------------------------------------
    Header
----------------------------------------------------------*/

.xm__header {
  display: block;
  width: 100%;
  margin: auto;
  background-color: #000;
}

.xm__header .top-nav {
  display: flex;
  width: 100%;
  max-width: 1600px;
  margin: auto;
  padding: 1rem;
  justify-content: space-between;
  align-items: stretch;
  box-sizing: border-box;
}

.xm__header .top-nav .box-left {
  display: flex;
  color: #fff;
  align-items: flex-end;
  gap: 1rem;
}

.xm__header .top-nav .box-left span {
  font-size: 1rem;
  font-weight: bold;
}

.xm__header .top-nav .box-left span small {
  font-size: 60%;
  font-weight: 400;
}

@media screen and (max-width: 1000px) {
  .xm__header .top-nav .box-left span {
    font-size: 0.6rem;
  }
  .xm__header .top-nav .box-left span small {
    display: none;
  }
}

.xm__header .top-nav .box-left img {
  width: 100%;
  max-width: 200px;
}

@media screen and (max-width: 1000px) {
  .xm__header .top-nav .box-left img {
    width: 100%;
    max-width: 100px;
  }
}

.xm__header .top-nav .box-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.xm__header .top-nav .box-right ul {
  display: flex;
  gap: 3rem;
}

.xm__header .top-nav .box-right ul li a {
  color: #fff;
  text-decoration: none;
}

@media screen and (max-width: 1000px) {
  .xm__header .top-nav .box-right ul {
    display: none;
  }
  .xm__header .top-nav .box-right {
    flex-direction: row;
    gap: 1rem;
  }
}

@media screen and (max-width: 1000px) {
  .xm__header .xm-mypage {
    margin-bottom: 0.1rem;
  }
}

.xm__header .xm-nav-icon {
  display: none;
}

@media screen and (max-width: 1000px) {
  .xm__header .xm-nav-icon {
    display: block;
  }
}

.xm__header nav ul {
  display: flex;
  width: 100%;
  justify-content: space-around;
  max-width: 1600px;
  margin: auto;
  padding: 0 1rem;
  box-sizing: border-box;
  text-align: center;
  gap: 3rem;
}

.xm__header nav ul li {
  display: flex;
  width: 100%;
}

.xm__header nav ul li .current {
  color: #000;
  background-color: #8DF701;
  border-top: solid 8px #8DF701;
  border-bottom: solid 8px #8DF701;
}

.xm__header nav ul li a {
  display: block;
  width: 100%;
  font-size: min(1.3vw, 1rem);
  color: #fff;
  border-top: solid 8px #000;
  border-bottom: solid 8px #8DF701;
  padding: 0.5rem;
  text-decoration: none;
}

@media screen and (max-width: 1000px) {
  .xm__header nav {
    display: none;
  }
}

/*----------------------------------------------------------
    Footer
----------------------------------------------------------*/

.xm_footer {
  width: 100%;
  margin: auto;
  box-sizing: border-box;
  background-color: #000;
  padding: 1rem;
}

.xm_footer a {
  color: #fff;
  text-decoration: none;
}

.xm_footer h5 {
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: solid 1px #fff;
}

.xm_footer .top-footer {
  max-width: 1523px;
  box-sizing: border-box;
  margin: 1rem auto;
}

.xm_footer .top-footer .box-logo {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.xm_footer .top-footer .box-logo span {
  color: #fff;
}

.xm_footer .top-footer .box-logo span small {
  font-size: 60%;
  font-weight: 400;
}

@media screen and (max-width: 1000px) {
  .xm_footer .top-footer .box-logo {
    justify-content: center;
  }
}

.xm_footer .mid-footer {
  display: flex;
  justify-content: space-between;
  max-width: 1523px;
  box-sizing: border-box;
  margin: 1rem auto;
}

.xm_footer .mid-footer .box-left {
  width: 100%;
  max-width: 749px;
}

.xm_footer .mid-footer .box-left ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.xm_footer .mid-footer .box-right {
  width: 100%;
  max-width: 749px;
}

.xm_footer .mid-footer .box-right ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media screen and (max-width: 1000px) {
  .xm_footer .mid-footer {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  .xm_footer .mid-footer .box-left ul,
  .xm_footer .mid-footer .box-right ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

.xm_footer .sub-footer {
  display: block;
  max-width: 1523px;
  box-sizing: border-box;
  margin: 1rem auto;
}

.xm_footer .sub-footer .box-up {
  width: 100%;
  max-width: 1523px;
}

.xm_footer .sub-footer .box-up ul {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

@media screen and (max-width: 1000px) {
  .xm_footer .sub-footer .box-up {
    display: none;
  }
}

.xm_footer .sub-footer .xm-logo-footer {
  display: block;
  width: 100%;
  max-width: 1523px;
  margin-top: 5rem;
  margin-bottom: 3rem;
}

@media screen and (max-width: 1000px) {
  .xm_footer .sub-footer .xm-logo-footer {
    display: none;
  }
}

.xm_footer .sub-footer .box-down {
  width: 100%;
  max-width: 1523px;
}

.xm_footer .sub-footer .box-down ul {
  display: flex;
  width: 100%;
  max-width: 686px;
  justify-content: center;
  gap: 1rem;
  margin: auto;
  font-size: 0.8rem;
}

@media screen and (max-width: 1000px) {
  .xm_footer .sub-footer .box-down ul {
    flex-wrap: wrap;
    margin: 3rem auto 0;
  }
}

.xm_footer .sub-footer .box-down small {
  display: block;
  width: 100%;
  max-width: 1523px;
  margin: 1rem auto;
  text-align: center;
  font-size: 0.6rem;
  color: #fff;
}

/*---------------------------------------
    nav
-----------------------------------------*/

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0, 0.95);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 1.5rem;
  text-decoration: none;
  font-size: 2rem;
  font-weight: bold;
  color: #8df701;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 60px;
  padding: 8px;
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

/* ===============================================
breadcrumb「パンくずリスト」　
=============================================== */
/*共通設定*/
/* パンクズリストの表示制御 */
.breadcrumb,
div.breadcrumb,
nav.breadcrumb,
.l-mainContent .breadcrumb,
.l-mainContent__inner .breadcrumb,
.post_content .breadcrumb,
.entry-content .breadcrumb,
.single-post .breadcrumb,
.page .breadcrumb {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 100 !important;
}
.breadcrumb {
  background: #eee;
  padding: 0.75rem 0;
}
.breadcrumb ol {
  overflow: hidden;
}
.breadcrumb ol li {
  float: left;
  font-size: 12px;
}
.breadcrumb ol li:first-child {
  padding-left: 20px;
  position: relative;
}
.breadcrumb ol li:first-child::before {
  content: "";
  background: url("https://his-mobile.com/wp-content/themes/hismobile/css/../images/common/common_ic_09.png")
    no-repeat;
  width: 15px;
  height: 14px;
  background-size: contain;
  position: absolute;
  left: 0;
}
.breadcrumb ol li:not(:last-child) {
  padding-right: 5px;
}
.breadcrumb ol li:not(:last-child)::after {
  content: ">";
  margin-left: 5px;
}

/* スマホ用の調整 */
@media screen and (max-width: 784px) {
  .breadcrumb {
    margin-top: 60px !important;
  }
}

/* 横スクロール対応（幅超過時） */
.breadcrumb,
.l-mainContent .breadcrumb,
.l-mainContent__inner .breadcrumb,
.post_content .breadcrumb,
.entry-content .breadcrumb,
.single-post .breadcrumb,
.page .breadcrumb {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.breadcrumb ol {
  display: block;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.breadcrumb ol li {
  display: inline-block;
  float: none;
}

/* スクロールバー（WebKit）の軽微な装飾 */
.breadcrumb::-webkit-scrollbar {
  height: 6px;
}
.breadcrumb::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* X MOBILEとsim比較事業リンクのスタイリング */
.breadcrumb ol li:nth-child(1) a {
  color: #8DF701 !important;
  font-weight: bold;
  text-decoration: none;
}

.breadcrumb ol li:nth-child(2) a {
  color: rgba(111, 186, 44, 1) !important;
  font-weight: bold;
  text-decoration: none;
}

.breadcrumb ol li:nth-child(1) a:hover {
  color: #8DF701 !important;
  text-decoration: underline;
}

.breadcrumb ol li:nth-child(2) a:hover {
  color: rgba(111, 186, 44, 1) !important;
  text-decoration: underline;
}


/* ===============================================
pageTop（トップへ戻るボタン）　
=============================================== */
/*共通設定*/
.pageTopBtn {
  position: fixed;
  right: 20px;
  bottom: -70px;
  background: rgba(195, 214, 0, 1);
  width: 50px;
  height: 50px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  z-index: 5;
  opacity: 0.8;
  transition: all 0.3s ease;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.pageTopBtn::before {
  content: "↑";
  font-weight: bold;
  line-height: 1;
}

/* フッターナビ内のトップボタン */
.fotNavi .pageTopBtn {
  position: absolute;
  bottom: auto !important;
  top: 70px;
  right: 20px;
}

/* ホバー効果 */
.pageTopBtn:hover {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
}

/* アクティブ状態（クリック時） */
.pageTopBtn:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* スマホでの調整 */
@media screen and (max-width: 784px) {
  .pageTopBtn {
    width: 45px;
    height: 45px;
    right: 15px;
    bottom: -60px;
  }

  .pageTopBtn:hover {
    transform: translateY(-2px);
  }
}

/* タブレットでの調整 */
@media screen and (min-width: 785px) and (max-width: 1023px) {
  .pageTopBtn {
    right: 25px;
  }
}

/* 大画面での調整 */
@media screen and (min-width: 1025px) {
  .pageTopBtn {
    right: 30px;
  }
}

/* ===============================================
スマホでのWordPressページ余白設定
=============================================== */
/* スマホでのbody余白設定 */
@media screen and (max-width: 784px) {
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0;
    margin: 0;
  }

  /* WordPressのメインコンテンツエリア */
  /* main,
  .main-content,
  .content-area,
  .site-content {
    padding: 0px 20px !important;
    margin: 0;
  } */

  /* WordPressの投稿・ページコンテンツ */
  .entry-content,
  .post-content,
  .page-content {
    padding: 0px 20px !important;
    margin: 0;
  }

  /* WordPressの投稿一覧 */
  .posts-list,
  .blog-posts,
  .archive-posts {
    padding: 0px 20px !important;
    margin: 0;
  }

  /* WordPressの投稿詳細 */
  .single-post .entry-content,
  .single-page .entry-content {
    padding: 0px 20px !important;
    margin: 0;
  }

  /* WordPressのアーカイブページ */
  .archive .entry-content,
  .search .entry-content {
    padding: 0px 20px !important;
    margin: 0;
  }

  /* WordPressのヘッダーとフッター間の余白 */
  header + main,
  .site-header + .site-content {
    padding-top: 20px;
  }

  main + footer,
  .site-content + .site-footer {
    padding-bottom: 20px;
  }
}

/* より小さいスマホでの調整 */
@media screen and (max-width: 480px) {
  .entry-content,
  .post-content,
  .page-content,
  .posts-list,
  .blog-posts,
  .archive-posts {
    padding: 0px 20px !important;
  }
  
  /* テーブルの横スクロール対応 */
  .comparison-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .comparison-table table {
    min-width: 600px;
  }
}

/* ===============================================
ログイン時（管理バー表示時）の余白調整
=============================================== */
/* ログイン時（管理バー表示時）の余白調整 */
@media screen and (max-width: 784px) {
  /* 管理バーが表示されている時の調整 */
  .admin-bar body {
    padding-top: 46px; /* 管理バーの高さ分 */
  }

  .admin-bar header.nav-content {
    top: 46px; /* 管理バーの下に配置 */
  }

  /* .admin-bar main,
  .admin-bar .main-content,
  .admin-bar .content-area,
  .admin-bar .site-content {
    padding-top: 70px !important;
  } */

  .admin-bar .entry-content,
  .admin-bar .post-content,
  .admin-bar .page-content,
  .admin-bar .posts-list,
  .admin-bar .blog-posts,
  .admin-bar .archive-posts,
  .admin-bar .single-post .entry-content,
  .admin-bar .single-page .entry-content,
  .admin-bar .archive .entry-content,
  .admin-bar .search .entry-content　 {
    padding-top: 70px !important;
  }
}

/* より小さい画面での管理バー調整 */
@media screen and (max-width: 600px) {
  .admin-bar body {
    padding-top: 32px; /* 小さい画面での管理バーの高さ */
  }

  /* .admin-bar main,
  .admin-bar .main-content,
  .admin-bar .content-area,
  .admin-bar .site-content {
    padding-top: 56px !important;
  } */

  .admin-bar .entry-content,
  .admin-bar .post-content,
  .admin-bar .page-content,
  .admin-bar .posts-list,
  .admin-bar .blog-posts,
  .admin-bar .archive-posts,
  .admin-bar .single-post .entry-content,
  .admin-bar .single-page .entry-content,
  .admin-bar .archive .entry-content,
  .admin-bar .search .entry-content {
    padding-top: 56px !important;
  }
}

/* ===============================================
WordPressブロックエディター画像拡大表示の修正
=============================================== */

/* 他のCSSからの影響を防ぐためのリセット */
.lum-lightbox,
.lum-lightbox * {
  box-sizing: border-box;
}

/* 既存のライトボックススタイルをリセット */
.lum-lightbox {
  all: unset;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.9) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* ライトボックスが開いている時にスクロールを無効化 */
body.lum-lightbox-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

/* ライトボックス全体の修正 */
.lum-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 999999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lum-lightbox-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  margin: 0;
  padding: 0;
}

/* 画像ラッパーの修正 */
.lum-lightbox-image-wrapper {
  position: relative;
  max-width: 98vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 auto;
}

/* 画像のアスペクト比を保持 */
.lum-lightbox-image-wrapper img.lum-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  cursor: default;
  margin: 0 auto;
}

/* 位置調整ヘルパー */
.lum-lightbox-position-helper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-align: center;
}

/* キャプションの修正 */
.lum-lightbox-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 14px;
  max-width: 80%;
  text-align: center;
}

/* 閉じるボタンの修正 */
.lum-close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 45px;
  height: 45px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000000;
}

/* 管理画面での閉じるボタン位置調整 */
.admin-bar .lum-close-button {
  top: 52px;
}

.lum-close-button::before,
.lum-close-button::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background: #fff;
  transform: rotate(45deg);
}

.lum-close-button::after {
  transform: rotate(-45deg);
}

/* ローダーの修正 */
.lum-lightbox-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* スマホ・タブレット対応 */
@media screen and (max-width: 784px) {
  /* ライトボックス内側の位置指定をリセット */
  .lum-lightbox-inner {
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .lum-lightbox-image-wrapper {
    max-width: 100vw;
    max-height: 95vh;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    transform: none;
  }

  .lum-lightbox-position-helper {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lum-lightbox-image-wrapper img.lum-img {
    margin: 0 auto;
    display: block;
  }

  .lum-close-button {
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
  }

  /* 管理画面でのスマホ用閉じるボタン位置調整 */
  .admin-bar .lum-close-button {
    top: 46px;
  }

  .lum-close-button::before,
  .lum-close-button::after {
    width: 18px;
  }

  .lum-lightbox-caption {
    bottom: 10px;
    padding: 8px 15px;
    font-size: 12px;
  }
}

/* タブレット対応 */
@media screen and (min-width: 785px) and (max-width: 1023px) {
  /* ライトボックス内側の位置指定をリセット */
  .lum-lightbox-inner {
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .lum-lightbox-image-wrapper {
    max-width: 100vw;
    max-height: 95vh;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    transform: none;
  }

  .lum-lightbox-position-helper {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lum-lightbox-image-wrapper img.lum-img {
    margin: 0 auto;
    display: block;
  }
}

/* 600px以下の管理画面対応 */
@media screen and (max-width: 600px) {
  .admin-bar .lum-close-button {
    top: 46px;
  }
}

/* WordPressブロック画像の基本設定も修正 */
.wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.wp-block-image {
  text-align: center;
  margin: 20px 0;
}

/* 画像のアスペクト比を強制的に保持 */
.wp-block-image img,
.entry-content img,
.post-content img {
  aspect-ratio: auto;
  object-fit: contain;
}

/* WordPress側の拡大機能を無効化 */
.wp-block-image img[data-lightbox],
.wp-block-image img[data-fancybox],
.wp-block-image img[data-magnify] {
  pointer-events: none;
}

/* カスタムライトボックス用のポインターイベントを有効化 */
.wp-block-image img {
  pointer-events: auto;
  cursor: pointer;
}

/* ===============================================
投稿ページ背景画像設定
=============================================== */

/* 投稿ページ（single.php）の背景画像設定 */
.single-post {
  background-image: url('/sim-review-lab/wp-content/themes/swell_child/img/bg2.png') !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

/* 投稿ページのメインコンテンツエリア */
.single-post .l-mainContent {
  background: rgba(255, 255, 255, 0.95);
  margin: 20px auto !important;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  width: 90%;
}

/* 投稿ページのコンテンツ内側 */
.single-post .l-mainContent__inner {
  background: transparent;
}

/* 投稿タイトルのスタイル調整 */
.single-post .p-articleHead__title {
  display: block !important;
  color: #333;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

/* 投稿メタ情報のスタイル調整 */
.single-post .p-articleHead__meta {
  display: block !important;
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 30px;
  text-align: center;
}

/* 投稿本文のスタイル調整 */
.single-post .entry-content {
  color: #333;
  line-height: 1.8;
  font-size: 1rem;
}

/* スマートフォン用の調整 */
@media screen and (max-width: 784px) {
  .single-post {
    background-attachment: scroll;
  }

  .single-post .l-mainContent {
    margin: 10px auto;
    padding: 20px;
    max-width: 95%;
    width: 90%;
  }

  .single-post .p-articleHead__title {
    font-size: 1.5rem;
  }
}

/* タブレット用の調整 */
@media screen and (min-width: 785px) and (max-width: 1023px) {
  .single-post .l-mainContent {
    margin: 15px auto;
    padding: 25px;
    max-width: 90%;
    width: 90%;
  }
}