/* 基本フォントサイズ */
html {
    font-size: 16px;
    /* remの基準となるフォントサイズ。この値は変更しません。 */
}

body {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    font-weight: 500;
    line-height: 1.6;
    overflow-x: hidden;
    color: #333;
    padding-top: 90px;
}

/* 見出しのフォントサイズ */
h1 {
    font-size: 2rem;
    /* 32px */
}

h2 {
    font-size: 1.8rem;
    /* 28.8px */
}

h3 {
    font-size: 1.5rem;
    /* 24px */
}

h4 {
    font-size: 1.2rem;
    /* 19.2px */
}

h5 {
    font-size: 1rem;
    /* 16px */
}

h6 {
    font-size: 0.9rem;
    /* 14.4px */
}

.hide {
    display: none;
}

span.external_link_text {
    display: none;
}

/* 段落とリストのフォントサイズ */
p,
ul,
li {
    font-size: 1rem;
    /* 16px */
}

/* 右下固定ボタン用の変数 */
:root {
    --button-gap: 10px;
    /* ボタン間の隙間 */
}

/* ▼▼▼ ページトップへ戻るボタンのスタイルを変更 ▼▼▼ */
.page-top-wrapper {
    text-align: right;
    padding: 0px 45px 10px 0px;
}

#pageTopBtn {
    display: none;
    /* JSで表示を制御 */
    position: static;
    /* 固定表示を解除 */
    border: none;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    padding: 0;
    width: 70px;
    height: 110px;
    margin: 0 auto;
    /* 中央揃え */
}

/* ▲▲▲ ページトップへ戻るボタンのスタイルを変更 ▲▲▲ */

#pageTopBtn img {
    width: 100%;
    height: auto;
    display: block;
}

/* 寄附をするボタン（右下固定） */
.btnKifu {
    position: fixed;
    right: 20px;
    bottom: calc(20px + 110px + var(--button-gap));
    z-index: 99;
    /* ▼表示・非表示のアニメーション設定 */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* JavaScriptで付与される非表示用クラス */
.btnKifu.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
}

.btnKifu img {
    width: 140px;
    height: auto;
    display: block;
}

/* ヘッダー */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 60px;
    height: 90px;
    background-color: #fffff6f5;
    /* 追加 */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    box-sizing: border-box;
}

header h1 {
    margin: 0;
    line-height: 1;
}

header>nav>ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    column-gap: 22px;
}

header>nav>ul li a {
    text-decoration: none;
    color: #514932;
    padding: 2px 8px;
    border-radius: 3px;
}

header>nav>ul li a.is-active {
    background-color: #514932;
    color: #FFF;
}

/* レイアウト */
section#kifuSection,
footer,
section#bannerSection,
section#furusatoSection,
section#kifuContactSection {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wrap1200 {
    max-width: 1100px;
    /* 1200px から 1100px に変更 */
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    /* 既存のパディングを維持 */
    box-sizing: border-box;
}

/* 寄附の使い道 */
div#useInfo {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* 'center' から 'flex-start' に変更 */
    column-gap: 60px;
    /* 90px から 60px に削減 */
    row-gap: 60px;
    margin-bottom: 240px;
    max-width: 1100px;
    /* wrap1200と合わせる */
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
    box-sizing: border-box;
}

div#useInfo .content {
    flex: 0 0 calc(50% - 30px);
    /* column-gapの半分を引く */
    max-width: 520px;
    /* 555px から削減。calc()の結果に合わせて調整 */
    display: flex;
    /* align-items: center; */
    gap: 15px;
    /* 20px から 15px に削減 */
}

/* Adjustments for the image and text containers within .content */
div#useInfo .img {
    flex-shrink: 0;
}

div#useInfo .img img {
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    vertical-align: bottom;
}

div#useInfo .text {
    flex-grow: 1;
}

div#useInfo .text h3 {
    margin: 0;
    font-size: 1.25rem;
}

/* ふるさと納税とは */
div#kifuMethods,
div#kifuContact {
    display: flex;
    column-gap: 60px;
    /* 90px から 60px に削減 */
    margin-bottom: 90px;
}

div#kifuMethods>div,
div#kifuContact>div {
    flex: 1;
    /* 利用可能なスペースを均等に分配 */
}

#kifuContactSection h2 {
    margin-bottom: 60px;
}

#onlineOnestop {
    margin-bottom: 120px;
}

#onlineOnestop img {
    width: 100%;
    height: auto;
}

/* 返礼品紹介 */
article#mainContent {
    background: #FFFFE2;
    background: linear-gradient(180deg, rgba(255, 255, 226, 1) 0%, rgba(255, 255, 226, 1) 30%, rgba(245, 255, 226, 1) 100%);
    position: relative;
    /* ::after擬似要素の配置基準とするため */
    margin-bottom: 135px;
    /* 三角形の高さ分のスペースを確保（お好みで調整） */
    display: flex;
    flex-direction: column;
}

