/* ============================================
   凪の航跡 トップページ専用スタイル
   このファイルは front-page.css で、トップページ(is_front_page)
   でのみ読み込まれる。他ページのデザインには一切影響しない。
   2026-10-18 「最新の更新」に博物館の展示を追加(ラベル -museum と、右端のセルの展示写真)
   2026-10-25 「最新の更新」のサルベージの発見物に「サルベージ」の札(-salvage)。「発見物」の札の下に縦に重ねる
   ============================================ */

/* 見出し用の明朝体(Noto Serif JP)は、表示を待たせない読み込み方にするため
   site-extras.php の wp_head で読み込む(ここでの @import は廃止) */

/* ---- 全体トーン:オフホワイト基調 ---- */
.home #content.l-content {
    background-color: #FAF8F3;
    padding-top: 36px; /* ヒーロー画像直下の余白(site-extras.phpから移設) */
}

/* ---- セクション共通 ---- */
.nagi-section-heading {
    text-align: center;
    font-size: 1.5em;
    font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #1F3A5F;
    margin-bottom: 0.5em;
    position: relative;
    padding-bottom: 0.6em;
}
.nagi-section-heading::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    background: #B08D57; /* 控えめな金色。線としてのみ使用 */
    margin: 0.6em auto 0;
}

/* ---- 凪の航跡の特徴:4カード ---- */
.nagi-features-section {
    /* 本文エリア(約870px)より広い1080pxまで左右に張り出して、基準デザインの横幅に近づける。
       画面が狭いときは画面幅-48pxまでに収まる */
    --nagi-wide: min(1080px, calc(100vw - 48px));
    width: var(--nagi-wide);
    max-width: none;
    margin: 4em 0;
    margin-left: calc((100% - var(--nagi-wide)) / 2);
    padding: 0;
    box-sizing: border-box;
}
/* 特徴セクションの見出しは、下線ではなく左右に細い線を引く(基準デザイン準拠) */
.nagi-features-section .nagi-section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    margin-bottom: 0.3em;
    padding-bottom: 0;
}
/* SWELLの見出し装飾(絶対配置の::before等)に負けないよう、位置指定も明示的に打ち消す */
.nagi-features-section h2.nagi-section-heading::before,
.nagi-features-section h2.nagi-section-heading::after {
    content: "";
    display: block;
    position: static;
    flex: 0 0 64px;
    width: 64px;
    height: 9px;
    background: center / contain no-repeat;
    border: none;
    margin: 0;
    top: auto;
    left: auto;
    transform: none;
}
/* 線の内側の端に小さな菱形(羅針盤の針先のイメージ) */
.nagi-features-section h2.nagi-section-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 9'%3E%3Cpath d='M0 4.5H54' stroke='%23B08D57' stroke-width='1'/%3E%3Cpath d='M59 1.5L62 4.5L59 7.5L56 4.5Z' fill='%23B08D57'/%3E%3C/svg%3E");
}
.nagi-features-section h2.nagi-section-heading::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 9'%3E%3Cpath d='M10 4.5H64' stroke='%23B08D57' stroke-width='1'/%3E%3Cpath d='M5 1.5L8 4.5L5 7.5L2 4.5Z' fill='%23B08D57'/%3E%3C/svg%3E");
}
.nagi-section-lead {
    text-align: center;
    font-size: 0.9em;
    color: #6B6960;
    margin: 0;
    letter-spacing: 0.04em;
}
.nagi-features-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* minmax(0,…)でカードが枠からはみ出すのを防ぐ */
    gap: 22px;
    margin-top: 2em;
    align-items: stretch;
}
/* 羊皮紙のカード:縁が破れた紙の画像(透明PNGをWebP化)を、カードの大きさに合わせて敷く。
   紙の縁は画像の端から少し内側にあるので、文字が縁にかからないよう内側の余白を広めにとる。
   影は紙の形に沿う drop-shadow で、ごく薄く浮かせるだけにする */
.nagi-feature-card {
    position: relative;
    min-width: 0;
    background: url("/wp-content/uploads/2026/09/nagi-parchment.webp") center / 100% 100% no-repeat;
    border: none;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 2px 3px rgba(90, 64, 30, 0.14));
    padding: 2.2em 1.9em 2.5em;
    text-align: center;
}
/* 挿絵(版画風のセピア画。背景透明の正方形) */
.nagi-feature-icon {
    width: 112px;
    height: 112px;
    margin: 0 auto 0.9em;
}
.nagi-feature-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* SWELLの本文見出し(.post_content h3 など)の余白・装飾に負けないよう、
   カード内に限定してセレクタを強めている */
