/* page-3892.css  ★2025-07-XX 完全版（プリローダー & メインコンテンツ統合） */

/* ─────────────────────────────────────
   リセットCSS（ファイル先頭に一度だけ）
───────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}
.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────
   プリローダー用スタイル
───────────────────────────────────── */
.prldr-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  z-index: 999;
  clip-path: circle(150% at 50% 50%);
  opacity: 1;
  transition: opacity .5s ease-out;
  overflow: hidden;
  will-change: opacity;
  transform: translateZ(0);
}
.prldr-overlay.prldr-start .prldr-title h2,
.prldr-overlay.prldr-start .prldr-title h3 {
  opacity: 1;
  transform: translate(0) scale(var(--scale));
}
.prldr-overlay.prldr-start .prldr-image {
  opacity: 1;
  transform: translate(0) scale(var(--scale));
  filter: blur(0) saturate(1.2) contrast(1.1);
}
.prldr-overlay.prldr-hide {
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity .5s ease-out;
}
.prldr-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.prldr-title {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  font-family: 'Zodiak', serif;
  width: 80%;
  z-index: 1000;
}
.prldr-title h2,
.prldr-title h3 {
  opacity: 0;
  transform: translateY(50px);
}
.prldr-title h2 {
  transition: opacity .9s ease-out .2s, transform .9s ease-out .2s;
  font-weight: 300;
  font-size: 6vw;
  line-height: 1.2;
}
.prldr-title h3 {
  transition: opacity .9s ease-out .3s, transform .9s ease-out .3s;
  font-family: 'Satoshi', sans-serif;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .75rem;
}
.prldr-images {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1vw;
}
.prldr-image {
  --scale: 1;
  width: 14vw;
  height: 18vw;
  opacity: 0;
  background-size: cover;
  background-position: center;
  transform: translateX(-60px) scale(var(--scale));
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  filter: blur(10px) saturate(1.2) contrast(1.1);
  border-radius: 12px;
}
/* 各画像スケール指定 */
.prldr-image-1 { --scale: 1; background-image: url('https://nng2692600.xsrv.jp/wp-content/uploads/2025/05/124.png'); }
.prldr-image-2 { --scale: 1.4; background-image: url('https://nng2692600.xsrv.jp/wp-content/uploads/2025/05/125.png'); }
.prldr-image-3 { --scale: 1.2; background-image: url('https://nng2692600.xsrv.jp/wp-content/uploads/2025/05/126.png'); }
.prldr-image-4 { --scale: .9; background-image: url('https://nng2692600.xsrv.jp/wp-content/uploads/2025/05/127.png'); }
.prldr-image-5 { --scale: 1.2; background-image: url('https://nng2692600.xsrv.jp/wp-content/uploads/2025/05/128.png'); }
.prldr-image-6 { --scale: 1; background-image: url('https://nng2692600.xsrv.jp/wp-content/uploads/2025/05/129.png'); }
.prldr-image-7 { --scale: 1.2; background-image: url('https://nng2692600.xsrv.jp/wp-content/uploads/2025/05/130.png'); }
.prldr-image-8 { --scale: .9; background-image: url('https://nng2692600.xsrv.jp/wp-content/uploads/2025/05/131.png'); }
.prldr-overlay.prldr-start .prldr-image-1 { transition: opacity .8s ease-out .3s, transform .8s ease-out .3s, filter .8s ease-out .3s; }
.prldr-overlay.prldr-start .prldr-image-2 { transition: opacity .8s ease-out .35s, transform .8s ease-out .35s, filter .8s ease-out .35s; }
.prldr-overlay.prldr-start .prldr-image-3 { transition: opacity .8s ease-out .4s, transform .8s ease-out .4s, filter .8s ease-out .4s; }
.prldr-overlay.prldr-start .prldr-image-4 { transition: opacity .8s ease-out .45s, transform .8s ease-out .45s, filter .8s ease-out .45s; }
.prldr-overlay.prldr-start .prldr-image-5 { transition: opacity .8s ease-out .5s, transform .8s ease-out .5s, filter .8s ease-out .5s; }
.prldr-overlay.prldr-start .prldr-image-6 { transition: opacity .8s ease-out .55s, transform .8s ease-out .55s, filter .8s ease-out .55s; }
.prldr-overlay.prldr-start .prldr-image-7 { transition: opacity .8s ease-out .6s, transform .8s ease-out .6s, filter .8s ease-out .6s; }
.prldr-overlay.prldr-start .prldr-image-8 { transition: opacity .8s ease-out .65s, transform .8s ease-out .65s, filter .8s ease-out .65s; }
.prldr-copy {
  position: absolute;
  bottom: 3vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  color: #fff;
  text-transform: uppercase;
  font-size: .6rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.prldr-copy.prldr-show { opacity: 1; transform: translateY(0); }
.prldr-logo { height: 1em; width: auto; }

/* ─────────────────────────────────────
   メインコンテンツ用スタイル
───────────────────────────────────── */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
#hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  border: none;
  background: none;
}
.hero-text {
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  white-space: nowrap;
  color: black !important;
  text-align: center;
  font-size: 5.5rem;
  font-weight: bold;
  line-height: 1.2;
  z-index: 10;
  flex-wrap: nowrap;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.hero-text .hero-logo,
.hero-text span {
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.hero-loaded .hero-text { opacity: 1; }
.hero-loaded .hero-text .hero-logo,
.hero-loaded .hero-text span { opacity: 1; }
@keyframes fadeInCrisp { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1024px) { .hero-text { font-size: 3rem; } .hero-text .hero-logo { width: 70px; } }
@media (max-width: 768px) { .hero-text { font-size: 2.5rem; } .hero-text .hero-logo { width: 60px; } }
@media (max-width: 480px) { .hero-text { font-size: 1.4rem; } .hero-text .hero-logo { width: 30px; } }

/* --- ニューススライダー --- */
#news-slider { margin-top: 80px; }
.post-slide { background: #fff; margin: 20px 15px; border-radius: 15px; padding-top: 1px; box-shadow: 0 14px 22px -9px #bbcbd8; cursor: pointer; }
.post-slide .post-img { position: relative; overflow: hidden; border-radius: 10px; margin: -12px 15px 8px 15px; margin-left: -10px; height: 220px; }
.post-slide .post-img img { width: 100%; height: 100%; object-fit: cover; }
.post-slide .post-content { background: #fff; padding: 20px; border-radius: 0 0 15px 15px; }
.post-slide .post-title { font-size: 1.2rem !important; font-weight: bold; color: #333; margin-bottom: 12px; line-height: 1.4; }
.post-slide .post-description { font-size: .9rem; line-height: 1.6; color: #505050; white-space: pre-line; }
.owl-nav .owl-prev,
.owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50px;
  padding: 0 18px;
  box-shadow: 0 14px 25px -10px #92b4d0;
  transition: background .5s ease;
}
.owl-nav .owl-prev { left: 15px; }
.owl-nav .owl-next { right: 15px; }
.owl-nav .owl-prev span,
.owl-nav .owl-next span { font-size: 30px; color: #333; line-height: 1; }
@media (max-width: 768px) {
  .post-slide .post-title { font-size: 1rem !important; }
  .post-slide .post-description { font-size: .8rem; }
}

/* --- 事業内容セクション --- */
.business-section { background: transparent; padding: 100px 0; color: #333; position: relative; overflow: hidden; }
.business-section .section-header { text-align: center; margin-bottom: 50px; text-shadow: 1px 1px 3px rgba(0,0,0,0.1); }
.business-section .section-title { font-size: 3.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: #0d47a1; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); font-family: 'Montserrat', sans-serif; }
.business-section .section-description { font-size: 1.3rem; color: #555; margin-top: 10px; font-family: 'Montserrat', sans-serif; }
.service-item { background: rgba(255,255,255,0.9); padding: 30px; border-radius: 15px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; margin-bottom: 30px; }
.service-item:hover { transform: translateY(-10px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
.service-item .icon-wrap { font-size: 4rem; color: #00bcd4; margin-bottom: 20px; }
.service-item .service-title { font-size: 2rem; font-weight: bold; color: #333; margin-bottom: 15px; font-family: 'Montserrat', sans-serif; }
.service-item .service-text { font-size: 1rem; line-height: 1.6; color: #666; font-family: 'Montserrat', sans-serif; }

/* --- タブメニュー1 --- */
.tabs { width: 80%; height: 100px; margin: 50px auto 0; display: flex; align-items: center; box-shadow: 3px 3px 6px #1c1e22, -3px -3px 6px #262a2e; overflow: hidden; border-radius: 10px; }
.tabs li { width: 25%; height: 100%; display: flex; align-items: center; justify-content: center; color: #000; font-family: 'Montserrat', sans-serif; transition: 0.5s; cursor: pointer; font-size: 2rem; }
.tabs li:hover { box-shadow: 3px 3px 6px #1c1e22, -3px -3px 6px #262a2e; color: #00306a; position: relative; z-index: 1; border-radius: 10px; }
.tabs .active { box-shadow: 3px 3px 6px #1c1e22, -3px -3px 6px #262a2e; position: relative; z-index: 1; border-radius: 10px; color: #000 !important; }
.tabs li[data-id="0"].active { background-color: #FFD686; }
.tabs li[data-id="1"].active { background-color: #FFB0B0; }
.tabs li[data-id="2"].active { background-color: #B0FFB0; }
.tabs li[data-id="3"].active { background-color: #B0DDFF; }
.contents { width: 80%; margin: 50px auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; }
.box { gap: 20px; box-shadow: 3px 3px 6px #1c1e22, -3px -3px 6px #262a2e; border-radius: 10px; padding: 20px; width: 100%; animation: moving 1s ease; display: none; align-items: center; }
.box img { max-width: 100%; height: auto; border-radius: 10px; }
.box h3 { color: #000; font-family: 'Montserrat', sans-serif; font-size: 2rem; margin-bottom: 20px; }
.box p { color: #000; font-family: 'Montserrat', sans-serif; font-size: 1rem; }
.box.show { display: flex; }
.box.hide { display: none; }
@keyframes moving { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (max-width:1324px) {
  .tabs { flex-wrap: wrap; height: auto; }
  .tabs li { width: 100%; border-bottom: 1px solid #ccc; height: 60px; }
  .contents { flex-direction: column; }
  .box { flex-direction: column; align-items: center; }
}

/* --- 新しいタブメニュー2 (未使用の場合は無視) --- */
.tabs2 { width:80%; height:100px; margin:50px auto 0; display:flex; align-items:center; box-shadow:3px 3px 6px #111, -3px -3px 6px #333; overflow:hidden; border-radius:10px; background-color:#2e2e2e; }
.tabs2 li { width:25%; height:100%; display:flex; align-items:center; justify-content:center; color:#ccc; font-family:'Montserrat',sans-serif; transition:0.5s; cursor:pointer; font-size:2rem; }
.tabs2 li:hover { color:#fff; background-color:#3e3e3e; position:relative; z-index:1; border-radius:10px; }
.tabs2 .active { position:relative; z-index:1; border-radius:10px; color:#fff!important; background-color:#444; }
.contents2 { width:80%; margin:50px auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; }
@media (max-width:1324px) {
  .tabs2 { flex-wrap:wrap; height:auto; }
  .tabs2 li { width:100%; border-bottom:1px solid #555; height:60px; }
  .contents2 { flex-direction:column; }
  .contents2 .box { flex-direction:column; align-items:center; }
}

/* クロスライン背景 */
body::before {
  --size: 2.75rem;
  --line: color-mix(in oklch, canvasText, transparent 70%);
  content: '';
  width: 100vw;
  height: 100vh;
  background:
    linear-gradient(90deg, var(--line) 0.0625rem, transparent 0.0625rem var(--size)) 50% 50% / var(--size) var(--size),
    linear-gradient(var(--line) 0.0625rem, transparent 0.0625rem var(--size)) 50% 50% / var(--size) var(--size);
  mask: linear-gradient(-20deg, transparent 50%, #f0f0f0);
  position: fixed;
  top: 0;
  pointer-events: none;
  z-index: -1;
}