nav.nav ul.item li {
  margin: 18px 0;
}
/* main-area中央配置 */
.main-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* トラブル一覧 2列レイアウト・カード小型化 */
@media (min-width: 700px) {
  .trouble-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
    justify-items: center;
    align-items: stretch;
  }
  .trouble-list li {
    min-width: 0;
    width: 90%;
    max-width: 320px;
    padding: 20px 18px 16px 18px;
  }
}
@media (max-width: 699px) {
  .moshimo-main,
  .trouble-section {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  .trouble-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
  }
  .trouble-list li {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
}
/* もしもの時 トラブル一覧カード */
.trouble-list li {
  background: #f8fbff;
  border-radius: 18px;
  border: 2.5px solid #b3d8f7;
  box-shadow: 0 4px 18px rgba(0,91,172,0.10);
  padding: 32px 36px 28px 36px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.22s, border-color 0.22s;
  font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
}
.trouble-list li:hover {
  box-shadow: 0 10px 32px rgba(0,91,172,0.18);
  border-color: #005bac;
}
.trouble-list a {
  font-size: 1.25rem;
  color: #005bac;
  text-decoration: none;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
  font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  transition: color 0.18s;
}
.trouble-list a:hover {
  color: #003d6a;
}
.trouble-list img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 8px rgba(0,91,172,0.10));
}
.trouble-list span {
  display: block;
  margin-top: 6px;
  color: #3a4a5d;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
}






/* --------------------------
   変数（まとめ）
   -------------------------- */

/* --------------------------
   リセット / 基本
   -------------------------- */

/* --------------------------
   STYLE.CSS - 構成（目次）
   1. 変数（:root）
   2. リセット / ベース
   3. ヘッダー・ナビ
   4. メイン / ヒーロー
   5. コンテンツセクション（feature/message/etc.）
   6. レイアウト補助（left-band / grids）
   7. フッター
   8. ユーティリティ（表示/非表示、アクセシビリティ）
   9. レスポンシブ上書き（重要な min/max ブレークポイント）
   10. 最終補正 / 強制上書き（最後にまとめて置く）
   -------------------------- */

/* --------------------------
   ヘッダー・ナビ
   -------------------------- */
