.kikaku-item {
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    align-items: center;
    margin: 2rem 0;
}

/* 各エリアの基本 */
.kikaku-left,
.kikaku-right {
    width: 90%;
    text-align: left;
}

/* 画像 */
.samune {
    max-width: 90%;
    height: auto;
    display: block;
    border-radius: 10px;
    margin: 1rem auto;
    position: relative;
    z-index: 4;
}

/* スマホ時（デフォルト） */
.kikaku-left {
    order: 2; /* スマホでは画像を下に */
}
.kikaku-right {
    order: 1; /* スマホでは本文を上に */
}

/* PC時（横並び・通常順） */
@media screen and (min-width: 769px) {
    .kikaku-item {
        flex-direction: row; /* 横並び */
        align-items: flex-start;
        justify-content: flex-start;
        gap: 2rem;
    }

    .kikaku-left {
        order: 1; /* 左に戻す */
        flex: 0 0 40%;
    }

    .kikaku-right {
        order: 2; /* 右に戻す */
        flex: 1;
    }
}
.map{
    width: 90%;
    margin: 0 5%;
    position: relative;
    z-index: 4;
}
.insta-img{
    width: 50px;
    margin-left: 5%;
    transition: 0.1s ;
}
.x-img{
    width: 50px;
    margin-left: 5%;
    transition: 0.1s ;
}
.sns-btn{
    text-decoration: none;
}
.option_pic{
    width: 90%;
    margin: 0 5%;
    position: relative;
    z-index: 4;
}
.x-img:hover{
    filter: brightness(55%) saturate(180%) hue-rotate(215deg) contrast(125%) drop-shadow(0 0 6px rgba(80, 120, 255, 0.4));
}
.insta-img:hover{
    filter: brightness(60%) saturate(180%) hue-rotate(210deg) contrast(120%);
}
/*ここから関連企画を表示するように設定*/
/* 1) ラッパ：.text の強い装飾を遮断 */
.text .near-shelf {
  /* 可能な限り“元のブラウザ既定”に戻す */
  all: revert;
  /* 必要最低限を再指定（ここからがこのコンポーネントの基準） */
  display: block;
  font: normal 14px/1.55 system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  color: #111;
  --near-accent: #001D56;
  --near-bg: #fff;
  --near-muted: #555;
  --near-card-radius: 16px;
  --near-gap: 16px;
  /* レイアウト分離（z-indexやブレンドの影響を避ける） */
  isolation: isolate;
}

/* 2) このコンポーネント内の共通設定（箱モデル・リンク・画像など） */
.text .near-shelf, 
.text .near-shelf * { box-sizing: border-box; }
.text .near-shelf img { max-width: 100%; height: auto; display: block; }

/* 3) 以降はコンポーネントのスタイル（前回のカードUIを内包化） */
.text .near-shelf .near-title {
  font-size: clamp(18px, 2.4vw, 22px);
  margin: 0 0 12px;
  font-weight: 700;
}

.text .near-shelf .near-rail-wrap { position: relative; }

.text .near-shelf .near-rail {
  display: flex;
  gap: var(--near-gap);
  overflow-x: auto;
  padding: 8px 8px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 8px;
}

.text .near-shelf .near-rail::-webkit-scrollbar { height: 8px; }
.text .near-shelf .near-rail::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 999px; }
.text .near-shelf .near-rail::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.22); border-radius: 999px; }

.text .near-shelf .near-card {
  flex: 0 0 auto;
  width: clamp(220px, 28vw, 320px);
  background: var(--near-bg);
  border-radius: var(--near-card-radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  grid-template-rows: auto 1fr;
}

.text .near-shelf .near-thumb { aspect-ratio: 16 / 9; background: #f3f4f6; overflow: hidden; }
.text .near-shelf .near-thumb img { width: 100%; height: 100%; object-fit: cover; }

.text .near-shelf .near-body { padding: 12px 14px 14px; display: grid; gap: 8px; }

.text .near-shelf .near-name { font-size: 16px; line-height: 1.35; margin: 0; font-weight: 700; }

.text .near-shelf .near-meta {
  margin: 0;
  font-size: 13px;
  color: var(--near-muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.text .near-shelf .near-tag {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: #edf2ff; color: #2849c8;
}

/* .text 側の a スタイルに負けないよう、クラス指定で明示上書き */
.text .near-shelf .near-btn {
  margin-top: 2px; display: inline-block; text-decoration: none;
  font-size: 14px; padding: 8px 12px; border-radius: 10px;
  background: var(--near-accent); color: #fff; text-align: center;
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
.text .near-shelf .near-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); opacity: .95; }

/* ナビボタン */
.text .near-shelf .near-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  inline-size: 36px; block-size: 36px; border-radius: 999px;
  border: none; background: rgba(255,255,255,0.9);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  cursor: pointer; display: grid; place-items: center;
  font-size: 20px; line-height: 1; padding: 0; user-select: none;
}
.text .near-shelf .near-prev { left: 6px; }
.text .near-shelf .near-next { right: 6px; }
.text .near-shelf .near-nav:hover { background: #fff; }

/* エッジフェード */
.text .near-shelf .near-fade {
  pointer-events: none; position: absolute; top: 0; bottom: 0; width: 40px;
}
.text .near-shelf .near-fade-left  { left: 0;  background: linear-gradient(90deg,  #fff, rgba(255,255,255,0)); }
.text .near-shelf .near-fade-right { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }

/* ダーク背景ページ対応（任意） */
/*
.text.dark .near-shelf .near-card { background:#0b1220; color:#dbe4ff; }
.text.dark .near-shelf .near-rail::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); }
.text.dark .near-shelf .near-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); }
*/


/* 近くの企画カードを絶対配置の基準にする */
.near-card { 
  position: relative; 
}

/* 近くの企画内の★ボタンをカード右上に固定 */
.near-card .fav-btn{
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 5;         /* フェード覆いより前に */
}

/* もしフェードのオーバーレイが被るなら */
.near-fade { z-index: 3; }  /* これより上に★(z=5)が来る */

/*対策*/
p {
  word-wrap: break-word; /* 古い表記でもOK */
  overflow-wrap: break-word; /* 推奨: 長いURLを途中で折り返す */
  white-space: normal; /* 改行を許可 */
}