article#mainContent::after {
    content: '';
    /* 擬似要素には必須 */
    position: absolute;
    bottom: -135px;
    /* article#mainContent の padding-bottom 領域の最下部に配置 */
    left: 50%;
    /* 水平方向中央揃えの基準を左端から50%の位置に */
    transform: translateX(-50%);
    /* 要素自身の幅の50%分左に移動して中央揃え */
    width: 0;
    height: 0;
    border-style: solid;
    /* * 下向きの三角形を作成します。
     * border-width: [上] [右] [下] [左];
     * border-color: [上] [右] [下] [左];
     */
    border-width: 135px 50vw 0 50vw;
    /* 上辺の幅(三角形の高さ)を30px、左右の幅をビューポート幅の50%にし、底辺をウィンドウ幅いっぱいに */
    border-color: #f6ffe3 transparent transparent transparent;
    /* 上辺の色をarticleの背景色と同じにし、他は透明 */
}

article#mainContent h2 {
    display: block;
    text-align: center;
}

h2.kazari {
    display: block;
    text-align: center;
    font-size: 2.125rem;
    /* 変更: emからremへ。ルートのフォントサイズを基準にします。 */
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-weight: 600;
    background-image: url(/img/site-furusato/h2-bg.webp);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 758px auto;
    padding-bottom: 45px;
    letter-spacing: 6px;
    margin-bottom: 76px;
    width: 100%;
    margin-top: 1px;
}

h2.kazari::first-letter {
    color: #DE222D;
}

div.h2En {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 40px;
    row-gap: 10px;
}

div.h2En p {
    margin: 0px;
    letter-spacing: 5px;
    font-weight: bold;
}

div.h2En p::first-letter {
    color: #DE222D;
}

div.h2En::before {
    content: "";
    display: block;
    width: 50px;
    height: 20px;
    background-image: url(/img/site-furusato/h2-bg-i.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

ul.main-content-list {
    display: flex;
    list-style: none;
    margin: 0 auto;
    padding: 0px;
    justify-content: center;
    transition: max-width 0.3s ease-in-out;
    width: 90%;
    max-width: 1100px;
}


@media (min-width: 1300px) {
    ul.main-content-list {
        max-width: 1200px;
    }
}

@media (min-width: 1600px) {
    ul.main-content-list {
        max-width: 1500px;
    }
}

@media (min-width: 1800px) {
    ul.main-content-list {
        max-width: 1700px;
    }
}


ul.main-content-list li {
    display: flex;
    justify-content: center;
    margin-top: 0;
    flex: 0 1 auto;
}



/* PC表示での偶数番目の要素のずれを修正 */
ul.main-content-list li:nth-child(even) {
    margin-top: 100px;
    /* PCでのみ適用されるように調整 */
}

article#mainContent section>div>div>h3 {
    margin-left: -50px;
}

p.read1 {
    font-size: 2rem;
    /* 変更: emからremへ。ルートのフォントサイズを基準にします。 */
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-weight: 600;
}

p.read2 {
    width: 550px;
    /* 610px から 550px に削減 */
    line-height: 2;
}

section#mc01>div.wrap1200,
section#mc03>div.wrap1200,
section#mc05>div.wrap1200 {
    display: flex;
    justify-content: flex-end;
    max-width: 800px;
}

section#mc02>div.wrap1200,
section#mc04>div.wrap1200,
section#mc06>div.wrap1200 {
    padding-left: 165px;
}

section#mc01 {
    background-image: url(/img/site-furusato/bg-mc1-a.webp), url(/img/site-furusato/bg-mc1-b.webp);
    background-repeat: no-repeat;
    background-size: 590px auto, 450px auto;
    background-position: calc(50% - 495px) top, calc(50% + 636px) top;
    height: 760px;
    margin-top: 100px;
}

section#mc02 {
    background-image: url(/img/site-furusato/bg-mc2-a.webp), url(/img/site-furusato/bg-mc2-b.webp);
    background-repeat: no-repeat;
    background-size: 500px auto, 680px auto;
    background-position: calc(50% - 716px) top, calc(50% + 600px) top;
    height: 850px;
}

section#mc03 {
    background-image: url(/img/site-furusato/bg-mc3-a.webp), url(/img/site-furusato/bg-mc3-b.webp);
    background-repeat: no-repeat;
    background-size: 525px auto, 468px auto;
    background-position: calc(50% - 550px) top, calc(50% + 585px) top;
    height: 800px;
}

section#mc04 {
    background-image: url(/img/site-furusato/bg-mc4-a.webp), url(/img/site-furusato/bg-mc4-b.webp);
    background-repeat: no-repeat;
    background-size: 530px auto, 700px auto;
    background-position: calc(50% - 708px) top, calc(50% + 520px) top;
    height: 820px;
}

section#mc05 {
    background-image: url(/img/site-furusato/bg-mc5-a.webp), url(/img/site-furusato/bg-mc5-b.webp);
    background-repeat: no-repeat;
    background-size: 590px auto, 500px auto;
    background-position: calc(50% - 560px) center, calc(50% + 610px) top;
    height: 650px;
    margin-bottom: 70px;
}

section#mc06 {
    background-image: url(/img/site-furusato/bg-mc6-a.webp), url(/img/site-furusato/bg-mc6-b.webp);
    background-repeat: no-repeat;
    background-size: 530px auto, 685px auto;
    background-position: calc(50% - 700px) center, calc(50% + 555px) center;
    height: 750px;
}