.nagi-feature-card .nagi-feature-title {
    padding: 0;
    border: none;
    background: none;
    font-size: 1.12em;
    font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-weight: 700;
    color: #1F3A5F;
    margin: 0 0 0.5em;
    line-height: 1.4;
    min-height: 2.8em; /* 2行分の高さを確保して本文の開始位置をそろえる */
    display: flex;
    flex-wrap: wrap; /* 区切った言葉のかたまりを2行目に送れるようにする */
    align-items: center;
    align-content: center;
    justify-content: center;
}
/* 見出しを言葉の切れ目でだけ折り返すための部品
   (HTML側で <span class="nagi-nowrap">〜</span> で囲んだ単位は途中で切れない) */
.nagi-nowrap {
    display: inline-block;
}
.nagi-feature-card .nagi-feature-title::before,
.nagi-feature-card .nagi-feature-title::after {
    content: none;
}
/* 見出しと本文のあいだに、金の細線+中央の小さな菱形 */
.nagi-feature-card .nagi-feature-text::before {
    content: "";
    display: block;
    width: 78%;
    max-width: 180px;
    height: 9px;
    margin: 0 auto 0.9em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 9' preserveAspectRatio='none'%3E%3Cpath d='M0 4.5H83M97 4.5H180' stroke='%23B08D57' stroke-width='1'/%3E%3Cpath d='M90 1.5L93 4.5L90 7.5L87 4.5Z' fill='%23B08D57'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.nagi-feature-card .nagi-feature-text {
    font-size: 0.88em;
    color: #4A4236; /* 羊皮紙の上でも読みやすい、茶を含んだ濃いめの灰 */
    line-height: 1.8;
    margin: 0;
    text-align: left;
    text-wrap: pretty; /* 最終行に1〜2文字だけ残る折り返しを避ける(対応ブラウザのみ) */
}

/* 見出しは画面幅によって1行にも2行にもなるため、どの幅でも2行分の高さを確保しておく。
   1行の見出しは上下中央に置かれ、4枚とも飾り線と本文の開始位置がそろう */

