/*************************/
/*** section(day,morning-day,evening-night) ***/
/*************************/

/**************************/
/*** morning-dayとEvening-Nightで 使用 ***/
/**************************/
.day-box {
  padding: 100px 0;
}

.top-left {
  position: absolute;
  left: 10px;
  top: -180px;
  white-space: nowrap; /* ←これが超重要！ */
}

.top-left2 {
  position: absolute;
  left: 10px;
  top: -180px;
  white-space: nowrap; /* ←これが超重要！ */
}

.bottom-right {
  position: absolute;
  right: 20px;
  bottom: -180px;
  white-space: nowrap; /* ←これが超重要！ */
}

.bottom-right2 {
  position: absolute;
  right: 20px;
  bottom: -180px;
  white-space: nowrap; /* ←これが超重要！ */
}

.imgs-title {
  margin-top: 70px;
  letter-spacing: 0.2rem;
  padding: 0 5px;
}

.img-hr {
  margin: 30px auto 100px;
  width: 80%;
  max-width: 300px;
}

.img-hr img {
  width: 100%;
}

/* 画像ボックス */
.index-box {
  position: relative; /* または absolute, fixed, sticky */
  z-index: 10;
}

.imgs-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PC時：2列 */
  gap: 15px; /* 要素間のスペース */
  padding: 20px;
  width: 80%;
  margin: 0 auto;
  position: relative;
}

/* 子要素の画像調整 */
.imgs-box div img {
  width: 100%;
  height: auto;
  display: block;
}

.imgs-box div p {
  position: absolute;
  padding: 5px 10px;
}

/* 親要素（.recommended-course）のスタイル */
.recommended-course {
  border: #666 1px solid;
  margin: 50px auto;
  padding: 10px 20px;
  width: 400px; /* 親要素の幅を固定 */
  letter-spacing: 0.3rem;
  font-weight: 300;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  cursor: pointer; /* ポインターを表示 */
}

/* aタグのスタイル */
.recommended-course a {
  display: block; /* 親要素のサイズに合わせる */
  width: 100%; /* 親要素と同じ幅を占める */
  text-decoration: none; /* 下線を消す */
  text-align: center; /* 中央寄せ */
}

/* aタグ内のコンテンツを横並びに */
.recommended-course .text-center {
  display: flex;
  flex-direction: row; /* 横並び */
  align-items: center; /* 垂直方向に中央揃え */
  justify-content: center;
}

/* 画像のスタイル */
.recommended-course img {
  width: 50px; /* 画像のサイズ調整 */
  height: auto; /* アスペクト比を保ったまま調整 */
  margin-left: 10px; /* 文字と画像の間隔調整 */
}

/* <div> や <p> タグに影響を与えないように調整 */
.recommended-course p,
.recommended-course div {
  margin: 0; /* 余分なマージンを削除 */
  padding: 0; /* 余分なパディングを削除 */
}

/****************************
/*** abusorute
/*****************************/
.sky {
  position: absolute;
  top: -150%;
  left: 250px;
  width: 200px;
}

.sky img {
  width: 100%;
}

.girl2 {
  position: absolute;
  top: -25%;
  right: 15%;
  width: 200px;
  z-index: -10;
}

.girlb {
  position: absolute;
  top: -30%;
  right: 15%;
  width: 200px;
  z-index: -10;
}

.girl2 img,
.girlb img {
  width: 100%;
}

.home-seagull {
  position: absolute;
  top: -50%;
  right: 10%;
  width: 150px;
}

.home-seagull img {
  width: 100%;
}

@media screen and (max-width: 1280px) {
  .img-title p {
    font-size: var(--font-xs);
  }
}

@media screen and (max-width: 1024px) {
  .sky {
    top: -150%;
    left: 150px;
    width: 180px;
  }

  .girl2 {
    top: -25%;
    right: 15%;
    width: 140px;
  }

  .girlb {
    top: -35%;
    right: 15%;
    width: 140px;
  }

  .img-title p {
    font-size: 0.75rem;
  }

  .br-sp {
    display: block;
  }
}

