@charset "UTF-8";

.p-overseas__item-img img {
    width: 100%;
}

/* --- title --- */
.c-section__title-sub-camp_abroad_detail {
  color: #0086d4;
  font-size: .9rem;
}
.c-section__title-camp_abroad_detail {
  text-transform:initial;
  line-height:1.3;
  padding-top: .25rem;
}
.camp_abroad_detail-main__inner {
  text-align: center;
}
.camp_abroad_article-catch {
  font-size:1.325rem;
  line-height:1.7
}
.camp_abroad_article-first-txt {
  text-align:left;
  margin-top: 1.25rem;
  padding-bottom: 3.125rem;
  border-bottom: 0.5px solid #133570;
  line-height: 1.7;
}
@media screen and (min-width: 751px) {
.camp_abroad_article-first-txt {
  text-align:center;
  padding:1rem 9rem 4rem;
  line-height:2;
}
.camp_abroad_detail-main__inner {
  margin-top: -1rem;
}
}

/* Swiper */
:root {
  /* 非アクティブなドットの色（指定のグレー） */
  --swiper-pagination-bullet-inactive-color: #cccccc;
  --swiper-pagination-bullet-inactive-opacity: 1;
  /* アクティブなドットの色（少し濃いグレー） */
  --swiper-pagination-color: #666666;
  /* ドットのサイズ (12px) */
  --swiper-pagination-bullet-size: 1.2rem;
  /* ドット間の余白 (6px) */
  --swiper-pagination-bullet-horizontal-gap: 0.6rem;
}
.p-program_abroad_mv {
    width: 100%;
}
.p-program_abroad_mv__slider {
    width: 100%;
}
.p-program_abroad_mv__slide {
    display: flex;
    justify-content: center;
    align-items: center;
  margin-top:
}
.p-program_abroad_mv__slide img {
    aspect-ratio: 335 / 188;
}
.p-program_abroad_mv__pagination {
    text-align: center;
    margin-top: .475rem;
  margin-bottom:1.25rem;
}
.p-program_abroad_mv__pagination .swiper-pagination-bullet {
  width:.5rem;
  height:.5rem;
}
@media screen and (min-width: 751px) {
  .p-program_abroad_mv {
    max-width: 100rem;
    margin: 0 auto;
  }
  .p-program_abroad_mv__image {
        aspect-ratio: 16 / 9;
  }
  .p-program_abroad_mv__slide {
    margin-top: 0;
  }
.p-program_abroad_mv__slider {
    width: 72%;
}
}

/* --- point --- */
.p-camp-point__items--overseas .p-point__item--overseas:not(:first-child) {
  margin-top:3.25rem;
}
@media screen and (min-width: 751px) {
  .p-camp-point__items--overseas .p-point__item--overseas:not(:first-child) {
    margin-top: 0;
  }
}

/* --- title --- */
.c-section__title-sub-camp_abroad_detail {
  color: #0086d4;
  font-size: .9rem;
}
.c-section__title-camp_abroad_detail {
  text-transform:initial;
  line-height:1.3;
  padding-top: .25rem;
}
.p-program_abroad_mv__pagination .swiper-pagination-bullet {
  width:.5rem;
  height:.5rem;
}

/* --- point --- */
.p-point__item--overseas {
  background-color: #FEF3CD;
}
.p-camp-points__item-title {
  padding: 0 2.5rem;
}
.p-camp-point__items--overseas {
  border-bottom:none;
  padding-bottom: 0;
}
.p-camp-points__item-text {
  line-height: 1.6;
}
@media screen and (min-width: 751px) {
  .p-camp-point__items--overseas {
    padding: 0;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 5.25rem;
    padding-bottom: 3.75rem;
    /* max-width: 50rem; */
    margin-inline: auto;
    }
}

/* --- about --- */
.p-overseas__item-list__title_about-program::
  before {
  content:none;
}
.p-overseas_about__item-list {
  display:flex;
  padding-bottom: 1rem;
  padding-top: .25rem;
  border-bottom: 0.5px solid #133570;
}
.p-overseas_about__item-list .p-overseas__item-list__text {
  display: flex;
  align-items: center;
  width: 18rem;
}
.p-overseas__item-list__title_about-program {
  padding-left: 0;
  width: 7rem;
  display: flex;
  align-items: center;
}
@media (min-width: 751px) {
  .p-overseas_about__item-list {
    padding-bottom: 1.5rem;
    padding-top: .5rem;
  }
  .p-overseas_about__item-list .p-overseas__item-list__text {
    width: 30rem;
    line-height: 1.8;
  }
  .p-overseas__item-list__title_about-program {
    width: 13rem;
  }
  .p-camp_abroad_detail_about__wrapper {
    padding-bottom:5rem;
  }
}

