@charset "UTF-8";

/* main colors */
/*トップページのスタイル*/
.loading_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #E8E0D6;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loading_overlay.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading_overlay.is-hidden {
  display: none !important;
}

.loading_logo {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  padding: 0 20px;
}

@media (min-width: 920px) {
  .loading_logo {
    padding: 0;
  }
}

.loading_logo img {
  width: 440px;
  height: auto;
}

@media (max-width: 919px) {
  .loading_logo img {
            width: 100%;
    max-width: 295px;
}
}

.loading_logo.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================================
   MV スクロールアニメーション
============================================== */
.mv_scroll_wrapper {
  position: relative;
  background-color: #E8E0D6;
  /* ▼ 固定される背景エリア ▼ */
}

.mv_scroll_wrapper .mv_sticky_bg {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* 画面いっぱいの高さ */
  overflow: hidden;
  z-index: 1;
}

.mv_scroll_wrapper .mv_sticky_bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv_scroll_wrapper {
  /* ふわっと暗くなるオーバーレイ */
}

.mv_scroll_wrapper .mv_dark_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  /* 暗さの調整 */
  opacity: 0;
  transition: opacity 0.8s ease;
  /* ここでフワッと感を設定 */
  pointer-events: none;
  /* クリックの邪魔にならないように */
  /* JSでこのクラスが付与されると暗くなる */
}

.mv_scroll_wrapper .mv_dark_overlay.is_active {
  opacity: 1;
}

.mv_scroll_wrapper {
  /* ▼ スクロールするコンテンツ群 ▼ */
}

.mv_scroll_wrapper .mv_scroll_content {
  position: relative;
  z-index: 2;
  /* 背景より上に配置 */
  margin-top: -100vh;
  /* 背景レイヤーにピッタリ重ねるための魔法の記述 */
}

.mv_scroll_wrapper {
  /* 最初のキャッチコピーが入るエリア（1画面分） */
}

.mv_scroll_wrapper .mv_spacer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mv_scroll_wrapper .mv_initial_catch {
  text-align: center;
  padding: 0 20px;
}

@media (min-width: 920px) {
  .mv_scroll_wrapper .mv_initial_catch {
    padding: 0;
  }
}
@media (max-width: 919px) {
  .mv_scroll_wrapper .mv_initial_catch img {
            width: 100%;
    max-width: 295px;
  }
}

.mv_scroll_wrapper {
  /* テキストエリア */
}

.mv_scroll_wrapper .mv_txtArea {
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: #fff;
}

.mv_scroll_wrapper .mv_txtArea_left {
  display: none;
}

@media (min-width: 920px) {
  .mv_scroll_wrapper .mv_txtArea_left {
    display: block;
    position: absolute;
    left: 16px;
    top: 4px;
  }
}

.mv_scroll_wrapper .mv_txtArea .mv_txt_inr {
  display: flex;
  flex-direction: column;
}

@media (min-width: 920px) {
  .mv_scroll_wrapper .mv_txtArea .mv_txt_inr {
    flex-direction: row;
    justify-content: space-between;
  }
}

.mv_scroll_wrapper .mv_txtArea .mv_txt_inr {
  /* -------------------------------------------
   追加：キャッチコピーと矢印のラッパー
   ------------------------------------------- */
}

.mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_catch_wrap {
  position: relative;
}

@media (min-width: 920px) {
  .mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_catch_wrap {
    /* ▼ 元々 .mv_catch にあった幅指定をラッパーに移動 ▼ */
    width: 39.8305084746%;
  }
}

.mv_scroll_wrapper .mv_txtArea .mv_txt_inr {
  /* -------------------------------------------
   追加：はみ出す矢印
   ------------------------------------------- */
}

.mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_catch_arrows {
  display: none;
}

@media (min-width: 1400px) {
  .mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_catch_arrows {
    position: absolute;
    top: 8px;
    right: 100%;
    margin-right: min(16px, 1.0126582278vw);
    display: flex;
    align-items: flex-start;
  }
}

@media screen and (min-width: 1400px) and (min-width: 1580px) {
  .mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_catch_arrows {
    margin-right: min(32px, 2vw);
  }
}

@media (min-width: 1400px) {
  .mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_catch_arrows img {
    width: min(100px, 6.3291139241vw);
    height: auto;
    flex-shrink: 0;
  }
}

@media screen and (min-width: 1400px) and (min-width: 1580px) {
  .mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_catch_arrows img {
    width: min(160px, 10vw);
  }
}

