@charset "utf-8";
/* ====================================================
ヘッダー（写真なし・下両角を丸める）
==================================================== */
.cmn-header {
  border-radius: 0 0 100px 100px;
}

/* ====================================================
イントロ 写真コラージュの配置（共通部分は program.css）
==================================================== */
@media screen and (min-width: 768px) {
  .contents-area.intro-area .intro-gallery {
    width: 53.77193%; /* 613 / 1140 */
    margin: -259px -2.631579% 0 0; /* 右 30 / 1140 */

    aspect-ratio: 613 / 620;
  }
  .contents-area.intro-area .intro-gallery li:nth-child(1) {
    top: 0;
    left: 0;
    width: 69.331158%; /* 425 / 613 */
    height: 73.709677%; /* 457 / 620 */
    border-radius: 22px;
  }
  .contents-area.intro-area .intro-gallery li:nth-child(2) {
    top: 23.225806%; /* 144 / 620 */
    left: 63.947798%; /* 392 / 613 */
    width: 36.052202%; /* 221 / 613 */
    height: 35.16129%; /* 218 / 620 */
  }
  .contents-area.intro-area .intro-gallery li:nth-child(3) {
    top: 68.387097%; /* 424 / 620 */
    left: 8.809135%; /* 54 / 613 */
    width: 31.973899%; /* 196 / 613 */
    height: 31.612903%; /* 196 / 620 */
  }
  .contents-area.intro-area .intro-gallery li:nth-child(4) {
    top: 64.193548%; /* 398 / 620 */
    left: 50.570962%; /* 310 / 613 */
    width: 45.02447%; /* 276 / 613 */
    height: 30.645161%; /* 190 / 620 */
  }
  .contents-area.intro-area .intro-gallery li:not(:first-child) {
    border-radius: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .contents-area.intro-area .intro-gallery {
    margin-top: -220px;
  }
}

/* ====================================================
おすすめポイント .point-area
==================================================== */
.contents-area.point-area {
  margin-top: 109px;
  padding: 57px 0 71px;
  background-color: #fbc500;
}
.contents-area.point-area .point-head {
  text-align: center;
}
/* 吹き出しラベル */
.contents-area.point-area .point-label {
  position: relative;
  display: inline-block;
  padding: 0 26px;
  border-radius: 23px;
  background-color: #fff;
  font-size: var(--fs18);
  font-weight: 700;
  line-height: 45px;
  letter-spacing: 0.1em;
  color: #f08300;
}
.contents-area.point-area .point-label::after {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  width: 16px;
  height: 8px;
  background-color: #fff;
  content: "";
  transform: translateX(-50%);

  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* 見出し（白フチ） */
.contents-area.point-area .point-ttl {
  margin-top: 16px;
  font-size: var(--fs40);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: #e85820;

  -webkit-text-stroke: 6px #fff;
  paint-order: stroke fill;
}

/* カード */
.contents-area.point-area .point-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 24px -20px 0; /* 1200 + 40 で 1239 幅に合わせる */

  gap: 26px;
}
.contents-area.point-area .point-box {
  position: relative;
  z-index: 0;
  align-self: start;
  margin-top: 9px;
  padding: 0 13.5% 65px; /* 55 / 396 */
}
.contents-area.point-area .point-box:nth-child(2) {
  margin-top: 61px;
}
.contents-area.point-area .point-box:nth-child(3) {
  margin-top: 0;
}
/* 白い丸型の背景（写真の下から始める） */
.contents-area.point-area .point-box::before {
  position: absolute;
  top: 55px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 140px;
  background-color: #fff;
  content: "";
}
.contents-area.point-area .point-img {
  position: relative;
  width: 89.948454%; /* 248 / 276 */
  margin: 0 auto;
}
.contents-area.point-area .point-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 32px;

  object-fit: cover;
  aspect-ratio: 248 / 176;
}
/* 番号 */
.contents-area.point-area .point-num {
  position: absolute;
  top: -34px;
  left: 50%;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  transform: translateX(-50%);

  text-shadow: 3px 3px 0 #f08300;
}
.contents-area.point-area .point-box-ttl {
  margin-top: 30px;
  font-size: var(--fs26);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  /*letter-spacing: 0.08em;*/
  color: #f08300;
}
.contents-area.point-area .point-txt {
  margin-top: 18px;
  font-size: var(--fs15);
  line-height: 1.85;
  letter-spacing: 0.08em;
  color: #262626;
}

