/* =========================================
   環境セクション：背景写真＋中央3リンク
   - 画像の中心は維持しつつ上下の表示量を調整できる
   - 高さはカスタムプロパティで制御（--env-height）
========================================= */

/* ベース：高さトークンでコントロール */
.rb-env-links{
    --env-height: clamp(300px, 40vw, 460px); /* 既定の高さ */
    --env-img-pos-y: 50%;                   /* 画像の縦位置（%） */
  
    position: relative;
    min-height: var(--env-height);
    display: grid;
    place-items: center;                     /* 横・縦とも中央寄せ */
    overflow: hidden;                        /* 角丸に沿って切り抜き */
  }
  
  /* 上下の表示を少なくしたい時に付与（さらに圧縮するバリエーション） */
  .rb-env-links.is-tight { --env-height: clamp(220px, 28vw, 340px); }
  .rb-env-links.is-ultra { --env-height: clamp(180px, 24vw, 300px); }
  
  /* 背景写真（全面） */
  .rb-env-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .rb-env-bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;                       /* 余白なしでトリミング */
    object-position: 50% var(--env-img-pos-y); /* 中心基準。必要なら 48% などに */
    display: block;
  }
  
  /* 中央の3リンク行（前面に） */
  .rb-env-row{
    z-index: 1;
    /* width: 100%; */
    /* padding-inline: clamp(12px, 2vw, 24px); */
    position: static;                        /* 念のための上書き */
    transform: none;
  }
  
  /* 各リンクボックス */
  .rb-env-pill{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    background: #fff;
    color: #0f172a;
    text-decoration: none;
    padding: 22px clamp(18px, 3vw, 28px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .rb-env-pill:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0,0,0,.16);
    text-decoration: none;
  }
  .rb-env-text{
    font-weight: 600;
    letter-spacing: .02em;
    font-size: 1rem;
  }
  .rb-env-icon{
    font-size: 20px;
    color: #0B67E8;
    transform: translateY(1px);
  }
  .rb-env-pill:hover .rb-env-icon{
    transform: translateX(3px);
  }
  
  /* SPでは高さ自動でOK（縦積みはBootstrapのcolで対応） */
  /* @media (max-width: 991.98px){
    .rb-env-links{ min-height: auto; }
  } */