@charset "UTF-8";

/* =========================================
   共通タイトル等
========================================= */
.c-sec-title { text-align: center; font-size: 32px; color: var(--color-blue); margin-bottom: 40px; line-height: 1.4; }
.c-sec-title small { display: block; font-size: 16px; color: var(--color-text); margin-top: 10px; font-family: var(--font-base); }

/* =========================================
   ヒーローエリア
========================================= */
.p-page-hero { position: relative; width: 100%; height: 50vh; min-height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; }
.p-page-hero__text-wrap { position: relative; z-index: 10; }
.p-page-hero__title { font-size: 40px; letter-spacing: 0.1em; margin-bottom: 10px; }
.p-page-hero__sub { font-size: 16px; opacity: 0.9; }

/* =========================================
   動画・画像ギャラリー枠（並び替えのルール）
========================================= */
.p-gallery-section { padding: 80px 0; background-color: #fff; }
.p-gallery-section:nth-of-type(even) { background-color: #FDFCF8; }
.p-gallery-grid { display: grid; gap: 15px; margin-bottom: 30px; }

/* PC時の列数指定 */
.p-gallery-grid--landscape { grid-template-columns: repeat(2, 1fr); }
.p-gallery-grid--portrait-3 { grid-template-columns: repeat(3, 1fr); }
.p-gallery-grid--portrait-4 { grid-template-columns: repeat(4, 1fr); }

/* NEW: 海の画像ギャラリー用（縦長2列・中央揃え） */
.p-gallery-grid--portrait-2 { grid-template-columns: repeat(2, 1fr); gap: 15px; max-width: 600px; margin: 0 auto 30px auto; }

/* 画像・動画のトリミング設定 */
.p-gallery-item { position: relative; overflow: hidden; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); background-color: #eee; }
.p-gallery-item--portrait { aspect-ratio: 9/16; }
.p-gallery-item--landscape { aspect-ratio: 16/9; }
.p-gallery-item--photo { aspect-ratio: 4/3; }
.p-gallery-item video, .p-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* スマホ時の列数指定（自動で折り返し） */
@media screen and (max-width: 768px) {
    .p-gallery-section { padding: 60px 0; }
    .p-gallery-grid--landscape { grid-template-columns: 1fr; }
    .p-gallery-grid--portrait-3, .p-gallery-grid--portrait-4 { grid-template-columns: repeat(2, 1fr); }
    /* スマホでも2列を維持 */
    .p-gallery-grid--portrait-2 { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
}

/* =========================================
   周辺案内：アクセス拠点 (元のジグザグラインに復元！)
========================================= */
.p-guide-access { padding: 100px 0; background-color: #fff; }
.p-guide-timeline { max-width: 800px; margin: 0 auto; position: relative; padding: 40px 0; }
.p-guide-timeline::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background-color: var(--color-accent); opacity: 0.3; }
.p-guide-timeline__start { text-align: center; font-size: 20px; font-weight: 700; color: var(--color-green); margin-bottom: 60px; position: relative; z-index: 10; }
.p-guide-timeline__start::after { content: ''; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background-color: var(--color-green); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--color-green); }
.p-guide-timeline__list { display: flex; flex-direction: column; gap: 60px; }
.p-guide-timeline__item { position: relative; width: 50%; padding-right: 40px; }
.p-guide-timeline__item--right { margin-left: auto; padding-right: 0; padding-left: 40px; }
.p-guide-timeline__item::after { content: ''; position: absolute; top: 0; right: -8px; width: 16px; height: 16px; border-radius: 50%; background-color: var(--color-accent); border: 3px solid #fff; z-index: 10; }
.p-guide-timeline__item--right::after { right: auto; left: -8px; }
.p-guide-timeline__time { font-size: 16px; font-weight: 700; color: var(--color-accent); margin-bottom: 10px; }
.p-guide-timeline__time span { font-size: 24px; margin: 0 5px; }
.p-guide-timeline__card { background-color: #FDFCF8; border-radius: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.p-guide-timeline__card img, .p-guide-timeline__card video { width: 100%; border-radius: 8px; margin-bottom: 15px; object-fit: cover; aspect-ratio: 16/9; }
.p-guide-timeline__card h3 { font-size: 18px; color: var(--color-blue); margin-bottom: 10px; }

/* =========================================
   周辺案内：川遊び (上部のテキスト部分)
========================================= */
.p-guide-river__inner { text-align: center; }
.p-guide-river__title { font-size: 28px; color: var(--color-green); margin-bottom: 20px; line-height: 1.5; }
.p-guide-river__text { font-size: 16px; line-height: 2; }

/* =========================================
   周辺案内：ローカルスポット (3列グリッドは削除)
========================================= */
.p-guide-local { padding: 80px 0; background-color: #fff; }

/* NEW: 文字ありスポット用の2列グリッド */
.p-guide-local__grid-featured { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 800px; margin: 0 auto; }

.p-guide-local__card { background-color: #FDFCF8; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.p-guide-local__img { aspect-ratio: 4/3; }
.p-guide-local__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; cursor: zoom-in; }
/* ホバー時の画像拡大アニメーション (featuredグリッド内のカードにも適用) */
.p-guide-local__card:hover .p-guide-local__img img { transform: scale(1.05); opacity: 0.9; }

.p-guide-local__body { padding: 20px; text-align: center; }
.p-guide-local__name { font-size: 18px; font-weight: 700; color: var(--color-text); }

@media screen and (max-width: 768px) {
    .p-guide-access, .p-guide-local { padding: 60px 0; }
    /* スマホでは1列 */
    .p-guide-local__grid-featured { grid-template-columns: 1fr; }
    .p-guide-timeline::before { left: 20px; transform: none; }
    .p-guide-timeline__start { text-align: left; padding-left: 50px; margin-bottom: 40px; }
    .p-guide-timeline__start::after { bottom: auto; top: 50%; left: 12px; transform: translateY(-50%); }
    .p-guide-timeline__item { width: 100%; padding-right: 0; padding-left: 50px; }
    .p-guide-timeline__item--right { margin-left: 0; padding-left: 50px; }
    .p-guide-timeline__item::after, .p-guide-timeline__item--right::after { right: auto; left: 12px; top: 10px; }
    .p-page-hero { height: 40vh; min-height: 300px; }
    .p-page-hero__title { font-size: 28px; }
    .p-guide-river__title { font-size: 22px; }
}

/* =========================================
   画像拡大用モーダル (共通CSSに統合)
========================================= */
/* .c-modal は共通CSSにあるため削除 */