/* ====================================================
イベント紹介 .activity-area
共通：ラベル・見出し・本文・写真・キャプションの見た目
==================================================== */
.contents-area.activity-area {
  padding: 26px 0 0;
}
.contents-area.activity-area .activity-box {
  position: relative;
}
.contents-area.activity-area .activity-box + .activity-box {
  margin-top: 125px;
}
.contents-area.activity-area .activity-label {
  position: relative;
  display: inline-block;
  padding: 0 24px;
  border-radius: 20px;
  font-size: var(--fs18);
  font-weight: 700;
  line-height: 54px;
  letter-spacing: 0.1em;
  color: #fff;

  filter: drop-shadow(4px 4px 0 #fff);
}
.contents-area.activity-area .activity-label::after {
  position: absolute;
  top: calc(100% - 1px);
  left: 80px;
  width: 22px;
  height: 11px;
  background-color: inherit;
  content: "";

  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.contents-area.activity-area .activity-ttl {
  margin-top: 22px;
  padding-left: 5px;
  font-size: var(--fs40);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: #262626;
}
.contents-area.activity-area .activity-txt {
  max-width: 410px;
  margin-top: 30px;
  padding-left: 5px;
  font-size: var(--fs15);
  line-height: 1.85;
  letter-spacing: 0.08em;
  color: #262626;
}
.contents-area.activity-area .activity-photo li {
  position: relative;
}
.contents-area.activity-area .activity-img {
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 40px;
}
.contents-area.activity-area .activity-img img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* カラー分岐 */
.contents-area.activity-area .activity-box.stay .activity-label {
  background-color: #5ec750;
}
.contents-area.activity-area .activity-box.daytrip .activity-label {
  background-color: #3abde8;
}
.contents-area.activity-area .activity-box.special .activity-label {
  background-color: #fc89b3;
}

/* 注釈 */
.contents-area.activity-area .activity-note {
  margin-top: 100px;
  padding-left: 30px;
  font-size: var(--fs13);
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #6b6b6b;
}

/* ====================================================
イベント紹介 PC（1025px〜）：グレーの箱＋写真コラージュ
幅 1200（.max-inner の中身）× 各ボックス高さ 基準の % で絶対配置
==================================================== */
@media screen and (min-width: 1025px) {
  .contents-area.activity-area .activity-box.stay {
    aspect-ratio: 1200 / 940;
  }
  .contents-area.activity-area .activity-box.daytrip {
    aspect-ratio: 1200 / 833;
  }
  .contents-area.activity-area .activity-box.special {
    aspect-ratio: 1200 / 737;
  }
  /* グレーの箱 */
  .contents-area.activity-area .activity-box::before {
    position: absolute;
    left: 0;
    width: 86.666667%; /* 1040 */
    border-radius: 60px;
    background-color: #f3f2f0;
    content: "";
  }
  .contents-area.activity-area .activity-box.stay::before {
    top: 13.829787%; /* 130 / 940 */
    height: 69.361702%; /* 652 / 940 */
  }
  .contents-area.activity-area .activity-box.daytrip::before {
    top: 9.963986%; /* 83 / 833 */
    height: 72.509004%; /* 604 / 833 */
  }
  .contents-area.activity-area .activity-box.special::before {
    top: 5.970149%; /* 44 / 737 */
    height: 85.753053%; /* 632 / 737 */
  }
  /* テキスト */
  .contents-area.activity-area .activity-body {
    position: absolute;
    left: 6.25%; /* 75 */
    z-index: 1;
    width: 40%;
  }
  .contents-area.activity-area .activity-box.stay .activity-body {
    top: 9.361702%; /* 88 / 940 */
  }
  .contents-area.activity-area .activity-box.daytrip .activity-body {
    top: 4.921969%; /* 41 / 833 */
  }
  .contents-area.activity-area .activity-box.special .activity-body {
    top: 0.27137%; /* 2 / 737 */
    width: 48%; /* ラベルが長いため */
  }
  /* 写真 */
  .contents-area.activity-area .activity-photo li {
    position: absolute;
  }
  /* 宿泊・野外活動 1200 × 940 */
  .contents-area.activity-area .activity-box.stay li:nth-child(1) {
    top: 0;
    left: 48.916667%; /* 587 */
    width: 44.583333%; /* 535 */
    height: 45%; /* 423 */
  }
  .contents-area.activity-area .activity-box.stay li:nth-child(2) {
    top: 52.234043%; /* 491 */
    left: 13.666667%; /* 164 */
    width: 32%; /* 384 */
    height: 39.255319%; /* 369 */
  }
  .contents-area.activity-area .activity-box.stay li:nth-child(3) {
    top: 47.978723%; /* 451 */
    left: 60.25%; /* 723 */
    width: 32.25%; /* 387 */
    height: 28.191489%; /* 265 */
  }
  .contents-area.activity-area .activity-box.stay li:nth-child(4) {
    top: 79.468085%; /* 747 */
    left: 50.666667%; /* 608 */
    width: 22.5%; /* 270 */
    height: 20.212766%; /* 190 */
  }
  .contents-area.activity-area .activity-box.stay li:nth-child(5) {
    top: 79.574468%; /* 748 */
    left: 75.333333%; /* 904 */
    width: 22.833333%; /* 274 */
    height: 20.106383%; /* 189 */
  }
  /* 日帰りイベント 1200 × 833 */
  .contents-area.activity-area .activity-box.daytrip li:nth-child(1) {
    top: 0;
    left: 48.833333%; /* 586 */
    width: 44.583333%; /* 535 */
    height: 39.37575%; /* 328 */
  }
  .contents-area.activity-area .activity-box.daytrip li:nth-child(2) {
    top: 43.097239%; /* 359 */
    left: 13.75%; /* 165 */
    width: 34.416667%; /* 413 */
    height: 33.613445%; /* 280 */
  }
  .contents-area.activity-area .activity-box.daytrip li:nth-child(3) {
    top: 42.016807%; /* 350 */
    left: 60.75%; /* 729 */
    width: 32.166667%; /* 386 */
    height: 32.172869%; /* 268 */
  }
  .contents-area.activity-area .activity-box.daytrip li:nth-child(4) {
    top: 76.590636%; /* 638 */
    left: 51.5%; /* 618 */
    width: 15.416667%; /* 185 */
    height: 23.289316%; /* 194 */
  }
  .contents-area.activity-area .activity-box.daytrip li:nth-child(5) {
    top: 76.590636%; /* 638 */
    left: 68.416667%; /* 821 */
    width: 23.583333%; /* 283 */
    height: 23.409364%; /* 195 */
  }
  /* 特別講座やお仕事体験 1200 × 737 */
  .contents-area.activity-area .activity-box.special li:nth-child(1) {
    top: 15.196744%; /* 112 */
    left: 49.833333%; /* 598 */
    width: 43.5%; /* 522 */
    height: 42.469471%; /* 313 */
  }
  .contents-area.activity-area .activity-box.special li:nth-child(2) {
    top: 48.982361%; /* 361 */
    left: 13.75%; /* 165 */
    width: 29.75%; /* 357 */
    height: 32.29308%; /* 238 */
  }
  .contents-area.activity-area .activity-box.special li:nth-child(3) {
    top: 71.234735%; /* 525 */
    left: 51.5%; /* 618 */
    width: 20.583333%; /* 247 */
    height: 28.765265%; /* 212 */
  }
  .contents-area.activity-area .activity-box.special li:nth-child(4) {
    top: 61.058345%; /* 450 */
    left: 74%; /* 888 */
    width: 26.083333%; /* 313 */
    height: 30.529172%; /* 225 */
  }
}

/* ====================================================
TAB（デザインなし）
==================================================== */
@media screen and (max-width: 1024px) {
  .cmn-header {
    border-radius: 0 0 80px 80px;
  }

  .contents-area.point-area {
    margin-top: 90px;
    padding: 50px 0 60px;
  }
  .contents-area.point-area .point-list {
    margin: 20px 0 0;

    gap: 16px;
  }
  .contents-area.point-area .point-box {
    padding: 0 9% 48px;
  }
  .contents-area.point-area .point-box::before {
    top: 40px;
    border-radius: 90px;
  }
  .contents-area.point-area .point-box:nth-child(2) {
    margin-top: 40px;
  }
  .contents-area.point-area .point-num {
    top: -26px;
    font-size: 56px;
  }
  .contents-area.point-area .point-img img {
    border-radius: 24px;
  }
  .contents-area.point-area .point-box-ttl {
    margin-top: 20px;
    letter-spacing: 0.04em;
  }
  .contents-area.point-area .point-txt {
    margin-top: 14px;
    letter-spacing: 0.04em;
  }
}

/* TAB のみ：イベント紹介は写真を2列に並べる */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .contents-area.activity-area .activity-box {
    padding: 56px 5% 40px;
    border-radius: 40px;
    background-color: #f3f2f0;
  }
  .contents-area.activity-area .activity-box + .activity-box {
    margin-top: 70px;
  }
  .contents-area.activity-area .activity-body {
    margin-top: -83px; /* ラベルを箱の上辺にかける */
  }
  .contents-area.activity-area .activity-txt {
    max-width: none;
  }
  .contents-area.activity-area .activity-photo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 30px;

    gap: 24px 20px;
  }
  .contents-area.activity-area .activity-photo li:first-child {
    grid-column: 1 / 3;
  }
  .contents-area.activity-area .activity-img {
    border-radius: 24px;

    aspect-ratio: 3 / 2;
  }
  .contents-area.activity-area .activity-note {
    margin-top: 60px;
    padding-left: 0;
  }
}