/* ふるさと納税とは */
div#kifuContent {
    background-color: #FCF5E7;
    padding: 0 0 110px;
    position: relative;
    margin-top: 135px;
    background-image: url(/img/site-furusato/kifu-content-bg.webp);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 2760px auto;
}

div#kifuContent::before {
    content: '';
    position: absolute;
    top: -134px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 50vw 135px 50vw;
    border-color: transparent transparent #fcf5e7 transparent;
}

#kifuContact .left {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.card {
    background-color: #FFF;
    padding: 20px 30px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    height: 100%;
}

.card .shosai {
    display: flex;
    flex-direction: column;
    row-gap: 1em;
    align-items: center;
    color: #506010;
}

.card .shosai h4,
.card .shosai p {
    margin: 0;
    width: 100%;
    justify-content: center;
    display: flex;
}

.card .shosai h4 {
    font-size: 1.4rem;
    /* 変更: emからremへ。 */
}

.card .shosai h4.kei {
    font-size: 1.875rem;
    /* 変更: emからremへ。 */
    border-bottom: dashed 1px;
    padding: 0 0 10px;
}

.card .shosai strong {
    background-color: #506010;
    color: #FFF;
    border-radius: 300px;
    display: flex;
    justify-content: center;
    padding: 0.4em 1.5em;
}

.card .shosai p.denwa,
.card .shosai p.email {
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
}

.card .shosai p.honbun,
.card .shosai p.denwa {
    border-top: dashed 1px;
    padding: 10px 0 0;
}

.card .shosai p.denwa {
    white-space: nowrap;
}


p.textM {
    font-size: 1.25rem;
    text-align: center;
}

p.textM2 {
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
}

.textM2wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 1em;
    margin-top: 1em;
}


.btn-primary {
    background-color: #DEECDD;
    display: flex;
    color: #485048;
    text-decoration: none;
    font-weight: 600;
    padding: 0.4em 4em;
    border-radius: 300px;
    background-image: url(/img/site-furusato/arrow.png);
    background-repeat: no-repeat;
    background-position: center right 13px;
    background-size: 30px;
    flex-direction: column;
    align-items: center;
}

.btn-primary span {
    display: block;
}

.target {
    border: solid 2px;
    padding: 0px 33px 20px;
    border-radius: 13px;
    margin-top: 1.5em;
}

.target ul {
    padding: 0px;
    margin-bottom: 0px;
    list-style: none;
}

ul.custom-list li {
    padding-left: 20px;
    position: relative;
}

ul.custom-list li::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('/img/site-furusato/i-check.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    top: 5px;
    /* transform: translateY(-50%); */
}



.target strong {
    margin-top: -1.3em;
}

#kifuContent h3 {
    background-color: #506010;
    color: #FFF;
    border-radius: 300px;
    display: flex;
    justify-content: center;
    padding: 0.4em 1.5em;
    margin-bottom: 50px;
}

/* 白石市の魅力 */
section#shiroishiSection {
    background-color: #EBF6EA;
    position: relative;
    margin: 140px 0px;
}

section#shiroishiSection .wrap1200 {
    padding: 90px 0px;
}

section#shiroishiSection::before {
    content: '';
    position: absolute;
    top: -134px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 50vw 135px 50vw;
    border-color: transparent transparent #EBF6EA transparent;
}

section#shiroishiSection::after {
    content: '';
    position: absolute;
    bottom: -134px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 50vw 135px 50vw;
    border-color: transparent #EBF6EA transparent #EBF6EA;
}

.shiroishiContent {
    background-color: #FFF;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 25px 60px 70px;
}

.shiroishiContent .jodan,
.shiroishiContent .gedan {
    display: flex;
    justify-content: space-between;
    /* 要素間にスペースを均等に配置 */
    gap: 30px;
    /* 必要に応じてカラム間の隙間を調整 */
    align-items: center;
    /* 垂直方向の中央揃え (任意) */
}

.shiroishiContent .jodan>div,
.shiroishiContent .gedan>div {
    flex: 1;
    row-gap: 34px;
    display: flex;
    flex-direction: column;
}

.shiroishiContent .jodan img,
.shiroishiContent .gedan img {
    max-width: 100%;
    /* 親要素の幅を超えないようにする */
    height: auto;
    /* アスペクト比を維持する */
    display: block;
    /* 画像の下に不要なスペースができないようにする */
}

/* フッター上　バナーエリア */
section#bannerSection {
    padding: 120px 0;
}

section#bannerSection .banners {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    /* 30px から 20px に削減 */
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

section#bannerSection .banners p {
    width: 525px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

/* .oneCol クラスを持つバナーは幅を100%にする */
section#bannerSection .banners p.oneCol {
    width: 100%;
}

section#bannerSection .banners img {
    width: 100%;
    vertical-align: bottom;
    height: auto;
}

/* フッター */
footer {
    background-color: #FFFFE2;
    background-image: url(/img/site-furusato/f-bg1.gif), url(/img/site-furusato/f-bg2.gif);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center, right center;
    padding: 30px 0px;
}

footer h2,
footer p {
    margin: 0;
}

footer h2 {
    font-size: 1.438rem;
    /* 変更: emからremへ。 */
}

.footer-links ul,
.footer-links {
    display: flex;
    align-items: center;
}

