.not_inner_margin {
  padding-top: 0;
}


.top_container {
  /* 背景画像の設定 */
  background-image: url(../img/main_back.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  /* gridによる全体レイアウト */
  display: grid;
  /* 画面を上の行（タイトル）と下の行（テキストと画像の二段に分割） */
  grid-template-rows: auto 1fr;
  /* 横方向を左側と右側の二列に均等分割 */
  grid-template-columns: 1fr 1fr;

  /* 各要素がぶつからないための余白 */
  gap: 6rem;
}

/* 上の真ん中にタイトル */
.top_title {
  /* 一行目に、左端から右端までぶち抜いて配置 */
  grid-row: 1;
  grid-column: 1 / span 2;

  /* 中央寄せ */
  text-align: center;
  /* 上端に固定 */
  align-self: start;

  padding-top: 16rem;

  /* テキストのスタイル */
  color: #1c4587;
  font-size: 6rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: bold;
}

/* タイトル：動き */
/* トップメッセージ1文字ずつ */
.top_title {
  text-align: center;
}

.top_title span {
  display: inline-block;
  opacity: 0;
  transform: scale(0.5);
  animation: popIn 0.5s ease forwards;
}

@keyframes popIn {
  60% {
    transform: scale(1.2);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 1文字ずつテキストここまで */

/* 下の左にテキスト */
.top_text_wrapper {
  /* 二行目の左側に配置 */
  grid-row: 2;
  grid-column: 1;

  align-self: flex-start;
  justify-self: end;
  margin-right: 4rem;
}

.top_text {
  width: 32rem;
  text-align: center;
  font-size: 2rem;
  line-height: 2em;
  color: #6fa8dc;
  margin-bottom: 4rem;
}

.top_text:last-child {
  margin-bottom: 0;
}

/* 下の右に画像グループ */
.top_image_wrapper {
  /* 二行目の右側に配置 */
  grid-row: 2;
  grid-column: 2;

  /* 三つの画像をずらして配置するための基準空間 */
  position: relative;
  width: 48rem;
  height: 56rem;
}

/* 三つの画像の共通スタイル */
.top_image {
  position: absolute;
  border-radius: 50%;
  object-fit: cover;
  /* 不透明度0.6 */
  opacity: 0.6;
  /* 明るさ115% */
  filter: brightness(1.15);
}

/* 上の画像 */
.img_top {
  width: 24rem;
  height: 24rem;
  top: 0;
  left: 10rem;
}

/* 右下の画像 */
.img_right {
  width: 16rem;
  height: 16rem;
  top: 22rem;
  right: 0;
}

/* 左下の画像 */
.img_left {
  width: 20rem;
  height: 20rem;
  bottom: 8rem;
  left: 0;
}

/* 上下にふわふわする動き */
.fluffy_top,
.fluffy_right,
.fluffy_left {
  animation: fluffy 4s ease-in-out infinite;
}

.fluffy_top {
  animation-duration: 4s;
  animation-delay: 0s;
}

.fluffy_right {
  animation-duration: 5.2s;
  animation-delay: 1.3s;
}

.fluffy_left {
  animation-duration: 3.6s;
  animation-delay: 0.8s;
}

@keyframes fluffy {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2rem);
  }
}



.link_section {
  position: relative;
  width: 100%;
  z-index: 1;
  overflow: clip;
  /* はみ出るのを防ぐために任意の大きさで切り取る */
}

.sticky_background {
  position: sticky;
  top: 0;
  /* 画面いっぱい */
  height: 100vh;

  /* 表示位置を揃えるように高さ分マイナスする */
  margin-bottom: -100vh;

  /* 背景画像処理 */
  background-image: url(../img/content_back.webp);
  background-size: cover;
  background-position: right bottom;

  z-index: 0;
}


.link_box_wrapper {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 120rem;
  margin: 0 auto;

  /* 上下の余白を揃える */
  padding: 10vh 0;

  display: flex;
  flex-direction: column;
  gap: 5rem;
}

/* 各ボックスの共通設定 */
.link_box_inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 50rem;
  padding: 2rem;
  background-color: #ffffff;
  border: 4px solid #00ffff;
  /* 角の丸み */
  border-radius: 80px;
  /* 重ねる向日葵の基準点にする */
  position: relative;
  /* 向日葵を箱からはみ出させたい場合は必要 */
  overflow: visible;
  transition: transform 0.3s, background-color 0.3s;
}

