/*スタンプラリーここから*/


.filter-buttons {
    display: flex;
    gap: 10px;
    margin-top: 50px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-btn {
    background: white;
    border: 2px solid #009fe6;
    color: #009fe6;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: #f0f8ff;
}

.filter-btn.active {
    background: linear-gradient(135deg, #0068b3 0%, #009fe6 100%);
    color: white;
    border-color: transparent;
}

.filter-btn.panel-filter {
    border: 2px solid #fdb457;
    color: #fdb457;
}

.filter-btn.panel-filter:hover {
    background: #fffbf0;
}

.filter-btn.panel-filter.active {
    background: linear-gradient(135deg, #fdb457 0%, #ffcc00 100%);
    color: white;
    border-color: transparent;
}

.accordion-item-stamp {
    background: white;
    border-radius: 12px;
    margin-bottom: 50px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: visible;
    position: relative;
    transition: opacity 0.3s ease, transform 0.3s ease;
    border: solid 1px #0068b3;
    padding: 10px;
}

.accordion-item-stamp.hidden {
    display: none;
}

.badge {
    position: absolute;
    top: -10px;
    right: -10px;
    /*background: linear-gradient(135deg, #0068b3 0%, #009fe6 100%);*/
    background-color: #0068b3;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    /*box-shadow: 0 4px 10px rgba(0, 104, 179, 0.4);*/
    border: solid 2px white;
    z-index: 10;
}

@media (max-width: 600px) {}

.accordion-header-stamp {
    display: flex;
    padding: 20px;
    cursor: pointer;
    transition: background 0.3s ease;
}

/*.accordion-header-stamp:hover {
    background: #f9f9f9;
}*/

.image-container-stamp {
    flex: 0 0 50%;
    /* height: 225px;*/
    margin-right: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.image-container-stamp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.text-content h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 8px;
}

.category-label {
    display: inline-block;
    background: rgba(0, 159, 230, 0.1);
    color: #0068b3;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    margin-right: 6px;
}


/* stamp.cssの末尾など、適切な場所に追加 */

/* category-labelにカーソルとホバー効果を追加 */
.category-label {
    /* 既存のスタイル... */
    cursor: pointer;
    /* クリック可能なカーソルに変更 */
    transition: background 0.3s ease, transform 0.2s ease;
    /* ホバー時の遷移を追加 */
}

.category-label:hover {
    background: rgba(0, 159, 230, 0.2);
    /* ホバー時の背景を少し濃く */
    /* transform: translateY(-1px); */
    /* 軽く浮き上がらせる効果も良いかもしれません */
}

/* panel-tagにも同様に */
.panel-tag {
    /* 既存のスタイル... */
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.panel-tag:hover {
    background: rgba(231, 180, 0, 0.2);
}


.panel-tag {
    display: inline-block;
    background: rgba(231, 180, 0, 0.1);
    color: #fdb457;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}


.text-content p {
    color: #666;
    line-height: 2;
    margin-bottom: 15px;
}

.detail-button {
    align-self: flex-start;
    background: linear-gradient(135deg, #0068b3 0%, #009fe6 100%);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.detail-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 104, 179, 0.4);
}

.accordion-content-stamp {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #f9f9f9;
}

.accordion-content-stamp.active {
    max-height: 700px;
}

.accordion-inner-stamp {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
}

.accordion-inner-stamp h4 {
    color: #0068b3;
    margin-bottom: 10px;
    font-size: 18px;
}

.accordion-inner-stamp p {
    color: #555;
    line-height: 1.8;
    font-size: 14px;
}

.accordion-inner-stamp ul {
    margin: 15px 0;
    padding-left: 20px;
}

.accordion-inner-stamp li {
    color: #555;
    line-height: 1.8;
    margin-bottom: 8px;
}

.website-link {
    display: block;
    background: linear-gradient(135deg, #0068b3 0%, #009fe6 100%);
    color: white;
    margin-top: 20px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.3s ease;
}

.website-link-text {
    background: white;
    color: #0068b3;
    padding: 20px;
    border-radius: 48px;
    width: 80%;
    display: block;
    margin: auto;
}


/* ========================
    リンクグループ (2カラム対応)
======================== */
.link-group {
    display: flex;
    gap: 10px;
    /* ボタン間のスペース */
    margin-top: 40px;
    padding-bottom: 20px;
    /* アコーディオンの底との余白 */
    flex-wrap: wrap;
}

.link-btn-base {
    /* 共通ボタンのベーススタイル */
    flex-grow: 1;
    /* 2つあれば均等に広がり、1つならコンテナ幅いっぱいに広がる */
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 15px 10px;
    border-radius: 50px;
    /* カプセル型に */
    transition: all 0.3s ease;
    text-align: center;
}

/* WEBサイト（青系）スタイル */
.web-link {
    background: linear-gradient(135deg, #0068b3 0%, #009fe6 100%);
    color: white;
}

.web-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 104, 179, 0.4);
}

/* Instagram（紫系）スタイル */
.instagram-link {
    /* Instagramのブランドカラーを意識したグラデーション */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.instagram-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(230, 104, 60, 0.5);
}

/* リンクテキスト部分のスタイルをクリア（親要素に色を任せる） */
.link-btn-base .website-link-text {
    background: none;
    color: inherit;
    /* 親のaタグの色を継承 */
    padding: 0;
    width: auto;
    display: inline;
    margin: 0;
}

/* 1カラムにするためのスマホ対応 */
@media (max-width: 600px) {
    .link-group {
        flex-direction: column;
        /* 縦に並べる */
        gap: 15px;
        /* 縦の間隔 */
    }

    .link-btn-base {
        flex-grow: 1;
        /* 幅100%になる */
    }
}

@media (max-width: 600px) {

    /* 開いているときは高さ制限を外す＆はみ出しを許可 */
    .accordion-content-stamp.active {
        max-height: none;
        /* ← 500px 制限を撤廃 */
    }

    .accordion-content-stamp {
        overflow: visible;
        /* 子のマイナス余白で切れないように */
    }

    /* 閉じているときだけはみ出しを隠す（アコーディオンの閉状態を保つ） */
    .accordion-content-stamp:not(.active) {
        overflow: hidden;
    }

    /* ボタン帯のマイナス余白をやめる（見切れの根本も解消） */
    .website-link {
        margin-bottom: 0;
    }

    /* 既存は -20px */
    /* 下の突き出しをなくすため内側の下パディングも調整 */
    .accordion-inner-stamp {
        padding-bottom: 0;
    }

    /* 既存は padding:20px */


    .website-link-text {
        width: 85%;
        max-width: none;
        padding: 15px 10px;
        font-size: 13px;
        word-break: break-all;
    }

}


@supports (padding: max(0px)) {
    @media (max-width: 600px) {
        .website-link {
            padding-bottom: max(30px, env(safe-area-inset-bottom));
        }
    }
}

@media (max-width: 600px) {
    .accordion-header-stamp {
        flex-direction: column;
    }

    .image-container-stamp {
        flex: 0 0 auto;
        width: 100%;
        height: 0;
        padding-bottom: 75%;
        /* 4:3のアスペクト比 (3/4 = 0.75 = 75%) */
        margin-bottom: 15px;
        margin-right: 0;
        position: relative;
    }

    .image-container-stamp img {
        position: absolute;
        /* 追加 */
        inset: 0;
        /* top:0; right:0; bottom:0; left:0; と同義 */
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/*店舗情報*/
/* 情報リストのベース */
.info-list {
    display: grid;
    gap: 12px 16px;
}

/* 行ラッパー：アクセシビリティ＆レイアウト安定 */
.info-row {
    display: contents;
    /* dtとddをグリッドに直置きするため */
}

/* ラベルと内容 */
.info-list dt {
    font-weight: 600;
    line-height: 1.6;
    /* スマホは1列で上に来る */
}

.info-list dd {
    margin: 0;
    line-height: 1.6;
    word-break: break-word;
}

/* スマホ（~599px）：1列で縦積み */
@media (max-width: 599px) {
    .info-list {
        grid-template-columns: 1fr;
    }

    .info-list dt::after {
        content: "：";
    }
}

/* タブレット以上（600px~）：ラベル/内容の2列 */
@media (min-width: 600px) {
    .info-list {
        grid-template-columns: 160px 1fr;
        align-items: start;
    }

    .info-list dt {
        text-align: left;
        color: #333;
    }

}

/* 見出し前のリード文（任意） */
.accordion-inner-stamp .lead {
    margin-bottom: 8px;
    color: #555;
}

/* 既存の特徴リストがある場合の余白調整 */
.features-list {
    margin-top: 12px;
}



/* 比率を固定してスマホでも崩れないように */
.map-embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* 4/3 にしたい場合は 4 / 3 */
    border-radius: 8px;
    overflow: hidden;
    background: #f1f1f1;
    /* ローディング中の背景 */

}

.map-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 600px) {
    .map-embed {
        width: 100%;
        aspect-ratio: 4 / 3;
    }
}



/* アコーディオン内のリンク余白など（任意） */
.stampmap-link {
    margin-top: 8px;
    border: none;
    text-align: right;
    display: block;
}


.section-title-stamp {
    background-color: #009fe6;
    text-align: center;
    margin-top: -150px;
    /* ヘッダーに少しかぶせる */
    width: 100%;
    height: 200px;
    position: relative;
    /* h3を基準に動かすため */
    z-index: -500;
    font-family: "Darumadrop One", sans-serif;
    font-size: 24px;
    color: #393939;
}

.section-title-stamp h3 {
    background-color: #fff;
    position: absolute;
    bottom: -150px;
    /* 下にはみ出す */
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    /* 正円にするポイント */
    font-weight: 900;
    font-size: 2em;
    letter-spacing: 2px;
    /* 正円化に必要な指定 */
    width: 300px;
    /* 幅を指定 */
    height: 300px;
    /* 高さを幅と同じに */
    display: flex;
    /* 中央揃え用 */
    align-items: center;
    justify-content: center;

}

.container-stamp {
    margin-top: 150px;
}

.stamp-text {
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 50px;
    line-height: 2;
}

/* スマホ（~759px）：1列で縦積み */
@media (max-width: 759px) {
    .stamp-text {
        font-size: 1em;
    }
}

.stamp-sanka {
    position: relative;
    text-align: center;
    display: block;
    margin-bottom: 50px;
    font-size: 1.5em;
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    margin: auto;
    padding: 1rem 4rem;
    font-weight: bold;
    border: 2px solid #009fe6;
    color: #fff;
    border-radius: 100vh;
    transition: 0.5s;
    margin-bottom: 50px;
    background: linear-gradient(135deg, #0068b3 0%, #009fe6 100%);
    transition: 0.5s;
    max-width: 800px;
}

.stamp-sanka::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);*/
    transition: left 0.5s ease;
}



/* スマホ（~759px）：1列で縦積み */
@media (max-width: 759px) {
    .stamp-sanka {
        font-size: 1em;
    }
}


.page-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 800px;
    width: 100%;
    margin: 0 auto 50px;
}

.page-link-btn {
    background: White;
    border: #0068b3 2px solid;
    color: #0068b3;
    text-decoration: none;
    padding: 30px 20px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.page-link-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.page-link-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #0068b3 0%, #009fe6 100%);
    color: white;
}

.page-link-btn:hover::before {
    left: 100%;
}

.page-link-btn:active {
    transform: translateY(-2px);
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
    .page-links {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .page-link-btn {
        padding: 25px 15px;
        font-size: 16px;
    }
}




.stamp-h3 {
    text-align: center;
    margin: -100px auto 50px;
    font-size: 2em;
    letter-spacing: 5px;
}

.stamp-area-tag {
    margin-top: 100px;
    position: relative;
    /* ラベルを重ねるために基準を作る */
    padding-top: 40px;
    /* 上にラベルが入る余白 */
    background: #fff;
    /* 背景色は任意 */
    border-radius: 12px;
    /* 角丸 */
    padding: 10px;
    margin-bottom: 150px;
    border: #0068b3 5px solid;

}

.kikan {
    display: block;
    text-align: center;
    font-size: 4em;
    font-weight: 800;
    margin-bottom: 50px;
    font-family: "Darumadrop One";
}

.kikan-small {
    font-weight: 400;
    font-size: .5em;
}

/* スマホ（~759px）：1列で縦積み */
@media (max-width: 759px) {
    .kikan {
        display: block;
        text-align: center;
        font-size: 2.5em;
        font-weight: 800;
        margin-bottom: 50px;
    }
}



.sanka-h3 {
    margin: 50px auto 0;
}

.stamp-area-tag {
    text-align: center;
    margin: 50px auto;
    background-color: white;
    border: 5px solid #009fe6;
    border-radius: 10px;
    width: 80%;

}

.group-label {
    position: absolute;
    top: 0;
    /* wrapperの上端に固定 */
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #009fe6;
    /* 好きな背景色 */
    color: #fff;
    padding: 5px 20px 7px;
    border-radius: 20px;
    /* テキスト背景を角丸に */
    font-weight: bold;
    margin-bottom: 100px;
    border: solid white 5px;
}



.carousel-wrapper {
    position: relative;
    overflow: hidden;
    padding: 20px 60px;
}

.carousel {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    gap: 30px;
}

.card {
    flex: 0 0 100%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #ecc32f, #fdb457);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.card:hover::before {
    transform: scaleX(1);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.step-number {
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #fdb457;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    top: 10px;
    left: 10px;
    /*animation: pulse 2s infinite;*/
}

.card-title {
    font-size: 1.8rem;
    color: #fdb457;
    margin: 20px 0;
    font-weight: bold;
}

.card-content {
    color: #666;
    line-height: 1.8;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.card-action {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(135deg, #ecc32f, #fdb457);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    font-weight: 500;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.card-action:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5);
}

.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.nav-button:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
}

.nav-button.prev {
    left: 10px;
}

.nav-button.next {
    right: 10px;
}

.nav-button svg {
    width: 24px;
    height: 24px;
    fill: #fdb457;
}

.dots-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffcc00;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: white;
    transform: scale(1.3);
}

/* stamp.cssに追加するコード */

/* stamp.css */

@media (max-width: 767px) {
    .carousel-wrapper {
        /* この部分は変更なし */
        padding-left: 20px;
        padding-right: 20px;
    }

    .carousel {
        gap: 16px;
    }

    .card {
        margin: 0;
    }


    /* --- 以下、ボタンのスタイル(変更なし) --- */
    .nav-button {
        width: 40px;
        height: 40px;
    }

    .nav-button.prev {
        left: 5px;
    }

    .nav-button.next {
        right: 5px;
    }
}

@media (min-width: 768px) {
    .carousel {
        gap: 30px;
    }

    .card {
        flex: 0 0 calc(50% - 15px);
    }
}

/* 1024px以上も2枚表示に統一する */
@media (min-width: 1024px) {
    .carousel {
        gap: 30px;
    }

    .card {
        flex: 0 0 calc(50% - 15px);
    }

}



@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.icon {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    fill: #667eea;
    opacity: 0.8;
}

#sanka {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #fdb457;

}


#sanka .stamp-h3 {
    color: white;
}

/*ここから特産品CSS*/

.yokamon-text {
    font-family: "Darumadrop One";
    font-size: 2em;
    color: #fdb457;
}


.yokamon-h3 {
    margin: 50px 0;
    color: #5d5d5d;
}

.fes-wrapper {
    background-color: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(12, 12, 12, 0.04);
    border: solid #fdb457 5px;

}

/* fes-sliderのスタイル */
.fes-slideshow-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    /* 必要に応じて調整 */
    position: relative;
    height: 300px;
}


.fes-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}




.fes-slide.active {
    opacity: 1;
}

.fes-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}





.fes-slider-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 10;
}

