/*
 Theme Name: Sky Child
 Template: generatepress
 Text Domain: sky-child
 Version: 1.0.0
*/




/* =================================
   ファーストビュー
================================= */
.firstview {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background: #eaf7ff;
}

/* スライド */
.fv-slides {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
}
.fv-slides img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1; /* 初期から表示 */
  transition: opacity 1.6s ease-in-out;
}

/* 波 */
.overlay-wave {
  position: absolute;
  inset: 0;
  z-index: 10;
  transform-origin: left center;
  transform: scale(14);
  animation: waveZoom 3.6s ease-out forwards;
}
@keyframes waveZoom {
  0% { transform: scale(20); }
  100% { transform: scale(1) translateZ(0); }
}
.overlay-wave svg { width:100%; height:100%; display:block; }

/* ロゴ */
.intro-logo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, 40px) scale(.96);
  width: min(240px, 30vw);
  height: auto;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  animation: logoIn .9s ease-out .2s forwards, logoOut 1s ease 2.2s forwards;
}
@keyframes logoIn {
  from { opacity: 0; transform: translate(-50%,40px) scale(.96); }
  to   { opacity: 1; transform: translate(-50%,0) scale(1); }
}
@keyframes logoOut {
  from { opacity: 1; transform: translate(-50%,0) scale(1); }
  to   { opacity: 0; transform: translate(-50%,-24px) scale(1.04); }
}

/* 背景 */
.bg { position:absolute; inset:0; background:#cfefff; z-index:1; }

/* キャッチコピー */
.catchcopy-svg {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transform: translateY(50px);
  animation: catchIn 7.5s cubic-bezier(.22,1,.36,1) 4.4s forwards;
}
@keyframes catchIn {
  0% { opacity: 0; transform: translateY(50px); }
  60% { opacity: 1; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* =================================
   縦積みラッパー
================================= */
.vertical-wrapper {
  display: block; /* flexを使わないで確実に縦積み */
  width: 100%;
}

.vertical-wrapper section {
  display: block !important;
  width: 100% !important;
  clear: both; /* 横並び防止 */
}

/* =================================
   企業概要
================================= */
.about {
  display: block;
  width: 100%;
  background: #f7f8f9;
  padding: 60px 20px;
  box-sizing: border-box;
}

.about-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.aboutmaru, .about-title {
  display: block;
  margin: 0 auto 20px;
}

.about-text {
  max-width: 720px;
  margin: 0 auto 32px;
  font-size: 18px;
  line-height: 1.8;
  color: #222;
  top: -20px;
  position: relative;   /* 画像より前面に出す */
  opacity: 1 !important; /* アニメーションで隠れないように */
}

.about-buttom img {
  width: 160px;
  height: auto;
  display: inline-block;
}

.aboutmaru {
  transition: transform 3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1);
  opacity: 1;
  width:110px;
}

/* スクロール時に追加するクラス */
.aboutmaru.zoom-out {
  transform: scale(1.8);  /* ズーム量 */
  opacity: 0;             /* フェードアウト */
}




/* ===== OUR BUSINESS ===== */
.ourbusiness-section {
  padding: 100px 0;
  position: relative;
}

.ourbusiness-wrapper {
  position: relative;
  display: inline-block;
}

.ourbusiness-overlay {
  position: absolute;
  top: -220px;
  left: 650px;
  transform: translate(-50%, -50%);
  font-size: 160px;
  font-weight: bold;
  letter-spacing: 0em;
  white-space: nowrap;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(173, 216, 230, 0.2),
    rgba(190, 230, 250, 0.15),
    rgba(255, 255, 255, 0.1)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 10;
}

/* ===== 事業内容 ===== */
.business {
  position: relative;
  background: #f0fcff;
  padding-bottom: 60px;
  width: 100%;
}

.karte-visual {
  position: relative;
  width: 100%;
  padding: 120px 60px 500px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(235, 250, 255, 0.9) 25%,
    rgba(210, 240, 255, 0.8) 55%,
    rgba(180, 230, 255, 0.7) 100%
  );
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow: visible;
  margin-top: -850px;
  margin-bottom: -160px;
}

.karte-content {
  position: relative;
  max-width: 900px;
  z-index: 2;
  margin-top: -510px;
}

.karte-content h1 {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.4;
  color: #002c3e;
  margin-bottom: 20px;
  margin-top: 50px;
  padding-left: 160px;
  transform: translateY(100px);
  position: relative;
}

.karte-content p {
  font-size: 1.1rem;
  line-height: 2;
  color: #333;
  padding-left: 160px;
  margin-top: 120px !important;
  transform: translateY(30px);
  font-weight: 530;
  position: relative;   /* 画像より前面に出す */
  opacity: 1 !important; /* アニメーションで隠れないように */
}

/* ===== 青色マーカー ===== */
.marked-text {
  position: relative;
  z-index: 1; /* テキストを前面に */
  display: inline-block;
}

.marked-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.15em;
  height: 0.6em;
  background-color: rgb(179, 223, 252);
  width: 0%; /* 初期状態は非表示 */
  z-index: -1; /* テキストの下 */
  transition: width 1s ease-out;
}

/* 表示されたらアニメーション */
.marked-text.visible::after {
  width: 100%;
}

/* ===== 事業内容ボタン ===== */
.business-button {
  position: relative;
  top: 80px;
  left: 160px;
  width: 100px;
  z-index: 100;
}

.business-button img:hover {
  filter: brightness(0.85);
}

/* ===== 波 ===== */
.wave-container {
  position: relative;
  width: 300%;
  height: 170px;
  overflow: visible;
  left: 0%;
  transform: rotate(-15deg) translateY(30px);
  transform-origin: left top;
  z-index: -1;
  top: -220px;
}

.wave-line path {
  animation: waveMove 10s linear infinite;
  transform-origin: left center;
}

@keyframes waveMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-1800px); }
}








/* ===== OUR BUSINESS ビジュアルエリア ===== */
.visual-section {
  display: flex;
  justify-content: center;   /* 中央寄せ */
  align-items: flex-start;   /* 上基準で揃える */
  gap: 120px;                /* マップと写真の間隔 */
  padding: 100px 0;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  z-index: 2000;
}

/* 九州マップ */
.kyushu-map-container {
  flex: 0 0 auto;
  width: 650px;
  transform: rotate(5deg);
  opacity: 0.65;
  pointer-events: none;
  margin-left: 1300px;
  margin-top: -300px;
}

.kyushu-map {
  width: 100%;
  height: auto;
  display: block;
}

/* 写真2枚を縦に並べる */
.photo-frames-wrapper {
  display: flex;
  flex-direction: column;
  gap: 100px;
  position: relative;
}

