:root{
  --bg:#f6f9ff; --ink:#14171f; --ink-2:#4b5565;
  --brand:#0a7cff; --brand-2:#5aa9ff; --paper:#fff; --tone:#f6f9ff;
  --ring:0 0 0 3px rgba(10,124,255,.18); --radius:16px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  font-family: "Noto Sans JP",
  sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

img{max-width:100%;height:auto;display:block}
.wrap{width:min(1120px,92%);margin-inline:auto}
.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.85);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid #eef1f5}
.header .wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{font-weight:900;letter-spacing:.02em;text-decoration:none;color:#12141a}
.nav{display:flex;gap:22px;align-items:center}
.nav a{color:#2a2f39;text-decoration:none;font-weight:600}
.nav a:hover{color:var(--brand)}
.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;position:relative}
.nav-toggle span{position:absolute;left:12px;right:12px;height:2px;background:#333;transition:.25s}
.nav-toggle span:nth-child(1){top:14px}.nav-toggle span:nth-child(2){top:21px}.nav-toggle span:nth-child(3){top:28px}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(10,124,255,.25);border:2px solid transparent;transition:.2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(10,124,255,.25)}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--brand)}.btn.small{padding:8px 12px;font-size:.95rem;color:#ffffff}
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(110%) contrast(105%) brightness(95%)}
.hero h1{font-weight: 900; letter-spacing: .01em;}
.hero h3{font-weight: 700;}

