@charset "utf-8";

/* =========================================================
   1. Base & Common Settings
   基本設定・汎用クラス
   ========================================================= */

/* メニュー展開時にスクロールを禁止するクラス */
body.is-fixed {
    overflow: hidden;
}

/* ヘッダー固定によるコンテンツの食い込み防止 */
body {
    padding-top: 80px;
    min-width: 100%;
    /* 横揺れ防止 */
}

.date {
    text-align: right;
    display: block;
}

a {
    transition: all 0.3s ease;
    text-decoration: none;
}

/* ホバー時の基本動作 */
a:hover {
    opacity: 0.7;
}

img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}

/* 汎用：縦線（下に伸びる） */
.verticalLineBottom {
    position: relative;
    margin-bottom: 140px;
}

.verticalLineBottom::before {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100px;
    background-color: #8F7321;
}

/* 汎用：縦線（独立・ゴールド） */
.verticalLine {
    display: block;
    width: 1px;
    height: 100px;
    background-color: #8F7321;
    margin: 0 auto;
}

/* 汎用：縦線（独立・白） */
.verticalLineSiro {
    display: block;
    width: 1px;
    height: 100px;
    background-color: #FFF;
    margin: 0 auto;
}


/* =========================================================
   2. Typography & Headings
   見出し・フォント設定
   ========================================================= */

/* 見出し全体（明朝体・中央寄せ） */
.midasiH2 {
    text-align: center;
}

.midasiH2 h2 {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", "MS PMincho", "MS Mincho", serif;
    text-align: center;
    color: #333;
}

/* 英語部分（span）のデザイン */
.midasiH2 h2 span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
    font-size: 1.4rem;
    color: #8F7321;
}

/* 英語部分の両脇の線 */
.midasiH2 h2 span::before,
.midasiH2 h2 span::after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background-color: #8F7321;
}


/* =========================================================
   3. Header & Navigation
   ヘッダー・ナビゲーション
   ========================================================= */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logoImg img {
    height: auto;
    width: 420px;
    vertical-align: middle;
}

.logoImg h1 {
    margin: 0;
    line-height: 1;
}

