.mainlayout {
  text-align: center;
  background-color: #FAFAF7;
} 

.fontcolor {
  color: maroon;
}

.backcolor {
  background-color: aqua;
}

.alignleft {
  text-align: left;
} 

.travel-index {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    font-size: clamp(7px, 2.0vw, 11px);
    font-weight: 700;
    margin-bottom: 20px;
}

.travel-index-icon {
    font-size: clamp(11px, 4vw, 17px);
}

.run-card{
    display:flex;
    align-items: center;   
    gap: 20px;             
    padding:15px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(0,0,0,0.12);
    margin-bottom:20px;
}

.run-card-photo{
    flex: 0 0 60px;       /* 幅を固定 */
    display: flex;
    justify-content: center;
}

.run-card-info{
    flex: 1;
    text-align: left;      /* ←ここ重要 */
}

/* 旅行プラン */
.city-guide {
    margin: 12px 0;
}

.city-guide-card {
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px 12px;
    margin-bottom: 20px;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

/* 市町村名 */
.city-guide-title {
    display: flex;
    align-items: center;

    font-size: 20px;
    font-weight: bold;

    margin: 0 8px 16px;
}

/* 2枚を横並び */
.city-guide-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* 1枚分 */
.city-guide-item {
    min-width: 0;
    text-align: center;
}

/* アイコン */
.city-guide-icon {
    width: 100%;
    height: 28px;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 5px;
}

/* 写真 */
.city-guide-photo {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 3;

    object-fit: cover;

    border-radius: 8px;
}

.city-guide-photo.enlarged {
    position: fixed;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: auto;
    height: auto;

    max-width: 96vw;
    max-height: 90vh;

    aspect-ratio: auto;
    object-fit: contain;

    z-index: 1000;
}

body.photo-enlarged {
    background: black;
}

body.photo-enlarged::before {
    content: "";

    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background: black;

    z-index: 999;
}

/* 写真タイトル */
.city-guide-item-title {
    margin-top: 6px;

    font-size: inherit;
    line-height: 1.3;

    word-break: break-word;
}
.photo-start {
    border: 3px solid #4caf50;
}
.photo-race {
    border: 3px solid #e67e22;
}
.photo-gourmet {
    border: 3px solid #8e44ad;
}
.photo-sightseeing {
    border: 3px solid #3498db;
}

/* 大会リンク文字 */
.travel-race {
    font-size: 13px;
}

/* パンフレット横 */
.pamphletw {
    /* 大きさ */
    width: 160px;
    height: auto;
    /* 見た目 */
    border-radius:12px;
    overflow:hidden;
}

/* パンフレット縦 */
.pamphleth {
    /* 大きさ */
    height: 160px;
    width: auto;
    /* 見た目 */
    border-radius:12px;
    overflow:hidden;
}

/* 完走証横 */
.finisherw {
    /* 大きさ */
    width: 160px;
    height: auto;
    /* 見た目 */
    border:3px double silver;
}

/* 完走証縦 */
.finisherh {
    /* 大きさ */
    height: 160px;
    width: auto;
    /* 見た目 */
    border:3px double silver;
}

/* 写真横 */
.photow {
    /* 大きさ */
    width: 360px;
    height: auto;
    /* 見た目 */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-bottom:20px;
    margin-right: 10px;
}

/* 写真縦 */
.photoh {
    /* 大きさ */
    height: 360px;
    width: auto;
    /* 見た目 */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-bottom:20px;
    margin-right: 10px;
}

/* 日本地図 */
.japan-map svg{
    /* 大きさ */
    width:100%;
    max-width:500px;
    display:block;
    margin:auto;
    margin-bottom:20px;
}

/* 地域地図 */
.region-map svg{
    /* 大きさ */
    width:100%;
    max-width:750px;
    display:block;
    margin:auto;
    margin-bottom:20px;
}

/* 地域ラベル */
.region-label {
    font-size: 20px;
    font-weight: bold;
    fill: #1976d2;
    text-anchor: middle;
    cursor: pointer;
}
.region-label:hover {
    fill: #e65100;
}

/* 都道府県ラベル */
.pref-label {
    font-size: 20px;
    font-weight: bold;
    fill: #1976d2;
    text-anchor: start;
    cursor: pointer;
}
.pref-label:hover {
    fill: #e65100;
}

/* 着色 */
.prefecture {
    stroke:#FFFFFF;
    stroke-width:1;
    transition:0.2s;
    cursor:pointer;
}
.prefecture:hover{
    opacity:0.85;
}

.hokkaido { fill: #BEE1FF; }
.tohoku   { fill: #AADCEB; }
.kanto    { fill: #FFF2BE; }
.hokuriku { fill: #DCD2F5; }
.toukai   { fill: #C0E8BC; }
.kinki    { fill: #F5D7DC; }
.chugoku  { fill: #D4ECB4; }
.shikoku  { fill: #DCD4EC; }
.kyushu   { fill: #F8DCC3; }

/* 北海道 */
.region-hokkaido{
    transition:0.15s;
}
#region-hokkaido:hover .prefecture{
    opacity:0.85;
}
.hokkaido{
    transition:0.15s;
}
#hokkaido:hover .prefecture{
    opacity:0.85;
}

/* 東北 */
.region-tohoku{
    transition:0.15s;
}
#region-tohoku:hover .prefecture{
    opacity:0.85;
}
.tohoku{
    transition:0.15s;
}
#tohoku:hover .prefecture{
    opacity:0.85;
}

/* 関東 */
.region-kanto{
    transition:0.15s;
}
#region-kanto:hover .prefecture{
    opacity:0.85;
}
.kanto{
    transition:0.15s;
}
#kanto:hover .prefecture{
    opacity:0.85;
}

/* 甲信越・北陸 */
.region-hokuriku{
    transition:0.15s;
}
#region-hokuriku:hover .prefecture{
    opacity:0.85;
}
.hokuriku{
    transition:0.15s;
}
#hokuriku:hover .prefecture{
    opacity:0.85;
}

/* 東海 */
.region-toukai{
    transition:0.15s;
}
#region-toukai:hover .prefecture{
    opacity:0.85;
}
.toukai{
    transition:0.15s;
}
#toukai:hover .prefecture{
    opacity:0.85;
}

/* 近畿 */
.region-kinki{
    transition:0.15s;
}
#region-kinki:hover .prefecture{
    opacity:0.85;
}
.kinki{
    transition:0.15s;
}
#kinki:hover .prefecture{
    opacity:0.85;
}

/* 中国 */
.region-chugoku{
    transition:0.15s;
}
#region-chugoku:hover .prefecture{
    opacity:0.85;
}
.chugoku{
    transition:0.15s;
}
#chugoku:hover .prefecture{
    opacity:0.85;
}

/* 四国 */
.region-shikoku{
    transition:0.15s;
}
#region-shikoku:hover .prefecture{
    opacity:0.85;
}
.shikoku{
    transition:0.15s;
}
#shikoku:hover .prefecture{
    opacity:0.85;
}

/* 九州・沖縄 */
.region-kyushu{
    transition:0.15s;
}
#region-kyushu:hover .prefecture{
    opacity:0.85;
}
.kyushu{
    transition:0.15s;
}
#kyushu:hover .prefecture{
    opacity:0.85;
}

.large-only { 
  border: 2px solid green; border-collapse: collapse; width: 100%; 
}

.large-only th {
  border-width: 2px 1px 3px 1px; border-style: solid dashed double dashed; border-color: green; padding: 0.3em; background-color: #eeffee; 
}

.large-only td { 
  border-width: 1px; border-style: solid dashed; border-color: green; padding: 0.3em; 
}