/* ============================================================
   CONFIG
   基準幅を変数で管理。px値 ÷ --base × 100vw で自動計算。
   PC基準: 1366px / SP基準: 375px
   ============================================================ */

:root {
  --base: 1366;
  --base-sp: 375;
}

/* ============================================================
   BASE
   ============================================================ */

p {
  color: #000;
  margin: 0;
}

p.is_white {
  color: #fff;
}

/* ============================================================
   UTILITY
   ============================================================ */

.u_pc {
  display: block;
}
@media screen and (max-width: 767px) {
  .u_pc {
    display: none;
  }
}

.u_sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .u_sp {
    display: block;
  }
}

.nobr {
  white-space: nowrap;
}

@media screen and (mim-width: 768px) {
  .nobr_pc {
    white-space: nowrap;
  }
}
/* ============================================================
   TOP_CONCEPT
   ============================================================ */

/* TOPのショーケースはポジションなし（iPad見切れ対策） */

.top-banners .un_showcase {
  height: auto;
}

.top-banners .un_showcase_bg {
  position: unset;
}

.un_concept {
  overflow: hidden;
  padding: clamp(0px, calc(120 / var(--base) * 100vw), 120px) clamp(0px, calc(100 / var(--base) * 100vw), 100px) clamp(0px, calc(170 / var(--base) * 100vw), 170px);
  position: relative;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .un_concept {
    padding: clamp(0px, calc(100 / var(--base-sp) * 100vw), 100px) clamp(0px, calc(25 / var(--base-sp) * 100vw), 25px) clamp(0px, calc(100 / var(--base-sp) * 100vw), 100px);
  }
}

.un_concept_inner {
  position: relative;
  z-index: 1;
}

/* 背景画像 */
.un_concept_bg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

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

/* 左右リボン */
.un_concept_ribbon {
  height: 100%;
  position: absolute;
  top: 0;
  width: clamp(0px, calc(60 / var(--base) * 100vw), 60px);
  z-index: 0;
}

@media screen and (max-width: 767px) {
  .un_concept_ribbon {
    width: clamp(0px, calc(30 / var(--base-sp) * 100vw), 30px);
  }
}

.un_concept_ribbon--left {
  left: 0;
}

.un_concept_ribbon--right {
  right: 0;
}

/* コンセプトテキスト */
.un_concept_text p {
  color: #000;
  font-size: clamp(0px, calc(25 / var(--base) * 100vw), 25px);
  font-weight: 500;
  letter-spacing: 0.25em;
  line-height: 3;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .un_concept_text p {
    font-size: clamp(0px, calc(12 / var(--base-sp) * 100vw), 15px);
    letter-spacing: 0.17em;
    line-height: 2.9;
    text-align: center;
  }
}

/* ロゴエリア */
.un_concept_logo {
  margin-bottom: clamp(0px, calc(200 / var(--base) * 100vw), 200px);
  padding-top: clamp(0px, calc(140 / var(--base) * 100vw), 140px);
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .un_concept_logo {
    margin-bottom: clamp(0px, calc(120 / var(--base-sp) * 100vw), 120px);
    margin-left: calc(-20 / var(--base-sp) * 100vw);
    padding-top: clamp(0px, calc(80 / var(--base-sp) * 100vw), 80px);
  }
}

/* ロゴエリア画像 */
.un_concept_logo img {
  width: clamp(0px, calc(740 / var(--base) * 100vw), 740px);
}
@media screen and (max-width: 767px) {
  .un_concept_logo img {
    width: clamp(0px, calc(283 / var(--base-sp) * 100vw), 283px);
  }
}

/* フィロソフィーバナー */
.un_concept_philosophy {
  display: block;
  margin-top: clamp(0px, calc(40 / var(--base) * 100vw), 40px);
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .un_concept_philosophy {
    margin-top: clamp(0px, calc(30 / var(--base-sp) * 100vw), 30px);
  }
}

.un_concept_philosophy img {
  width: 100%;
}

/* Moreボタン */
.un_concept_philosophy__btn {
  display: block;
  left: 50%;
  position: absolute;
  top: 80%;
  transform: translate(-50%, -50%);
  width: clamp(0px, calc(300 / var(--base) * 100vw), 300px);
}

@media screen and (max-width: 767px) {
  .un_concept_philosophy__btn {
    width: clamp(0px, calc(250 / var(--base-sp) * 100vw), 250px);
  }
}

.un_concept_philosophy__btn-default,
.un_concept_philosophy__btn-hover {
  transition: opacity 0.3s;
}

.un_concept_philosophy__btn-hover {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}