/* タブレット:2カラムに折り返す */
@media (max-width: 900px) {
    .nagi-features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* スマホ:2列×2段。縦に長くなりすぎないよう、挿絵・文字・余白を小さくする */
@media (max-width: 600px) {
    .nagi-features-grid {
        gap: 10px;
    }
    .nagi-features-section {
        width: auto;
        margin: 3em 0;
    }
    .nagi-feature-card {
        padding: 1.4em 1em 1.6em;
    }
    .nagi-feature-icon {
        width: 72px;
        height: 72px;
        margin-bottom: 0.6em;
    }
    .nagi-feature-card .nagi-feature-title {
        font-size: 0.98em;
        min-height: 2.8em;
        margin-bottom: 0.4em;
    }
    .nagi-feature-card .nagi-feature-text {
        font-size: 0.78em;
        line-height: 1.7;
    }
    .nagi-feature-card .nagi-feature-text::before {
        margin-bottom: 0.7em;
    }
    .nagi-features-section h2.nagi-section-heading::before,
    .nagi-features-section h2.nagi-section-heading::after {
        flex-basis: 40px;
        width: 40px;
    }
}

/* ---- 最新の更新 ----
   基準デザインどおり、1枚の白い枠の中に行が並ぶ横長リスト。
   PC:  日付 | 種別ラベル | タイトル | 都市名 | ›
   スマホ: 1段目 ラベル+タイトル / 2段目 都市名+日付
   (PHPの出力内容・並び順は変えず、CSSの配置だけで並べ替えている) */
.nagi-recent-updates {
    /* 特徴セクションと同じ1080px幅まで広げる */
    --nagi-wide: min(1080px, calc(100vw - 48px));
    width: var(--nagi-wide);
    max-width: none;
    margin: 4em 0 0;
    margin-left: calc((100% - var(--nagi-wide)) / 2);
    padding-bottom: 0; /* 下の航海日誌との間隔は航海日誌側の上マージンで取る(フッター前の余白は航海日誌側) */
    box-sizing: border-box;
}

/* 見出し:左寄せ+羽ペンのアイコン、明朝体の紺 */
.nagi-recent-updates h2.nagi-recent-updates-title {
    display: flex;
    align-items: center;
    gap: 0.45em;
    text-align: left;
    font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-weight: 700;
    font-size: 1.4em;
    letter-spacing: 0.06em;
    color: #1F3A5F;
    margin: 0 0 0.7em;
    padding: 0;
    border: none;
    background: none;
}
.nagi-recent-updates h2.nagi-recent-updates-title::before {
    content: "";
    display: block;
    position: static;
    flex: 0 0 1.1em;
    width: 1.1em;
    height: 1.1em;
    border: none;
    margin: 0;
    transform: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B6B3E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5C13 4 8 8.5 7 15.5'/%3E%3Cpath d='M20.5 3.5C19.5 10 15 14.5 8.5 15'/%3E%3Cpath d='M11.5 11.5L16 8'/%3E%3Cpath d='M7 15.5L4 20.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nagi-recent-updates h2.nagi-recent-updates-title::after {
    /* 見出しの右へ、点線の航路をうっすら伸ばす */
    content: "";
    display: block;
    position: static;
    flex: 1 1 auto;
    height: 4px;
    margin: 0 0 0 0.6em;
    border: none;
    transform: none;
    background: radial-gradient(circle, rgba(139, 107, 62, 0.35) 1px, transparent 1.5px) left center / 9px 4px repeat-x;
}

/* グループ(クエスト+報酬発見物のまとまり)の区切りは見せず、全体を1枚の枠にする */
.nagi-update-group {
    background: #fff;
    border: 1px solid #E8E1D3;
    border-top: none;
    margin: 0;
}
.nagi-recent-updates-title + .nagi-update-group {
    border-top: 1px solid #E8E1D3;
    border-radius: 6px 6px 0 0;
}
.nagi-update-group:last-child {
    border-radius: 0 0 6px 6px;
}
.nagi-recent-updates-title + .nagi-update-group:last-child {
    border-radius: 6px;
}
/* SWELLの本文リスト(.post_content ul / li)の字下げ・余白に負けないよう、セレクタを強めて打ち消す */
.nagi-recent-updates ul.nagi-recent-updates-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nagi-recent-updates li.nagi-recent-updates-item {
    border-bottom: none;       /* クエストと報酬発見物はひと組なので、間に線を引かない(組と組の間はグループの下線で区切る) */
    margin: 0;
    padding: 0;
}
/* ひと組の中の線は、どこから指定されていても消す(SWELL本体や他のCSSのリスト装飾対策)。
   組と組の間の線はグループの枠線なので影響しない。行末の「›」(a::after)にも触れない */
.nagi-recent-updates .nagi-update-group li.nagi-recent-updates-item,
.nagi-recent-updates .nagi-update-group li.nagi-recent-updates-item > a {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.nagi-recent-updates .nagi-update-group li.nagi-recent-updates-item::after {
    content: none !important;
}
/* ひと組の2行は間隔を少し詰めて、まとまりとして見せる */
.nagi-recent-updates li.nagi-recent-updates-item:first-child:not(:last-child) > a {
    padding-top: 1.3em;    /* 学問セルの上下にゆとりを持たせるため、組の上端・下端の余白を少し広げる */
    padding-bottom: 0.45em;
}
.nagi-recent-updates li.nagi-recent-updates-item + li.nagi-recent-updates-item > a {
    padding-top: 0.45em;
    padding-bottom: 1.3em;
}
.nagi-recent-updates li.nagi-recent-updates-item::before {
    content: none; /* SWELLのリスト装飾(点など)を消す */
}
.nagi-update-group:last-child li.nagi-recent-updates-item:last-child {
    border-bottom: none;
}

/* 1行の中身:PCは5列の横並び */
.nagi-recent-updates-item a {
    display: grid;
    grid-template-columns: 7em 5.3em minmax(0, 1.2fr) minmax(0, 1fr) 8em;
    grid-template-areas: "date label title sub gak"; /* gak:右端の学問セルの置き場(空欄。セル本体は組の高さいっぱいに重ねる) */
    align-items: center;
    column-gap: 1.2em;
    padding: 0.95em 0 0.95em 1.6em; /* 右端は学問セルがそのまま枠に接するので余白なし */
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
}
.nagi-recent-updates-item a:hover {
    background-color: #FAF8F3;
}
.nagi-update-date {
    grid-area: date;
    font-size: 0.85em;
    color: #6B6960;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.nagi-update-label {
    grid-area: label;
    justify-self: start;
    font-size: 0.78em;
    padding: 3px 8px;
    border-radius: 3px;
    min-width: 5.3em;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
}
.nagi-update-label.-voyage {
    background: #D6E4EF;
    color: #1F3A5F;
}
.nagi-update-label.-discovery {
    background: #5B7B67;
    color: #fff;
}
/* 博物館の展示(2026-10-18追加):博物館の展示案内プレートと同じ生成りの地に、深い古金の文字と細い罫線
   (文字 #7D5F33 は生成り #F4EFE5 に対してコントラスト比約5.2) */
.nagi-update-label.-museum {
    background: #F4EFE5;
    color: #7D5F33;
    box-shadow: inset 0 0 0 1px #D6C8B1;
}
/* サルベージの発見物(2026-10-25追加):「発見物」の札の下に「サルベージ」の札を重ねる。
   色は発見物一覧のラベルと同じ古金 #7D5F33 の地に白文字(コントラスト比約6.1)。
   博物館の札(生成りの地・古金の文字・罫線)とは、地の色で見分けられる */
.nagi-update-labels {
    grid-area: label;
    justify-self: start;
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* 2枚の札の幅をそろえる(長い「サルベージ」に合わせる) */
    gap: 4px;
}
.nagi-update-label.-salvage {
    background: #7D5F33;
    color: #fff;
}
.nagi-update-title {
    grid-area: title;
    font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-weight: 700;
    color: #1F3A5F;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nagi-update-sub {
    grid-area: sub;
    font-size: 0.88em;
    color: #3F3D38;        /* 都市名・場所名を主役に(項目名より濃く) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 場所の項目名(受注都市/発見場所):小さく控えめにして、都市名・場所名を主役にする */
.nagi-update-sub-label {
    display: inline-block;
    min-width: 4.3em;      /* 「依頼都市」「発見場所」(4文字)の幅をそろえ、値の書き出し位置を縦に一直線にする */
    font-size: 0.82em;
    color: #6E6558;        /* コントラスト基準(4.5:1以上)を満たす濃さ。白地で約5.7:1(旧 #8A8478 は約3.7:1で不足) */
    letter-spacing: 0.04em;
    margin-right: 1.1em;   /* ラベルと値の区切り(0.6em→1.1em) */
}

/* スマホ:1段目 ラベル+タイトル、2段目 都市名+日付(右端に›) */
@media (max-width: 600px) {
    .nagi-recent-updates {
        width: auto;
        margin: 3em 0 0;
    }
    .nagi-recent-updates h2.nagi-recent-updates-title {
        font-size: 1.25em;
    }
    .nagi-recent-updates-item a {
        grid-template-columns: auto minmax(0, 1fr) auto 60px;
        grid-template-areas:
            "label title title gak"
            ".     sub   date  gak";
        column-gap: 0.6em;
        row-gap: 0.2em;
        padding: 0.85em 0 0.85em 1em;
    }
    .nagi-update-title {
        white-space: normal; /* スマホでは省略せず折り返す */
    }
}

/* ---- 航海日誌(新着3件の画像付きカード) ----
   ショートコード[nagi_voyage_logs]の出力用。
   見出し(本のアイコン+明朝体)・リード文・一覧リンクを1行に並べ、その下に3枚のカード */
.nagi-logs {
    --nagi-wide: min(1080px, calc(100vw - 48px));
    width: var(--nagi-wide);
    max-width: none;
    margin: 3.5em 0 0;
    margin-left: calc((100% - var(--nagi-wide)) / 2);
    padding-bottom: 4em; /* 下の「はじめての方へ」の帯との間隔 */
    box-sizing: border-box;
}
.nagi-logs-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4em 1.2em;
    margin-bottom: 1em;
}
.nagi-logs h2.nagi-logs-title {
    display: flex;
    align-items: center;
    gap: 0.45em;
    font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-weight: 700;
    font-size: 1.4em;
    letter-spacing: 0.06em;
    color: #1F3A5F;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}
.nagi-logs h2.nagi-logs-title::before {
    content: "";
    display: block;
    position: static;
    flex: 0 0 1.1em;
    width: 1.1em;
    height: 1.1em;
    border: none;
    margin: 0;
    transform: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B6B3E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10 5 7 4.5 3.5 5v13c3.5-.5 6.5 0 8.5 1.5 2-1.5 5-2 8.5-1.5V5C17 4.5 14 5 12 6.5z'/%3E%3Cpath d='M12 6.5v13'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nagi-logs h2.nagi-logs-title::after {
    content: none;
}
.nagi-logs p.nagi-logs-lead {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.88em;
    color: #6B6960;
}
.nagi-logs a.nagi-logs-more {
    margin-left: auto;
    font-size: 0.88em;
    font-weight: 700;
    color: #1F3A5F;
    text-decoration: none;
    white-space: nowrap;
}
.nagi-logs a.nagi-logs-more::after {
    content: "→";
    margin-left: 0.5em;
}
.nagi-logs a.nagi-logs-more:hover {
    text-decoration: underline;
}

.nagi-logs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.nagi-log-card {
    background: #fff;
    border: 1px solid #ECE6DA;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nagi-log-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.nagi-log-card > a {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
/* 画像:カードの内側に少し余白をとり、角を丸めた16:9 */
.nagi-log-thumb {
    margin: 8px 8px 0;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    background: #EFEBE3; /* 画像の読み込み前の下地 */
}
.nagi-log-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}
.nagi-log-body {
    padding: 0.9em 1.2em 1.3em;
}
.nagi-log-date {
    display: block;
    font-size: 0.8em;
    color: #6B6960;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.3em;
}
.nagi-logs h3.nagi-log-title {
    font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1.5;
    color: #1F3A5F;
    margin: 0 0 0.5em;
    padding: 0;
    border: none;
    background: none;
}
.nagi-logs h3.nagi-log-title::before,
.nagi-logs h3.nagi-log-title::after {
    content: none;
}
.nagi-logs p.nagi-log-excerpt {
    margin: 0;
    font-size: 0.88em;
    line-height: 1.8;
    color: #555;
    /* 3行で打ち切る */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* スマホ:カードは1列、見出しまわりは折り返す */
@media (max-width: 600px) {
    .nagi-logs {
        width: auto;
        margin: 3em 0 0;
    }
    .nagi-logs h2.nagi-logs-title {
        font-size: 1.25em;
    }
    .nagi-logs p.nagi-logs-lead {
        flex-basis: 100%;
        order: 3;
    }
    .nagi-logs-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ---- はじめての方へ(ページ最下部のベージュ帯) ----
   基準デザインどおり、画面の横幅いっぱいの帯。左に見出し+説明文、右に白枠のチェックリスト。
   帯の右側に羅針盤の線画をうっすら透かしている */
body.home {
    overflow-x: clip; /* 横幅いっぱいの帯でスクロールバー分の横ずれが出ないようにする */
}
.home #content.l-content {
    margin-bottom: 0;  /* 帯をフッターに直接つなげる */
    padding-bottom: 0;
}
.nagi-guide {
    position: relative;
    width: 100vw;
    max-width: none;
    margin: 0;
    margin-left: calc(50% - 50vw);
    background: #F1EBDF;
    border-top: 1px solid #E6DDCB;
    overflow: hidden;
}
.nagi-guide::after {
    content: "";
    position: absolute;
    right: -110px;
    top: 50%;
    width: 360px;
    height: 360px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%238B6B3E' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='50' r='44'/%3E%3Ccircle cx='50' cy='50' r='38'/%3E%3Cpath d='M50 6v8M50 86v8M6 50h8M86 50h8'/%3E%3Cpath d='M50 16L56 44L84 50L56 56L50 84L44 56L16 50L44 44Z'/%3E%3Cpath d='M50 28L53 47L72 50L53 53L50 72L47 53L28 50L47 47Z' transform='rotate(45 50 50)'/%3E%3Ccircle cx='50' cy='50' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.2;
    pointer-events: none;
}
.nagi-guide-inner {
    position: relative;
    z-index: 1;
    width: min(1080px, calc(100vw - 48px));
    margin: 0 auto;
    padding: 3.2em 0;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2.5em;
    align-items: center;
}
.nagi-guide h2.nagi-guide-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2em 0.45em;
    font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-weight: 700;
    font-size: 1.4em;
    letter-spacing: 0.06em;
    color: #1F3A5F;
    text-align: left;
    margin: 0 0 0.8em;
    padding: 0;
    border: none;
    background: none;
}
.nagi-guide h2.nagi-guide-title::before {
    content: "";
    display: block;
    position: static;
    flex: 0 0 1.1em;
    width: 1.1em;
    height: 1.1em;
    border: none;
    margin: 0;
    transform: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B6B3E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h10v17l-5-3.5-5 3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nagi-guide h2.nagi-guide-title::after {
    content: none;
}
.nagi-guide-sub {
    font-size: 0.62em;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #1F3A5F;
    margin-left: 0.4em;
}
.nagi-guide p.nagi-guide-text {
    margin: 0;
    font-size: 0.92em;
    line-height: 2;
    color: #444;
}
.nagi-guide ul.nagi-guide-list {
    list-style: none;
    margin: 0;
    padding: 1.4em 1.6em;
    background: rgba(255, 255, 255, 0.88); /* 羅針盤の透かしがうっすら透けて見えるよう、ごくわずかに半透明 */
    border: 1px solid #E8E1D3;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.nagi-guide ul.nagi-guide-list li {
    position: relative;
    margin: 0;
    padding: 0.45em 0 0.45em 1.8em;
    font-size: 0.88em;
    line-height: 1.7;
    color: #444;
    border: none;
}
/* SWELLのリスト装飾(点)を打ち消して、チェックマークに置き換える */
.nagi-guide ul.nagi-guide-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 1.1em;
    height: 1.1em;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B6B3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nagi-guide ul.nagi-guide-list li a {
    color: #1F3A5F;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* スマホ:1列にして、透かしを小さく */
@media (max-width: 600px) {
    .nagi-guide-inner {
        grid-template-columns: 1fr;
        gap: 1.6em;
        padding: 2.6em 0;
    }
    .nagi-guide h2.nagi-guide-title {
        font-size: 1.25em;
    }
    .nagi-guide ul.nagi-guide-list {
        padding: 1.1em 1.2em;
    }
    .nagi-guide::after {
        width: 220px;
        height: 220px;
        right: -70px;
        top: 70px;
        transform: none;
    }
}

/* ---- ヒーロー(SWELLメインビジュアル)の文字 ----
   文字の中身・位置(右)・色(#1F3A5F)はカスタマイザーで設定し、
   ここでは書体・大きさ・改行位置・読みやすさだけを整える。
   ・コピーと説明文を右側に置いたまま、行頭(左端)をそろえる
   ・コピーは「実地確認を積み重ねた」で改行、説明文は「〜クエストを、」で改行 */
#main_visual .p-mainVisual__textLayer {
    display: grid;
    justify-content: end;    /* 文字のかたまりは右側に置く */
    justify-items: start;    /* かたまりの中の行頭は左でそろえる */
    align-content: center;
    row-gap: 0.9em;
    text-align: left;
}
#main_visual .p-mainVisual__textLayer [class*="slideTitle"] {
    font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2.4rem);
    line-height: 1.55;
    letter-spacing: 0.06em;
    max-width: 10.8em;       /* 「実地確認を積み重ねた」(10文字)の直後で2行目に送る幅 */
    margin: 0;
    text-shadow: 0 0 18px rgba(255, 248, 235, 0.85), 0 0 4px rgba(255, 248, 235, 0.6);
}
#main_visual .p-mainVisual__textLayer [class*="slideText"] {
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    line-height: 2;
    letter-spacing: 0.04em;
    max-width: 24em;         /* 2行に収まる幅。改行位置はカスタマイザーのサブテキスト内の改行で決める */
    margin: 0;
    text-shadow: 0 0 12px rgba(255, 248, 235, 0.9), 0 0 3px rgba(255, 248, 235, 0.7);
}

/* スマホ:縦長のスマホ用画像(上に船・下に海)に合わせ、文字は画像の下の海の上・左寄せに置く。
   海は暗い青なので、スマホのときだけ文字を白系にし、紺色の影で読みやすくする。
   (夕日が映る右下は明るいので避け、青の濃い左側に寄せている。PCの紺色の文字には影響しない) */
@media (max-width: 600px) {
    #main_visual .p-mainVisual__textLayer {
        justify-content: start;  /* 文字のかたまりを左に */
        align-content: end;      /* 画像の下端(海の上)に */
        row-gap: 0.35em;
        padding: 0 18px 14px;
        box-sizing: border-box;
    }
    #main_visual .p-mainVisual__textLayer [class*="slideTitle"] {
        font-size: 1.1rem;
        color: #FFFFFF !important;
        text-shadow: 0 1px 3px rgba(10, 25, 45, 0.75), 0 0 14px rgba(10, 25, 45, 0.55);
    }
    #main_visual .p-mainVisual__textLayer [class*="slideText"] {
        font-size: 0.68rem;
        line-height: 1.7;
        color: #F3EEE4 !important;
        text-shadow: 0 1px 2px rgba(10, 25, 45, 0.8), 0 0 10px rgba(10, 25, 45, 0.55);
    }
}