/* フレーム1つ分 */
.photo-frame {
  position: relative;
  width: 400px;
  height: 400px;
  flex-shrink: 0;
}

/* 丸い枠 */
.photo-clip {
  width: 100%;
  height: 100%;
  border-radius: 50%;  /* ←完全な円に */
  overflow: hidden;
  box-shadow: 0 12px 20px rgba(0,0,0,0.2);
}

.photo-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ラベル */
.photo-label {
  position: absolute;
  bottom: 16px;
  right: -60px;  /* ←右に飛び出させる */
  color: #fff;
  text-align: left;
}

.photo-label .jp {
  font-size: 1.4rem;
  font-weight: bold;
}

.photo-label .en {
  font-size: 1.1rem;
  opacity: 0.8;
}

/* 番号 */
.photo-number {
  position: absolute;
  top: 50%;
  right: -120px;   /* ←丸の右に配置 */
  transform: translateY(-50%);
  font-size: 6rem;
  font-weight: bold;
  background: linear-gradient(135deg,#2a3e65 0%,#5a6fa0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* 個別にさらに右へ動かす */
.photo-frame.orosi .photo-number {
  right: -150px; /* 01 */
}

.photo-frame.renta .photo-number {
  right: -180px; /* 02 */
}


/* -------------------- フレーム -------------------- */
/* 02フレーム */
.karte-visual .photo-frame.photo-orosi {
  top: -440px !important;
  right: -48% !important;
  left: auto !important;
}

/* 01フレーム */
.karte-visual .photo-frame.photo-renta {
  top: -510px !important;
  left: 69% !important;
  right: auto !important;
}

/* -------------------- ラベル -------------------- */
.photo-label {
  position: absolute;
  text-align: center;
  color: #fff;
  pointer-events: none;
}

.label-orosi {
  top: 170px;   /* フレーム基準で縦位置 */
  left: -75px;   /* フレーム基準で横位置 */
}

.label-renta {
  top: 170px;
  left: -73px;
}

/* ラベル内のテキスト */
.photo-label .jp { font-size: 1.4rem; font-weight: bold; }
.photo-label .en { font-size: 1.1rem; opacity: 0.8; }

/* -------------------- 番号 -------------------- */
.photo-number {
  position: absolute;
  font-size: 6rem;
  font-weight: bold;
  background: linear-gradient(135deg,#2a3e65 0%,#5a6fa0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  pointer-events: none;
}

/* 個別番号位置 */
.number-orosi {
  top: 12px;    /* フレーム基準で縦位置 */
  right: 270px;  /* フレーム基準で横位置 */
}

.number-renta {
  top: 20px;
  left: 10px;
}








/* ---------------------- */
/* インタビュー全体 */
/* ---------------------- */
.interview {
  width: 100%;
  background: #ffffff;
  padding: 60px 0;
}

/* ---------------------- */
/* ヘッダー */
/* ---------------------- */
.interview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto 50px;
  padding: 0 20px;
}

.interview-desc {
  font-size: 16px;
  color: #444;
  line-height: 1.8;
  font-weight: 550;
  margin: 0;
}

.more-button {
  display: inline-block;
  background-color: #0077be;
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
}

.more-button:hover {
  background-color: #005f9e;
  cursor: pointer;
}

/* ---------------------- */
/* カードの横スクロール */
/* ---------------------- */
.interview-cards {
  display: flex;
  flex-wrap: nowrap;           /* 折り返さない */
  gap: 40px;
  overflow-x: scroll;          /* 横スクロール強制 */
  -webkit-overflow-scrolling: touch;
  padding: 10px 20px;
  width: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* スクロールバーをPCで必ず表示 */
.interview-cards::-webkit-scrollbar {
  height: 10px;
}

.interview-cards::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.5);
  border-radius: 5px;
}

.interview-cards::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
}

/* ---------------------- */
/* カード個別設定 */
/* ---------------------- */
.interview-card {
  flex: 0 0 300px;             /* 固定幅 */
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 12px;          /* 角を丸くして柔らかく */
  background-color: #ffffff;     /* 白に変更 */
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 柔らかい影で浮いて見える */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.interview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* ホバーで少し浮かせる */
}

.interview-image-container {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 15px;
}

.interview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job {
  font-size: 18px;
  font-weight: bold;
  color: #222;
  margin-top: 10px;
}

.info {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.card-link {
  text-decoration: none !important;
  color: inherit !important;
}



/* ---------------------- */
/* 　 タイトル・説明文　 　*/
/* ---------------------- */
.interviewmaru {
  display: block;
  margin: 0 auto;
  width: 110px;
  margin-top: -727px;
  left: -525px;
}

.interview-title {
  display: block;
  margin: 0 auto 20px;
  width: 270px;
  margin-top: -80px;
  margin-left: 410px !important;
}

.interview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto 50px;
  padding: 0 30px;
}

.interview-desc {
  font-size: 16px;
  color: #222 !important;
  line-height: 1.8;
  font-weight: 550;
  margin: 0;
  margin-top: 0px !important;
  margin-left: -70px;
}



/* インタビューマル */
.interviewmaru {
  display: block;
  width: 110px;               /* 必要なら調整 */
  height: auto;
  margin: 0 auto;
  transform-origin: center;
  transform: scale(1) translateY(0);
  opacity: 1;
  will-change: transform, opacity;
  transition: transform 3s cubic-bezier(.22,1,.36,1), opacity 1.0s ease;
  /* 見えない（display:none 等）になっていないか注意 */
  margin-left: 370px;
  margin-top: 10px !important;
}

/* add-on class = 一度だけズームアウトして消える */
.interviewmaru.zoom-out {
  transform: scale(1.7) translateY(-18px); /* 拡大量と少し上へ移動 */
  opacity: 0;
  transition: transform 3s cubic-bezier(.22,1,.36,1), opacity 1.0s ease;
  pointer-events: none;
}







/* ---------------------- */
/* 　 横スクロールバー 　*/
/* ---------------------- */
.interview-cards {
  display: flex;
  gap: 150px;
  overflow-x: scroll !important;
  scroll-behavior: smooth;
  padding-bottom: 25px;

  /* 画面幅より狭くせず、横に長くする */
  width: 1500px;          /* 画面幅より大きくする */
  margin: 0 auto;

  flex-wrap: nowrap;
  box-sizing: border-box;
  cursor: grab;
}

/* ドラッグ中 */
.interview-cards:active {
  cursor: grabbing;
}

/* Webkitスクロールバー */
.interview-cards::-webkit-scrollbar {
  height: 16px;                   
}

