/*
mirAI塾 サンプルアプリ3ページ用 幅調整CSS
修正版:
- 予定カレンダー表示(page-id-18)は除外
- 助成金計算シミュレーター(page-id-30)
- AI業種別時間シミュレート(page-id-61)
のみ幅調整
*/

/* 1) 対象ページの本文幅を制御 */
.page-id-61 .entry-content,
.page-id-30 .entry-content {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* 2) 本文直下の各ブロックが親幅を超えないようにする */
.page-id-61 .entry-content > *,
.page-id-30 .entry-content > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* 3) 埋め込み要素・HTMLブロック・iframe の横はみ出し防止 */
.page-id-61 iframe,
.page-id-30 iframe,
.page-id-61 .wp-block-html,
.page-id-30 .wp-block-html,
.page-id-61 .wp-block-group,
.page-id-30 .wp-block-group {
  max-width: 100%;
  box-sizing: border-box;
}

/* 4) 画像・表・canvas・svg も親幅内に収める */
.page-id-61 img,
.page-id-30 img,
.page-id-61 table,
.page-id-30 table,
.page-id-61 canvas,
.page-id-30 canvas,
.page-id-61 svg,
.page-id-30 svg {
  max-width: 100%;
  height: auto;
}

/* 5) アプリ内部で固定幅が指定されていてもできるだけ縮める */
.page-id-61 [style*="width:"],
.page-id-30 [style*="width:"] {
  max-width: 100% !important;
}

/* 6) タブレット以下では余白を少し詰める */
@media (max-width: 1200px) {
  .page-id-61 .entry-content,
  .page-id-30 .entry-content {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 7) スマホでは完全に画面内優先 */
@media (max-width: 767px) {
  .page-id-61 .entry-content,
  .page-id-30 .entry-content {
    padding-left: 16px;
    padding-right: 16px;
    overflow-x: hidden;
  }

  .page-id-61 table,
  .page-id-30 table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* =========================================
mirAI塾 利用規約ページ テキストはみ出し修正
page-id-338: コンテンツを枠内に収める
========================================= */

body.page-id-338 {
  overflow-x: hidden !important;
}

.page-id-338 .entry-content,
.page-id-338 .entry-content > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.page-id-338 #site-content {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

.page-id-338 #post-338 {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* =========================================
会員専用トップページの子ページでも
メニュー「会員専用トップページ」をオレンジ色にする
========================================= */

/* 動画アーカイブ(page-id-168), 生成AI最新情報掲示板(page-id-209),
   Slack掲示板の使い方(page-id-242), 個別動画(single-movie) */
.page-id-168 #menu-item-154 > a,
.page-id-209 #menu-item-154 > a,
.page-id-242 #menu-item-154 > a,
.single-movie #menu-item-154 > a {
  background: #f08c00;
  color: #fff !important;
  border-radius: 4px;
  padding: 4px 8px;
}



a[href*="/video-archive/"] .wp-block-button__link,
a[href*="/ai-latest-info-board/"] .wp-block-button__link,
a[href*="/slack-board-guide/"] .wp-block-button__link {
  background: #f28c00 !important;
  color: #ffffff !important;
  border-color: #f28c00 !important;
}

.wp-block-button__link[href*="/会員専用トップページ/"],
a[href*="/会員専用トップページ/"],
a[href*="member-top"] {
  background: #f28c00 !important;
  color: #ffffff !important;
  border-color: #f28c00 !important;
}

.wp-block-button__link[href*="/会員専用トップページ/"]:hover,
a[href*="/会員専用トップページ/"]:hover,
a[href*="member-top"]:hover {
  background: #d97706 !important;
  color: #ffffff !important;
  border-color: #d97706 !important;
}