/* ---- 装飾の仕上げ(線画モチーフ) ----
   主張しすぎないよう、どれも薄い線だけで描いている。カードの枠・影は変更しない。 */

/* 背景:右上にポルトラーノ海図(大航海時代の海図)の航程線、左下寄りに点線の航路と小さな羅針盤 */
.home #content.l-content {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%238B6B3E' stroke-width='1'%3E%3Cg stroke-opacity='0.09'%3E%3Cpath d='M300 300L600.0 300.0M300 300L577.2 414.8M300 300L512.1 512.1M300 300L414.8 577.2M300 300L300.0 600.0M300 300L185.2 577.2M300 300L87.9 512.1M300 300L22.8 414.8M300 300L0.0 300.0M300 300L22.8 185.2M300 300L87.9 87.9M300 300L185.2 22.8M300 300L300.0 0.0M300 300L414.8 22.8M300 300L512.1 87.9M300 300L577.2 185.2M520.0 300.0L300.0 520.0M520.0 300.0L144.4 455.6M520.0 300.0L144.4 144.4M520.0 300.0L300.0 80.0M455.6 455.6L144.4 455.6M455.6 455.6L80.0 300.0M455.6 455.6L300.0 80.0M455.6 455.6L455.6 144.4M300.0 520.0L80.0 300.0M300.0 520.0L144.4 144.4M300.0 520.0L455.6 144.4M144.4 455.6L144.4 144.4M144.4 455.6L300.0 80.0M80.0 300.0L300.0 80.0M80.0 300.0L455.6 144.4M144.4 144.4L455.6 144.4'/%3E%3C/g%3E%3Cg stroke-opacity='0.16'%3E%3Ccircle cx='300' cy='300' r='220'/%3E%3Ccircle cx='520.0' cy='300.0' r='5'/%3E%3Ccircle cx='455.6' cy='455.6' r='5'/%3E%3Ccircle cx='300.0' cy='520.0' r='5'/%3E%3Ccircle cx='144.4' cy='455.6' r='5'/%3E%3Ccircle cx='80.0' cy='300.0' r='5'/%3E%3Ccircle cx='144.4' cy='144.4' r='5'/%3E%3Ccircle cx='300.0' cy='80.0' r='5'/%3E%3Ccircle cx='455.6' cy='144.4' r='5'/%3E%3Ccircle cx='300' cy='300' r='40'/%3E%3Cpath d='M300 250L309 291L350 300L309 309L300 350L291 309L250 300L291 291Z'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300' fill='none' stroke='%238B6B3E' stroke-width='1'%3E%3Cpath d='M20 260C90 250 110 170 180 160S300 190 330 110 390 40 405 30' stroke-dasharray='2 7' stroke-opacity='0.3' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='260' r='4' stroke-opacity='0.35'/%3E%3Cg stroke-opacity='0.2' transform='translate(300 210)'%3E%3Ccircle r='34'/%3E%3Cpath d='M0 -44V44M-44 0H44'/%3E%3Cpath d='M0 -28L5 -5L28 0L5 5L0 28L-5 5L-28 0L-5 -5Z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: right -180px top -40px, left -60px top 1150px;
    background-size: 640px auto, 460px auto;
}