.fes-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.fes-dot.active {
    background: white;
    transform: scale(1.2);
}

/* ナビゲーションボタンのコンテナ */
.fes-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    z-index: 10;
}

/* ボタンの共通スタイル */
.accordion-item-stamp .fes-navigation button {
    background: white;
    color: #0068b3;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

}

.accordion-item-stamp .fes-navigation button:hover {
    background: #0068b3;
    color: white;
    transform: scale(1.1);
}






/* ボタンの共通スタイル */
.fes-navigation button {
    background: white;
    color: #fdb457;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.fes-navigation button:hover {
    background: #fdb457;
    color: white;
    transform: scale(1.1);
}

/* 新しいリンクコンテナのスタイル */
.fes-links-container {
    display: flex;
    /* ボタンを横に並べる */
    flex-wrap: wrap;
    /* 狭い画面で折り返す */
    gap: 20px;
    /* ボタン間のスペース */
    justify-content: center;
    /* 中央寄せ */
    margin: 20px 0;
    /* 下のコンテンツとの間隔 */
}

.fes-link {
    border-radius: 50px;
    border: solid #fdb457 1px;
    background-color: #fdb457;
    color: #ffffff;
    display: inline-block;
    margin-top: 15px;
    padding: 0 15px;
    text-align: center;
    padding: 15px 0;
    width: 40%;
    transition: transform 0.2s;
}