.interview-cards::-webkit-scrollbar-thumb {
  background: #ffffff;            
  border-radius: 8px;
  border: 3px solid #0077be;     
}

.interview-cards::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);    
  border-radius: 8px;
}

/* Firefox */
.interview-cards {
  scrollbar-width: auto;
  scrollbar-color: #ffffff #0077be; 
}

/* カード */
.interview-card {
  flex: 0 0 550px;                /* 大きめにしてサムを動かせる */
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 12px;
  background-color: #ffffff;
  padding: 25px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 145%;
}

.interview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

/* 画像 */
.interview-image-container {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 20px;
}

.interview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}







/* ---------------------- */
/* 　      recruit      　*/
/* ---------------------- */
.recruit {
  background: linear-gradient(to bottom, #71b8f0 0%, #d2eafc 100%);
  padding-top: 40px;
  margin-top: -110px !important;
  position: relative;
  z-index: 1000 !important;
  height: 600px;
  top: 130px;
  margin-bottom: 100px;
}

.recruit-inner {
  display: flex;
  justify-content: flex-start;   /* ← 全部左から並べる */
  align-items: flex-start;
  max-width: 1300px;
  margin: 0 auto;
  gap: 80px;                      /* ← 左テキストと右画像の間隔ここで調整 */
  position: relative;
  min-height: 600px;
  margin-top: -25px;
  height: 700px;
}

.recruit-content {
  flex: 0 0 500px;                /* ← 固定幅で左側のサイズ指定 */
}

/* タイトル位置調整 */
.recruit-title {
  position: absolute;
  top: 100px;
  left: 70px;
  width: 190px;
}

/* テキスト位置調整 */
.recruit-text {
  position: relative;   /* 画像より前面に出す */
  z-index: 10;
  color: #001f5c;      /* 文字色を濃く */
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  color: white;
  max-width: 420px;
  margin-top: 170px;
  margin-left: 70px;
  opacity: 1 !important; /* アニメーションで隠れないように */
}

/* ボタン位置調整 */
.recruit-button {
  position: absolute;     /* ← これで座標指定できる */
  top: 350px;             /* ← 好きなだけ上へ移動しろ */
  left: 70px;            /* ← 好きなだけ右へ移動しろ */
  width: auto;
}

.recruit-button img {
  width: 250px;             /* ← サイズUP（好きに変えて） */
  transition: transform 0.3s ease;
}

.recruit-button img:hover {
  filter: brightness(0.85);  /* ← 少し暗くするだけ */
}

.recruit-images {
  position: relative;       /* ← absoluteやめる */
  top: -30px;                   /* ← 初期化 */
  margin-top: 40px;         /* ← 好きに調整 */
  right: -310px;              /* ← 忘れず消す */
  height: 550px;
  display: flex;
  gap: 10px;
  z-index: 2;
  overflow: hidden;
}

.image-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* 上下アニメーションの方向 */
.scroll-up {
  animation-name: scrollUp;
}

.scroll-down {
  animation-name: scrollDown;
}

.image-column img {
  flex-shrink: 0;
  object-fit: cover;
}

.image-wide {
  width: 200px;
  height: 140px;
}

.image-tall {
  width: 200px;
  height: 220px;
}

/* アニメーション：倍量でループ用 */
@keyframes scrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes scrollDown {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}
.recruit::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/sora.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}
.recruit {
  position: relative;
  z-index: 1;
}

/* 社員インタビュー・求人セクションの説明文　アニメーション */
.animate-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1.5s ease-out;
}
.animate-fade.show {
  opacity: 1;
  transform: translateY(0);
}


/* 共通セクション */
.section-en {
  font-size: 12px;
  color: #007acc;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  letter-spacing: 1px;
}

.section-ja {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  margin-bottom: 20px;
}









/* ------------------------------------- */
/* 　  お知らせ＆LINE＆追従バナー      　*/
/* ------------------------------------- */
.news {
  position: relative;
  background: #fff;
  padding: 80px 20px;
}

.newsmaru {
  position: absolute;
  top: 100px;
  left: 370px !important;
  width: 100px !important;
  opacity: 1;
  transform: scale(1.3);
  transition: transform 2s ease-in-out, opacity 2s ease-in-out;
  z-index: 2;
}

.news-title {
  width: 130px !important;
  margin-bottom: 40px;
  transform: translateX(-40px);
  margin-top: 30px;
}

/* 拡大してフェードアウト */
.newsmaru.zoom-out {
  transform: scale(2.5);
  opacity: 0;
}

.news-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.news-button {
  background-color: #0066cc;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.news-button:hover {
  background-color: #004999;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #ccc;
}

.news-item {
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
}

.news-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.news-date {
  color: #007acc;
  font-weight: bold;
  font-size: 14px;
}

.news-tag {
  background: #007acc;
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 20px;
}

.news-text {
  font-size: 16px;
  color: #333;
}

/* お問合せの残像消してる */
.ghost-hider {
  position: fixed;
  top: 2800px;     /* 必要なら見える位置に */
  left: 0;
  width: 100%;
  height: 200px;
  background: white;
  z-index: 9999;
  pointer-events: none;
}


/* LINEバナー */
.news-line-link {
  margin: 40px auto 20px; /* セクション下に余白 + 上寄せ下余白 */
  text-align: center;
}

.line-icon {
  margin-bottom: 140px;
  width: 400px; /* アイコンの大きさはお好みで調整可能 */
  height: auto;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.line-icon:hover {
  opacity: 0.8; /* ホバー時に少し透過して反応感アップ */
}


/* 追従バナー */
.floating-banner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 160px;
  height: 160px;
  z-index: 999999;
  opacity: 0; /* ← 最初は非表示に変更 */
  transition: opacity 1s ease;
}

.floating-banner.show {
  opacity: 1; /* ← 2秒後に表示される */
}

.banner-circle {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-main {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 2;
}

.circle-text {
  position: absolute;
  top: -20px;
  margin-left: -170px;
  width: 180px;
  height: 200px;
  animation: rotateText 20s linear infinite;
  transform-origin: center center;
  z-index: 3;
  pointer-events: none;
  transform: translate(-35px, -35px);
}

.circle-text text {
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  fill: #002c3e;
  letter-spacing: 2px;
}

@keyframes rotateText {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}






/* ===== フッター全体 ===== */
.site-footer {
  position: relative;
  background-color: #0B1E32 !important; /* 単色背景 */
  background-image: none !important;    /* 模様消去 */
  color: #fff;
  font-family: 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 60px 20px 20px;
  box-sizing: border-box;
}

/* フッター内すべての要素の余白リセット */
.site-footer * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 擬似要素の白帯対策 */
.site-footer::before,
.site-footer::after {
  content: "";
  display: none;
}

/* ===== フッター上部 ===== */
.footer-top {
  text-align: center;
  margin-bottom: 40px;
}
.footer-top h2 {
  font-size: 28px;
  margin-bottom: 10px;
}
.footer-top p {
  font-size: 15px;
  line-height: 1.6;
  margin: 6px 0;
}

/* ===== フッターメイン ===== */
.footer-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 40px 0;
  border-top: none; /* 白線を消す */
}