.footer-links {
    column-gap: 50px;
    margin: 16px 0px;
}

.footer-links ul {
    padding: 0;
    margin: 0;
    list-style: none;
    column-gap: 30px;
}

p.copyRight {
    margin-top: 33px;
}

/* --- スライドショー ここから変更 --- */
.slider-container {
    position: relative;
    /* 子要素の絶対配置の基準 */
    background-color: #ffffe2;
    background-image: url(/img/site-furusato/slider-bg-left.webp), url(/img/site-furusato/slider-bg-right.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center left, top -40px right;
}

.slideLogo {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ドットと再生/停止ボタンを囲む新しいラッパー */
.slick-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    /* ドットとボタンの間のスペース */
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    /* コンテンツの幅に合わせる */
}

.controls {
    display: flex;
    text-align: center;
    margin-top: 0;
    /* 上マージンをリセット */
}

.controls button {
    padding: 0px;
    margin: 0px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    width: 20px;
    height: 20px;
}

.controls button img {
    vertical-align: bottom;
}

/* スライドショーの前後スライドのスケール調整 for .slider1 */
.slider1 .slick-slide {
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
    transform: scale(0.8);
    opacity: 0.7;
    /* 非中央スライドを少しフェードさせる (任意) */
    margin: 0;
    /* スライド自体のマージンを0にし、間隔はcenterPaddingで制御 */
}

.slider1 .slick-slide.slick-center {
    transform: scale(1);
    /* 中央スライドは元のサイズ */
    opacity: 1;
    /* 中央スライドは完全に不透明 */
    /* z-index: 1; */
    /* 必要に応じて、中央スライドが他のスライドより手前に表示されるように設定 */
}

/* .slider1 をウィンドウ幅いっぱいにし、中央揃えにするためのスタイル */
.slider1 {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    margin-bottom: 0px !important;
}

.play,
.pause {
    display: none;
}

.slick-slide img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* スライド間の間隔調整 */
.slick-slide {
    margin-left: 10px;
    margin-right: 10px;
}

.slider1 .slick-prev,
.slider1 .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.slider-container .slick-dots {
    /* ラッパーが位置を制御するため、こちらは静的配置に */
    position: static;
    transform: none;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex !important;
    /* Slickがインラインブロックを強制する場合があるため */
    justify-content: center;
}

.slider-container .slick-dots li {
    margin: 0 5px;
    /* ドット間の余白 */
}

.slider-container .slick-dots li button {
    font-size: 0;
    /* デフォルトのドット文字を非表示 */
    line-height: 0;
    /* デフォルトのドット文字を非表示 */
    display: block;
    padding: 0;
    cursor: pointer;
    border: none;
    outline: none;
    background: url('/img/site-furusato/dot-inactive.png') no-repeat center center;
    /* ★通常時のドット画像 */
    background-size: contain;
    /* または cover, auto */
}

.slider-container .slick-dots li button:before {
    content: "" !important;
    /* SlickテーマCSSのデフォルトの点を確実に上書きして消す */
}

.slider-container .slick-dots li.slick-active button {
    background-image: url('/img/site-furusato/dot-active.png');
    /* ★アクティブ時のドット画像 */
}

/* 矢印のスタイル */
.slider1 .slick-prev,
.slider1 .slick-next {
    z-index: 10;
    /* スライドより手前に表示 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 40px;
    /* デフォルトサイズ */
    height: 40px;
    /* デフォルトサイズ */
    border: none;
    padding: 0;
    cursor: pointer;
    display: block !important;
    /* 既存の display:block !important; を維持 */
}

.slider1 .slick-prev::before,
.slider1 .slick-next::before {
    content: '';
    /* Slickテーマのデフォルト矢印文字を消す */
}

.slider1 .slick-prev {
    left: 15px;
    /* centerPadding('60px')の内側、画面左端から20pxの位置 */
    background: url('/img/site-furusato/btn-prev.png') no-repeat center center;
    background-size: contain;
}

.slider1 .slick-next {
    right: 15px;
    /* centerPadding('60px')の内側、画面右端から20pxの位置 */
    background: url('/img/site-furusato/btn-next.png') no-repeat center center;
    background-size: contain;
}

/* --- スライドショー ここまで変更 --- */

section#kifuSection .banners {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    /* 260pxを基準に、利用可能なスペースに合わせて列を自動調整 */
    gap: 15px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 90px;
    justify-content: center;
    /* グリッドアイテムを中央揃えにする (Gridコンテナがmax-widthより小さい場合) */
}

section#kifuSection .banners p {
    /* Gridアイテムのサイズはgrid-template-columnsで制御されるため、widthは不要 */
    background-color: #FFF;
    border: 1px solid #ccc;
    display: flex;
    /* p要素内のコンテンツ（画像）を中央揃えにするためにFlexboxを維持 */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
}

section#kifuSection .banners p img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ハンバーガーメニュー */
.hamburger {
    display: none;
    /* PCでは非表示 */
    position: fixed;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 5px;
    z-index: 1000;
    /* 他の要素より手前に */
    cursor: pointer;
    transition: background-color 0.3s;
}

.hamburger__line {
    position: absolute;
    left: 10px;
    width: 22px;
    height: 2px;
    background-color: #333;
    transition: all 0.3s;
}