.headerRight {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* PC用ナビゲーション */
.mainNav ul {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mainNav a {
    color: #333;
    font-weight: bold;
    font-size: 14px;
    display: block;
}

.mainNav a:hover {
    color: #8F7321;
    opacity: 1;
    transform: translateY(-3px);
}

/* ハンバーガーメニューアイコン */
.subMenu {
    display: block;
    width: 30px;
    height: 25px;
    position: relative;
    cursor: pointer;
    z-index: 10000;
}

.subMenu span {
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #8F7321;
    border-radius: 2px;
    transition: all 0.3s ease;
    left: 0;
}

.subMenu span:nth-child(1) {
    top: 0;
}

.subMenu span:nth-child(2) {
    top: 11px;
}

.subMenu span:nth-child(3) {
    bottom: 0;
}

/* ハンバーガーメニュー展開時 */
.subMenu.is-active span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

.subMenu.is-active span:nth-child(2) {
    opacity: 0;
}

.subMenu.is-active span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

/* ドロワーメニュー（中身） */
.drawerMenu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background-color: #f2f0ec;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.4s ease;
    z-index: 9998;
    padding-top: 100px;
    box-sizing: border-box;
}

.drawerMenu.is-active {
    right: 0;
}

.drawerInner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.drawerInner a {
    color: #333;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}


/* 1. subNavはデフォルトで非表示 */
.subNav,
.mainNav ul li.subNav {
    display: none;
}

/* 2. drawerInnerの中にある時だけ表示 */
.drawerInner .subNav {
    display: block;
    margin-top: 10px;
    padding-left: 15px;
    /* 少しインデント */
    border-left: 2px solid #8F7321;
}

/* ドロワー内のリンク共通スタイル調整（既存のスタイルを補強） */
.drawerInner a {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* 移動してきたメインナビのリンクがドロワー内で見づらくならないよう調整 */
.drawerInner>a {
    font-weight: bold;
    color: #333;
    padding: 10px 0;
}


/* =========================================================
   4. Hero & Intro Sections
   メインビジュアル・導入部
   ========================================================= */

/* メインビジュアル */
.furusatoHeroImg {
    width: 100%;
    height: 580px;
    background-image: url(/img/furusato/ph-main.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

@media screen and (min-width: 1200px) {
    .furusatoHeroImg {
        height: 45vw;
        min-height: 580px;
    }
}

.furusatoHeroImg img {
    max-height: 340px;
    width: auto;
}

.furusatoHeroImg .verticalLineSiro {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 1px;
    height: 100px;
    background-color: #FFF;
}

/* キャッチコピー */
.catchImg {
    margin-top: 130px;
}

.catchImg img {
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
    display: block;
}

@media screen and (min-width: 1600px) {
    .catchImg img {
        max-width: 1000px;
    }
}

/* 猪苗代の紹介エリア (Furusato B) */
.furusatoB {
    max-width: 1080px;
    margin: 100px auto;
    padding: 0 20px 0 0;
    box-sizing: border-box;
    padding-right: 25%;
    background-image: url(/img/furusato/map.webp);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 50% auto;
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", "MS PMincho", "MS Mincho", serif;
}

.furusatoB strong {
    display: block;
    font-size: 2rem;
    color: #8F7321;
    margin-bottom: 20px;
}

.furusatoB p {
    line-height: 1.8;
    margin: 0;
}

.furusatoB img {
    display: block;
    width: 420px;
    margin-top: 40px;
}

/* 選べる2つのふるさと納税バナー */
.bnrTwoSelect {
    text-align: center;
    padding-bottom: 130px;
}


/* =========================================================
   5. Coupon & Portal Sections
   クーポン・ポータルサイト紹介
   ========================================================= */

/* クーポン紹介 */
.couponIntro {
    background-color: #008734;
    text-align: center;
    padding: 50px 0 150px;
}

.couponIntro p {
    color: #FFF;
    line-height: 2;
}

.couponIntro .infoLinks {
    width: 400px;
    margin: 40px auto 0;
    position: relative;
}

.couponIntro .infoLinks::before {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100px;
    background-color: #FFF;
    margin-top: 50px;
}

/* ポータルサイト一覧 */
.portalBnrWrap {
    width: 980px;
    margin: 50px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.portalBnrWrap p {
    width: calc((100% - 60px) / 4);
    margin: 0;
}

.portalBnrWrap a {
    display: block;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.portalBnrWrap a:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    opacity: 0.9;
}


/* =========================================================
   6. Banners & Lineup Sections
   企業版/クラファン・お礼の品ラインナップ
   ========================================================= */

.furusatoInfoWrap {
    background: linear-gradient(to bottom, #f2f0ec calc(100% - 150px), #e1ddd0 calc(100% - 150px));
    margin-top: 70px;
}

/* 企業版・ガバメントクラウドファンディング */
section.bnrFurusato {
    display: flex;
    justify-content: center;
    height: 200px;
    width: 100%;
    /* max-width: 1400px; */
    margin: 0 auto;
}

.bnrFurusato .kigyoBan,
.bnrFurusato .cloud {
    flex: 1;
    height: 100%;
}

.bnrFurusato a {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px 20px 0;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-align: right;
    background-repeat: no-repeat, no-repeat;
    background-position: right center, center center;
    background-size: auto 100%, cover;
}

.bnrFurusato a:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.bnrFurusato a::after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url(/img/furusato/arrow-siro.svg) no-repeat center center / contain;
    margin-left: 15px;
    margin-bottom: 3px;
}

.kigyoBan a {
    background-image: url(/img/furusato/triangle.svg), url(/img/furusato/bnr-bg01.webp);
}

.cloud a {
    background-image: url(/img/furusato/triangle.svg), url(/img/furusato/bnr-bg02.webp);
}


/* お礼の品ラインナップ（Swiper） */
.furusatoLineUp {
    margin-top: 130px;
}

.swiper-slide img {
    width: 100%;
}

#lineUp .swiper-slide {
    display: flex;
    flex-direction: column;
    position: relative;
}

#lineUp .swiper-slide a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    color: #333;
    background-color: #FFF;
    padding: 25px;
    width: 100%;
    box-sizing: border-box;
    position: static;
}

#lineUp .swiper-slide a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
}

#lineUp .swiper-slide a::after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url(/img/furusato/arrow.svg) no-repeat center center / contain;
}

/* Swiper コントロール (Multiパターン用) */
.swiper-multi .swiper-container-wrapper {
    position: relative;
    padding-top: 50px;
}

.swiper-multi .autoplay-controls {
    position: absolute;
    top: 10px;
    z-index: 20;
    margin: 0;
}

.swiper-multi .swiper-button-prev,
.swiper-multi .swiper-button-next {
    position: absolute;
    top: 50%;
    z-index: 20;
    margin: 0;
}

.swiper-multi .swiper-button-prev {
    left: 0;
    transform: translateY(-50%) rotate(180deg);
}

.swiper-multi .swiper-button-next {
    right: 0;
    transform: translateY(-50%);
}

.swiper-multi .swiper-controls-wrapper {
    justify-content: center;
    margin-top: 10px;
    width: 100%;
    position: static;
}


/* =========================================================
   7. Usage & Application Sections
   寄附金の使い道・お申し込み方法
   ========================================================= */

/* 寄附金の使い道 */
.furusatoUse {
    margin-top: 130px;
}

.useWrap {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
}

.useWrap>div {
    width: 33.3333%;
    box-sizing: border-box;
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.useWrap>div strong {
    background-color: #FFF;
    display: block;
    text-align: center;
    padding: 20px 0;
    color: #8F7321;
    position: relative;
}

.useWrap>div strong::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -10px;
    right: -10px;
    height: 1px;
    background-color: #8F7321;
}

.useWrap>div p {
    background-color: #FFF;
    padding: 0 20px 20px;
    margin-top: 0;
    position: relative;
    flex-grow: 1;
}

.useWrap>div p::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: -10px;
    right: -10px;
    height: 1px;
    background-color: #8F7321;
}

.useWrap>div img {
    width: 100%;
    height: auto;
    display: block;
}

/* 番号画像配置 */
.use01::before,
.use02::before,
.use03::before,
.use04::before,
.use05::before {
    content: "";
    display: block;
    position: absolute;
    top: 25px;
    left: 15px;
    height: 100px;
    width: 100px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 1;
}

.use01::before {
    background-image: url(/img/furusato/use01.svg);
}

.use02::before {
    background-image: url(/img/furusato/use02.svg);
}

.use03::before {
    background-image: url(/img/furusato/use03.svg);
}

.use04::before {
    background-image: url(/img/furusato/use04.svg);
}

.use05::before {
    background-image: url(/img/furusato/use05.svg);
}

/* お申し込み方法 */
.furusatoApplication {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px 50px;
    box-sizing: border-box;
    background-color: #FFF;
}

.furusatoStepsWrap {
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
    align-items: stretch;
}

.furusatoStepsWrap>div {
    border: 1px solid #8F7321;
    position: relative;
    width: 18%;
    box-sizing: border-box;
    text-align: center;
    background-color: #fff;
    padding-top: 47px;
    display: flex;
    flex-direction: column;
}

.furusatoStepsWrap>div strong {
    display: block;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1;
}

.furusatoStepsWrap>div strong img {
    height: 70px;
    width: auto;
    background-color: #FFF;
    padding: 0 20px;
}

.furusatoStepsWrap>div>img {
    height: 65px;
    width: auto;
    margin: 0 auto 10px auto;
    display: block;
    flex-shrink: 0;
}

.furusatoStepsWrap>div p {
    background-color: #8F7321;
    color: #fff;
    margin: 0;
    padding: 10px 5px;
    font-size: 14px;
    line-height: 1.4;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}

/* 各種ボタン共通スタイル */
.infoLinks {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 40px;
    column-gap: 30px;
}

.infoLinks a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    color: #8F7321;
    border: solid 2px #8F7321;
    padding: 17px 10px;
    flex: 1;
    letter-spacing: 1px;
    position: relative;
    background-color: #FFF;
    font-weight: bold;
}