/* ロゴ */
.footer-logo {
  max-width: 280px;
  text-align: left;
}
.footer-logo img {
  width: 160px;
  margin-bottom: 10px;
}
.footer-logo p {
  font-size: 14px;
  margin: 6px 0;
}

/* アイコン */
.footer-icon-group {
  margin-top: 10px;
}
.footer-icon-group a {
  display: inline-block;
  margin-right: 10px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.footer-icon-group a:hover {
  transform: scale(1.1);
  opacity: 0.8;
}
.footer-icon-group img,
.sns-icon {
  width: 25px !important;
  height: 25px !important;
  vertical-align: middle;
  filter: brightness(0) invert(1);
}

/* ナビ */
.footer-nav {
  display: flex;
  gap: 70px;
  margin-left: 0;
}
.footer-nav h3 {
  font-size: 16px;
  margin-bottom: 10px;
}
.footer-nav ul {
  list-style: none;
}
.footer-nav li {
  font-size: 14px;
  margin-bottom: 6px;
  cursor: pointer;
}
.footer-nav a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom 0.2s ease;
}
.footer-nav a:hover {
  border-bottom: 1px solid #fff;
}

/* ===== フッター下部 ===== */
.footer-bottom {
  text-align: center;
  margin-top: 40px; /* 大きすぎる余白を調整 */
  font-size: 13px;
  opacity: 0.7;
}

/* ===== モバイル対応 ===== */
@media (max-width: 768px) {
  .footer-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-nav {
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
  }
}

/* ===== GeneratePress デフォルトフッター非表示 ===== */
.site-info {
  display: none !important;
}











/* ------------------------ */

  　　 画面横いっぱいに

/* ------------------------ */
#page,
.site,
.site-content,
.container,
.main-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}
/* 全体の背景を横いっぱいに */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 100%;
  overflow-x: hidden;
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #fff;
}










/* ========================================== *//* ========================================== *//* ========================================== *//* ========================================== */













/* =================================
   モバイル専用レスポンシブ
================================= */
@media screen and (max-width: 768px) {

  /* ===== ファーストビュー ===== */
  .intro-logo {
    width: min(160px, 40vw);
    transform: translate(-50%, 20px) scale(.9);
  }

  .catchcopy-svg text.jp {
    font-size: 24px !important;
    x: 20 !important;
    y: 200 !important;
  }

  /* ===== 企業概要 ===== */
  .about {
    padding: 40px 16px;
  }

  .about-text {
    font-size: 16px;
    line-height: 1.6;
    padding-left: 0;
    margin-top: 20px !important;
  }

  .about-buttom img {
    width: 140px;
  }

  /* ===== OUR BUSINESS ===== */
  .ourbusiness-overlay {
    display: none; /* モバイルでは非表示 */
  }

  .karte-visual {
    padding: 80px 16px 400px !important;
    margin-top: -600px !important;
    margin-bottom: -60px !important;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1) 0%,
      rgba(235, 250, 255, 0.95) 25%,
      rgba(210, 240, 255, 0.9) 55%,
      rgba(180, 230, 255, 0.85) 100%
    );
  }

  .karte-content {
    max-width: 100%;
    margin-top: -400px !important;
  }

  .karte-content h1 {
    font-size: 1.5rem !important;
    padding-left: 0 !important;
    transform: translateY(50px) !important;
  }

  .karte-content p {
    font-size: 1rem !important;
    padding-left: 0 !important;
    margin-top: 60px !important;
    transform: translateY(0) !important;
  }

  .business-button {
    top: 20px;
    left: 0 !important;
    width: 80px;
  }

  /* 九州マップ・写真フレーム縦並び */
  .visual-section,
  .kyushu-map-container,
  .photo-frame {
    margin: 0 auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 80% !important;
  }

  .photo-frame {
    height: auto !important;
    margin-bottom: 40px;
  }

  .photo-label {
    left: 50% !important;
    transform: translateX(-50%);
    bottom: 10px !important;
    text-align: center;
  }

  .photo-number {
    font-size: 3rem !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
  }

  /* ===== インタビュー ===== */
  .interview-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 16px;
    margin-bottom: 30px;
  }

  .more-button {
    margin-top: 16px;
  }

  .interview-cards {
    gap: 16px;
    padding: 10px 16px;
  }

  .interview-card {
    min-width: 200px !important;
  }

  /* ===== リクルート ===== */
  .recruit-inner {
    flex-direction: column;
    gap: 20px;
    padding: 40px 16px;
  }

  .recruit-content {
    text-align: center;
  }

  .recruit-images {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .image-column {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }

  .image-column img {
    width: 48%;
    height: auto;
  }

  /* ===== NEWS ===== */
  .news-inner {
    padding: 20px 16px;
  }

  .news-list li {
    font-size: 14px;
  }

  /* ===== フッター ===== */
  .footer-main {
    flex-direction: column;
    align-items: center;
  }

  .footer-nav div {
    margin-bottom: 20px;
  }

  .footer-logo p {
    text-align: center;
    margin: 4px 0;
  }

  /* LINE・追従バナーを小さく */
  .news-line-link img,
  .floating-banner img {
    width: 60px;
  }
}












/* ========================================== *//* ========================================== *//* ========================================== *//* ========================================== */

/* =================================
   　　　　　recruit
================================= */