/* ヒーロー:コピーの上に、小さく「大航海時代 Online」(どのゲームのサイトかを最初に伝える) */
#main_visual .p-mainVisual__textLayer [class*="slideTitle"]::before {
    content: "大航海時代 Online";
    display: block;
    font-size: 0.52em;      /* コピー(見出し)の約半分。補助ラベルとして明確に読める大きさ */
    font-weight: 700;
    letter-spacing: 0.06em; /* 装飾的な広い字間をやめ、ひとまとまりの名前として読ませる */
    line-height: 1.4;
    color: #7A5A2E;         /* 金茶を少し濃くして、明るい空の上でも読めるように */
    margin-bottom: 0.45em;
}

/* ヒーロー:コピーの下に、短い金色の線を1本 */
#main_visual .p-mainVisual__textLayer [class*="slideTitle"]::after {
    content: "";
    display: block;
    width: 56px;
    height: 1px;
    margin-top: 0.45em;
    background: #B08D57;
    opacity: 0.8;
}

@media (max-width: 600px) {
    /* スマホでは背景モチーフを小さくし、本文の裏に重なりすぎないようにする */
    .home #content.l-content {
        background-size: 380px auto, 280px auto;
        background-position: right -150px top -30px, left -80px top 1400px;
    }
    #main_visual .p-mainVisual__textLayer [class*="slideTitle"]::after {
        width: 36px;
        margin-top: 0.3em;
        background: #D9BE8C;    /* 暗い海の上でも見えるよう、金色を明るめに */
    }
    #main_visual .p-mainVisual__textLayer [class*="slideTitle"]::before {
        font-size: 0.62em;
        letter-spacing: 0.04em;
        margin-bottom: 0.25em;
        color: #E8D3A8;         /* 暗い海の上では明るい金色(PCは濃い金茶のまま) */
    }
}