.mv_scroll_wrapper .mv_txtArea .mv_txt_inr {
  /* -------------------------------------------
   キャッチコピー（テキスト）
   ------------------------------------------- */
}

.mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_catch {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.07em;
  line-height: 1.6;
  margin-bottom: 46px;
}

@media (min-width: 920px) {
  .mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_catch {
    /* widthは親のwrapに移したので不要（100%でOK） */
    width: 100%;
    font-size: clamp(26px, 2.125vw, 42.075px);
    line-height: 1.62;
    margin-bottom: 0;
  }
}

@media (min-width: 920px) {
  .mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_contents {
    width: 51.6949152542%;
  }
}

.mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_contents .mv_txt {
  margin-bottom: 58px;
}

@media (min-width: 920px) {
  .mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_contents .mv_txt {
    margin-bottom: 46px;
  }
}

.mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_contents .mv_txt p {
  margin-bottom: 24px;
  font-weight: 500;
  line-height: 1.715;
}

@media (min-width: 920px) {
  .mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_contents .mv_txt p {
    margin-bottom: 26px;
    line-height: 1.75;
  }
}

.mv_scroll_wrapper .mv_txtArea .mv_txt_inr .mv_contents .mv_txt p:last-child {
  margin-bottom: 0;
}

.home_strengths {
  background-color: #E8E0D6;
}

.home_strengths_inr {
  padding: 0 0 88px;
}

@media (min-width: 920px) {
  .home_strengths_inr {
    padding: 0 0 clamp(100px, 11.25vw, 222.75px);
  }
}

.home_strengths_left {
  display: none;
}

@media (min-width: 920px) {
  .home_strengths_left {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(40px, 5.625vw, 111.375px);
  }
}

.home_strengths_top {
  display: block;
  margin-bottom: 40px;
}

@media (min-width: 920px) {
  .home_strengths_top {
    display: none;
  }
}

.home_strengths_body {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(40px, 5.4375vw, 107.6625px);
}

