@charset "utf-8";

/* ==================================
  リセット・調整
===================================== */
/*---------- ページトップボタン ----------*/
.share_top-link .top-link .btn:hover a::before {
  border-color: #ac2b49;
}

/*---------- ヘッダースペーサーの調整 ----------*/
@media screen and (min-width: 992px) and (max-width: 1320px) {
  .p-header .bs_header-01.bs_header-01-drop + .bs_header-spacer {
    height: 61px;
  }
}

/* ==================================
  ファンデーション
===================================== */
/*---------- スムーズスクロール ----------*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* ==================================
  ユーティリティー
===================================== */
/*---------- 画像の比率 ----------*/
.u-aspect img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.u-aspect.--contain img {
  object-fit: contain;
}
.u-aspect.--16x9 img {
  aspect-ratio: 16 / 9;
}
.u-aspect.--4x3 img {
  aspect-ratio: 4 / 3;
}
.u-aspect.--21x9 img {
  aspect-ratio: 21 / 9;
}
.u-aspect.--1x1 img {
  aspect-ratio: 1 / 1;
}
.u-aspect.--7x8 img {
  aspect-ratio: 7 / 8;
}

/*---------- object-fit: cover; ----------*/
.u-img-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*---------- 角丸 ----------*/
.u-rounded-_5 {
  border-radius: 0.5rem !important;
  overflow: hidden;
}
.u-rounded-_75 {
  border-radius: 0.75rem !important;
  overflow: hidden;
}
.u-rounded-1 {
  border-radius: 1rem !important;
  overflow: hidden;
}
.u-rounded-1_5 {
  border-radius: 1.5rem !important;
  overflow: hidden;
}
.u-rounded-1_25 {
  border-radius: 1.25rem !important;
  overflow: hidden;
}
.u-rounded-2 {
  border-radius: 2rem !important;
  overflow: hidden;
}
.u-rounded-3 {
  border-radius: 3rem !important;
  overflow: hidden;
}

/*---------- フォントサイズ ----------*/
.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}
.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}
.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}
.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}
.fs-5 {
  font-size: 1.25rem !important;
}
.fs-6 {
  font-size: 1rem !important;
}
.fs-7 {
  font-size: 0.875rem !important;
}
.fs-8 {
  font-size: 0.75rem !important;
}
.fs-9 {
  font-size: 0.625rem !important;
}
.fs-10 {
  font-size: 0.5rem !important;
}

/*---------- ホバーアクション ----------*/
.u-hover {
  transition: all 0.3s ease-in-out;
  color: inherit;
}
.u-hover:hover {
  text-decoration: none;
}
.u-hover.--opacity:hover {
  opacity: 0.8;
}
.u-hover.--up:hover {
  transform: translateY(-0.125rem);
}

/* ==================================
  ヘッダー
===================================== */
/*---------- ロゴとリンク ----------*/
.p-header a.nav-link,
.p-header:has(.collapsed) .text-logo {
  color: #fff;
}
.p-header:has(.collapsed) .text-logo {
  text-shadow: 0px 0px 4px #000;
}
@media (min-width: 992px) {
  .p-header a.nav-link,
  .p-header .text-logo {
    color: #fff !important;
    text-shadow: 0px 0px 4px #000;
    transition: all 0.3s ease-in-out;
  }
  .p-header:has(.collapsed) .text-logo:hover,
  .p-header a.nav-link:hover {
    color: #ac2b49 !important;
  }
}

/*---------- ハンバーガーボタン ----------*/
.p-header .navbar-toggler.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.p-header .navbar-toggler.navbar-toggler-icon::after {
  color: #fff;
}

/*---------- ハンバーガー開閉時の背景色 ----------*/
.p-header .navbar {
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.p-header .navbar:has(.collapsed) {
  background-color: transparent;
}

/* ==================================
  パーツ
===================================== */
/*---------- アイコン ----------*/
.c-icon {
  display: grid !important;
  grid-template-columns: repeat(2, auto);
  column-gap: 0.5rem;
  justify-content: center;
  align-items: center;
}
@media (min-width: 992px) {
  .c-icon {
    column-gap: 1rem;
  }
}

/*---------- 背景のベース ----------*/
.p-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}
.p-bg::before,
.p-bg::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
}

/*---------- ブロークングリッドレイアウト ----------*/
.l-broken-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-columns: auto;
  grid-template-rows: repeat(12, 1fr);
  grid-auto-rows: auto;
  gap: 0px 0px;
  grid-auto-flow: row;
}
.l-broken-grid-img * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.l-broken-grid-img iframe {
  min-height: 15rem;
}

/* 左画像・右文章 */
.l-broken-grid.--l-img-r-text {
  grid-template-rows: auto 1.5rem auto;
}
.l-broken-grid.--l-img-r-text .l-broken-grid-img {
  grid-area: 1 / 1 / 3 / 12;
  z-index: 2;
}
.l-broken-grid.--l-img-r-text .l-broken-grid-text-bg {
  grid-area: 2 / 2 / 4 / 13;
  z-index: 1;
}
@media (min-width: 768px) {
  .l-broken-grid.--l-img-r-text {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .l-broken-grid.--l-img-r-text .l-broken-grid-img {
    grid-area: 1 / 1 / 12 / 3;
  }
  .l-broken-grid.--l-img-r-text .l-broken-grid-text-bg {
    grid-area: 2 / 2 / 13 / 4;
    padding-left: 11rem;
  }
}
/* 右画像・左文章 */
.l-broken-grid.--r-img-l-text {
  grid-template-rows: auto 1.5rem auto;
}
.l-broken-grid.--r-img-l-text .l-broken-grid-img {
  grid-area: 1 / 2 / 3 / 13;
  z-index: 2;
}
.l-broken-grid.--r-img-l-text .l-broken-grid-text-bg {
  grid-area: 2 / 1 / 4 / 12;
  z-index: 1;
}
@media (min-width: 768px) {
  .l-broken-grid.--r-img-l-text {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .l-broken-grid.--r-img-l-text .l-broken-grid-img {
    grid-area: 1 / 2 / 12 / 4;
  }
  .l-broken-grid.--r-img-l-text .l-broken-grid-text-bg {
    grid-area: 2 / 1 / 13 / 3;
    padding-right: 11rem;
  }
}

/*---------- イメージテキスト（社名） ----------*/
.c-h-company-name {
  font-size: clamp(3rem, 14vw, 7.5rem);
}

/* ==================================
  下層
===================================== */
/*---------- MV ----------*/
.tmpl_01_page-hero {
  background-image: unset;
  background-color: #ac2b49;
}
.tmpl_01_page-hero_text {
  color: #fff;
}