/* Hero土台（最低限） */
.hero { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
.slides, .slide { position: absolute; inset: 0; }
.slide { background-size: cover; background-position: center; opacity: 0; transition: opacity 1s; }
.slide.show { opacity: 1; }
.flash { position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 80%);
  opacity: 0; pointer-events: none; transition: opacity .5s; z-index: 2;
}
.flash.active { opacity: 1; transition: opacity .2s; }
.cubes { position: absolute; inset: 0; perspective: 800px; pointer-events: none; z-index: 1; }
.cube-wrapper { position: absolute; animation: floatUp var(--dur) ease-in-out infinite var(--dly); }
@keyframes floatUp { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8vh);} }
.spin-once { animation: spinOnce .6s ease-in-out forwards; }
@keyframes spinOnce { from{transform:rotateX(25deg) rotateY(15deg);} to{transform:rotateX(25deg) rotateY(375deg);} }
.cube { width: 100%; height: 100%; transform-style: preserve-3d; }
.face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 6px; opacity: .8;
  box-shadow: inset 0 8px 16px rgba(255,255,255,.7), 0 4px 12px rgba(0,0,0,.25);
}
.face--front  { transform: translateZ(var(--size)); background: linear-gradient(135deg, #4F8BFF 0%, #CFE6FF 100%); }
.face--back   { transform: rotateY(180deg) translateZ(var(--size)); background: linear-gradient(135deg, #8dc5f3 0%, #E0F7FA 100%); }
.face--right  { transform: rotateY(90deg) translateZ(var(--size)); background: linear-gradient(135deg, #5F9DEF 0%, #D0E8FF 100%); }
.face--left   { transform: rotateY(-90deg) translateZ(var(--size)); background: linear-gradient(135deg, #0077CC 0%, #A8D4FF 100%); }
.face--top    { transform: rotateX(90deg) translateZ(var(--size)); background: linear-gradient(135deg, #A6CCFF 0%, #F0F8FF 100%); }
.face--bottom { transform: rotateX(-90deg) translateZ(var(--size)); background: linear-gradient(135deg, #8EE5FF 0%, #FFFFFF 100%); }

.copy { position: relative; z-index: 3; max-width: 700px; margin-left: 5vw; top: 55%;
  transform: translateY(-50%); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.4);
  opacity: 0; transition: opacity 1s, transform 1s, filter 1s; filter: blur(2px);
}
.copy.active { opacity: 1; transform: translateY(-50%) scale(1); filter: blur(0); }
.copy .sup { font-size: .9rem; margin-top: .8rem; color: #ddd; }
.copy h1 { font-size: 3rem; line-height: 1.1; font-weight: 900; }















/* ========================================== *//* ======================================パソコンの見え方==== *//* ========================================== *//* ========================================== */

/* ===== パッチ v2：二重スクロールを止めてフッターを最下部に ===== */

/* 1) 「外側だけがスクロール」になるようにする */
html { height: 100%; overflow-y: scroll !important; }
body { 
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: visible !important;   /* ← bodyに縦スクロールは持たせない */
  overflow-x: hidden !important;
}

/* 2) 中のコンテナが独自にスクロールしないよう解除 */
#page, .site, .site-content, .site-main, .inside-article, .vertical-wrapper, .container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;     /* ← これが二重スクロールの止めどころ */
}

/* 3) 横幅をはみ出して“別スクロール”を作る要素の保険 */
.wave-container {                    /* 横300% → レイアウトは100%に */
  width: 100% !important;
  left: 0 !important;
  overflow: visible !important;
  transform: rotate(-15deg) translateY(30px) !important; /* 見た目だけで調整 */
}

/* 4) フッターを最下部へ（sticky footer） */
footer.site-footer{
  position: relative !important;
  display: block !important;
  clear: both !important;
  float: none !important;
  margin-top: auto !important;      /* ← これで下に張り付く */
  left: auto !important; right: auto !important;
  width: 100% !important;
  z-index: 1 !important;
}

/* 5) 最後のセクションがフッターに被るのを防ぐ薄い余白（必要なら数値調整） */
.vertical-wrapper::after{
  content:"";
  display:block;
  height: 24px;                      /* 0〜40pxで好み */
  clear: both;
}

/* 6) まだ内側スクロールが出る場合の最終保険（縦スクロール禁止） */
.site-content, .inside-article { overscroll-behavior: none !important; }

/* 7) 既に無効化済みだが念のため：フッターを覆うレイヤーは完全停止 */
.ghost-hider{ display:none !important; visibility:hidden !important;
  position:static !important; width:0 !important; height:0 !important; z-index:-1 !important;
}











/***** === TOPだけ：ヘッダーを左右端固定（ロゴ＝左端 / メニュー＝右端） === *****/
@media (min-width:769px){
  :root{ --hd-pad: 32px; } /* 端からの余白。32→40/48で微調整 */

  /* 行そのものを全幅に。中央幅の制限を解除 */
  body.home .site-header .inside-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    max-width:none !important;     /* ← 1200px制限をやめる */
    margin:0 !important;
    padding: 8px var(--hd-pad) !important;  /* 端からの距離だけで合わせる */
    box-sizing:border-box !important;
  }

  /* ロゴは左端側に固定 */
  body.home .site-branding,
  body.home .site-logo{
    flex:0 0 auto !important;
    margin:0 !important;
  }
  body.home .custom-logo{
    height:40px !important; width:auto !important; display:block !important;
  }
  /* テキストサイト名は非表示（ロゴだけ出す） */
  body.home .site-title, body.home .main-title{ display:none !important; }

  /* メニューは右端側に固定（折返し禁止） */
  body.home .main-navigation{
    margin-left:auto !important; margin-right:0 !important;
    float:none !important; display:flex !important; align-items:center !important;
  }
  body.home .main-navigation .main-nav > ul{
    display:flex !important; gap:32px !important;
    margin:0 !important; padding:0 !important; list-style:none !important;
    flex-wrap:nowrap !important; white-space:nowrap !important;
  }
  body.home .main-navigation .main-nav > ul > li > a{
    font-size:18px !important; line-height:1.5 !important; padding:0 !important; font-weight:500 !important;
  }

  /* 以前のズラし系を全解除（保険） */
  body.home .site-header, body.home .inside-header,
  body.home .site-branding, body.home .site-logo,
  body.home .main-navigation{
    position:relative !important; left:auto !important; right:auto !important; transform:none !important;
  }
}


/***** === TOPだけ：ヘッダーの縦幅を広げる === *****/
@media (min-width:769px){
  body.home .site-header .inside-header{
    padding-top: 24px !important;   /* ← 上の余白 */
    padding-bottom: 24px !important;/* ← 下の余白 */
  }
  body.home .custom-logo{
    height: 48px !important;        /* ← ロゴを少し大きくしてバランス調整 */
  }
}






/***** Interview セクション最小パッチ（説明文右寄せ＆ボタン右端） *****/

/* 影響範囲を .interview-header と .interview-desc に限定 */
.interview-header{
  max-width: 1200px;              /* 共通幅 */
  margin: 0 auto 32px !important; /* 中央レーンに配置 */
  padding: 0 24px !important;
  display: grid !important;
  grid-template-columns: 1fr auto;/* 左＝説明文／右＝ボタン */
  align-items: start;
  gap: clamp(16px, 4vw, 40px);
}

/* 説明文を「左ブロックの右寄り」に見せる：幅を決めて余白を取る */
.interview-desc{
  position: static !important;    /* 既存のtop/leftリセット */
  max-width: 720px;               /* 折り返し位置を固定 */
  margin: 0 24px 0 auto !important;/* ← 右へ寄せる（左側に空き） */
  text-align: left;
  line-height: 1.9;
  color:#222;
}

/* ボタンは右端固定＆サイズ一定 */
.interview .more-button{
  justify-self: end;              /* 右端 */
  white-space: nowrap;
  padding: 10px 22px;
  border-radius: 22px;
  background:#0071bc;
  color:#fff;
  font-weight:700;
  font-size:14px;
}
.interview .more-button:hover{ background:#005a96; color:#fff; }

/* 安全リセット：見出しやカード幅は触らない */
.interview .interview-title,
.interview .interview-cards{
  margin-left: auto; margin-right: auto;
}

/* モバイルは縦積み（既存より優先） */
@media (max-width: 768px){
  .interview-header{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .interview-desc{ margin: 0 !important; max-width: 100%; }
  .interview .more-button{ justify-self: start; }
}

/***** Interview セクション：微調整 *****/

/* 説明文を少し右＆上 */
.interview-desc{
  margin: -65px -105px 0 auto !important; /* 上に-10px、右に40pxの余白 */
}

/* 一覧を見るボタンを少し下＆左 */
.interview .more-button{
  margin-top: 12px !important;  /* 下に移動 */
  margin-right: 130px !important;/* 左に寄せる（右余白を増やす） */
}





/* ===== NEWSのマル：右寄せ＋ズーム消失アニメを両立 ===== */
/* 位置の基準となる数値はサイトに合わせて */
:root{
  --news-max: 1000px;     /* .news-inner の最大幅 */
  --news-gutter: 24px;    /* .news-inner の左右padding */
  --news-dot-offset: 950px;/* 右へ移動量（＋で右 / －で左） */
}

/* 位置だけ右基準。transform は上書きしない！ */
.news .newsmaru,
#newsmaru{
  position: absolute !important;
  top: 100px !important;

  /* 左系は殺すが transform は残す（←ここがポイント） */
  left: auto !important;
  margin: 0 !important;

  right: calc(
    50% - (var(--news-max) / 2) /* 画面右端→.news-inner右端 */
    + var(--news-gutter)        /* .news-inner の右padding */
    + var(--news-dot-offset)    /* 微調整 */
  ) !important;

  width: 100px !important;
  height: auto !important;
  z-index: 2 !important;

  /* アニメ用の初期値 */
  opacity: 1;
  will-change: transform, opacity;
  transition: transform 2.2s cubic-bezier(.22,1,.36,1),
              opacity 2.2s ease;
}

/* ズームしてフワーっと消える（スクロール時に class を付与してね） */
.news .newsmaru.zoom-out,
#newsmaru.zoom-out{
  transform: scale(2.5);
  opacity: 0;
}

/* モバイルの安全リセット */
@media (max-width: 768px){
  .news .newsmaru,
  #newsmaru{
    right: 16px !important;
    top: 12px !important;
    width: 80px !important;
  }
}

/* アニメを好まない設定への配慮（任意） */
@media (prefers-reduced-motion: reduce){
  .news .newsmaru, #newsmaru{
    transition: none;
  }
}





/* ===============================
   九州マップ：全PCで同じ見え方に固定
   基準：.karte-visual 内の「中央幅」
   =============================== */
/* ===== OUR BUSINESS：九州マップをコンテンツ基準で固定配置 ===== */
:root{
  /* コンテンツ幅と左右余白（あなたのセクションに合わせて設定） */
  --karte-max: 1100px;   /* .karte-visual 内の想定最大幅 */
  --karte-gutter: 160px; /* 左のテキストのインデントと合わせる */

  /* マップの基本サイズ＆微調整ノブ */
  --map-w: 650px;        /* マップの幅 */
  --map-x: 820px;        /* 右方向へのオフセット（+で右 / -で左） */
  --map-y: -200px;       /* 下方向へのオフセット（+で下 / -で上） */
  --map-rot: 5deg;       /* 回転角（不要なら 0deg） */
}

/* まず、既存の“ズラし”指定を無効化（衝突回避） */
.kyushu-map-container{
  margin: 0 !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* コンテンツ基準で絶対配置（全端末で同じ見え方に） */
.karte-visual{ position: relative !important; }
.karte-visual .kyushu-map-container{
  position: absolute !important;
  width: var(--map-w) !important;
  /* 画面中央から “コンテンツ左端” を求めて、そこにオフセットを足す */
  left: calc(50% - (var(--karte-max) / 2) + var(--karte-gutter) + var(--map-x)) !important;
  top:  calc(0px + var(--map-y)) !important;
  transform: rotate(var(--map-rot)) !important;
  opacity: .65 !important;
  pointer-events: none !important;
  z-index: 1;
}

/* スマホは安全に縮小・位置リセット（必要なら調整） */
@media (max-width: 768px){
  :root{
    --karte-max: 100%; 
    --karte-gutter: 16px;
    --map-w: 72vw;
    --map-x: 0px;
    --map-y: -40px;
    --map-rot: 0deg;
  }
  .karte-visual .kyushu-map-container{ left: calc(50% - 50vw + var(--karte-gutter)) !important; }
}






/* ===== OUR BUSINESS コンテンツだけ下げる ===== */
.karte-visual .karte-content,
.karte-visual .business-button,
.karte-visual .photo-frame {
  position: relative;
  top: 450px; /* ← 下げたい分だけ調整（例: 80px, 100px, 150px） */
}

/* ===== 事業内容ボタンだけ下げる ===== */
.karte-visual .business-button {
  position: relative;
  top: 530px; /* ← 数値を調整して好みの位置へ */
}

/* 01（レンタカー事業）の番号 */
.karte-visual .number-orosi {
  position: relative !important;
  top: -400px !important;   /* 数字を下へ動かす。+値で下、-値で上 */
  left: 5px !important;     /* 左右に動かす場合はここ */
}

/* 02（車両卸売事業）の番号 */
.karte-visual .number-renta {
  position: relative !important;
  top: -400px !important;   /* こちらも同じく調整 */
  left: 5 !important;
}

/* レンタカー事業（01）だけ */
.karte-visual .photo-frame.photo-orosi {
  top: auto !important;
  margin-top: -60px !important;
}

/* 車両卸売事業（02）だけ */
.karte-visual .photo-frame.photo-renta {
  top: auto !important;
  margin-top: -80px !important;
}




/***** ==== トップページ専用：ロゴを小さく ==== *****/
@media (min-width: 769px){

  body.home .site-header img.custom-logo,
  body.home .site-logo img,
  body.home .site-branding img{
    height: 22px !important;  /* ← 小さめのサイズに調整 */
    width: auto !important;
    display: block !important;
  }
}










/* ========================================== *//* ========================================== *//* ========================================== *//* ========================================== */

/* ===== モバイル：波の移動を止めて、ロゴ消滅と同時にふわっと消す ===== */
@media (max-width: 768px) {
  /* 波は“拡大表示のまま”静止。移動アニメ削除 */
  .overlay-wave{
    animation: none !important;     /* waveZoom を無効化 */
    transform: scale(14) !important;/* これまでのドアップを維持 */
    opacity: 1 !important;
    transition: opacity 800ms ease; /* ふわっと消す用 */
  }
  /* JSで付くクラス：これで波がフェードアウト */
  .overlay-wave.is-fadeout{
    opacity: 0 !important;
  }

  /* ロゴのタイミング（少しだけ調整したい場合） */
  .intro-logo{
    /* 出る→消える。ここは好みに応じて秒数を微調整してOK */
    animation: logoIn .9s ease-out .2s forwards,
               logoOut .9s ease 2.0s forwards !important;
  }
}



/* 波（オープニング：拡大→等倍で停止。消さない） */
.overlay-wave{
  position:absolute; inset:0;
  z-index:10;
  transform-origin:left center;
  animation: waveZoomKeep 3.6s ease-out forwards; /* ← フェードしない */
  will-change: transform, opacity;
  pointer-events: none;
}
@keyframes waveZoomKeep{
  0%   { transform: scale(20); opacity: 1; }
  100% { transform: scale(1);  opacity: 1; } /* ← 最終も不透明のまま */
}

/* （任意）アニメ完了後の安定用。JSで .finished を付ける */
.overlay-wave.finished{
  transform: none !important;
  opacity: 1 !important;
}




.firstview .fv-slides .fv { opacity:0; transition:opacity 1800ms ease-in-out; }
.firstview .fv-slides .fv.show { opacity:1; }
.firstview .fv-slides .fv.bottom-center { object-position:center bottom; }




/* 既存 .fv のスタイルはそのまま利用 */

/* モバイル用レイヤーはデフォルト非表示 */
.fv-slides .fv-slides-mobile { display:none; }

/* モバイルでは：PC用(#fvA,#fvB)を隠し、モバイル用3枚を使う */
@media (max-width: 1024px){
  #fvA, #fvB { display:none !important; }

  .fv-slides .fv-slides-mobile{
    display:block;
    position:absolute; inset:0; overflow:hidden; z-index:5;
  }
  .fv-slides .fv-slides-mobile .fv-m{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center center;
    opacity:0; transition:opacity 2000ms ease-in-out; /* ふわっと */
    will-change:opacity;
    pointer-events:none;
    background:#000; /* SVG透過対策 */
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
    transform:translateZ(0);
  }
  .fv-slides .fv-slides-mobile .fv-m.show{ opacity:1; }

  /* 任意：soraだけ足元寄せにしたいなら */
  .fv-slides .fv-slides-mobile .fv-m[src*="sora.svg"]{ object-position:center bottom; }

  /* ビューポート伸縮での再レイアウト防止 */
  .firstview, .firstview .fv-slides { min-height:100svh; height:100svh; }
}




@media (max-width: 1024px){
  /* hukuoka.svg は左寄せ気味 */
  .fv-slides .fv-slides-mobile .fv-m[src*="hukuoka.svg"]{
    object-position:60% center; /* 横を20%寄せ */
  }

  /* sora.svg は真ん中 */
  .fv-slides .fv-slides-mobile .fv-m[src*="sora.svg"]{
    object-position:65% center ; /* 足元を見せたい場合 */
  }

  /* umi.svg は右寄せ気味 */
  .fv-slides .fv-slides-mobile .fv-m[src*="umi.svg"]{
    object-position:70% center;
  }
}





/* まずデフォルト（PC想定） */
.catchcopy-svg{ display:block; }
.catchcopy-mobile{ display:none; }

/* --- モバイルでは PC版を隠し、モバイル版だけ表示 --- */
@media (max-width:1024px){
  .catchcopy-svg{ display:none !important; }     /* PC用を非表示 */
  .catchcopy-mobile{ display:block !important; } /* モバイル用を表示 */
}







@media (max-width:1024px){
  .catchcopy-mobile{
    position:absolute; 
    inset:0; 
    z-index:20;
    display:block; 
    pointer-events:none;
    opacity:0; 
    transform:translateY(80px); /* ← 全体を下げる */
    animation: catchIn 7.5s cubic-bezier(.22,1,.36,1) 4.4s forwards;
  }

  .catchcopy-mobile text{
    font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight:700;
  }

  /* 行間や位置を個別調整 */
  .catchcopy-mobile .jp1{
    fill:#0d3b66; 
    font-size:110px; 
    x:130; 
    y:480; /* ← 下に下げた */
  }
  .catchcopy-mobile .jp2{
    fill:#0d3b66; 
    font-size:110px; 
    x:130; 
    y:-300; /* ← 2行目もさらに下げて、間隔を広めに */
  }
  .catchcopy-mobile .en{
    fill:#ffffff; 
    font-size:38px; 
    x:130; 
    y:1340; /* ← 英語も全体的に下げる */
  }
}







@media (max-width: 1024px){

  :root{
    --fb-size:          70px;  /* 丸アイコンの直径（そのまま） */
    --fb-right:          -5px;
    --fb-bottom:        -17px;
    --fb-ring-size:      80px;  /* 回転テキストサークルを小さめに */
    /* ▼ リング位置の個別オフセット（左右・上下） */
    --fb-ring-offset-x:  170px;  /* 右へ寄せたい量（＋で右／－で左） */
    --fb-ring-offset-y: 0px;  /* 上下の補正（－で上／＋で下） */
  }

  #floatingBanner,
  .floating-banner{
    position: fixed !important;
    right: calc(var(--fb-right) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--fb-bottom) + env(safe-area-inset-bottom, 0px));
    width: var(--fb-size);
    height: var(--fb-size);
    z-index: 2147483647;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1;
  }

  .floating-banner .banner-circle{
    position: relative;
    width: 100%;
    height: 100%;
  }

  .floating-banner .banner-main{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
  }

  .floating-banner .circle-text{
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--fb-ring-size);
    height: var(--fb-ring-size);
    transform: translate(
      calc(-50% + var(--fb-ring-offset-x)),
      calc(-50% + var(--fb-ring-offset-y))
    );
    transform-origin: center;
    animation: rotateText 20s linear infinite;
    pointer-events: none;
  }

  .floating-banner .circle-text text{
    font: bold 11px/1 Arial, sans-serif;
    letter-spacing: 2px;
    fill: #002c3e;
  }

  @keyframes rotateText {
    from {
      transform: translate(
        calc(-50% + var(--fb-ring-offset-x)),
        calc(-50% + var(--fb-ring-offset-y))
      ) rotate(0deg);
    }
    to {
      transform: translate(
        calc(-50% + var(--fb-ring-offset-x)),
        calc(-50% + var(--fb-ring-offset-y))
      ) rotate(360deg);
    }
  }
}









/* ======== Mobile-only layout (<= 1024px) ======== */
@media (max-width: 1024px){

  /* 共通余白・幅 */
  .about,
  .ourbusiness-section{
    padding: 48px 20px;
  }

  /* 企業概要 */
  .about .about-content{
    max-width: 720px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  /* 背景マル(装飾)は少し小さく＆中央寄せ */
  .about .aboutmaru{
    width: clamp(80px, 28vw, 140px);
    height: auto;
    margin: 0 auto 4px;
    display: block;
  }

  /* タイトル画像 */
  .about .about-title{
    width: clamp(180px, 60vw, 340px);
    height: auto;
    margin: 0 auto;
    display: block;
  }

  /* 本文 */
  .about .about-text{
    font-size: clamp(14px, 3.9vw, 16px);
    line-height: 1.9;
    letter-spacing: .02em;
    text-align: left;       /* 読みやすく左寄せ（中央が良ければ center に） */
    margin: 8px auto 0;
    max-width: 44em;        /* 横に伸びすぎないよう制御 */
  }

  /* 「詳しくみる」ボタン画像（クラス名は about-buttom のまま） */
  .about .about-buttom{
    display: inline-block;
    margin: 10px auto 0;
  }
  .about .about-buttom img{
    width: clamp(160px, 52vw, 280px);
    height: auto;
    display: block;
  }

  /* OUR BUSINESS セクション */
  .ourbusiness-section{
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .ourbusiness-section .ourbusiness-wrapper{
    max-width: 720px;
    margin: 0 auto;
  }
  /* 見出し（大きすぎると崩れるので可変） */
  .ourbusiness-section .ourbusiness-overlay{
    font-size: clamp(22px, 7vw, 32px);
    line-height: 1.25;
    letter-spacing: .06em;
    text-align: center;
    margin: 0;
  }
}






/* ===== モバイルだけの上書き ===== */
@media (max-width: 1024px){

  /* セクションの土台は中央寄せ＆はみ出し可に */
  .about{
    position: relative;
    overflow: visible;
    padding: 60px 20px 40px;
  }

  .about-content{
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ▼ 背景の丸は“後ろ”で中央固定（見切れ対策） */
  .aboutmaru{
    position: absolute !important;
    top: 0; left: 50%;
    transform: translate(-50%, -10%);
    width: clamp(180px, 55vw, 360px);
    height: auto;
    opacity: .15;
    z-index: 1;         /* ← 背面 */
    pointer-events: none;
  }

  /* ▼ タイトル画像を中央に固定（左流れ防止） */
  .about-title{
    position: static !important;   /* ← これで absolute 等を無効化 */
    display: block !important;
    margin: 0 auto 16px !important;/* 中央寄せ */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;

    width: clamp(200px, 70vw, 520px); /* 画面幅に応じて伸縮 */
    max-width: 90%;
    height: auto;
    z-index: 2;                      /* 丸より前面 */
  }

  /* ▼ 説明文はしっかり下へ（前に設定したままでもOK） */
  .about-text{
    position: relative;
    margin-top: 200px;   /* 必要なら値を伸縮：例 240px/280px… */
    max-width: 90%;
    text-align: center;
    font-size: 15px;
    line-height: 1.8;
    z-index: 3;          /* 一番前面にして確実に見えるように */
  }

  /* 「詳しくみる」ボタンも中央に */
  .about-buttom{
    display: block;
    margin: 40px auto 0;
  }
}

@media (max-width: 1024px){
  .about-title{
    position: relative !important;
    display: block !important;
    margin: 0 auto 16px !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(15%) !important; /* ← ここで右へ移動 */
    
    width: clamp(200px, 70vw, 520px);
    max-width: 90%;
    height: auto;
    z-index: 2;
  }
}

@media (max-width: 1024px){
  .about-content {
    position: relative;
    text-align: center; /* 子要素を中央寄せ */
    margin-top: 120px;  /* セクション全体を下げる */
  }

  .about-title {
    position: relative !important;
    display: block !important;
    margin: 0 auto 24px !important; /* 中央寄せ + 下げる */
    width: 70%;  /* 横幅を縮小して中央に */
    max-width: 400px;
    height: auto;
    z-index: 5;
  }

  .about-text {
    position: relative;
    margin: 0 auto;
    padding: 0 16px;
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
    z-index: 5;
  }
}

@media (max-width:1024px){
  .about-title{
    position: relative !important;   /* 強制的に通常配置 */
    display: block !important;
    margin: 40px auto 16px !important; /* 中央寄せ＋下げる */
    width: min(280px, 80%) !important;
    height: auto !important;
    z-index: 9999 !important;
    outline: 2px solid red !important; /* 位置確認用の枠線 */
    background: rgba(255,0,0,0.1);     /* 目印の赤背景 */
  }
}









/* ===== モバイル専用：企業概要タイトルと説明文 ===== */
@media (max-width:1024px){

  /* セクション全体 */
  .about{
    position: relative !important;
    padding: 56px 16px 40px !important;
    margin: 0 !important;
  }

  /* コンテナ */
  .about-content{
    position: relative !important;
    display: block !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: center !important;
    overflow: visible !important;
  }

  /* タイトル画像（自由に位置調整OK） */
  .about-title{
    position: relative !important;
    left: auto !important; 
    right: auto !important;
    top: auto !important;  
    bottom: auto !important;
    display: inline-block !important;
    transform: none !important;

    margin: 28px auto 18px !important;
    translate: 20px -10px;   /* ← 横:右へ20px / 縦:上へ-10px で自由調整 */

    width: min(120px, 50vw) !important;
    height: auto !important;
    z-index: 10 !important;

    outline: none !important;
    background: none !important;
  }

  /* 説明文 */
  .about-text{
    position: relative !important;
    margin: 16px auto 24px !important;  /* ← 下に余白を追加 */
    padding: 0 12px !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
    text-align: left !important;
    top: -20px;
  }

  /* 安全網（画像の比率維持） */
  .about img,
  .about svg{
    max-width: 100% !important;
    height: auto !important;
  }
}