@media (min-width: 920px) {
  .home_strengths_body {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 920px) and (max-width: 1399px) {
  .home_strengths_body {
    padding-left: 40px;
  }
}

.home_strengths_txtArea {
  padding: 70px 0 0 0;
}

@media (min-width: 920px) {
  .home_strengths_txtArea {
    width: 48.016949%;
    padding: clamp(80px, 10.125vw, 200.475px) 0 0 0;
  }
}

.home_strengths_imgArea {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  margin-bottom: 40px;
}

@media (min-width: 920px) {
  .home_strengths_imgArea {
    position: absolute;
    margin: 0;
    right: 0;
    top: 0;
    width: 48.9375%;
    margin-bottom: 0;
  }
}

.home_strengths_txt {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 920px) {
  .home_strengths_txt {
    width: 87.6543209877%;
    gap: clamp(10px, 1.875vw, 37.125px);
  }
}

.home_strengths_txt p {
  font-weight: 500;
  text-align: justify;
  line-height: 1.715;
}

@media (min-width: 920px) {
  .home_strengths_txt p {
    line-height: 1.75;
  }
}

.home_strengths_catch {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.07em;
  margin-bottom: 36px;
}

@media (min-width: 920px) {
  .home_strengths_catch {
    font-size: clamp(20px, 2.125vw, 42.075px);
    line-height: 1.55;
    margin-bottom: clamp(40px, 3.75vw, 74.25px);
  }
}

.home_recruit {
  background-color: #24D53F;
  overflow: hidden;
}

@media (max-width: 919px) {
  .home_recruit .section_ttl {
    color: #313234;
  }
}

.home_recruit_right {
  position: absolute;
  right: -16px;
  top: -70px;
}

@media (min-width: 920px) {
  .home_recruit_right {
    right: 0;
    top: 10px;
  }
}

.home_recruit_inr {
  padding: 10px 0 0;
}

@media (min-width: 920px) {
  .home_recruit_inr {
    padding: 140px 0 0;
  }
}

.home_recruit_top {
  padding: 44px 0 0;
}

@media (min-width: 920px) {
  .home_recruit_top {
    padding: 274px 0 30px;
    background-image: url(../img/home/home_recruit_top.jpg);
    background-image: image-set(url(../img/home/home_recruit_top.jpg) 1x, url(../img/home/home_recruit_top@2x.jpg) 2x);
    background-image: -webkit-image-set(url(../img/home/home_recruit_top.jpg) 1x, url(../img/home/home_recruit_top@2x.jpg) 2x);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
}

.home_recruit_top_inr {
  width: 100%;
  max-width: 720px;
  padding: 0 15px;
  margin: 0 auto;
}

@media (min-width: 920px) {
  .home_recruit_top_inr {
    max-width: clamp(1500px, 88.75vw, 1560px);
    padding: 0 40px;
  }
}

.home_recruit_body {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 1600px;
  margin: 0 auto;
}

@media (min-width: 920px) {
  .home_recruit_body {
    flex-direction: row;
    gap: 79px;
  }
}

.home_recruit_img {
  width: 86.9230769231%;
  position: relative;
  z-index: 1;
}

@media (min-width: 920px) {
  .home_recruit_img {
    /* width: 52.8125%; */
    width: 61.01%;
        margin-left: -129px;
  }
}

.home_recruit_img img {
  width: 100%;
}

.home_recruit_txtArea {
  padding: 0 20px;
}

@media (min-width: 920px) {
  .home_recruit_txtArea {
    padding: 0;
    width: 27.625%;
  }
}

.home_recruit_catch {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 30px;
}

@media (min-width: 920px) {
  .home_recruit_catch {
    font-size: min(34px, 2.125vw);
    margin-bottom: 32px;
  }
}

.home_recruit_txt {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 42px;
}

@media (min-width: 920px) {
  .home_recruit_txt {
    gap: 30px;
    margin-bottom: 50px;
  }
}

.home_news {
  padding: 64px 0 0;
  overflow: hidden;
  position: relative;
}

@media (min-width: 920px) {
  .home_news {
    padding: 140px 0 0;
  }
}

.home_news_left {
  position: absolute;
  width: 180px;
  right: -102px;
  top: 32px;
  z-index: -1;
}

@media (min-width: 920px) {
  .home_news_left {
    width: fit-content;
    left: -194px;
    top: 173px;
  }
}

.home_news_body {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}

@media (min-width: 920px) {
  .home_news_body {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 84px;
  }
}

@media (min-width: 920px) {
  .home_news_txtArea {
    width: 33.8983050847%;
  }
}

.home_news_txtArea .section_ttl {
  margin-bottom: 26px;
}

@media (min-width: 920px) {
  .home_news_txtArea .section_ttl {
    margin-bottom: 64px;
  }
}

.home_news_txt {
  margin-bottom: 38px;
}

@media (min-width: 920px) {
  .home_news_txt {
    margin-bottom: 0;
  }
}

.home_news_list {
  border-top: 1px solid #313234;
}

@media (min-width: 920px) {
  .home_news_list_wrap {
    padding-top: 10px;
    width: 63.7288135593%;
  }
}

.home_news_list_item_link {
  padding: 17px 0;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid #313234;
  transition: background-color 0.3s ease;
}

@media (min-width: 920px) {
  .home_news_list_item_link {
    padding: 14px 0;
  }
}

.home_news_list_item_link:hover {
  background-color: #fafafa;
}

.home_news_list_item_link .cat {
  font-size: 10px;
  line-height: 1.25;
  padding: 4px 15px;
  border: 1px solid #313234;
  display: inline-flex;
  white-space: nowrap;
}

@media (min-width: 920px) {
  .home_news_list_item_link .cat {
    font-size: 14px;
    padding: 4px 27px;
  }
}

.home_news_list_item_link .date {
  font-size: 12px;
  white-space: nowrap;
  font-family: "Barlow Semi Condensed", sans-serif;
}

@media (min-width: 920px) {
  .home_news_list_item_link .date {
    font-size: 17px;
  }
}

.home_news_list_item_link .ttl {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 920px) {
  .home_news_list_item_link .ttl {
    font-size: 18px;
  }
}

.home_company {
  color: #fff;
  background-image: url(../img/home/home_company_bg_sp.jpg);
  background-image: image-set(url(../img/home/home_company_bg_sp.jpg) 1x, url(../img/home/home_company_bg_sp@2x.jpg) 2x);
  background-image: -webkit-image-set(url(../img/home/home_company_bg_sp.jpg) 1x, url(../img/home/home_company_bg_sp@2x.jpg) 2x);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
}

@media (min-width: 920px) {
  .home_company {
    background-image: url(../img/home/home_company_bg.jpg);
    background-image: image-set(url(../img/home/home_company_bg.jpg) 1x, url(../img/home/home_company_bg@2x.jpg) 2x);
    background-image: -webkit-image-set(url(../img/home/home_company_bg.jpg) 1x, url(../img/home/home_company_bg@2x.jpg) 2x);
    background-position: center center;
  }
}

.home_company_inr {
  padding: 90px 0 88px;
}

@media (min-width: 920px) {
  .home_company_inr {
    padding: 132px 0 168px;
  }
}
@media (max-width: 919px) {
  .home_company_inr {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.home_company_top {
  position: absolute;
  top: 14px;
  right: 14px;
}

@media (max-width: 919px) {
  .home_company_top {
    width: 146px;
  }
}

.home_company_bottom {
  position: absolute;
  bottom: 18px;
  left: -74px;
}

@media (max-width: 919px) {
  .home_company_bottom {
    display: none;
  }
}

.home_company_catch {
  font-size: clamp(20px, 2.125vw, 42.075px);
  line-height: 1.6;
  letter-spacing: 0.07em;
  font-weight: 700;
  margin-bottom: 34px;
}

@media (min-width: 920px) {
  .home_company_catch {
    margin-bottom: clamp(40px, 4vw, 79.2px);
  }
}

.home_company_txt {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: clamp(40px, 4.625vw, 91.575px);
  width: 76.1111111111%;
}

@media (min-width: 920px) {
  .home_company_txt {
    width: 40.7627118644%;
    gap: clamp(16px, 1.75vw, 34.65px);
  }
}

.home_company_txt p {
  font-weight: 500;
  text-align: justify;
  line-height: 1.715;
}

@media (min-width: 920px) {
  .home_company_txt p {
    line-height: 1.75;
  }
}

/* --- レイアウト基本設定 --- */
.home_sns {
  padding: 70px 0;
}
@media (min-width: 920px) {
  .home_sns {
  padding: 120px 0 160px;
}
}
.sns_body {
  display: flex;
  justify-content: space-between;
}

.sns_body .section_ttl .section_ttl_ja {
  font-size: 14px;
  font-weight: 500;
}
@media (min-width: 920px) {
  .sns_body .section_ttl .section_ttl_ja {
    font-size: 16px;
  }
}
.sns_body .section_ttl .section_ttl_en{
  margin-bottom: 12px;
}

@media (min-width: 920px) {
  .sns_body .section_ttl .section_ttl_en {
    margin-bottom: 20px;
  }
}
.sns_body .section_ttl {
  margin-bottom: 16px;
}

@media (min-width: 920px) {
  .sns_body .section_ttl {
  margin-bottom: 26px;
}
}

.sns_txtArea {
  width: 23.728813559322035%;
}

.sns_slide {
  width: 71.1864406779661%;
  min-height: 200px;
}

/* --- 画像調整 --- */
.sns_pc_swiper .swiper-slide a,
.sns_sp_grid .sns_grid_item a {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4; 
}

.sns_pc_swiper .swiper-slide a img,
.sns_sp_grid .sns_grid_item a img {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ==========================================
   スマホ版 (919px以下): 画像を中央に挟む並び替え
   ========================================== */
@media screen and (max-width: 919px) {
  .sns_body {
    flex-direction: column; /* 縦並び */
  }

  /* 枠を無視して中身を直接flexアイテムにする */
  .sns_txtArea {
    width: 100%;
    display: contents; 
  }

  .sns_slide {
    width: 100%;
    order: 2; /* 画像グリッドを2番目に */
    margin-bottom: 28px;
  }

  .sns_body .section_ttl {
    order: 1;
    margin-bottom: 36px;
  }

  .sns_body .btn_green.sp_center {
    order: 3; /* ボタンを3番目に */
    margin: 0 auto;
    width: fit-content;
    display: flex;
  }

  .sns_pc_swiper { display: none; }
  
  .sns_sp_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
}

/* PC版 */
@media screen and (min-width: 920px) {
  .sns_sp_grid { display: none; }
}


/* --- アイコン（FontAwesome / SVG）のスタイルを強制適用 --- */

/* カルーセル（複数枚投稿）のクローンアイコン */
.sns_pc_swiper .fa-clone,
.sns_sp_grid .fa-clone,
.sns_pc_swiper .svg-inline--fa,
.sns_sp_grid .svg-inline--fa {
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: #fff !important;
  fill: #fff !important;
  z-index: 10 !important; /* 画像（z-index:1）の上に表示 */
  display: inline-block !important;
  /* 元のスタイルにあった影を再現 */
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

/* SVG特有の表示崩れを防ぐ */
.sns_pc_swiper svg:not(:root).svg-inline--fa,
.sns_sp_grid svg:not(:root).svg-inline--fa {
  height: 1em;
}

/* 画像がアイコンを隠さないようにz-indexを明示 */
.sns_pc_swiper .swiper-slide a img,
.sns_sp_grid .sns_grid_item a img {
  z-index: 1 !important;
}