/* MOREボタンのdefault/hover切り替え（バナー全体のホバーで発火） */
.un_concept_philosophy__btn-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.un_concept_philosophy:hover .un_concept_philosophy__btn-hover {
  opacity: 1;
}

.un_concept_philosophy:hover .un_concept_philosophy__btn-default {
  opacity: 0;
}

/* ============================================================
   TOP_GROUP
   ============================================================ */

.un_group {
  overflow: hidden;
  padding: clamp(0px, calc(100 / var(--base) * 100vw), 100px) 0;
  position: relative;

  background: linear-gradient(to bottom left, rgba(223, 228, 232, 0.2) 0%, rgba(203, 208, 213, 0.2) 100%);
}
@media screen and (max-width: 767px) {
  .un_group {
    padding: clamp(0px, calc(60 / var(--base-sp) * 100vw), 60px) 0;
  }
}

/* タイトル */
.un_group_ttl {
  margin-bottom: clamp(0px, calc(50 / var(--base) * 100vw), 50px);
  padding: 0 clamp(0px, calc(100 / var(--base) * 100vw), 100px);
  text-align: center;
}

@media screen and (max-width: 767px) {
  .un_group_ttl {
    margin-bottom: clamp(0px, calc(30 / var(--base-sp) * 100vw), 30px);
    padding: 0 clamp(0px, calc(25 / var(--base-sp) * 100vw), 25px);
    text-align: center;
  }
}

.un_group_ttl img {
  width: clamp(0px, calc(542 / var(--base) * 100vw), 542px);
}
@media screen and (max-width: 767px) {
  .un_group_ttl img {
    width: clamp(0px, calc(300 / var(--base-sp) * 100vw), 400px);
  }
}

/* スライダー */

#group .un_group_inner {
  transform: unset !important;
}

.un_group_slider {
  cursor: grab;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  /* scroll-snap-type: x mandatory; */
  scrollbar-width: none;
}

.un_group_slider::-webkit-scrollbar {
  display: none;
}

.un_group_item {
  flex-shrink: 0;
  /* scroll-snap-align: center; */
  width: clamp(0px, calc(556 / var(--base) * 100vw), 556px);
}

@media screen and (max-width: 767px) {
  .un_group_item {
    width: clamp(0px, calc(280 / var(--base-sp) * 100vw), 280px);
  }
}

.un_group_slider:active {
  cursor: grabbing;
}

.un_group_list {
  display: flex;
  gap: clamp(0px, calc(20 / var(--base) * 100vw), 20px);
  list-style: none;
  margin: 0;
  padding: 0 clamp(0px, calc(100 / var(--base) * 100vw), 100px);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
@media screen and (max-width: 767px) {
  .un_group_list {
    gap: clamp(0px, calc(15 / var(--base-sp) * 100vw), 15px);
    padding: 0 clamp(0px, calc(25 / var(--base-sp) * 100vw), 25px);
  }
}

/* カード */
.un_group_item {
  flex-shrink: 0;
  width: clamp(0px, calc(556 / var(--base) * 100vw), 556px);
}
@media screen and (max-width: 767px) {
  .un_group_item {
    width: clamp(0px, calc(310 / var(--base-sp) * 100vw), 410px);
  }
}

.un_group_item a {
  display: block;
}

.un_group_item a:hover {
  opacity: 0.8;
}

.un_siteFooter_sideLinks ul:last-child li:last-child a:hover {
  opacity: 1;
}

.un_group_item__img {
  aspect-ratio: 556 / 328;
  margin-bottom: clamp(0px, calc(12 / var(--base) * 100vw), 12px);
  overflow: hidden;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .un_group_item__img {
    margin-bottom: clamp(0px, calc(10 / var(--base-sp) * 100vw), 10px);
  }
}

.un_group_item__img img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.un_group_item__name {
  color: #000;
  font-size: clamp(0px, calc(14 / var(--base) * 100vw), 14px);
  letter-spacing: 0.08em;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .un_group_item__name {
    font-size: clamp(0px, calc(12 / var(--base-sp) * 100vw), 12px);
  }
}

/* ページネーション（SPのみ） */
.un_group_paging {
  display: none;
}
@media screen and (max-width: 767px) {
  .un_group_paging {
    display: flex;
    gap: clamp(0px, calc(7 / var(--base-sp) * 100vw), 7px);
    justify-content: center;
    margin-top: clamp(0px, calc(20 / var(--base-sp) * 100vw), 20px);
  }
}

.un_group_paging__dot {
  background-color: #b4b4b4;
  border-radius: 50%;
  height: clamp(0px, calc(8 / var(--base-sp) * 100vw), 8px);
  width: clamp(0px, calc(8 / var(--base-sp) * 100vw), 8px);
}

.un_group_paging__dot.is_active {
  background-color: #626262;
}

.un_group_item__name {
  color: #000;
  font-family: "YuGothic", "Yu Gothic", sans-serif;
  font-size: clamp(0px, calc(14 / var(--base) * 100vw), 14px);
  letter-spacing: 0.08em;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .un_group_item__name {
    font-size: clamp(0px, calc(12 / var(--base-sp) * 100vw), 12px);
  }
}

/* ボタンの位置基準 */
.un_group_inner {
  position: relative;
}

.un_group_slider {
  scroll-behavior: smooth;
}

.un_group_btn {
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: opacity 0.3s;
}

@media screen and (max-width: 767px) {
  .un_group_btn {
    top: 55%;
  }
}

.un_group_btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
}
.un_group_btn--prev {
  left: 8px;
}
.un_group_btn--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.un_group_btn--next {
  right: 8px;
}
.un_group_btn--next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

