/* =========================================
   Hiking Map / Points
   ========================================= */

.hiking-map-wrap{
  text-align:center;
  margin: 40px 0;
}

/* 基本：地図（スマホ含め） */
.hiking-map{
  position:relative;
  display:inline-block;
  width: min(760px, 100%);
}

.hiking-map img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 10px 0 10px 0;
}

/* PCだけ、もう少し小さく */
@media (min-width: 1100px){
  .hiking-map{ width: 760px; }
}

/* クリックポイント */
.map-point{
  position:absolute;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#004b36;
  border:3px solid #fff;
  cursor:pointer;
  box-shadow:0 0 0 3px rgba(0,0,0,0.2);
  transition:transform .2s;
  transform: translate(-50%, -50%);
  z-index:5;

  padding:0;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background-clip: padding-box;
}

.map-point:hover{
  transform: translate(-50%, -50%) scale(1.15);
}

.map-point:focus{ outline:none; }
.map-point:focus-visible{
  box-shadow: 0 0 0 4px rgba(0,75,54,.35), 0 0 0 2px #fff;
}

/* タブレット */
@media (max-width: 900px){
  .map-point{ width:22px; height:22px; }
}

/* スマホ */
@media (max-width: 640px){
  .map-point{
    width:20px;
    height:20px;
  }

  /* 見えないタップ判定を拡張 */
  .map-point::after{
    content:"";
    position:absolute;
    inset:-8px;
  }
}

/* 超小型端末 */
@media (max-width: 420px){
  .map-point{
    width:18px;
    height:18px;
  }

  .map-point::after{
    inset:-10px;
  }
}



/* =========================================
   注記：ポイント地点との間を詰める
   ========================================= */

.map-note{
  font-size:12px;
  color:#666;
  margin-top:8px;
  margin-bottom:8px;
}


/* =========================================
   見出し帯（ポイント地点 / 距離・目安 など）
   共通：グレー＋左上/右下だけ角R
   ========================================= */

.hiking-subtitle{
  background:#f3f3f3;
  padding:8px 12px;
  border-radius: 10px 0 10px 0;
  margin: 8px 0 12px;
  color:#004b36;
  text-align:left;
  font-weight: normal;
}


/* =========================================
   Point list（アイコン + 縦ライン）
   ========================================= */

.point-ol{
  list-style:none;
  padding:0;
  margin:0;
}

.point-ol > li{
  position:relative;
  padding:14px 10px 14px 58px; /* アイコン分 */
  border-bottom:1px solid #e5e5e5;
}

/* アイコン（緑の● → 画像） */
.point-ol > li::before{
  content:"";
  position:absolute;
  left:10px;
  top:14px;
  width:24px;
  height:24px;

  background: url("../images/icon_hiking_yuge.png") no-repeat center;
  background-size: contain;

  border-radius:0;
  z-index: 2; /* 縦ラインより前 */
}

@media (max-width:640px){
  .point-ol > li::before{
    width:22px;
    height:22px;
    top:15px;
  }
}

/* 縦ライン：アイコンに被らないよう開始位置＆重なり順を調整 */
.point-ol > li:not(:last-child)::after{
  content:"";
  position:absolute;
  left:22px;        /* アイコン中心寄り */
  top:44px;         /* アイコン下から開始（被り防止） */
  width:2px;
  height: calc(100% - 36px);
  background:#b9cfc6;
  z-index: 1;        /* アイコンより後ろ */
}

.point-link{
  color:#004b36;
  text-decoration:none;
  font-weight:700;
}
.point-link:hover{ text-decoration:underline; }


/* =========================================
   距離・目安（あなたのHTML専用に安定化）
   - ul の黒丸を完全に消す
   - 見出し帯を左揃え（赤ライン）
   ========================================= */

/* ブロック背景（左上/右下R） */
.hiking-data{
  background:#f3f3f3;
  padding:18px 20px;
  border-radius: 10px 0 10px 0;
  margin-top:30px;
}

