/* =========================================================
   BUSINESS 独立CSS（footer以外はここで完結）
   - すべて .biz-page スコープで他ページに影響させない
   - main.css は footer だけ利用（読み込み順は main → business）
   ========================================================= */

/* トークン（色・余白・高さ） */
.biz-page{
  --brand-blue:#1f6bd6;   /* 下線の青 */
  --headerH:64px;         /* PCの実高さ目安 */
}

/* ====== Base（BUSINESS 内の標準化） ====== */
.biz-page{ color:var(--text); }
.biz-page img{ max-width:100%; height:auto; display:block; }
	.point{
		color: #B80003;
		font-weight: 600;
	}
	.arrow{
		font-size: 80px;
		color: #758FB1;
		margin: auto;
	}
.center{
	text-align: center;
}
/* ====== Header（白帯＋青下線／左ロゴ・右メニュー） ====== */
/* PC */
@media (min-width:769px){
  .biz-page .mh{
    background:#fff;
    border-bottom:3px solid var(--brand-blue);
    position:sticky; top:0; z-index:1000;
  }
  .biz-page .mh .mh-inner{
    max-width:1100px; margin:0 auto; padding:10px 16px;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
  }
  .biz-page .mh-logo img{ height:42px; width:auto; }
  .biz-page .mh-nav-list{
    display:flex; gap:20px; list-style:none; margin:0; padding:0;
  }
  .biz-page .mh-nav-list a{
    text-decoration:none; color:#1f3a56; font-weight:700; letter-spacing:.02em;
    padding:8px 4px; border-bottom:2px solid transparent; transition:opacity .2s,border-color .2s;
  }
  .biz-page .mh-nav-list a:hover{ opacity:.9; }
  .biz-page .mh-nav-list a.is-active{ border-bottom-color: currentColor; }
}
.biz-page .site-header{
  position: sticky; top: 0; z-index: 1000;
  background: #fff;
  border-bottom: 3px solid var(--brand-blue);
}
.biz-page .site-header .hd{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
/* ロゴ（PC） */
.biz-page .hd-logo img{ height: 46px; width: auto; }

/* PCの横並びナビ */
.biz-page .hd-nav{ display: block; }
.biz-page .hd-nav-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 22px;
}
.biz-page .hd-nav-list a{
  text-decoration: none; color: #1f3a56; font-weight: 700;
  padding: 8px 4px; border-bottom: 2px solid transparent;
}
.biz-page .hd-nav-list a:hover{ opacity: .9; }
.biz-page .hd-nav-list a.is-active{ border-bottom-color: currentColor; }

/* 既存の .mh-menu-btn は main.css で fixed なので、BUSINESSでは上書きして
   “白帯の中に配置” する（PCは非表示、SPのみ表示） */
.biz-page .mh-menu-btn{ display: none; } /* PCでは非表示 */

.biz-page .biz-panel .sec-body{ max-width:800px; margin:40px auto; line-height:1.9;}
.biz-page .biz-panel .sec-body h2{ margin:50px 0 30px; font-size:28px; text-align: center;}



/* タブバー */
.biz-page .biz-tabs{
  background:#fff;
  border-bottom:1px solid #eee;
  margin:8px 0;                     /* 上下の余白 */
  padding:12px 16px;                /* PC標準の左右余白 */
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-rows: 44px;
  gap: 8px 12px;
  position: static;                 /* ← 固定しない */
}

  .biz-page .biz-tabs{
    padding:10px var(--pad-r) 10px var(--pad-l);
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-auto-rows: 48px;           /* タップ面積を広めに */
    gap: 8px 10px;
  }

/* タブの見た目（ボタン用） */
.biz-page .biz-tabs [role="tab"]{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  text-decoration:none;font-weight:700;color:#1f3a56;
  border:1px solid #d8e1f0;background:#f4f7fb;border-radius:6px;
  transition:background .2s,border-color .2s,color .2s,opacity .2s;
}
.biz-page .biz-tabs [role="tab"]:hover{ opacity:.9; }
.biz-page .biz-tabs [role="tab"].is-active{
  background:#1f6bd6;border-color:#1f6bd6;color:#fff;
}

/* ======== パネル表示切替（JSが .is-active を付与） ======== */
.biz-page .biz-panel{ display:none; }
.biz-page .biz-panel.is-active{ display:block; }




