@charset "utf-8";
/*---------------------------------------------
 TOP MV（design1）：カードカルーセル＋事例カテゴリリンク
 is_front_page() のときだけ読み込み。MV は .top-mv 配下にスコープ
 （末尾に TOP の採用情報 [recruit_info] 調整あり）
---------------------------------------------*/

/* MV を含む main はフル幅に（main.inner の max-width を解除） */
main.inner:has(> .top-mv) {
  max-width: none;
  padding: 0;
}
/* キャッチ画像・スクロール表示は design1 に無いため非表示（DB本文は温存） */
main:has(> .top-mv) > .slideTx,
main:has(> .top-mv) > .scroll {
  display: none;
}

.top-mv {
  --top-mv-green: #007C4F;
  --top-mv-bar: #F0F6F6;
  position: relative;
  overflow: hidden;
}

/* 緑の背景（design1：1536×580 の1.5倍画像。帯の高さに合わせて cover） */
.top-mv__stage {
  position: relative;
  padding: 58px 0 72px;
  background: #092D1F url("../images/content/top_mv_bg.webp") no-repeat center center / cover;
}

/* カード */
main .top-mv .main_slide .slide_item {
  width: 400px;
  margin: 0 12px;
  border-radius: 16px;
  overflow: hidden;
}
main .top-mv .main_slide .slide_item a,
main .top-mv .main_slide .slide_item picture {
  display: block;
  height: 100%;
}
main .top-mv .main_slide .slide_item img {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* 矢印（画面端から48px・カード中央の高さ）
   layout.css の共通 .slick-arrow（背景画像 !important・transform・位置）を打ち消す */
.top-mv .top-mv__arrow.slick-arrow {
  left: auto;
  right: auto;
  transform: none;
  background: var(--top-mv-green) !important;
  text-indent: 0;
}
.top-mv .top-mv__arrow.slick-arrow:hover {
  opacity: 0.8;
}
.top-mv .top-mv__arrow--prev.slick-arrow {
  left: 48px;
}
.top-mv .top-mv__arrow--next.slick-arrow {
  right: 48px;
}
.top-mv__arrow {
  position: absolute;
  top: calc(58px + 200px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--top-mv-green);
  color: #FFF;
  cursor: pointer;
  transition: opacity 0.3s;
}
.top-mv__arrow:hover {
  opacity: 0.8;
}
.top-mv__arrow--prev {
  left: 48px;
}
.top-mv__arrow--prev svg {
  transform: scaleX(-1);
}
.top-mv__arrow--next {
  right: 48px;
}

/* ドット */
.top-mv__dotList {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.top-mv__dotList li {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 0;
}
.top-mv__dotList button {
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #9E9E9E;
  font-size: 0;
  cursor: pointer;
}
.top-mv__dotList .slick-active button {
  background-color: #FFF;
}

/* 事例カテゴリリンク */
.top-mv__cases {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: calc(100% - 40px);
  max-width: 1380px;
  margin: -31px auto 0;
  padding: 30px 35px;
  border-radius: 10px;
  background-color: var(--top-mv-bar);
}
.top-mv__caseList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.top-mv__caseList li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.top-mv__caseList a {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 76px;
  height: 100%;
  padding: 10px 60px 10px 30px;
  border-radius: 3px;
  background-color: var(--top-mv-green);
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-decoration: none;
}
.top-mv__caseList a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  width: 18px;
  height: 16px;
  margin-top: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M1 8h15M10 2l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.3s;
}
.top-mv__caseList a:hover {
  opacity: 0.85;
}
.top-mv__caseList a:hover::after {
  transform: translateX(4px);
}
.top-mv__caseList li:nth-child(1) a { background-color: #EF8701; }
.top-mv__caseList li:nth-child(2) a { background-color: #007C4F; }
.top-mv__caseList li:nth-child(3) a { background-color: #0995AB; }
.top-mv__caseList li:nth-child(4) a { background-color: #67259C; }

@media screen and (max-width: 1100px) {
  .top-mv__cases {
    padding: 20px;
  }
  .top-mv__caseList {
    grid-template-columns: repeat(2, 1fr);
  }
  .top-mv__caseList a {
    min-height: 64px;
    padding-left: 20px;
    padding-right: 50px;
  }
  .top-mv__caseList a::after {
    right: 20px;
  }
}

@media screen and (max-width: 768px) {
  .top-mv__stage {
    padding: 30px 0 60px;
  }
  main .top-mv .main_slide .slide_item {
    width: auto;
    margin: 0 6px;
  }
  main .top-mv .main_slide .slide_item img {
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .top-mv__dotList {
    margin-top: 24px;
  }
  .top-mv__cases {
    margin-top: -30px;
    padding: 15px;
  }
  .top-mv__caseList {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .top-mv__caseList a {
    min-height: 56px;
    font-size: 14px;
  }
}

/*---------------------------------------------
 TOP 採用情報 [recruit_info]（design1）
 共通の layout.css は変えず、このファイル（front のみ）で上書き
---------------------------------------------*/
/* 新卒採用マイページ：テキストボタン */
.recruit_info .top-recruitBtn {
  max-width: 400px;
  margin: 0 auto 40px;
}
.recruit_info .top-recruitBtn a {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 76px;
  padding: 10px 60px 10px 30px;
  border: 2px solid #007C4F;
  border-radius: 3px;
  background-color: #FFF;
  color: #007C4F;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
}
.recruit_info .top-recruitBtn a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  width: 18px;
  height: 16px;
  margin-top: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M1 8h15M10 2l6 6-6 6' fill='none' stroke='%23007C4F' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.3s;
}
.recruit_info .top-recruitBtn a:hover {
  opacity: 0.8;
}
.recruit_info .top-recruitBtn a:hover::after {
  transform: translateX(4px);
}
/* 募集職種：太字 */
.recruit_info .inner .inBox:last-child ul li,
.recruit_info .inner .inBox:last-child ul li a {
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .recruit_info .top-recruitBtn {
    margin-bottom: 30px;
  }
  .recruit_info .top-recruitBtn a {
    min-height: 60px;
    padding-left: 20px;
    font-size: 15px;
  }
  .recruit_info .top-recruitBtn a::after {
    right: 20px;
  }
}

/*---------------------------------------------
 TOP 動画ギャラリー帯 .topBox_movie（design1。旧 .topBox7 の置き換え）
 背景・アイコン・文言は画像に焼き込み（1100×160 の2倍）。ボタンだけ HTML
---------------------------------------------*/
.topBox_movie {
  padding: 120px 20px 70px;
}
.topBox_movie .movieBand {
  position: relative;
  max-width: 1100px;
  aspect-ratio: 1100 / 160;
  margin: 0 auto;
  background: url("../images/content/top_movie.webp") no-repeat center / 100% 100%;
}
/* 見出し・リードは画像内にあるため、読み上げ用に視覚的に隠す */
.topBox_movie .movieBand__title,
.topBox_movie .movieBand__lead {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* 動画を見る：design1 実測（帯内 left779 top42 281×76）を比率で配置 */
.topBox_movie .movieBand__btn {
  position: absolute;
  top: 26.25%;
  left: 70.82%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 25.55%;
  height: 47.5%;
  padding: 0 50px 0 28px;
  border: 2px solid #FFF;
  border-radius: 3px;
  background-color: #007C4F;
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: opacity 0.3s;
}
.topBox_movie .movieBand__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  width: 18px;
  height: 16px;
  margin-top: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M1 8h15M10 2l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.3s;
}
.topBox_movie .movieBand__btn:hover {
  opacity: 0.85;
}
.topBox_movie .movieBand__btn:hover::after {
  transform: translateX(4px);
}
@media screen and (max-width: 1100px) {
  .topBox_movie .movieBand__btn {
    padding: 0 36px 0 16px;
    font-size: 14px;
  }
  .topBox_movie .movieBand__btn::after {
    right: 14px;
  }
}
/* SP：帯は画像のみ縮小、ボタンは帯の下に全幅で（SP 用画像の支給までの暫定） */
@media screen and (max-width: 768px) {
  .topBox_movie {
    padding: 60px 20px 30px;
  }
  .topBox_movie .movieBand {
    margin-bottom: 76px;
  }
  .topBox_movie .movieBand__btn {
    top: calc(100% + 16px);
    left: 0;
    width: 100%;
    height: 60px;
    padding: 0 50px 0 20px;
    font-size: 15px;
  }
  .topBox_movie .movieBand__btn::after {
    right: 20px;
  }
}

/*---------------------------------------------
 TOP バナー群 .linkBox（design1：3列 gap 60px/40px、1100px幅いっぱい）
 top.css の flex・.inBox の padding を必要な範囲だけ上書き
---------------------------------------------*/
.linkBox {
  padding: 120px 20px;
  background-color: #F9FBFB;
}
.linkBox .inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 40px;
  max-width: 1100px;
  margin-inline: auto;
  padding: 0;
}
.linkBox .inner .inBox {
  padding: 0;
}
.linkBox .inner .inBox a {
  display: block;
  transition: opacity 0.3s;
}
.linkBox .inner .inBox a:hover {
  opacity: 0.8;
}
.linkBox .inner .inBox img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .linkBox {
    padding: 60px 20px;
  }
  .linkBox .inner {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 400px;
  }
}