/*
Theme Name: Fukuoka FA
Version: 1.0.0-base
*/

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100dvh;overflow:hidden}
@supports not (height:100dvh){html,body{height:100vh}}
body{
  font-family:"Montserrat","Noto Sans JP",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:#fff;
}

/* ===== Fixed header band ===== */
:root{ --header-h: 72px; }

.site-header{
  position:fixed; top:0; left:0; right:0;
  height:var(--header-h);
  z-index:1000;
  background:rgba(0,0,0,.55);
  backdrop-filter:saturate(140%) blur(6px);
}
.site-header__inner{
  height:100%;
  max-width:min(1200px,92vw);
  margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:block; line-height:0; }
.brand img{ height:calc(var(--header-h) - 16px); width:auto; display:block; object-fit:contain; }
.global-nav .menu{ display:flex; gap:22px; margin:0; padding:0; list-style:none; }
.global-nav a{ color:#fff; text-decoration:none; font-weight:700; letter-spacing:.08em; font-size:14px; opacity:.96; }
.global-nav a:hover{ text-decoration:underline; }

/* 管理バー対策（ログイン時） */
body.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .site-header{ top:46px; } }

/* ===== Horizontal Scroll (native) ===== */
#hs{
  display:flex; flex-direction:row;
  width:100%; height:100%;
  overflow-x:auto; overflow-y:hidden;
  /* 強制スナップは使わない（ジャンプ防止） */
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
#hs::-webkit-scrollbar{ display:none; }

.panel{
  position:relative;
  flex:0 0 100vw;
  width:100vw; min-width:100vw;   /* 左端に戻り切らない症状の保険 */
  height:100%;
  overflow:hidden;
  scroll-snap-align:none;
  color:#fff;
}
.panel::before{
  content:""; position:absolute; inset:0;
  background: var(--bg) center/cover no-repeat;
  z-index:0;
}
.panel__inner{
  position:relative; z-index:1;
  max-width:min(1200px,92vw); margin:0 auto; padding:6rem 3rem;
}

/* ===== TOP Slider ===== */
.panel--top .slides,.panel--top .slide{ position:absolute; inset:0; }
.panel--top .slide{
  background: var(--bg) center/cover no-repeat;
  opacity:0; transition:opacity .8s ease;
}
.panel--top .slide.is-active{ opacity:1; }

/* Tagline（左寄せ・帯の下から） */
.tagline{
  position:absolute;
  left: clamp(16px, 5vw, 40px);
  top:  calc(var(--header-h) + clamp(80px,10vh,160px));
  display:flex; flex-direction:column; gap:.12em;
  margin:0; padding:0; text-align:left; z-index:2; pointer-events:none;
}
.panel--top .tagline p{
  margin: 0 !important;
  font-family: "Montserrat","Noto Sans JP",sans-serif !important;
  font-weight: 600 !important;
  font-size: 100px !important;     /* ← clamp を消して固定pxに */
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,0.96) !important;
  -webkit-text-stroke: .3px rgba(0,0,0,.10) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.18) !important;
}

/* ===== VISION ===== */
.panel--vision .vision-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block; z-index:0; pointer-events:none;
}
.panel--vision::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.18); pointer-events:none; z-index:1;
}
.panel--vision .panel__inner{ position:relative; z-index:2; }
.panel--vision h2{ font-size:clamp(28px,3.2vw,48px); margin:0 0 .6em; }
.panel--vision p{ font-size:clamp(16px,1.6vw,22px); max-width:48ch; }

