@charset "UTF-8";
/* -----------------------------------------------
  Variables
--------------------------------------------------*/
:root {
  --color-text: #000;
  --color-bg: #ffffff;
  --color-base: #004098;
  --color-base2: #1b73ec;
  --color-base3: #619edb;
  --color-link: #004098;
  --color-hover: #004098;
  --color-visited: #012659;
  --color-error: #dd0000;
  --swiper-theme-color: #004098;
}

/* -----------------------------------------------
  Mixins
--------------------------------------------------*/
/* ---------------------------------------------
　base modules
------------------------------------------------ */
.container {
  background: none;
}

.content {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.inner {
  position: relative;
}
@media all and (min-width: 769px) {
  .inner {
    width: min(106rem, 81.5384615385vw);
    margin-inline: auto;
  }
}
@media all and (max-width: 768px) {
  .inner {
    padding-inline: 4.8309178744vw;
  }
}

.contact__upper {
  display: none;
}

/* ---------------------------------------------
　keyvisual
------------------------------------------------ */
.keyvisual {
  overflow-x: clip;
}
.keyvisual__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
@media all and (min-width: 769px) {
  .keyvisual__inner {
    max-width: min(106rem, 81.5384615385vw);
    margin-inline: auto;
  }
}
@media all and (max-width: 768px) {
  .keyvisual__inner {
    padding-inline: 4.8309178744vw;
    flex-direction: column;
  }
}
.keyvisual__bg {
  position: absolute;
  top: min(3rem, 2.3076923077vw);
  right: 47rem;
  width: min(300rem, 230.7692307692vw);
  max-width: none;
  z-index: -1;
}
@media all and (max-width: 768px) {
  .keyvisual__bg {
    top: 49.5169082126vw;
    right: -2rem;
    width: 362.3188405797vw;
  }
}
.keyvisual__catch {
  margin-bottom: 5rem;
}
.keyvisual__catch h1 {
  font-size: 4.8rem;
  margin-block: 8rem 2rem;
}
@media all and (max-width: 768px) {
  .keyvisual__catch h1 {
    font-size: 3rem;
    margin-block: 6rem 3rem;
  }
}
.keyvisual__catch h1 span {
  font-size: 1.6rem;
  color: #004098;
  display: block;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.keyvisual__catch h1 span::before {
  content: "";
  display: block;
  width: 10px;
  height: 2px;
  background: #004098;
}
.keyvisual__catch p {
  font-weight: bold;
  margin: 0;
}
.keyvisual__slide {
  display: flex;
  max-width: 100%;
  overflow: hidden;
  margin-top: 5rem;
}
@media all and (max-width: 768px) {
  .keyvisual__slide {
    margin-top: 0;
  }
}
.keyvisual__slide-item {
  display: flex;
  animation: loop-slide 50s infinite linear 1s both;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.keyvisual__slide .slide-set {
  display: grid;
  grid-template-columns: 60rem 27rem 27rem;
  column-gap: 5rem;
  padding-left: 5rem;
}
@media all and (max-width: 768px) {
  .keyvisual__slide .slide-set {
    grid-template-columns: 32rem 14.3rem 14.3rem;
    column-gap: 3rem;
    padding-left: 3rem;
  }
}
.keyvisual__slide .slide-set > div {
  height: 40rem;
}
@media all and (max-width: 768px) {
  .keyvisual__slide .slide-set > div {
    height: 21.3rem;
  }
}
.keyvisual__slide .slide-set .grid-part-lg {
  width: 60rem;
  height: 40rem;
  border-radius: 0.8rem;
  overflow: hidden;
}
@media all and (max-width: 768px) {
  .keyvisual__slide .slide-set .grid-part-lg {
    width: 32rem;
    height: 21.3rem;
  }
}
.keyvisual__slide .slide-set .grid-part {
  width: 27rem;
  height: 40rem;
  border-radius: 0.8rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 5rem;
}
@media all and (max-width: 768px) {
  .keyvisual__slide .slide-set .grid-part {
    width: 14.3rem;
    height: 21.3rem;
    row-gap: 3rem;
  }
}
.keyvisual__slide .slide-set .grid-part-div {
  width: 27rem;
  height: 17.5rem;
  border-radius: 0.8rem;
  overflow: hidden;
}
@media all and (max-width: 768px) {
  .keyvisual__slide .slide-set .grid-part-div {
    width: 14.3rem;
    height: 9.3rem;
  }
}
.keyvisual__slide .slide-set img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------
　content
------------------------------------------------ */
/* News */
.news {
  padding-top: 10rem;
}
@media all and (max-width: 768px) {
  .news {
    padding-top: 4rem;
  }
}
.news .inner {
  padding: min(6rem, 4.6153846154vw) min(4rem, 3.0769230769vw);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 0.8rem;
}
@media all and (min-width: 769px) {
  .news .inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: min(4rem, 3.0769230769vw);
  }
}
@media all and (max-width: 768px) {
  .news .inner {
    margin-inline: 4.8309178744vw;
    padding: 2rem 4.8309178744vw;
  }
}
@media all and (min-width: 769px) {
  .news .section__title {
    margin-top: -2.5rem;
  }
}
@media all and (min-width: 769px) {
  .news__title {
    flex: 0 0 min(24rem, 18.4615384615vw);
  }
}
@media all and (max-width: 768px) {
  .news__title {
    margin-bottom: 2rem;
  }
}
.news__list {
  width: 100%;
  border-top: 1px solid #ddd;
}
.news__list .article__link {
  display: flex;
  align-items: baseline;
  row-gap: 1rem;
  color: #333;
  text-decoration: none;
  padding-block: min(2rem, 1.5384615385vw);
  border-bottom: 1px solid #ddd;
}
@media all and (max-width: 768px) {
  .news__list .article__link {
    flex-wrap: wrap;
    padding-block: 2rem;
  }
}
@media all and (min-width: 769px) {
  .news__list .article__link:hover {
    color: #004098;
  }
  .news__list .article__link:hover .article__category {
    color: #fff;
    border-color: #004098;
    background: #004098;
  }
  .news__list .article__link:hover .c-icon {
    fill: #004098;
  }
}
.news__list .article__date {
  flex: 0 0 min(11.5rem, 8.8461538462vw);
  line-height: 1;
}
@media all and (max-width: 768px) {
  .news__list .article__date {
    flex-basis: 100%;
    font-size: 1.2rem;
  }
}
.news__list .article__title {
  font-size: 1.6rem;
  line-height: 1.6;
  margin: 0;
}
@media all and (max-width: 768px) {
  .news__list .article__title {
    width: 72.4637681159vw;
    flex: initial;
  }
}
.news__list .article__icon {
  margin-left: auto;
  text-align: center;
  flex: 0 0 5rem;
}
@media all and (max-width: 768px) {
  .news__list .article__icon {
    flex: 0 0 6.038647343vw;
  }
}
.news .section__link {
  margin-top: 2.5rem;
  justify-content: center;
}

/* message */
.message {
  position: relative;
  overflow-x: clip;
  margin-top: min(10rem, 7.6923076923vw);
}
.message__bg {
  position: absolute;
  top: 16.9082125604vw;
  left: 50vw;
  height: 152.1739130435vw;
  max-width: none;
  z-index: -1;
  transform: rotate(180deg);
}
@media all and (min-width: 769px) {
  .message__bg {
    display: none;
  }
}
@media all and (max-width: 768px) {
  .message {
    margin-top: 5rem;
  }
}
.message p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 2.4;
  text-align: center;
  margin-bottom: 3rem;
}
@media all and (max-width: 768px) {
  .message p {
    font-size: 1.6rem;
    line-height: 2.3;
  }
}

/* busines */
.business {
  padding-top: min(13rem, 10vw);
}
@media all and (max-width: 768px) {
  .business {
    padding-top: 10rem;
  }
}
@media all and (min-width: 769px) {
  .business__div {
    position: relative;
    min-height: min(66rem, 50.7692307692vw);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
.business__div .section__title {
  margin-bottom: 3rem;
}
@media all and (min-width: 769px) {
  .business__div .section__title {
    position: absolute;
    top: min(-2.5rem, -1.9230769231vw);
    left: 0;
  }
}
@media all and (min-width: 769px) {
  .business__list {
    width: min(43rem, 33.0769230769vw);
  }
}
.business__list-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 3rem;
  color: #000;
  text-decoration: none;
}
.business__list-link:any-link {
  color: var(--color-text);
}
@media all and (max-width: 768px) {
  .business__list-link {
    column-gap: 2rem;
  }
}
@media all and (min-width: 769px) {
  .business__list-link:hover .business__list-item-title h3,
  .business__list-link:hover .business__list-item-title h3 span {
    color: var(--color-link);
  }
  .business__list-link:hover .button__link {
    background: var(--color-link);
  }
  .business__list-link:hover .button__link .c-icon {
    fill: #fff;
  }
}
.business__list-image {
  position: absolute;
  bottom: 0;
  right: 0;
  width: min(50rem, 38.4615384615vw);
  height: min(66rem, 50.7692307692vw);
  border-radius: 0.8rem;
  overflow: hidden;
  transition: 0.3s;
}
@media all and (max-width: 768px) {
  .business__list-image {
    display: none;
  }
}
.business__list-item:not(:last-child) {
  margin-bottom: 2rem;
}
.business__list-item-image {
  width: min(10rem, 7.6923076923vw);
  height: min(10rem, 7.6923076923vw);
  border-radius: 0.8rem;
  overflow: hidden;
  flex-shrink: 0;
}
@media all and (max-width: 768px) {
  .business__list-item-image {
    width: 10rem;
    height: 10rem;
  }
}
.business__list-item-image img {
  object-fit: cover;
  aspect-ratio: 1/1;
}
.business__list-item-title {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.business__list-item-title h3 {
  font-size: 2rem;
  margin: 0;
}
@media all and (max-width: 768px) {
  .business__list-item-title h3 {
    font-size: 1.8rem;
  }
}
.business__list-item-title h3 span {
  display: block;
  margin-top: 1rem;
  color: #aeaeae;
  font-size: 1.4rem;
  transition: 0.3s;
}
@media all and (max-width: 768px) {
  .business__list-item-title h3 span {
    font-size: 1.3rem;
    color: var(--color-text);
  }
}
@media all and (max-width: 768px) {
  .business .button__link {
    width: 4.5rem;
    height: 4.5rem;
    background: var(--color-link);
  }
  .business .button__link .c-icon {
    fill: #fff;
  }
}

.business__list-item:nth-child(2) .business__list-image, .business__list-item:nth-child(3) .business__list-image, .business__list-item:nth-child(4) .business__list-image {
  opacity: 0;
}
.business__list-item:nth-child(2) .business__list-link:hover + .business__list-image {
  opacity: 1;
}
.business__list-item:nth-child(3) .business__list-link:hover + .business__list-image {
  opacity: 1;
}
.business__list-item:nth-child(4) .business__list-link:hover + .business__list-image {
  opacity: 1;
}

/* Products */
.products {
  position: relative;
  background-color: #f1f6f7;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #fff calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #fff calc(100% - 1px));
  background-size: 10vw 10vw;
  background-repeat: repeat;
  background-position: top left;
  padding-top: 6rem;
  padding-bottom: 17rem;
  margin-top: min(12rem, 9.2307692308vw);
  overflow: hidden;
}
@media all and (max-width: 768px) {
  .products {
    background-size: 16.66666667vw 16.66666667vw;
    margin-top: 10rem;
    padding-top: 6rem;
    padding-bottom: 16rem;
  }
}
.products .section__title {
  text-align: center;
}
@media all and (max-width: 768px) {
  .products .section__title {
    margin-bottom: 6rem;
  }
}
@media all and (min-width: 769px) {
  .products__list {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: min(7rem, 5.3846153846vw);
    margin-block: min(9rem, 6.9230769231vw) min(4rem, 3.0769230769vw);
  }
}
.products__list-item {
  position: relative;
  padding-block: min(4rem, 3.0769230769vw);
  padding-inline: min(4.5rem, 3.4615384615vw);
  background: rgba(16, 80, 169, 0.9);
  color: #fff;
  border-radius: 0.8rem;
  min-height: min(25rem, 19.2307692308vw);
}
@media all and (min-width: 769px) {
  .products__list-item {
    flex: 0 0 min(40rem, 30.7692307692vw);
  }
}
@media all and (max-width: 768px) {
  .products__list-item {
    padding: 5rem 7.2463768116vw 3rem;
    margin-bottom: 6rem;
  }
}
.products__list-item p {
  margin: 0;
}
.products__list-item.board .products__list-image {
  position: absolute;
  top: min(-6.5rem, -5vw);
  right: min(2rem, 1.5384615385vw);
  width: min(15rem, 11.5384615385vw);
}
@media all and (max-width: 768px) {
  .products__list-item.board .products__list-image {
    top: -9.6618357488vw;
    right: 4.8309178744vw;
    width: 30.193236715vw;
  }
}
.products__list-item.valuables .products__list-image {
  position: absolute;
  top: min(-5.5rem, -4.2307692308vw);
  right: min(2rem, 1.5384615385vw);
  width: min(9.1rem, 7vw);
}
@media all and (max-width: 768px) {
  .products__list-item.valuables .products__list-image {
    top: -9.6618357488vw;
    right: 4.8309178744vw;
    width: 19.3236714976vw;
  }
}
.products__list-title {
  font-size: 2.4rem;
  margin-block: 0 2rem;
}
@media all and (max-width: 768px) {
  .products__list-title {
    font-size: 2rem;
    margin-block: 0 2rem;
  }
}
.products__bg {
  position: absolute;
  bottom: 0;
}
@media all and (max-width: 768px) {
  .products__bg {
    width: 196.6183574879vw;
    max-width: none;
    margin-inline: -50vw;
  }
}
@media all and (max-width: 768px) {
  .products__bn {
    width: 357.4879227053vw;
  }
}
.products .bn-slider {
  position: absolute;
  bottom: -0.5rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.products .bn-slider .products__bn {
  flex-wrap: nowrap;
  width: min(205rem, 157.6923076923vw);
  max-width: none;
  animation: loop-slide 30s infinite linear 1s both;
}
@media all and (max-width: 768px) {
  .products .bn-slider .products__bn {
    width: 365.9420289855vw;
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Environment */
.environment {
  padding-block: min(10rem, 7.6923076923vw) min(3rem, 2.3076923077vw);
}
@media all and (max-width: 768px) {
  .environment {
    padding-block: 9rem;
  }
}
.environment .section__title {
  text-align: center;
}
@media all and (max-width: 768px) {
  .environment .section__title {
    margin-bottom: 3rem;
  }
}
.environment__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: min(4.5rem, 3.4615384615vw);
}
@media all and (max-width: 768px) {
  .environment__list {
    flex-direction: column;
    row-gap: 4rem;
  }
}
.environment__list-item {
  position: relative;
  flex: 0 0 min(32.5rem, 25vw);
}
@media all and (max-width: 768px) {
  .environment__list-item {
    flex-basis: 100%;
  }
}
@media all and (min-width: 769px) {
  .environment__list-item:hover .environment__list-image::before {
    opacity: 0.6;
  }
  .environment__list-item:hover .environment__list-image img {
    transform: scale(1.05);
  }
}
.environment__list-image {
  position: relative;
  margin-bottom: 1.5rem;
  border-radius: 0.8rem;
  overflow: hidden;
}
.environment__list-image::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--color-base);
  transition: 0.3s;
  opacity: 0;
  z-index: 1;
}
@media all and (max-width: 768px) {
  .environment__list-image {
    margin-bottom: 2rem;
  }
}
.environment__list-image img {
  transition: 0.3s;
}
.environment__list-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.environment__list-title h3 {
  margin: 0;
}
.environment__list-title h3 span {
  display: block;
}
.environment__list-title h3 .en {
  color: #004098;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
.environment__list-title h3 .ja {
  font-size: 2rem;
}
.environment .button__link {
  background: var(--color-link);
  width: 4.5rem;
  height: 4.5rem;
}
.environment .button__link .c-icon {
  fill: #fff;
}

/* cta(Entry) */
.cta {
  position: relative;
  overflow-x: clip;
}
.cta .inner {
  padding-block: 8rem;
}
@media all and (min-width: 769px) {
  .cta .inner {
    max-width: min(115rem, 88.4615384615vw);
    margin-inline: auto;
  }
}
.cta .section__title {
  font-size: 8rem;
}
.cta__bg {
  position: absolute;
  max-width: none;
  z-index: -1;
}
@media all and (min-width: 769px) {
  .cta__bg {
    top: 0;
    left: min(34rem, 26.1538461538vw);
    width: min(300rem, 230.7692307692vw);
  }
}
@media all and (max-width: 768px) {
  .cta__bg {
    bottom: -4rem;
    left: -2rem;
    width: 362.3188405797vw;
  }
}
.cta__div {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(#1050a9, #619edb);
  min-height: min(49rem, 37.6923076923vw);
  border-radius: 0.8rem;
  overflow: hidden;
}
@media all and (max-width: 768px) {
  .cta__div {
    padding: 4rem 2rem;
  }
}
.cta__text {
  font-size: 1.5rem;
  line-height: 2;
  text-align: center;
  margin-block: 2rem 0;
}
.cta__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: min(2rem, 1.5384615385vw);
}
@media all and (max-width: 768px) {
  .cta__links {
    width: 100%;
    margin-top: 3rem;
    row-gap: 1rem;
  }
}
.cta__links li {
  font-size: 1.5rem;
  line-height: 1.4;
  text-align: right;
}
@media all and (max-width: 768px) {
  .cta__links li {
    width: 100%;
  }
}
.cta__links a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  min-width: 35.6rem;
  padding: 1.2rem;
  border-radius: 0.4rem;
}
@media all and (max-width: 768px) {
  .cta__links a {
    color: var(--color-link);
    background: #fff;
    min-width: 100%;
    gap: 0;
  }
}
@media all and (max-width: 768px) {
  .cta__links a .button__link {
    background: none;
  }
  .cta__links a .button__link .c-icon {
    fill: var(--color-link);
  }
}
.cta__links a .button__link .icon-blank {
  width: 1.8rem;
  height: 1.8rem;
}
.cta__links a:hover {
  background: #fff;
  color: #004098;
}
.cta__links a:hover .button__link {
  background: none;
}
.cta__links a:hover .c-icon {
  fill: #004098;
}
.cta__image {
  position: absolute;
  top: 0;
  width: 50.5%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  backface-visibility: hidden; /* 裏面を見せない */
  transform-style: preserve-3d; /* 3D効果を有効化 */
  transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1), opacity 1.5s ease-in-out;
}
.cta__image.left-part {
  left: 0;
  transform-origin: left center; /* 左端を軸にする */
}
.cta__image.left-part.open {
  transform: perspective(1000px) rotateY(90deg) translateZ(-60px) scale(0.95);
  opacity: 0;
}
.cta__image.right-part {
  right: 0;
  transform-origin: right center; /* 右側を軸に開く */
}
.cta__image.right-part.open {
  transform: perspective(1000px) rotateY(-90deg) translateZ(-60px) scale(0.95);
  opacity: 0;
}