.infoLinks a:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.infoLinks a::after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url(/img/furusato/arrow.svg) no-repeat center center / contain;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}


/* =========================================================
   8. Footer & Images
   フッター・画像一覧
   ========================================================= */

.furusatoItemsWrap {
    display: flex;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding-top: 100px;
}

.furusatoItemsWrap img {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    object-fit: cover;
}

.furusatoFooterWrap {
    background-color: #e1ddd0;
}

footer {
    width: 900px;
    margin: 0 auto;
    padding-top: 80px;
    padding-bottom: 20px;
}

.fFlex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.fContact p {
    line-height: 1.9;
    margin-bottom: 0;
}

.fLinks {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    width: 27%;
}

.fLinks a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    color: #333;
    border-bottom: solid 1px #333;
    padding-bottom: 6px;
}

.fLinks a:hover {
    opacity: 1;
    transform: translateY(-3px);
    color: #8F7321;
}

.fLinks a::after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url(/img/furusato/arrow.svg) no-repeat center center / contain;
}

.copyR {
    text-align: center;
    margin: 30px 0 0;
}


/* =========================================================
   9. UI Components (Top Btn)
   トップへ戻るボタン
   ========================================================= */

.scrollTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #8F7321;
    border-radius: 50%;
    z-index: 9990;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.scrollTopBtn::before {
    content: "";
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.scrollTopBtn.is-show {
    opacity: 1;
    visibility: visible;
}

.scrollTopBtn:hover {
    background-color: #755d1b;
    transform: translateY(-5px);
}


/* [PC版] 現在地のスタイル：テキストの色変更とアンダーライン */
.mainNav a.is-current {
    color: #8F7321 !important;
    position: relative;
    text-decoration: none;
}

.mainNav a.is-current::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #8F7321;
}


