/* --- Astra のヘッダー/フッターをこのテンプレートだけ非表示 --- */
.mesync-home .site-header,
.mesync-home .ast-desktop-header-content,
.mesync-home .ast-mobile-header-wrap,
.mesync-home .site-footer { display: none !important; }
.mesync-home .site-content { margin-top: 0 !important; padding-top: 0 !important; }

/* Astra 側の幅制御を無効化（このページのみ） */
.mesync-home .site-content,
.mesync-home .site-content .ast-container,
.mesync-home .ast-container,
.mesync-home .entry-content,
.mesync-home .content-area,
.mesync-home #primary,
.mesync-home .site-main,
.mesync-home .hentry,
.mesync-home .ast-plain-container,
.mesync-home .ast-container-fluid {
  display: block !important;
  float: none !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
}

/* -------- 基本トークン -------- */
:root{
  --ms-primary:#0ea5e9;
  --ms-ink:#0f172a;
  --ms-muted:#64748b;
  --ms-bg:#061335;
  --ms-panel:#ffffff;
  --ms-radius:24px;
  --ms-shadow:0 24px 70px rgba(6,19,53,.22);
}
#mesync{ color:var(--ms-ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
#mesync *{ box-sizing:border-box; }
#mesync img{ max-width:100%; height:auto; display:block; }
#mesync a:not(.ms-btn){ color:inherit; text-decoration:none; }

/* 共通中央コンテナ */
.ms-container{ max-width:1200px; margin-inline:auto; padding-inline:20px; }

/* -------- ヘッダー -------- */
/* ヘッダーを全幅化 */
.ms-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid #e6eef5;
  width: 100%;
}

/* ★ WP管理バー表示時のオフセット補正（ずれ防止） */
.admin-bar .ms-header { top: 32px; }           /* デスクトップ：管理バー高さ 32px */
@media (max-width: 782px){
  .admin-bar .ms-header { top: 46px; }         /* モバイル：管理バー高さ 46px */
}