/* ---- 最新の更新:右端の学問セル(ステータスパネル) ----
   PHPが組の最後に1つだけ出力する .nagi-update-gakumon を、組の右端に「高さいっぱいの独立したセル」として重ねる。
   アイコンが主役(大きさは固定)、学問名はその下に小さく控えめに添えて、1つのユニットとして中央にそろえる。
   セル部分のクリックは下の行のリンクに通す(pointer-events: none) */
.nagi-update-group {
    position: relative;
}
.nagi-update-gakumon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 8em;            /* 行の中の学問セル用の空欄と同じ幅 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    pointer-events: none;
}
/* 枠の角丸に合わせる(最初と最後の組) */
.nagi-recent-updates-title + .nagi-update-group .nagi-update-gakumon {
    border-top-right-radius: 5px;
}
.nagi-update-group:last-child .nagi-update-gakumon {
    border-bottom-right-radius: 5px;
}
.nagi-recent-updates img.nagi-update-gakumon-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    margin: 0;
    border: none;
    border-radius: 50%;
    box-shadow: none;
}
/* 博物館の展示:学問アイコンの代わりに展示の写真を丸く切り抜いて出す(2026-10-18追加) */
.nagi-recent-updates img.nagi-update-gakumon-icon.-museum {
    object-fit: cover;
    border: 1px solid #D6C8B1;
}
.nagi-update-gakumon-name {
    position: relative;
    z-index: 1;
    margin-top: -9px;      /* アイコンの下端に少し重ねて、1つのバッジとして見せる */
    padding: 2px 9px;
    background: #fff;
    border: 1px solid #E6DDCB;
    border-radius: 999px;
    font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-weight: 600;
    font-size: 0.7em;
    line-height: 1.4;
    letter-spacing: 0.06em;
    color: #6E5B3E;        /* 控えめな金茶。小さな文字でも読める濃さ */
    white-space: nowrap;
}
/* 1行だけの組(地図由来など)も、学問セルが収まる高さを確保する */
.nagi-recent-updates li.nagi-recent-updates-item:only-child > a {
    min-height: 108px;
}

