* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
}

html {
  scroll-behavior: smooth;
}

#main,#about,#service,#recruit,#youtube,#contact,#footer {
  display: none; /* 最初は隠す */
}



#loader {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff;          /* 背景色（透過でもOK） */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.8s ease;
  }

  /* フェードアウト用 */
  #loader.hide {
    opacity: 0;
    pointer-events: none;
  }

  /* 動画を全画面にフィット */
#loader video,
.bg-video,
.loader-images img,
.bg-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 横縦比を保ちながら全画面にフィット */
  position: absolute;
  top: 0;
  left: 0;
}

#loader, #topAnime {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bg-images, .loader-images {
  position: relative;
  width: 100%;
  height: 100%;
}

.fade-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.fade-img.active {
  opacity: 1;
}

.pc-only { display: block; }
.mobile-only { display: none; }

  @media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
  .mobile-only {
    display: block;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  .mobile-only img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2s ease-in-out;
  }
  .mobile-only img.active {
    opacity: 1;
  }

  /* 初期状態は透明 */
  .mobile-bg {
    opacity: 0; /* 初期は透明 */
    transition: opacity 1.2s ease-in-out;
  }
  .mobile-bg.show {
    opacity: 1; /* フェードイン後に表示 */
  }

    #loader {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
  }

  /* ローディング画像・動画を画面の50%に縮小 */
  .loader-video,
  .loader-images {
    width: 80%;       /* 横幅は画面の80%程度 */
    height: 50%;      /* 高さは画面の50% */
    max-width: 400px; /* 任意で最大幅を指定 */
    max-height: 300px; /* 任意で最大高さを指定 */
    position: relative; /* 絶対位置解除して中央に配置 */
  }

  .loader-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .glow-text {
    top: 50%;              /* 縦中央 */
    padding: 0 10px;
    z-index: 50;           /* ローディングや背景より前面 */
  }

  .glow-text h2 {
    font-size: 1.2rem;
    line-height: 1.2;
    color: #a8e28c;        /* 見やすい色に調整 */
    text-shadow: 0 0 6px rgba(0,0,0,0.5);
  }

  /* 背景画像・動画のz-index調整 */
  .bg-images img,
  .bg-video,
  .loader-images img {
    z-index: 1;
  }
}

/* 右下ボタン */

.fixed-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px; /* ボタン間の間隔 */
  z-index: 1000;
  right: 0;             /* 右端に固定 */
}

.btn {
  display: inline-block;
  padding: 10px 15px;
  background-color: #a8e28c;
  color: #fff;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: background-color 0.3s;
}

/* アニメーション用クラス */
.h2-animation {
  opacity: 0;
  transform: translateY(20px); /* 下から少しずらす */
  animation: hFadeIn 1s ease forwards; /* アニメーション名、時間、イージング、終了後維持 */
  animation-delay: 0.2s; /* 遅延時間 */
}

/* キーフレーム */
@keyframes hFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* サイド */

.recruit-btn {
  writing-mode: vertical-rl;   /* 縦書き右から左 */
  text-orientation: upright;   /* 文字を縦向きに */
  background-color: #fff;
  color: #a8e28c;
  border: 1px solid #a8e28c;
  border-radius: 5px 0 0 5px; /* 左側だけ丸く */
  padding: 10px 15px;
  text-align: center;
  font-weight: bold;
  display: inline-block;
  cursor: pointer;
  transition: all .3s;
}

.recruit-btn:hover {
  background-color: #95cd79;
  color: #fff;
}

.btn:hover {
  background-color: #95cd79;
  color: #fff;
}

/* ↑ ボタンは小さめにする場合 */
.to-top-btn {
  width: 50px;
  height: 50px;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  border-radius: 50%;
}

/* 複数項目 */

/* =====================
   ボタン共通スタイル
===================== */
.standard-btn {
  position: relative;
  display: block;
  width: 90%;           /* 常に画面幅に合わせる */
  max-width: 350px;     /* PCでは最大350px */
  height: 60px;
  margin: 20px auto;    /* 上下余白＋中央寄せ */
  text-align: center;
  line-height: 60px;
  color: #a8e28c;
  border: 2px solid #a8e28c;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
  transition: transform 0.6s ease, border 0.6s ease, color 0.6s ease;
}

.standard-btn span {
  position: relative;
  z-index: 2;
  line-height: 1.4; /* ← 行間を自然に */
}

.standard-btn span {
  position: relative;
  z-index: 2; /* テキストは前面 */
}

.standard-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,
    rgba(168, 226, 140, 0.7) 0%,
    rgba(125, 222, 77, 0.4) 40%,
    rgba(255, 255, 255, 0) 70%
  );
  filter: blur(20px);
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease, background 2s ease;
  z-index: 1;
}

.standard-btn:hover {
  transform: scale(1.05);
  border: 2px solid #82b16a;
  color: #fff;
}

.standard-btn:hover::before {
  opacity: 1;
  transform: scale(1.4);
  background: radial-gradient(circle at center,
    rgba(73, 214, 2, 0.9) 0%,
    rgba(82, 161, 42, 0.5) 50%,
    rgba(148, 239, 103, 0.9) 80%
  );
}


@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}


h3 {
  font-size: 1.75rem;
  color: #000;
  margin-bottom: 20px;
  text-align: center;
}


.before-item::before {
  content: "";
  display: inline-block; /* ←要素化する */
  width: 50px;           /* 好きなサイズに指定 */
  height: 50px;
  background-image: url(img/popolus.webp);
  background-size: contain; /* 画像を縮小して全体表示 */
  background-repeat: no-repeat;
  margin-right: 8px; /* テキストとの間隔 */
  vertical-align: middle; /* テキストと揃える */
}

p .under {
  position: relative;
  display: inline-block;
}

p .under::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 10px;
  background-color: #a8e28c;
  z-index: -1;
  opacity: 0.8;
  animation: underline 1s ease forwards; /* ページ読み込み時に実行 */
}

.green-color {
  color: black; /* 初期状態は黒 */
}

.green-color.animate {
  animation: text-green 1.5s ease forwards;
}

@keyframes text-green {
  from {
    color: black;
  }
  to {
    color: #a8e28c; /* 緑に変わる */
  }
}


@keyframes underline {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* ========== 共通 ========== */
/* 共通 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;             /* ← 高さ固定を解除 */
  padding: 10px 20px;       /* 上下に余白を確保 */
  display: flex;
  align-items: center;
  justify-content: space-between; /* ← これを追加 */
  background: none;
  z-index: 1000;
  background: rgba( 255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
}

.logo img { 
  height: 40px;
 }

/* ハンバーガーボタン */
.menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
  z-index: 1001;
  margin-left: auto;
}

.menu-btn span {
  display: block;
  height: 3px;
  background: #a8e28c;
  border-radius: 2px;
  transition: 0.3s;
}

/* ===================== SPナビ ===================== */
.nav {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  background: #a8e28c;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
  z-index: 1000;
}
.nav.open {
  left: 0;
  opacity: 1;
  pointer-events: auto;
  z-index: 1002;
}
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2rem;
  cursor: pointer;
  color: #fff;
  z-index: 1003;
}

/* SPメニュー横並び2段 */
.nav-menu { 
  display: flex; 
  flex-direction: column; 
  gap: 20px; width: 90%;
  text-align: center; 
}
.nav-row { 
  display: flex; 
  justify-content: space-around;
  gap: 20px;
  margin-top: 30px;
}