/* 中のバーを全幅で配置して、左右に寄せる */
.ms-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;   /* 左右に余白 */
  max-width: none;      /* 幅制限を解除 */
  margin: 0;
}
.ms-brand{ display:flex; align-items:center; gap:10px; }
.ms-brand img{ width:36px; height:36px; border-radius:8px; object-fit:contain; }
.ms-brand strong{ font-size:18px; letter-spacing:.2px; }
.ms-hamburger{ display:none; border:0; background:transparent; padding:8px; }
.ms-hamburger span{ display:block; width:22px; height:2px; background:#25405f; border-radius:2px; margin:4px 0; }
.ms-nav{ display:flex; align-items:center; gap:20px; }
.ms-nav__list{ display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.ms-nav__list a{ padding:8px 6px; border-radius:8px; font-size:14px; }
.ms-nav__list a:hover{ background:#F5F9FF; }
.ms-header__cta{ display:flex; gap:12px; }

/* ボタン */
/* メインCTA（お問い合わせボタン） */
.ms-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; padding:14px 28px; border-radius:999px;
  border:0; font-weight:700; font-size:16px; line-height:1;
  min-height:48px; cursor:pointer;
  background:linear-gradient(135deg,#0ea5e9,#0284c7);
  color:#fff;
  box-shadow:0 10px 25px rgba(14,165,233,.3);
  transition:all .25s ease;
}
.ms-btn:hover{
  transform:translateY(-2px) scale(1.03);
  background:linear-gradient(135deg,#38bdf8,#0ea5e9);
}

/* セカンダリCTA（資料DLボタン） */
.ms-btn--ghost{
  background:rgba(255,255,255,0.9);
  color:#0ea5e9;
  border:1.5px solid rgba(14,165,233,.5);
  box-shadow:0 8px 20px rgba(6,19,53,.12);
  transition:all .25s ease;
}
.ms-btn--ghost:hover{
  background:linear-gradient(135deg,#f0f9ff,#e0f2fe);
  color:#0284c7;
  border-color:rgba(14,165,233,.7);
  transform:translateY(-2px) scale(1.03);
}
.ms-btn--lg{ padding:16px 28px; font-size:1.06rem; }

/* モバイルナビ */
@media (max-width:1024px){
  .ms-hamburger{ display:block; }
  .ms-nav{ display:none; }
  .ms-nav.-open{
    display:flex; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; padding:10px 16px;
    background:#fff; border-bottom:1px solid #e8eef5;
  }
}

/* -------- ヒーロー（全幅） -------- */
.ms-hero {
  width: 100% !important;
  margin: 0 auto;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(14,165,233,.16), transparent 60%),
    radial-gradient(700px 500px at 85% -10%, rgba(96,165,250,.18), transparent 60%),
    var(--ms-bg);
  color: #fff;
}

/* 内側レイアウト */
.ms-hero__inner{
  display:grid;
  grid-template-columns:minmax(440px,1.1fr) minmax(420px,.9fr);
  gap:56px;
  align-items:center;
  padding:72px 20px 32px; /* 上に余白 */
}
.ms-eyebrow{ display:inline-block; padding:6px 12px; border-radius:999px; background:rgba(14,165,233,.16); color:#9bd6ff; font-weight:800; font-size:12px; letter-spacing:.4px; }
.ms-hero__title{
  color:#eaf4ff;
  text-shadow:0 6px 28px rgba(6,19,53,.55), 0 1px 0 rgba(0,0,0,.2);
  font-weight:800;
}
.ms-hero__lead{
  color:#e6f0ff;
  text-shadow:0 3px 14px rgba(6,19,53,.45);
}
.ms-hero__cta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:24px; }

/* 右側スライダー */
.ms-hero__media{ position:relative; }
.ms-slider{ position:relative; overflow:hidden; border-radius:20px; border:1px solid #dfeaf6; box-shadow:0 20px 60px rgba(2,132,199,.22); background:#fff; }
.ms-slider__track{ display:flex; transition:transform .6s ease; }
.ms-slide{ flex:0 0 100%; }
.ms-slide img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.ms-dots{ position:absolute; left:12px; bottom:12px; display:flex; gap:8px; background:rgba(255,255,255,.7); padding:6px 8px; border-radius:999px; backdrop-filter:blur(6px); }
.ms-dots button{ width:8px; height:8px; border-radius:50%; background:#cfe3ff; border:0; cursor:pointer; }
.ms-dots button.is-active{ background:var(--ms-primary); }

/* トピック帯（カードの下辺に一体化） */
.ms-topic{
  background:rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.09);
}
.ms-topic__inner{ display:flex; align-items:center; gap:16px; padding:14px 20px; color:#e9f3ff; }
.ms-topic__label{ font-weight:700; background:rgba(255,255,255,.2); padding:6px 10px; border-radius:999px; }
.ms-topic__date{ opacity:.85; margin-right:10px; }
.ms-topic__link{ text-decoration:underline; }

/* -------- 共通ブロック -------- */
.ms-block{ padding:80px 0; }
.ms-block h2{ font-size:28px; margin:0 0 .6rem; }
.ms-cta{ background:#f5f9ff; padding:80px 0; text-align:center; margin:0; }
.ms-cta h2{ font-size:28px; margin:0; }
.ms-cta__btns{ display:flex; gap:16px; justify-content:center; margin-top:20px; }

/* -------- レスポンシブ -------- */
@media (max-width:1000px){
  .ms-hero__inner{ grid-template-columns:1fr; gap:28px; text-align:center; }
  .ms-hero__cta{ justify-content:center; }
}

/* ===== SERVICE Section ===== */
.ms-section-head{
  text-align:left;
  margin-bottom:28px;
}
.ms-section-title{
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.25;
  margin:.5rem 0 .4rem;
  color:#0f1b31;
  font-weight:800;
}
.ms-section-lead{
  color:#4a5a73;
  margin:0;
}

/* grid */
.ms-service{
  padding:72px 0 40px;
  background:#fff;
}
.ms-service__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:22px;
}
@media (max-width:1200px){
  .ms-service__grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .ms-service__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .ms-service__grid{ grid-template-columns:1fr; }
}

/* card */
.ms-card{
  display:flex;
  flex-direction:column;  
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #e7eff7;
  box-shadow:0 10px 30px rgba(6,19,53,.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  color:inherit;
}
.ms-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 44px rgba(6,19,53,.12);
  border-color:#d8e8f7;
}
.ms-card__media{
  position:relative;
  aspect-ratio: 16/9;
  background:linear-gradient(180deg,rgba(14,165,233,.18),rgba(2,132,199,.06));
}
.ms-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ms-card__body{
  padding:16px 16px 18px;
}
.ms-card__title{
  font-size:18px;
  font-weight:800;
  margin: 2px 0;
  color:#0f172a;
}
.ms-card__text{
  color:#576a86;
  font-size:14px;
  line-height:1.6;
  margin:0 0 12px;
}

/* chips */
.ms-chiplist{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0;
}
.ms-chip{
  font-size:12px; font-weight:700; color:#0b5a88;
  background:rgba(14,165,233,.12);
  border:1px solid rgba(14,165,233,.22);
  padding:6px 10px; border-radius:999px;
}

/* section cta */
.ms-service__cta{
  display:flex; gap:14px; margin-top:28px;
}

/* 小さめ端末でボタンを折り返し中央寄せ */
@media (max-width:560px){
  .ms-service__cta{ flex-wrap:wrap; justify-content:center; }
}

/* ===== FEATURE / CASE section wrappers ===== */
.ms-feature{
  padding:72px 0 40px;
  background: #f7fbff; /* 薄いブルーでSERVICEと階調差 */
}
.ms-case{
  padding:72px 0 40px;
  background:#fff;
}

/* もしカード画像の比率を揃えたい場合（任意） */
.ms-feature .ms-card__media{ aspect-ratio:16/9; }
.ms-case .ms-card__media{ aspect-ratio:16/9; }

/* セクション下のCTA（SERVICEと統一） */
.ms-feature .ms-service__cta,
.ms-case .ms-service__cta{
  margin-top:28px;
}

/* ===== REPORT / ABOUT ===== */
.ms-report{
  padding:72px 0 40px;
  background:#f7fbff; /* FEATUREと同系の薄ブルー */
}
.ms-about{
  padding:72px 0 80px;
  background:#fff;
}

/* ABOUT レイアウト */
.ms-about__grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* 親トラックも 0 まで縮小可 */
  gap: 40px;
  align-items: start;
  margin-top: 40px;
}

/* ★ここがポイント：Grid子要素に min-width:0 を付ける */
.ms-about__info,
.ms-about__media{
  min-width: 0;
}

/* 参考：画像は width:100% でOK（min-widthは不要） */
.ms-about__media img{
  width: 100%;
  height: auto;
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
}

/* 任意：長い語を折り返す保険 */
.ms-table dd{
  margin: 0;
  overflow-wrap: anywhere; /* or word-break: break-word; */
}

/* 定義リストの整形 */
.ms-table{ display:grid; grid-template-columns:120px 1fr; gap:12px 20px; }
.ms-table dt{ font-weight:700; color:var(--ms-ink); }
.ms-table dd{ margin:0;}

.ms-list{
  margin: 0 0 1.5em 0;   /* ←ご希望どおり */
  padding-left: 1.2em;       /* UAの40pxを上書き。必要なければ 0 でもOK */
  list-style: disc;          /* 念のため */
}

/* レスポンシブ */
@media (max-width:800px){
  .ms-about__grid{ grid-template-columns:1fr; }
}

/* ===== Contact Form (CF7) ===== */
.ms-form { max-width: 760px; margin: 32px auto; }
.ms-form__row { margin: 16px 0; }
.ms-form__row label { display:block; font-weight:700; margin-bottom:8px; }
.ms-form__req { color:#ef4444; font-size:12px; margin-left:6px; }

.ms-form input[type="text"],
.ms-form input[type="email"],
.ms-form input[type="tel"],
.ms-form select,
.ms-form textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid #dbe5f1;
  border-radius:12px;
  background:#fff;
  outline:none;
  transition: box-shadow .15s, border-color .15s;
  font-size:16px;
}
.ms-form textarea{ min-height:180px; resize:vertical; }
.ms-form input:focus,
.ms-form select:focus,
.ms-form textarea:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
}

.ms-form__row.-agree { display:flex; align-items:center; gap:10px; }
.ms-form__row.-agree span { font-size:14px; color:#475569; }
.ms-form__row.-agree a { color:var(--ms-primary); text-decoration:underline; }

.ms-form__actions{ margin-top:24px; display:flex; gap:12px; }
.ms-btn--accent{ background:linear-gradient(135deg,#22c55e,#16a34a); border-color:transparent; }
.ms-btn--accent:hover{ transform:translateY(-2px) scale(1.01); filter:brightness(0.95); }

/* CF7 標準メッセージの色味 */
.wpcf7 form .wpcf7-response-output{
  border-radius:10px; margin:16px 0 0; padding:12px 16px;
}
.wpcf7 form.sent .wpcf7-response-output{ border-color:#16a34a; background:#f0fdf4; }
.wpcf7 form.invalid .wpcf7-response-output{ border-color:#f97316; background:#fff7ed; }
.wpcf7-not-valid-tip{ color:#ef4444; font-size:12px; margin-top:6px; }

/* 同意行を横並びに固定 */
.ms-accept{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

/* CF7が出すラッパーが block/100% を持っていると必ず縦落ちするので潰す */
.ms-accept > .wpcf7-form-control-wrap{
  display:inline-flex !important;
  width:auto !important;
  margin:0 !important;
  vertical-align:middle !important;
}

/* リスト項目も横並び化（テーマによって block 指定されることがある） */
.ms-accept .wpcf7-list-item{
  display:inline-flex !important;
  align-items:center;
  margin:0 !important;
}

.ms-accept label{display:inline-flex;align-items:center;gap:10px;margin:0;}

/* チェックボックスの見た目 */
.ms-accept input[type="checkbox"]{
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  position:static !important;
  opacity:1 !important;
  width:18px; height:18px;
  margin:0 8px 0 0 !important;
  accent-color:#0ea5e9;
}

/* バリデーションメッセージの整列 */
.ms-accept .wpcf7-not-valid-tip{
  order:2;
  width:100%;
  margin:6px 0 0 26px;
  font-size:13px;
  color:#ef4444;
}

/* スマホで ms-card 内のテキストが画像の下に潜るのを防ぐ */
@media (max-width: 560px){
  .ms-card__media{ position: relative; z-index: 0; }
  .ms-card__body { position: relative; z-index: 1; }
  .ms-card__title{ position: relative; z-index: 2; }
  .ms-card{
  display:flex;
  flex-direction:column;
  gap: 16px;            /* ←ここだけ追加 */
}
}

/* iOS Safari 向けの“上マージンつぶれ”保険（ほぼ効かせない値） */
@supports (-webkit-touch-callout: none) {
  .ms-card__body{ padding-top: 30px; }
}