@charset "UTF-8";

/* ============================================
   spot_sp.css（周辺観光 SP版 - 色のみCSS変数化）
   
   【概要】
   - 840px以下で読み込まれるSP用CSS
   - 周辺観光ページ専用のスタイル定義
   - ヘッダー／フッター共通部分は public_all.css 側
   
   【前提条件】
   public_all.cssで定義されたCSS変数（色）を使用
   このファイルはpublic_all.cssの後に読み込むこと
   
   【セクション構成】
   0. ページ共通設定
   1. パンくずナビゲーション
   2. セクションタイトル
   3. 観光スポット一覧（画像→見出し→本文→情報表）
   4. 415px以下の微調整
   ============================================ */


/* ============================================
   0. ページ共通設定
   ============================================ */

/* メインセクション */
#spot-section{
  width: 100%;
  margin: 0 auto;
  padding: 100px 40px 70px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--color-border-main);
}

/* 画像の基本（崩れ防止） */
.spot-image img{
  display: block;
  width: 100%;
}


/* ============================================
   1. パンくずナビゲーション
   ============================================ */

.breadcrumb{
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 30px;
}

.breadcrumb a{
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}

.breadcrumb a:hover{
  color: var(--color-text-main);
}


/* ============================================
   2. セクションタイトル
   ============================================ */

.section-title{
  text-align: center;
  margin-bottom: 40px;
}

/* タイトル（spot.html は p.section-heading） */
.section-title .section-heading{
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
  margin: 0 0 10px;
}

/* 説明文（spot.html は p.spot-flow-intro） */
.section-title .spot-flow-intro{
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.03em;
  margin: 0;
}


/* ============================================
   3. 観光スポット一覧
   ============================================ */

/* 1スポットの塊（SPは縦並び） */
.spot-block{
  width: 100%;
  margin: 0 auto 56px;
  background-color: rgba(240, 232, 223, 0.75);
}

.spot-block:nth-of-type(even){
    flex-direction: row-reverse;
    background-color: rgba(224,224,224,0.50);
}
/* 画像 */
.spot-image{
  width: 100%;
  overflow: hidden;
}

.spot-image img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

/* テキストエリア */
.spot-details{
  width: 100%;
  padding: 20px 30px ;
  box-sizing: border-box;
}

/* スポット名 */
.spot-name{
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

/* 説明文 */
.spot-description{
  font-size: 0.7rem;
  line-height: 1.50;
  color: var(--color-text-main);
  font-weight: 400;
  text-align: justify;
  margin: 0 0 14px;
}

/* 情報表（距離・リンク等） */
.spot-info{
  border-top: 1px solid #000;
}

/* 1行 */
.info-row{
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #000;
}

/* 左ラベル */
.info-label{
  flex: 0 0 106px;
  background: var(--color-bg-main);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 8px 0 8px 12px;   
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  box-sizing: border-box;
}

/* 右内容 */
.info-content{
  flex: 1;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.7;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* 1行目（距離・所要時間）は読みやすく */
.info-row:first-child .info-content{
  font-weight: 400;
}

/* リンク（PCと同じ表現） */
.info-content a{
  color: var(--color-accent-main);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
  word-break: break-word;
}

.info-content a:hover{
  color: var(--color-text-light);
}

/* ============================================
   4. 415px以下の微調整
   ============================================ */

@media screen and (max-width: 415px){

  /* メイン余白（横40pxだと狭い端末で詰まりやすい） */
  #spot-section{
    padding: 90px 16px 60px;
  }

  /* タイトル周り */
  .section-title{
    margin-bottom: 34px;
  }

  .section-title .section-heading{
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .section-title .spot-flow-intro{
    font-size: 0.78rem;
    line-height: 1.75;
  }

  /* ブロック間隔 */
  .spot-block{
    margin-bottom: 44px;
  }

  /* テキスト余白（30pxは小画面で窮屈） */
  .spot-details{
    padding: 16px 14px;
  }

  /* 見出し */
  .spot-name{
    font-size: 1.05rem;
    line-height: 1.45;
    margin-bottom: 8px;
  }

  /* 説明文（0.7remは読みづらいので少しだけ上げる） */
  .spot-description{
    font-size: 0.76rem;
    line-height: 1.7;
    margin-bottom: 12px;
  }

  /* 表 */
  .info-label{
    flex: 0 0 92px;
    font-size: 0.66rem;
    padding: 8px 0 8px 10px;
  }

  .info-content{
    font-size: 0.72rem;
    padding: 8px 10px;
    line-height: 1.65;
  }

  /* リンク：小画面で改行しやすく */
  .info-content a{
    word-break: break-word;
  }
}

/* ============================================
   END OF FILE
   ============================================ */