.fes-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.fes-link i {
    margin-left: 8px;
    /* アイコンとテキストの間隔 */
}

/* デスクトップ向け2カラムレイアウト */
.two-column-container {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    /* カラム間の隙間 */
}

/* 各カラムの設定 */
.two-column-container .column {
    flex: 1 1 50%;
    /* 2つのカラムが50%の幅を占め、柔軟に伸縮する */
    /* ここに背景色やパディングなどを追加して見やすくできます */
}

/* スマホ向けの1カラムレイアウト */
@media (max-width: 759px) {
    .two-column-container {
        flex-direction: column;
        /* 縦並びに変更 */
        align-items: normal;
    }

    .two-column-container .column {
        flex: 1 1 100%;
        /* カラムの幅を100%にする */
        margin-bottom: 20px;
        /* カラム間の下部スペース */
    }
}

/* スマホでのレイアウト調整 */
@media (max-width: 759px) {
    .fes-links-container {
        flex-direction: column;
        /* 縦並びにする */
        align-items: center;
        /* 中央寄せ */
        gap: 15px;
    }

    .fes-link {
        display: block;
        width: 100%;
        text-align: center;
        padding: 15px 0;
        margin: 10px;

    }

}


.yokamon-item h5 {
    color: #fdb457;
    font-size: 2.5em;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .yokamon-item h5 {
        font-size: 1.5em;
    }
}