/* NOTE: ヘッダー関連のスタイルはすべてここにまとめられています（各ページの重複スタイルを削除済み） */
@media (min-width:801px){
  header.header01{ display:flex; align-items:center; justify-content:space-between; padding:1rem; }
  div.logo{ width:400px; height:70px; }
  div.logo img{ width:100%; height:100%; object-fit:contain; }

  .nav{
    width:auto;
    max-width: calc(100% - (var(--left-band-width) + var(--left-band-gap) + 32px));
    padding:0;
    margin-left:50px;
    list-style:none;
    display:flex;
    gap:0;
  }
  .nav li{ width:auto; display:inline-flex; align-items:center; text-align:center; }
  .nav li a{
    color:#0a0303; font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; font-weight:bold;
    padding:10px 12px; text-decoration:none; display:block; background:#f8f4f4; border-radius:6px;
  }
  .nav li a:hover{ background:#555; color:#fff; }

  .header02{
    width: calc(100% - (var(--left-band-width) + var(--left-band-gap) + var(--content-side-gap)));
    max-width: var(--site-max-width);
    margin-left:auto;
    margin-right: calc(var(--content-side-gap));
    padding:8px 20px;
    box-sizing:border-box;
  }

  /* 統一ロゴ表示（各ページで差が出ないように） */
  .logo{ display:flex; align-items:center; height:var(--site-header-height); }
  .logo img{ height: calc(var(--site-header-height) - 12px); max-height: 72px; width: auto; object-fit: contain; display:block; }
}

/* モバイルヘッダー */
@media (max-width:800px){
  /* コンテンツがボトムメニューやフッターに隠れないよう、ページ下部に余白を追加 */
  body {
    padding-bottom: calc(200px + env(safe-area-inset-bottom)) !important;
  }
  #menu-btn {
    position:fixed;
    top:1rem;
    right:1rem;
    z-index:9999;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* 三本線ハンバーガー */
  #menu-btn span{
    display:block;
    width:22px;
    height:2px;
    background:#0451eb;
    border-radius:2px;
    position:relative;
    transition: transform .25s ease, background .25s ease, opacity .25s ease;
  }
  #menu-btn span::before,
  #menu-btn span::after{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:#0451eb;
    border-radius:2px;
    transition: transform .25s ease, top .25s ease, opacity .25s ease;
  }
  #menu-btn span::before{ top:-8px; }
  #menu-btn span::after{ top:8px; }

  /* 開いたときは中央を隠して X に変形 */
  #nav-input:checked ~ #menu-btn span{ background: transparent; }
  #nav-input:checked ~ #menu-btn span::before{ transform: translateY(8px) rotate(45deg); top:0; }
  #nav-input:checked ~ #menu-btn span::after{ transform: translateY(-8px) rotate(-45deg); top:0; }

  div.logo{ width:50px; height:20px; }
  /* モバイル時のロゴを中央寄せして見やすく */
  .logo{ display:flex; align-items:center; }
  .logo img{ height: calc(var(--site-header-height) - 12px); max-height:48px; width:auto; }
  nav.nav{ width:300px; height:100vh; position:fixed; top:0; right:-100%; z-index:9998; background:#3357f8; transition:0.5s; }
  nav.nav ul.item{ display:block; padding:4rem 2rem; list-style: none; }
  header.header02 #nav-input:checked ~ nav.nav{ right:0; }
}

/* --------------------------
   main / hero
   -------------------------- */
.main1{
  width: calc(100% - (var(--left-band-width) + var(--left-band-gap) + var(--content-side-gap)));
  max-width: var(--site-max-width);
  margin-left:auto;
  margin-right: calc(var(--content-side-gap));
  display:flex; align-items:center; justify-content:center;
  padding:8px 16px;
  max-height: calc(100vh - var(--site-header-height) - 24px);
  overflow:hidden;
}
.video-wrap1{ width:100%; height:100%; position:relative; overflow:hidden; }
.vidoe-wrap1{ width:100%; height:100%; position:relative; overflow:hidden; }
.main1 video{ width:100%; height:100%; object-fit:cover; display:block; }