/* =========================================================
   ドロワー内ナビゲーションの統一スタイル（PC・SP共通）
   ========================================================= */

/* 1. ドロワー内のメインナビを縦一列にする */
.drawerInner .mainNav ul {
    display: flex;
    flex-direction: column;
    /* 縦並び */
    gap: 0;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 2. 各リンクの基本スタイル（PC版の横並びスタイルを上書き） */
.drawerInner .mainNav ul li a {
    display: block;
    width: 100%;
    padding: 15px 10px;
    /* タップ・クリックしやすい余白 */
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    color: #333 !important;
    /* PC版のhover色指定に負けないよう固定 */
    transform: none !important;
    /* PC版の浮き上がりを解除 */
    transition: background-color 0.3s;
}

/* 3. ドロワー内リンクのホバー時 */
.drawerInner .mainNav ul li a:hover {
    background-color: #eee;
    opacity: 1;
}

/* 4. [現在地ハイライト] モバイル版のデザインをPCドロワーにも適用 */
.drawerInner .mainNav ul.mainNavList li.subNav a.is-current,
.drawerInner .mainNav a.is-current {
    background-color: #e1ddd0 !important;
    color: #8F7321 !important;
    border-left: 4px solid #8F7321;
    padding-left: 15px;
}

/* PC版で設定されている下線（::after）をドロワー内では非表示にする */
.drawerInner .mainNav a.is-current::after {
    display: none !important;
}

/* 5. サブナビ（町の魅力など）のスタイル */
.drawerInner .subNav {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    background-color: #f9f8f6;
    border-left: 2px solid #8F7321;
}

.drawerInner .subNav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.drawerInner .mainNav ul.mainNavList li.subNav {
    display: block;
    border-left: none;
}

.drawerInner .mainNav ul.mainNavList li.subNav a {
    background-color: #f2f0ec;
}

.drawerInner .mainNav ul.mainNavList li.subNav a:hover {
    background-color: #eee;
    opacity: 1;
}

.drawerInner .subNav a {
    padding: 12px 15px 12px 25px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    color: #666 !important;
}

.drawerInner .subNav a.is-current {
    background-color: transparent !important;
    font-weight: bold;
    color: #8F7321 !important;
    border-left: none;
}


/* =========================================================
   下層ページ
   ========================================================= */
.tpl_site_furusato.detail_page {
    background-color: #f2f0ec;
}

.furusatoMain {
    width: 1080px;
    margin: 0 auto;
    padding: 40px 0;
}

#pankuzu_wrap {
    background: #f2f0ec;
}

.pankuzu:first-child .icon_current,
#footstep_ttl {
    border-radius: 0px;
    background: #8F7321;
}

#clear_footstep {
    border: 2px solid #8F7321;
    background-color: #8F7321;
}