/* ============================================================
   TOP_BUSINESS
   ============================================================ */

.un_business {
  position: relative;
  overflow: hidden;
  margin-top: clamp(0px, calc(20 / var(--base) * 100vw), 20px);
}

.un_business_bg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

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

.un_business_inner {
  align-items: center;
  display: flex;
  padding: clamp(0px, calc(45 / var(--base) * 100vw), 45px) clamp(0px, calc(120 / var(--base) * 100vw), 120px);
  position: relative;
  z-index: 1;
  max-width: 1230px;
  margin: auto;
}

@media screen and (max-width: 767px) {
  .un_business_inner {
    flex-direction: column;
    padding: clamp(0px, calc(80 / var(--base-sp) * 100vw), 80px) clamp(0px, calc(35 / var(--base-sp) * 100vw), 35px);
  }
}

/* 左エリア */
.un_business_left {
  flex-shrink: 0;
  width: calc(500 / var(--base) * 100vw);
}

@media screen and (max-width: 767px) {
  .un_business_left {
    margin-bottom: clamp(0px, calc(40 / var(--base-sp) * 100vw), 40px);
    width: 100%;
  }
}

.un_business_ttl {
  margin-bottom: clamp(0px, calc(40 / var(--base) * 100vw), 40px);
}
@media screen and (max-width: 767px) {
  .un_business_ttl {
    margin-bottom: clamp(0px, calc(30 / var(--base-sp) * 100vw), 30px);
  }
}

.un_business_ttl img {
  width: clamp(0px, calc(440 / var(--base) * 100vw), 440px);
  margin-bottom: clamp(0px, calc(50 / var(--base) * 100vw), 50px);
}

@media screen and (max-width: 767px) {
  .un_business_ttl img {
    width: clamp(0px, calc(325 / var(--base-sp) * 100vw), 425px);
  }
}

/* MOREボタン */
.un_business_btn {
  display: block;
  position: relative;
  width: calc(296 / var(--base) * 100vw);
}
@media screen and (max-width: 767px) {
  .un_business_btn {
    width: calc(260 / var(--base-sp) * 100vw);
  }
}

.un_business_btn:hover {
  opacity: 1;
}

.un_business_btn-default,
.un_business_btn-hover {
  transition: opacity 0.3s;
  width: 100%;
}

.un_business_btn-hover {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}

.un_business_btn:hover .un_business_btn-default {
  opacity: 0;
}

.un_business_btn:hover .un_business_btn-hover {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .un_business_inner > .un_business_btn {
    order: 3;
    margin-top: clamp(0px, calc(30 / var(--base-sp) * 100vw), 30px);
  }
}

/* 右エリア・図 */
.un_business_right {
  flex: 1;
}

.un_business_fig {
  position: relative;
  text-align: end;
}

@media screen and (max-width: 767px) {
  .un_business_fig {
    text-align: center;
  }
}

.un_business_fig_inner {
  display: inline-block;
  position: relative;
}

/* 既存のun_business_figのpicture imgは削除してfig_inner側に */
.un_business_fig_inner > picture img {
  width: calc(605 / var(--base) * 100vw) !important;
  display: block;
  max-width: 605px;
}