/* パネルがヘッダーに隠れないように余白を確保（アンカー移動対策） */
.biz-page .biz-panel{
  scroll-margin-top: calc(var(--headerH, 56px) + 12px);
}

/* （任意）スクロールを滑らかに */
html{ scroll-behavior: smooth; }

/* ====== 本文：1カラム（見出し＋内容の2段） ====== */
.biz-page .biz-main{ padding:24px 16px 40px; }

.biz-page .biz-panel .sec-head{
  max-width:800px; margin:0 auto 12px;
  font-size:28px; line-height:1.2; letter-spacing:.14em; font-weight:700;
}
.biz-page .biz-panel .sec-head .sec-label{ display:block; font-weight:800; color:#1f3a56; }
.biz-page .biz-panel .sec-title{ margin:6px 0 0; font-size:28px; font-weight:800; }

.biz-page .media-text{ font-size:15px;line-height:1.6; }

/* ====== 左写真 × 右テキスト（Media block） ====== */
.biz-page .media{ padding:40px 16px; }
.biz-page .media .media-inner{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 2fr; gap:28px; align-items:center;
}
.biz-page .media .media-inner.is-reverse{
  grid-template-columns: 1fr 1fr;
  direction: rtl;              /* 並び順だけ反転 */
}
.biz-page .media .media-inner.is-reverse > *{
  direction: ltr;              /* 子要素は通常方向へ戻す */
}
@media (max-width:1024px){
  .biz-page .biz-main{ padding:20px var(--pad-r) 40px var(--pad-l); }
}
@media (max-width:768px){  
	.biz-page{
    --pad-l: max(16px, env(safe-area-inset-left));
    --pad-r: max(16px, env(safe-area-inset-right));
    --headerH: 56px;
  } 
.biz-page .media-photo{ margin:0; border-radius:14px; background:#eef2f7; aspect-ratio:3/2; }
.biz-page .media-photo img{ width:100%; object-fit:cover; }
.biz-page .media-text{ font-size:15px;line-height:1.6; }
.biz-page .media-title{ font-size:24px; font-weight:800; letter-spacing:.02em; margin:0 0 10px; color:#1f3a56; }
.biz-page .media-points{ margin:12px 0 16px; padding-left:1.2em; }
.biz-page .media-points li{ margin:4px 0; }
/* 反転（写真 右／テキスト 左） */

 .biz-page .media .media-inner{
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  /* 反転指定が付いていても通常順に戻す */
  .biz-page .media .media-inner.is-reverse{ direction: ltr; }

  /* 見出しサイズ少しだけ下げる（お好みで） */
  .biz-page .media-title{ font-size: 22px; }

	
	
	
	
	.biz-page{ --headerH:56px; }

  /* ヘッダー内側の余白を少し詰める */
  .biz-page .site-header .hd{ padding: 8px 16px; }

  /* ロゴを小さく */
  .biz-page .hd-logo img{ height: 32px; }

  /* PCナビは隠す／代わりにボタンを表示（白帯の中・右端） */
  .biz-page .hd-nav{ display: none; }
  .biz-page .mh-menu-btn{
    display: inline-flex;               /* ← 表示する */
    position: static;                   /* ← fixed を打ち消し、帯の中に置く */
    right: auto; top: auto;             /* 念のためリセット */
    height: 40px; padding: 0 12px 0 14px;
    border: 1px solid #E6EAEF; border-radius: 9999px;
    background: #fff; z-index: auto;
  }

  /* スライドダウンを “ヘッダー直下から” 開く */
  .biz-page .mh-menu{ top: var(--headerH); }  /* 既定は top:0（main.css）。BUSINESSだけ上書き */
  .biz-page .mh-menu .wrap{ padding: 14px 0; }

	.biz-page .biz-panel .sec-body h2{ margin:24px 0 24px 0px; font-size:19px; text-align: center; margin: auto;}

	
	
	
.biz-page .biz-tabs{ z-index:900; background:#fff; }
}


/* ====== iOSホームバー重なり対策 ====== */
@supports (padding: max(0px)){
  .biz-page .site-footer{ padding-bottom:max(20px, env(safe-area-inset-bottom)); }
}