:root{ --brand:#0b3d91; --brand-acc:#1e90ff; --text:#1b1f23; --bg:#f6f8fb; --white:#fff; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Studio Now Novarese','Noto Sans JP',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(120%) blur(6px);box-shadow:0 2px 12px rgba(0,0,0,.06);z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo img{height:50px;display:block}
.nav{display:flex;gap:20px;align-items:center}
.nav a{font-weight:600;color:var(--text);padding:8px 10px;border-radius:10px}
.nav a:hover{background:rgba(30,144,255,.08)}
.hamburger{display:none;font-size:26px;cursor:pointer}
.nav-toggle{display:none}
@media (max-width:860px){
  .hamburger{display:block}
  .nav{position:absolute;left:0;right:0;top:64px;background:var(--white);flex-direction:column;gap:0;border-bottom:1px solid #e8edf5;display:none}
  .nav a{width:100%;padding:14px 20px;border-radius:0;border-top:1px solid #f0f3f9}
  .nav a:first-child{border-top:none}
  .nav-toggle:checked ~ .nav{display:flex}
}

.hero h1 {letter-spacing: .4px;line-height: 1.25;font-weight: 700;font-size: clamp(38px, 5.2vw, 50px);margin: 0 0 8px;}
.hero p {margin: 0;font-size: clamp(16px, 2.2vw, 22px);opacity: .98;}


.hero-comment {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: 'Studio Now Novarese', serif;
  font-size: 20px;
  font-weight: 700;
  color: "#ffffff"; 
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  animation: kk-pan 3s ease-out forwards; /* 1回だけ再生 */

  /* 黒い淵をつける */
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}
	
/* フェードイン　*/
.hero {position: relative;color: #fff;min-height: 65vh;overflow: hidden;}
.hero-track {position: absolute;inset: 0;}
.hero-track img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;opacity: 0;transition: opacity 3s ease; /* ← フェード時間 */}
.hero-track img.is-active {opacity: 1;}

.button{display:inline-block;background:#1e90ff;color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;border:none}
.button.cta-main{padding:14px 22px;border-radius:999px;font-size:clamp(14px,2vw,18px);margin-top:18px}
.section{padding:70px 0}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border-radius:16px;box-shadow:0 10px 20px rgba(0,0,0,.06);padding:20px}
.card img{display:block;width:100%;height:auto;border-radius:12px}
@media (max-width:860px){.card-grid{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.split img{width:100%;border-radius:16px;box-shadow:0 12px 24px rgba(0,0,0,.08)}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}
.table th,.table td{padding:14px;border-bottom:1px solid #eef2f8;text-align:left;vertical-align:top}
.table th{background:#f2f6ff;color:#0b3d91;width:180px}
.footer{background:#0b1f44;color:#c9d6ff;margin-top:40px}
.footer-inner{max-width:1100px;margin:0 auto;padding:24px 20px;display:flex;gap:20px;justify-content:space-between;align-items:center}
.footer h4{color:#e8efff;margin:0 0 6px}
.footer .small{opacity:.9}
[data-animate]{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
[data-animate].in{opacity:1;transform:none}
.back-to-top{position:fixed;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;background:#1e90ff;color:#fff;border:none;font-size:18px;font-weight:700;box-shadow:0 8px 18px rgba(0,0,0,.2);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s ease}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}

/* === gallery slider (images: .jpg) === */
.slider{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.08);margin:10px 0 14px}
.slider .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:10px;background:#fff;-webkit-overflow-scrolling:touch}
.slider img{flex:0 0 100%;width:100%;height:auto;border-radius:10px;scroll-snap-align:center;object-fit:cover}
.slider .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(30,144,255,.9);color:#fff;border:none;border-radius:999px;width:36px;height:36px;display:grid;place-items:center;font-size:20px;font-weight:700;cursor:pointer}
.slider .prev{left:10px}
.slider .next{right:10px}
@media (min-width:900px){
  .slider img{flex:0 0 70%}
}

/* === recruit lead lines (staggered rise-in) === */
.lead-lines{display:grid;gap:8px;margin:14px 0 18px}
.lead-lines .line{font-size: 32px;color: #e91e63;opacity:0;transform:translateY(12px)}
.lead-lines.in .line{animation:lead-rise 1.8s cubic-bezier(.2,.65,.2,1) forwards}
.lead-lines.in .line:nth-child(2){animation-delay:.50s}
.lead-lines.in .line:nth-child(3){animation-delay:.80s}
@keyframes lead-rise{to{opacity:1;transform:none}}

/* === recruit PR highlight === */
.pr-blurb{position:relative;padding:18px 18px 18px 20px;border-radius:16px;background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.08);border:1px solid #eef2f8}
.pr-blurb::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(180deg,var(--brand-acc,#1e90ff), #ff6f61);border-radius:16px 0 0 16px}
.pr-blurb strong{font-weight:700}
.pr-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.badge{font-size:.88rem;padding:6px 10px;border-radius:999px;background:rgba(30,144,255,.12);
  border:1px solid rgba(30,144,255,.25)}


/* === slider: pan/ken-burns mode === */
.slider .track{
  position: relative;
  overflow: hidden;          /* 中でパンしても外にはみ出さない */
  display: block;            /* 横スクロール用のflexは不要 */
  padding: 0;                /* 余白は任意 */
}
/* パン用の基本スタイル（すでに導入済みのものに追加） */
.slider .track{
  position: relative;
  overflow: hidden;
  display: block;

  /* 表示比率を固定：PC 16:9、スマホは4:3に */
  aspect-ratio: 16 / 9;
}
@media (max-width: 700px){
  .slider .track{ aspect-ratio: 4 / 3; }
}

.slider .track img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;         /* 画像の縦横比を保ったまま全面に */
  opacity: 0;
  transition: opacity .8s ease;
  transform-origin: center;
}
.slider .track img.is-active{
  opacity: 1;
}

/* パン＋ズームのキーフレーム（4方向を用意） */
@keyframes pan-tl { /* 右下→左上へパンしつつズーム */
  0%   { transform: scale(1.0) translate(  2%,  2%); }
  100% { transform: scale(1.12) translate(-2%, -2%); }
}
@keyframes pan-tr { /* 左下→右上 */
  0%   { transform: scale(1.0) translate(-2%,  2%); }
  100% { transform: scale(1.12) translate( 2%, -2%); }
}
@keyframes pan-bl { /* 右上→左下 */
  0%   { transform: scale(1.0) translate( 2%, -2%); }
  100% { transform: scale(1.12) translate(-2%,  2%); }
}
@keyframes pan-br { /* 左上→右下 */
  0%   { transform: scale(1.0) translate(-2%, -2%); }
  100% { transform: scale(1.12) translate( 2%,  2%); }
}

/* 再生時に付けるクラス（方向を切替） */
.is-active.pan-tl { animation: pan-tl 6s ease-in-out forwards; }
.is-active.pan-tr { animation: pan-tr 6s ease-in-out forwards; }
.is-active.pan-bl { animation: pan-bl 6s ease-in-out forwards; }
.is-active.pan-br { animation: pan-br 6s ease-in-out forwards; }

/* 既存の横スクロール用スタイルは残っていても動作しますが不要なら削除可
   （.slider .track{display:flex;overflow-x:auto...} 等） */

/* KKSHIMIZ ロゴ表示用 */
.kkshimiz {
  position: absolute;
  top: 20px;
  right: 30px;
  font-family: 'Studio Now Novarese', serif;
  font-size: 50px;
  font-weight: 1000;
  color: #ffffff; /* 目を引くアクセントカラー */
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  animation: kk-pan 3s ease-out forwards; /* 1回だけ再生 */
}

/* アンダーバー装飾 */
.kkshimiz::after {
  content: "";
  display: block;
  width: 0;
  height: 10px;
  margin-top: 4px;
  margin-left: auto;  /* ← 右端を基点にする */
  background-color: #ffffff;
  animation: underline-rtl 3s ease-out forwards;
  animation-delay: .2s; /* 文字表示の後に実行 */
}

/* 左から右にパン */
@keyframes kk-pan {
  0%   { transform: translateX(-120%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
/* 右から左へパン */
@keyframes kk-pan-rtl {
  0%   { transform: translateX(120%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* 下から上に移動するアニメーション */
@keyframes panUp {
  0% {
    transform: translateY(100%); /* 下からスタート */
  }
  100% {
    transform: translateY(0); /* 元の位置に到達 */
  }
}

/* アンダーバー：右から左に伸びる */
@keyframes underline-rtl {
  from { width: 0; }
  to   { width: 100%; }
}

@media screen and (max-width: 1024px) {
  .hero .hero-comment h1 { font-size: 18px; line-height: 1.3; }
  .hero .hero-comment p  { font-size: 16px; }
  .lead-lines .line {font-size: 32px; }
  .kkshimiz { font-size: 32px; }
}
@media screen and (max-width: 768px) {
  .hero .hero-comment h1 { font-size: 16px; line-height: 1.3; }
  .hero .hero-comment p  { font-size: 14px; }
  .lead-lines .line {font-size: 20px; }
  .kkshimiz { font-size: 24px; }
}
@media screen and (max-width: 480px) {
  .hero .hero-comment h1 { font-size: 16px; line-height: 1.3; }
  .hero .hero-comment p  { font-size: 14px; }
  .lead-lines .line {font-size: 14px; }
  .kkshimiz { font-size: 18px; }
}

/* 設備一覧テーブル */
.table-wrapper {
  overflow-x: auto; /* スマホで横スクロール対応 */
  margin-top: 20px;
}

.equipment-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: #fff;
}

.equipment-table th,
.equipment-table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

.equipment-table th {
  background: #0a2a6a;
  color: #fff;
  font-weight: bold;
}

.equipment-table tr:nth-child(even) {
  background: #f9f9f9;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .equipment-table {
    font-size: 13px;
  }
  .equipment-table th,
  .equipment-table td {
    padding: 6px;
  }
}

/* === 無限ループ型設備ギャラリー === */
.equip-marquee {
  margin: 50px 0;
  overflow: hidden;
  position: relative;
}
.equip-marquee h2 {
  margin-bottom: 14px;
}
.equip-marquee-track {
  display: flex;
  overflow: hidden;
}
.equip-marquee-inner {
  display: flex;
  gap: 18px;
  animation: marquee-scroll 100s linear infinite;
}
.equip-item {
  flex: 0 0 auto;
  width: 400px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  overflow: hidden;
  text-align: center;
}
.equip-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.equip-item figcaption {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 8px;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


.table {
  width: 100%;
  border-collapse: collapse;
}

.table th, .table td {
  padding: 10px;
  border: 1px solid #ddd;
  vertical-align: top;
}

/* 列幅を常に 3:7 に固定 */
.table col.col-3 {
  width: 30%;
}
.table col.col-7 {
  width: 70%;
}

/* スマホでもそのまま維持 */
@media (max-width: 768px) {
  .table th, .table td {
    font-size: 14px;  /* 少し小さくして可読性確保 */
  }
}

/* 会社概要 */
/* ========== Icon Card（角丸＋アイコン） ========== */
.icon-card{
  position: relative;
  background: #fff;
  border: 1px solid #e8eef6;
  border-radius: 16px;
  padding: 18px 16px 16px 16px;
  box-shadow: 0 10px 24px rgba(10,42,106,.06);
}
.icon-card h1, .icon-card h2, .icon-card h3 { margin-top: 0; }

.icon-badge{
  position: absolute;
  top: -14px; left: -14px;
  width: 48px; height: 48px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #0a2a6a, #1e90ff);
  color:#fff; font-size: 22px; box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* ========== 行ごとライズ表示（共通） ========== */
.lead-lines > * {
  opacity: 0;
  transform: translateY(10px);
}
.lead-lines.in > * {
  animation: lead-rise 5s cubic-bezier(.2,.65,.2,1) forwards;
}
.lead-lines.in > *:nth-child(2){ animation-delay: .12s; }
.lead-lines.in > *:nth-child(3){ animation-delay: .5s; }
.lead-lines.in > *:nth-child(4){ animation-delay: 1.0s; }
.lead-lines.in > *:nth-child(5){ animation-delay: 1.5s; }
@keyframes lead-rise { to { opacity: 1; transform: none; } }

/* 段落を行分割して表示するためのラッパ（JSで生成） */
.split-lines .line {
  opacity: 0;
  transform: translateY(10px);
  display: block;
}
.split-lines.in .line {
  animation: lead-rise 7s cubic-bezier(.2,.65,.2,1) forwards;
}
.split-lines.in .line:nth-child(2){ animation-delay: .12s; }
.split-lines.in .line:nth-child(3){ animation-delay: .5s; }
.split-lines.in .line:nth-child(4){ animation-delay: 1.0s; }
.split-lines.in .line:nth-child(5){ animation-delay: 1.5s; }

/* ====== デフォルト（PC・タブレット用） ====== */
.lead-lines, .split-lines {
  font-size: 23px;   /* 通常サイズ */
  line-height: 1.6;  /* 読みやすい行間 */
  font-weight: 600;
}

/* ====== モバイル用（画面幅768px以下） ====== */
@media (max-width: 768px) {
  .lead-lines, .split-lines {
    font-size: 20px;   /* 小さめサイズ */
    line-height: 1.5;
  }
}

/* ====== さらに小さいスマホ用（480px以下） ====== */
@media (max-width: 480px) {
  .lead-lines, .split-lines {
    font-size: 18px;   /* もっと小さく */
    line-height: 1.4;
  }
}

/* --- lead-lines モバイル上書き（大きめ） --- */
@media (max-width: 768px) {
  .lead-lines .line { font-size: 24px; }  /* 既存の20pxを上書き */
}
@media (max-width: 480px) {
  .lead-lines .line { font-size: 20px; }  /* 既存の14pxを上書き */
}

/* --- Google Map をレスポンシブに --- */
.map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;      /* PCは16:9 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 700px) {
  .map-wrap { aspect-ratio: 4 / 3; }  /* スマホは少し縦長に */
}