@media screen and (max-width: 767px) {
  /* クリックでサークル表示のとき */
  /* .un_business_fig_inner > picture source {
    width: calc(420 / var(--base-sp) * 100vw) !important;
    display: block;
  }

  .un_business_fig_inner > picture img {
    width: calc(1537 / var(--base) * 100vw) !important;
    display: block;
    max-width: none;
  } */

  .un_business_fig_inner > picture img {
  }

  /* SP画像の重ね合わせ */
  .un_business_fig_sp {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .un_business_fig_sp_img {
    width: calc(420 / var(--base-sp) * 100vw) !important;
    max-width: none !important; /* 幅制限を解除（これが効かない原因かも） */
    height: auto;
    display: block;
    opacity: 0;
    transition: opacity 1.5s ease;
  }
  /* 2枚目以降は1枚目の上に絶対配置で重ねる */
  .un_business_fig_sp_img:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
  }

  /* 通常は透明、is-activeのときだけ表示。0.8秒でフェード */
  .un_business_fig_sp_img {
    opacity: 0;
    transition: opacity 1.5s ease;
  }

  .un_business_fig_sp_img.is-active {
    opacity: 1;
  }
}

.un_business_circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 丸リスト */
.un_business_circles {
  font-family: "YuGothic", "Yu Gothic", sans-serif;
  font-weight: 400;
  height: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.un_business_circle {
  align-items: center;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #9ba1a6;
  /* cursor: pointer; */
  display: flex;
  flex-direction: column;
  width: calc(150 / var(--base) * 100vw);
  height: calc(150 / var(--base) * 100vw);
  font-size: 0.6rem;
  justify-content: center;
  letter-spacing: 0.1em;
  line-height: 1.6;
  opacity: 0;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.3s,
    background-color 0.3s;
  max-width: 150px;
  max-height: 150px;
}

@media screen and (min-width: 768px) and (max-width: 920px) {
  .un_business_circle {
    font-size: 0.5rem;
  }
}

@media screen and (min-width: 1140px) {
  .un_business_circle {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 767px) {
  .un_business_circle {
    width: calc(105 / var(--base-sp) * 100vw);
    height: calc(105 / var(--base-sp) * 100vw);
    font-size: calc(10 / var(--base-sp) * 100vw);
    max-width: none;
    max-height: none;
  }
}

.un_business_circle:hover,
.un_business_circle.is_active {
  background-color: #fff;
  opacity: 1;
}

.un_business_circle__name {
  display: none;
}

.un_business_circle__desc {
  display: block;
  color: #808080;
}

.un_business_circle:hover,
.un_business_circle.is_active {
  background-color: #fff;
  color: #555;
}

.un_business_circle:hover .un_business_circle__name,
.un_business_circle.is_active .un_business_circle__name {
  display: none;
}

.un_business_circle:hover .un_business_circle__desc,
.un_business_circle.is_active .un_business_circle__desc {
  display: block;
}

.un_business_btn.u_sp {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .un_business_btn.u_pc {
    display: none !important;
  }

  .un_business_btn.u_sp {
    display: block !important;
  }
}

/* タブレット挙動 */
@media screen and (min-width: 768px) and (max-width: 1080px) {
  /* PC図（1枚絵）を隠す */
  .un_business_fig_pc {
    display: none;
  }

  /* 円リストのホバーを無効化（消す） */
  .un_business_circles {
    display: none;
  }

  /* SP図ブロック（2枚交互）を表示 */
  .un_business_fig_sp {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: center;
  }

  /* 2枚を重ねる。サイズはPC相当の上限に */
  .un_business_fig_sp_img {
    width: 100% !important;
    max-width: 605px !important; /* PC図と同じ上限 */
    height: auto;
    display: block;
    opacity: 0;
    transition: opacity 1.5s ease;
  }

  .un_business_fig_sp_img:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
  }

  .un_business_fig_sp_img.is-active {
    opacity: 1;
  }
}

/* ============================================================
   TOP_MESSAGE
   ============================================================ */

.un_message_ttl img.en {
  margin-bottom: clamp(0px, calc(10 / var(--base) * 100vw), 10px) !important;
}

@media screen and (max-width: 767px) {
  .un_message_ttl img.en {
    margin-bottom: clamp(0px, calc(10 / var(--base-sp) * 100vw), 10px) !important;
    width: clamp(0px, calc(262 / var(--base-sp) * 100vw), 362px);
  }

  .un_message_ttl img.jp {
    margin-bottom: clamp(0px, calc(40 / var(--base-sp) * 100vw), 40px) !important;
  }

  .un_message_front {
    top: 50% !important;
  }

  .un_message_txt img {
    width: 36vw;
  }

  .un_message_txt {
    padding-left: 1.6vw;
    font-size: clamp(0px, calc(12 / var(--base-sp) * 100vw), 12px);
  }

  .un_message_txt img {
    width: clamp(0px, calc(123 / var(--base-sp) * 100vw), 123px);
  }

  .un_message_front_inner .un_business_btn {
    margin: clamp(0px, calc(195 / var(--base-sp) * 100vw), 195px) auto 0;
  }
}

/* ============================================================
   TOP_BANNERS
   ============================================================ */

.top-banners .un_banners {
  display: flex;
  flex-direction: column;
  padding: clamp(0px, calc(80 / var(--base) * 100vw), 80px) clamp(0px, calc(100 / var(--base) * 100vw), 100px);
  gap: clamp(40px, calc(300 / var(--base) * 100vw), 40px);
}

@media screen and (max-width: 767px) {
  .top-banners .un_banners {
    padding: clamp(0px, calc(40 / var(--base-sp) * 100vw), 40px) clamp(0px, calc(25 / var(--base-sp) * 100vw), 25px);
    gap: clamp(40px, calc(300 / var(--base-sp) * 100vw), 40px);
  }
}
.top-banners .un_banner {
  overflow: hidden;
  position: relative;
}

.un_banner--company,
.un_banner--recruit {
  aspect-ratio: 1150 / 520;
}

@media screen and (max-width: 767px) {
  .un_banner--company,
  .un_banner--recruit {
    aspect-ratio: 325 / 400;
  }
}
.un_banner_bg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

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

@media screen and (max-width: 767px) {
  .un_banner_txt img {
    width: 100%;
  }
}

.un_banner_inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(0px, calc(300 / var(--base) * 100vw), 300px);
  position: relative;
  z-index: 1;
  gap: clamp(0px, calc(20 / var(--base) * 100vw), 20px);
}