.yokamon-item p {
    line-height: 2;
    font-size: 1em;
}

/* スマホ向けの1カラムレイアウト */
@media (max-width: 900px) {
    .yokamon-item .two-column-container {
        flex-direction: column-reverse;
        /* Changed from 'column' */
        /* 縦並びに変更 */
        align-items: normal;
        gap: 0;
    }

    .yokamon-item .two-column-container .column {
        flex: 1 1 100%;
        /* カラムの幅を100%にする */
        margin-bottom: 20px;
        /* カラム間の下部スペース */
    }

    #prizes-section .fes-slideshow-container {
        height: 500px;
    }



    #map .fes-slideshow-container {
        height: auto;
        /* 固定高さを解除 */
        aspect-ratio: 43 / 30;
        /* 860×600の比率 */
        width: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 12px;
    }

    #map .fes-slide,
    #map .fes-slide img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

}


.prizes-top {
    background-color: #fdb457;
    border-radius: 99% 99% 0 0;
    content: "";
    height: 100px;
    width: 100%;
    display: block;
}


#prizes-section {
    background-color: #fdb457;
    color: white;
    padding: 150px 0 100px;
}


#prizes-section h5 {
    color: #402727;
}

@media (max-width: 600px) {
    #prizes-section h5 {
        font-size: 1.5em;
    }
}