/* ✅見出し帯を「ボックス左右いっぱい」にしつつ
   文字開始位置は本文(20px)に揃える＝赤ラインに揃う */
.hiking-data > .hiking-subtitle{
  margin: 0 -20px 14px;   /* 左右に広げてブロック端まで */
  padding: 10px 20px;     /* 文字位置は本文と同じ */
  border-radius: 10px 0 10px 0;
}

/* ✅「hiking-info」も含め、リストの黒丸を確実に消す */
.hiking-data ul,
.hiking-data ol,
.hiking-data .hiking-info{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* li の整形 */
.hiking-data li{
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  line-height: 1.75;
  font-size: 15px;
}

/* 「●距離」「●所要時間」などの強調 */
.hiking-data li > strong{
  display:inline-block;
  margin-bottom: 2px;
}

/* ===== 消費エネルギー（炎アイコン） ===== */
.energy-block{ margin-bottom: 14px; }

.energy-title{
  color:#004b36;
  font-weight:700;
}

.energy-icon{
  color:#e07a00;
  margin-right:6px;
}

.energy-main{
  font-size:16px;
}

.energy-sub{
  font-size:13px;
  color:#666;
}

/* ※注意書き：ぶら下げインデント */
.small-note{
  font-size:13px;
  color:#666;
  margin-top:12px;
  padding-left:1.2em;
  text-indent:-1.2em;
}


/* =========================================
   下部ナビ（hiking1の白地/緑枠）
   ========================================= */

.hiking-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:2rem;
  margin:3rem auto 4rem;
  text-align:center;
  flex-wrap:wrap;
}

.hiking-nav a{
  display:inline-block;
  background:#fff;
  color:#004b36;
  border:1px solid #004b36;
  padding:0.6rem 1.6rem;
  border-radius: 10px 0 10px 0;
  font-size:0.95em;
  text-decoration:none;
  transition:0.3s;
  font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
}

.hiking-nav a:hover{
  background:#004b36;
  color:#fff;
  border-color:#004b36;
}

@media screen and (max-width: 600px){
  .hiking-nav{
    gap:1rem;
    flex-direction:column;
  }
  .hiking-nav a{
    width:80%;
  }
}


/* =========================================
   強制2カラム（本文＋右メニュー）
   ========================================= */

@media screen and (min-width: 960px){
  #contents{
    display:flex !important;
    align-items:flex-start;
    gap:24px;
  }

  #contents > main.column{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0;
  }

  #contents > #sub-contents-area.sub-contents{
    flex:0 0 300px !important;
    width:300px !important;
    margin:0 !important;
  }
}

@media screen and (max-width: 959px){
  #contents{ display:block !important; }
  #contents > #sub-contents-area.sub-contents{
    width:auto !important;
    margin-top:20px;
  }
}


/* =========================================
   Lightbox（角R：左上/右下）
   ========================================= */

.lb{
  position:fixed;
  inset:0;
  z-index:9999;
  background: rgba(0,0,0,.65);
}
.lb.is-hidden{ display:none !important; }

.lb__stage{
  position:relative;
  max-width:900px;
  margin:6vh auto;
  padding:0;
}

.lb__img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 10px 0 10px 0;
}

.lb__caption{
  margin-top:10px;
  color:#fff;
  font-size:14px;
  text-align:center;
}

.lb__nav,
.lb__close{
  position:absolute !important;
  z-index:2;
}

.lb__close{
  top:8px;
  right:8px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:0;
  cursor:pointer;
}

.lb__prev{ top:50%; left:8px; transform: translateY(-50%); }
.lb__next{ top:50%; right:8px; transform: translateY(-50%); }

.lb__nav{
  width:36px;
  height:36px;
  border-radius:8px;
  border:0;
  cursor:pointer;
}

/* ===============================
   ハイキングページ限定カード角丸
   =============================== */
#contents.page-hiking .list-grid1 .list{
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