#main_body h2 {
    background-color: #8F7321;
    background-image: none;
    box-shadow: none;
    border-radius: 0;
    color: #FFF;
}

#main_body h3 {
    position: relative;
    display: inline-block;
    background-color: #fff;
    padding: 10px 20px;
    margin-top: 10px;
    /* margin-left: 10px; */
    z-index: 1;
    border: none;
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
    color: #554236;
}

#main_body h3::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: 100%;
    height: 100%;
    border: 1px solid #B8AE8C;
    z-index: -1;
    box-sizing: border-box;
}

#main_body h4 {
    background-image: url(/img/furusato/i-square.svg), repeating-linear-gradient(to right, #B8AE8C 0, #B8AE8C 2px, transparent 2px, transparent 8px);
}

#main_body h5 {
    background-image: linear-gradient(#333333, #333333), linear-gradient(#E1DDD0, #E1DDD0);
    background-repeat: no-repeat;
    background-position: left center, 14px top;
    background-size: 28px 1px, calc(100% - 14px) 100%;
}

#main_body h6 {
    border-bottom: solid 1px #333333;
    background-image: linear-gradient(135deg, #8F7321 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 16px 16px;
}

#main_body td,
#main_body table {
    border-color: #333;
}

#main_body th {
    background: #e1ddd0;
    border-color: #333;
}

caption {
    caption-side: top;
    text-align: left;
    font-size: 1.8rem;
    font-weight: bold;
    color: #2d3748;
    padding: 1rem 0;
}

#section_footer {
    background-color: #FFF;
    border-color: #FFF;
}

#section_footer h2,
#main_body #section_footer h2 {
    background-color: #8f7321;
}

.sf_email a {
    border: solid 1px #8F7321;
    display: block;
    padding: 8px 30px;
    border-radius: 300px;
    text-decoration: none;
    color: #333;
}


/* 新しいiframeコンテナのスタイル */
.iframe-container {
    aspect-ratio: var(--iframe-width) / var(--iframe-height);
    width: 100%;
    /* max-widthは下のメディアクエリで設定 */
}

/* iframe自体のスタイル */
.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* デスクトップ表示のスタイル（画面幅769px以上） */
@media (min-width: 769px) {
    .iframe-container {
        max-width: var(--iframe-width-px);
    }
}


/* =========================================================
   11. Lower Page Heading
   下層ページ用ヘッダー
   ========================================================= */
