:root{
  --brand:#517fc2;         /* #0b5ed7 主要ブルー（Bootstrap primary近似） */
  --blue:#0d6bba;	
  --brand-ink:#0a2a5e;     /* 見出し等の濃色 */
  --accent:#e9f2ff;        /* 淡い青（バッジ等） */
  --ink:#0f172a;           /* 文字の基本色 */
  --nav-h: 64px;
  --totop-img:url('../images/totop_default.png');

  --point-accent: #ff8f2b; /* オレンジ */
  --card-bg: #fff;
  --card-bd: rgba(0,0,0,.08);
  --card-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* テーマの上書き例（必要なら） */
body.theme-blue{}

/* ベース */
body{
  line-height:1.8; color:var(--ink);
  font-family:'Noto Sans JP',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
.text-blue{
 color: var(--blue);	
}
/* =====================================
   Bootstrap Primary Color Custom
===================================== */
.btn-primary{
  --bs-btn-bg:#0d6bba;
  --bs-btn-border-color:#0d6bba;

  --bs-btn-hover-bg:#0a5a9d;
  --bs-btn-hover-border-color:#0a5a9d;

  --bs-btn-active-bg:#084a82;
  --bs-btn-active-border-color:#084a82;
}
.btn-outline-primary{
  --bs-btn-color:#0d6bba;
  --bs-btn-border-color:#0d6bba;

  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#0d6bba;
  --bs-btn-hover-border-color:#0d6bba;

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:#0a5a9d;
  --bs-btn-active-border-color:#0a5a9d;
}
.btn-primary,
.btn-outline-primary{
  font-weight:400;
  letter-spacing:.03em;
  transition:all .25s ease;
}
.link-primary{
  color:#0d6bba !important;
}

.link-primary:hover{
  color:#0a5a9d !important;
}

.link-primary:focus{
  color:#0a5a9d !important;
}



a{
  color:#0d6bba;
}

a:hover{
  color:#0a5a9d;
}
.btn-md{
  padding: .65rem 1.4rem;
  font-size: 1.05rem;
  line-height: 1.2;
}

/* 見出し中のアクセント色（“なが”と“た”） */
.hl{ color: var(--brand); }

p{ font-size:1.05rem; }
.badge-soft{ background:var(--accent); color:var(--brand-ink); }

/* ナビ（オーバーレイ→スクロールで白） */
.navbar-overlay{
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}
.navbar-overlay .navbar-brand, .navbar-overlay .nav-link{ color:#fff; }
.navbar-overlay .nav-link.active, .navbar-overlay .nav-link:hover{ color:#f8f9fa; }
.navbar-overlay .navbar-toggler{ border-color: rgba(255,255,255,.5); }
.navbar-overlay .navbar-toggler-icon{ filter: invert(1) brightness(200%); }

.navbar-overlay.scrolled{
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.navbar-overlay.scrolled .navbar-brand, .navbar-overlay.scrolled .nav-link{ color:#0f172a; }
.navbar-overlay.scrolled .navbar-toggler{ border-color: rgba(0,0,0,.15); }
.navbar-overlay.scrolled .navbar-toggler-icon{ filter:none; }

/* ナビのロゴ */
.navbar-brand .brand-logo{
  height: 50px;
  width: auto;
  display: block;
  background: rgba(255,255,255,0.5);
  /*
  border-radius: 6px;
  */
  padding: 5px 10px;
}
@media (min-width: 992px){
  .navbar-brand .brand-logo{ height: 70px; }
}


/* ==== ヒーロー ==== */
.hero{
  position:relative; min-height:72vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(13,110,253,.25), transparent 60%),
              linear-gradient(180deg, #0b5ed7 0%, #0a58ca 40%, #0b5ed7 100%);
}
.hero::after{
  content:""; position:absolute; inset:0 0 auto 0; height:140px;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
  pointer-events:none;
}
.hero .container{ position:relative; z-index:1; }
.hero-deco{
  position:absolute; inset:auto -10vw -12vh -10vw; height:28vh;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  transform:skewY(-6deg);
}


/* ヒーローのコピーを右寄せ */
.hero .hero-copy{
  z-index: 3;                  /* スライドより前面（保険） */
}

/* 背景に白っぽいプレート（半透明＋ほんのりブラー） */
.hero-copy h1{
  /*
  padding: .65rem 2rem;
  */
    display: inline-block;        /* 幅をテキスト分にして右端に寄せる */
    margin-left: auto;            /* コンテナ内で右端へ */
  padding: .65rem clamp(1.25rem, 3.5vw, 7rem);
  margin-top:40vh;
  background: rgba(255,255,255,.65);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  backdrop-filter: saturate(160%) blur(3px);
  color: #0f172a;                 文字は濃いめ */
  text-shadow: none;              /* 影は無しでクリアに */
}


@media (min-width: 992px){
  .hero-copy{
    text-align: right;            /* 右揃え */
  }
  .hero-copy h1{
    display: inline-block;        /* 幅をテキスト分にして右端に寄せる */
    margin-left: auto;            /* コンテナ内で右端へ */
   /* ←左右の余白を増やす（5rem → 7rem 相当。可変で微調整） */
     padding-inline: clamp(7rem, 7rem + 2vw, 9rem);    
  }
}

/* モバイルは中央寄せのまま見やすく */
@media (max-width: 991.98px){
  .hero-copy{
    /* 
    text-align: center;
    */
    text-align: right;            /* 右揃え */
  }
  .hero-copy h1{
    margin-inline: auto;
    padding: .55rem 1rem;
    font-size: clamp(1.25rem, 6.2vw, 2.6rem);
    padding-inline: clamp(1rem, 6vw, 1.5rem);
  }
}



/* セクション見出し（左線） */
/*
.section-title{
  position:relative; padding-bottom:.5rem; margin-bottom:1rem;
  color:var(--brand-ink); text-align:left;
}
.section-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:96px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),transparent);
}
*/

.section-heading span{
  display:block;
  color:var(--blue);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.25em;
  margin-bottom:.4rem;
}

.section-heading h2{
  position:relative;
  display:inline-block;

  color:var(--brand-ink);
  font-size:clamp(2rem,2.5vw,2.8rem);
  font-weight:700;

  padding-bottom:.7rem;
  margin:0;
}

.section-heading h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;

  width:100%;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      transparent
    );
}





/* カードのちょい浮き演出 */
.lift{ transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }

/* アンカーずれ対策 */
section[id]{ scroll-margin-top: calc(var(--nav-h) + 8px); }

/* 上へ戻る */
.to-top{
  position:fixed; right:16px; bottom:16px; z-index:1030;
  width:56px; height:56px; border:none; cursor:pointer;
  background-image: var(--totop-img);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-color: transparent; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
  opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease, filter .15s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }


/* ===== Sash1 top ===== */
.sash-1{
  position: relative;
  background: url("../images/sash-wave.webp") right bottom / cover no-repeat;
  padding: clamp(28px, 4vw, 56px) 0; /* 上下余白だけ確保。左右はcontainerに任せる */
  min-height: 220px;                 /* コンテンツが少なくても波が見えるように */
  overflow: hidden;
}

/* 帯の器を相対配置にして、右上に文字を固定できるようにする */
.sash-1 .container{
 position: relative;
 padding-top: clamp(64px, 20vw, 120px);  ←スマホでしっかり空ける */
 }

/* 右上コピーのベース（フォントサイズは画面に応じて可変） */
.sash-1-kv{
  position: absolute;
  right: clamp(8px, 3.5vw, 24px);
  top:   clamp(8px, 3.5vw, 24px);
  margin: 0;
  text-align: center;
  z-index: 1;
  
  /* スマホでも読みやすいサイズ＆横幅に収める */
  width: min(92%, 30ch);
  line-height: 1.35;
  font-weight: 700;
  font-size: clamp(1rem, 4.6vw, 1.6rem);
  
  /*
  line-height: 1.35;
  font-weight: 700;
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.75rem);
  */
}

/* md以上は“右上に浮かせる” */
@media (min-width: 768px){
  .sash-1-kv{
    width: auto;  /* 行長制限を解除 */
    font-size: clamp(1.1rem, 2.2vw, 1.75rem);
    /*
    position: absolute;
    right: 0;                                   /* containerの右端に揃える */
    top: clamp(8px, 1.8vw, 28px);               /* ここで“上げ幅”を調整 */
    text-align: right;
    */
  }
  /* 左側ブロックの上に少し余白を作って、かぶりを避ける */
  .sash-1-ttl{
  margin-top: clamp(40px, 6vw, 96px); 
  }
}

/* ===== Sash redesign ===== */

.sash{
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px) 0; /* 上下余白だけ確保。左右はcontainerに任せる */
  background: url("../images/sash-wave.webp") right bottom / cover no-repeat;
  min-height: 220px;                 /* コンテンツが少なくても波が見えるように */
}

/* 帯の器を相対配置にして、右上に文字を固定できるようにする */
.sash .container{
 position: relative;
 /*
 padding-top: clamp(64px, 20vw, 120px);  ←スマホでしっかり空ける */
 */
}

/* 右上コピーのベース（フォントサイズは画面に応じて可変） */
.sash-kv{
  color: #0d6b2f;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  margin-bottom: clamp(24px, 3vw, 40px);	
  text-align: right;

  margin: 0;
  z-index: 1;
  
  /* スマホでも読みやすいサイズ＆横幅に収める */
  width: min(92%, 30ch);
  line-height: 1.35;
  font-weight: 700;
  font-size: clamp(1rem, 4.6vw, 1.6rem);
}

/* md以上は“右上に浮かせる” */
@media (min-width: 768px){
  .sash-kv{
    width: auto;  /* 行長制限を解除 */
    font-size: clamp(1.1rem, 2.2vw, 1.75rem);
    /*
    position: absolute;
    right: 0;                                   /* containerの右端に揃える */
    top: clamp(8px, 1.8vw, 28px);               /* ここで“上げ幅”を調整 */
    text-align: right;
    */
  }
  /* 左側ブロックの上に少し余白を作って、かぶりを避ける */
  .sash-ttl{ margin-top: clamp(40px, 6vw, 96px); }
}

/* 左タイトル */
.sash-ttl{
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-family: "Times New Roman", serif;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 1.5rem;
  color: #999;
}

.sash-ttl::first-letter{
  color: #0b7a43;
}

/* 本文 */
.sash-text{
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 2;
  color: #333;
}

/* バナー群 */
.sash-buttons{
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* バナー */
.sash-banner{
  display: inline-block;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.sash-banner img{
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
  border: 1px solid #d8d8d8;
  background: #fff;
}

/* hover */
.sash-banner:hover{
  transform: translateY(-4px);
}

.sash-banner:hover img{
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

/* スマホ */
@media (max-width: 991.98px){

  .sash-kv{
    width: 100%;
    max-width: none;
    text-align: center;
    font-size: clamp(1.15rem, 5vw, 1.45rem);
    line-height: 1.5;
    margin-bottom: 24px;
	}

  .sash-ttl{
    text-align: center;
	margin-top: 0;
  }

  .sash-text{
    text-align: left;
  }

  .sash-buttons{
    justify-content: center;
    gap: 14px;
    margin-bottom: 42px; /* ← ボタンとFuyuki ismの間 */
	}

  .sash-banner img{
    width: 160px;
  }
}



/* ==== 求人情報ー ==== */
/* 求人情報：右側ビジュアル */
.recruit-visual{
  position: relative;
  padding-bottom: 160px;
}

.recruit-photo{
  display: block;
  width: 100%;
  height: auto;
}

.recruit-person-box{
  position: absolute;
  right: -10%;
  bottom: 0;
  background: #9fc2e6;
	/*
  width: 115%;
  padding: 28px 36px 32px;
	*/
  padding: 25px 15px 30px;
	
  color: #000;
  z-index: 2;
}

.recruit-person-title{
  margin: 0;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 600;
}

.recruit-person-en{
  font-family: "Times New Roman", serif;
  font-size: 1rem;
  color: #000;
}

.recruit-person-list{
  margin: 0;
	/*
  padding-left: 1.2rem;
  line-height: 2.2;
  font-weight: 600;
	*/
}
/* 1198以下は画像を中央寄せ */
@media (max-width: 1198px){
  .recruit-person-box{
    position: static;
    width: 100%;
    margin-top: 16px;
    padding: 10px;
	  
  }

  .recruit-visual{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .recruit-photo{
    margin-inline: auto;
  }

}

/* タブレット以下は重ねず自然に縦並び */
@media (max-width: 991.98px){
  .recruit-visual{
    padding-bottom: 0;
  }

  .recruit-person-box{
    position: static;
    width: 100%;
    margin-top: 16px;
    padding: 24px;
  }
}

/* Recruit Points (求人カード) */
:root{
  --rp-accent: #ff8f2b;                  /* 見出しオレンジ */
  --rp-title-blue: #1f66cc;              /* タイトルの青 */
  --rp-border: rgba(0,0,0,.08);
  --rp-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.recruit-points .rp-card{
  background:#fff;
  border:1px solid var(--rp-border);
  border-radius: 14px;
  padding: 22px 22px 24px;
  box-shadow: var(--rp-shadow);
}

/* 上部の“仕事の魅力･ポイント”＋左右ライン */
.rp-eyecap{
  margin: 2px 0 12px;
  text-align: center;
  font-size: .98rem;
  font-weight: 700;
  color: var(--rp-accent);
  position: relative;
}
.rp-eyecap span{ padding: 0 .6rem; }
.rp-eyecap::before,
.rp-eyecap::after{
  content:"";
  position:absolute; top:50%;
  width:20%; max-width:100px; height:2px;
  background: linear-gradient(90deg, transparent 0, var(--rp-accent) 40%, var(--rp-accent) 60%, transparent 100%);
  transform: translateY(-50%);
}
.rp-eyecap::before{ left:0; }
.rp-eyecap::after { right:0; }

/* タイトルと本文 */
.rp-title{
  color: var(--rp-title-blue);
  line-height: 1.55;
  text-align: center;
  margin-bottom: 10px;
}
.rp-text{
  color:#374151;              /* やや淡い本文色 */
  line-height:1.9;
  text-align: center;
  font-size: 0.98rem;
}

/* スマホ微調整（ラインを短めに） */
@media (max-width: 575.98px){
  .rp-eyecap::before,
  .rp-eyecap::after{ width:22%; }
}
/* ==== Recruit tables ==== */
.table-slim th, .table-slim td{ padding: .9rem 1rem; }
.recruit-table{ border-color:#e6e6e6; }
.recruit-table th, .recruit-table td{ border-color:#e6e6e6; }
.recruit-table thead th{
  background:#f5f7fb; color:#334155; font-weight:600;
}
.recruit-table tbody th[scope="row"]{
  background:#f7f7f7; color:#475569; white-space:nowrap; font-weight:600;
}
.recruit-table tbody td{ color:#111827; }

.recruit-subtitle{
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand-ink);
  border-left: 5px solid var(--brand);
  padding-left: .75rem;
  margin-bottom: 1rem;
}

/* ==== 事業内容 ==== */
.service-subtitle{
  font-size:1.2rem;
  font-weight:500;
  padding-bottom:.8rem;
  /*
  border-bottom:2px solid #555;
  color:#222;
	*/
}

.service-icon{
  width: 28px;
  height: 28px;
  margin-right: 0px;
  vertical-align: -4px;
}

/* 施工実績：ギャラリー（自動スライド基盤） */
.gallery-viewport{ overflow:hidden; position:relative; isolation:isolate; }
.gallery-grid{ display:flex; flex-wrap:nowrap; gap:1rem; margin:0 !important; will-change: transform; }
:root{ --vis: 4; }
.gallery-grid > [class*="col-"]{
  flex: 0 0 calc((100% - (1rem * (var(--vis) - 1))) / var(--vis));
}
@media (max-width: 991.98px){ :root{ --vis: 3; } }
@media (max-width: 767.98px){ :root{ --vis: 2; } }
@media (max-width: 575.98px){ :root{ --vis: 1; } }

/* サムネの装飾（角丸(border-radius:12px;やめ)＋下グラデ＋2行省略） */
.item{ position:relative; border-radius:12px; overflow:hidden; }
.item img{ display:block; width:100%; height:auto; }
.item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:40%;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); z-index:1; pointer-events:none;
}
.item .caption{
  position:absolute; left:0; right:0; bottom:0; padding:.5rem .65rem; z-index:2; pointer-events:none;
}
.item .caption>span{
  color:#fff; font-size:.95rem; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* ギャラリー端のフェード（背景が白以外なら色合わせしてOK） */
.gallery-viewport::before, .gallery-viewport::after{
  content:""; position:absolute; top:0; bottom:0;
  width:clamp(12px,4vw,32px); z-index:2; pointer-events:none;
  background: linear-gradient(to right, rgba(255,255,255,0.10), rgba(255,255,255,0));
}
.gallery-viewport::before{ left:0; }
.gallery-viewport::after{ right:0; transform: scaleX(-1); }

/* ふわっと出る */
.appear{ opacity:0; transform: translateY(12px); transition: all .6s ease; }
.appear.in{ opacity:1; transform:none; }

/* フッター */
footer{ background:#0b1b33; color:#fff; }



/* --- Hero slider base --- */
/* --- Hero slider base --- */
.hero.hero-slider{
  position: relative;
  min-height: 72vh;
  overflow: hidden;
  isolation: isolate;
  background:#0b5ed7; /* 画像読み込み前の下地 */
  color:#fff;
}
.hero.hero-slider::after{ /* 上部を少し暗くして読みやすく */
  content:""; position:absolute; inset:0 0 auto 0; height:160px;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
  z-index: 2; pointer-events:none;
}
.hero.hero-slider .container{ z-index: 3; } /* テキストを最前面に */

.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slides .slide{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity 1.2s ease;   /* フェード */
  will-change: opacity;
}
.hero-slides .slide.is-active{ opacity:1; }

/* 各スライドの画像にKen Burnsを適用 */
.hero-slides .slide img{
  width:100%; height:100%; object-fit:cover;
  transform-origin:center;
  filter: brightness(.85) contrast(1.02);
  /* 毎回スタートから再生できるよう animation を付ける */
  animation: kb-zoom 18s ease-out both;
}

/* Ken Burns（“引く”動き）：scale大 → 等倍へ */
@keyframes kb-zoom{
  0%   { transform: scale(1.35) translate3d(0,0,0); }
  100% { transform: scale(1.00) translate3d(0,0,0); }
}

/* 動きを苦手な人の設定に配慮 */
@media (prefers-reduced-motion: reduce){
  .hero-slides .slide img{ animation:none !important; }
  .hero-slides .slide{ transition:none !important; }
}



/* --- Scroll reveal（keyframes版）--- */
/* --- Scroll reveal（keyframes版）--- */
/* ベース */
.reveal{
  opacity: 0;
  /* 方向は CSS変数で指定（デフォは “下から”） */
  --fromX: 0;
  --fromY: 60px;
  will-change: transform, opacity, filter;
}

/* “in” が付いたら滑らかに出る（1つのキーフレームでOK） */
.reveal.in{
  animation: reveal-in 1.5s cubic-bezier(.22,.61,.36,1) both;
}

/* 方向バリエーション：変数を上書きするだけ */
.reveal.up    { --fromX: 0;    --fromY:  60px; }  /* 下 → 上へ */
.reveal.down  { --fromX: 0;    --fromY: -60px; }  /* 上 → 下へ */
.reveal.left  { --fromX:-60px; --fromY:   0;   }  /* 左 → 右へ */
.reveal.right { --fromX: 60px; --fromY:   0;   }  /* 右 → 左へ */

/* スタッガ（遅延）はそのまま */
.reveal-stagger > *{ --d: 0ms; }
.reveal-stagger > *:nth-child(1){ --d: 0ms; }
.reveal-stagger > *:nth-child(2){ --d: 140ms; }
.reveal-stagger > *:nth-child(3){ --d: 280ms; }
.reveal-stagger > *:nth-child(4){ --d: 420ms; }
.reveal-stagger > *:nth-child(5){ --d: 560ms; }
.reveal-stagger .reveal{ animation-delay: var(--d, 0ms); }

/* キーフレーム：変数を参照して出現方向を決める */
@keyframes reveal-in{
  0%   { opacity:0; transform: translate3d(var(--fromX), var(--fromY), 0) scale(.985); filter: blur(2px); }
  60%  { opacity:1; }
  100% { opacity:1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}

/* 動きを苦手な人に配慮 */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .reveal.in{ animation:none !important; }
}


/* Lightbox 基本 */
/* Lightbox 基本 */
.lb{
  position:fixed; inset:0;
  background:rgba(0,0,0,.88);
  display:none;                   /* ←重要：初期は非表示 */
  align-items:center; justify-content:center;
  z-index:1100;
}
.lb.open{ display:flex; }

.lb-fig{ max-width:min(92vw,1200px); max-height:86vh; margin:0; }
.lb-img{ display:block; max-width:100%; max-height:calc(86vh - 3rem); /*border-radius:12px;*/ }
.lb-cap{ margin-top:.5rem; color:#fff; line-height:1.5; font-size:.95rem; }

.lb-btn{
  position:absolute; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff; font-size:28px; cursor:pointer; backdrop-filter:blur(2px);
}
.lb-close{ top:16px; right:16px; font-size:26px; }
.lb-prev{  top:50%; left:16px;  transform:translateY(-50%); }
.lb-next{  top:50%; right:16px; transform:translateY(-50%); }

/* =====================================
   2026/06/23 add SDGs Section
===================================== */
.sdgs-nagata{
  position: relative;
  overflow: hidden;
  min-height: 520px;
  padding: clamp(110px, 9vw, 140px) 0
           clamp(60px, 7vw, 90px);	
  background: #eef7ff;
}

.sdgs-nagata-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sdgs-nagata-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sdgs-nagata::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
	  /*
    linear-gradient(90deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.86) 35%,
      rgba(255,255,255,.35) 62%,
      rgba(255,255,255,.08) 100%);
	  */
    linear-gradient(90deg,
      rgba(255,255,255,.65) 0%,
      rgba(255,255,255,.45) 35%,
      rgba(255,255,255,.15) 62%,
      rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.sdgs-nagata-inner{
  position: relative;
  z-index: 3;
}


/* 上部英字帯 */
.sdgs-nagata-head{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:4;

  height:52px;
  padding-left:clamp(24px, 4vw, 56px);

  display:flex;
  align-items:center;

  background:
    linear-gradient(
      90deg,
      rgba(105,100,160,.55),
      rgba(20,95,180,.72)
    );

  color:#fff;
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic;
  font-size:clamp(1.1rem, 1.6vw, 1.8rem);
  letter-spacing:.04em;
}


.sdgs-nagata-copy{
  /*
  width: min(1050px, 95%);
  */
  width: min(760px, 88%);
  margin-bottom: 26px;
}

.sdgs-nagata-copy img{
  width: 90%;
  height: auto;
  display: block;
}

.sdgs-nagata-message{
  max-width: 720px;
  margin-bottom: 42px;
}

.sdgs-nagata-message p{
  /*
  color: #0a2a5e;
  */
  font-weight: 400;
  line-height: 2;
  margin: 0;
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "YuMincho",
    "MS PMincho",
    serif;	
  font-size:clamp(1.1rem,1.2vw,1.6rem);
}

.sdgs-nagata-catch{
  color:#0d6bba;
  font-weight:700;
  font-size:clamp(1.2rem,1.6vw,2rem);
  line-height:1.5;
  margin-bottom:40px;
  text-shadow:
    0 1px 0 rgba(255,255,255,.7);
}

.sdgs-nagata-icons{
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  max-width: 780px;
}

.sdgs-nagata-item{
  position: relative;
  text-align: center;
  padding: 16px 10px 14px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(81,127,194,.18);
  box-shadow: 0 10px 28px rgba(10,42,94,.08);
  backdrop-filter: blur(4px);
  transition: transform .25s ease, box-shadow .25s ease;
background:rgba(255,255,255,.50);	
}

.sdgs-nagata-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(10,42,94,.14);
}

.sdgs-nagata-item img{
  width: 60px;
  height: 60px;
  margin-bottom: 14px;
}

.sdgs-nagata-item p{
  margin: 0;
  color: #10233f;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.5;
}

/* タブレット */
@media (max-width: 991.98px){
  .sdgs-nagata{
    min-height: auto;
  }

  .sdgs-nagata::before{
    background: rgba(255,255,255,.78);
  }

  .sdgs-nagata-copy{
    width: 100%;
    margin-inline: auto;
  }

  .sdgs-nagata-message{
    text-align: center;
    margin-inline: auto;
  }

  .sdgs-nagata-icons{
    grid-template-columns: repeat(2, 1fr);
    max-width: 620px;
    margin-inline: auto;
  }
}

/* スマホ */
@media (max-width: 575.98px){
  .sdgs-nagata{
    padding: 50px 0 46px;
  }
  .sdgs-nagata-head{
    padding:10px 20px;
    font-size:1.1rem;
  }
  .sdgs-nagata-copy{
    margin-bottom: 22px;
  }

  .sdgs-nagata-message{
    margin-bottom: 28px;
  }

  .sdgs-nagata-message p{
    font-size: .95rem;
    line-height: 1.8;
  }
	
 .sdgs-nagata-catch{
    font-size:1.3rem;
    text-align:center;
  }
  .sdgs-nagata-icons{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sdgs-nagata-item{
    display: flex;
    align-items: center;
    text-align: left;
    gap: 16px;
    padding: 16px 18px;
  }

  .sdgs-nagata-item img{
    width: 58px;
    height: 58px;
    margin: 0;
    flex: 0 0 auto;
  }

  .sdgs-nagata-item p{
    font-size: .92rem;
  }
}

/* =====================================
   2026/06/23 add MEDIA
===================================== */

.media-subtitle{
  font-size:1.2rem;
  font-weight:500;
  padding-bottom:.2rem;
  border-bottom:2px solid #555;
  color:#222;
}

.media-card{
  display:block;
  text-align:center;
  color:#10233f;
  transition:.3s;
}

.media-cover{
  max-height:340px;
  width:auto;
  margin:auto;
  display:block;

  box-shadow:0 8px 20px rgba(0,0,0,.15);
  transition:.3s;
}

.media-card:hover
.media-cover{
  transform:translateY(-6px);
  box-shadow:0 15px 30px rgba(0,0,0,.25);
}
.media-card{
  color:#333;
	/*
  color:var(--bs-primary);
  color:#0d6bba;
	*/
}
.media-title{
  font-size:.95rem;
  line-height:1.7;
  /*
  color:#333;
  color:var(--bs-primary);
  */
  color:inherit;
}
.media-card:hover .media-title{
  color:#0a5a9d;
  text-decoration:underline;
  text-underline-offset:5px;
}

@media (max-width:767px){

  .media-subtitle{
    font-size:1.1rem;
  }

  .media-cover{
    max-height:260px;
  }

  .media-title{
    font-size:.85rem;
  }

}