.hamburger__line:nth-of-type(1) {
    top: 14px;
}

.hamburger__line:nth-of-type(2) {
    bottom: 14px;
}

/* ハンバーガーメニューが開いた時のスタイル (×印) */
.hamburger.is-active .hamburger__line:nth-of-type(1) {
    top: 20px;
    transform: rotate(45deg);
}

.hamburger.is-active .hamburger__line:nth-of-type(2) {
    top: 20px;
    transform: rotate(-45deg);
}

/* メニュー表示中に背景をスクロールさせない */
body.no-scroll {
    overflow: hidden;
}

/* 画像がコンテナの幅を超えないようにする */
img {
    max-width: 100%;
    height: auto;
}

p.chuoT {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
    padding: 0 20px;
}

/* --- START: タブレット表示向け調整 --- */
@media screen and (min-width: 769px) and (max-width: 1200px) {

    /* 表示領域に合わせるため、メインコンテンツセクションの左右のpaddingを減らします */
    section#mc02>div.wrap1200,
    section#mc04>div.wrap1200,
    section#mc06>div.wrap1200 {
        padding-left: 20px;
    }

    section#mc01>div.wrap1200,
    section#mc03>div.wrap1200,
    section#mc05>div.wrap1200 {
        padding-right: 20px;
    }

    /* 背景画像のサイズと位置をビューポート内に収まるように調整します */
    section#mc01 {
        background-size: 450px auto, 340px auto;
        background-position: calc(50% - 440px) top, calc(50% + 480px) top;
    }

    section#mc02 {
        background-size: 400px auto, 500px auto;
        background-position: calc(50% - 520px) top, calc(50% + 450px) top;
    }

    section#mc03 {
        background-size: 420px auto, 370px auto;
        background-position: calc(50% - 440px) top, calc(50% + 450px) top;
    }

    section#mc04 {
        background-size: 430px auto, 550px auto;
        background-position: calc(50% - 540px) top, calc(50% + 410px) top;
    }

    section#mc05 {
        background-size: 450px auto, 400px auto;
        background-position: calc(50% - 440px) center, calc(50% + 470px) top;
    }

    section#mc06 {
        background-size: 430px auto, 520px auto;
        background-position: calc(50% - 530px) center, calc(50% + 440px) center;
    }

    /* 背景画像の調整に伴い、テキストが重ならないように幅を調整します */
    p.read2 {
        width: 450px; /* 550pxから縮小 */
    }
}
/* --- END: タブレット表示向け調整 --- */