/* ===== 白面 ===== */
.panel--plain{ color:#111; }
.panel--plain::before{ background:#fff; }
.news{ list-style:none; padding:0; margin:1rem 0 0; }
.news li{ margin:.4rem 0; }

/* === Logo left-fixed (safe minimal patch) === */
:root{
  --brand-left: 16px;  /* 画面左からの固定余白。お好みで 12〜24px */
  --header-h:   72px;  /* 帯の高さを使っているなら合わせる */
  --logo-h:     64px;  /* ロゴの高さ。ここだけ変えればサイズ調整OK */
}

/* ヘッダー帯はそのまま固定 */
.site-header{
  position: fixed;
  top: var(--adminbar, 0px);   /* 管理バーがあるときのズレ吸収 */
  left: 0; right: 0;
  height: var(--header-h);
  z-index: 1000;
}

/* 内側の箱を“中央幅制限”から解放して左寄せ固定にする */
.site-header__inner{
  max-width: none !important;    /* ← これで画面幅で動かない */
  margin: 0 !important;
  padding-left: var(--brand-left) !important;  /* 左端の基準 */
  padding-right: 28px !important;              /* 右は少し余裕 */
  display: flex; align-items: center; justify-content: space-between;
}

/* ロゴ画像：高さだけでコントロール（幅は自動） */
.brand{ display:block; line-height: 0; }
.brand img{
  height: var(--logo-h) !important;
  width: auto !important;
  object-fit: contain;
  display: block;
}

/* メニューは右側へ押し出す */
.global-nav{ margin-left: auto; }

/* タグラインの左端もロゴに揃える（TOP面だけ） */
.panel--top .tagline{ left: var(--brand-left) !important; }

/* TOP タグラインの行間を“22px”で固定 */
.panel--top .tagline{
  gap: 32px !important;  /* ← ここだけで3行の間隔が決まる */
}

/* 各行は1行テキストなので line-height は1でOK（上下のにじみ防止） */
.panel--top .tagline p{
  line-height: 1 !important;
}

/* ===== VISION 大見出し ===== */
.panel--vision .vision-title {
  position: absolute;
  left: 6%;
  top: 22.5vh;
  margin: 0;
  font-family: "Montserrat","Noto Sans JP",sans-serif;
  font-weight: 700;
  font-size: 124px;
  line-height: 1.1;
  color: rgba(255,255,255,0.96);
  -webkit-text-stroke: .3px rgba(0,0,0,.1);
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  z-index: 2;
}

/* ===== 共通：白地テキスト面 ===== */
.panel--text{
  color:#111;
  background:#fff;           /* 横スク基盤では :before 背景を使わず実体に */
}
.panel--text .panel__inner{
  max-width: min(1100px, 90vw);
  /* 上だけ黄金比ベースに最適化（他は現状維持） */
  padding: clamp(280px, 24vh, 420px) clamp(24px, 6vw, 48px);
}
.kicker{ font-size:14px; letter-spacing:.18em; font-weight:800; opacity:.7; margin:0 0 .6rem; }
.h1{ font-size: clamp(24px, 3.3vw, 40px); margin:.2rem 0 1rem; line-height:1.35; }

/* 本文を大見出しサイズに統一 */
.panel--text p{
  font-size: clamp(24px, 3.3vw, 124px);
  font-weight: 800;
  line-height: 1.45;
  margin: 0 0 1rem;
}

/* ===== タイトル面（VISION/ACTIONS/ABOUT の大見出し） ===== */
.panel--title{ position:relative; }
.panel--title::before{
  content:""; position:absolute; inset:0;
  background: var(--bg) center/cover no-repeat;
  z-index:0;
}
/* ===== タイトル面（ACTIONS/ABOUT 見出し） ===== */
.panel--title .section-title{
  position: absolute;
  left: 6%;
  top: 22.5vh;
  margin: 0;
  z-index: 2;
  font-family: "Montserrat","Noto Sans JP",sans-serif;
  font-weight: 700;
  font-size: 124px;
  line-height: 1.1;
  letter-spacing: 0;
  color: rgba(255,255,255,0.96);
  -webkit-text-stroke: .3px rgba(0,0,0,.1);
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* ===== ACTIONS 4カード ===== */
.panel--cards{ background:#fff; color:#111; }
.cards{
  display: grid;
  gap: clamp(16px, 2.2vw, 28px);

  /* ← PCでは 2×2 を固定で並べる */
  grid-template-columns: repeat(2, minmax(0,1fr));
  grid-template-rows:    repeat(2, minmax(0,1fr));

  /* ヘッダーにかからないよう上に余白を足す */
  padding: clamp(24px, 4vh, 48px) clamp(24px, 6vw, 48px);
  padding-top: calc(var(--header-h) + clamp(16px, 3vh, 32px));

  height: 100%;
  align-items: stretch;   /* 各セルにピッタリ伸ばす */
  justify-items: stretch; /* 各セルにピッタリ伸ばす */
}

.card{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background:#f3f3f3;

  /* グリッドのセルいっぱいにフィットさせる */
  height: 100%;
  min-height: 0;



  /* ← 正方形タイル化（高さ＝幅） */
  aspect-ratio: 16 / 9;

  /* テキストを下寄せにしたい場合のために */
  display: flex;
  align-items: flex-end;
}

.card::before {
  content:"";
  position:absolute; inset:0;
  background: var(--bg) center/cover no-repeat;
  opacity:.85;
  pointer-events:none;
  border-radius: inherit;
}

/* 黒透明の帯を文字部分だけに */
.card__body {
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.55); /* 半透明の黒帯 */
  padding: 20px 28px;              /* 黄金比ベースの余白 */
  margin-bottom: 3%;               /* 下端から少し浮かせる */
  border-radius: 12px;             /* 上下とも角丸にして独立ラベル化 */
  color: #fff !important;          /* 白文字を強制 */
  text-shadow: 0 2px 4px rgba(0,0,0,0.6); /* 白文字が沈まない */
  width: 100%;
}

.card h3{ margin:0 0 .2rem; font-size: clamp(16px, 1.6vw, 22px); }

.card h3 {
  font-size: clamp(22px, 4vw, 42px);  /* 日本語タイトル */
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.4em;
  color: #fff !important;
}

.card h3 .en {
  display: block;
  font-size: clamp(14px, 2.4vw, 24px); /* 英語サブ */
  font-weight: 600;
  opacity: 0.9;
  margin-top: 0.3em;
  letter-spacing: 0.02em;
  color: #fff !important;
}

.card p{ margin:0; font-size: clamp(12px, 1.2vw, 16px); }

/* 幅が狭い時は2列/1列に落とす（2列指定は維持） */
@media (max-width: 1200px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .cards{ grid-template-columns: 1fr; }
}

/* タイトル面は内側ボックスを基準にしない */
.panel--title .panel__inner{ position: static; }



/* ==========================
   MESSAGE セクション（確定版）
   ========================== */
.panel--about-body .panel__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 130px 32px 72px;
}

.panel--about-body p {
  font-size: clamp(28px, 1.6vw, 36px);
  line-height: 1.8;
  font-weight: 500;
  margin: 0 0 1.4rem;
  letter-spacing: 0.02em;
}

/* 署名：右寄せせず、左寄せ＋左余白で調整 */
.signature {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 40px;
  padding-left: 81%;   /* ←ここを増減して右に寄せる */
}

/* 署名全体 */
.signature {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 40px;
}

/* 1行目 */
.signature .sig-line1 {
  padding-left: 4%;  /* ←ここを調整 */
}

/* 2行目 */
.signature .sig-line2 {
  padding-left: 20%;  /* ←ここを調整 */
}

/* ===========================
   CONTACT セクション（左揃え版）
   =========================== */
.panel--contact{
  background: #1e242c;  /* 単色に変更 */
  color: #fff;
  padding: 25vh 12% 18vh;
  text-align: left;
}

.panel--contact .panel__inner{
  max-width: 680px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 100px;
  text-align: left;
}

.panel--contact .contact-label,
.panel--contact .access-label{
  font-size: 15px;
  letter-spacing: .18em;
  font-weight: 700;
  opacity: .65;
  margin: 0 0 10px;
}

.panel--contact .contact-email{
  font-size: clamp(22px, 3.0vw, 36px);
  font-weight: 800;
  margin: 0;
  line-height: 1.25;
}

.panel--contact .access-addr{
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 600;
  margin: 0;
  line-height: 1.7;
}

.panel--contact a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* CONTACTだけ幅を狭める（1920pxの60% = 1152px、ただし狭い画面では縮む） */
.panel.panel--text.panel--contact{
  box-sizing: border-box;
  width: clamp(720px, 66vw, 1267px) !important;
  min-width: clamp(720px, 66vw, 1267px) !important;
  flex: 0 0 clamp(720px, 66vw, 1267px) !important;
  margin: 0;
}

/* 中身のカラムはそのまま左寄せでOK（必要なら調整） */
.panel--contact .panel__inner{
  max-width: 680px;
  margin: 0;
  padding: 0 20px;        /* 横スク発生防止にpx指定。必要なら微調整可 */
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* 本文全体をコピー不可＋カーソル非表示 */
.panel--text,
.panel--text p,
.panel--text h1,
.panel--text h2,
.panel--text h3,
.panel--text h4,
.panel--text h5,
.panel--text h6 {
  user-select: none !important;   /* コピー禁止 */
  cursor: default !important;     /* I字カーソルを上書き */
}

/* サイト全体をコピー不可＋I字カーソル禁止 */
body, body * {
  user-select: none !important;
  -webkit-user-select: none !important; /* Safari対応 */
  -ms-user-select: none !important;     /* IE対応 */
  cursor: default !important;
}

/* CONTACT セクションのスタイル調整 */
.panel--contact {
  position: relative;   /* ← 子要素absoluteの基準にする */
  min-height: 100vh;    /* ← CONTACTセクションを画面いっぱい確保 */
}

.copyright {
  margin-top: 30px;       /* 上との余白 */
  font-size: 12px !important;   /* ← 強制的に小さい文字 */
  color: #aaa;
  font-weight: normal !important; /* ← 太字解除を強制 */
  text-align: left;
}

.panel--contact {
  position: relative;
  min-height: 100vh;   /* 画面いっぱいの高さ */
}

.copyright {
  position: absolute;
  bottom: 54px;          /* 下から20px */
  left: 210px;            /* 左から20px → ここを調整して揃える */
  font-size: 12px !important;
  color: #666;
  font-weight: normal !important;
  text-align: left;
}

/* スマホ表示用調整 */
@media screen and (max-width: 768px) {
  .panel {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .site-header,
  .site-header__inner {
    width: 100% !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ==========================
   スマホ用レイアウト（768px以下）
   ========================== */
@media (max-width: 768px) {
  /* 1) 横スクを縦スクに切り替え */
  #hs {
    display: block;        /* 横並び解除 */
    overflow-x: hidden;    /* 横スク禁止 */
    overflow-y: auto;      /* 縦スク有効 */
  }

  .panel {
    width: 100vw;          /* 画面幅いっぱい */
    min-width: 100vw;
    height: auto;          /* 高さは自動調整 */
  }

  /* 2) 固定ヘッダー */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;      /* 背景白で視認性確保 */
    z-index: 999;
    border-bottom: 1px solid #eee;
  }

  body {
    padding-top: 60px;     /* ヘッダー高さ分の余白を追加 */
  }

  /* 3) メニュー縦並び */
  .global-nav ul.menu {
    display: flex;
    flex-direction: column; /* 縦並び */
    gap: 10px;
    text-align: center;
    margin: 10px 0;
    padding: 0;
    list-style: none;
  }

  .global-nav ul.menu li a {
    font-size: 16px;
    padding: 8px 0;
    display: block;
  }
}
@media (max-width: 768px) {
  /* TOPセクションをスマホで高さ確保＋背景調整 */
  .panel--top {
    height: 100vh;                 /* 画面いっぱいに表示 */
    background-size: cover;        /* 画像を枠いっぱいに拡大 */
    background-position: center;   /* 画像を中央に配置 */
  }
}

@media (max-width: 768px) {
  /* TOP面は絶対配置の .slide が中にあるので、親に高さが要る */
  .panel--top {
    position: relative;   /* 念のため明示 */
    height: 100vh;        /* ここが肝。これで背景が出る */
  }
}

@media (max-width: 768px) {
  .site-header{
    background: rgba(0,0,0,.55) !important;
    border-bottom: none !important;
  }
  .global-nav a{ color:#fff !important; }
}

/* ============================
   MOBILE 最終オーバーライド（<=768px）
   ============================ */
@media (max-width: 768px) {
  /* ① 横スク→縦スク（レイアウト切替） */
  #hs {                     /* 横並びの親：#hs を縦スクに戻す */
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .panel{
    width: 100%;
    min-width: 100%;
    height: auto;
  }

  /* ② 固定ヘッダー + ロゴ/メニュー縮小 */
  .site-header{
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(120%) blur(6px);
    border-bottom: 1px solid #e9e9e9;
  }
  body{
    padding-top: 64px;         /* ← ヘッダーの高さぶん。帯が本文に被るときは 56〜72 で微調整 */
  }
  .brand img{
    max-width: 150px;          /* ← ロゴの縮小値。120〜180pxで好みに調整 */
    height: auto;
  }
  .global-nav ul.menu{
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 12px 16px;        /* ← 余白。きつければ 8px に */
    list-style: none;
  }
  .global-nav ul.menu li{ list-style: none; }
  .global-nav ul.menu a{
    display: block;
    font-size: 14px;           /* ← メニュー文字サイズ */
    padding: 6px 0;
  }

  /* ③ TOP スライドをスマホ幅にフィット */
  .panel--top{
    height: 100svh;            /* iOS向け安全な画面高。うまくいかない端末は 100vh にしてOK */
  }
  .panel--top .slide{
    width: 100%;
    height: 100%;
    background-size: cover;    /* 画像をはみ出さず画面内にフィット */
    background-position: center;
  }

  /* キャッチコピー（BUILD / CREATIVE HUB / …）の縮小 */
  .tagline p{
    font-size: clamp(28px, 10vw, 56px);  /* 画面幅に合わせて自動縮小 */
    line-height: 1.05;
  }

  /* 画像は基本リキッドに */
  img{
    max-width: 100%;
    height: auto;
  }

  /* 文章が大きい時の緩和（必要なら数値調整） */
  .panel--vision-body p,
  .panel--message p{
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.7;
  }

  /* CONTACTの住所が長い対策 */
  .access-addr{
    font-size: clamp(14px, 3.6vw, 16px);
    word-break: keep-all;
  }

  .copyright{
    font-size: 12px;
  }
}

/* ==== SP: TOPヒーローを等倍縮小（1920x1200 -> 768x480 相当） ==== */
@media (max-width: 768px) {
  .panel--top {
    position: relative !important;
    width: 100vw !important;
    min-width: 100vw !important;
    /* 16:10 (1920x1200) を 768x480 に縮小 → 高さ = 0.625 * 幅 = 62.5vw */
    height: 62.5vw !important;     /* ← これが肝。親の高さを明示 */
    overflow: hidden;
  }

  /* 念のためモバイルでも cover を強制 */
  .panel--top .slide {
    background-size: cover !important;
    background-position: center center !important;
  }

  /* ヘッダーに隠れないように（あなたのヘッダー高に合わせて） */
  body { padding-top: 56px; }       /* 60px なら 60 に合わせてOK */
}

@media (max-width: 768px) {
  /* TOPセクションのキャッチコピー（左寄せ維持） */
  .panel--top .tagline p {
    font-size: 1vw;       /* ビューポート幅に応じて縮小 */
    line-height: 1.1;
    margin: 0 0 5px 15px; /* 左余白を少し入れる（画面端にくっつかないように） */
    text-align: left;     /* ← 左寄せに固定 */
  }
}

@media (max-width: 768px) {
  .panel--top .tagline p {
    font-size: 6vw !important;   /* 文字サイズ */
    line-height: 1.1 !important; /* 行間 */
    margin: 0 !important;        /* ← 余白を消すのがポイント */
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  .panel--top .tagline {
    display: block !important;   /* ← flexを解除 */
    text-align: left;            /* 左寄せにしたい場合 */
    padding: 0% 0 0 5%;          /* 位置を微調整 */
  }

  .panel--top .tagline p {
    font-size: 6vw !important;   /* 文字サイズ */
    line-height: 1.2 !important; /* 行間がここで効く */
    margin: 0 0 0.3em 0 !important; /* 行間をさらに調整 */
  }
}

@media (max-width: 768px) {
  .panel--top { position: relative; }
  .panel--top .tagline{
    position: absolute;   /* ラッパーごと”座標指定”で置く */
    top: 17%;              /* ← ここを 8%→6%→4% と小さくすればさらに上へ */
    left: 5%;
    padding: 0;           /* 位置を top/left に任せるのでpaddingは0に */
    z-index: 2;           /* スライドの上に載せる保険 */
  }
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 28px;
    color: #333;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 1001;
  }

  .global-nav {
    display: none;
    position: absolute;
    top: 60px;       /* ヘッダーの下に出す */
    right: 0;
    background: #fff;
    width: 200px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 1000;
  }

  .global-nav.active {
    display: block;
  }

  .global-nav ul.menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .global-nav ul.menu li a {
    padding: 12px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    color: #333;
    display: block;
  }
}

@media (max-width: 768px) {
  .global-nav ul.menu li a {
    color: #000 !important;  /* ← 黒文字に変更 */
    background: #fff;        /* 背景は白 */
  }
}

/* デフォルトでは非表示（PC用） */
.menu-toggle {
  display: none;
}

/* スマホのときだけ表示 */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .global-nav {
    display: none;  /* ←スマホではデフォルト非表示 */
  }

  .global-nav.is-open {
    display: block; /* ←開いたときだけ表示 */
  }
}

@media (max-width: 768px) {
  .brand img {
    max-height: 48px;   /* ← ロゴの高さを指定 */
    height: auto;
    width: auto;
  }
}

@media (max-width: 768px) {
  /* VISION セクション */
  .panel--vision {
    position: relative;
    min-height: 100vh;          /* セクションが潰れないように高さ確保 */
    background: none !important;/* PC用の背景が邪魔してたらリセット */
  }

  /* 背景画像 */
  .vision-bg {
    display: block !important;  /* 強制的に表示 */
    width: 100% !important;     /* 横幅いっぱいに */
    height: auto !important;    /* 縦は比率維持 */
    object-fit: cover !important;
  }

    /* タイトルの配置 */
  .vision-title {
    position: absolute;
    top: 12%;                   /* 画像の上からの距離 */
    left: 5%;
    font-size: 8vw;             /* スマホ用に文字を大きめ調整 */
    color: #000;                /* 背景が白っぽい時に黒で可視性UP */
    z-index: 2;                 /* 画像より前面 */
  }
}

@media (max-width: 768px) {
  .vision-title {
    font-size: 8vw !important;   /* 画面幅に対して可変サイズ */
    line-height: 1.1;            /* 行間調整（潰れない程度に） */
    margin: 0;                   /* 余白リセット */
    padding: 0;                  /* 不要ならリセット */
    text-align: left;            /* 左寄せ（PCと同じなら調整不要） */
  }
}

@media (max-width: 768px) {
  .panel--vision { position: relative; }
  .vision-title {
    position: absolute;
    top: 5%;        /* ← この数値を小さくするとさらに上に移動 */
    left: 2%;
    font-size: 8vw !important;
    line-height: 1.1;
    margin: 0;
    z-index: 2;      /* 画像の上に表示 */
  }
}

@media (max-width: 768px) {
  .panel--vision {
    position: relative !important;
    height: auto !important;         /* ← 高さは中身に合わせる */
    min-height: unset !important;    /* ← PCで付いてる強制を解除 */
  }
  .panel--vision .vision-bg {
    position: static !important;     /* ← absolute解除で自然に流す */
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;    /* 画像の比率維持 */
    display: block !important;
  }
  .panel--vision::after {
    background: none !important;     /* ← グレー帯は消したまま */
  }
}

@media (max-width: 768px) {
  .panel--vision-body {
    padding: 90px 0 !important;   /* 上下20px、左右0 */
  }

  .panel--vision-body .panel__inner {
    margin: 0 auto !important;    /* 中央寄せ */
    padding: 0 !important;        /* 内側余白リセット */
  }

  .panel--vision-body p {
    margin: 0 !important;         /* 上下の余白リセット */
    line-height: 1.6;             /* 行間調整 */
  }
}

/* --- SP: VISION 見出しを画面左上あたりに固定 --- */
@media (max-width: 768px){
  #vision.panel--vision{ position: relative; }          /* 親を基準にする */

  #vision .vision-title{
    position: absolute;
    top: 22% !important;        /* ↑ 下がる/上がるはここで調整（例：6→5） */
    left: 5% !important;       /* ← 右へ/左へはここ（例：5→4） */
    margin: 0 !important;      /* h2のデフォ余白を消す */
    font-size: 7vw !important; /* 大きさは 6–8vw で微調整 */
    line-height: 1.1 !important;
    z-index: 2 !important;     /* 背景より前に出す */
    /* 必要なら色も指定： color:#fff;  */
  }
}

@media (max-width: 768px){
  #actions.panel--actions {
    position: relative;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: auto !important;
    min-height: unset !important;
    aspect-ratio: 1920 / 1200;   /* ← 実画像のサイズに合わせる */
  }

  #actions .section-title {
    position: absolute;
    top: 22%;
    left: 5%;
    font-size: 7vw;
    margin: 0;
    line-height: 1.1;
    color: #fff;
    z-index: 2;
  }
}

@media (max-width: 768px){
  #message.panel--about {
    position: relative;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: auto !important;
    min-height: unset !important;
    aspect-ratio: 1920 / 1200;   /* ← 実画像のサイズに合わせる */
  }

  #message .section-title {
    position: absolute;
    top: 22%;      /* VISION / ACTIONS と揃える */
    left: 5%;
    font-size: 7vw;
    margin: 0;
    line-height: 1.1;
    color: #fff;
    z-index: 2;
  }
}

