/* =============================================
   キャンペーンページ用CSS
   ============================================= */
:root {
  --color-campaign-main: #0076D6;
  --color-campaign-sub: #BFEAF9;

  --color-white: #ffffff;
  --color-black: #000000;
  --color-light_blue: #00AAE8;

  --color-shiga-rally-east: #039985;
  --color-shiga-rally-west: #374DB9;
  --color-shiga-rally-south: #FFA040;
  --color-shiga-rally-north: #C42B2B;
}


/* --------------------------------
 * 滋賀周遊シールラリー - 2026/10/13追加
 * -------------------------------- */

/* 共通 -------------------- */
#shiga-rally {
    background-color: var(--color-campaign-sub, #BFEAF9);
}

/* コンテンツ幅 */
.group-inner-1120 > .group-inner-1120,
.group-inner-1120 > .wp-block-group__inner-container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

/* 画像 */
#shiga-rally img {
    width: 100% !important;
    border-image: none;
}

/* セクション */
.shiga-rally-sec-default {
    margin-bottom: clamp(32px, -64.000px + 12.5vw, 64px);
    padding-right: 16px;
    padding-left: 16px;
}

.shiga-rally-sec-default > .group-inner-1120,
.shiga-rally-sec-default > .wp-block-group__inner-container {
    background-color: var(--color-white, #ffffff);
    border: 4px solid var(--color-campaign-main, #0076D6);
    border-radius: 8px;
    overflow: hidden;
}

h2.shiga-rally_h2-title {
    display: flex;
    width: 100%;
    min-height: 56px;
    padding: 10px 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    color: var(--color-white);
    font-family: var(--font-noto);
    font-size: clamp(24px, -48.000px + 9.375vw, 48px);
    font-style: normal;
    font-weight: 700;
    text-align: center;
    line-height: 150%;
    letter-spacing: 1.2px;
    letter-spacing: clamp(1.2px, -2.400px + 0.469vw, 2.4px);;
    border: 4px solid var(--color-campaign-main, #0076D6);
    background: var(--color-campaign-main, #0076D6);
}

article.shiga-rally-article-wrap {
    padding-top: clamp(32px, -64.000px + 12.5vw, 64px);
    padding-right: clamp(32px, -160.000px + 25vw, 96px);
    padding-bottom: clamp(32px, -64.000px + 12.5vw, 64px);
    padding-left: clamp(32px, -160.000px + 25vw, 96px);
}

.shiga-rally-wrap-contents-sp {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, -64.000px + 12.5vw, 64px);
}

.shiga-rally-wrap-contents-pc {
    display: none;
}

@media (min-width: 1024px) {
    h2.shiga-rally_h2-title {
        justify-content: left;
        padding: 10px 96px;
    }

    .shiga-rally-wrap-contents-sp {
        display: none;
    }

    .shiga-rally-wrap-contents-pc {
        display: block;
    }
}

/* ページヘッダー -------------------- */
h1#page_title-shiga-rally {
    font-size: 0;
}

/* メインビジュアル -------------------- */
#shiga-rally-mv {
    margin-bottom: clamp(32px, -64.000px + 12.5vw, 64px);
}
.img_mv-pc {
    margin-bottom: 56px;
}

/* シールの引き換え方法 */
.shiga-rally-p-exchange {
    margin-bottom: clamp(32px, -64.000px + 12.5vw, 64px);
    color: var(--color-black, #000);
    font-family: var(--font-noto);
    font-size: clamp(16px, -32.000px + 6.25vw, 32px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.8px;
    letter-spacing: clamp(0.8px, -1.600px + 0.313vw, 1.6px);;
}

figure.btn-shiga-rally {
    margin-top: 16px;
}


/* コンプリート特典 */
.shiga-rally-p-note {
    display: flex;
    padding-top: 16px;
    padding-right: clamp(16px, -62.000px + 10.156vw, 42px);
    padding-bottom: 16px;
    padding-left: clamp(16px, -62.000px + 10.156vw, 42px);
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    color: #000;
    text-align: left;
    font-family: var(--font-noto);
    font-size: 14px;
    font-size: clamp(14px, -22.000px + 4.688vw, 26px);
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 21px */
    letter-spacing: 0.7px;
    border-radius: 4px;
    background-color: var(--color-campaign-sub, #BFEAF9);
}

/* 対象施設一覧 -------------------- */
#shiga-rally-facilities {
    padding: clamp(16px, -32.000px + 6.25vw, 32px);
    background-color: var(--color-white);
}

h2.facilities-sec-title {
    display: flex;
    width: 100%;
    height: clamp(56px, -136.000px + 25vw, 120px);
    margin: 24px 0;
    padding: 8px 0;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    text-align: center;
    font-family: var(--font-noto);
    font-size: 24px;
    font-size: clamp(24px, -48.000px + 9.375vw, 48px);
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 1.2px;
    border-radius: 3px;
    background: var(--color-campaign-main, #0076D6);
}

.shiga-rally-facilities-anchor {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: clamp(8px, -40.000px + 6.25vw, 24px);
    margin: 16px 0 24px;
}

.shiga-rally-facilities-anchor a.anchor-link {
    display: flex;
    padding: 5px 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-family: var(--font-noto);
    font-size: 3vw;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: .05em;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
    transition: color 0.3s ease,
        background-color 0.3s ease,
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

@media (min-width: 1024px) {
    .shiga-rally-facilities-anchor a.anchor-link {
        font-size: clamp(16px, -32.000px + 6.25vw, 32px);
        letter-spacing: clamp(0.8px, -1.600px + 0.313vw, 1.6px);
    }
}

.shiga-rally-facilities-anchor a.anchor-link:active {
    transform: translateY(2px);
    box-shadow: none;
}

.shiga-rally-facilities-anchor a.anchor-link.east {
    color: var(--color-shiga-rally-east, #039985);
    border: 2px solid var(--color-shiga-rally-east, #039985);
    background: var(--color-white, #FFF);
}

.shiga-rally-facilities-anchor a.anchor-link.east:hover {
    color: var(--color-white, #FFF);
    background: var(--color-shiga-rally-east, #039985);
}

.shiga-rally-facilities-anchor a.anchor-link.west {
    color: var(--color-shiga-rally-west, #374DB9);
    border: 2px solid var(--color-shiga-rally-west, #374DB9);
    background: var(--color-white, #FFF);
}

.shiga-rally-facilities-anchor a.anchor-link.west:hover {
    color: var(--color-white, #FFF);
    background: var(--color-shiga-rally-west, #374DB9);
}

.shiga-rally-facilities-anchor a.anchor-link.south {
    color: var(--color-shiga-rally-south, #FFA040);
    border: 2px solid var(--color-shiga-rally-south, #FFA040);
    background: var(--color-white, #FFF);
}

.shiga-rally-facilities-anchor a.anchor-link.south:hover {
    color: var(--color-white, #FFF);
    background: var(--color-shiga-rally-south, #FFA040);
}

.shiga-rally-facilities-anchor a.anchor-link.north {
    color: var(--color-shiga-rally-north, #C42B2B);
    border: 2px solid var(--color-shiga-rally-north, #C42B2B);
    background: var(--color-white, #FFF);
}

.shiga-rally-facilities-anchor a.anchor-link.north:hover {
    color: var(--color-white, #FFF);
    background: var(--color-shiga-rally-north, #C42B2B);
}

h3.facilities-area-title {
    display: flex;
    width: 100%;
    height: clamp(40px, -80.000px + 15.625vw, 80px);
    margin: 0 0 16px;
    padding: 8px 1rem;
    align-items: center;
    color: var(--color-white, #FFF);
    font-family: var(--font-noto);
    font-size: clamp(16px, -32.000px + 6.25vw, 32px);
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 1.2px;
    letter-spacing: clamp(0.8px, -1.600px + 0.313vw, 1.6px);
    border-radius: 3px;

}

h3.facilities-area-title.east {
    background: var(--color-shiga-rally-east, #039985);
}

h3.facilities-area-title.west {
    background: var(--color-shiga-rally-west, #374DB9);
}

h3.facilities-area-title.south {
    background: var(--color-shiga-rally-south, #FFA040);
}

h3.facilities-area-title.north {
    background: var(--color-shiga-rally-north, #C42B2B);
}

@media (min-width: 1024px) {
    h3.facilities-area-title {
        justify-content: center;
    }
}

.shiga-rally-sec-notice {
    padding: 32px 24px;

    .shiga-rally-notice__inner {
        background-color: var(--color-white);
        border-radius: 8px;
        border: 2px solid var(--color-light_blue);
    }

    .shiga-rally-notice__header {
        background-color: var(--color-light_blue);
        padding: 18px 0;

        .shiga-rally-notice__title {
            text-align: center;
            font-size: 1.5rem;
            color: var(--color-white);
            height: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .shiga-rally-notice__body {
        padding: 32px 24px;
    }

    .shiga-rally-notice__heading {
        margin-bottom: 16px;
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.8;
    }

    .shiga-rally-notice__content {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.8;
        margin-inline-start: 0;
        margin-bottom: 32px;
        padding-top: 16px;
        border-top: 1px solid var(--color-light_blue);
    }

    .shiga-rally-notice__details {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
        list-style: none;
        padding: 0;

        .shiga-rally-notice__detail {
            position: relative;
            padding-left: 1em;

            &::before {
                content: "・";
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}

/* 本企画に関する問い合わせ先 -------------------- */
#shiga-rally-info {
    padding-top: 24px;
    padding-right: clamp(16px, -32.000px + 6.25vw, 32px);
    padding-bottom: 24px;
    padding-left: clamp(16px, -32.000px + 6.25vw, 32px);
    background-color: var(--color-white);
}

.shiga-rally-info__title {
    margin-bottom: 24px;
    color: var(--color-campaign-main, #0076D6);
    font-family: var(--font-noto);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 27px */
    letter-spacing: 0.9px;
}

.shiga-rally-info__contents {
    color: var(--color-campaign-main, #0076D6);
    font-family: var(--font-noto);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 18px */
    letter-spacing: 0.6px;
}

.shiga-rally-info__contents a {
    text-decoration: none;
    transition: all 0.3s ease;
}

.shiga-rally-info__contents a:hover {
    text-decoration: underline;
}