.link_box {
  display: block;
  width: 100%;
  max-width: 80rem;
}

.link_box:hover .link_box_inner {
  transform: scale(1.05);
  background-color: #fffae2;
}

/* 外枠のひまわりの装飾(奇数の場合) */
.box_odd .link_box_inner::before {
  content: '';
  width: 18rem;
  height: auto;
  aspect-ratio: 4/3;
  background-image: url('../img/sun_flower.png');
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: -4.5rem;
  left: -6.5rem;
  transform: rotateZ(330deg);
  z-index: 1;
}

/* 外枠のひまわりの装飾(偶数の場合) */
.box_even .link_box_inner::before {
  content: '';
  width: 18rem;
  height: auto;
  aspect-ratio: 4/3;
  background-image: url('../img/sun_flower.png');
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: -5rem;
  right: -5.5rem;
  transform: rotateZ(45deg);
  z-index: 1;
}

/* 1つ目・3つ目を左寄せ */
.link_box:nth-child(odd) {
  margin-right: auto;
}

/* 2つ目を右寄せ */
.link_box:nth-child(even) {
  margin-left: auto;
}

.badge_image {
  position: absolute;
  /* 上に飛び出させる（箱の枠線上に重ねる） */
  top: -5rem;
  /* 画像の大きさ */
  width: 18rem;
  height: auto;
  /* 枠線より上に重ねる */
  z-index: 1;
}

.link_box:nth-child(odd) .badge_image {
  /* 左端からの距離 */
  left: -6rem;
  /* 右側の設定をリセット */
  right: auto;
  /* 斜めに傾ける */
  transform: rotate(-35deg);
}

.link_box:nth-child(even) .badge_image {
  /* 右端からの距離 */
  right: -6rem;
  /* 左側の設定をリセット */
  left: auto;
  /* 斜めに傾ける */
  transform: rotate(45deg);
}

/* 箱の中身 */
.box_title {
  margin-bottom: 1rem;
  font-size: 3.5rem;
  font-weight: bold;
  color: #6fa8dc;
}

.box_text {
  margin-bottom: 4rem;
  font-size: 3rem;
  line-height: 1.6em;
}

/* 2枚の画像を横並びにする */
.box_images {
  display: flex;
  /* 画像と画像の間の余白 */
  gap: 4rem;
  /* 画像を中央寄せ */
  justify-content: center;
  width: 100%;
}

.box_images_item {
  /* 二枚均等に横並び（隙間を考慮） */
  width: calc(50% - 8px);
  max-width: 24rem;
  height: auto;
  object-fit: cover;
  /* 明るさ110% */
  filter: brightness(1.1);
}

.box_images_heart {
  /* 二枚均等に横並び（隙間を考慮） */
  width: calc(50% - 8px);
  max-width: 24rem;
  height: auto;
  object-fit: cover;
}

/* オンラインショップセクション全体設定 */
.online_section {
  width: 100%;
  padding: 4rem 0;
  background-color: #fbf5ffff;
  border-top: 24px solid #6acfe5ff;
  border-bottom: 24px solid #6acfe5ff;
  /* スライダーによって表示される横スクロールバーを非表示に */
  overflow-x: hidden;
}

/* タイトル */
.online_title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 3rem;
}

.online_subtitle {
  font-size: 3rem;
  font-weight: normal;
  margin-left: 16rem;
}

.online_image_wrapper {
  display: block;
  transition: opacity 0.3s;
  margin-right: 1.5rem;
}

.online_image_wrapper:hover {
  opacity: 0.6;
}

.online_image_item {
  display: block;
  width: 100%;
  height: 25vw;
  object-fit: cover;
  filter: brightness(1.1);
}