.hero .accent{background:linear-gradient(120deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p {
  color: #f5f8ff;
  font-size: clamp(14px, 2.2vw, 18px);
  text-shadow: 0 3px 14px rgba(0,0,0,.45);
  max-width: 72ch;
  margin-inline: auto;;
}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.trust{width:min(900px,96%);margin:12px auto 0;opacity:.95}
.section{padding:64px 0}.section.alt{background:var(--tone)}
.title{font-size:clamp(22px,3.2vw,32px);margin:0 0 26px;position:relative}
.title::after{content:"";display:block;width:64px;height:4px;background:var(--brand);border-radius:2px;margin-top:10px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:#fff;border:1px solid #eef1f5;border-radius:var(--radius);padding:20px;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.card h3{margin:8px 0}.card ul{margin:10px 0 0 18px}
.note{margin-top:10px;color:#5a6473}
.area{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center}
.area-list{font-size:1.05rem}.muted{color:#6b7280}
.table{border:1px solid #e6ecf5;border-radius:12px;overflow:hidden}
.row{display:grid;grid-template-columns:1.4fr .8fr 1.2fr}
.row div{padding:12px 14px;border-top:1px solid #eef1f5}
.row.head{background:#f7fbff;font-weight:700}.row.head div{border-top:0}
.steps{display:flex;gap:12px;list-style:none;padding:0;margin:0}
.steps li{background:#fff;border:1px solid #e6ecf5;border-radius:12px;padding:14px 18px;flex:1;display:flex;gap:12px;align-items:center}
.steps li span{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:999px;background:var(--brand);color:#fff;font-weight:800}
.faq{background:#fff;border:1px solid #e6ecf5;border-radius:12px;padding:14px 18px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700}
.contact .form{background:#fff;border:1px solid #eef1f5;border-radius:var(--radius);padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.grid .wide{grid-column:1 / -1}
input,select,textarea{width:100%;padding:12px;border:1px solid #d9dfeb;border-radius:12px;font:inherit;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:var(--ring)}
.footer{border-top:1px solid #eef1f5;padding:22px 0;background:#fff}
.f-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.copy{color:#6b7280}
.cta-fab{position:fixed;right:16px;bottom:16px;width:56px;height:56px;display:grid;place-items:center;border-radius:999px;background:var(--brand);color:#fff;text-decoration:none;font-size:22px;box-shadow:0 8px 24px rgba(10,124,255,.35)}
@media (max-width: 880px){
  .nav{position:fixed;inset:64px 0 auto 0;background:#fff;border-bottom:1px solid #eef1f5;padding:14px 4%;display:none;flex-direction:column;gap:12px}
  .nav.open{display:flex}.nav-toggle{display:block}
  .area{grid-template-columns:1fr}
}
/* === Hero Slider === */
.hero { position: relative; }
.hero-inner { position: relative; z-index: 2; }

.hero-slider{
  position:absolute; top:0; left:50%;
  transform:translateX(-50%);
  width:100vw; height:100%; z-index:0; overflow:hidden;
}
.hero .slide{
  position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
}
.hero .slide.is-active{
  opacity:1;
}
.hero .slide img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}

/* 上側だけ薄暗グラデ（文字の可読性） */
.hero::before{
  content:"";
  position:absolute; inset:0;
  z-index:1; pointer-events:none;
  background: linear-gradient(
          180deg,
          rgba(0,0,0,.45) 0%,
          rgba(0,0,0,.18) 38%,
          rgba(0,0,0,0) 62%
  );
}

/* 全体を少し明るく（被写体が暗い写真対応） */
.hero::after{
  content:"";
  position:absolute; inset:0;
  z-index:1; pointer-events:none;
  background: linear-gradient(
          180deg,
          rgba(255,255,255,.14) 0%,
          rgba(255,255,255,.00) 50%,
          rgba(255,255,255,.10) 100%
  );
}

/* ナビゲーション（左右矢印） */
.slider-prev, .slider-next{
  position:absolute; z-index:4; top:50%; transform:translateY(-50%);
  width:46px; height:46px; display:grid; place-items:center; cursor:pointer;
  border:0; border-radius:999px; background:rgba(255,255,255,.92);
  box-shadow:0 6px 18px rgba(0,0,0,.18); font-size:22px; line-height:1;
}
.slider-prev{ left: 12px; }
.slider-next{ right: 12px; }
@media (hover:hover){
  .slider-prev, .slider-next{ opacity: 0; transition: .2s; }
  .hero:hover .slider-prev, .hero:hover .slider-next{ opacity: 1; }
}

/* ドット（ページネーション） */
.slider-dots{
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  bottom: 12px; display: flex; gap: 8px;
}
.slider-dots button{
  width: 9px; height: 9px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,.6); cursor: pointer;
}
.slider-dots button[aria-selected="true"]{
  background: #fff; width: 24px;
  border-radius: 999px;
}
@media (max-width: 640px){
  .steps{ display:grid; grid-template-columns:1fr; gap:12px; }
  .steps li{ flex: initial; width:100%; }
}

/* FAQ smooth wrapper (JS generates .faq-content) */
.faq .faq-content{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .32s ease, opacity .28s ease;
}
.faq[open] .faq-content{ opacity:1; }

/* === Inspection Guide === */
.sub{ font-size:1.2rem; margin:18px 0 10px; }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling: touch; }

.data-table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  border:1px solid #e6ecf5;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.data-table thead th{
  background:#f7fbff;
  font-weight:700;
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid #e6ecf5;
  white-space:nowrap;
}
.data-table td{
  padding:12px 14px;
  border-top:1px solid #eef1f5;
  vertical-align:top;
}
.data-table tbody tr:nth-child(odd){ background:#fcfdff; }

.annotation, .annotations li{
  background:#ffffff;
  border:1px solid #e6ecf5;
  border-left:4px solid var(--brand);
  border-radius:10px;
  padding:10px 12px;
  margin:10px 0;
}
.annotations{
  list-style:none;
  padding:0; margin:8px 0 4px;
  display:grid; gap:8px;
}

/* === Hero full-bleed & full-height === */
.hero{
  /* 端末のアドレスバー高さ変動に強い動的vhを優先 */
  min-height: 100svh;
}

@supports (height: 100dvh) {
  .hero {
    height: 100dvh;
    min-height: 100dvh;
  }
}

/* 既存のスライダーを全幅に（既にOKだが保険で再掲） */
.hero .hero-slider{
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
}
/* 画像は常にトリミングでフィット */
.hero .slide img{
  width:100%; height:100%;
  object-fit: cover; object-position: center;
}

/* === Hero text glass panel === */
.hero-copy{
  display:inline-block;
  padding:16px 18px;
  border-radius:16px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: saturate(140%) blur(2px);
}

/* 既存の上部グラデも活かしつつ少し濃いめに */
.hero::before{
  background: linear-gradient(180deg,
  rgba(0,0,0,.58) 0%,
  rgba(0,0,0,.32) 35%,
  rgba(0,0,0,0) 70%);
}

/* === Mobile (≤640px) hero tuning === */
@media (max-width:640px){
  .hero{ min-height: 88svh; }
  .hero-inner{ padding: 56px 0 48px; text-align:center; }
  .hero h1{ font-size: clamp(26px, 9vw, 36px); }
  .hero p{ font-size: clamp(14px, 4vw, 16px); }
  .hero-cta .btn{ width: min(420px, 88vw); }
  /* 上を見せたい写真は上寄せ */
  .hero .slide img{ --hero-pos: 50% 30%; }
}

/* 安全領域（iPhone下部のホームバー回避） */
@supports(padding: max(0px)){
  .hero-cta{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

/* === Hero: full-bleed & full-height === */
.hero{
  /* 端末のアドレスバー高さ変動に強いvh */
  min-height: 100svh;
}
@supports (min-height: 100dvh){
  .hero{ min-height: 100dvh; }
}
/* スライダーを常に画面幅いっぱいに（余白ゼロ） */
.hero .hero-slider{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}
/* 画像はトリミングでフィット（縦いっぱい＆横全幅） */
.hero .slide{ position: absolute; inset: 0; }
.hero .slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* ←これが“縦合わせ＆横全幅”の肝 */
  object-position: var(--hero-pos, center);
}

:root{ --brand:#0a7cff; --brand-deep:#003a8c; --paper:#fff; --ink:#1b2233; --muted:#6b768d; --radius:16px; }
html{scroll-behavior:smooth}
.hero-title{ font-family:'BIZ UDPGothic','Zen Kaku Gothic New','Noto Sans JP',sans-serif; font-weight:900; letter-spacing:.06em; }
.button{ background:var(--brand-deep); color:#fff; padding:12px 20px; border-radius:999px; display:inline-block; text-decoration:none; }
.button:hover{ filter:brightness(1.1) }
.header .cta .button{ background:var(--brand-deep); }
.section{ padding:64px 0; } .alt{ background:#f6f9ff; }
.wrap{ width:min(1120px,92%); margin-inline:auto }
.title{ font-size:clamp(24px,3vw,36px); margin:0 0 12px }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px }
.work-card{ background:#fff; border:1px solid #e7eef9; border-radius:12px; overflow:hidden; display:block; color:inherit; text-decoration:none }
.work-card img{ aspect-ratio:16/9; width:100%; object-fit:cover }
.work-card .meta{ display:flex; justify-content:space-between; padding:8px 12px; font-size:12px; color:var(--muted) }
.work-card h3{ font-size:16px; padding:0 12px 12px; margin:0 }
.work-detail .hero{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-top:12px }
.cat{ background:#003a8c; color:#fff; padding:4px 8px; border-radius:999px; font-size:12px }
.chips{ display:flex; gap:10px; margin-bottom:16px } .chip{ padding:6px 12px; border-radius:999px; background:#eaf2ff; color:#003a8c; text-decoration:none }
.news-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.news-item{ display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:8px; border:1px solid #e7eef9; background:#fff }
.news-item .label-new{ color:#fff; background:#e0002a; padding:2px 8px; border-radius:999px; font-weight:700; animation:pop 2s ease-in-out infinite alternate }
@keyframes pop{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
.hero{ position:relative; overflow:hidden } .hero img{ width:100%; object-fit:cover }
.hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35)); pointer-events:none }
.hero h1,.hero h2,.hero .title{ color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.35) }
@media (max-width:480px){ .wrap{width:94%} .grid{grid-template-columns:1fr 1fr} }

/* ---- Stronger sitewide overrides to visually change design ---- */
body{background:#f6f9ff; color:#111; font-family:'Zen Kaku Gothic New','Noto Sans JP',system-ui,sans-serif}
.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.75)!important;backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid #e8eef6}
.brand{font-weight:900;letter-spacing:.02em;text-decoration:none;color:#12141a}
.nav a{color:#2a2f39;text-decoration:none;font-weight:600}
.nav a:hover{color:var(--brand)}
.hero{position:relative;min-height:64vh;display:grid;place-items:center;background:#0b1220}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(105%) contrast(1.05)}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,10,30,.12),rgba(0,10,30,.23))}
.hero .title, .hero h1{position:relative;color:#fff;font-size:clamp(32px,5vw,64px);line-height:1.2;margin:0;text-align:center}
.hero .title.hero-title{font-weight:900;letter-spacing:.04em}
.section{padding:72px 0}
.section.alt{background:#f6f9ff}
.button{background:var(--brand-deep);color:#fff;padding:12px 20px;border-radius:999px;display:inline-block;text-decoration:none}
.button:hover{filter:brightness(1.1)}
/* Skeletons for empty states */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.ph{background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);background-size:800px 100px;animation:shimmer 1.2s infinite}
.card-skel{border:1px solid #e7eef9;border-radius:12px;overflow:hidden;background:#fff}
.card-skel .ph-img{height:160px}
.card-skel .ph-row{display:flex;justify-content:space-between;padding:8px 12px}
.card-skel .ph-tag{width:60px;height:14px;border-radius:999px}
.card-skel .ph-date{width:80px;height:14px;border-radius:999px}
.card-skel .ph-title{height:18px;margin:0 12px 12px;border-radius:6px}

/* ==== ここから “Heroフェード演出用 追記” ==== */
/* 白フェード＋ロゴ */
.fade-logo{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#004080;
  font-weight:900;
  font-size:clamp(18px,3vw,28px);
  z-index:999;
  opacity:1;
  transition:opacity 1.5s ease;
}
.fade-logo.hide{
  opacity:0;
  pointer-events:none;
}

/* テキストの遅延フェード（初期は少し下げて非表示） */
.hero-content{
  opacity:0; transform:translateY(10px); transition:opacity 1.2s ease, transform 1.2s ease;
}
.hero-content.active{
  opacity:1; transform:translateY(0);
}

/* ===== Works Detail Gallery ===== */
.work-visual{
  margin-bottom:24px;
}

.work-main-image-area{
  width:100%;
  aspect-ratio:4 / 3;
  background:#f7f7f7;
  border:1px solid #e7eef9;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.work-main-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#fff;
  transition: opacity .2s ease;
  cursor: pointer;
}

.work-thumbnail-list{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.work-thumbnail-btn{
  appearance:none;
  border:2px solid transparent;
  background:#fff;
  padding:0;
  margin:0;
  cursor:pointer;
  border-radius:10px;
  overflow:hidden;
  display:block;
  width:100px;
  height:100px;
  flex:0 0 100px;
  transition:border-color .2s ease, transform .2s ease;
}

.work-thumbnail-btn:hover{
  transform:translateY(-1px);
}

.work-thumbnail-btn.is-active{
  border-color:#003a8c;
}

.work-thumbnail-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}



/* タブレット */
@media (max-width:1024px){
  .work-main-image-area{
    aspect-ratio:4 / 3;
  }

  .work-thumbnail-btn{
    width:90px;
    height:90px;
    flex:0 0 90px;
  }
}

/* スマホ */
@media (max-width:767px){
  .work-main-image-area{
    aspect-ratio:1 / 1;
  }

  .work-thumbnail-list{
    gap:10px;
  }

  .work-thumbnail-btn{
    width:72px;
    height:72px;
    flex:0 0 72px;
  }
}