@media (max-width: 768px){
  .panel--about-body p {
    font-size: 3.8vw !important;  /* ← 画面幅に比例して小さめ */
    line-height: 1.6 !important;  /* 読みやすい行間 */
    margin-bottom: 1.2em !important; /* 段落間隔も少し縮小 */
  }

  .panel--about-body .signature {
    font-size: 3vw !important;   /* 署名はさらに小さめ */
    margin-top: 2em !important;
    text-align: right;           /* PCと同じ右寄せ */
  }
}

/* SP: MESSAGE 署名 — 2段のまま各行をpxで別々に移動 */
@media (max-width: 768px){
  .panel--about-body .signature{
    font-size: 3.2vw !important;
    margin-top: 2em !important;
    text-align: left !important;
    display: block !important;
    white-space: normal !important;   /* ← 2段に戻す */
    transform: none !important;       /* ← 既存の移動を無効化 */
  }

  .panel--about-body .signature .sig-line1,
  .panel--about-body .signature .sig-line2{
    display: block !important;        /* ← 縦に2段 */
    transform: none !important;       /* ← 行ごとの移動はmarginで */
  }

  /* ★ここだけ触ればOK：数値を増やすほど右へ、負にすると左へ */
  .panel--about-body .signature .sig-line1{ margin-left: -65px  !important; }
  .panel--about-body .signature .sig-line2{ margin-left: -52px !important; }
}