/* --- 動画は常に表示（アニメ無効） --- */
.video-wrap1 video,
.vidoe-wrap1 video {
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

/* --------------------------
   midasi1（動画上の見出し）
   -------------------------- */
/* 基本（位置・表示の統一） */
.video-wrap1 { position: relative; overflow: hidden; }
.vidoe-wrap1 { position: relative; overflow: hidden; }

.midasi1{
  position: absolute !important;
  left: 68% !important;       /* デスクトップで右寄せ（必要なら微調整） */
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999 !important;    /* 動画より前面に出す */
  color: #fff !important;
  pointer-events: none !important;
  background: rgba(0,0,0,0.10); /* 軽い背景で視認性を確保（必要なら transparent） */
  padding: 6px 10px !important;
  border-radius: 8px !important;
  opacity: 0;
  /* midasi の文字だけをアニメーションさせる */
  animation: midasiIn 0.7s ease-out 0.08s forwards, midasiFloat 6s ease-in-out 1s infinite;
  text-shadow: 0 8px 20px rgba(0,0,0,0.45);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  line-height:1.05;
  font-weight:800;
  font-size: 18px;
  font-size: 18px;
  text-align:center;
}

/* モバイルは中央寄せ、浮遊はオフ */
@media (max-width:800px){
  .midasi1{
    left:50% !important;
    top:46% !important;
    transform: translate(-50%, -50%) !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: midasiIn 0.6s ease-out 0.05s forwards;
    font-size: 16px;
    font-size: 16px;
  }
}

/* midasi アニメーション（定義は一つ） */
@keyframes midasiIn {
  0% { opacity: 0; transform: translate(-50%, -44%) scale(0.98); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes midasiFloat {
  0%   { transform: translate(-50%, -50%) translateY(0); }
  50%  { transform: translate(-50%, -50%) translateY(-6px); }
  100% { transform: translate(-50%, -50%) translateY(0); }
}

/* --------------------------
   message
   -------------------------- */
/* message：下（下方）から浮き上がるアニメーション */
/* message を中央寄せ・達筆風に */
.message{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;      /* テキスト中央寄せ */
  padding: 36px 24px;
  margin: 56px auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,251,255,0.96));
  border-radius: 16px;
  border: 1px solid rgba(7,33,58,0.04);
  box-shadow: 0 26px 70px rgba(7,33,58,0.07);
  max-width: 980px;
  width: calc(100% - 48px);
  font-family: "Sawarabi Mincho", "Noto Serif JP", serif; /* 達筆風の和文フォント優先 */
  color: #062338;
  line-height: 1.8;
  opacity: 0;               /* アニメと連動して表示される想定 */
  transform: translateY(18px) scale(.995);
  transition: opacity .72s cubic-bezier(.2,.9,.2,1), transform .72s cubic-bezier(.2,.9,.2,1), box-shadow .4s;
  -webkit-font-smoothing: antialiased;
}

/* 内部のテキスト幅を制限して読みやすく */
.message .message-text{
  max-width: 820px;
  margin: 0 auto;
}

/* 見出し（達筆調） */
.message .message-text h1{
  margin: 0 0 12px;
  font-size: 20px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #04202a;
  text-wrap: balance;
}

/* 本文は読みやすいゴシックで均衡を取る */
.message .message-text p{
  margin: 0;
  font-family: "Noto Sans JP", "M PLUS Rounded 1c", sans-serif;
  font-size: 16px;
  color: #3b4a50;
  line-height: 1.9;
  white-space: pre-line;
}

/* 表示トリガー（is-active が付いたら浮かび上がる） */
.message.is-active{
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: 0 40px 110px rgba(7,33,58,0.12);
}

/* モバイル調整 */
@media (max-width: 800px){
  .message{ padding: 22px 14px; margin: 36px 12px; border-radius: 12px; width: calc(100% - 24px); }
  .message .message-text h1{ font-size: 18px; }
  .message .message-text p{ font-size: 15px; line-height: 1.75; }
}

/* アクセシビリティ：動きを減らす */
@media (prefers-reduced-motion: reduce){
  .message, .message.is-active, .message:hover { transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important; box-shadow: 0 12px 28px rgba(7,33,58,0.06) !important; }
}

/* --------------------------
   feature セクション
   -------------------------- */
.feature,
.feature.reverse{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px;
  margin:75px auto;
  width: calc(100% - (var(--left-band-width) + var(--left-band-gap) + 40px));
  max-width: var(--site-max-width);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.98));
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(7,33,58,0.04);
  color:#07213a;
  transform: translateX(-20px);
  transition: all 0.6s ease;
}
.is-active2{ transform:none; opacity:1; visibility:visible; }

