@charset "utf-8";

/* ==========================================================================
   全体共通設定
   ========================================================================== */
.gujo-style-area {
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.7;
}

.gujo-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.w-100 { width: 100%; height: auto; display: block; }

/* ==========================================================================
   イントロダクション（ロゴ＋見出し）
   ========================================================================== */
.taiketsu-intro {
    padding: 80px 0;
    text-align: center;
}

/* PC：ロゴと見出しを横並び */
.intro-heading-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}

.vs-logo-main {
    width: 110px;
    height: 110px;
    object-fit: contain;
}

.intro-title {
    font-family: "Noto Serif JP", serif;
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

.intro-title .c-mishima { color: #59AA86; }
.intro-title .c-gujo { color: #F86254; }

.intro-text {
    font-size: 16px;
    text-align: left;
    max-width: 100%;
    margin: 0 auto;
}

/* イントロスマホ：Figma通りに横並びを維持 */
@media (max-width: 767px) {
    .taiketsu-intro { padding: 40px 0; }
    .intro-heading-flex {
        flex-direction: row; /* 横並びを維持 */
        gap: 10px;
        text-align: left;
    }
    .vs-logo-main {
        width: 80px;
        height: auto;
    }
    .intro-title {
        font-size: 24px;
        line-height: 1.3;
        width: 210px; /* Figma指定の幅 */
    }
    .intro-text { font-size: 15px; }
}

/* ==========================================================================
   対決セクション共通（HTML簡略化対応版）
   ========================================================================== */
.taiketsu-section { padding: 45px 0; }

.section-title {
    font-family: "Noto Serif JP", serif;
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
}

.vs-card-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}

/* ==========================================================================
   対決セクション共通：シンプルスタイル（枠線・背景なし）
   ========================================================================== */
.vs-card-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}

/* カード本体：枠線とパディングを削除 */
.vs-card {
    position: relative;
    width: 383px; /* PC */
}

.vs-card img {
    width: 100%;
    aspect-ratio: 190/127;
    object-fit: cover;
    display: block;
    /* 画像自体に角丸をつける場合は以下を有効に */
    /* border-radius: 4px; */
}

/* ラベル：画像の上に直接乗せるスタイル */
.label {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    padding: 4px 15px;
    font-weight: 700;
    font-size: 14px;
    z-index: 10;
    /* 角丸をデザインに合わせる */
    border-radius: 0 0 4px 0;
}
.is-left .label { background-color: #59AA86; }
.is-right .label { background-color: #F86254; }

/* 画像下のテキスト（湧き出る「水」など） */
.img-caption {
    text-align: center;
    margin-top: 15px;
    font-weight: 700;
    font-size: 18px;
}

/* 中央のVSロゴ */
.vs-mark {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
}

/* ==========================================================================
   景色対決セクション背景
   ========================================================================== */
.is-view { background-color: #fdf4d1; }

/* スマホ用調整 */
@media (max-width: 767px) {
    .vs-card-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    .vs-card { width: 100%; }
    .vs-mark { width: 80px; height: 80px; margin: 10px 0; }
    .label { font-size: 12px; padding: 2px 10px; }
}

.vs-mark { width: 130px; height: 130px; flex-shrink: 0; }

.vs-body-text { font-size: 16px; text-align: left; }

/* マーカー */
.marker-green { background: linear-gradient(transparent 70%, #9CE0C2 70%); }
.marker-red { background: linear-gradient(transparent 70%, #FFA79F 70%); }

/* 対決セクションスマホ */
@media (max-width: 767px) {
    .taiketsu-section { padding: 40px 0; }
    .vs-card-wrapper { flex-direction: column; gap: 20px; }
    .vs-card { width: 100%; }
}


/* ==========================================================================
   背景色：各セクション用
   ========================================================================== */
.is-water { background-color: #e6f7fd; }
.is-unagi { background-color: #fdf0e1; }

/* ==========================================================================
   追加：セクション間の余白（PC: 90px / SP: 0）
   ========================================================================== */
.taiketsu-section {
    margin-bottom: 90px; /* PCでのセクション間の白い隙間 */
}

@media (max-width: 767px) {
    .taiketsu-section {
        margin-bottom: 0; /* スマホでは隙間なし */
    }
}

/* ==========================================================================
   長いもの対決セクション（追記分）
   ========================================================================== */
.is-long {
    background-color: #f1ebfd; /* 薄紫の背景 */
}

/* 景色対決用の背景色も先に定義しておきます */
.is-view {
    background-color: #fdf4d1; /* 薄黄の背景 */
}

/* ==========================================================================
   フッターインフォ（まだまだ増えるよ！）
   ========================================================================== */

.taiketsu-footer-info {
    padding: 0 0 100px;
    text-align: center;
}

/* PC：ねことテキストを横並び */
.footer-info-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

/* ねこのイラスト：width: 78px; height: 98px; */
.cat-illustration {
    width: 78px;
    height: 98px;
    aspect-ratio: 39/49;
    object-fit: contain;
}

/* メッセージ： Serif 32px 170% */
.footer-info-title {
    font-family: "Noto Serif JP", serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.7; /* 170% */
    color: #000;
    margin: 0;
    white-space: nowrap; /* PCでは1行 */
}

/* 緑のボタン */
.btn-top-return {
    display: inline-block;
    background-color: #59AA86; /* 三島カラー */
    color: #fff !important;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 18px;
    padding: 15px 80px;
    border-radius: 5px;
    text-decoration: none !important;
    transition: opacity 0.3s;
}

.btn-top-return:hover {
    opacity: 0.8;
}

/* スマホ用 */
@media (max-width: 767px) {
    .footer-info-flex {
    padding-top: 30px;
}
}

/* ==========================================================================
   TABITABI郡上 外部リンクボタン
   ========================================================================== */

.taiketsu-external-link {
    margin-top: 30px;
}

.btn-gujo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #F86254; /* 郡上カラー */
    color: #fff !important;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 18px;
    padding: 15px 60px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: opacity 0.3s;
    gap: 10px; /* テキストとアイコンの隙間 */
}

.btn-gujo-link:hover {
    opacity: 0.8;
}

/* 外部リンクアイコンのサイズ調整 */
.icon-blank {
    width: 18px;
    height: auto;
}

/* スマホ用 */
@media (max-width: 767px) {
    .btn-gujo-link {
        width: 100%;
        max-width: 300px;
        padding: 12px 0;
        font-size: 16px;
    }
}

/* ==========================================================================
   サイト内メニューリンク（ナビゲーション）
   ========================================================================== */

/* 共通設定 */
.taiketsu-nav {
    width: 100%;
    background: #fff;
    overflow: hidden;
}

/* KV下のナビのみSPで非表示にする */
.taiketsu-hero + .taiketsu-nav {
    display: block;
}

.taiketsu-nav-inner {
    display: flex;
    justify-content: center;
    width: 100%;
}

.taiketsu-nav-item {
    display: flex;
    width: 50%; /* 親要素が1110px想定なら各555px */
    max-width: 555px;
    height: 145px;
    padding: 44px 0; /* 左右paddingはflex内の調整に任せる */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    background: #FFF;
    transition: opacity 0.3s;
    position: relative;
}

.taiketsu-nav-item:hover {
    opacity: 0.8;
}

/* 左：三島カラー */
.taiketsu-nav-item.is-mishima {
    border-top: 5px solid #CFECF4;
    border-bottom: 5px solid #CFECF4;
}

/* 右：対決（イエロー）カラー */
.taiketsu-nav-item.is-taiketsu {
    border-top: 5px solid #F5CD66;
    border-bottom: 5px solid #F5CD66;
}

.taiketsu-nav-text {
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 700;
}

/* 下矢印アイコン（V字） */
.taiketsu-nav-arrow {
    display: block;
    width: 20px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l10 10L22 2'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* ==========================================================================
   ナビゲーション：スマホ（SP）
   ========================================================================== */
@media (max-width: 767px) {
    /* KV直後のナビを非表示 */
    .taiketsu-hero + .taiketsu-nav {
        display: none;
    }

    .taiketsu-nav-item {
        width: 100%;
        max-width: none;
        height: 120px;
    }

    /* Slickの矢印調整 */
    .slick-prev, .slick-next {
        z-index: 10;
        width: 35px;
        height: 35px;
    }
    .slick-prev { left: 10px; }
    .slick-next { right: 10px; }
}

/* ==========================================================================
   修正：サイト内メニューリンク（Figma数値を厳密に反映）
   ========================================================================== */
.taiketsu-nav-item {
    display: flex;
    width: 555px; /* Figma指定 */
    height: 60px; /* Figma指定 */
    padding: 44px 0; /* 左右paddingは中央配置のため0に調整 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.taiketsu-nav-text {
    color: #333;
    font-family: "Noto Serif JP", serif; /* Figma指定 */
    font-size: 20px; /* Figma指定 */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

@media (max-width: 767px) {
  .taiketsu-nav-item{
    padding: 28px 0;
  }
.taiketsu-nav-text {
    font-size: 16px;
  }
}

/* ==========================================================================
   修正：SP版 はみ出し対策 & カルーセル表示調整
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. まだまだ増えるよテキストのはみ出し修正 */
    .footer-info-title {
        font-size: 20px;
        white-space: normal; /* 折り返しを許可 */
        word-break: break-all;
        width: 100%;
        max-width: 280px; /* SPの画面幅に収める */
        margin: 0 auto;
    }
}


/* ==========================================================================
   TOPページ専用スタイル (Prefix: top-)
   ========================================================================== */

/* セクション基本 */
.top-section {
    padding: 90px 0; /* PC余白指定 */
}

.top-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

.top-section-title {
    font-family: "Noto Serif JP", serif;
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin: 0;
}

/* リード文 */
.top-lead { text-align: center; }
.top-lead-title {
    font-family: "Noto Serif JP", serif;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
}
.top-lead-text {
    max-width: 850px;
    margin: 0 auto;
}

/* 横並びレイアウト（共通） */
.top-flex-layout {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}
.top-flex-layout.is-reverse { flex-direction: row-reverse; }
.top-flex-img { width: 45%; flex-shrink: 0; }
.top-flex-content { flex: 1; }

/* QAボックス */
.top-qa-box {
    margin-top: 30px;
    padding: 30px;
    background: #fff;
    border: 2px solid #59AA86;
    border-radius: 8px;
}
.top-qa-title {
    font-family: "Noto Serif JP", serif;
    color: #59AA86;
    font-size: 20px;
    margin-bottom: 10px;
}

/* スポットカード */
.top-spot-card {
    display: flex;
    gap: 30px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    align-items: stretch;
}
.top-spot-img { width: 300px; flex-shrink: 0; }
.top-spot-img img { width: 100%; height: 100%; object-fit: cover; }
.top-spot-info { padding: 30px; }
.top-spot-info h3 { font-family: "Noto Serif JP", serif; font-size: 22px; margin-bottom: 10px; }

/* ボタン */
.top-btn-area { text-align: center; margin-top: 40px; }
.top-btn-link {
    display: inline-block;
    background: #59AA86;
    color: #fff;
    padding: 15px 60px;
    border-radius: 35px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}
.top-btn-link.is-taiketsu { background: #F86254; }
.top-btn-link:hover { opacity: 0.8; }

/* ==========================================================================
   スマホ調整
   ========================================================================== */
@media (max-width: 767px) {
    .top-section { padding: 50px 0; }
    .top-lead-title { font-size: 22px; }
    .top-flex-layout, .top-flex-layout.is-reverse, .top-spot-card {
        flex-direction: column;
    }
    .top-flex-img, .top-spot-img { width: 100%; }
    .top-spot-img { height: 200px; }
    .top-section-title { font-size: 24px; }
}

/* ==========================================================================
   TOP：リードセクション (Prefix: top-)
   ========================================================================== */

/* セクション全体の余白設定 */
.top-lead-section {
    padding: 90px 0; /* PC: 90px */
}

/* 見出し (H2) PC */
.top-lead-h2 {
    color: #333;
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 170%; /* 54.4px */
    margin-bottom: 50px;
    /* デザイン指示のトリム設定はブラウザ対応を考慮しつつマージンで調整 */
}

/* H2内のカラー指定 */
.top-c-mishima { color: #59AA86; }
.top-c-gujo    { color: #F86254; }
.top-c-black   { color: #333; }

/* アンダーライン（マーカー） */
.top-marker-green {
    background: linear-gradient(transparent 60%, #9CE0C2 60%);
    display: inline; /* 折り返しに対応 */
}

/* パラグラフ (Body) PC */
.top-lead-body p {
    color: #333;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%; /* 27.2px */
    margin-bottom: 1.7em;
}

.top-lead-body p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   スマホ調整 (SP)
   ========================================================================== */
@media (max-width: 767px) {
    .top-lead-section {
        padding: 40px 0; /* 共通ルールに基づき、必要に応じて 0 に変更可 */
    }

    /* 見出し (H2) SP */
    .top-lead-h2 {
        font-size: 24px;
        line-height: 170%; /* 40.8px */
        margin-bottom: 35px;
    }

    /* パラグラフ (Body) SP */
    .top-lead-body p {
        font-size: 15px;
        line-height: 170%; /* 25.5px */
        padding: 0;
        margin-bottom: 1.5em;
        text-align: left;
    }
}

/* ==========================================================================
   TOP：どうして三島と郡上なの？セクション
   ========================================================================== */

/* セクション全体 */
.gujo-style-area .top-why-section {
    padding: 20px 0 !important;
    background: #fff;
}

/* ヘッダー部分 */
.gujo-style-area .top-why-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
}
.gujo-style-area .top-why-header-icon {
    width: 60px;
    height: auto;
}
.gujo-style-area .top-why-h2 {
    font-family: "Noto Serif JP", serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    color: #333 !important;
    margin: 0 !important;
}

/* 導入コンテンツ（画像＋テキスト） */
.gujo-style-area .top-why-intro-flex {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 30px;
}
.gujo-style-area .top-why-intro-img {
    width: 48%;
    flex-shrink: 0;
}
.gujo-style-area .top-why-intro-text p {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #333 !important;
}

/* ベージュのボックス（Figma: #EFE9E2） */
.gujo-style-area .top-why-box {
    background: #EFE9E2;
    padding: 45px 84px !important; /* Figma指定 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.gujo-style-area .top-why-box-inner {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}
.gujo-style-area .top-why-box-ill {
    width: 240px;
    flex-shrink: 0;
}

/* ボックス内の見出し (H3) PC: 28px */
.gujo-style-area .top-why-box-h3 {
    font-family: "Noto Serif JP", serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important; /* 47.6px */
    color: #333 !important;
    margin-bottom: 15px !important;
}

/* ボックス内の本文 PC: 16px */
.gujo-style-area .top-why-box-body {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important; /* 27.2px */
    color: #333 !important;
    margin-bottom: 30px !important;
}

/* 赤ボタン (郡上赤: #F86254) */
.gujo-style-area .top-why-box-btn-wrap {
    width: 100%;
    text-align: center;
}
.gujo-style-area .top-why-box-btn {
    display: inline-block;
    background: #F86254;
    color: #fff !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 12px 60px;
    text-decoration: none !important;
    transition: opacity 0.3s;
}
.gujo-style-area .top-why-box-btn:hover {
    opacity: 0.8;
}

/* ==========================================================================
   スマホ調整 (SP)
   ========================================================================== */
@media (max-width: 767px) {
    .gujo-style-area .top-why-section {
        padding: 50px 0 !important;
    }
    .gujo-style-area .top-why-h2 {
        font-size: 24px !important;
    }
    .gujo-style-area .top-why-intro-flex {
        flex-direction: column;
        gap: 20px;
    }
    .gujo-style-area .top-why-intro-img {
        width: 100%;
    }
    .gujo-style-area .top-why-intro-text {
        padding: 0;
    }

    /* ボックス SP調整 */
    .gujo-style-area .top-why-box {
        padding: 40px 20px !important;
        margin: 0;
    }
    .gujo-style-area .top-why-box-inner {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .gujo-style-area .top-why-box-ill {
        width: 180px;
    }
    .gujo-style-area .top-why-box-h3 {
        font-size: 22px !important;
        text-align: center;
    }
    .gujo-style-area .top-why-box-body {
        font-size: 15px !important;
        text-align: left;
    }
    .gujo-style-area .top-why-box-btn {
        width: 100%;
        padding: 12px 0;
    }
}

/* ==========================================================================
   TOP：アクセスマップセクション (Prefix: top-map-)
   ========================================================================== */

/* セクション全体の余白（PC: 90px） */
.gujo-style-area .top-map-section {
    padding: 30px 0 !important;
    background: #fff;
}

/* セクション見出し (H2) PC: 32px / 170% */
.gujo-style-area .top-map-h2 {
    color: #333 !important;
    text-align: center !important;
    font-family: "Noto Serif JP", serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important; /* 170% */
    margin: 0 0 50px 0 !important;
}

/* レイアウト：横並び (PC) */
.gujo-style-area .top-map-flex {
    display: flex;
    align-items: center; /* 画像とテキストの垂直中央揃え */
    gap: 50px;
}

/* テキスト側 */
.gujo-style-area .top-map-content {
    flex: 1;
}

.gujo-style-area .top-map-body {
    color: #333 !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important; /* 27.2px */
    margin-bottom: 30px !important;
    text-align: left !important;
}

.gujo-style-area .top-map-body:last-child {
    margin-bottom: 0 !important;
}

/* マップ画像側 */
.gujo-style-area .top-map-img {
    width: 100%;
    flex-shrink: 0;
    margin-top: 20px;
}

/* --------------------------------------------------------------------------
   スマホ調整 (SP: H2 24px / Body 15px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .gujo-style-area .top-map-section {
        padding: 20px 0 0 0 !important; /* 下余白は次のセクションに任せて0 */
    }

    /* 見出し (H2) SP: 24px */
    .gujo-style-area .top-map-h2 {
        font-size: 24px !important;
        margin-bottom: 30px !important;
    }

    /* 縦並び切り替え */
    .gujo-style-area .top-map-flex {
        flex-direction: column;
        gap: 25px;
    }

    .gujo-style-area .top-map-body {
        font-size: 15px !important;
        line-height: 1.7 !important; /* 25.5px */
        padding: 0;
    }

    .gujo-style-area .top-map-img {
        width: 100%;
        padding: 0;
    }
}

/* ==========================================================================
   TOP：郡上観光スポットセクション (Prefix: top-spot-)
   ========================================================================== */

/* セクション全体の余白と背景 */
.gujo-style-area .top-spot-section {
    padding: 40px 0 !important;
    background-color: #D8EDF3; /* 三島観光スポットページ風の薄青 */
    margin:0 15px 40px !important; /* PCセクション間余白  */
}

/* セクション見出し */
.gujo-style-area .top-spot-h2 {
    font-family: "Noto Serif JP", serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    text-align: center !important;
    color: #333 !important;
    margin-bottom: 60px !important;
}

/* スポットカード基本 */
.gujo-style-area .top-spot-card {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
    background: inherit;
    box-shadow: inherit;
}
.gujo-style-area .top-spot-card.is-reverse {
    flex-direction: row-reverse;
}

/* 画像側 */
.gujo-style-area .top-spot-img {
    width: 45%;
    flex-shrink: 0;
}
.gujo-style-area .top-spot-img img {
    box-shadow: inherit;
    /* border-radius: 8px; 必要に応じて追加 */
}

/* テキスト側 */
.gujo-style-area .top-spot-content {
    flex: 1;
}
.gujo-style-area .top-spot-title {
    font-family: "Noto Serif JP", serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
    color: #333 !important;
}
.gujo-style-area .top-spot-body {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #333 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* ボタン（郡上赤） */
.gujo-style-area .top-spot-btn-wrap {
    text-align: center;
    margin-top: 20px;
}
.gujo-style-area .top-spot-btn {
    display: inline-block;
    background-color: #F86254; /* 郡上カラー [cite: 6] */
    color: #fff !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 12px 60px;
    text-decoration: none !important;
    border-radius: 4px;
    transition: opacity 0.3s;
}
.gujo-style-area .top-spot-btn:hover {
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   スマホ調整 (SP)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .gujo-style-area .top-spot-section {
        padding: 50px 0 !important;
        margin-bottom: 0 !important; /* SPセクション間余白: 0  */
    }
    .gujo-style-area .top-spot-h2 {
        font-size: 24px !important;
        margin-bottom: 30px !important;
    }
    .gujo-style-area .top-spot-card,
    .gujo-style-area .top-spot-card.is-reverse {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 50px;
    }
    .gujo-style-area .top-spot-img {
        width: 100%;
        padding: 0 15px;
    }
    .gujo-style-area .top-spot-content {
        padding: 0 15px;
    }
    .gujo-style-area .top-spot-title {
        font-size: 20px !important;
        text-align: center;
        margin-bottom: 10px !important;
    }
    .gujo-style-area .top-spot-body {
        font-size: 15px !important;
    }
    .gujo-style-area .top-spot-btn {
        width: calc(100% - 30px);
        padding: 12px 0;
    }
}

/* ==========================================================================
   TOP：対決誘導セクション (Prefix: top-compare-)
   ========================================================================== */

/* セクション全体の余白（PC: 90px） */
.gujo-style-area .top-compare-section {
    padding: 90px 0 !important;
    background: #fff;
}

/* セクション見出し (H2) PC: 32px / 170% */
.gujo-style-area .top-compare-h2 {
    color: #333 !important;
    text-align: center !important;
    font-family: "Noto Serif JP", serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    margin: 0 0 60px 0 !important;
}

/* メインコンテンツ：横並び (PC) */
.gujo-style-area .top-compare-flex {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 60px;
}

/* 画像側 */
.gujo-style-area .top-compare-img {
    width: 48%;
    flex-shrink: 0;
}
.gujo-style-area .top-compare-img img {
    border-radius: 4px; /* わずかな角丸 */
}

/* テキスト＋ボタン側 */
.gujo-style-area .top-compare-content {
    flex: 1;
}

.gujo-style-area .top-compare-body {
    color: #333 !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-bottom: 30px !important;
    text-align: left !important;
}

/* 共通：ピンク（赤）ボタン（Figma: #F86254） */
.gujo-style-area .top-btn-pink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #F86254 !important; /* 郡上赤（ピンク） */
    color: #fff !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 15px 50px;
    text-decoration: none !important;
    border-radius: 4px;
    transition: opacity 0.3s;
    min-width: 280px;
}
.gujo-style-area .top-btn-pink:hover {
    opacity: 0.8;
}

/* 下部中央のリンクボタン用ラップ */
.gujo-style-area .top-compare-footer-btn-wrap {
    text-align: center;
    border-top: 1px solid #eee; /* 境界線が必要な場合 */
    padding-top: 50px;
}

/* 外部リンクアイコン */
.gujo-style-area .top-icon-blank {
    width: 18px;
    height: auto;
    margin-left: 10px;
    filter: brightness(0) invert(1); /* アイコンを白に */
}

/* --------------------------------------------------------------------------
   スマホ調整 (SP: H2 24px / Body 15px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .gujo-style-area .top-compare-section {
        padding: 50px 0 !important;
    }

    .gujo-style-area .top-compare-h2 {
        font-size: 24px !important;
        margin-bottom: 30px !important;
    }

    /* 縦並び切り替え */
    .gujo-style-area .top-compare-flex {
        flex-direction: column;
        gap: 25px;
        margin-bottom: 40px;
    }

    .gujo-style-area .top-compare-img {
        width: 100%;
        padding: 0 15px;
    }

    .gujo-style-area .top-compare-content {
        padding: 0 15px;
        text-align: center; /* スマホではボタンとのバランスで中央寄せ */
    }

    .gujo-style-area .top-compare-body {
        font-size: 15px !important;
        text-align: left !important;
    }

    .gujo-style-area .top-btn-pink {
        width: 100%;
        min-width: 0;
        padding: 12px 0;
    }

    .gujo-style-area .top-compare-footer-btn-wrap {
        padding: 30px 15px 0;
    }
}

/* ==========================================================================
   TOP：共通ボタンパーツ
   ========================================================================== */

/* 三島グリーンボタン（#59AA86） */
.gujo-style-area .top-btn-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #59AA86 !important; /* 三島グリーン */
    color: #fff !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 15px 50px;
    text-decoration: none !important;
    border-radius: 4px;
    transition: opacity 0.3s;
    min-width: 280px;
}

/* ピンク（郡上赤）ボタン（#F86254） */
.gujo-style-area .top-btn-pink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #F86254 !important; /* 郡上赤 */
    color: #fff !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 15px 50px;
    text-decoration: none !important;
    border-radius: 4px;
    transition: opacity 0.3s;
    min-width: 280px;
}

.gujo-style-area .top-btn-green:hover,
.gujo-style-area .top-btn-pink:hover {
    opacity: 0.8;
}

/* スマホ用ボタン幅調整 */
@media (max-width: 767px) {
    .gujo-style-area .top-btn-green,
    .gujo-style-area .top-btn-pink {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 0 !important;
    }
}

/* ==========================================================================
   郡上スポット一覧ページ (Prefix: spot-)
   ========================================================================== */

/* 共通：背景と余白 [cite: 23] */
.gujo-style-area .spot-intro-section,
.gujo-style-area .spot-map-section,
.gujo-style-area .spot-list-section {
    padding-bottom: 90px !important;
}

/* リードエリア */
.gujo-style-area .spot-intro-h2 {
    font-family: "Noto Serif JP", serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 60px 0 40px !important;
    color: #333 !important;
}

.gujo-style-area .spot-intro-p {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    text-align: center !important;
    max-width: 850px;
    margin: 0 auto !important;
}

/* マップエリア */
.gujo-style-area .spot-map-wrap {
    text-align: center;
}
.gujo-style-area .spot-map-wrap img {
    max-width: 100%;
    height: auto;
}

/* スポットカード [cite: 22] */
.gujo-style-area .spot-card {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
}

.gujo-style-area .spot-card.is-reverse {
    flex-direction: row-reverse;
}

.gujo-style-area .spot-card-img {
    width: 45%;
    flex-shrink: 0;
}

.gujo-style-area .spot-card-content {
    flex: 1;
}

.gujo-style-area .spot-card-h3 {
    font-family: "Noto Serif JP", serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    display: inline-block;
}

.gujo-style-area .spot-card-p {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-bottom: 25px !important;
}

/* 4. 詳細を見るボタン (TABITABIピンク) */
.gujo-style-area .spot-btn-pink {
    display: inline-flex;
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center;
    background-color: #F86254 !important;
    color: #fff !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 12px 40px;
    text-decoration: none !important;
    border-radius: 4px;
    transition: opacity 0.3s;
    line-height: 1 !important; /* 行間の影響を排除 */
}

/* 外部リンクアイコンの微調整 */
.gujo-style-area .spot-icon-blank {
    width: 16px;
    height: auto;
    margin-left: 10px;
    filter: brightness(0) invert(1);
    /* 垂直方向の微調整：少し上に持ち上げて水平を強調 */
    transform: translateY(-1px);
    display: block; /* 余計な隙間を排除 */
}

/* スマホ用ボタン幅調整 */
@media (max-width: 767px) {
    .gujo-style-area .spot-btn-pink {
        width: 100% !important;
        padding: 15px 0 !important; /* スマホでは少し高さを出すと押しやすい */
    }
}

.gujo-style-area .spot-btn-pink:hover {
    opacity: 0.8;
}


/* --------------------------------------------------------------------------
   スマホ調整 (SP) [cite: 22, 23]
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .gujo-style-area .spot-intro-section,
    .gujo-style-area .spot-map-section,
    .gujo-style-area .spot-list-section {
        padding-bottom: 50px !important; /* SPは余白を詰める */
    }

    .gujo-style-area .spot-intro-h2 {
        font-size: 24px !important;
        margin: 40px 0 25px !important;
    }

    .gujo-style-area .spot-intro-p {
        font-size: 15px !important;
        text-align: left !important;
        padding: 0;
    }

    .gujo-style-area .spot-card,
    .gujo-style-area .spot-card.is-reverse {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 60px;
    }

    .gujo-style-area .spot-card-img {
        width: 100%;
    }

    .gujo-style-area .spot-card-content {
        padding: 0;
    }

    .gujo-style-area .spot-card-h3 {
        font-size: 20px !important;
        width: 100%;
        text-align: center;
    }

    .gujo-style-area .spot-card-p {
        font-size: 15px !important;
    }

    .gujo-style-area .spot-btn-pink {
        width: 100%;
        text-align: center;
        padding: 12px 0;
    }
}