.lowerHeading {
    height: 180px;
    background-image: url(/img/furusato/ph-header.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lowerHeading h1 {
    display: flex;
    text-align: left;
    max-width: 1080px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    color: #FFF;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    justify-content: center;
}


/* =========================================================
   10. Mobile Optimization (max-width: 768px)
   スマホ表示用の追加スタイル（上書き）
   ========================================================= */
@media screen and (max-width: 768px) {

    /* --- 全体のレイアウト調整 --- */
    body {
        overflow-x: hidden;
        padding-top: 50px;
    }

    /* コンテナ幅のリセット */
    .furusatoApplication,
    .useWrap,
    .portalBnrWrap,
    footer,
    section.bnrFurusato {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    /* --- ヘッダー・メインビジュアル --- */
    header {
        padding: 0 15px;
        height: 50px;
    }

    .logoImg img {
        width: 320px;
        max-width: 90%;
    }

    .furusatoHeroImg {
        height: 60vh;
        min-height: 400px;
    }

    .furusatoHeroImg img {
        max-width: 80%;
    }

    .catchImg img {
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* --- 猪苗代紹介エリア --- */
    .furusatoB {
        padding-right: 20px;
        margin: 60px auto;
        background-position: center bottom;
        background-size: 80% auto;
        padding-bottom: 250px;
        padding-left: 20px;
    }

    .furusatoB img {
        width: 100%;
        margin: 30px auto 0;
    }

    /* --- セクションタイトル --- */
    .midasiH2 h2 span::before,
    .midasiH2 h2 span::after {
        display: none;
    }

    /* --- 企業版・クラファンバナー --- */
    section.bnrFurusato {
        flex-direction: column;
        height: auto;
        /* 高さを自動調整（PCの200px固定を解除） */
        gap: 20px;
        /* 上下のバナーの間隔 */
        margin-bottom: 50px;
    }

    .bnrFurusato .kigyoBan,
    .bnrFurusato .cloud {
        height: auto;
        /* 高さを自動調整 */
        width: 100%;
    }

    .bnrFurusato a {
        display: block;
        /* フレックス（右下寄せ）を解除してブロック表示へ */
        position: relative;
        width: 100%;
        height: auto;

        /* 上部に画像スペース(200px)を確保し、テキスト周りに余白を作る */
        padding: 220px 20px 20px 20px;

        /* 背景画像の調整（上部に配置・高さ200px固定） */
        background-position: center top;
        background-size: auto 200px;
        background-repeat: no-repeat;

        /* テキストのスタイル変更（白背景・黒文字） */
        text-align: left;
        color: #333;
        background-color: #fff;
        border: 1px solid #e1ddd0;
        /* 薄い枠線を追加 */
        font-size: 16px;
        line-height: 1.4;
    }

    /* ホバー時の挙動調整 */
    .bnrFurusato a:hover {
        transform: none;
        /* 全体が浮くと変なので解除、あるいは opacity だけにする */
        opacity: 0.8;
    }

    /* スマホでは三角形の装飾を消して、メイン写真だけを表示する */
    .kigyoBan a {
        background-image: url(/img/furusato/bnr-bg01.webp);
    }

    .cloud a {
        background-image: url(/img/furusato/bnr-bg02.webp);
    }

    /* 矢印アイコンの調整 */
    .bnrFurusato a::after {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-left: 10px;
        vertical-align: middle;
        margin-bottom: 4px;

        /* 背景が白になるため、白い矢印から色のついた矢印へ変更 */
        background: url(/img/furusato/arrow.svg) no-repeat center center / contain;
    }

    /* --- 掲載サイト紹介（バナー）: 2列表示 --- */
    .portalBnrWrap {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 30px auto;
    }

    .portalBnrWrap p {
        width: calc((100% - 10px) / 2);
    }

    /* --- 寄附金の使い道: 1列表示 --- */
    .useWrap>div {
        width: 100%;
        padding: 20px 0;
        margin: 0 20px 20px;
    }

    .use01::before,
    .use02::before,
    .use03::before,
    .use04::before,
    .use05::before {
        top: 0px;
        left: -25px;
    }

    .useWrap>div:not(:last-child) {
        border-bottom: 1px dashed #ccc;
    }

    /* --- お申し込み方法（ステップ）: 1列表示 --- */
    .furusatoStepsWrap {
        flex-direction: column;
        margin-top: 50px;
        gap: 30px;
    }

    .furusatoStepsWrap>div {
        width: 100%;
        padding-top: 40px;
        margin-top: 45px;
    }

    .furusatoStepsWrap>div p {
        padding: 10px 20px;
        text-align: left;
    }

    /* --- 各種ボタンエリア: 縦並び --- */
    .infoLinks {
        flex-direction: column;
        width: 100%;
        margin-top: 30px;
        gap: 15px;
    }

    .infoLinks a {
        justify-content: space-between;
    }

    .couponIntro {
        padding: 50px 20px 100px;
    }

    .couponIntro .infoLinks {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    /* --- お礼の品画像リスト: 2列表示 --- */
    .furusatoItemsWrap {
        flex-wrap: wrap;
    }

    .furusatoItemsWrap img {
        width: 50%;
    }

    /* --- フッター: 1列表示 --- */
    footer {
        padding-top: 50px;
    }

    .fFlex {
        flex-direction: column;
        align-items: center;
    }

    .fContact {
        width: 100%;
        text-align: center;
        margin-bottom: 40px;
    }

    .fContact strong img {
        width: 100%;
        max-width: 300px;
    }

    .fLinks {
        width: 100%;
        text-align: center;
    }

    .fLinks a {
        justify-content: center;
        padding: 15px;
        background-color: #fff;
        border: none;
    }

    .couponIntro .infoLinks::before,
    .verticalLineBottom::before,
    .verticalLine,
    .furusatoHeroImg .verticalLineSiro {
        height: 50px;
    }

    .furusatoMain {
        width: calc(100% - 30px);
        padding: 20px 0;
    }

    #main_body h5 {
        padding-left: 38px;
    }
}