/* ====================================================
SP（375 基準）
==================================================== */
@media screen and (max-width: 767px) {
  /* ヘッダー */
  .cmn-header {
    border-radius: 0 0 70px 70px;
  }
  .cmn-header h1 {
    font-size: var(--fs26);
  }
  .cmn-header h1 span {
    padding-left: 10px;
    font-size: var(--fs13);
  }

  /* イントロ：写真4枚（295 × 273 基準） */
  .contents-area.intro-area {
    padding-top: 0;
  }
  .contents-area.intro-area .intro-gallery {
    width: 89.665653%; /* 295 / 329 */
    margin: -79px auto 0;

    aspect-ratio: 295 / 273;
  }
  .contents-area.intro-area .intro-gallery li {
    border-radius: 18px;
  }
  .contents-area.intro-area .intro-gallery li:nth-child(1) {
    top: 0;
    left: 0;
    width: 65.084746%; /* 192 */
    height: 50.915751%; /* 139 */
  }
  .contents-area.intro-area .intro-gallery li:nth-child(2) {
    display: block;
    top: 17.948718%; /* 49 */
    left: 59.661017%; /* 176 */
    width: 40.338983%; /* 119 */
    height: 42.857143%; /* 117 */
  }
  .contents-area.intro-area .intro-gallery li:nth-child(3) {
    top: 45.421245%; /* 124 */
    left: 5.762712%; /* 17 */
    width: 31.864407%; /* 94 */
    height: 34.065934%; /* 93 */
  }
  .contents-area.intro-area .intro-gallery li:nth-child(4) {
    display: block;
    top: 67.399267%; /* 184 */
    left: 46.440678%; /* 137 */
    width: 45.084746%; /* 133 */
    height: 32.600733%; /* 89 */
  }
  .contents-area.intro-area .intro-body {
    margin-top: 10px;
  }

  /* おすすめポイント */
  .contents-area.point-area {
    margin-top: 50px;
    padding: 30px 0 78px;
  }
  .contents-area.point-area .point-label {
    padding: 0 39px;
    border-radius: 23px;
    font-size: var(--fs16);
    line-height: 46px;
  }
  .contents-area.point-area .point-ttl {
    margin-top: 12px;
    font-size: var(--fs36);
    letter-spacing: 0.08em;

    -webkit-text-stroke: 5px #fff;
  }
  .contents-area.point-area .point-list {
    grid-template-columns: 1fr;
    margin-top: 51px;

    gap: 61px;
  }
  .contents-area.point-area .point-box,
  .contents-area.point-area .point-box:nth-child(2),
  .contents-area.point-area .point-box:nth-child(3) {
    margin-top: 0;
    padding: 0 14.5% 60px; /* 48 / 331 */
  }
  .contents-area.point-area .point-box::before {
    top: 53px;
    border-radius: 80px;
  }
  .contents-area.point-area .point-img {
    width: 87.234043%; /* 205 / 235 */
  }
  .contents-area.point-area .point-img img {
    border-radius: 22px;
  }
  .contents-area.point-area .point-num {
    top: -25px;
    font-size: 56px;
  }
  .contents-area.point-area .point-box-ttl {
    margin-top: 18px;
    font-size: var(--fs20);
    letter-spacing: 0.1em;
  }
  .contents-area.point-area .point-txt {
    margin-top: 16px;
    font-size: var(--fs15);
    line-height: 1.87;
    letter-spacing: 0.1em;
  }

  /* イベント紹介：テキスト＋写真コラージュ（写真は 329 × 各高さ 基準） */
  .contents-area.activity-area {
    padding-top: 39px;
    overflow-x: clip; /* 右にはみ出す写真で横スクロールさせない */
  }
  .contents-area.activity-area .activity-box + .activity-box {
    margin-top: 46px;
  }
  .contents-area.activity-area .activity-body {
    position: relative;
    z-index: 0;
    padding: 0 20px;
  }
  /* グレーの箱（テキスト部分）。写真部分は .activity-photo::before で続ける */
  .contents-area.activity-area .activity-body::before {
    position: absolute;
    top: 16px;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: -1;
    border-radius: 30px 30px 0 0;
    background-color: #f3f2f0;
    content: "";
  }
  .contents-area.activity-area .activity-box.special .activity-body::before {
    top: 27px;
  }
  .contents-area.activity-area .activity-label {
    padding: 12px 18px;
    border-radius: 20px;
    font-size: var(--fs13);
    line-height: 1.6;
    letter-spacing: 0.08em;
  }
  .contents-area.activity-area .activity-box.special .activity-label {
    padding: 9px 18px;
    line-height: 1.6;
  }
  .contents-area.activity-area .activity-label::after {
    left: 56px;
    width: 18px;
    height: 9px;
  }
  .contents-area.activity-area .activity-ttl {
    margin-top: 22px;
    padding-left: 0;
    font-size: var(--fs28);
    line-height: 1.5;
    letter-spacing: 0.1em;
  }
  .contents-area.activity-area .activity-txt {
    max-width: none;
    margin-top: 10px;
    padding-left: 0;
    font-size: var(--fs14);
    line-height: 1.65;
    letter-spacing: 0.08em;
  }
  .contents-area.activity-area .activity-photo {
    position: relative;
    z-index: 0;
    margin-top: 26px;
  }
  /* グレーの箱の続き（テキストとの間 26px から、写真エリア内の指定位置まで） */
  .contents-area.activity-area .activity-photo::before {
    position: absolute;
    top: -26px;
    right: 0;
    left: 0;
    z-index: -1;
    border-radius: 0 0 30px 30px;
    background-color: #f3f2f0;
    content: "";
  }
  .contents-area.activity-area .activity-photo li {
    position: absolute;
  }
  .contents-area.activity-area .activity-img {
    border-radius: 20px;
  }

  /* 宿泊・野外活動 329 × 454 */
  .contents-area.activity-area .activity-box.stay .activity-photo {
    aspect-ratio: 329 / 454;
  }
  .contents-area.activity-area .activity-box.stay .activity-photo::before {
    height: calc(26px + 90.088106%); /* 409 / 454 */
  }
  .contents-area.activity-area .activity-box.stay li:nth-child(1) {
    top: 0;
    left: 26.139818%;
    width: 78.419453%;
    height: 44.493392%;
  }
  .contents-area.activity-area .activity-box.stay li:nth-child(2) {
    top: 48.898678%;
    left: 4.255319%;
    width: 51.975684%;
    height: 36.563877%;
  }
  .contents-area.activity-area .activity-box.stay li:nth-child(3) {
    top: 52.863436%;
    left: 51.367781%;
    width: 43.465046%;
    height: 21.585903%;
  }
  .contents-area.activity-area .activity-box.stay li:nth-child(4) {
    top: 80.837004%;
    left: 21.580547%;
    width: 37.68997%;
    height: 18.942731%;
  }
  .contents-area.activity-area .activity-box.stay li:nth-child(5) {
    top: 80.837004%;
    left: 62.613982%;
    width: 38.297872%;
    height: 19.162996%;
  }

  /* 日帰りイベント 329 × 355 */
  .contents-area.activity-area .activity-box.daytrip .activity-photo {
    aspect-ratio: 329 / 355;
  }
  .contents-area.activity-area .activity-box.daytrip .activity-photo::before {
    height: calc(26px + 93.239437%); /* 331 / 355 */
  }
  .contents-area.activity-area .activity-box.daytrip li:nth-child(1) {
    top: 0;
    left: 26.74772%;
    width: 76.595745%;
    height: 43.098592%;
  }
  .contents-area.activity-area .activity-box.daytrip li:nth-child(2) {
    top: 31.549296%;
    left: -0.911854%;
    width: 41.033435%;
    height: 25.633803%;
  }
  .contents-area.activity-area .activity-box.daytrip li:nth-child(3) {
    top: 51.267606%;
    left: 45.896657%;
    width: 50.759878%;
    height: 32.394366%;
  }
  .contents-area.activity-area .activity-box.daytrip li:nth-child(4) {
    top: 74.366197%;
    left: 5.775076%;
    width: 27.051672%;
    height: 25.633803%;
  }
  .contents-area.activity-area .activity-box.daytrip li:nth-child(5) {
    top: 74.647887%;
    left: 34.954407%;
    width: 40.729483%;
    height: 25.352113%;
  }

  /* 特別講座やお仕事体験 329 × 391 */
  .contents-area.activity-area .activity-box.special .activity-photo {
    aspect-ratio: 329 / 391;
  }
  .contents-area.activity-area .activity-box.special .activity-photo::before {
    height: calc(26px + 53.70844%); /* 210 / 391 */
  }
  .contents-area.activity-area .activity-box.special li:nth-child(1) {
    top: 0;
    left: 34.954407%;
    width: 72.036474%;
    height: 39.130435%;
  }
  .contents-area.activity-area .activity-box.special li:nth-child(2) {
    top: 31.457801%;
    left: 2.12766%;
    width: 64.741641%;
    height: 35.805627%;
  }
  .contents-area.activity-area .activity-box.special li:nth-child(3) {
    top: 71.355499%;
    left: 10.334347%;
    width: 39.513678%;
    height: 28.644501%;
  }
  .contents-area.activity-area .activity-box.special li:nth-child(4) {
    top: 61.12532%;
    left: 53.495441%;
    width: 49.848024%;
    height: 29.923274%;
  }

  .contents-area.activity-area .activity-note {
    margin-top: 16px;
    padding-left: 0;
    font-size: var(--fs12);
    text-align: right;
  }
}