@media (max-width: 768px){
  .panel--contact {
    height: auto !important;       /* ← 高さを自動にする */
    min-height: auto !important;   /* ← 強制されていたら解除 */
    padding: 20px 0 !important;    /* ← 上下の余白を必要分だけに */
  }
}

@media (max-width: 768px){
  /* ① CONTACT の文字 */
  .panel--contact .contact-label {
    font-size: 3.2vw !important;
  }

  /* ② ACCESS の文字 */
  .panel--contact .access-label {
    font-size: 3.2vw !important;
  }

  /* ③ メールアドレス */
  .panel--contact .contact-email a {
    font-size: 3.5vw !important;
  }

  /* ④ 住所 */
  .panel--contact .access-addr {
    font-size: 3.0vw !important;
    line-height: 1.4 !important; /* 読みやすさ確保 */
  }
}

@media (max-width: 768px){
  /* ① ACCESSブロック全体を上に移動 */
  .panel--contact .access-block {
    position: relative;
    top: -70px;   /* ← この数値を -10px / -30px などに調整 */
  }

  /* ② コピーライトの位置を左 or 上に移動 */
  .panel--contact .copyright {
    position: relative;
    left: 20px;  /* ← 左右移動 */
    top: 10px;   /* ← 上下移動 */
    font-size: 2.8vw; /* スマホ用に少し小さめ */
  }
}