@charset "UTF-8";
section.hero {
  position: relative;
  overflow: hidden;
}
section.hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
section.hero .hero-bg-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
section.hero .hero-bg-item.hero-bg-1 {
  background-image: url(../../img/front/kv.png);
  animation: heroKvFade 10s ease-in-out infinite;
}
section.hero .hero-bg-item.hero-bg-2 {
  background-image: url(../../img/front/kv2.png);
  animation: heroKvFade2 10s ease-in-out infinite;
}
section.hero .title {
  position: relative;
  z-index: 1;
  padding: 240px 0 260px;
}
section.hero .title .img {
  max-width: 767px;
}
section.hero .title .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.hero .title .img .kv-title-pc {
  display: block;
}
section.hero .title .img .kv-title-sp {
  display: none;
}

@media (max-width: 870px) {
  section.hero .title .img .kv-title-pc {
    display: none;
  }
  section.hero .title .img .kv-title-sp {
    display: block;
  }
}
@keyframes heroKvFade {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes heroKvFade2 {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
section#about {
  padding: 250px 0;
  position: relative;
  background-image: url(../../img/front/bg-about.png);
  background-size: 100%;
  background-position: top center;
}
@media (max-width: 870px) {
  section#about {
    padding: 90px 0;
    background-image: url(../../img/front/bg-about-sp.png);
    background-size: cover;
  }
}
section#about::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
  background-image: url(../../img/front/bg-about-top.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 128/15;
  bottom: 100%;
}
@media (max-width: 870px) {
  section#about::before {
    aspect-ratio: 15/2;
    background-image: url(../../img/front/bg-about-sp-top.png);
  }
}
section#about .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 870px) {
  section#about .wrap {
    flex-direction: column;
  }
}
section#about .title {
  font-size: 40px;
  position: relative;
}
@media (max-width: 870px) {
  section#about .title {
    margin-bottom: 20px;
    font-size: 32px;
  }
}
section#about .title::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 380px;
  background: url(../../img/front/title-about.png) no-repeat left top;
  background-size: contain;
  aspect-ratio: 392/201;
  position: absolute;
  top: -120px;
  left: -5px;
  z-index: 1;
}
@media (max-width: 870px) {
  section#about .title::before {
    max-width: 190px;
    top: -57px;
    left: 3px;
  }
}
section#about .title h2 {
  position: relative;
  z-index: 2;
}
section#about .content p {
  font-size: 20px;
  margin-bottom: 1em;
  line-height: 2;
}
@media (max-width: 870px) {
  section#about .content p {
    font-size: 16px;
  }
}
section#about .content .btn-wrap {
  margin-top: 45px;
}
@media (max-width: 870px) {
  section#about .content .btn-wrap {
    text-align: center;
  }
}

section#ceo-list .center {
  position: relative;
  z-index: 2;
}
section#ceo-list {
  /* 共通スタイルは master.scss に移動済み。ここはフロント専用のタイトル装飾のみ */
}
section#ceo-list .title {
  font-size: 40px;
  margin-bottom: 75px;
  position: relative;
}
@media (max-width: 870px) {
  section#ceo-list .title {
    margin-bottom: 20px;
    font-size: 32px;
  }
}
section#ceo-list .title::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 380px;
  background: url(../../img/front/title-talents.png) no-repeat left top;
  background-size: contain;
  aspect-ratio: 416/201;
  position: absolute;
  top: -120px;
  left: -5px;
  z-index: 1;
}
@media (max-width: 870px) {
  section#ceo-list .title::before {
    max-width: 190px;
    top: -57px;
    left: 3px;
  }
}
section#ceo-list .title h2 {
  z-index: 2;
}
section#ceo-list {
  /* フロントの社長カードはリンク */
}
section#ceo-list ul.ceo-list li .ceo-list-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}
section#ceo-list ul.ceo-list li .ceo-list-link:hover {
  opacity: 0.85;
}
section#ceo-list {
  /* スマホ時は最大3件まで表示 */
}
@media (max-width: 870px) {
  section#ceo-list ul.ceo-list li:nth-child(n+4) {
    display: none;
  }
}
section#ceo-list {
  /* テキストライン画像：左に流れる無限マーキー（PC） / SPは静止画 */
}
section#ceo-list .text-line-marquee-wrap {
  overflow: hidden;
  width: 100%;
  margin-top: 60px;
  transform: translateY(10px);
  position: relative;
  z-index: 2;
}
section#ceo-list .text-line-marquee-pc {
  display: flex;
  width: max-content;
  animation: textLineMarquee 25s linear infinite;
}
section#ceo-list .text-line-marquee-pc img {
  height: 110px;
  width: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
section#ceo-list .text-line-marquee-sp {
  display: none;
}
@media (max-width: 870px) {
  section#ceo-list .text-line-marquee-pc {
    display: none;
  }
  section#ceo-list .text-line-marquee-sp {
    display: flex;
    width: 100%;
    justify-content: center;
    animation: none;
  }
  section#ceo-list .text-line-marquee-sp img {
    width: 100%;
    max-width: 100%;
    display: block;
    object-fit: contain;
  }
}