/* テキスト */
.feature .feature-text{ flex:1 1 auto; min-width:0; padding:6px 12px; margin:0; }
  .feature .feature-text h1{ font-size: 18px; margin:0 0 8px; font-weight:800; color:#062338; line-height:1.15; }
.feature .feature-text p{ font-size:15px; line-height:1.6; margin:0; color:#3f4b55; }

/* 画像（小さめでテキスト優先） */
.feature img,
.feature.reverse img{
  flex:0 0 120px;
  width:120px;
  max-width:120px;
  height:auto;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 10px 24px rgba(7,33,58,0.06);
  border:1px solid rgba(7,33,58,0.04);
  margin:0;
}

/* reverse */
.feature.reverse{ flex-direction:row-reverse; }
.feature.reverse .feature-text{ padding-left:8px; padding-right:8px; }

/* モバイル */
@media (max-width:800px){
  .feature, .feature.reverse{ width: calc(100% - 32px); margin:36px auto; flex-direction:column; gap:14px; padding:16px; }
  .feature img, .feature.reverse img{ width:100%; max-width:100%; flex:none; }
  .feature .feature-text p{ font-size:15px; line-height:1.8; }
}

/* --------------------------
   scroll 横スライダー
   -------------------------- */
.scroll_wrap{
  width: calc(100% - (var(--left-band-width) + 64px));
  max-width: var(--site-max-width);
  margin: 6vh auto;
  padding:18px 12px;
  overflow:hidden;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(3,30,66,0.03), rgba(255,255,255,0.02));
}
.scroll_track .scroll_inner{ display:flex; gap:var(--scroll-gap); align-items:stretch; width:max-content; padding:8px 4px; animation: infiniteScroll var(--scroll-speed) linear infinite; }
.scroll_cont{ flex:0 0 auto; width:var(--scroll-card-width); background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 10px 26px rgba(7,33,58,0.06); }
.scroll_cont img{
  width:100%;
  max-width:320px;
  height: 28vw;
  max-height: 180px;
  object-fit:cover;
  display:block;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(7,33,58,0.13), 0 2px 8px rgba(0,0,0,0.08);
  border: 2px solid #eaf6ff;
  transition: box-shadow 0.3s, transform 0.3s;
  background: linear-gradient(120deg, #eaf6ff 0%, #f7fbff 100%);
  padding: 6px;
}
.scroll_cont img:hover {
  box-shadow: 0 16px 40px rgba(7,33,58,0.22), 0 4px 16px rgba(0,0,0,0.12);
  transform: scale(1.04) translateY(-4px);
  border-color: #07a5ee;
}


/* --------------------------
   tousyanoiitokoro（カード群）
   -------------------------- */
.tousyanoiitokoro{
  position: relative;
  max-width: var(--site-max-width,1200px);
  margin: 48px auto;
  padding: 32px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(7,33,58,0.08);
  border: 1px solid rgba(7,33,58,0.04);
  overflow: visible;
}

/* 見出し */
.tousyanoiitokoro .example2{
  font-size: 20px;
  font-size: 20px;
  font-weight: 900;
  color: #062338;
  text-align: center;
  margin: 0 0 18px;
  position: relative;
  letter-spacing: 0.02em;
}

/* 見出し下のアクセントライン */
.tousyanoiitokoro .example2::after{
  content: "";
  display: block;
  width: 88px;
  height: 6px;
  margin: 12px auto 0;
  border-radius: 6px;
  background: linear-gradient(90deg,#0b63ff,#07b3ff);
  box-shadow: 0 8px 20px rgba(11,99,255,0.12);
}

/* カード群 */
.tousyanoiitokoro .item-list{
  margin-top: 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 各カード */
.tousyanoiitokoro .item-list li{
  list-style: none;
}
.tousyanoiitokoro .item-list .center{
  background: linear-gradient(180deg,#fff,#f6fbff);
  border-radius: 12px;
  padding: 18px;
  height: 100%;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 0 12px 30px rgba(7,33,58,0.05);
  border: 1px solid rgba(7,33,58,0.03);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
}

/* 画像 */
.tousyanoiitokoro .center img{
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 10px;
  flex: 0 0 64px;
  box-shadow: 0 8px 18px rgba(7,33,58,0.06);
}

/* テキスト領域 */
.tousyanoiitokoro .center dl{
  margin: 0;
}
.tousyanoiitokoro .center dt{
  font-weight: 800;
  color: #062338;
  font-size: 16px;
  margin-bottom: 6px;
}
.tousyanoiitokoro .center dd{
  margin: 0;
  color: #4b5862;
  line-height: 1.6;
  font-size: 14px;
}

/* ホバーで浮き上がる */
@media (hover: hover) {
  .tousyanoiitokoro .center:hover{
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(7,33,58,0.10);
  }
}

/* 目立たせたい最初のカード（任意） */
.tousyanoiitokoro .item-list li:first-child .center{
  background: linear-gradient(180deg,#f6fbff,#ffffff);
  border: 1px solid rgba(11,99,255,0.06);
}

/* レスポンシブ：2カラム → 1カラム */
@media (max-width: 1000px){
  /* body下部余白をさらに増やす */
  body {
    padding-bottom: calc(300px + env(safe-area-inset-bottom)) !important;
  }
  /* footerのz-indexを下げてボトムメニューの下に */
  footer {
    z-index: 10 !important;
    position: relative !important;
  }
  .tousyanoiitokoro .item-list{ grid-template-columns: 1fr; gap:12px; }
  .tousyanoiitokoro .center{ padding:14px; gap:12px; }
  .tousyanoiitokoro .center img{ width:56px; height:56px; flex:0 0 56px; }
}

/* アクセシビリティ：動きを減らす */
@media (prefers-reduced-motion: reduce){
  .tousyanoiitokoro .center,
  .tousyanoiitokoro .center:hover{
    transition: none !important;
    transform: none !important;
    box-shadow: 0 12px 24px rgba(7,33,58,0.06) !important;
  }
}

/* --------------------------
  footer
  -------------------------- */
.footer .footer-logo svg,
.footer .footer-logo span,
.footer .footer-logo-text {
  fill: #fff !important;
  color: #fff !important;
}
/* footerデザイン統一・バランス調整 */

/* デスクトップでも確実に表示する（オーバーライド） */
@media (min-width:801px){
  .footer {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 999 !important;
    text-align: center;
  }
  .footer > * {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* --------------------------
   左側固定の帯
   -------------------------- */
.left-band{
  position:fixed; left:18px; top:10vh; bottom:10vh; width:var(--left-band-width);
  display:flex; align-items:center; justify-content:center;
  border:2px solid #07213a; border-radius:12px; background:rgba(255,255,255,0.95); z-index:9999; box-shadow:2px 8px 20px rgba(0,0,0,0.08);
  min-height:320px;
  padding:24px 8px;
}
.left-band__text{ writing-mode:vertical-rl; text-orientation:upright; color:#07213a; font-weight:700; letter-spacing:.08em; font-size:16px; font-family:"M PLUS Rounded 1c","Noto Sans JP",sans-serif; line-height:1; }

/* 全体調整（左帯を避ける） */
@media (min-width:801px){
  header.header01, header.header02, .main1, .feature, .scroll_wrap, .tousyanoiitokoro, footer{
    margin-left: calc(var(--left-band-width) + var(--left-band-gap));
    width: calc(100% - (var(--left-band-width) + var(--left-band-gap)));
  }
  }
    .moshimo-main {
      margin-left: calc(var(--left-band-width, 60px) + var(--left-band-gap, 24px) + 32px);
      margin-right: auto;
    }

/* アクセシビリティ */
@media (prefers-reduced-motion: reduce){
  .scroll_track .scroll_inner{ animation:none !important; }
}

/* ナビ用のチェックボックスを画面外へ隠す（視覚的なチェックを消す） */
#nav-input {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* （ラベルはハンバーガー表示のまま機能させる） */
#menu-btn { z-index: 9999; cursor: pointer; }

/* PC 表示で main2 を非表示（モバイルは表示を維持） */
@media (min-width: 801px) {
  .main2 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* モバイルでは従来通り表示 */
@media (max-width: 800px) {
  .main2 {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* PC でスマホ用固定アイコン類を非表示にする（削除済み。必要なら戻します） */

/* モバイルでは従来どおり表示 */
@media (max-width: 800px) {
  .sumahoimages { display: block !important; visibility: visible !important; height: auto !important; overflow: visible !important; }
  .floating-banner { display: block !important; visibility: visible !important; }
  .botommenu { display: flex !important; visibility: visible !important; }
}

/* feature が左帯にかぶらないように右へオフセットして画面内に収める */
:root{
  --left-band-width: 110px;
  --left-band-gap: 24px;
  --feature-safety: 12px; /* 必要に応じて調整 */
}

/* デスクトップで左帯分の余白を確保 */
@media (min-width: 801px) {
  .feature,
  .feature.reverse {
    margin-left: calc(var(--left-band-width) + var(--left-band-gap) + var(--feature-safety)) !important;
    width: calc(100% - (var(--left-band-width) + var(--left-band-gap) + var(--feature-safety) + 24px)) !important;
    max-width: var(--site-max-width, 1200px) !important;
    box-sizing: border-box !important;
    align-items: center;
    gap: 12px;
    padding: 14px;
  }

  /* 画像を小さくしてテキスト優先に */
  .feature img,
  .feature.reverse img {
    flex: 0 0 110px !important;
    width: 110px !important;
    max-width: 110px !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 8px;
  }

  /* テキスト側が縮むと横スクロールになるのを防ぐ */
  .feature .feature-text,
  .feature.reverse .feature-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* モバイルはフル幅で縦積み（従来の見た目を維持） */
@media (max-width: 800px) {
  .feature,
  .feature.reverse {
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - 32px) !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .feature img,
  .feature.reverse img {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
}

/* example1 の見出しを中央に配置 */
.example1 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 28px 12px;
  margin: 40px auto;
  box-sizing: border-box;
}

.example1 h1 {
  margin: 0;
  font-size: 20px;
  font-size: 20px;
  font-weight: 800;
  color: #062338;
}

/* モバイルでの微調整 */
@media (max-width: 800px) {
  .example1 { padding: 18px 12px; margin: 28px auto; }
  .example1 h1 { font-size: 18px; }
}

/* モバイルで left-band を非表示にする */
@media (max-width: 800px) {
  .left-band {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* モバイル：main1 を非表示にして main2 を表示 */
@media (max-width: 800px) {
  .main1 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .main2 {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* デスクトップでは従来通り main1 を表示、main2 を非表示（必要なら調整） */
@media (min-width: 801px) {
  .main1 { display: block !important; visibility: visible !important; height: auto !important; }
  .main2 { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }
}

/* モバイル：.main2 を画面内に収める調整 */
@media (max-width: 800px) {
  /* ビューポート - ヘッダー高さ を main2 の最大高さにする */
  .main2 {
    display: block !important;
    height: calc(100vh - var(--site-header-height, 76px));
    max-height: calc(100vh - var(--site-header-height, 76px));
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
  }

  .video-wrap2 {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000; /* 動画読み込み前の背景 */
  }

  /* 動画は枠内に収まる（縦横比を保って最大サイズに）。必要なら object-fit: cover に変更 */
  .video-wrap2 video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
  }

  /* キャッチコピーを中央寄せで重ねる */
  .video-wrap2 .midasi2 {
    position: absolute;
    left: 50%;
    top: 12%;
    transform: translateX(-50%);
    z-index: 3;
    color: #fff;
    text-align: center;
    padding: 6px 12px;
    background: rgba(0,0,0,0.28);
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0,0,0,0.32);
  }

  /* 不要な余白・スクロール防止 */
  html, body { height: 100%; }
  body { margin: 0; -webkit-overflow-scrolling: touch; }
}

/* モバイルで main2 を少し小さくして画面に収まりやすくする */
@media (max-width: 800px) {
  .main2{
    display: block !important;
    width: calc(100% - 24px);
    max-width: 720px;
    /* ロゴと重ならないよう上部にスペースを確保 */
    margin: calc(var(--site-header-height, 76px) + 12px) auto 10px;
    /* 高さを控えめに（画面高さの目安に合わせる） */
    max-height: 60vh;
    height: auto;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(7,33,58,0.06);
    padding: 6px;
    box-sizing: border-box;
  }

  /* 動画ラッパーはコンテナにフィットさせる */
  .video-wrap2{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
  }

  /* 動画はコンテナ内に収めつつ幅優先で表示 */
  .video-wrap2 video{
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover; /* contain に戻したければ変更可 */
    display: block;
  }

  /* midasi の位置を多少上へ（見切れを防ぐ） */
  .video-wrap2 .midasi2{
    top: 10%;
    font-size: 13px;
    font-size: 13px;
    padding: 6px 10px;
  }
}

/* モバイルで固定バナーを非表示 */
@media (max-width: 800px) {
  .floating-banner {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* モバイルで .message を画面内に抑える */
@media (max-width: 800px) {
  .message{
    width: calc(100% - 24px);
    max-width: 720px;
    margin: calc(var(--site-header-height, 76px) + 10px) auto 12px;
    padding: 14px 12px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(7,33,58,0.06);
    box-sizing: border-box;
    /* ビューポートに合わせて最大高さを指定（ヘッダー分を差し引く） */
    max-height: calc(100vh - var(--site-header-height, 76px) - 40px);
    overflow: hidden;
  }

  /* テキストブロックだけスクロール可能にして見出しを常に表示 */
  .message .message-text{
    max-height: calc(100vh - var(--site-header-height, 76px) - 110px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 8px; /* スクロールバー分の余裕 */
    word-break: break-word;
  }

  /* 見出しと本文の調整 */
  .message .message-text h1{
    font-size: 18px;
    font-size: 18px;
    margin-bottom: 8px;
  }
  .message .message-text p{
    font-size: 14px;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }

  /* reduced-motion の配慮 */
  @media (prefers-reduced-motion: reduce){
    .message, .message .message-text { transition: none !important; animation: none !important; }
  }
}

/* モバイル：下部固定のボトムメニュー */
@media (max-width: 800px) {
  .botommenu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 8px;
    padding: calc(8px + env(safe-area-inset-bottom)) 12px  calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(144, 213, 253, 0.95), rgba(6,80,150,0.92));
    box-shadow: 0 -8px 30px rgba(7,33,58,0.18);
    border-top: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    pointer-events: auto;
  }

  /* モバイル時、footer下に強制余白を追加 */
  footer {
    margin-bottom: 120px !important;
  }

  .botommenu li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .botommenu a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    padding: 6px 8px;
    white-space: nowrap;
  }

  .botommenu img {
    width: 28px;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 14px rgba(255, 255, 255, 0.934));
  }

  .botommenu .iconname {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
  }

  /* コンテンツがボトムメニューに隠れないよう、ページ下部に余白を追加 */
  body {
    padding-bottom: calc(200px + env(safe-area-inset-bottom)) !important;
  }
}

/* デスクトップでは非表示 */
@media (min-width: 801px) {
  .botommenu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* モバイルで list 系の文字を黒にする（以前の白指定を上書き） */
@media (max-width: 800px) {
  .nav .item .list a,
  .list,
  .list a,
  .item-list li .center dt,
  .item-list li .center dd,
  .scroll_cont p {
    color: #000 !important;
    text-shadow: none !important;
  }

  /* ナブのリンク文字を白に */
  .nav .item .list a,
  .nav .item .list a:visited,
  .nav .item .list a:link {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important;
  }

  /* メニューボタンの線（ハンバーガー）やラベルも見やすく */
  #menu-btn span,
  #menu-btn {
    color: #ffffff !important;
  }
}

/* モバイルで .message を下げる（ロゴやハンバーガーと被らないように調整） */
@media (max-width: 800px) {
  /* 通常時の余白を増やす（必要なら数値を調整） */
  .message {
    margin-top: calc(var(--site-header-height, 76px) + 28px) !important;
  }

  /* ハンバーガーメニュー開時はさらに下げる（JSで body.nav-open を付与している想定） */
  body.nav-open .message {
    margin-top: calc(var(--site-header-height, 76px) + 96px) !important;
    transition: margin-top .22s ease;
  }
}

/* モバイル：ハンバーガー開時に midasi を下げて重なりを防ぐ */
@media (max-width: 800px) {
  /* メニューの高さ分だけ下げる（ヘッダ変数を利用） */
  :root { --nav-open-offset: calc(var(--site-header-height, 76px) + 12px); }

  body.nav-open .midasi1,
  body.nav-open .midasi2,
  body.nav-open .video-wrap1 .midasi1,
  body.nav-open .video-wrap2 .midasi2 {
    /* translateY で移動（既存の transform と競合する場合は調整してください） */
    transform: translateY(var(--nav-open-offset)) !important;
    transition: transform .22s ease !important;
    z-index: 9997 !important; /* nav.nav(9998)より下にしてメニューが上に来るように */
  }

  /* もし midasi が絶対位置で top を使う場合のフォールバック */
  body.nav-open .video-wrap1 .midasi1[style],
  body.nav-open .video-wrap2 .midasi2[style] {
    top: calc(var(--nav-open-offset) + 6px) !important;
  }

  /* video ラッパー自体を下げたい場合（代替案） */
  body.nav-open .main1,
  body.nav-open .main2 {
    margin-top: var(--nav-open-offset) !important;
    transition: margin-top .22s ease !important;
  }
}

/* モバイル：ロゴと main の間の余白を詰める */
@media (max-width: 800px) {
  /* ヘッダー周りをコンパクトに */
  header.header01 {
    padding: 6px 12px !important;
  }
  .logo {
    margin: 4px 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .logo img {
    height: 40px !important; /* 必要に応じて調整 */
    width: auto !important;
    display: block;
  }

  header.header02 {
    padding: 6px 12px !important;
    margin-top: 0 !important;
  }
  #menu-btn { margin-top: 0 !important; }

  /* main（main1 / main2 / message 等）の上マージンを縮小 */
  .main1, .main2, .message, .sumahoimages {
    margin-top: 6px !important;
    padding-top: 6px !important;
  }

  /* モバイルでアイコン用の .images を非表示（画像バー: Line/電話） */
  .images { display: none !important; }

  /* 動画ラッパー等の内部余白も抑える */
  .video-wrap1, .video-wrap2 {
    padding-top: 6px !important;
  }

  /* 左帯は非表示なら main の余白調整は不要だが念のため */
  .left-band { display: none !important; }
}

/* --------------------------
   ユーティリティ / ヘルパー
   -------------------------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.visually-hidden{ position:absolute !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; height:1px; width:1px; margin:-1px; padding:0; border:0; }
.u-hidden{ display:none !important; }
.u-center{ margin-left:auto; margin-right:auto; }

/* ナビ開時の補助クラス（JSが body に .nav-open を付与する想定） */
body.nav-open { overflow: hidden; }

/* --------------------------
   最終補正 / 強制上書き（ここに詰める）
   重要な上書きはここに追加してください
   -------------------------- */
/* 例: PC で常に表示させたい要素の強制上書き */
@media (min-width: 801px) {
  .u-show-desktop { display: block !important; visibility: visible !important; }
}

/* モバイルのfooter/ボトムメニュー重なり・余白最終補正 */
@media (max-width: 800px) {
  body {
    padding-bottom: 0 !important;
  }
  .footer {
    z-index: 1 !important;
    position: relative !important;
    margin-bottom: 0 !important;
  }
  .botommenu {
    z-index: 9999 !important;
  }
}