.p-program_abroad_schedule {
  padding: 2rem 1rem;
}
  @media (min-width: 751px) {
  .p-program_abroad_schedule {
    max-width: 80rem; /* 800px */
  margin: 0 auto;
  padding: 4rem 2rem;
  font-size: 1.6rem; /* PCの基本フォントサイズを16px相当に */
  }
}

/* --- 日付セクション --- */
.p-program_abroad_schedule__day {
  margin-bottom: 3.5rem;
  margin-top: 2rem;
}
.p-program_abroad_schedule__header {
  background-color: #CEE4F1;
  padding: 1rem 1.5rem;
  font-size: 1.325rem;
  font-weight: 600;
  color: #003a70;
  text-align: center;
}
  @media (min-width: 751px) {
  .p-program_abroad_schedule__header {
    font-size: 2rem;
    padding: 1.2rem 1.5rem;
  }
}

.p-program_abroad_schedule__content {
  padding: 2rem 1rem 0 1rem;
}
.p-program_abroad_schedule__section {
  margin-bottom: 2rem;
}

.p-program_abroad_schedule__section:
  last-child {
  margin-bottom: 0;
}
.p-program_abroad_schedule__timeline-item {
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 0.8rem;
}
  @media (min-width: 751px) {
.p-program_abroad_schedule__timeline-item {
  margin-left: 5rem;
}
  }

.p-program_abroad_schedule__timeline-item:
  last-child {
  margin-bottom: 0;
}
.p-program_abroad_schedule__timeline-item::
  before {
  content: '';
  display: block;
  width: .625rem;
  height: .625rem;
  /* デザインから抽出した青色 */
  background-color: #1B80D6;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0.6rem;
}
  @media (min-width: 751px) {
  .p-program_abroad_schedule__timeline-item::before {
    top: 0.8rem;
  }
}

.p-program_abroad_schedule__event {
  display: flex;
  align-items: baseline;
  font-weight: bold;
}

.p-program_abroad_schedule__time {
  margin-right: 1rem;
  white-space: nowrap;
  width: 2.75rem;
}
.p-program_abroad_schedule__details {
  margin-top: .5rem;
}
.p-program_abroad_schedule__details-list {
  padding-left: 3.75rem;
}
.p-program_abroad_schedule__details-item {
  display: flex;
  margin-bottom: 0.25rem;
  font-size: .875rem;
}
@media (min-width: 751px) {
  .p-program_abroad_schedule__details-item {
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }
}

.p-program_abroad_schedule__details-label {
  margin-right: 0.2rem;
  flex-shrink: 0;
}
.p-program_abroad_schedule__divider {
  margin: 2rem 0;
  font-size: .875rem;
  letter-spacing: 0.1rem;
}
@media (min-width: 751px) {
  .p-program_abroad_schedule__divider {
    margin-left:5rem;
    font-size:1rem;
  }
}

.p-program_abroad_schedule__note {
  font-size: .9125rem;
  margin: 2.5rem 0 0.5rem -.725rem;
}
  @media (min-width: 751px) {
  .p-program_abroad_schedule__note {
    font-size: 1rem;
    margin: 1rem 4.5rem 1rem;
  }
}

.p-program_abroad_schedule__program-label {
  margin-bottom: 1.5rem;
}
@media (min-width: 751px) {
  .p-program_abroad_schedule__program-label {
    margin-left: 4.5rem;
  }
}
.p-program_abroad_schedule__description--bold {
  font-weight: bold;
  margin-bottom: 1rem;
}
@media (min-width: 751px) {
  .p-program_abroad_schedule__description--bold {
    margin: 0 0 1rem;
  }
  .p-program_abroad_schedule__description {
  padding:0 4.5rem;
  }
  .p-program_abroad_schedule__photo-item {
  padding:0 4.5rem; 
  }
}