.prizes-point {
    color: #fff;
    background: #fdb457;
    border-radius: 50px;
    padding: 10px 0;
    text-align: center;
    margin-bottom: 15px;
    font-weight: 500;
}

.prizes-item {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 1);
    color: #402727;
}

.questionnaire-text {
    margin-bottom: 100px;
    font-weight: 500;
    background: #efefef;
    padding: 40px;
    max-width: 950px;
    margin: auto;
    margin-bottom: 100px;
    width: 90%;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.point-title {
    padding: 20px 20px 0;

}

.point-title h3 {
    font-size: 2em;
    margin-bottom: 15px;
    color: #0068b3;
}

@media (max-width: 600px) {
    .point-title h3 {
        font-size: 1.5em;
    }
}

/* アニメーション画像の初期設定 */
.animation-images-container {
    position: relative;
    /* 子要素の絶対配置の基準にする */
    width: 100%;
    height: 0;
    /* 必要に応じて調整。コンテンツの流れに影響させないため */
    pointer-events: none;
    /* アニメーション画像がクリックを邪魔しないように */
}

.animated-image {
    position: absolute;
    opacity: 0;
    /* 最初は非表示 */
    transform: scale(0.1);
    /* 最初は非常に小さく */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    /* スムーズな表示のための遷移 */
    z-index: 100;
    /* 他のコンテンツの上に表示 */
    max-width: 80px;
    /* 画像サイズ調整 */
    height: auto;
    /* 各画像の最終位置をここで指定 */
}

/* 各画像の最終的な位置 */
.image-top-right {
    bottom: 9vh;
    /* 上から5% */
    right: 40px;
    /* 右から5% */
}

.image-bottom-left {
    bottom: 8vh;
    /* 下から5% */
    left: 5vw;
    /* 左から5% */
}

.image-top-left {
    top: 1vh;
    left: 10vw;
}

/* アニメーション */
@keyframes pop-in {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }

    60% {
        opacity: 1;
        transform: scale(1.2);
        /* 一時的に少し大きく */
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* アニメーションを適用するクラス */
.animated-image.is-visible {
    animation: pop-in 0.6s ease-out forwards;
    /* forwardsでアニメーション終了時のスタイルを維持 */
}

/* レスポンシブ対応の調整例 */
@media (max-width: 768px) {
    .animated-image {
        max-width: 70px;
        /* 小さい画面では画像を小さく */
    }

    #prizes-section .fes-slideshow-container {
        height: 400px;
    }

    .image-top-right {
        top: -70px;
        right: 10px;
    }

    .image-bottom-left {
        bottom: 180px;
        left: 20px;
    }

    .image-top-left {
        top: -20px;
        left: 20px;
    }
}

.stamp-map {
    color: #0068b3;
    font-size: .9em;

}

.yokamon-more-section {
    padding-top: 100px;
    padding-bottom: 80px;
}

/* フィルタボタン */
.yokamon-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 50px;
}

