/* =====================================
   パンくずリスト（現在地がわかるリンク）
===================================== */
.breadcrumb {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}
.breadcrumb a {
    color: #3498db;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

/* =====================================
   写真とピン（番号）を重ねる設定
===================================== */
/* 写真とピンを包む箱 */
.photo-map-container {
    position: relative; /* 魔法の言葉：ここを基準にしてピンを配置する */
    display: inline-block;
    width: 100%;
}

/* 中に入る大きな写真 */
.photo-map-container .map-image {
    width: 100%; /* スマホでもPCでも画面に合わせて縮小させる */
    height: auto;
    display: block;
}

/* ピン（番号）のデザイン */
.photo-map-container .pin {
    position: absolute; /* 魔法の言葉：親箱を基準に絶対的な位置に配置する */
    transform: translate(-50%, -50%); /* ピンの「中心」を座標のど真ん中に合わせる微調整 */
    
    /* 以下はボタンの見た目（丸くて赤い押しやすいボタン） */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background-color: rgba(231, 76, 60, 0.9); /* 少し透けた赤 */
    color: #fff;
    border-radius: 50%; /* 完全な丸にする */
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: transform 0.2s; /* ホバーした時にフワッと動く準備 */
}

/* ピンの上にマウスが乗った時 */
.photo-map-container .pin:hover {
    transform: translate(-50%, -50%) scale(1.15); /* 少し大きくする */
    background-color: rgba(192, 57, 43, 1);
}
/* =====================================
   大元ページ（大きなボタン案）の専用CSS
===================================== */

/* 写真を綺麗に収めるための箱 */
.photo-container {
    width: 100%;
    margin-bottom: 30px;
}
/* 写真自体の見た目（少し影をつけて高級感を出します） */
.main-photo {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 角をほんのり丸くしてオシャレに */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 「場所別で探す」の見出し */
.selection-section {
    margin-top: 40px;
}
.selection-section h3 {
    font-size: 20px;
    color: #2c3e50;
    border-left: 4px solid #3498db; /* 左側にきれいな青いアクセント線を引く */
    padding-left: 10px;
    margin-bottom: 20px;
}

/* ボタンを縦にドンドンと並べる設定 */
.button-group {
    display: flex;
    flex-direction: column;
    gap: 15px; /* ボタンとボタンの隙間 */
}

/* 大きなボタン本体のデザイン */
.large-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    border: 2px solid #3498db; /* テーマカラーの青い枠線 */
    border-radius: 8px;
    padding: 20px;
    text-decoration: none; /* リンクの下線を消す */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease; /* 色や形がフワッと変わる魔法のアニメーション */
}

/* ボタンの中のタイトル（場所の名前） */
.large-button .button-title {
    font-size: 18px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 6px;
}

/* ボタンの中の説明文 */
.large-button .button-desc {
    font-size: 13px;
    color: #7f8c8d;
}

/* ★マウスが乗ったとき、またはスマホでタップした瞬間のエフェクト */
.large-button:hover {
    background-color: #3498db; /* 背景が鮮やかな青に染まる */
    transform: translateY(-2px); /* ボタンが上に2ピクセルちょっと浮き上がる */
    box-shadow: 0 6px 15px rgba(52, 152, 219, 0.3); /* 青いきれいな影が広がる */
}

/* マウスが乗ったときは、中の文字を一瞬で白に反転させる */
.large-button:hover .button-title,
.large-button:hover .button-desc {
    color: #fff;
}
/* =====================================
   詳細ページ・図鑑ボックスのデザイン
===================================== */
.details-section {
    margin-top: 50px;
}
.details-section h3 {
    font-size: 20px;
    color: #2c3e50;
    border-bottom: 2px solid #2c3e50;
    padding-bottom: 8px;
    margin-bottom: 25px;
}
/* 刻印ごとの解説を包む白い箱 */
.kokuin-box {
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    scroll-margin-top: 30px; /* ★ピンを押してワープした時、上の隙間を程よく空ける魔法の言葉 */
}
.kokuin-box h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #c0392b; /* 刻印の名前を渋い赤色に */
}
.kokuin-box p {
    margin: 0;
    font-size: 14px;
    color: #555;
}