/* 全体の背景 */
.recruitment_section {
  width: 100%;
  background-color: #f2f8f8ff;
  padding: 6rem 2rem 0 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.recruitment_box {
  position: relative;
  width: 100%;
  max-width: 100rem;
  background-color: #ffffff;
  border: 1px solid #ee99e3ff;
  border-radius: 80px;
  padding: 4rem;
  /* margin-bottom: 8rem; */
}

.box_content {
  display: flex;
  /* 左右の間の余白 */
  gap: 4rem;
  /* 左右の中身の縦位置を中央で揃える */
  align-items: center;
}

/* 左側：テキストエリア */
.content_left {
  /* 利用可能な幅をいっぱいまで広げる */
  flex: 1;
}

.recruitment_title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 3rem;
  text-align: center;
}

.recruitment_text {
  font-size: 2rem;
}

.offer_list {
  width: 90%;
  margin-inline: auto;
}

.offer_list li {
  width: fit-content;
  position: relative;
  padding: 2rem;
  border: 0.1rem solid #ade0ff;
  margin-bottom: 1rem;
  border-radius: 5rem;
  background-color: #ade0ff;
}

/* おすすめ：吹き出し奇数 */
/* 大きい丸 */
.recruitment_odd::before {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  left: -2rem;
  bottom: 0.5rem;
  width: 2rem;
  height: 2rem;
}

/* 小さい丸 */
.recruitment_odd::after {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  left: -3rem;
  bottom: 0;
  width: 1rem;
  height: 1rem;
}

/* おすすめ：吹き出し偶数 */
.recruitment_even {
  margin-left: auto;
}

.recruitment_even::before {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  right: -2rem;
  bottom: 0.5rem;
  width: 2rem;
  height: 2rem;
}

/* 小さい丸 */
.recruitment_even::after {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  right: -3rem;
  bottom: 0;
  width: 1rem;
  height: 1rem;
}

/* おすすめ部分 */
.offer_title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  padding: 1rem 0;
}

/* 利用者募集：強調したい部分 */
.recruitment_emphasize {
  font-size: 2.5rem;
  font-weight: bold;
  color: #1c4587;
}

/* 右側：画像エリア */
.content_right {
  /* 全体の40%の幅を割り当て */
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 5rem;
}

.recruitment_image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  /* 明るさ110% */
  filter: brightness(1.1);
  aspect-ratio: 4/2.5;

}

.recruitment_last {
  font-size: 2.2rem;
  text-align: center;
  margin-top: 2rem;
}

/* ◇の共通設定 */
.diamond {
  width: 2rem;
  height: 2rem;
  background-color: #ee99e3;
  border: 1px solid gray;
  /* 正方形を45度回転させて◇にする */
  transform: rotate(45deg);
}

/* ◇3つを縦に並べる */
.diamond_group {
  position: absolute;
  display: flex;
  flex-direction: column;
  /* ◇と◇の間の隙間 */
  gap: 20px;
  /* 枠線より上に重ねる */
  z-index: 1;
}

/* 左側の縦線上・上方に配置 */
.left_top {
  top: 15%;
  left: 0;
  /* X軸を-50%戻すことで◇の中心が線の真上に重なる */
  transform: translateX(-50%);
}

/* 右側の縦線上・下方に配置 */
.right_bottom {
  bottom: 15%;
  right: 0;
  transform: translateX(50%);
}

/* 募集画像 */
.invite_wrapper {
  max-width: 120rem;
  margin-inline: auto;
  position: relative;
}

.invite_text {
  font-size: 2.8rem;
  position: absolute;
  top: 13rem;
  left: 40.5rem;
}

.invite_img {
  width: 50%;
  display: block;
  margin-inline: auto;
  margin-bottom: 2rem;
}