.yokamon-filter-btn {
    background: white;
    border: 2px solid #fdb457;
    color: #fdb457;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    user-select: none;
}

.yokamon-filter-btn:hover {
    background: #fffbf0;
    transform: translateY(-1px);
}

.yokamon-filter-btn.active {
    background: linear-gradient(135deg, #fdb457 0%, #ffcc00 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(253, 180, 87, 0.5);
}

/* グリッドレイアウト */
.yokamon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* カードスタイル */
.yokamon-card {
    display: block;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    opacity: 1;
    transform: translateY(0);
}

.yokamon-card.hidden {
    display: none !important;
    /* JavaScriptでフィルタリング時に使用 */
}

.yokamon-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* 画像（正方形を維持） */
.yokamon-image-square {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* 正方形 */
    overflow: hidden;
}

.yokamon-image-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.yokamon-card:hover .yokamon-image-square img {
    transform: scale(1.05);
}

/* カードコンテンツ */
.yokamon-content {
    padding: 15px 15px 20px;
}

.yokamon-category-label {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.yokamon-category-label.niku {
    background: #ffebee;
    color: #c62828;
}

.yokamon-category-label.sakana {
    background: #e3f2fd;
    color: #1565c0;
}

.yokamon-category-label.kako {
    background: #fff3e0;
    color: #ff8f00;
}

.yokamon-category-label.kajitsu {
    background: #e8f5e9;
    color: #388e3c;
}

.yokamon-category-label.sake {
    background: #f3e5f5;
    /* 淡い紫 */
    color: #7b1fa2;
    /* 濃い紫 */
}

.yokamon-category-label.kajitsu {
    background: #e8f5e9;
    /* 既存のkajitsu (果物・野菜)と同じ色を使用 */
    color: #388e3c;
}

.yokamon-card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.4;
}

.yokamon-card-description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}