/* スマホ:セルを細くし、学問名は省略(意味は title 属性で補う) */
@media (max-width: 600px) {
    .nagi-update-gakumon {
        width: 60px;
    }
    .nagi-recent-updates img.nagi-update-gakumon-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }
    .nagi-update-gakumon-name {
        display: none;
    }
    .nagi-recent-updates li.nagi-recent-updates-item:only-child > a {
        min-height: 64px;
    }
}


/* ---- 特徴カードの微装飾 ----
   (羊皮紙デザインへの変更に合わせて、上端の金線とアイコンの方位リングは廃止した) */


/* ---- はじめての方へ:左下の角に小さな帆船の線画(右端の羅針盤と対になる) ----
   説明文・訪問者カウンターに重ならないよう、帯の左下の角の空きに小さく置き、端で少し切れる位置にする。
   本文の左に帆船1隻分(約140px)の余白がとれない画面(幅1360px以下)では表示しない */
.nagi-guide::before {
    content: "";
    position: absolute;
    left: -18px;
    bottom: -14px;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%238B6B3E' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 132 L172 132 L160 150 Q100 158 42 150 Z'/%3E%3Cpath d='M36 141 H164'/%3E%3Cpath d='M150 132 L150 122 L178 118 L172 132'/%3E%3Cpath d='M28 132 L22 120 L50 122 L50 132'/%3E%3Cpath d='M100 132 V30 M70 132 V52 M132 132 V60'/%3E%3Cpath d='M84 44 Q100 50 116 44 L118 72 Q100 78 82 72 Z'/%3E%3Cpath d='M82 80 Q100 88 118 80 L120 112 Q100 120 80 112 Z'/%3E%3Cpath d='M58 62 Q70 67 82 62 L83 86 Q70 92 57 86 Z'/%3E%3Cpath d='M57 92 Q70 98 83 92 L84 118 Q70 124 56 118 Z'/%3E%3Cpath d='M132 64 L132 116 L156 116 Z'/%3E%3Cpath d='M100 30 V24 L110 26 L100 28'/%3E%3Cpath d='M100 30 L22 120 M100 30 L172 118 M70 52 L28 125 M132 60 L178 118' stroke-opacity='0.55' stroke-width='0.6'/%3E%3Cpath d='M10 162 Q30 156 50 162 T90 162 T130 162 T170 162 T194 160' stroke-opacity='0.7'/%3E%3Cpath d='M30 172 Q50 167 70 172 T110 172 T150 172' stroke-opacity='0.5'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.5;  /* 小さく置くぶん、線を元の太さに戻し濃さも上げて、輪郭が分かるようにする */
    pointer-events: none;
}
@media (max-width: 1360px) {
    .nagi-guide::before {
        display: none;
    }
}