.nav-item { 
  color: #fff; 
  font-size: 1rem; 
  text-decoration: none;
   padding: 5px 0;
  transition: 0.3s; 
  }

  .nav-item img {
    width: 50%;
    display: block;
    margin: auto;
  }

  .nav-item-contact {
    width: 100%;
    font-size: 1rem; 
    background-color: #fff;
    color: #a8e28c;
    margin-top: 50px;
    border-radius: 5px;

  }

.nav-item:hover { 
  font-size: 2rem; 
}
.underline { 
  border-bottom: 2px solid #fff; 
  width: 50%;
}

.nav-banners {
  justify-content: center;
  gap: 50px;
  margin: 50px auto 0 auto;
  width: 100%;
}
.nav-banners a {
  flex: 1 1 45%;        /* 画像の幅を均等に */
  display: flex;
  justify-content: center;
}
.nav-banners img {
  width: 90%;           /* 親aタグに合わせる */
  height: auto;
  margin: 10px auto;
  border-radius: 5px;
  transition: all 0.3s;
}

@media screen and (min-width: 1024px) {
@media screen and (min-width: 1024px) {
  .menu-btn { display: none; }
  .nav { display: none; }
  .nav-banners { display: none; }

  .nav-pc {
    display: flex;
    justify-content: center; /* ナビ中央寄せ */
    width: 100%;
  }

  .nav-pc ul {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-pc ul li a {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    padding: 5px 0;
    text-decoration: none;
    font-size: 1rem;
    color: #333;
    transition: color 0.3s;
    border-bottom: none; /* ← ここで白線を消す */
  }

  .nav-pc ul li a:hover {
    color: #a8e28c; /* 文字色だけ変える */
  }
}


  .nav-pc ul li a:hover {
    color: #a8e28c; /* 文字色だけ変える */
  }
}

/* メインビジュアル */
#visual {
    max-width: 1296px;
    position: relative;      /* 子要素の絶対配置基準にする */
    height: 100vh;           /* ビューポートいっぱい */
    overflow: hidden;        /* はみ出る部分を隠す */
}

.content {
    margin: 0 auto 100px auto ;
    width: 100%;
    height: 100vh;
    position: relative;
}

.glow-text {
  position: absolute;
  top: 10%;
  right: 5%;
}

.glow-text h2 {
  font-size: 2.2rem;
  text-shadow: 10px 10px 10px #1f1f1f;
  color: #ffffff;
  font-weight: 800;

  /* 縦書き指定 */
  writing-mode: vertical-rl;   /* ←縦書き（右から左へ） */
  text-orientation: upright;   /* 漢字やカナを直立 */
  line-height: 1.5;            /* 縦方向の間隔 */
}

.glow-letter {
  opacity: 0;
  display: inline-block;
  animation: glow 1s ease forwards;
}

@keyframes glow {
  0%   { opacity: 0; filter: blur(4px); transform: scale(0.8); }
  50%  { opacity: 1; filter: blur(0); transform: scale(1.1); text-shadow: 0 0 8px rgb(68, 255, 102); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); text-shadow: 0 0 4px rgb(0, 184, 15); }
}




#visual {
  position: relative;      /* 子要素の絶対配置基準にする */
  width: 100%;
  height: 100vh;           /* ビューポートいっぱい */
  overflow: hidden;        /* はみ出る部分を隠す */
}

.bg-video {
  position: absolute;      /* セクションの中で絶対配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* アスペクト比を保って画面にフィット */
  z-index: -1;             /* コンテンツの背面に配置 */
  pointer-events: none;    /* 動画がクリックを邪魔しない */
  display: block;
  transform: translateY(-0.5px);  /* 微調整で消えることがあります */
}

video {
  display: block;  /* ← これで隙間を消せる */
}



/* about */

#about {
  z-index: 0;
  background: url(img/top-img.webp) no-repeat center/cover;
  background-size: 80%; /* 横も縦も半分 * /* サービスセクションとの重なりを防ぐ */
  width: 100%;
  padding: 80px 5% 100px 5%; /* 上80px 下200pxに拡大してserviceと重ならないように */
  position: relative;
  height: auto;
}

#about::before {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left:0 の省略 */
  background: rgba(255, 255, 255, 0.7); /* ← 白半透明で透かす */
  z-index: -1; /* 背景として */
}

#about  h3 {
    font-size: 2.2rem;
    color: #000;
    text-align: center;
    height: auto;
}

.animated-text span {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px);
  animation: fadeInUp 0.5s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#about h4 {
    text-align: center;
    color: #000000;
    margin-top: 30px;
    font-size: 2rem;
    line-height: 1.8;
}

.content .about-text {
    width: 545px;
    margin: 0 auto;
    font-size: 1.2rem;
    text-align: center;
    line-height: 3;
    margin: 50px auto;
    color: #000000;
}

.about-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 5%;
  gap: 40px;
}

.about-side img {
  width: 100%;
  display: block;
  border-radius: 10px;
  margin-bottom: 20px;
}

.about-side.left {
  width: 15%;
}

.about-side.right {
  width: 15%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-main {
  width: 60%;
  text-align: center;
  min-width: 300px; 
}

/* スライド実装 */

.slide {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 50px;
}

/* スライド全体に左右フェードをかける */
.slide {
  position: relative; /* フェードのために必要 */
  overflow: hidden;   /* 横スクロールを隠す */
}

.slide::before,
.slide::after {
  content: "";
  position: absolute;
  top: 0;
  width: 80px; /* フェード幅を調整 */
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.slide::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.7), rgba(255,255,255,0));
}

.slide::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,0.7), rgba(255,255,255,0));
}

/* スクロールアニメーション */
.slide-track {
  display: flex;
  width: calc(250px * 16); /* 画像16枚分 */
  animation: scroll 40s linear infinite;
}

.slide-track img {
  width: 250px;
  height: auto;
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 半分（8枚ぶん）移動して戻る */
}

/* ==============================
   共通スクロールアニメーション
   ============================== */