/* スマートフォン表示用のスタイル (画面幅768px以下) */
@media screen and (max-width: 768px) {
    body {
        padding-top: 70px;
        /* モバイル時の固定ヘッダーの高さ分スペースを確保 */
    }

    /* PC用のナビゲーションを非表示 */
    header>nav {
        display: none;
    }

    /* ハンバーガーボタンを表示 */
    .hamburger {
        display: block;
        top: 15px;
        /* モバイル時のハンバーガーボタンの位置調整 */
    }

    /* is-activeが付いた時のナビゲーションメニューのスタイル */
    #gnav.is-active {
        display: flex;
        /* JSでクラスが付いたら表示 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        z-index: 999;
        overflow: auto;
        flex-direction: column;
        align-items: center;
        /* コンテンツを水平方向に中央揃え */
        justify-content: flex-start;
        /* コンテンツを上揃え */
        padding-top: 80px;
        /* 固定ヘッダー/ハンバーガーをクリアするためのパディングを調整 */
        box-sizing: border-box;
        /* パディングを要素の合計幅と高さに含める */
    }

    #gnav.is-active ul {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* メニューアイテムを上揃え */
        align-items: center;
        padding: 0;
        /* パディングをリセット */
        margin-top: 0;
        /* マージンをリセット */
        width: 80%;
        /* メニュー全体の幅を調整 */
        max-width: 300px;
        /* 最大幅を設定 */
        background-color: #FFF;
        /* メニューの背景色 */
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 0;
        /* メニュー内のパディング */
    }

    #gnav.is-active ul li {
        margin: 0;
        width: 100%;
        border-bottom: 1px #514932 solid;
    }

    #gnav.is-active ul li:last-child {
        border-bottom: none;
        /* 最後のアイテムの区切り線はなし */
    }

    #gnav.is-active ul li a {
        font-size: 1.2rem;
        color: #333;
        padding: 15px 20px 15px 50px;
        /* パディングを増やしてクリックしやすく */
        display: block;
        /* リンク全体をクリック可能に */
        width: 100%;
        box-sizing: border-box;
        transition: background-color 0.2s ease;
        font-weight: 600;
        position: relative;
        /* 矢印の配置のために追加 */
    }

    #gnav.is-active ul li a::before {
        content: '';
        position: absolute;
        left: 20px;
        /* 左端からの位置 */
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 8px;
        height: 8px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        transition: border-color 0.2s ease;
    }

    #gnav.is-active ul li a:hover {
        background-color: #e0e0e0;
        /* ホバー時の背景色 */
    }

    #gnav.is-active ul li a:hover::before {
        border-top-color: #514932;
        /* ホバー時に矢印の色を変更 */
        border-right-color: #514932;
    }

    #gnav.is-active ul li a.is-active {
        background-color: #514932;
        color: #FFF;
    }

    #gnav.is-active ul li a.is-active::before {
        border-top-color: #FFF;
        /* アクティブ時に矢印の色を白に */
        border-right-color: #FFF;
    }

    /* gnavがアクティブなときに.henreihinを明示的に表示し、スタイルを設定 */
    #gnav.is-active .henreihin {
        display: flex;
        /* メニューがアクティブなときに.henreihinを表示 */
        flex-direction: column;
        align-items: center;
        width: 100%;
        /* メニューコンテナの全幅を使用 */
        margin-top: 40px;
        /* メインナビゲーションリンクからのスペース */
        padding: 0 20px;
        /* 水平方向のパディングを追加 */
        box-sizing: border-box;
    }

    #gnav.is-active .henreihin .main-content-list {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        /* .henreihinのリストアイテム間のスペース */
        padding: 0;
    }

    /* ヘッダー */
    header {
        padding: 0px 20px;
        height: 70px;
    }

    header h1 img {
        width: calc(100% - 50px);
        vertical-align: bottom;
    }

    /* 共通見出し */
    #kifuContactSection h2,
    h2.kazari {
        font-size: 1.65rem;
        /* 変更: emからremへ。SP時の基準フォントサイズ(14px)に相対的になります。 */
        background-size: contain;
        padding-bottom: 25px;
        margin-bottom: 40px;
    }

    h2.kazari span {
        display: block;
    }

    /* 返礼品紹介 */
    ul.main-content-list {
        display: none;
    }



    article#mainContent section {
        height: auto !important;
        background-image: none;
        /* SPでは背景画像を非表示に */
        padding: 0px 0px 30px;
        margin-bottom: 0 !important;
    }

    section#mc01 {
        margin-top: 0px;
    }

    section#mc01>div.wrap1200,
    section#mc03>div.wrap1200,
    section#mc05>div.wrap1200,
    section#mc02>div.wrap1200,
    section#mc04>div.wrap1200,
    section#mc06>div.wrap1200 {
        justify-content: center;
        padding: 0px;
    }

    /* --- 変更箇所 --- */
    /* 以前はここに背景画像が設定されていましたが、p.read1::afterに移動しました */
    section#mc01>div.wrap1200 {
        background-image: none;
    }

    article#mainContent section .inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    article#mainContent::after {
        bottom: -80px;
        border-width: 80px 50vw 0 50vw;
    }

    article#mainContent section>div>div>h3 {
        margin-left: 0;
    }

    article#mainContent section#mc01>div>div>h3 img {
        width: 199px;
    }

    article#mainContent section#mc02>div>div>h3 img {
        width: 265px;
    }

    article#mainContent section#mc03>div>div>h3 img {
        width: 250px;
    }

    article#mainContent section#mc04>div>div>h3 img {
        width: 175px;
    }

    article#mainContent section#mc05>div>div>h3 img {
        width: 251px;
    }

    article#mainContent section#mc06>div>div>h3 img {
        width: 288px;
    }

    /* --- 変更箇所 --- */
    /* p.read1に::after擬似要素を追加して、その後ろに画像を表示します */
    p.read1 {
        font-size: 1.3rem;
        position: relative;
        /* ::afterを配置するための基準 */
        padding-bottom: 200px;
        /* 画像を表示するスペースを確保 */
        margin-bottom: 1rem;
        /* 画像と次のp.read2との間に余白を設定 */
        width: 100%;
    }

    #mc02>div>div>p.read1 span {
        display: block;
    }

    #mc02>div>div>p.read1 img {
        width: 40px;
    }

    p.read1::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        height: 200px;
        /* 画像の高さに合わせて調整 */
        background-image: url(/img/site-furusato/bg-mc1-sp.webp);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    #mc02>div>div>p.read1::after {
        background-image: url(/img/site-furusato/bg-mc2-sp.webp);
    }

    #mc03>div>div>p.read1::after {
        background-image: url(/img/site-furusato/bg-mc3-sp.webp);
    }

    #mc04>div>div>p.read1::after {
        background-image: url(/img/site-furusato/bg-mc4-sp.webp);
    }

    #mc05>div>div>p.read1::after {
        background-image: url(/img/site-furusato/bg-mc5-sp.webp);
    }

    #mc06>div>div>p.read1::after {
        background-image: url(/img/site-furusato/bg-mc6-sp.webp);
    }

    /* --- 変更ここまで --- */


    p.read2 {
        width: 100%;
        text-align: left;
        padding: 0 18px;
        box-sizing: border-box;
    }

    /* 寄附の使い道、ふるさと納税とは */
    div#useInfo,
    div#kifuMethods,
    div#kifuContact {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 60px;
    }

    #onlineOnestop img {
        width: 100%;
        height: auto;
    }

    /* フッター上バナー */
    section#bannerSection .banners {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    section#bannerSection .banners p {
        width: calc(50% - 10px);
        /* 2列表示のための幅調整 (gapの半分を引く) */
        height: auto;
    }

    section#bannerSection .banners p.oneCol {
        width: 100%;
    }

    #pageTopBtn {
        width: 45px;
        height: 70px;
    }

    .btnKifu {
        bottom: 15px;
        left: 20px;
        width: 80px;
        height: 115px;
    }

    .btnKifu img {
        width: 80px;
    }

    .page-top-wrapper {
        padding: 0px 15px 10px 0px;
    }

    /* フッター */
    footer {
        text-align: center;
        background-image: url(/img/site-furusato/f-bg.webp);
        background-size: cover;
        background-position: center bottom -100px;
    }

    .footer-links {
        flex-direction: column;
        gap: 20px;
    }

    /* スマートフォン向けの調整 */
    div.h2En {
        margin-top: 20px;
    }

    section#shiroishiSection {
        margin: 140px 0px 80px;
    }

    section#shiroishiSection .wrap1200 {
        padding: 40px 10px;
    }

    section#shiroishiSection::before {
        top: -80px;
        border-width: 0px 50vw 80px 50vw;
    }

    section#shiroishiSection::after {
        bottom: -80px;
        border-width: 0px 50vw 80px 50vw;
    }

    div#kifuContent::before {
        top: -80px;
        border-width: 0px 50vw 80px 50vw;
    }

    #kifuContent h3 {
        font-size: 1.2rem;
        margin: 0 10px 18px;
    }

    .card .shosai h4.kei {
        font-size: 1.4rem;
    }

    .card .shosai h4 {
        flex-wrap: wrap;
    }

    .shiroishiContent .jodan,
    .shiroishiContent .gedan {
        flex-direction: column;
        /* スマートフォンでは縦積みにする */
        gap: 20px;
        /* 縦積み時の要素間の隙間 */
    }

    .shiroishiContent {
        padding: 40px 20px;
        /* スマートフォンでのパディング調整 */
    }

    section#kifuSection .banners {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        width: 90%;
        margin-bottom: 0px;
    }

    section#kifuSection .banners p {
        /* モバイルではgrid-template-columnsが幅を制御するため、calc()は不要 */
        height: auto;
    }

    div#kifuContent {
        background-position: right bottom;
        background-size: 300px auto;
    }

    #kifuMethods div.target {
        padding: 0px 15px 16px;
    }

    #kifuMethods div.target ul {
        padding-left: 0px;
        /* margin-right: -1rem; */
        margin-bottom: 0px;
    }

    .card {
        padding: 20px 10px;
    }

    #onlineOnestop {
        margin-bottom: 40px;
    }


    div#useInfo .content {
        flex-direction: column;
        align-items: center;
    }

    div#useInfo .text h3 {
        text-align: center;
        margin: 0.5rem 0px 0px;
        font-size: 1.3rem;
    }


    p.textM {
        font-size: 1rem;
        font-weight: 600;
        text-align: left;
    }

    p.textM br {
        display: none;
    }

    p.textM2 {
        font-size: 1.125rem;
    }

    .card .shosai p.denwa,
    .card .shosai p.email {
        font-size: 1.125rem;
    }


    .slider-container {
        width: 100%;
        margin: 0 auto 40px;
    }

    .slider-container .slick-dots {
        width: auto;
    }

    .slick-navigation {
        width: 90%;
        /* background-color: #ffd448; */
        padding: 0px 10px;
        border-radius: 300px;
        position: relative;
        align-items: center;
        margin: 0 auto;
        left: unset;
        transform: none;
    }

    .slider1 .slick-prev,
    .slider1 .slick-next {
        width: 30px;
        height: 30px;
    }

    .slider1 .slick-prev {
        left: 15px;
        /* 画面幅に応じて位置も調整 */
    }

    .slider1 .slick-next {
        right: 15px;
        /* 画面幅に応じて位置も調整 */
    }

    /* モバイルメニュー内の返礼品カテゴリリストのスタイル */
    .mobile-return-gift-list {
        list-style: none;
        width: 90% !important;
        margin: 10px auto !important;
        box-shadow: none !important;
        background-color: #FFF !important;
    }

    .mobile-return-gift-list li {
        margin-bottom: 0;
        border-top: 1px dashed #ccc;
        border-bottom: none !important;
    }

    .mobile-return-gift-list li:first-child {
        border-top: none;
        /* 最初のアイテムの上線はなし */
    }

    .mobile-return-gift-list li a {
        /* font-size: 1rem !important; */
        text-decoration: none;
        display: block !important;
        padding: 13px 0 13px 10px !important;
        font-weight: normal !important;
        position: relative;
    }

    .mobile-return-gift-list li a::before {
        display: none;
    }

    .mobile-return-gift-list li a:hover::before {
        border-top-color: #514932;
        /* ホバー時に矢印の色を変更 */
        border-right-color: #514932;
    }

    .mobile-return-gift-list li a.is-active::before {
        border-top-color: #FFF;
        /* アクティブ時に矢印の色を白に */
        border-right-color: #FFF;
    }

    /* スマートフォン表示時に.slick-activeの透明度を100%にする */
    body.is-mobile-viewport .slick-slide.slick-active {
        opacity: 1 !important;
    }

    .shosai .btn-primary {
        padding: 0.4em 3.5em 0.4em 1.5em;
    }

    section#bannerSection {
        padding: 20px 0 150px;
    }

    body>footer>strong>img {
        width: 265px;
    }

    body>footer>p:nth-child(3) span {
        display: block;
    }

}