.p-program_abroad_schedule__photos {
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.p-program_abroad_schedule__photo-item {
            aspect-ratio: 16 / 11;
            overflow: hidden;
}
.p-program_abroad_schedule__photo-item img {
            width: 100%;            /* 親要素の幅いっぱいに広げる */
            height: 100%;           /* 親要素高さいっぱいに広げる */
            object-fit: cover;
  object-position: center;
}
.p-program_abroad_schedule__footer-notes {
  margin-top: -2rem;
  padding-bottom: 3.0625rem;
  border-bottom: 0.5px solid #133570;
  margin-inline: auto;
  margin: 0 auto;
}
@media (min-width: 751px) {
  .p-program_abroad_schedule__footer-notes {
    padding: 1rem 0 4.5rem;
  }
  .p-program_abroad_schedule__photo-item {
            aspect-ratio: 16 / 9;
  }
}

.p-program_abroad_schedule__footer-note-item {
  font-size: .875rem;
  padding: 0 1.25rem 0 1.75rem;
  text-indent:-.875rem;
  line-height:170%;
}
.p-program_abroad_schedule__footer-note-item::before {
  /* content:"※"; */
}
@media (min-width: 751px) {
  .p-program_abroad_schedule__footer-note-item {
    max-width: 48rem;
    margin: auto;
    padding: 0 0 0 1rem;
  }
}

/* --- title --- */
.c-section__title-sub-camp_abroad_detail {
  color: #0086d4;
  font-size: .9rem;
}
.c-section__title-camp_abroad_detail {
  text-transform:initial;
  line-height:1.3;
  padding-top: .25rem;
}
.p-program_abroad_mv__pagination .swiper-pagination-bullet {
  width:.5rem;
  height:.5rem;
}
.p-program_abroad_mv__image {
  aspect-ratio: 16 / 9;
}
@media (min-width: 751px) {
  .p-program_abroad_mv__pagination {
    margin-top: .5rem;
    margin-bottom: 3rem;
  }
}

.p-camp-points__item-text {
  line-height: 1.6;
}
.p-overseas__item-list__title_about-program::
  before {
  content:none;
}

.p-program_abroad_schedule {
  padding: 2rem 1rem;
}
  @media (min-width: 751px) {
  .p-program_abroad_schedule {
    max-width: 80rem; /* 800px */
  margin: 0 auto;
  padding: 4rem 2rem;
  font-size: 1.6rem; /* PCの基本フォントサイズを16px相当に */
  }
}
  @media (min-width: 751px) {
  .p-program_abroad_schedule__header {
    font-size: 2rem;
    padding: 1.2rem 1.5rem;
  }
}
.p-program_abroad_schedule__section:
  last-child {
  margin-bottom: 0;
}
.p-program_abroad_schedule__timeline-item:
  last-child {
  margin-bottom: 0;
}
.p-program_abroad_schedule__timeline-item::
  before {
  content: '';
  display: block;
  width: .625rem;
  height: .625rem;
  background-color: #1B80D6;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0.6rem;
}
  @media (min-width: 751px) {
  .p-program_abroad_schedule__timeline-item::before {
    top: 0.8rem; /* PCのフォントサイズに合わせて調整 */
  }
}
.p-program_abroad_schedule__photos {
  /* gap: 1.5rem; */
  /* margin-top: 2.5rem; */
}
.p-camp-points__item-text {
  line-height: 1.6;
}

/* --- about --- */
.p-overseas__item-list__title_about-program::before {
  content:none;
}
.p-program_abroad_schedule {
  padding: 2rem 1rem;
}
@media (min-width: 751px) {
  .p-program_abroad_schedule {
    max-width: 80rem; /* 800px */
    margin: 0 auto;
    padding: 4rem 2rem;
    font-size: 1.6rem; /* PCの基本フォントサイズを16px相当に */
  }
  .p-program_abroad_schedule__header {
    padding: 1.2rem 1.5rem;
    max-width: 50rem;
    margin-inline: auto;
    margin-top: 3.75rem;
    font-size: 1.4rem;
  }
  .p-program_abroad_schedule__content {
    max-width: 50rem;
    margin-inline: auto;
  }
}

.p-program_abroad_schedule__timeline-item:last-child {
  margin-bottom: 0;
}
.p-program_abroad_schedule__timeline-item::before {
  content: '';
  display: block;
  width: .625rem;
  height: .625rem;
  background-color: #1B80D6;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0.6rem;
}

@media (min-width: 751px) {
  .p-program_abroad_schedule__timeline-item::before {
    top: 0.5rem;
  }
}
.p-program_abroad_schedule__photos {
  /* gap: 1.5rem; */
  /* margin-top: 2.5rem; */
}


        /* Table styles (Mobile First) */
        .schedule-table {
            border: 0.06125rem solid #b3b3b3;
            background-color: #fff;
            border-collapse: collapse;
            width: 100%;
            box-sizing: border-box;
            line-height: 1.7;
            margin-top: .5rem;
        }

        .schedule-table th,
        .schedule-table td {
            padding: 1.2rem 1rem;
            text-align: center;
            /* font-size: 1.6rem; */ /* 16px */
            border-bottom: 0.06125rem solid #b3b3b3;
        }

        .schedule-table th {
            font-weight: bold;
            text-align: center;
            background-color: #f8f8f8;
            /* width: 20%; */
        }

        .schedule-table .year-cell {
            background-color: #fafafa;
            font-weight: bold;
            width: 35%;
            vertical-align: top; /* Vertically center the year */
        }
        
        .schedule-table .date-cell {
            text-align: left;
            padding-left: 2rem;
        }

        .schedule-table tr:last-child td {
            border-bottom: none;
        }
        
        /* Desktop styles (Breakpoint: 751px) */
        @media screen and (min-width: 751px) {
            .schedule-table {
            }
            .schedule-table th,
            .schedule-table td {
                padding: 1rem;
            }

            .schedule-table .year-cell {
                width: 25%;
                vertical-align: top; /* Align year to the top for better readability with rowspan */
                padding-top: 1.5rem;
            }
            
            .schedule-table .date-cell {
                text-align: center;
                padding-left: 1.5rem;
            }
        }


      /* --------------------------------------------------
       ここからカレンダー専用のCSSです（2ヶ月表示対応版）
       -------------------------------------------------- */
      .calendar-wrapper {
        width: 100%;
        /* 2つ並べるため幅を広げるが、親要素に収まるようにする */
        max-width: 100%; 
        margin: 0 auto;
        font-family: sans-serif;
      }

      /* ナビゲーションエリア */
      .calendar-nav-area {
        display: flex;
        justify-content: flex-end; /* 右寄せ、または space-between */
        margin-bottom: 10px;
        gap: 10px;
      }

      .calendar-nav-btn {
        background-color: #0086d4;
        border: none;
        color: #fff;
        cursor: pointer;
        padding: 8px 15px;
        border-radius: 4px;
        font-size: 1rem;
        transition: background 0.3s;
      }

      .calendar-nav-btn:hover {
        background-color: #004a8b;
      }

      /* 2つのカレンダーを横並びにするコンテナ */
      .calendar-container {
        display: flex;
        flex-wrap: wrap; /* 画面が狭いときは折り返す */
        gap: 20px;
        justify-content: space-between;
      }

      /* 個々のカレンダーブロック */
      .single-calendar {
        flex: 1;
        min-width: 10rem; /* 最小幅を設定して崩れ防止 */
        border: 1px solid #a5a8aa;
        /* border-radius: 5px; */
        overflow: hidden;
      }

      .calendar-header {
        background-color: #cae6f5; /* ヘッダー背景色 */
        color: #015cab;
        padding: 1rem;
        text-align: center;
      }

      .calendar-title {
        font-size: 1rem;
        font-weight: bold;
        margin: 0;
      }

      .calendar-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        background-color: #fff;
        /* border-color: #003674; */
      }

      .calendar-table th {
        background-color: #f0f0f0;
        color: #333;
        font-size: 0.8rem;
        padding: 8px 0;
        font-weight: normal;
        border-top: 1px solid #a5a8aa;
      }
      /* 日曜日は赤く */
      .calendar-table th:first-child {
        color: #e60012;
      }
      /* 土曜日は青く */
      .calendar-table th:last-child {
        color: #005cab;
      }

      .calendar-table td {
        padding: .7125rem;
        text-align: center;
        font-size: 0.9rem;
        border-top: 1px solid #a5a8aa;
        position: relative;
        color: #bbb; /* イベントがない日は薄くする */
      }
      
      /* 当月の日付 */
      .calendar-table td.current-month {
        color: #333; 
      }

      /* イベントがある日 */
      .calendar-table td.has-event {
        font-weight: bold;
        cursor: default;
      }
      
      /* イベントマーク（日付の背景円） */
      .calendar-table td.has-event::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2.75rem;
        height: 2.75rem;
        background-color: rgb(236 187 49); /* 黄色系の背景 */
        border: 2px solid #edbb31;
        z-index: 0;
      }
      
      /* 日付の数字を前面に */
      .calendar-table td span {
        position: relative;
        z-index: 1;
      }
      
      /* イベントがある日の文字色 */
      .calendar-table td.has-event span {
        color: #fff;
      }
      
      /* 今日の日付スタイル */
      .calendar-table td.today span {
         border-bottom: 1px solid #333;
      }

.p-camp-flow__item-tag {
    width: auto;
  padding-right:1rem;
  padding-left:1rem;
}
.p-camp-flow__button {
    gap: 1rem;
    display: flex;
    flex-wrap: wrap;
}
@media screen and (min-width: 751px) {
    .p-camp-flow__text {
        padding: 0 10rem;
    }
}