@media screen and (max-width: 767px) {
  .un_banner_inner {
    gap: 0;
  }
}

@media screen and (min-width: 766px) {
  .un_banner--recruit .un_banner_btn {
    margin-left: calc(100 / var(--base) * 100vw);
  }

  .un_banner--company .un_banner_inner {
    align-items: center;
    padding: calc(160 / var(--base) * 100vw) calc(100 / var(--base) * 100vw) 0;
  }

  .un_banner--recruit .un_banner_inner {
    padding: calc(25 / var(--base) * 100vw) calc(10 / var(--base) * 100vw) 0;
  }
}

@media screen and (max-width: 767px) {
  .un_banner--company .un_banner_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: calc(90 / var(--base-sp) * 90vw);
  }

  .un_banner--recruit .un_banner_inner {
    padding: calc(60 / var(--base-sp) * 100vw) calc(25 / var(--base-sp) * 100vw);
  }
}

.un_banner_txt {
  margin-bottom: calc(40 / var(--base) * 100vw);
}

@media screen and (max-width: 767px) {
  .un_banner_txt {
    /* margin-bottom: calc(30 / var(--base-sp) * 100vw); */
  }
}

.un_banner--company .un_banner_txt img {
  width: clamp(0px, calc(705 / var(--base) * 100vw), 705px);
}

.un_banner--recruit .un_banner_txt img {
  width: calc(550 / var(--base) * 100vw);
}

@media screen and (max-width: 767px) {
  .un_banner--company .un_banner_txt img {
    width: calc(227 / var(--base-sp) * 100vw);
    margin-bottom: calc(35 / var(--base-sp) * 100vw);
  }

  .un_banner--recruit .un_banner_txt img {
    width: calc(241 / var(--base-sp) * 100vw);
    margin-bottom: calc(35 / var(--base-sp) * 100vw);
  }
}

.un_banner_btn {
  display: block;
  position: relative;
  width: clamp(0px, calc(296 / var(--base) * 100vw), 296px);
}

@media screen and (max-width: 767px) {
  .un_banner_btn {
    width: calc(260 / var(--base-sp) * 100vw);
    margin: auto;
  }
}

.un_banner_btn:hover {
  opacity: 1;
}

.un_banner_btn-default,
.un_banner_btn-hover {
  transition: opacity 0.3s;
  width: 100%;
}

.un_banner_btn-hover {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}

.un_banner_btn:hover .un_banner_btn-default {
  opacity: 0;
}

.un_banner_btn:hover .un_banner_btn-hover {
  opacity: 1;
}

/* ============================================================
   TOP_NEWS
   ============================================================ */
.un_news {
  overflow: hidden;
  padding: clamp(0px, calc(120 / var(--base) * 100vw), 120px) clamp(0px, calc(100 / var(--base) * 100vw), 100px);
  background: linear-gradient(to bottom left, rgba(223, 228, 232, 0.2) 0%, rgba(203, 208, 213, 0.2) 100%);
}