/* レスポンシブ対応 */
@media (max-width: 992px) {
    .yokamon-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/*
@media (max-width: 576px) {
    .yokamon-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .yokamon-filter-buttons {
        gap: 8px;
    }

    .yokamon-filter-btn {
        padding: 8px 15px;
        font-size: 13px;
    }
}
*/
/* --- 他にもたくさん！阿久根の「よかもん」セクションのスタイル ここまで --- */



.fa-instagram {
    font-size: 1.1em;
    margin-left: 6px;
    vertical-align: middle;
    color: #E4405F;
    transition: transform 0.2s ease, color 0.3s ease;
}

.fa-instagram:hover {
    transform: scale(1.2);
    color: #bc1888;
    /* 濃い目のピンク寄りカラーに変化 */
}

.yokamon-filter-btn.taiken {
    /* ベースカラーをフレッシュグリーンに設定 */
    border: 2px solid #5cb85c;
    color: #5cb85c;
    /* 既存ボタンの共通スタイルを継承 */
}

.yokamon-filter-btn.taiken:hover {
    /* ホバー時の背景色を淡いグリーンに */
    background: #f0fff0;
}

.yokamon-filter-btn.taiken.active {
    /* アクティブ時のグラデーションを設定 */
    background: linear-gradient(135deg, #449d44 0%, #5cb85c 100%);
    color: white;
    border-color: transparent;
    /* シャドウを緑系に変更 */
    box-shadow: 0 4px 10px rgba(68, 157, 68, 0.5);
}

/* --- カードコンテンツのカテゴリラベルのクラス定義の追加 --- */

.yokamon-category-label.taiken {
    /* ラベルの背景を淡いグリーンに */
    background: #eafaea;
    /* ラベルの文字色を濃いグリーンに */
    color: #449d44;
}




/* =======================================
   参加方法（STEP）表示の横並びレイアウト
   ======================================= */
/* 各STEPアイテム */
.step-item {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 60px;
    /* 各STEPの下部に余白 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* STEPのコンテンツ（画像とテキストのラッパー） */
.step-content {
    display: flex;
    align-items: center;
    /* 垂直方向中央寄せ */
    gap: 30px;
    /* 画像とテキストの間の隙間 */
}

/* 画像カラム */
.card-img-side {
    flex: 0 0 40%;
    /* 画像は40%の幅を占める */
    max-width: 350px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* テキストカラム */
.card-text-side {
    flex: 1;
    /* 残りの幅を占める */
}

/* STEP番号の位置調整 */
.step-item .step-number {
    position: absolute;
    /* 既存: top: -15px; */
    top: 5px;
    left: 10px;
    /* 左端から少し内側へ */
}

/* STEP 2 の左右反転 */
.step-item.reverse .step-content {
    flex-direction: row-reverse;
    /* 画像を右、テキストを左に配置 */
}


/* --- モバイル対応 (767px以下) --- */
@media (max-width: 767px) {
    .step-item {
        padding: 20px;
        margin-bottom: 40px;
    }

    .step-item .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .step-content {
        flex-direction: column;
        /* 縦並びにする */
        gap: 20px;
        padding-top: 10px;
    }

    .card-img-side {
        flex: none;
        width: 100%;
        max-width: none;
    }

    /* 左右反転を解除 (モバイルでは縦並びのため) */
    .step-item.reverse .step-content {
        flex-direction: column;
    }

    .card-title {
        font-size: 1.5rem;
        /* スマホでサイズを少し調整 */
        margin: 10px 0;
    }
}


/* --- 旧カルーセル関連の不要なスタイルを無効化 --- */
/* カルーセルラッパー全体を非表示（念のため） */
.carousel-wrapper {
    display: none !important;
}

/* 旧 .card スタイル（flex-basisなど）を上書き */
.step-list .card {
    /* 旧カードスタイルをリセット */
    flex: none;
    width: auto;
    padding: 0;
    margin: 0;
    box-shadow: none;
    cursor: default;
    /* transform を解除したい場合は追加: transform: none; */
}

.step-list {
    /* 新しいラッパー名 */
    padding: 0;
    /* 旧カルーセルラッパーの padding: 20px 60px; を解除 */
}



/* =======================================
   STEP表示の横並びレイアウト（修正箇所）
   ======================================= */

/* STEP番号とタイトルを囲むラッパー */
.step-header-group {
    display: flex;
    align-items: center;
    /* 垂直方向の中央揃え */
    gap: 15px;
    /* STEP番号とタイトルの間の隙間 */
    margin-bottom: 25px;
    /* 下部コンテンツとの余白 */
    position: relative;
    /* STEP番号のposition:absoluteの基準となる */
}

/* STEP番号の絶対配置を解除し、タイトルと横並びになるように調整 */
.step-item .step-number {
    position: static;
    /* 絶対配置を解除 */
    flex-shrink: 0;
    /* 縮まないように固定 */
    /* top, left の値は削除 */
    top: auto;
    left: auto;
}

/* h4 タイトル（旧 h2）のサイズ調整 */
.step-item .card-title {
    /* h2 から h4 に変更したため、フォントサイズを調整 */
    font-size: 1.8rem;
    color: #fdb457;
    margin: 0;
    /* h2で設定されていた余白をリセット */
    font-weight: bold;
    line-height: 1.3;
}

/* 既存の .step-item の padding-top をリセット */
.step-item {
    padding-top: 30px;
    /* 必要に応じて調整 */
}

/* STEP番号の既存のスタイルを再定義（位置以外のスタイルは維持） */
.step-item .step-number {
    width: 50px;
    height: 50px;
    background: #fdb457;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
}


/* --- モバイル対応 (767px以下) --- */
@media (max-width: 767px) {
    .step-header-group {
        gap: 10px;
        margin-bottom: 15px;
    }

    .step-item .card-title {
        font-size: 1.2rem;
    }

    .step-item .step-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}