@charset "UTF-8";

/* --------------------------
   変数（まとめ）
   -------------------------- */
:root{
  --left-band-width: 110px;
  --left-band-gap: 24px;
  --site-header-height: clamp(64px,8vh,120px);
  --content-side-gap: 24px;
  --site-max-width: 1200px;
  --scroll-gap: 28px;
  --scroll-speed: 14s;
  --scroll-card-width: min(340px, 28vw);
  --feature-safety: 12px; /* 必要に応じて調整 */
}

/* --------------------------
   リセット / 基本
   -------------------------- */
*{ box-sizing: border-box; margin:0; padding:0; }
html,body{ overflow-x:hidden; }
body{ font-family: "Noto Sans JP", "M PLUS Rounded 1c", sans-serif; color:#07213a; padding-right:0; }

/* --------------------------
   STYLE.CSS - 構成（目次）
   1. 変数（:root）
   2. リセット / ベース

  /* 会社案内ページ専用デザイン */
  .company-info {
    max-width: 700px;
    margin: 48px auto 0 auto; /* 下の余白を削除 */
    padding: 32px 24px 16px 24px; /* 下のpaddingも減らす */
    background: linear-gradient(120deg, #f3f8ff 0%, #fff 100%);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(7,33,58,0.10);
    font-family: 'Noto Sans JP', 'M PLUS Rounded 1c', sans-serif;
  }
  .company-info h1 {
    text-align: center;
    font-size: 2rem;
    color: #1976d2;
    margin-bottom: 32px;
    letter-spacing: 0.08em;
  }
  .company-section dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    row-gap: 18px;
    column-gap: 18px;
    background: #fff;
    border-radius: 14px;
    padding: 32px 24px;
    box-shadow: 0 2px 12px rgba(7,33,58,0.06);
  }
  .company-section dt {
    font-weight: bold;
    color: #1565c0;
    font-size: 1.08em;
    text-align: right;
    align-self: start;
    padding-top: 4px;
  }
  .company-section dd {
    margin: 0;
    color: #333;
    font-size: 1.05em;
    line-height: 1.7;
    letter-spacing: 0.02em;
  }
  .company-section dd strong {
    color: #1976d2;
    font-weight: bold;
    font-size: 1em;
  }
  @media (max-width: 700px) {
    .company-info {
      padding: 12px 2vw 6px 2vw;
      margin: 18px 0 0 0;
    }
    .company-section dl {
      grid-template-columns: 1fr;
      padding: 18px 6px;
    }
    .company-section dt {
      text-align: left;
      padding-top: 0;
      margin-bottom: 2px;
    }
  }

/* --------------------------
   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: clamp(20px, 3.6vw, 34px);
  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: clamp(18px, 5.6vw, 22px); }
  .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: clamp(18px,2.4vw,28px); 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%; height: calc(var(--scroll-card-width) * 0.62); object-fit:cover; display:block; }

/* --------------------------
   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: clamp(20px, 3.2vw, 28px);
  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){
  .tousyanoiitokoro .item-list{ grid-template-columns: repeat(2, 1fr); gap:16px; }
}
@media (max-width: 720px){
  .tousyanoiitokoro{ padding:20px; margin:32px 12px; border-radius:12px; }
  .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{
  width: calc(100% - (var(--left-band-width) + var(--left-band-gap)));
  max-width: var(--site-max-width);
  margin-left: calc(var(--left-band-width) + var(--left-band-gap));
  margin-right: 0;
  padding:16px 14px;
  background:#071639;
  color: rgba(255,255,255,0.95);
  border-radius:8px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.footer .logo img{ max-width:180px; height:auto; display:block; }

/* モバイル footer */
@media (max-width:800px){
  .footer{ width: calc(100% - 32px); margin:12px auto 60px; padding:12px; flex-direction:column; align-items:center; text-align:center; }
  .footer .logo img{ max-width:140px; }
}

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

/* --------------------------
   左側固定の帯
   -------------------------- */
.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); padding: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)));
  }
}

/* アクセシビリティ */
@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: clamp(20px, 3.2vw, 36px);
  font-weight: 800;
  color: #062338;
}

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

/* モバイルで 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: clamp(14px, 4.2vw, 18px);
    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: clamp(13px, 4vw, 18px);
    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: max(18px, min(22px, 4.2vw));
    margin-bottom: 8px;
  }
  .message .message-text p{
    font-size: 14px;
    font-size: max(14px, min(15px, 3.6vw));
    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(3,34,52,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;
  }

  .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(0,0,0,0.25));
  }

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

  /* コンテンツがボトムメニューに隠れないよう、ページ下部に余白を追加 */
  body {
    padding-bottom: calc(72px + 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: 1600 !important; /* メニューより上に出す必要があれば増やす */
  }

  /* もし 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; }
}

/* EOF: style.css */

/* 会社案内ページ専用デザイン */
.company-info {
  max-width: 700px;
  margin: 48px auto 56px auto;
  padding: 32px 24px;
  background: linear-gradient(120deg, #f3f8ff 0%, #fff 100%);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(7,33,58,0.10);
  font-family: 'Noto Sans JP', 'M PLUS Rounded 1c', sans-serif;
}
.company-info h1 {
  text-align: center;
  font-size: 2rem;
  color: #1976d2;
  margin-bottom: 32px;
  letter-spacing: 0.08em;
}
.company-section dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  row-gap: 18px;
  column-gap: 18px;
  background: #fff;
  border-radius: 14px;
  padding: 32px 24px;
  box-shadow: 0 2px 12px rgba(7,33,58,0.06);
}
.company-section dt {
  font-weight: bold;
  color: #1565c0;
  font-size: 1.08em;
  text-align: right;
  align-self: start;
  padding-top: 4px;
}
.company-section dd {
  margin: 0;
  color: #333;
  font-size: 1.05em;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.company-section dd strong {
  color: #1976d2;
  font-weight: bold;
  font-size: 1em;
}
@media (max-width: 700px) {
  .company-info {
    padding: 12px 2vw;
    margin: 18px 0 32px 0;
  }
  .company-section dl {
    grid-template-columns: 1fr;
    padding: 18px 6px;
  }
  .company-section dt {
    text-align: left;
    padding-top: 0;
    margin-bottom: 2px;
  }
}