/* --- 全体リセット・共通設定 --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #666666;
  line-height: 1.6;
  background-color: #fffcf5;
}

/* メニューが開いているときは背後のスクロールを固定 */
body.menu-open {
  overflow: hidden;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================
   ハンバーガーボタン (画像1の右上デザイン)
   ========================================== */
.hamburger-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 64px;
  height: 64px;
  background-color: #e5b392;
  /* 画像1のベージュ色 */
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: transform 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.hamburger-btn:hover {
  transform: scale(1.05);
}

.hamburger-btn span {
  display: block;
  width: 28px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* メニュー開閉時の「×」アニメーション */
.hamburger-btn.active {
  background-color: transparent;
  /* 開いた時は背景を透明化（またはボタン領域を×印に） */
  box-shadow: none;
}

.hamburger-btn.active span {
  background-color: #1a1a1a;
  /* バツ印は黒色 */
}

.hamburger-btn.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================
   フルスクリーンメニュー (画像2のデザイン)
   ========================================== */
.full-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fdfbf7;
  /* 画像2のオフホワイト/クリーム色 */
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.full-menu.active {
  opacity: 0.9;
  visibility: visible;
}

.full-menu-inner {
  text-align: center;
  width: 100%;
  max-width: 500px;
  padding: 0 20px;
}

/* ロゴスペース */
.menu-logo {
  margin-bottom: 40px;
}

.logo-badge {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  padding: 6px 24px;
  font-size: 1.1rem;
  font-weight: 500;
}

/* メニューナビゲーション */
.menu-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.menu-nav a {
  text-decoration: none;
  color: #1a1a1a;
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

/* ホバー時のアンダーラインアニメーション */
.menu-nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: #1a1a1a;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.menu-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ==========================================
   メインコンテンツ等
   ========================================== */
.hero {
  /* 背景画像の設定 */
  background-image: url("img/hero-bg.webp");
  /* 💡 画像のファイル名に合わせて変更してください */
  background-size: cover;
  /* 領域全体を覆うように拡大縮小 */
  background-position: center;
  /* 画像の中央を基準に配置 */
  background-repeat: no-repeat;
  /* 画像の繰り返しをオフ */

  /* 画像の上に文字が見やすくなるよう薄いオーバーレイを重ねる場合（お好みで調整） */
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("img/hero-bg.jpg"); */

  color: #ffffff;
  padding: 140px 0 100px;
  text-align: right;
}


.hero .container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* 💡 ボタン等のブロック要素も右端に揃える */
}

.hero h2 {
  font-size: 2.2rem;
  line-height: 1.5;
  margin-bottom: 90px;
  text-shadow: #00000051 1px 0 10px;
}

.cstm-wave-bottom {
  --mask:
    radial-gradient(33.6px at 50% calc(100% - 47px), #000 99%, #0000 101%) calc(50% - 40px) 0/80px 100%,
    radial-gradient(33.6px at 50% calc(100% + 27px), #0000 99%, #000 101%) 50% calc(100% - 20px)/80px 97% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);

}


.btn-primary {
  display: inline-block;
  background-color: #e5b392;
  color: #ffffff;
  padding: 16px 36px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: opacity 0.3s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}

.section {
  padding: 60px 0;
}

.section-desc {
  text-align: center;
  color: #666666;
  margin-bottom: 30px;
  font-size: 0.9rem;
}

.calendar-wrapper {
  width: 100%;
  /* 縦横比を指定（例: 横4 : 縦3） */
  aspect-ratio: 4 / 3; 
}

.calendar-wrapper iframe {
  width: 100%;
  height: 100%;
}

.site-footer {
  text-align: center;
  padding: 30px 0;
  color: #888888;
  font-size: 0.85rem;
}

/* ==========================================
   About セクション (デザイン再現)
   ========================================== */
.about-section {
  position: relative;
  background-color: #fdfbf7;
  /* アイボリー系の背景色 */
  padding: 20px 0 30px;
  overflow: hidden;
  /* 背景模様のはみ出し防止 */
}

.about-section2 {
  position: relative;
  background-image: linear-gradient(#1f366d, #65c9b4 50%, #ffd78c);
  padding: 80px 0 100px;
  overflow: hidden;
  /* 背景模様のはみ出し防止 */
}

.about-section3 {
  position: relative;
  background-color: #e4efe3;
  padding: 65px 0 100px;
  text-align: center;
}
/* --- 左右固定の背景ドット模様 --- */
.bg-pattern {
  position: absolute;
  width: 40%;
  max-width: 330px;
  height: 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  /* テキスト選択等の邪魔にならないように設定 */
  z-index: 1;
}

.bg-left {
  top: 0;
  left: 0;
  background-image: url("img/s2_back_pink.webp");
  /* 左のピンク模様 */
  background-position: left center;
  background-size: contain;
}

.bg-right {
  bottom: 0;
  right: 0;
  background-image: url("img/s2_back_green.webp");
  /* 右の緑模様 */
  background-position: right bottom;
  background-size: contain;
}

.bg-left2 {
  top: 0;
  left: 0;
  background-image: url("img/s3_back_L.webp");
  /* 左のピンク模様 */
  background-position: left center;
  background-size: contain;
}

.bg-right2 {
  bottom: 0;
  right: 0;
  background-image: url("img/s3_back_R.webp");
  /* 右の緑模様 */
  background-position: right bottom;
  background-size: contain;
  opacity: 0.4;
}

.bg-left3 {
  top: 0;
  left: 0;
  background-image: url("img/s3_back_L.webp");
  /* 左のピンク模様 */
  background-position: left center;
  background-size: contain;
}

.bg-right3 {
  bottom: 0;
  right: 0;
  background-image: url("img/s3_back_R.webp");
  /* 右の緑模様 */
  background-position: right bottom;
  background-size: contain;
  opacity: 0.4;
}
.bg-left.tL {
  background-image: url("img/travel_L.webp");
      background-repeat: repeat-y;
}

.bg-right.tR {
  background-image: url("img/travel_R.webp");
      background-repeat: repeat-y;
}

/* --- コンテンツ全体コンテナ（レスポンシブで幅に応じ中央寄りに） --- */
.about-container {
  position: relative;
  z-index: 2;
  /* 背景模様より上に配置 */
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

/* --- 1. ガーランド & 星の配置 --- */
.garland-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 450px;
  margin: 20px auto 25px;
}

.top-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0px;
}

.garland-img {
  height: auto;
  display: block;
  margin: 0 auto;
      z-index: 2;
    position: relative;
}

.top-img {
  height: auto;
  display: block;
  margin: 0 auto;
}
.top-img2 {
  height: auto;
  display: block;
  margin: auto;
  padding-bottom: 1rem;
}
.star {
  position: absolute;
  height: auto;
}

.star-left {
  left: 10%;
  top: 10px;
  width: 38px;
}

.star-right {
  right: 10%;
  bottom: 0;
  width: 50px;
}

/* --- 2. サブタイトル --- */
.about-sub-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 25px;
}

.about-sub-title .highlight {
    color: #e5b392;
    font-size: 1.2rem;
    line-height: 3rem;
}

/* --- 3. 星が中心にある線 (HTML/CSS描写) --- */
.star-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  margin: 0 auto 20px;
}

.star-divider::before,
.star-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #eb8582;
  /* 線の色 */
}

.star-icon {
  padding: 0 12px;
  color: #eb8582;
  font-size: 0.9rem;
}

/* --- 4. メインコピー --- */
.about-main-text {
  font-size: 1.15rem;
  line-height: 1.9;
  margin-bottom: 50px;
    color: #eb8582;
}


/* --- 5. 2つのカード（横並び & 幅80%中央揃え） --- */
.about-cards-wrapper {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 60px;
}

.about-card {
  flex: 1;
  max-width: 420px;
  background-color: #ffffff;
  border: 1.5px solid #fce8e6;
  /* 薄いピンクの外枠線 */
  border-radius: 20px;
  padding: 40px 0px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-card p {
  width: 75%;
  /* 💡 要求通り幅80%で折り返し */
  margin: 0 auto;
  text-align: center;
  color: #a25c56;
  /* カード内のテキスト色 */
  font-weight: 500;
}

.about-card2 p {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    color: #a25c56;
    font-weight: 500;
    padding-bottom: 0.5rem;
}

/* --- 6. 下部のバスと看板の配置 --- */
.decorations-bottom {
  position: relative;
  width: 100%;
  height: 120px;
  margin-top: -30px;
  /* カードとの距離調整 */
}

.deco-bus {
  position: absolute;
  left: 5%;
  bottom: 0;
  width: 220px;
  height: auto;
}

.deco-board {
  position: absolute;
  right: 8%;
  height: auto;
}

.cstm-wave-top-bottom {
  --mask:
    radial-gradient(33.6px at 50% 47px, #000 99%, #0000 101%) calc(50% - 40px) 0/80px 51% repeat-x,
    radial-gradient(33.6px at 50% -27px, #0000 99%, #000 101%) 50% 20px/80px calc(51% - 20px) repeat-x,
    radial-gradient(33.6px at 50% calc(100% - 47px), #000 99%, #0000 101%) calc(50% - 40px) 100%/80px 51% repeat-x,
    radial-gradient(33.6px at 50% calc(100% + 27px), #0000 99%, #000 101%) 50% calc(100% - 20px)/80px calc(51% - 20px) repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

/* ==========================================
   Section 3 (アウトドアエリア) スタイル設定
   ========================================== */

/* 写真エリア全体のコンテナ基準値 */
.about_area {
  position: relative;
      z-index: -1;
}

.about_area2 {
  position: relative;
  padding-bottom: 8rem;
}
.about_top {
  position: relative;
  margin-bottom: 60px;
}
/* 画像ラッパーと指定いただいたCSS設定 */
.about-area_pic {
  position: relative;
  z-index: 2;
  /* 💡 星画像（z-index: 1）よりも上に表示させて重ねる */
  text-align: center;
      filter: drop-shadow(3px 2px 2px #000000a0);
}

.about-area_pic img {
  margin: auto;
  max-width: 500px;
  width: 100%;
  display: block;
}

/* テキスト部分の設定 */
.about-area_pic_text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  max-width: 80%;
  margin: auto;
  margin-top: 2rem;
      max-width: 500px;
}

.about-area_pic_sub {
  font-size: 0.9rem;
}

/* --- 写真の両端に配置する星 (s3_back1.webp / s3_back2.webp) --- */
.pic-star {
  position: absolute;
  z-index: 1;
  /* 💡 画像の下に配置 */
  height: auto;
  pointer-events: none;
}

.pic-camp {
  position: absolute;
  z-index: 1;
  /* 💡 画像の下に配置 */
  height: auto;
  pointer-events: none;
}

/* 左側の星 (s3_back1.webp) */
.star-s3-left {
  left: 5%;
}
.top-left {
    left: 1%;
    margin-top: -8rem;
    position: absolute;
}
/* mvかざり */
.star-s3-right {
  right: 5%;
}
.top-right {
  position: absolute;
    right: 3%;
    bottom: -318px;
    z-index: -1;
}
/* --- 下向き矢印エリア --- */
.arrow-wrapper {
  text-align: center;
  margin: 30px 0 50px;
  /* 前後の余白調整 */
}

/* 左右対称・下向きのやじり型矢印 */
.arrow-down {
  display: inline-block;
  width: 20px;
  /* 矢印の幅 */
  height: 16px;
  /* 矢印の高さ */
  background-color: #ffffff;
  /* 矢印の色 */

  /* 💡 5つの点を時計回りに指定して完璧な左右対称の下向きやじりを作成 */
  clip-path: polygon(0% 0%,
      /* 1. 左上の角 */
      50% 35%,
      /* 2. 中央上の凹み（💡ここが凹みの深さ） */
      100% 0%,
      /* 3. 右上の角 */
      50% 100%,
      /* 4. 下の先端 */
      0% 0%
      /* 5. 始点に戻る */
    );
}

/* --- プランカード本体 --- */
.about-card2 {
    max-width: 420px;
    width: 100%;
    background-color: #ffffff;
    border: 1.5px solid #f8b3ad;
    border-radius: 24px;
    padding: 10px 0px 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
    color: #a25c56;
    margin-bottom: 2rem;
}
/* 1. タイトル */
.plan-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 3px;
    color: #a25c56;
}

/* 2. 点線仕切り */
.plan-dotted-line {
  width: 85%;
  border-bottom: 2px dotted #f8c8c3;
  margin-bottom: 10px;
}

/* 3. 説明文（幅80%で折返し） */
.plan-desc {
  width: 80%;
  /* 💡 ご指定通り幅80%指定 */
  margin: 0 auto 20px;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 500;
  color: #a25c56;
}

/* 4. 詳細リスト（箇条書き） */
.plan-details {
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.plan-details li {
  position: relative;
  display: inline-block;
  width: 100%;
}

.plan-details li::before {
  content: "・";
}

/* 5. 価格表示 */
.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-weight: bold;
  color: #a25c56;
}

.price-symbol {
    font-size: 1.6rem;
    margin-right: 4px;
}

.price-number {
    font-size:  1.7rem;
    line-height: 1;
}

.price-suffix {
  font-size: 1rem;
  margin-left: 4px;
}

.plantext {
  font-size: 0.9rem;
  color: #a25c56;
  width: 100%;
  margin: auto;
  max-width: 400px;
  text-align: left;
}

#schedule{
  background-color: #f4ede0;
}

/* --- スクロールアニメーション (fuwa) --- */
.fuwa {
  opacity: 0;
  transform: translateY(2rem); /* 下から浮き上がる距離（お好みで1rem〜3rem調整可） */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

/* 画面内に入った時のスタイル */
.fuwa.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.main-text {
    margin: auto;
    max-width: 500px;
        color: #666666;
}
p.midashi {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: #33713c;
}

/* --- ベース枠 --- */
.main-text {
  margin: auto;
  max-width: 500px;
  width: 100%;
  color: #666666;
}

/* --- 注意事項 & Q&A 部分 --- */
.notice-list {
  margin-bottom: 30px;
}

/* ご指定のクラス適用 */
.textk.Q {
  font-size: 1.1rem;
  font-weight: bold;
  color: #33713c;
  margin-top: 24px;
  margin-bottom: 8px;
}
.faq-list {
    text-align: left;
}
.faq-item {
    border-bottom: 1px dashed #a5cf96;
}

.texta {
  margin-bottom: 16px;
  font-size: 0.9rem;
}

/* --- ご利用の流れ エリア --- */
.step-section {
    position: relative;
    z-index: 2;
}
.step-title {
  text-align: center;
  font-size: 1.1rem;
    color: #a55a5a;
  margin-bottom: 30px;
}

.step-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 500px;
    margin: auto;
    text-align: left;
}
.stepT {
    margin: auto;
    text-align: center;
    color: #a55a5a;
    font-weight: bold;
}

/* 1ステップごとの横並びブロック */
.step-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

p.step-text-title {
    font-size: 1.1rem;
    color: #a55a5a;
}

/* テキスト側（最大幅300px・画面幅縮小時に自動で可変） */
.step-text {
  flex: 1 1 auto;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-top: 20px;
}
/* ==========================================
   左下固定 LINE誘導ボタン（テキストのみ緑背景）
   ========================================== */
.fixed-line-btn {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 990;
  display: flex;
  align-items: center;
  width: 300px; /* 全長 300px */
  max-width: calc(100% - 40px);
  padding: 0;
  background-color: transparent; /* 全体の背景は透明に */
  text-decoration: none;
  
  transition: transform 0.3s ease;
}

/* ホバー時の挙動 */
.fixed-line-btn:hover {
  transform: translateY(-3px);
}

/* 左側：画像枠 */
.line-btn-icon {
    flex: 0 0 auto;
    width: 115px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.line-btn-icon img {
  width: 100%;
  height: auto;
  display: block;
  /* アイコンが目立つよう軽めの影を付与 */
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15));
}

/* 右側：テキスト（背景を緑に設定） */
.line-btn-text {
    flex: 1 1 auto;
    background-color: #06C755;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    text-align: left;
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1.35;
    white-space: normal;
    word-break: break-all;
    margin-left: -0.2rem;
}

/* ==========================================
   Travel スポットカード（繰り返し流用パーツ）
   ========================================== */
.travel-item {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 30px;
  text-align: left;
}

/* 1. 地域バッジ（兵庫） */
.travel-badge-region {
  display: inline-block;
  background-color: #e88683; /* ピンクの背景色 */
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: bold;
  padding: 4px 16px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.travel-badge-region.waka {
  background-color: #79b77d; /* 和歌山の背景色 */
}
.travel-title.waka {
  color: #79b77d;
}
.travel-site-btn.waka {
  background-color: #79b77d;
}
.travel-badge-region.fuku {
  background-color: #6682cf; /* 福井の背景色 */
}
.travel-title.fuku {
  color: #6682cf;
}
.travel-title.sonota {
  color: #7b7b7b;
}
.travel-site-btn.fuku {
  background-color: #6682cf;
}
/* 2. タイトル & 公式サイトエリア */
.travel-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.travel-title {
  font-size: 1.1rem; /* 💡 ご指定通り 1.1rem に設定 */
  font-weight: bold;
  color: #e88683;
  margin: 0;
}

.travel-site-btn {
  display: inline-block;
  background-color: #e88683;
  color: #ffffff;
  font-size: 0.8rem;
  padding: 3px 14px;
  border-radius: 15px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.travel-site-btn:hover {
  opacity: 0.8;
}

/* 3. エリア表記 */
.travel-location {
  font-size: 0.85rem;
  margin-bottom: 6px;
      font-weight: bold;
}

/* 4. キャッチコピー（・ああああ） */
.about-area_pic_sub {
    font-size: 0.9rem;
    padding: 0px 10px;
}

/* 5. 本文 */
.travel-description {
  font-size: 0.85rem;
  margin-bottom: 24px;
}

/* 6. 下部ドット線 */
.travel-divider {
  width: 100%;
  border-bottom: 2px dotted #c98580; /* ピンクブラウンのドット線 */
}

/* ==========================================
   ページトップへ戻るボタン (Page Top)
   ========================================== */
.pagetop-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 980; /* LINEボタンやメニューの邪魔にならない位置 */
  
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #a25c56; /* サイトメインカラー（ピンクブラウン） */
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  
  /* 初期状態は非表示（透明＆少し下に配置） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  
  /* ふわっと表示・非表示するアニメーション */
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease, background-color 0.2s ease;
}

/* 一番下付近に達した時に付与されるクラス */
.pagetop-btn.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ホバー時の挙動 */
.pagetop-btn:hover {
  background-color: #8c4a44;
}

/* ボタン内の上向き矢印アイコン */
.pagetop-arrow {
  display: block;
  width: 10px;
  height: 10px;
  margin: 2px auto 0;
  border-top: 2.5px solid #ffffff;
  border-left: 2.5px solid #ffffff;
  transform: rotate(45deg); /* 上向き矢印を作成 */
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {

  .hero h2 {
    font-size: 1.8rem;
}

.top-right {
    bottom: -288px;
}

  .about-cards-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .about-card {
    width: 100%;
  }

  .star-left {
    left: 2%;
  }

  .star-right {
    right: 2%;
  }

  .deco-bus {
    left: 0;
    width: 150px;
  }

  .deco-board {
    right: 0;
  }

  .star-s3-left {
    left: 0;
    width: 90px;
    top: -60px;
  }

  .star-s3-right {
    right: 0;
    width: 100px;
  }

.about-area_pic_text {
      max-width: 350px;
}

  .about-area_pic img {
    max-width: 400px;
  }

  img.pic-camp {
    width: 70px;
  }

  .about_area2 {
    padding-bottom: 1rem;
  }

.step-item {
    gap: 12px;
  }

  .step-text {
    font-size: 0.85rem;
    line-height: 1.6;
  }

  /* ==========================================
   左下固定 LINE誘導ボタン（テキストのみ緑背景）
   ========================================== */
.fixed-line-btn {
    left: 12px;
    bottom: 12px;
    width: 280px;
  }
  .hero {
  /* 背景画像の設定 */
  background-image: url("img/hero-bg_sp.webp");
  /* 💡 画像のファイル名に合わせて変更してください */
}
.pagetop-btn {
    right: 15px;
    bottom: 15px;
    width: 42px;
    height: 42px;
  }
  .calendar-wrapper {
  width: 100%;
  /* 縦横比を指定（例: 横4 : 縦3） */
  aspect-ratio: 4 / 6; 
}
}

/* --- レスポンシブ500px --- */
@media (max-width: 500px) {
.step-img img {
    max-width: 60px;
}
p.step-text-title {
    font-size: 1rem;
    color: #a55a5a;
}
img.sec3pic {
    top: 3rem;
}
}