@media screen and (max-width:768px) {
  .top_container {
    /* 縦1列のレイアウトに変更 */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 0;
  }

  /* タイトル */
  .top_title {
    grid-row: 1;
    grid-column: 1;
    padding-top: 8rem;
    font-size: 2.5rem;
  }

  /* 画像グループ */
  .top_image_wrapper {
    /* 2行目に移動 */
    grid-row: 2;
    grid-column: 1;
    width: 100%;
    max-width: 32rem;
    margin: 4rem auto 0 auto;
    height: 38rem;
  }

  /* 3つの画像のサイズと位置を調整 */
  .img_top {
    width: 16rem;
    height: 16rem;
    left: 7rem;
  }

  .img_right {
    width: 11rem;
    height: 11rem;
    top: 15rem;
  }

  .img_left {
    width: 13rem;
    height: 13rem;
    bottom: 5rem;
  }

  /* テキスト */
  .top_text_wrapper {
    /* 3行目に移動 */
    grid-row: 3;
    grid-column: 1;
    margin-right: 0;
    margin-bottom: 6rem;
    justify-self: center;
  }

  .top_text {
    width: 100%;
    max-width: 28rem;
    font-size: 1.6rem;
  }

  .sticky_background {
    background-position: 75% bottom;
  }

  /* ボックスを囲むラッパーの調整 */
  .link_box_wrapper {
    padding: 4rem 0;
    /* ボックス同士の縦の隙間 */
    gap: 4rem;
    align-items: center;
  }

  /* ボックスを中央に揃える */
  .link_box_inner {
    height: auto;
    min-height: 25rem;
    padding: 4rem 2rem;
    border-radius: 40px;
    border-width: 3px;
    width: 90%;
    margin: 0 auto;
  }

  /* 外枠のひまわりの装飾(奇数の場合) */
  .box_odd .link_box_inner::before {
    width: 8rem;
    top: -2.5rem;
    left: -3.5rem;
  }

  /* 外枠のひまわりの装飾(偶数の場合) */
  .box_even .link_box_inner::before {
    width: 8rem;
    top: -3rem;
    right: -2.5rem;
  }

  /* marginを0にする */
  .link_box:nth-child(odd),
  .link_box:nth-child(even) {
    margin-left: 0;
    margin-right: 0;
  }

  .link_box:nth-child(even) {
    margin-left: 0;
  }

  /* 箱の中身 */
  .box_title {
    font-size: 2rem;
  }

  .box_text {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  /* 2枚の画像 */
  .box_images {
    gap: 2rem;
  }

  /* タイトル */
  .online_title {
    font-size: 1.4rem;
    margin-left: 1rem;
    margin-bottom: 1rem;
  }

  .online_subtitle {
    font-size: 1.4rem;
    margin-left: 2rem;
  }

  .online_section {
    padding: 1rem 0;
  }

  .online_image_wrapper {
    margin-right: 0.5rem;
  }

  .online_image_item {
    height: 30vw;
  }

  /* 全体の背景 */
  .recruitment_section {
    padding: 4rem 1.5rem 0 1.5rem;
  }

  /* 白いボックスの調整 */
  .recruitment_box {
    /* 角の丸みをスマホサイズに縮小 */
    border-radius: 40px;
    padding: 2rem;
    margin-bottom: 4rem;
  }

  /* 左右並びから縦並びに変更 */
  .box_content {
    flex-direction: column;
    align-items: center;
    /* テキストと写真の間の隙間 */
    gap: 2rem;
  }

  /* 左側（タイトルとテキストの塊） */
  .content_left {
    width: 90%;
    max-width: 30rem;
    text-align: center;
  }

  /* タイトル */
  .recruitment_title {
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    display: inline-block;
    text-align: center;
  }

  /* テキスト */
  .recruitment_text {
    font-size: 1.6rem;
    display: inline-block;
    text-align: center;
  }

  .recruitment_emphasize {
    font-size: 1.8rem;
  }

  /* 右側（画像エリア） */
  .content_right {
    width: 100%;
    margin: 0 auto;
  }

  .recruitment_image {
    display: block;
    width: 100%;
    margin: 0 auto;
  }

  .recruitment_last {
    font-size: 1.6rem;
  }

  .offer_title {
    padding-top: 3rem;
  }

  .offer_list li {
    width: 100%;
  }

  .recruitment_even {
    margin-left: 0;
  }

  /* ◇の飾り */
  .diamond {
    width: 1.5rem;
    height: 1.5rem;
  }

  .diamond_group {
    gap: 10px;
  }

  .left_top {
    top: 10%;
  }

  .right_bottom {
    bottom: 10%;
  }

  /* 募集画像 */
  .invite_text {
    font-size: 1.5rem;
    top: 7.5rem;
    left: 8.5rem;
  }

  .invite_img {
    width: 90%;
  }
}