/* ---- はじめての方へ:訪問者カウンター「訪れた航海者」 ----
   ショートコード[nagi_visitor_count]の出力用。説明文の下に置く。
   短い金線 → 小さなラベル → 明朝体の紺の数字(主役)+補助の「人」 → 計測開始日、の縦積み。
   数字はページのHTMLに最初から入っているため、表示後に高さが変わることはない(CLS対策) */
.nagi-guide .nagi-visitors {
    margin-top: 1.6em;
}
.nagi-guide .nagi-visitors::before {
    content: "";
    display: block;
    width: 36px;
    height: 1px;
    background: #B08D57;
    margin-bottom: 0.9em;
}
.nagi-guide .nagi-visitors-label {
    display: block;
    font-size: 0.78em;
    letter-spacing: 0.08em;
    color: #6E6558;
}
.nagi-guide .nagi-visitors-count {
    display: block;
    font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-weight: 700;
    font-size: 1.9em;
    line-height: 1.35;
    letter-spacing: 0.04em;
    color: #1F3A5F;
    font-variant-numeric: tabular-nums; /* 桁が増えても数字の幅をそろえる */
    white-space: nowrap;   /* 桁が増えても、数字と「人」の途中で折り返さない */
}
.nagi-guide .nagi-visitors-unit {
    font-size: 0.45em;     /* 数字より小さく、補助的に */
    font-weight: 600;
    letter-spacing: 0;
    color: #6E6558;
    margin-left: 0.25em;
}
.nagi-guide .nagi-visitors-since {
    display: block;
    font-size: 0.74em;
    letter-spacing: 0.04em;
    color: #6E6558;
}
@media (max-width: 600px) {
    .nagi-guide .nagi-visitors {
        margin-top: 1.3em;
    }
    .nagi-guide .nagi-visitors-count {
        font-size: 1.7em;
    }
}