@media screen and (max-width: 880px) {
  .sky {
    top: -150%;
    left: 100px;
    width: 150px;
  }

  .girl2 {
    top: -30%;
    right: 10%;
    width: 140px;
  }

  .girlb {
    top: -30%;
    right: 15%;
    width: 140px;
  }

  .imgs-title {
    margin-top: 50px;
    letter-spacing: 0.15rem;
    padding: 0 5px;
  }

  .home-seagull {
    display: none;
  }
}

@media (max-width: 650px) {
  .girlb {
    top: -35%;
    right: 15%;
  }
}

/* スマホ時：1列表示 */
@media (max-width: 600px) {
  .container {
    padding: auto 5px;
    width: 100%;
  }

  h1 {
    font-size: var(--font-xl) !important;
  }

  h2 {
    margin-top: 0px;
    font-size: var(--font-md) !important;
  }

  .imgs-box {
    width: 100%;
  }

  .sky {
    top: -100%;
    left: 80px;
    width: 100px;
  }

  .girl2 {
    top: -25%;
    right: 15%;
    width: 120px;
  }

  .girlb {
    top: -35%;
    right: 15%;
    width: 120px;
  }

  .top-left {
    position: absolute;
    left: 60px;
    top: -190px;
    font-size: var(--font-ll);
  }

  .top-left2 {
    position: absolute;
    left: 60px;
    top: -183px;
    font-size: var(--font-ll);
  }

  .bottom-right {
    position: absolute;
    right: 65px;
    bottom: -190px;
    font-size: var(--font-ll);
  }

  .bottom-right2 {
    position: absolute;
    right: 65px;
    bottom: -125px;
    font-size: var(--font-ll);
  }

  .recommended-course {
    margin: 50px auto 0 auto;
    padding: 10px 10px;
    letter-spacing: 0.2rem;
    font-weight: 300;
    gap: 5px;
    width: 300px;
  }

  .imgs-box {
    gap: 10px;
    padding: 10px;
  }
}

@media (max-width: 500px) {
  h1 {
    letter-spacing: 0.1rem;
    font-size: var(--font-ll) !important;
  }
  .imgs-title {
    margin-top: 0px;
    letter-spacing: 0.05rem;
    padding: 0 5px;
  }

  .img-hr {
    margin: 20px auto 100px;
    width: 80%;
    max-width: 200px;
  }

  .sky {
    top: -85%;
    left: 10%;
    width: 100px;
  }

  .top-left {
    position: absolute;
    left: 60px;
    top: -190px;
    font-size: var(--font-ll);
  }

  .top-left2 {
    position: absolute;
    left: 60px;
    top: -182px;
    font-size: var(--font-ll);
  }

  .bottom-right {
    position: absolute;
    right: 70px;
    bottom: -191px;
    font-size: var(--font-ll);
  }

  .bottom-right2 {
    position: absolute;
    right: 70px;
    bottom: -127px;
    font-size: var(--font-ll);
  }

  .arrow {
    width: 30px;
  }
  .arrow img {
    width: 100%;
  }

  .days8-14-02-s {
    top: -100px;
    right: 10px;
    width: 70px;
  }

  .footer_container {
    padding: 20px 5px 10px 5px;
  }

  .footer_container div ul {
    gap: 10px;
  }

  .recommended-course {
    margin: 50px auto 0 auto;
    padding: 10px 10px;
    letter-spacing: 0.1rem;
    font-weight: 300;
    gap: 0px;
    width: 250px;
    font-size: 0.75rem;
  }

  .course-img {
    width: 35px;
  }

  .course-img img {
    width: 100%;
    margin-left: 5px;
  }

  .harbor-logo {
    width: 80px !important;
    height: auto;
  }

  footer_container div img {
    width: 60% !important;
    gap: 0;
  }

  .footer_container div ul li {
    font-size: var(--font-sm);
  }
}

@media (max-width: 430px) {
  .girlb {
    top: -42%;
    right: 15%;
    width: 120px;
  }
}