@media (max-width: 480px) {
    .slider-container {
        width: 100%;
        margin: 0px auto 0px;
    }

    .slider1 .slick-prev,
    .slider1 .slick-next {
        width: 20px;
        height: 20px;
    }

    .slider1 .slick-prev {
        left: 10px;
        /* 画面幅に応じて位置も調整 */
    }

    .slider1 .slick-next {
        right: 10px;
        /* 画面幅に応じて位置も調整 */
    }
}

@media screen and (max-width: 320px) {
    html {
        font-size: 14px;
        /* スマートフォンでは基本フォントサイズを少し小さくする */
    }
}

/* --- START: Responsive Embed Styles --- */
.embed-container {
    position: relative;
    width: 100%;
    max-width: 42rem;
    z-index: 0;
    height: 0;
    /* 高さを0にする */
    padding-top: 56.25%;
    /* 16:9のアスペクト比をパディングで表現 (9 / 16 * 100) */
}

.embed-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(135deg,
            #FFF,
            #FFF 5px,
            #deedde 5px,
            #deedde 10px);
    border-radius: 10px;
    transform: translate(5px, 5px);
    z-index: -1;
}

.embed-container iframe {
    position: absolute;
    /* コンテナを基準に絶対配置 */
    top: 0;
    left: 0;
    display: block;
    /* インライン要素の隙間をなくす */
    width: 100%;
    height: 100%;
    /* コンテナいっぱいに広がるように高さを100%にする */
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    border: none;
}