@keyframes textLineMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
section#interview {
  background-color: white;
  padding: 180px 0;
  overflow: hidden;
}
section#interview .title {
  font-size: 40px;
  position: relative;
  margin-bottom: 50px;
}
@media (max-width: 870px) {
  section#interview .title {
    font-size: 32px;
  }
}
section#interview .title::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 450px;
  background: url(../../img/front/title-interview.png) no-repeat left top;
  background-size: contain;
  aspect-ratio: 458/203;
  position: absolute;
  top: -120px;
  left: -5px;
  z-index: 1;
}
@media (max-width: 870px) {
  section#interview .title::before {
    max-width: 225px;
    top: -57px;
    left: 3px;
  }
}
section#interview .title h2 {
  z-index: 2;
}
section#interview .center {
  position: relative;
}
section#interview {
  /* PC: スライダー表示 */
}
section#interview .interview-pc .swiper {
  overflow: visible;
  position: relative;
}
section#interview .interview-pc .swiper-controll {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  gap: 8.5px;
}
section#interview .interview-pc .swiper-controll .interview-swiper-prev,
section#interview .interview-pc .swiper-controll .interview-swiper-next {
  position: relative;
  z-index: 10;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border: 2px solid #0F1A45;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  appearance: none;
  transition: background 0.2s, color 0.2s;
}
section#interview .interview-pc .swiper-controll .interview-swiper-prev::after,
section#interview .interview-pc .swiper-controll .interview-swiper-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-left: 2px solid #0F1A45;
  border-bottom: 2px solid #0F1A45;
  transform: translate(-55%, -50%) rotate(-135deg);
}
section#interview .interview-pc .swiper-controll .interview-swiper-prev:hover,
section#interview .interview-pc .swiper-controll .interview-swiper-next:hover {
  background: #0F1A45;
}
section#interview .interview-pc .swiper-controll .interview-swiper-prev:hover::after,
section#interview .interview-pc .swiper-controll .interview-swiper-next:hover::after {
  border-color: #fff;
}
section#interview .interview-pc .swiper-controll .interview-swiper-prev::after {
  transform: translate(-45%, -50%) rotate(45deg);
}
section#interview .interview-pc .interview-list {
  position: relative;
}
section#interview .interview-pc .interview-list a.interview-item {
  display: block;
  position: relative;
  transition: opacity 0.3s;
}
section#interview .interview-pc .interview-list a.interview-item:hover {
  opacity: 0.8;
}
section#interview .interview-pc .interview-list a.interview-item .img {
  aspect-ratio: 493/450;
}
section#interview .interview-pc .interview-list a.interview-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section#interview .interview-pc .interview-list a.interview-item .text {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 78px;
  background: white;
  padding: 16px 15px 10px 10px;
  border-radius: 0 20px 0 0;
}
section#interview .interview-pc .interview-list a.interview-item .text .interview-title {
  font-size: 16px;
  font-weight: bold;
  color: #0F1A45;
}
section#interview .interview-pc .btn-wrap {
  margin-top: 60px;
}
section#interview {
  /* SP: 縦並び3件（スマホではスライダー非表示） */
}
section#interview .interview-sp {
  display: none;
}
@media (max-width: 870px) {
  section#interview {
    padding: 100px 0 60px;
  }
  section#interview .interview-pc {
    display: none;
  }
  section#interview .interview-sp {
    display: block;
  }
  section#interview .interview-sp .interview-list-sp {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
  section#interview .interview-sp .interview-list-sp li {
    margin: 0;
  }
  section#interview .interview-sp .interview-list-sp a.interview-item {
    display: block;
    position: relative;
    transition: opacity 0.3s;
  }
  section#interview .interview-sp .interview-list-sp a.interview-item:hover {
    opacity: 0.85;
  }
  section#interview .interview-sp .interview-list-sp a.interview-item .img {
    overflow: hidden;
    border-radius: 10px;
  }
  section#interview .interview-sp .interview-list-sp a.interview-item .img img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    object-fit: cover;
  }
  section#interview .interview-sp .interview-list-sp a.interview-item .text {
    background: white;
    padding: 14px 12px 12px;
    border-radius: 0 12px 0 0;
    margin-top: -4px;
  }
  section#interview .interview-sp .interview-list-sp a.interview-item .text .interview-title {
    font-size: 15px;
    font-weight: bold;
    color: #0F1A45;
  }
  section#interview .interview-sp .btn-wrap {
    margin-top: 40px;
    text-align: center;
  }
}
section#interview .btn-wrap {
  margin-top: 60px;
}

/* 共通：社長一覧セクション（フロント・社長アーカイブで共通利用） */
section#ceo-list {
  padding: 200px 0 0px;
  background-color: #EAEBEF;
  position: relative;
}
@media (max-width: 870px) {
  section#ceo-list {
    padding: 100px 0 0px;
  }
}
section#ceo-list::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
  background-image: url(../../img/master/top-glay.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 128/15;
  bottom: 100%;
}
section#ceo-list::after {
  height: 420px;
  position: absolute;
  content: "";
  width: 100%;
  left: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(20, 24, 42, 0.15), transparent);
  z-index: 1;
}
section#ceo-list .btn-wrap {
  margin-top: 50px;
}
@media (max-width: 870px) {
  section#ceo-list .btn-wrap {
    text-align: center;
  }
}