/* 初期状態は透明で少し下にずらす */
.fade-in, .fade-up, .fade-right {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 上からフェードイン */
.fade-up {
  transform: translateY(20px);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 下からフェードイン（共通） */
.fade-in {
  transform: translateY(20px);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 右からフェードイン */
.fade-right {
  border-radius: 10px;
  width: 30%;
  background: url(img/paints.webp);
  background-size: 80%;
  background-position: 20%;
  background-repeat: no-repeat;
  box-shadow: 5px 5px 25px #cecece;
  transform: translateX(40px);
}
.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ==============================
   Aboutセクション右下画像
   ============================== */
.right .ress {
  display: block; /* display:none を解除してスクロールで表示 */
}

/* ==============================
   Service セクション
   ============================== */
.service {
  max-width: 1296px;
  padding: 120px 5% 200px 5%; /* 上の余白を増やしてaboutと重ならないように */
  margin: 0 auto;
  background-image: url(img/bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
}

.service h3 {
  text-align: center;
  color: #000;
  font-size: 2rem;
  margin-bottom: 20px;
}

.service h4 {
  color: #000;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.service p {
  color: #000;
  font-size: 1.2rem;
}

.consultation-text p {
  color: #000;
  font-size: 1rem;
}

.service ul {
  color: #000;
}

.service .service-text {
  text-align: center;
  margin-bottom: 100px;
}

.service img {
  width: 500px;
}

/* ==============================
   スライドアニメーション（必要なら残す）
   ============================== */
.slide-track {
  display: flex;
  width: calc(250px * 16); /* 画像16枚分 */
  animation: scroll 40s linear infinite;
}

.slide-track img {
  width: 250px;
  height: auto;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.consultation {
  height: auto;
  max-width: 1296px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 100px;
}

.consultation-text {
  flex: 1;
  min-width: 280px;
}

.consultation-text {
  width: 30%;
}

.consultation-text h4{
  color: #a8e28c;
  border-bottom: 1px solid #a8e28c;
}

.consultation-text-item {
  text-align: left;
}

.leaf {
  list-style: none;       /* デフォルトのマーカーを消す */
  position: relative;     /* ::before の絶対配置用 */
  padding-left: 30px;     /* 画像分の余白を確保 */
}

.leaf::before {
  content: "";                       /* contentは必須 */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;                       /* 画像の幅 */
  height: 20px;                      /* 画像の高さ */
  background-image: url('img/lightGreen_leaf.webp'); /* 画像指定 */
  background-size: contain;           /* 画像を枠内に収める */
  background-repeat: no-repeat;
  background-position: center;
}

.leaf2 {
  list-style: none;       /* デフォルトのマーカーを消す */
  position: relative;     /* ::before の絶対配置用 */
  padding-left: 30px;     /* 画像分の余白を確保 */
}

.leaf2::before {
  content: "";                       /* contentは必須 */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;                       /* 画像の幅 */
  height: 20px;                      /* 画像の高さ */
  background-image: url('img/yellow_leaf.webp'); /* 画像指定 */
  background-size: contain;           /* 画像を枠内に収める */
  background-repeat: no-repeat;
  background-position: center;
}

.leaf3 {
  list-style: none;       /* デフォルトのマーカーを消す */
  position: relative;     /* ::before の絶対配置用 */
  padding-left: 30px;     /* 画像分の余白を確保 */
}

.leaf3::before {
  content: "";                       /* contentは必須 */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;                       /* 画像の幅 */
  height: 20px;                      /* 画像の高さ */
  background-image: url('img/deepGreen_leaf.webp'); /* 画像指定 */
  background-size: contain;           /* 画像を枠内に収める */
  background-repeat: no-repeat;
  background-position: center;
}



.consultation-text p {
  line-height: 2;
}

.consultation-text2 {
  margin-bottom: 100px;
}

.consultation-text ul {
line-height: 2;
margin-bottom: 20px;
}

.consultation-btn {
  background-color: #fff;
  justify-content: start;
  margin-left: 0;        /* 左端に寄せる */
}


/* recruitment */

.recruitment {
  max-width: 1296px;
  margin: 0 auto 200px auto;
  text-align: center;
  background-image: url(img/bg3.webp);
  background-repeat: no-repeat;
}

.recruitment h3 {
  color: #000;
  margin-bottom: 10px;
}

.recruitment p {
  margin-bottom: 70px;
  color: #000;
  font-size: 1.2rem;
}

.recruitment img {
  display: block;
  margin: 0 auto;
  transition: .5s;
}

.recruitment img:hover {
  transform: scale(1.02);
  opacity: .9;
}

.recruit-tab {
  font-size: 1.3rem;
}


#service {
    margin-top: -6rem
  }

  #service .link_btn-wrapper {
    background: #fff
  }

  #service .link_btn-wrapper .link_btn-wrapper-inner.sp_show.service {
    display: grid;
    grid-column: 1/13;
    padding: 2.4rem 0;
    margin: 0 auto;
    width: 90%
  }

  #service .link_btn-wrapper .link_btn-wrapper-inner.sp_show.service a {
    align-items: center;
    padding: 0;
    justify-content: end;
    margin-left: -3rem
  }

  #service .link_btn-wrapper .link_btn-wrapper-inner.sp_show.service a img {
    height: 2.2rem;
    margin: 0 0 0 2rem
  }

  #service .inner .service__top-wrapper {
    display: block;
    margin: 0
  }

  #service .inner .service__top-wrapper-title .en-font {
    font-size: 5.8rem
  }

  #service .inner .service__top-wrapper .service__top-content-wrapper .font-jp-title {
    font-size: 2.4rem;
    margin: .4rem 0 0 0
  }

  #service .inner .service__top-wrapper .service__top-content-wrapper .font-jp-title span:nth-of-type(1) {
    padding: 0 0 0 5rem
  }

  #service .inner .service__top-wrapper .service__top-content-wrapper .font-jp-title span:nth-of-type(2) {
    padding: 0 0 0 10rem
  }

  #service .inner .service__top-wrapper .service__top-content-wrapper .font-jp-text {
    font-size: 1.3rem;
    margin: 1.8rem 0 7rem
  }

  #service .inner .service__top-wrapper .service__top-content-wrapper .link_btn-wrapper {
    display: none
  }

  #service .service__list-wrapper {
    padding: 0;
    margin: 0
  }

  #service .service__list-wrapper .sticky__wrapper-inner {
    height: 100%
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item {
    width: 26rem;
    margin-bottom: 8rem
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item:nth-child(1) {
    margin-bottom: 7.4rem
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item:nth-child(2) {
    margin-bottom: 8rem
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item:nth-child(2) .sp_show.branding {
    display: block
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item:nth-child(3) {
    margin-top: 1.6rem
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item:nth-child(3) .service__list-EN_title {
    margin-top: 1.6rem
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item:nth-child(4) {
    margin-top: 8rem
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item:nth-child(4) .service__list-EN_title {
    margin-top: 1.7rem
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item .service__list-number-wrapper .sub_title-line {
    width: 10.2rem;
    margin: 0
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item .service__list-number-wrapper .list__number {
    font-size: 2.8rem
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item .service__list-EN_title {
    margin: .5rem 0 0 0
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item .service__list-EN_title .en-font {
    line-height: 1;
    font-size: 1.3rem
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item .service__list-title {
    font-size: 2.4rem;
    margin: 2.2rem 0
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item .service__list-content {
    font-size: 1.3rem;
    margin: 0;
    text-align: left
  }

  #service .service__list-wrapper .sticky__wrapper-inner-item:nth-child(2) .service__list-content {
    width: 100%
  }

  /* margin: 0 auto 50px auto; */

  #service .project__list-wrapper {
    margin-top: 0;
    padding-top: 1.8rem
  }

  #service .project__list-wrapper .inner .project__list-title {
    margin-bottom: 3rem
  }

  #service .project__list-wrapper .inner .project__list-title::before {
    width: 4px;
    margin-top: 1px
  }

  #service .project__list-wrapper .inner .project__list-title img {
    width: 4px;
    height: 4px
  }

  #service .project__list-wrapper .inner .project__list-title .font-jp-title {
    margin: 0 0 0 1.2rem;
    font-size: 1.3rem
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper {
    display: unset
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item {
    padding: 2.6rem 0 2.4rem 0;
    border-top: solid 1px #1b1b1b
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item:last-of-type {
    border-bottom: solid 1px #1b1b1b
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item-link {
    display: block;
    width: 100%
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item-link-inner-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    -moz-column-gap: 0;
    column-gap: 0
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item-link-inner-top .project__item-number {
    color: #1b1b1b;
    font-size: 1.6rem;
    align-self: flex-start;
    display: block;
    margin: 0;
    height: 100%
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item-link-inner-top .project__item-title-wrapper {
    flex: 1
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item-link-inner-top .project__item-title-wrapper .heading {
    color: #1b1b1b;
    font-size: 2.4rem;
    line-height: 1.3;
    padding: 0 0 0 1.6rem
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item-link-inner-top .project__item-title-wrapper .sub__heading {
    font-size: 1.3rem;
    line-height: 2;
    display: block;
    padding: .4rem 0 0 1.8rem;
    color: rgba(27, 27, 27, .5)
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item-link-inner-top .project__arrow {
    padding-bottom: 2.4rem;
    padding-right: 0;
    width: 1.2rem;
    height: 1.2rem;
    align-self: center;
    opacity: 1;
    visibility: visible
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item-link .project__item-image {
    padding: 2.2rem 0 0 3rem
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item-link .project__item-image img {
    max-height: 60rem;
    height: auto;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item-link .project__item-link-inner-bottom {
    padding: 2.3rem 0 0 3rem
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item-link .project__item-link-inner-bottom .project__item-link-accordion {
    overflow: unset;
    height: 100% !important
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item-link .project__item-link-inner-bottom .project__item-link-accordion .description {
    color: #1b1b1b;
    font-size: 1.3rem;
    overflow: unset
  }

  .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item.active .heading,
  .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item.active .description,
  .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item.active .project__item-number,
  .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item.active .arrow {
    color: #1b1b1b
  }

  #service .project__list-wrapper .inner .project__list-inner-wrapper .project__list-left-wrapper .projects__list .project__item.active .project__item-link-accordion {
    height: 100%;
    will-change: height
  }

  #service .project__list-right-wrapper {
    display: none
  }

  /* ====== レイアウト全体 ====== */
.project__list-inner-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin: 0 auto 80px auto;
}

/* 左側（文字） */
.project__list-left-wrapper {
  width: 50%;
}

.project__item {
  border-bottom: 1px solid #ddd;
  padding: 1rem 0;
  cursor: pointer;
  transition: background 0.3s ease;
}

.project__item:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* ====== 右側（画像） ====== */
.project__list-right-wrapper {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project__list-right-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  transition: opacity 0.3s ease;
  opacity: 1;
}

/* ====== アコーディオン部分（詳細文） ====== */
.project__item-link-accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding-top: 0;
}

.project__item:hover .project__item-link-accordion {
  max-height: 200px; /* 詳細文の高さに合わせる */
  padding-top: 0.5rem;
}

.project__item-link-accordion p {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

/* ====== スマホ対応（必要なら調整） ====== */
@media screen and (max-width: 768px) {
  .project__list-inner-wrapper {
    flex-direction: column;
  }
  .project__list-left-wrapper,
  .project__list-right-wrapper {
    width: 100%;
  }
}


/* youtube */
.youtube-wrapper {
  max-width: 1296px;
  height: auto;
  margin: 0 auto 150px auto;
}

.youtube-wrapper-text {
  margin-bottom: 50px;
}

picture {
  margin: 0 auto 30px auto;
}


.youtube-box-wrapper {
  max-width: 1200px;
  display: flex;               /* 横並び */
  justify-content: center;     /* 横方向中央寄せ */
  gap: 40px;                   /* サムネイル間の余白 */
  text-align: center;          /* テキスト中央寄せ */
  margin: 0 auto 80px auto;              /* 親コンテナ中央寄せ */
}

.youtube-title::before {
  content: ""; /* これが必須 */
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  background-image: url("img/youtube-icon.svg"); /* パスはHTMLから見た正しい場所に */
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.channel {
  display: inline-flex;      /* 横並びにして縦中央揃え */
  align-items: center;       /* 縦中央 */
  gap: 8px;        /* アイコンの高さに合わせる */
}

.channel::before {
  content: ""; /* これが必須 */
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-image: url("img/youtube-icon.svg"); /* パスはHTMLから見た正しい場所に */
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.youtube-item a{
  text-decoration: none; /* 下線を消す */
}

.youtube-item a:hover {
  color: #727272;       /* ホバー時の色を好きな色に変更 */
}

.youtube-item a:visited {
  color: inherit;       /* 訪問済みでも青くならない */
}

.thumbnail {
  width: 100%;          /* 親要素の幅に合わせる */
  height: auto;         /* 縦横比を保つ */
  max-width: 560px;     /* 元画像サイズ以上には大きくならない */
  border-radius: 8px;   /* （お好みで角丸） */
  display: block;       /* インライン要素の隙間を消す */
  margin: 0 auto;       /* 中央寄せ */
}


.youtube-item img {
  border-radius: 5px;
  object-fit: cover;
  transition: transform 0.5s ease; /* ズームアニメーション追加 */
}

/* ホバーでズーム */
.youtube-item img:hover {
  transform: scale(1.1); /* 1.2倍に拡大 */
}




/* contact */

.contact-wrapper {
  max-width: 1296px;
  height: auto;
  margin: 160px auto;
}

.contact {
  text-align: center;
}

  .contact h3 {
  background-color: #a8e28c;
  color: #fff;
  width: 80%;
  margin: 0 auto 30px auto;
}

.contact-text {
  color: #000;
  font-size: 1rem;
}

.contact-btn {
  max-width: 1000px;
  display: flex;
  margin: 80px auto 150px auto;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.line-btn {
  display: block;
  margin: 0 auto;
  width: 350px;
  padding: 20px 100px;
  border: 3px solid #00b54c;
  color: #00b54c;
  text-align: center;
  border-radius: 5px;
  background: linear-gradient(to left, #fff 50%, #00b54c 50%);
  background-size: 200% 100%;
  background-position: right bottom; /* 初期位置を右に */
  transition: all 0.5s ease;
}

.line-btn:hover {
  color: #fff;
  border: 2px solid #00b54c;
  background-position: left bottom; /* ホバーで左に移動 */
  scale: 1.05;
}


.tell-btn {
  display: block;
  margin: 0 auto;
  width: 350px;
  padding: 20px 100px;
  background: linear-gradient(to left, #fff 50%, #333 50%);
  color: #333;
  background-size: 200% 100%;
  background-position: right bottom; /* 初期は右側 */
  transition: all 0.5s ease;
  text-align: center;
  border: 3px solid #333;
  border-radius: 5px;
}

.tell-btn:hover {
  color: #fff;
  border: 2px solid #333;
  background-position: left bottom; /* ホバー時に左へスライド */
  scale: 1.05;
}


/* footer */

.footer {
  width: 100vw;
  height: auto;
  color: #000000;
  line-height: 3;
  background-image: url(./img/footer-bg.webp);
  background-size: cover;

}

.footer .adress {
  line-height: 2;
  margin-bottom: 10px;
}

.footer img {
  width: 200px;
}

.footer-wrap {
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding: 50px;
  margin: 0 auto;

}

.footer-icon li img {
  width: 90px;
}

footer a {
  color: inherit; /* 親要素の文字色を使う */
  text-decoration: none; /* 下線も消す場合 */
  transition: all .3s;
}

footer a:hover {
  color: #81bd63;
}

p.copy {
  margin-top: 30px;
}

.banner img {
  display: block;
  margin-top: 15px;
  transition: all .3s;
}

.banner img:hover {
  opacity: .5;
}

@media (max-width:1023px) {
  
  .nav-pc {
    display: none;
  }

}


@media (max-width: 768px) {

/* ローディング画面とTOP */

  .pc-only {
    display: none !important;
    visibility: hidden;    /* 念のため */
    width: 0;
    height: 0;
  }

.pc-only { display: none; }
  .mobile-only {
    display: block;
    position: relative;
    width: 100%;
    height: 60vh; /* ローディングは小さめ */
    overflow: hidden;
    object-fit: cover;
  }
  
  /* ローディング画像アニメ */
  .mobile-only img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
  }
  .mobile-only img.active {
    opacity: 1;
  }

  /* モバイルTOP画像フェードイン */
  .bg-images {
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    height: 100vh; /* 画面全体に */
    object-fit: cover;
  }
  .bg-images.show {
    opacity: 1;
  }

  /* ローディング画像・動画を画面の50%に縮小 */
  .loader-video,
  .loader-images {
    width: 80%;       /* 横幅は画面の80%程度 */
    height: 50%;      /* 高さは画面の50% */
    max-width: 400px; /* 任意で最大幅を指定 */
    max-height: 300px; /* 任意で最大高さを指定 */
    position: relative; /* 絶対位置解除して中央に配置 */
  }

  .loader-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }


   .glow-text {
    top: 50%;              /* 縦中央 */
    padding: 0 10px;
    z-index: 50;           /* ローディングや背景より前面 */
  }

  .glow-text h2 {
    font-size: 1.2rem;
    line-height: 1.2;
  }

  /* 背景画像・動画のz-index調整 */
  .bg-images img,
  .bg-video,
  .loader-images img {
    z-index: 1;
  }







  .standard-btn {
    height: 50px;        /* 高さを少し小さく */
    line-height: 50px;
    margin: 15px auto;   /* 上下余白調整 */
  }

  .standard-btn span {
    font-size: 0.95rem;  /* 文字サイズを縮小 */
  }

 #about h3 {
    font-size: 1.5rem;
  }

.content {
    margin: 0 auto 30px auto ;
    width: auto;
}

   h2 {
        font-size: 1.3rem;
        padding-left: 10px;
      }

      .icon {
        display: none;
      }

      .icon-humberger {
        width: 40px;
        height: auto;
        display: block;
      }



      h3 {
        font-size: 1.1rem;
      }

      h4 {
        font-size: .9rem;
      }

      section p {
        font-size: .7rem;
      }



      .visual-wrapper img {
        width:30%;
      }

      .picture1 {
        top:3%;
        left: 3%;
      }


  /* about */


#about h4 {
    margin-top: 20px;
    font-size: 1rem;
}

.content .about-text {
    width: auto;
    margin: 0 auto;
    font-size: .8rem;
    text-align: center;
    line-height: 4;
    margin-top: 30px;
    font-weight: 500;
}

.about-main {
  width: 100%;
  text-align: center;
}

.about-side {
    margin: 0 auto;
}



.about-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 5%;
  gap: 20px;
}

  .btn-company {
    font-size: 0.7rem;
    width: 200px;
    /* padding: 10px 50px; */
    margin-bottom: 50px auto 50px auto;
  }

  .display {
    display: none !important;
  }

  .ress {
    display: block !important;
  }

  .about-side.right {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 auto;
  }

  /* 画像サイズも調整しておくと良い */
  .about-side.right img {
    width: 100px;
    height: auto;
  }

.about-main {
  width: 60%;
  text-align: center;
}

.about-section {
  flex-direction: column;
}

/* .service */
  .service {
    width: 90%;
    margin: 0 auto;
  }

    .service h3 {
      font-size: 1.1rem;
    }

    .service {
      font-size: 0.9rem;
      padding-bottom: 80px;
    }

    .service p {
      font-size: 1rem;
      margin-bottom: 20px;
    }

        .service ul {
      font-size: 0.9rem;
    }

      .consultation {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .consultation-text {
      width: 90%;
      text-align: center;
    }

    .consultation-text-item {
      text-align: center;
    }

      .consultation-text .consultation-btn {
        margin: 0 auto;
        font-size: 0.7rem;
        /* padding: 10px 50px; */
        border-radius: 5px;
      }

      .consultation img {
      width: 90%;
      height: auto;
      margin-top: 50px;
    }

    /* recruitment */

    .recruitment {
      margin-bottom: 80px;
    }

    .project__list-inner-wrapper {
      margin-bottom: 30px;
    }

    .project__list-wrapper h3 {
      font-size: 1rem;
    }

    .recruitment p {
      font-size: 1rem;
    }

    .recruitment img {
      width: 90%;
    }



    /* .movie */

      .youtube-wrapper {
        width: 90%;
        height: auto;
        margin: 0 auto 150px auto;  
      }

      .movie h3 {
        font-size: 1.2rem;
      }

      .youtube-wrapper-text p {
        font-size: 0.9rem;
      }

      .shorts-grid {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        height: auto;
        text-align: center;
      }

      /* contact */

      .contact {
        width: 80%;
        margin: 0 auto;
      }

      .contact h3 {
        font-size: 1.1rem;
      }

      .contact p {
        font-size: .8rem;
      }

      .contact-btn {
        flex-direction: column;
        gap: 20px;
        font-size: .7rem;
      }

      .contact-btn {
        line-height: 1;
      }


      .line-btn,.tell-btn {
        display: block;
        margin: 0 auto;
        width: 90%;
        padding: 20px 50px;
      }


    /* youtube  */
      .youtube-box-wrapper {
        display: block;
        width: 80%;
        margin: 30px auto;
      }

      .youtube-wrapper-text {
         width: 80%;
         margin: 30px auto 50px;
      }

      .youtube-item {
        margin-bottom: 50px;
      }


/* スクロールアニメーション */
.slide-track {
  width: calc(150px * 16); /* 画像枚数に応じて調整 */
}

.slide-track img {
  width: 150px; /* 画像サイズを揃える */
}

.contact h3 {
  width: 100%;
}

 /* footer */
 .footer {
     height: auto;   
     width: auto;
     font-size: 0.8rem;
     margin: 0 auto;
 }
   .footer-wrap {
     flex-direction: column;
     text-align: center;
 }

 .banner {
  margin: 0 auto;
 }

 .footer-list {
  display: none;
 }

 .footer .adress {
  margin: 10px auto;
 }

 }

    /* ボタン */

/* 共通 */
.top-text-h2 {
  font-size: 3rem;
  margin-bottom: 15px;
  color: #a8e28c;
}
    
/* recruitment */

.recruit-top {
  height: 729px;
  max-width: 1296px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  gap:100px;
  justify-content: center;
  background-image: url(./img/bg3.webp);
  background-repeat: no-repeat;
}

.recruit-about {
  max-width: 1296px;
  margin: 0 auto;
  text-align: center;
}

.recruit-about-title {
  z-index: 1;
  font-size: 1.8rem;
  margin-bottom: 20px;
  font-weight: 500;
  color: #000;
  margin-bottom: 20px;
}

.recruit-about-title2 {
  z-index: 1;
  font-size: 1.8rem;
  margin-bottom: 10px;
  font-weight: 500;
  color: #a8e28c;
  position: relative;
}



.application-requirements {
  max-width: 1296px;
  height: auto;
}

.application-requirements h3 {
  color: #ffffff;
  background-color: #a8e28c;
  border-radius: 5px;
  padding: 5px 0;
  margin-bottom: 30px;
  text-align: center;
  font-size: 1.2rem;
}

.nakama {
  color: #a8e28c;
  font-size: 2rem;
}

.recruit-philosophy {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: 80px auto 0 auto;
}

.recruit-philosophy img {
  width: 40%;
  display: block;
  border-radius: 5px;
}

.recruit-about-text {
  line-height: 1.8;
  width: 50%;
  text-align: left;
}

.application-requirements-wrapper {
  height: auto;
  width: 100%;
  margin: 80px auto 0 auto;
}

.application-requirements-title {
  text-align: left;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.application-requirements-detail {
  text-align: left;
  border: 1px solid #000;
}

.application-requirements-wrapper .application-requirements-detail dt,
.application-requirements-wrapper .application-requirements-detail dd {
  background: #fff;
  border: 1px solid #000;
}

.merit {
  position: relative;
  width: 100%;
  max-width: 1296px;
  height: 300px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;       /* 縦中央 */
  justify-content: center;   /* 横中央 */
  flex-direction: column;    /* 上下並び */
  margin: 100px auto 0 auto;
}

.crop-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  opacity: 0.2;
  z-index: 0;
}

.merit-wrapper {
  position: relative; /* absoluteを外す */
  z-index: 1;
  padding: 20px;
  max-width: 1000px;
}




.merit ul li {
  font-size: 1.1rem;
  color: #000;
  font-weight: bold;
}

.emphasis {
  font-size: 1.3rem;
  /* font-weight: bold; */
  color: #a8e28c;
  font-weight: 500;
  line-height: 1.3;
}

.merit-title {
  font-size: 1.4rem;
  color: #000;
  margin-bottom: 15px;
}



.employee-introduce {
  max-width: 1296px;
  margin: 0 auto;
}

.employee-introduce-text h4 {
  font-size: 2rem;
  margin-bottom: 30px;
}

.employee-introduce-text {
  text-align: center;
}

.employee-introduce-text p {
  line-height: 1.8;
}

.employee-introduce img {
  display: block;
  width: 100%;
  margin: 50px auto 0px auto ;
  transition: all .5s;
}


.employee-introduce img:hover {
  scale: 1.03;
  opacity: .8;
}

.employee-introduce-btn {
  position: absolute;
  bottom: 10%;
  font-size: 1.2rem;
  transition: all .3s;
}

.employee-introduce-btn:hover {
  font-size: 1.5rem;
}



.employee-interview {
  background-image: url(./img/bg3.webp);
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 1296px;
  margin: 0 auto;
}

.employee-interview h3,.step h3,.employee-introduce-text h3 {
  color: #ffffff;
  background-color: #a8e28c;
  border-radius: 5px;
  padding: 5px 0;
  margin-bottom: 30px;
  text-align: center;
  font-size: 1.2rem;
}

.step {
  max-width: 1296px;          /* 横幅 */
  height: auto;
  margin: 100px auto 100px auto;
}

.step-wrapper{
  display: flex;
  text-align: center;
  justify-content: center;
  align-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;            /* Flexbox 有効 */
  justify-content: center;  /* 縦中央 */
  align-items: center;      /* 横中央 */
}

.step-img {
  width: 20%;
}

.arrow-img {
  width: 5%;
}

.step-img,
.arrow-img {
  opacity: 0;
  transform: translateY(20px); /* 少し下から */
  animation: fadeInUp 0.8s ease forwards;
}

/* フェードイン＆ちょっと上に上がる */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 順番を制御（n番目のimgに遅延をつける） */
.step-wrapper img:nth-child(1) { animation-delay: 0s; }
.step-wrapper img:nth-child(2) { animation-delay: 0.3s; }
.step-wrapper img:nth-child(3) { animation-delay: 0.6s; }
.step-wrapper img:nth-child(4) { animation-delay: 0.9s; }
.step-wrapper img:nth-child(5) { animation-delay: 1.2s; }
.step-wrapper img:nth-child(6) { animation-delay: 1.5s; }
.step-wrapper img:nth-child(7) { animation-delay: 1.8s; }

.application-requirements {
  margin: 200px auto 200px auto;
  text-align: center;
}

.employee-interview {
  height: auto;
  max-width: 1296px;
  margin: 100px auto 200px auto;
}

.interview-top {
  max-width: 1296px;
  height: auto;
  display: flex;
  margin: 50px auto 100px auto;
  text-align: left;
  align-items: center;
  justify-content: space-between;
  gap:30px;
  margin-bottom: 100px;
}

.interview-top-text {
  border-radius: 10px;
}

.interview-top-text {
  text-align-last: left;
  width: 30%;
  background-color: #a8e28c;
  color: #fff;
  padding: 20px;
}

.interview-main-text {
  text-align: center;
  margin-bottom: 100px;

}

.employee-interviewer {
  display: block;
  width: 70%;
  object-fit: cover;
}

.employee-interview .employee-interview-img {
  display: block;
  margin:  0 auto 100px auto;
  max-width: 100%;
}

.employee-life {
  max-width: 1296px;
  height: auto;
  margin: 0 auto 200px auto;
  text-align: center;
}

.employee-life p {
  margin-bottom: 100px;
}

.employee-life img {
  display: block;
  width: 60%;
  margin: 0 auto 100px auto;
}

.houkagoday {
  width: 100%;
  height: auto;
  display: flex;
  gap: 80px;
  margin: 0 auto;
}

.houkagoday img {
  display: block;
  margin: 0 auto;
  width: 30%;
}

.qestion {
  font-size: 1.2rem;
  font-weight: bold;
  color: #a8e28c;
  margin: 50px auto 20px auto;
}

@media screen and (max-width: 768px) {
    .recruit-top {
      height: auto;
      display: block;
      margin: 100px auto;
      padding: 0 10px;
      text-align: center;
    }

    .recruit-about {
      width: 80vw;
    }

    .recruit-top-p {
      margin-bottom: 30px;
    }

    .recruit-img-box {
      display: block;
      margin: 0 auto;
    }

    .recruit-img-box img {
      display: block;
      width: 100%;
      margin-top: 20px;
    }

    .employee-introduce-text h4 {
      font-size: 1.2rem;
    }

    .application-requirements {
      text-align: center;
      margin-bottom: 50px;
      width: 80vw;
    }

    .nakama {
      font-size: 1.5rem;
      width: 90%;
    }

    .recruit-about-title {
      font-size: 1.3rem;
    }

    .recruit-philosophy {
      display: block;
      margin: 40px auto 0 auto;
    }

    .recruit-philosophy img {
      width: 90%;
      margin: 0 auto;
    }

    .recruit-about-text {
      width: 90%;
      margin: 20px auto 20px auto;
    }

    .crop-img {
      object-fit: cover;
    }

    .recruit-about-title2{
      font-size: 1.3rem;
    }

    .merit-title {
      font-size: 1rem;
    }

    .merit ul li {
      font-size: .8rem;
    }

    .employee-introduce {
      width: 80vw;
    }

    .interview-top {
      display: block;
    }

    .interview-top-text p {
      margin-bottom: 30px;
    }

    .interview-main-text {
      margin-bottom: 30px;
    }

    .employee-interview {
      margin: 100px auto 100px auto;
      padding: 10px;
    }

    .employee-interview h3 {
      font-size: 1.8rem;
    }

    .employee-interview-img {
      margin-bottom: 30px;
    }

    .employee-life p {
      margin-bottom: 20px;
    }

    .employee-interview .employee-interview-img,.interview-top {
      margin-bottom: 30px;
    }

    .interview-top {
      display: block;
    }

    .interview-top-text {
      margin: 0 auto;
      width: 50%;
    }

    .employee-interviewer {
      margin: 0 auto 50px auto;
      width: auto;
    }

    .qestion {
      font-size: 1rem;
    }

    .houkagoday {
      display: block;
    }

  .houkagoday img {
  margin-top: 30px;
  width: 50%;
  }

  .step-wrapper {
    flex-direction: column;
    gap: 20px;
  }
.arrow-img {
  transform: rotate(90deg); /* 縦矢印に固定 */
  max-width: 40px;
  animation: none !important; /* アニメーションを無効化 */
}

.step {
width: 80vw;
}

  .step-img {
    width: 150px;
  }

}


/* company */

.company-top {
  height: 729px;
  max-width: 1296px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  gap:100px;
  background-image: url(./img/bg3.webp);
  background-repeat: no-repeat;
}

.top-text-p {
  width: 60%;
  text-align: center;
  margin: 0 auto;
}

.company-about {
  max-width: 1296px;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
}

.company-about img {
  display: block;
  margin: 50px auto 100px auto;
}

.president {
  margin: 0 auto 200px auto;
  max-width: 1296px;
}

.president-top h3 {
  text-align: center;
}

.president-top img {
  display: block;
  margin: 0 auto;
  margin-bottom: 100px;
}

.president-main-text {
  margin-bottom: 100px;
}

.president h4 {
  text-align: center;
}

.philosophy {
  max-width: 1296px;
  height: auto;
  margin: 0 auto 200px auto;
}

.philosophy-heading {
  background-color: #a8e28c;
  color: #fff;
  padding: 5px 0;
  margin-bottom: 50px;
}

.philosophy h3,p {
  text-align: center;
}

.philosophy-wrapper {
  display: flex;
  margin: 100px auto 0 auto;
  justify-content: center;
  gap: 80px;
  text-align: center;
}

.philosophy-wrapper img {
  display: block;
  margin: 0 auto 30px auto;
}

.company-infomation {
  margin: 0 auto;
  max-width: 1296px;
  margin-bottom: 200px;
}

.philosophy1,.philosophy2,.philosophy3,.philosophy4 {
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: #a8e28c;
  font-weight: 500;
}


.company-infomation h3 {
  text-align: center;
}

.company-list {
  margin: 0 auto;
  max-width: 1000px;
}

dl, dt, dd {
  margin: 0;       /* デフォルトマージンをリセット */
  padding: 0;      /* デフォルトパディングもリセット */
}

dl {
  display: grid;
  grid-template-columns: 200px 1fr; /* dt / ddの幅 */
}

dt, dd {
  padding: 10px 20px; /* 任意で上下のスペースを調整 */
}


dt, dd {
  padding: 20px 30px;  /* 文字と枠の余白 */
  margin: 0;          /* 上下の余白を詰める */
  border-bottom: 1px solid #eee;  /* 仕切り線 */
  align-items: center;
}

dt:nth-of-type(odd),
dd:nth-of-type(odd) {
  background-color: #E5E5E5; /* 濃いグレー */
  color: #000000;
}

dt:nth-of-type(even),
dd:nth-of-type(even) {
  background-color: #F4F4F4; /* 薄いグレー */
}

.group-company {
  max-width: 1000px;
  margin: 0 auto;
  height: auto;
}

.group-company-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 160px auto;
  gap:100px;
} 

.yukyuhukushikai {
  width: 100%;
}

.yukyuhukushi-h3 {
  width: 40%;
  text-align: center;
  color: #a8e28c;
}

.yukyuhukushikai-text {
  width: 60%;
}

.group-text p, .group-text ul{
  width: 100%;
  text-align-last: left;
}

.group-text p {
  line-height: 1.8;
  margin-bottom: 15px;
}

.group-text ul{
  margin-bottom: 15px;
} 

.pdf a {
  margin-bottom: 15px;
}

.open-infomation {
  margin: 0 auto 100px auto;
}

.open-infomation h3{
  margin-bottom: 30px;
}

.pdf .pdf-btn {
  display: block;
  padding: 20px 20px;
  background: #a6a6a6;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: all .3s;
  border:1px solid #333;
}
.pdf-btn:hover {
  background: #d5d5d5;
  color:#333;
}

.group-box {
  margin-top: 50px;
}
.group-box a {
  text-decoration: none;
  color: inherit;
  display: block;
  margin-bottom: 30px;
}

.group-box a div {
  display: flex;               /* 中の img と p を横並び */
  align-items: center;         /* 縦の位置を中央に揃える */                 /* 画像とテキストの間の余白 */
  padding: 20px;
  border: 1px solid #ddd;      /* 枠線（お好みで） */
  border-radius: 8px;
  transition: background 0.3s;
}

.group-box a div:hover {
  background: #f5f5f5;         /* ホバー時に背景色変化 */
}

.group-box img {
  width: 50px;     /* アイコンサイズ調整 */
  height: auto;
}

.group-box p {
  margin-left: 20px;
}

.sp-br {
  display: none;
}

@media screen and (max-width: 768px) {
  .company-top,.president,.philosophy,.company-infomation{
      height: auto;
      width: 80%;
      display: block;
      margin: 100px auto;
  }

  .text-wrapper {
    margin-bottom: 30px;
    text-align: center;
  }

  .president-top img {
    margin-bottom: 20px;
  }

  .philosophy h3 {
    font-size: .8rem;
  }

  .philosophy-wrapper {
    margin-top: 50px;
    display: block;
  }

  .philosophy-box {
    margin-bottom: 50px;
  }

dl {
  grid-template-columns: 40% 1fr; /* dt / ddの幅 */
}

dt,dd {
  font-size: .6rem;
  padding: 10px 20px;
}




.group-company-wrap {
  display: block;
}

  .group-company-wrap,
  .group-text {
    padding: 0 10px; /* 画面端に余白 */
    width: 100%; /* スマホで横幅いっぱい */

  }

.group-text p {
  text-align: center;
  width: 100%;

}

.group-text ul li {
  font-size: .7rem;
} 

  .yukyuhukushi-h3 {
  width: 100%;
  text-align: center;
}

  .yukyuhukushikai-text {
  width: 100%;
}

.group-box p {
  margin-left: 0px;
}

.pdf-btn {
  display: inline-block; /* インラインブロックにする */
  width: 100%;           /* 幅いっぱい */
  max-width: 300px;      /* 任意の上限 */
  text-align: center;    /* 文字を中央に */
  padding: 10px 15px;    /* ボタン内の余白 */
  border-radius: 6px;    /* 角丸 */
  text-decoration: none; /* 下線なし */
  margin: 10px auto;     /* 中央に配置 */
  box-sizing: border-box; /* パディング込みで幅計算 */
  font-size: 0.8rem;
}

.open-infomation a{
  font-size: .7rem;
  width: 100%;
}


.group-box {
  width: 70vw;
  margin: 0 auto;
}

.group-box p {
  margin-left: 10px;
}

.group-box a div {
justify-content: space-around;
text-align-last: left;
}

  .sp-br {
    display: inline;
  }

}



/* kitchen */

.kitchen-top {
  height: 729px;
  max-width: 1296px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  gap:100px;
  background-image: url(./img/bg3.webp);
  background-repeat: no-repeat;
}

.kitchen-about {
  max-width: 1296px;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
}

.kitchen-about img {
  display: block;
  margin: 30px auto 100px auto;
}


.kitchen-overview {
  max-width: 1296px;
  height: auto;
  margin: 0 auto 200px auto;
}

.kitchen-img h3,.office-list h3{
  color: #ffffff;
  background-color: #a8e28c;
  border-radius: 5px;
  padding: 5px 0;
  margin-bottom: 30px;
  text-align: center;
  font-size: 1.2rem;
}

.kitchen-img p {
  margin-bottom: 50px;
}

.kitchen-img-box img {
  display: block;
  margin: 0 auto;
  width: 290px;
}

.kitchen-img-box {
  display: flex;
  gap: 50px;
  max-width: 1296px;
}

.office-text {
  text-align: center;
  margin-bottom: 100px;
}

.office-list {
  max-width: 1296px;
  height: auto;
  margin: 0 auto 200px auto;
}

.office-item img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.kitchen-office-name {
  font-size: 1rem;
  color: #a8e28c;
}

.office-item p {
  margin: 5px 0;
}

.office-adress {
  font-size: .8rem;
}

.office-list-box {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1296px;
  margin: 0 auto;
}

.office-item {
  flex: 1 1 calc(33.333% - 20px);
  box-sizing: border-box;
  /* background: #f0f0f0; */
  text-align: center;
  padding: 10px;
}

.office-item img {
  width: 290px;
  height: 200px;
}

/* 1～6は3列表示 */
.office-list-box .office-item:nth-child(-n+6) {
  flex: 1 1 calc(33.333% - 20px);
}

/* 7つ目は1列でフル幅 */
.office-list-box .office-item:nth-child(7) {
  flex: 1 1 290px;
  margin: 0 auto;
}




@media screen and (max-width: 768px) {
  .kitchen-top,.kitchen-overview,.office-list,map {
      height: auto;
      width: 80%;
      display: block;
      margin: 100px auto;
  }

  .office-list {
    margin-bottom: 100px;
  }

  .kitchen-img p{
    margin-bottom: 30px;
  }

  .kitchen-img-box {
    display: block;
    gap: 0px;
  }

  .kitchen-img-box  img {
    margin-bottom: 20px;
  }

  .office-text {
  margin-bottom: 50px;
}

  .office-list-box {
  display: block;
}

}

/* support-business */
.support-business-top {
  height: 729px;
  max-width: 1296px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  gap:100px;
  justify-content: center;
  background-image: url(./img/bg3.webp);
  background-repeat: no-repeat;
}

.support-business-about {
  max-width: 1296px;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
}

.support-business-about img {
  display: block;
  margin: 50px auto 100px auto;
}

.btype-day p {
  margin-bottom: 50px;
}

.btype-day img {
  display: block;
  width: 60%;
  margin: 0 auto 100px auto;
}

.explanation h3 {
  background-color: #a8e28c;
  color: #fff;
}

/* =========================
   レイアウト共通
========================= */
.layout {
  display: flex;
  max-width: 1296px;
  margin: 0 auto;
  justify-content: center;
}

.support-business-office-heading {      
  color: #ffffff;
  background-color: #a8e28c;
  padding: 5px 0;
  margin-bottom: 30px;
  text-align: center;
  font-size: 1.2rem;  
}

/* =========================
   サイドバー
========================= */
.sidebar {
  flex: 0 0 20%;
  padding: 1em;
  padding: 10px;
  border: 2px solid #a8e28c;
  border-radius: 5px;
  height: 265px;
}

.sidebar-title {
  font-size: 1.5rem;
  color: #a8e28c;
  text-align-last: left;
}

.sidebar ul {
  list-style: none;
 
}

.sidebar li { 
  margin-bottom: 0.5em;
}

.sidebar a { 
  text-decoration: none;
  color: #333;
  display: block;
  padding: 0.5em;
  border-radius: 5px;
  transition: background 0.3s, color 0.3s; /* ホバー時のふわっとアニメ */
}

/* ホバー時 */
.sidebar a:hover {
  background: #e5fed9; /* お好みで変更可能 */
  color: #81bd63;
}

/* アクティブ時 */
.sidebar a.active {
  background: #a8e28c;
  color: #fff;
}

/* =========================
   メイン
========================= */
main { 
  flex: .75; 
  padding: 1em; 
}

/* =========================
   パネル切り替え
========================= */
.panel { 
  display: none; 
  animation: fadeIn 0.4s ease; 
}

.panel.active { 
  display: block; 
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


    /* メイン共通 */

    .explanation-p {
      font-size: 1.1rem;
      line-height: 2;
      margin-bottom: 50px;
    }


    .support-business-office-item img {
      display: block;
      margin: 50px auto 0 auto;
    }

    .office-name {
      font-size: 1.3rem;
      font-weight: 700;
      margin: 30px auto 10px auto;
      color: #a8e28c;
      border-bottom: 1px solid #a8e28c;
      text-align: left;
    }

    .support-business-office-item p {
      text-align-last: left;
    }

    .adress-box {
      border: 1px dotted #a8e28c;
      /* background: #a8e28c; */
      color: #a8e28c;
      border-radius: 5px;
      padding: 10px;
      font-size: .7rem;
      margin: 20px auto 0 auto;
    }

    .adress-box ul {
      display: flex;
      gap: 20px;
    }



    /* デイサービス */

    .dayservice-image-box {
      display: flex;
      gap: 20px;
      margin: 0 auto 80px 0;
      justify-content: center;
    }

    .dayservice-image-box img {
      width: 30%;
      display: block;
    }

    .list-text {
      background: #000;
      font-size: 1.1rem;
      color: #fff;
    }

    .list-box {
      margin: 0 auto;
      justify-content: center;
    }

    .dayservice-schedule {
      margin: 0 auto 100px auto;
    }

    .dayservice-schedule p {
      color: #a8e28c;
      margin-bottom: 50px;
    }

    .dayservice-schedule img {
      display: block;
      width: 60%;
      margin: 0 auto 100px auto;
    }

    /* スマホ用 */
@media screen and (max-width: 768px) {

  .support-business-top {
    display: block;
    padding: 10px;
    margin: 100px auto 50px auto;
    height: auto;
  }

  .top-text-h2 {
    font-size: 2rem;
    text-align: center;
    padding: 0;
  }

  .layout {
    flex-direction: column; /* 縦並び */
  }

/* =========================
   サイドバー
========================= */

  .sidebar {
    flex: 1 0 auto;
    order: 1; /* ヘッダーの下に配置 */
    font-size: .7rem;
    text-align: center;
    height: auto;
  }

.sidebar-title {
  font-size: 1rem;
  text-align-last: center;
}

  main {
    order: 2;
  }

  .explanation-p {
    font-size: .8rem;
    line-height: 1.5;
  }

    .layout {
    flex-direction: column; /* 縦並び */
  }

  .sidebar {
    flex: 1 0 auto;
    order: 1; /* ヘッダー下に配置 */
  }

  main {
    order: 2;
  }

  /* タッチで押した感を出す */
  .sidebar a:active {
    background: #a8e28c;
    color: #fff;
  }

}