#index #top-page .un_news_item:nth-child(n + 4) {
  display: none;
}

@media screen and (max-width: 767px) {
  .un_news_item:nth-child(n + 4) {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .un_news {
    overflow: hidden;
    padding: clamp(0px, calc(60 / var(--base-sp) * 100vw), 60px) 0;
  }

  .un_news_right {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    width: 100vw;
  }

  .un_news_scroller {
    overflow: visible;
    width: 100%;
  }
}
.un_news_inner {
  align-items: center;
  display: flex;
  gap: calc(70 / var(--base) * 100vw);
  /* max-width: 1230px; */
  margin: auto;
}

@media screen and (max-width: 767px) {
  .un_news_inner {
    flex-direction: column;
    gap: clamp(0px, calc(30 / var(--base-sp) * 100vw), 30px);
  }
}

/* 左エリア */
.un_news_left {
  flex-shrink: 0;
  width: clamp(0px, calc(260 / var(--base) * 100vw), 260px);
}

@media screen and (max-width: 767px) {
  .un_news_left {
    text-align: center;
    width: 100%;
  }
}

@media screen and (min-width: 766px) {
  .un_news_ttl {
    margin-bottom: clamp(0px, calc(40 / var(--base) * 100vw), 40px);
    text-align: left !important;
  }
}

.un_news_ttl img {
  width: clamp(0px, calc(180 / var(--base) * 100vw), 180px);
}

@media screen and (max-width: 767px) {
  .un_news_ttl {
    margin-bottom: 0;
  }

  .un_news_ttl img {
    width: calc(200 / var(--base-sp) * 100vw);
    text-align: center !important;
    margin-bottom: calc(20 / var(--base-sp) * 100vw);
  }
}

/* MOREボタン */
.un_news_btn {
  position: relative;
  width: clamp(0px, calc(200 / var(--base) * 100vw), 200px);
  margin-top: calc(60 / var(--base) * 100vw);
}

@media screen and (max-width: 767px) {
  .un_news_btn {
    margin: calc(40 / var(--base-sp) * 100vw) auto 0;
    width: calc(260 / var(--base-sp) * 100vw);
  }
}

.un_news_btn:hover {
  opacity: 1;
}

.un_news_btn-default,
.un_news_btn-hover {
  transition: opacity 0.3s;
  width: 100%;
}

.un_news_btn-hover {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}

.un_news_btn:hover .un_news_btn-default {
  opacity: 0;
}

.un_news_btn:hover .un_news_btn-hover {
  opacity: 1;
}

/* 右エリア */
.un_news_right {
  flex: 1;
  min-width: 0;
}

/* スクロールエリア */
.un_news_scroller {
  cursor: grab;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.un_news_scroller::-webkit-scrollbar {
  display: none;
}

.un_news_scroller:active {
  cursor: grabbing;
}

@media screen and (max-width: 767px) {
  .un_news_scroller {
    scroll-snap-type: x mandatory;
  }
}

.un_news_list {
  display: flex;
  gap: clamp(0px, calc(30 / var(--base) * 100vw), 30px);
}

@media screen and (max-width: 767px) {
  .un_news_list {
    gap: calc(15 / var(--base-sp) * 100vw);
    padding: 0 calc((100vw - calc(280 / var(--base-sp) * 100vw)) / 2);
    width: max-content;
  }
}

/* カード */
.un_news_item {
  display: block;
  flex-shrink: 0;
  flex: 1;
  min-width: 0;
  max-width: calc(261 / var(--base) * 100vw);
}

@media screen and (max-width: 767px) {
  .un_news_item {
    scroll-snap-align: center;
    width: calc(280 / var(--base-sp) * 100vw);
    flex: none;
    max-width: none;
  }
}

.un_news_item:hover {
  opacity: 0.8;
}

.un_news_item__img {
  aspect-ratio: 1 / 1;
  margin-bottom: clamp(0px, calc(12 / var(--base) * 100vw), 12px);
  overflow: hidden;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .un_news_item__img {
    margin-bottom: calc(10 / var(--base-sp) * 100vw);
  }
}

.un_news_item__img img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.un_news_item__info {
  align-items: center;
  display: flex;
  gap: clamp(0px, calc(8 / var(--base) * 100vw), 8px);
  margin-bottom: clamp(0px, calc(8 / var(--base) * 100vw), 8px);
}

@media screen and (max-width: 767px) {
  .un_news_item__info {
    gap: calc(8 / var(--base-sp) * 100vw);
  }
}

.un_news_item__date {
  color: #555;
  font-size: clamp(0px, calc(14 / var(--base) * 100vw), 14px);
}

@media screen and (max-width: 767px) {
  .un_news_item__date {
    font-size: calc(11 / var(--base-sp) * 100vw);
  }
}

.un_news_item__title {
  font-family: "YuGothic", "Yu Gothic", sans-serif;
  font-size: clamp(0px, calc(14 / var(--base) * 100vw), 14px);
  letter-spacing: 0.1em;
}

@media screen and (max-width: 767px) {
  .un_news_item__title {
    font-size: calc(14 / var(--base-sp) * 100vw);
    letter-spacing: 0.1em;
  }

  /* トップメッセージはSPのみ白文字header */
  /* トップメッセージはSPのみ、FV表示中だけ白文字header */
  .un_siteHeader.message.sp-fv-white .un_siteHeader_logo img:first-child {
    opacity: 0 !important;
  }

  .un_siteHeader.message.sp-fv-white .un_siteHeader_btn img {
    filter: brightness(1) !important; /* 白いまま */
  }
}

.un_news_item__cat {
  background-color: #707070;
  color: #fff;
  font-size: clamp(0px, calc(11 / var(--base) * 100vw), 11px);
  letter-spacing: 0.1em;
  padding: clamp(0px, calc(2 / var(--base) * 100vw), 2px) clamp(0px, calc(10 / var(--base) * 100vw), 10px);
  border-radius: 30px;
  font-family: "YuGothic", "Yu Gothic", sans-serif;
}

@media screen and (max-width: 767px) {
  .un_news_item__cat {
    font-size: calc(11 / var(--base-sp) * 100vw);
    padding: calc(2 / var(--base-sp) * 100vw) calc(12 / var(--base-sp) * 100vw) calc(1 / var(--base-sp) * 100vw);
  }
}

#index #top-page .un_news_paging {
  display: none;
}

@media screen and (max-width: 767px) {
  .un_news_paging {
    display: flex;
    gap: calc(7 / var(--base-sp) * 100vw);
    justify-content: center;
    margin-top: calc(10 / var(--base-sp) * 100vw);
  }
}

.un_news_paging__dot {
  background-color: #b4b4b4;
  border-radius: 50%;
  height: calc(5 / var(--base-sp) * 100vw);
  width: calc(5 / var(--base-sp) * 100vw);
}

.un_news_paging__dot.is_active {
  background-color: #626262;
}

/* ============================================================
   Contact_footer
   ============================================================ */

.bl_contact_btn {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.contact_btn img {
  width: calc(296 / var(--base) * 100vw);
  height: auto;
  display: block;
}

@media screen and (max-width: 767px) {
  .bl_contact_front {
    padding-top: 0 !important;
    top: 28.66667vw;
    transform: none;
  }

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

  .contact_btn img {
    width: calc(260 / var(--base-sp) * 100vw);
    height: auto;
    display: block;
  }
}

/* 通常時 */
.contact_btn-default,
.form_btn-default {
  display: block;
}

.contact_btn-hover,
.form_btn-hover {
  display: none !important;
}

/* ホバー時：フォームボタン */
/* .contact_btn:hover .form_btn-default {
  display: none !important;
}

.contact_btn:hover .form_btn-hover {
  display: block !important;
} */

/* ホバー時：電話ボタン */
/* .contact_btn:hover .contact_btn-default {
  display: none !important;
}

.contact_btn:hover .contact_btn-hover {
  display: block !important;
} */

/* hover画像は非表示のまま固定 */
.contact_btn-hover,
.form_btn-hover {
  display: none !important;
}

/* ホバー時：透明度を下げる */
.contact_btn:hover {
  opacity: 0.7 !important;
  transition: opacity 0.3s ease;
}

.bl_contact_txt {
  color: #fff;
  font-family: "YuGothic", "Yu Gothic", sans-serif;
  font-size: clamp(0px, calc(17 / var(--base) * 100vw), 17px);
  letter-spacing: 0.1em;
  line-height: 2;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .bl_contact_txt {
    font-size: calc(14 / var(--base-sp) * 100vw);
    margin-bottom: calc(50 / var(--base-sp) * 100vw) !important;
  }
}

.bl_contact_ttl {
  margin-bottom: calc(45 / var(--base) * 100vw) !important;
}

@media screen and (max-width: 767px) {
  .bl_contact_ttl {
    margin-bottom: calc(30 / var(--base-sp) * 100vw) !important;
  }
}

.bl_contact_front {
  padding-top: calc(40 / var(--base) * 100vw) !important;
}

/* フッター */
.un_siteFooter_sideLinks ul {
  justify-content: center;
  text-align: center;
  margin-bottom: 0.5vw;
}

@media screen and (max-width: 767px) {
  .un_siteFooter_sideLinks ul {
    flex-direction: column;
    gap: calc(10 / var(--base-sp) * 100vw);
    margin-bottom: calc(10 / var(--base-sp) * 100vw);
  }

  .un_siteFooter_sideLinks ul li {
    justify-content: center;
  }

  .un_siteFooter_sideLinks ul li a {
    font-size: calc(12 / var(--base-sp) * 100vw) !important;
  }
  .un_siteFooter_sideLinks ul li:after {
    display: none;
  }

  .un_siteFooter_sideLinks ul li a img {
    width: calc(12 / var(--base-sp) * 100vw) !important;
  }
}

.un_siteFooter_sideLinks {
  margin-bottom: calc(55 / var(--base) * 100vw) !important;
}

@media screen and (max-width: 767px) {
  .un_siteFooter_sideLinks {
    margin-bottom: calc(50 / var(--base-sp) * 100vw) !important;
  }
}

.un_siteFooter_logo {
  margin-bottom: calc(60 / var(--base) * 100vw) !important;
}

@media screen and (max-width: 767px) {
  .un_siteFooter_logo {
    margin-bottom: calc(65 / var(--base-sp) * 100vw) !important;
  }

  .un_siteFooter {
    padding-top: calc(80 / var(--base-sp) * 100vw) !important;
  }
}

.un_siteFooter_nav {
  margin-bottom: calc(85 / var(--base) * 100vw) !important;
}

.un_siteFooter_policy_Links {
  color: #000;
  font-family: "YuGothic", "Yu Gothic", sans-serif;
  font-size: clamp(0px, calc(12 / var(--base) * 100vw), 12px);
  padding: 0 5.33333vw 0;
}

.un_siteFooter_policy_Links ul {
  display: flex;
  list-style: none;
  gap: calc(30 / var(--base) * 100vw);
  margin-bottom: calc(28 / var(--base) * 100vw);
}

.un_siteFooter_policy_Links ul a {
  color: #000;
}

/* header */

@media screen and (max-width: 767px) {
  .un_siteHeader_nav_group ul li:last-child {
    margin-right: 0;
    padding-top: 0 !important;
  }

  .un_siteHeader_nav ul li:nth-child(7) {
    width: 100vw;
  }

  .un_siteHeader_nav_group img {
    width: calc(74 / var(--base-sp) * 100vw);
  }
}

/* SPnav */

@media screen and (max-width: 767px) {
  .un_siteHeader_nav ul {
    box-sizing: border-box;
    padding: 3vw 5.33333vw 0 !important;
  }

  .un_siteHeader_nav_grid {
    padding: 0 5.33333vw 11.46667vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-family: "YuGothic", "Yu Gothic", sans-serif;
    font-size: calc(10 / var(--base-sp) * 100vw);
    letter-spacing: 0.1em;
    gap: calc(10 / var(--base-sp) * 100vw);
  }

  .un_siteHeader_nav_grid a {
    display: block;
    padding: calc(04 / var(--base-sp) * 100vw);
    border-bottom: 1px solid #ccc;
    color: #000;
    text-align: center;
  }

  .un_siteHeader_nav {
    height: 100vh !important;
  }

  .un_siteFooter_policy_Links a {
    color: #000 !important;
  }

  .un_siteHeader--fix .un_siteHeader_nav ul li:last-child a {
    background-color: unset;
    border: unset;
    border-bottom: unset;
    filter: unset;
  }

  .un_siteFooter_policyLinks {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-family: "YuGothic", "Yu Gothic", sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #000;
    padding: 0 5.33333vw 11.46667vw;
  }

  .un_siteFooter_policyLinks a {
    color: #000;
    text-decoration: none;
  }

  .un_siteHeader_logo img {
    height: calc(37 / var(--base-sp) * 100vw);
    width: calc(224 / var(--base-sp) * 100vw);
  }

  .un_siteHeader_nav_spLogo a img {
    height: calc(37 / var(--base-sp) * 100vw);
    width: calc(224 / var(--base-sp) * 100vw);
  }

  .un_siteHeader_nav {
    height: 100vh;
    overflow-y: auto;
  }

  .un_siteHeader_nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .un_siteHeader.is_active .un_siteHeader_nav {
    max-height: 100vh;
  }
}