@charset "UTF-8";

/* ============================================
   spot_pc.css（周辺観光 PC版 - 色のみCSS変数化）
   
   【概要】
   - 841px以上で読み込まれるPC用CSS
   - 周辺観光ページ専用のスタイル定義
   - ヘッダー／フッター共通部分は public_all.css 側
   
   【前提条件】
   public_all.cssで定義されたCSS変数（色）を使用
   このファイルはpublic_all.cssの後に読み込むこと
   
   【セクション構成】
   0. ページ共通設定
   1. パンくずナビゲーション
   2. セクションタイトル
   3. 観光スポット一覧
   ============================================ */


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

#spot-section{
  width: 100%;
  margin: 0 auto;
  padding: 100px 40px 90px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--color-border-main);
}

#spot-section .section-heading{
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}


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

.breadcrumb{
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 44px;
}

.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;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.section-title .section-heading,
.section-title h1{
  font-size: 2rem;
  font-weight: 700;  
  color: var(--color-text-main);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.section-title .spot-flow-intro,
.section-title .section-subtitle{
  font-size: 0.92rem;
  color: var(--color-text-main);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 2.0;
}


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

.spot-block{
    display: flex;
    align-items: stretch;
    max-width: 1000px;
    margin: 0 auto 50px;
    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{
  flex: 0 0 440px;
  overflow: hidden;
}

.spot-image img{
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* --- 詳細エリア --- */

.spot-details{
  flex: 1;
  padding: 20px 30px 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

.spot-block:nth-of-type(even) .spot-details{
  padding: 20px 30px 20px 30px;
}


/* --- スポット名 --- */
.spot-name{
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 14px;
  letter-spacing: 0.03em;
  line-height: 1.45;
}

/* ルビ（読み仮名）の調整 */
.spot-name ruby{
  ruby-position: over; 
}

.spot-name rt{
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--color-text-light); 
  text-align: center;
}


/* --- 説明文 --- */
.spot-description{
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--color-text-main);
  font-weight: 400;
  text-align: justify;
  margin-bottom: 18px;
  max-width: 520px;
}


/* --- 情報表（距離・リンク等） --- */

.spot-info{
  margin-top: auto;
  border-top: 1px solid #000;
}

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


/* ラベル */
.info-label{
  flex: 0 0 130px;
  background: var(--color-bg-main);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-main);
  letter-spacing: 0.05em;
  padding: 8px 0px 0px 16px;
  display: flex;
  text-align: left;
  box-sizing: border-box;
}

/* 内容 */
.info-content{
  flex: 1;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-main);
  line-height: 1.65;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* 距離・所要時間 */
.info-row:first-child .info-content{
  font-weight: 400;
}

/* リンク */
.info-content a{
  color: var(--color-accent-main);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}

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


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