/* ▼▼▼ 追加・修正したスタイル ▼▼▼ */



/* PC表示ではモバイル用の返礼品リストを非表示にする */
.mobile-return-gift-list {
    display: none;
}

/* スマートフォン表示（横幅768px以下）のときだけ表示する */
@media screen and (max-width: 768px) {
    .mobile-return-gift-list {
        display: block;
    }
}

/* モバイルメニュー内の返礼品カテゴリのハイライト */
#gnav.is-active .mobile-return-gift-list li a.is-active {
    background-color: #514932;
    /* 背景色を濃い緑に */
    color: #FFF;
    /* 文字色を白に */
    font-weight: bold;
    /* 文字を太字にして強調 */
}



/* header>nav>ul li a のスタイルを修正 */
header>nav>ul li a {
    position: relative;
    /* 擬似要素の基準位置として追加 */
    text-decoration: none;
    color: #514932;
    padding: 2px 8px 5px 8px;
    /* ラインのスペースを確保するためにpadding-bottomを調整 */
    border-radius: 3px;
    overflow: hidden;
    /* はみ出し防止 */
}

/* ホバー時に表示されるオレンジ色のラインのスタイル */
header>nav>ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 11px;
    background-color: orange;
    transition: width 0.3s ease-in-out;
    z-index: -1;
}

/* ホバー時にラインの幅を100%にする */
header>nav>ul li a:hover::after {
    width: 100%;
}

/* 既存のアクティブなリンクのスタイル */
header>nav>ul li a.is-active {
    background-color: #514932;
    color: #FFF;
}

/* アクティブなリンクをホバーした際は、ラインアニメーションを無効化 */
header>nav>ul li a.is-active:hover::after {
    width: 0;
}


/* 寄附をするセクションのバナースタイルを修正 */
section#kifuSection .banners p {
    background-color: #FFF;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
    /* border-color を追加 */
    border: solid 2px #FFF;
}

/* バナーにカーソルを乗せた時のスタイルを新たに追加 */
section#kifuSection .banners p:hover {
    box-shadow: 0 8px 25px rgba(255, 165, 0, 0.5);
    /* オレンジ色のシャドウ */
    border: solid 2px #ffb11b;
}

/* バナー内の画像のスタイル */
section#kifuSection .banners p img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}


/* バナーセクションの画像にアニメーション効果を追加 */
section#bannerSection .banners img {
    width: 100%;
    vertical-align: bottom;
    height: auto;
    transition: transform 0.4s ease;
    /* 拡大アニメーションを滑らかにする */
}

/* バナー(<p>)にカーソルを乗せた時に画像を110%に拡大 */
section#bannerSection .banners p:hover img {
    transform: scale(1.1);
}


/* 汎用ボタンスタイルを修正 */
.btn-primary {
    background-color: #DEECDD;
    display: flex;
    color: #485048;
    text-decoration: none;
    font-weight: 600;
    padding: 0.4em 4em;
    border-radius: 300px;
    background-image: url(/img/site-furusato/arrow.png);
    background-repeat: no-repeat;
    background-position: center right 13px;
    /* 初期位置 */
    background-size: 30px;
    flex-direction: column;
    align-items: center;
    transition: background-position 0.3s ease-in-out;
    /* アニメーションを追加 */
}

/* ボタンにカーソルを乗せた時のスタイルを新たに追加 */
.btn-primary:hover {
    background-position: center right 3px;
    /* 右に10px移動した位置 */
}


/* iOSで電話番号が自動リンクされた際のスタイルを調整 */
.card .shosai p.denwa a[href^="tel:"] {
    color: inherit;
    /* 親要素の色を継承 */
    text-decoration: none;
    /* 下線を削除 */
}