/* Responsive Merged CSS - 1920px baseline with all sections */

/* Hide Google Maps review box */
.review-box {
    display: none !important;
}

.FooterMap .review-box,
#mapDiv > div > div.gm-style > div:nth-child(4) > div > div > div > div > div.review-box {
    display: none !important;
}

/* Remove text decoration from footer link buttons */
.FooterLinkBtn {
    text-decoration: none !important;
}

/* Vertically center hero button text */
.HeroBtnBox {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.HeroBtnTxt {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* SP専用ヘッダーバナー - PC時は非表示 */
.mobile-header-banner {
    display: none;
}

/* Individual Background Images */
/* Pickup Item Images - Higher specificity */
.SecPickup .PickupItemWrap:nth-child(1) .PickupItemImg { background-image: url('../images/pickup01_apple.jpg'); }
.SecPickup .PickupItemWrap:nth-child(2) .PickupItemImg { background-image: url('../images/pickup02_rice.jpg'); }
.SecPickup .PickupItemWrap:nth-child(3) .PickupItemImg { background-image: url('../images/pickup03_onuma-beef.png'); }
.SecPickup .PickupItemWrap:nth-child(4) .PickupItemImg { background-image: url('../images/pickup04_epuy.jpg'); }
.SecPickup .PickupItemWrap:nth-child(5) .PickupItemImg { background-image: url('../images/pickup05_nanairo.webp'); }

/* Category Box Images - Higher specificity */
.SecCategory .CategoryBoxContainer .CategoryBox:nth-child(1) { background-image: url('../images/category01.png'); }
.SecCategory .CategoryBoxContainer .CategoryBox:nth-child(2) { background-image: url('../images/category02.png'); }
.SecCategory .CategoryBoxContainer .CategoryBox:nth-child(3) { background-image: url('../images/category03.png'); }
.SecCategory .CategoryBoxContainer .CategoryBox:nth-child(4) { background-image: url('../images/category04.png'); }
.SecCategory .CategoryBoxContainer .CategoryBox:nth-child(5) { background-image: url('../images/category05.png'); }
.SecCategory .CategoryBoxContainer .CategoryBox:nth-child(6) { background-image: url('../images/category06.png'); }

/* Producer ID-based Images */
#producer-1 .ProducerCircle { background-image: url('../images/producer01.jpg'); }
#producer-2 .ProducerCircle { background-image: url('../images/producer02.jpg'); }
#producer-3 .ProducerCircle { background-image: url('../images/producer03.jpg'); }
#producer-4 .ProducerCircle { background-image: url('../images/producer04.jpg'); }
#producer-5 .ProducerCircle { background-image: url('../images/producer05.jpg'); }
#producer-6 .ProducerCircle { background-image: url('../images/producer06.jpg'); }

/* Portal Site Images - Higher specificity */
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(1) .SiteBoxLogoImg { background-image: url('../images/portal01.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(2) .SiteBoxLogoImg { background-image: url('../images/portal02.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(3) .SiteBoxLogoImg { background-image: url('../images/portal03.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(4) .SiteBoxLogoImg { background-image: url('../images/portal04.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(5) .SiteBoxLogoImg { background-image: url('../images/portal05.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(6) .SiteBoxLogoImg { background-image: url('../images/portal06.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(7) .SiteBoxLogoImg { background-image: url('../images/portal07.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(8) .SiteBoxLogoImg { background-image: url('../images/portal08.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(9) .SiteBoxLogoImg { background-image: url('../images/portal09.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(10) .SiteBoxLogoImg { background-image: url('../images/portal10.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(11) .SiteBoxLogoImg { background-image: url('../images/portal11.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(12) .SiteBoxLogoImg { background-image: url('../images/portal12.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(13) .SiteBoxLogoImg { background-image: url('../images/portal13.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(14) .SiteBoxLogoImg { background-image: url('../images/portal14.png'); background-color: transparent; }
.SecPortalsite .SiteBoxContainer .SiteBox:nth-child(15) .SiteBoxLogoImg { background-image: url('../images/portal15.png'); background-color: transparent; background-size: contain; }

/* Producer Images - Higher specificity */
.SecProducer .ProducerContainer .ProducerPart:nth-child(1) .ProducerCircle { background-image: url('../images/producer01.jpg'); }
.SecProducer .ProducerContainer .ProducerPart:nth-child(2) .ProducerCircle { background-image: url('../images/producer02.jpg'); }
.SecProducer .ProducerContainer .ProducerPart:nth-child(3) .ProducerCircle { background-image: url('../images/producer03.jpg'); }
.SecProducer .ProducerContainer .ProducerPart:nth-child(4) .ProducerCircle { background-image: url('../images/producer04.jpg'); }
.SecProducer .ProducerContainer .ProducerPart:nth-child(5) .ProducerCircle { background-image: url('../images/producer05.jpg'); }
.SecProducer .ProducerContainer .ProducerPart:nth-child(6) .ProducerCircle { background-image: url('../images/producer06.jpg'); }


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    width: 100%;
}

button {
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover {
    transform: translateY(clamp(-1px, -0.10vw, -2px));
    box-shadow: 0 clamp(2px, 0.21vw, 4px) clamp(4px, 0.42vw, 8px) rgba(0, 0, 0, 0.2);
}


/* ===== SECTION COMMON ===== */
section {
    position: relative;
    width: 100%;
}

.TitleContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 7vw;
}

.SecPortalsite .TitleContainer {
    display: none; /* Hidden - using SecTitleBack with SVG */
    /* padding: clamp(1rem, 2.08vw, 2rem); */
}

.SecCategory .TitleContainer {
    display: none; /* Hidden - using SecTitleBack with combined SVG */
}

.SecProducer .TitleContainer {
    display: none; /* Hidden - using SecTitleBack with SVG */
    /* padding: clamp(1rem, 2.08vw, 2rem); */
}

.SecInfo .TitleContainer {
    display: none; /* Hidden - using SecTitleBack with SVG */
    /* padding: clamp(1rem, 2.08vw, 2rem); */
}

.SecUsage .TitleContainer {
    display: none; /* Hidden - using SecTitleBack with SVG */
    /* padding: clamp(1rem, 2.08vw, 2rem); */
}

/* セマンティックHTML対応: h1→divに変更しても視覚維持 */
.SecTitleBack {
    margin: 0;
    font-size: clamp(32px, 4.58vw, 88px);
    color: rgba(0, 0, 0, 0.1);
    font-family: "FuturaPT Light", FuturaPT;
    font-weight: 400;
    letter-spacing: 0;
    word-wrap: break-word;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    display: block;
}

.SecTitle,
.SecCategory .SecTitle,
.SecPortalsite .SecTitle,
.SecProducer .SecTitle,
.SecInfo .SecTitle,
.SecUsage .SecTitle {
    margin: 0;
    text-align: center;
}

.SecTitle h2 {
    font-size: clamp(20px, 2.08vw, 40px);
    color: #4A4A4A;
    font-family: "A1Mincho", "Noto Serif JP";
    font-weight: 700;
    letter-spacing: clamp(1.20px, 0.13vw, 2.40px);
    margin: 0;
    word-wrap: break-word;
}

.SecTitleBelow,
.SecCategory .SecTitleBelow,
.SecPortalsite .SecTitleBelow,
.SecProducer .SecTitleBelow,
.SecInfo .SecTitleBelow,
.SecUsage .SecTitleBelow {
    margin: 0;
    font-size: clamp(14px, 1.46vw, 28px);
    color: #4A4A4A;
    font-family: Kozuka Gothic Pr6N;
    font-weight: 400;
    letter-spacing: clamp(0.84px, 0.09vw, 1.68px);
    word-wrap: break-word;
    text-align: center;
}

.SecTitleSub {
    font-size: clamp(34px, 3.54vw, 68px);
    color: #DBC677;
    font-family: "Century Gothic", "Futura", "Avenir Next", "Helvetica Neue", "Arial", sans-serif;
    font-weight: 400;
    letter-spacing: clamp(0.34px, 0.04vw, 0.68px);
    word-wrap: break-word;
}


/* ===== HEADER ===== */
header {
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 10;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.HeaderNav {
    border-top: clamp(3px, 0.31vw, 6px) solid #135E85;
    background-image: url(../images/svg/stetch-header-upper.svg);
    background-repeat: repeat-x;
    background-position: center 5px;
}

.HeaderNavList {
    max-width: 1400px;
    margin: 7px auto 0;
    padding: 25px 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: clamp(20px, 2.08vw, 40px);
    background-color: white;
    list-style: none;
    width: 100%;
}

.HeaderNavListItem {
    flex: 1; /* 幅を均等にする */
    text-align: center;
    padding-bottom: 0;
}

.HeaderNavListItem:nth-child(3) {
    width: clamp(187px, 15.63vw, 300px); /* 均等幅のためコメントアウト */
    text-align: center;
    margin-top: -14px;
    padding-bottom: 0px;
}

.HeaderNavListItemMain {
    margin: 0;
    font-size: clamp(16px,1.27vw,18px);
    color: #3c3c3c;
    line-height: 1.2;
}

.HeaderNavListItemSub {
    margin: 0;
    font-size: 0.79vw;
    font-family: "Century Gothic", "Futura", "Avenir Next", "Helvetica Neue", "Arial", sans-serif;
    font-weight: 400;
    letter-spacing: 60;
    color: #64a5dd;
}

/* 中央の特別なフォントサイズ設定 - 3番目のナビゲーションアイテム */
.HeaderNavListItem:nth-child(3) .HeaderNavListItemMain {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(2px, 0.21vw, 4px);
    margin: 0;
}

.HeaderNavListItem:nth-child(3) .HeaderNavListItemMain span:nth-child(1) {
    font-size: clamp(22px, 1.5vw, 36px);
    font-family: "A1MinchoStd Bold", "Noto Serif JP";
    font-weight: 700;
    color: #234283;
}

.HeaderNavListItem:nth-child(3) .HeaderNavListItemMain span:nth-child(2) {
    font-size: clamp(28px, 2vw, 48px);
    font-family: "A1MinchoStd Bold", "Noto Serif JP";
    font-weight: 700;
    color: #234283;
}

.HeaderNavListItem:nth-child(3) .HeaderNavListItemSub span:nth-child(1) {
    font-size: 16px;
    font-family: "A1MinchoStd Bold", "Noto Serif JP";
    color: #234283;
}

.HeaderNavListItem:nth-child(1) .HeaderNavListItemSub {
    margin: 0;
}

/* HeaderNav内のaタグのスタイルをリセット */
.HeaderNavListItem a {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
}

.HeaderNavListItem a:hover,
.HeaderNavListItem a:focus,
.HeaderNavListItem a:active,
.HeaderNavListItem a:visited {
    text-decoration: none;
    color: inherit;
    outline: none;
}

/* ホバー効果（必要に応じて） */
.HeaderNavListItem a:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.header-curve {
    position: absolute;
    top: clamp(40px, 3.1vw, 40px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(133.33px, 23.81vw, 457.14px);
    height: clamp(61.36px, 10.95vw, 210.33px);
    z-index: -1;
    filter:drop-shadow(0 0 6px rgba(0,0,0,0.2));
}

/* カテゴリページとproducersページ用のheader-curve設定 */
body.tax-henreihin_category .header-curve,
body.page-template-page-producers .header-curve,
body.page-template-page-producers-introduction .header-curve {
    top: clamp(50px, 3.13vw, 0px);
}

/* HeaderNav fixed positioning maintained on all screen sizes */

.header-stetch-upper {
    position: absolute;
    top: clamp(4.08px, 0.73vw, 14px);
    left: 0;
    right: 0;
    width: 1890px;
    height: auto;
    pointer-events: none;
}

.header-stetch-lower-wrapper {
    position: absolute;
    bottom: -88px;
    right: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-image: url(../images/svg/stetch-header-upper.svg);
    background-repeat: repeat-x;
    background-position: center 2px;
}

.header-stetch-lower {
    width: 1191px;
    height: auto;
    margin-top: -54px;
}

.header-stetch-lower-wrapper a {
    position: absolute;
    top: 27%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 53px;
    height: 53px;
    display: block;
    pointer-events: visible;
}

.header-nanae-mark {
    width: 100%;
    height: 100%;
    display: block;
}


/* ===== HERO SECTION ===== */
.SecHero {
    align-self: stretch;
    position: relative;
    z-index: 1;
}

.SecHero .Back {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Hero slideshow container */
.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Individual hero slide */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

/* Active slide */
.hero-slide.active {
    opacity: 1;
}

/* Hero slide backgrounds */
.hero-slide.slide-1 { background-image: url('../images/hero01.png'); }
.hero-slide.slide-2 { background-image: url('../images/hero02.jpg'); }
.hero-slide.slide-3 { background-image: url('../images/hero03.jpg'); }
.hero-slide.slide-4 { background-image: url('../images/hero04.JPG'); }
.hero-slide.slide-5 { background-image: url('../images/hero05.JPG'); }
.hero-slide.slide-6 { background-image: url('../images/hero06.JPG'); }
.hero-slide.slide-7 { background-image: url('../images/hero07.jpg'); }

.title-container {
    position: absolute;
    top: clamp(185px, 19.27vw, 370px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.HeroTitle {
    width: 100%;
    color: white;
    font-size: clamp(36px, 3.75vw, 72px);
    font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", serif;
    font-weight: 400;
    word-wrap: break-word;
    text-align: center;
    filter: drop-shadow(0 0 3px #000);
}

/* h1.HeroTitle SVG置き換え */
h1.HeroTitle {
    width:clamp(46.875rem, 14.642rem + 67.064vw, 75rem);
    height: auto;
    background-image: url('../images/HeroTitle_w.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 0 auto;
    aspect-ratio: 788.2 / 74; /* SVGのviewBox比率 */
    filter:none;
}

.HeroSubtitle {
    width: 100%;
    height: clamp(18px, 1.88vw, 36px);
    margin: 12px 0 0;
    text-align: center;
    color: white;
    font-size: clamp(18px, 1.88vw, 36px);
    word-wrap: break-word;
    filter: drop-shadow(0 0 3px #000);
}

.HeroBtnBox {
    position: absolute;
    top: clamp(388px, 40.42vw, 776px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(191px, 19.90vw, 382px);
    height: clamp(45px, 4.69vw, 90px);
    background: #CB5520;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.HeroBtnBox:hover {
    transform: translateX(-50%) translateY(clamp(-1px, -0.10vw, -2px));
    box-shadow: 0 clamp(2px, 0.21vw, 4px) clamp(4px, 0.42vw, 8px) rgba(0, 0, 0, 0.2);
}

.HeroBtnTxt {
    width: 6.25vw; /* 120px at 1920px */
    height: 1.35vw; /* 26px at 1920px */
    background-image: url('../svg/HeroBtn.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 0 auto;
    display: block;
}

.TxtUnder-container {
    position: absolute;
    right: clamp(15px, 1.56vw, 30px);
    bottom: clamp(10px, 1.04vw, 20px);
}

.TxtUnder {
    width: 18.75vw; /* 360px at 1920px */
    height: 3.67vw; /* 70.464px at 1920px */
    background-image: url('../svg/UnderTxt.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px; /* Hide text */
    overflow: hidden;
    filter: drop-shadow(0 0 3px #000);
}


/* ===== PICKUP SECTION ===== */
.SecPickup { align-self: stretch; }

.SecPickup .Back {
    position: relative;
    width: 100%;
    height: fit-content;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    background: #123b52;
    padding-bottom: 7.94vw;
}

.SecPickup .Back::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/pickup_background.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 0;
}

.SecPickup .Back > * {
    position: relative;
    z-index: 1;
}

/* SecPickup専用のSecTitleBack配置 - SVG背景 */
.SecPickup .SecTitleBack {
    display: block;
    margin: clamp(42px, 4.38vw, 84px) 0 clamp(19px, 1.98vw, 38px) clamp(8px, 0.78vw, 15px); /* 84px top, 38px bottom, 15px left */
    width: 100%;
    height: 7.81vw; /* 150px at 1920px */
    background-image: url('../svg/PickupTitle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    z-index: 2;
    text-indent: -9999px;
    overflow: hidden;
}

.SecPickup .TitleContainer {
    display: none; /* Hidden - using SecTitleBack with combined SVG */
}

/* .SecPickup .SecTitle removed - using SecTitleBack with combined SVG */

.SecPickup .SecTitleSub {
    margin: 0;
    padding-left: 10px;
    font-size: clamp(9.33px, 1.67vw, 32px);
    color: #e2cc7a;
    font-family: "Century Gothic", "Futura", "Avenir Next", "Helvetica Neue", "Arial", sans-serif;
    font-weight: 400;
    letter-spacing: clamp(0.34px, 0.04vw, 0.68px);
    word-wrap: break-word;
}

.PickupItemWrap {
    width: 100%;
    /* height: clamp(325px, 33.85vw, 650px); */
    height: clamp(295px, 30.73vw, 590px);
    margin-bottom: 3.17vw;
    align-items: center;
    position: relative;
}

/* .PickupItemWrap:first-child margin removed - using padding-top on .Back instead */

.PickupItemBox {
    width: clamp(520px, 54.06vw, 1038px); /* 1038px at 1920px */
    height: clamp(192px, 20.00vw, 384px); /* 384px at 1920px */
    padding: clamp(14px, 1.46vw, 28px) clamp(19px, 1.98vw, 38px) clamp(18px, 1.88vw, 36px) clamp(14px, 1.46vw, 28px);
    background: white;
    border-radius: clamp(7px, 0.73vw, 14px);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.PickupItemBoxTitle {
    margin: 0;
    font-size: clamp(18px, 1.88vw, 32px); /* 36pt at 1920px */
    color: #125f86;
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    word-wrap: break-word;
}

.PickupItemBoxNum {
    margin: 0;
    position: absolute;
    top: clamp(14px, 1.46vw, 28px); /* PickupItemBoxTitleと同じ位置 */
    right: clamp(19px, 1.98vw, 38px);
    width: clamp(66px, 6.88vw, 132px); /* 132px at 1920px (88px × 1.5) */
    height: clamp(65px, 6.72vw, 129px); /* 129px at 1920px (86px × 1.5) */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    opacity: 1;
    z-index: -1;
}

/* PickupItemBoxNum SVG置き換え - ID指定で設定 */
#Pickup01 .PickupItemBoxNum {
    background-image: url('../svg/PickupNum01.svg');
}

#Pickup02 .PickupItemBoxNum {
    background-image: url('../svg/PickupNum02.svg');
}

#Pickup03 .PickupItemBoxNum {
    background-image: url('../svg/PickupNum03.svg');
}

#Pickup04 .PickupItemBoxNum {
    background-image: url('../svg/PickupNum04.svg');
}

#Pickup05 .PickupItemBoxNum {
    background-image: url('../svg/PickupNum05.svg');
}

.PickupItemBoxTxt {
    font-size: clamp(12px, 1.25vw, 20px); /* 24pt at 1920px */
    color: #3c3c3c;
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: 400;
    line-height: clamp(19px, 1.98vw, 38px);
    word-wrap: break-word;
}

.PickupItemBoxBtnWrap {
    display: flex;
    flex-flow: row;
    gap: clamp(5px, 0.52vw, 10px);
}

.PickupItemBoxBtn {
    width: auto;
    min-width: clamp(168px, 17.50vw, 336px);
    height: clamp(25px, 2.60vw, 50px);
    background: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 clamp(15px, 1.56vw, 30px);
    color: var(--bg-white);
    font-size: clamp(12px, 1.25vw, 20px); /* 24pt at 1920px */
    border-radius: 3px;
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.PickupItemBoxBtn:hover {
    background: #0e4a6b;
}

.PickupItemImg {
    width: clamp(505px, 52.60vw, 1010px);
    height: clamp(295px, 30.73vw, 590px);
    background: #D9D9D9 center/cover no-repeat;
    border-top-left-radius: clamp(32px, 3.33vw, 64px);
    border-bottom-left-radius: clamp(32px, 3.33vw, 64px);
    border-left: clamp(6px, 0.63vw, 12px) white solid;
    border-top: clamp(6px, 0.63vw, 12px) white solid;
    border-bottom: clamp(6px, 0.63vw, 12px) white solid;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
 
/* Scroll Fade-in Animation for PickupItemImg */
.PickupItemImg {
    opacity: 0;
    /* 垂直中央寄せ(-50%)を維持しつつ、30px下から開始 */
    transform: translateY(calc(-50% + 30px));
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.PickupItemImg.is-visible {
    opacity: 1;
    /* アニメーション終了時は元の垂直中央寄せに戻す */
    transform: translateY(-50%);
}

/* Scroll Fade-in Animation for PickupItemBox */
.PickupItemBox {
    opacity: 0;
    /* 垂直中央寄せ(-50%)を維持しつつ、30px下から開始 */
    transform: translateY(calc(-50% + 30px));
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.PickupItemBox.is-visible {
    opacity: 1;
    /* アニメーション終了時は元の垂直中央寄せに戻す */
    transform: translateY(-50%);
}

/* 2025-09-23: 奇数偶数の配置を入れ替え（セマンティックHTML対応） */
/* 偶数を奇数の元の配置に変更 */
.PickupItemWrap:nth-of-type(even) .PickupItemBox {
    left: auto;
    right: clamp(40px, 4.17vw, 80px);
    box-shadow: -1.59vw 1.59vw 0px rgba(0, 0, 0, 0.15);
}

.PickupItemWrap:nth-of-type(even) .PickupItemImg {
    right: auto;
    left: 0;
    border-radius: 0 clamp(32px, 3.33vw, 64px) clamp(32px, 3.33vw, 64px) 0;
    border-left: none;
    border-right: clamp(6px, 0.63vw, 12px) white solid;
    border-top: clamp(6px, 0.63vw, 12px) white solid;
    border-bottom: clamp(6px, 0.63vw, 12px) white solid;
}

/* 奇数を偶数の元の配置に変更 */
.PickupItemWrap:nth-of-type(odd) .PickupItemBox {
    left: clamp(40px, 4.17vw, 80px);
    right: auto;
    box-shadow: 1.59vw 1.59vw 0px rgba(0, 0, 0, 0.15);
}

.PickupItemWrap:nth-of-type(odd) .PickupItemImg {
    right: 0;
    left: auto;
    border-radius: clamp(32px, 3.33vw, 64px) 0 0 clamp(32px, 3.33vw, 64px);
    border-right: none;
    border-left: clamp(6px, 0.63vw, 12px) white solid;
}


/* ===== CATEGORY SECTION ===== */
.SecCategory .Back {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    /* padding: 2rem; */
    background: white;
}

/* SecCategory専用のSecTitleBack配置 - SVG背景 */
.SecCategory .SecTitleBack {
    display: block;
    margin: clamp(42px, 4.38vw, 84px) auto 0; /* 84px top, 0 bottom */
    width: 100%;
    height: 7.81vw; /* 150px at 1920px */
    background-image: url('../svg/CategoryTitle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    z-index: 2;
}

/* SecCategory専用のSecTitle配置 - SVG背景 */
.SecCategory .SecTitle {
    width: 21.67vw; /* 416px at 1920px */
    background-image: url('../svg/Title_Category.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* SecCategory専用のSecTitleBelow配置 - SVG背景 */
.SecCategory .SecTitleBelow {
    display: block;
    width: 7.29vw; /* 140px at 1920px */
    height: 1.56vw; /* 30px at 1920px */
    min-height: 30px; /* 最小高さ保証 */
    background-image: url('../svg/TitleSub_Category.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 15px auto 0;
    position: relative;
    z-index: 1;
}

/* SecPortalsite専用のSecTitleBack配置 - SVG背景 */
.SecPortalsite .SecTitleBack {
    display: block;
    margin: clamp(64px, 6vw, 84px) auto clamp(19px, 1.98vw, 38px) auto; /* 84px top, 38px bottom */
    width: 100%;
    height: 7.81vw; /* 150px at 1920px */
    background-image: url('../svg/ProtalsiteTitle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    z-index: 2;
}

/* SecPortalsite専用のSecTitle h2配置 - SVG背景 */
.SecPortalsite .SecTitle h2 {
    width: 33.44vw; /* 642px at 1920px */
    height: 2.71vw; /* 52px at 1920px */
    background-image: url('../svg/Title_portalsite.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* SecPortalsite専用のSecTitleBelow配置 - SVG背景 */
.SecPortalsite .SecTitle .SecTitleBelow {
    display: block;
    width: 4.90vw; /* 94px at 1920px */
    height: 0.73vw; /* 14px at 1920px */
    min-height: 14px; /* 最小高さ保証 */
    background-image: url('../svg/TitleSub_portalsite.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 15px auto 0;
    position: relative;
    z-index: 1;
}

/* SecProducer専用のSecTitleBack配置 - SVG背景 */
.SecProducer .SecTitleBack {
    display: block;
    margin: clamp(42px, 4.38vw, 84px) auto clamp(19px, 1.98vw, 38px) auto; /* 84px top, 38px bottom */
    width: 100%;
    height: 7.81vw; /* 150px at 1920px */
    background-image: url('../svg/Producer_Title.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    z-index: 2;
}

/* SecProducer専用のSecTitle配置 - SVG背景 */
.SecProducer .SecTitle {
    width: 13.44vw; /* 258px at 1920px */
    background-image: url('../svg/Title_producers.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* SecProducer専用のSecTitleBelow配置 - SVG背景 */
.SecProducer .SecTitleBelow {
    display: block;
    width: 11.09vw; /* 213px at 1920px */
    height: 0.73vw; /* 14px at 1920px */
    min-height: 14px; /* 最小高さ保証 */
    background-image: url('../svg/TitleSub_producers.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 15px auto 0;
    position: relative;
    z-index: 1;
}

/* SecInfo専用のSecTitleBack配置 - SVG背景 */
.SecInfo .SecTitleBack {
    display: block;
    margin: clamp(64px, 4.38vw, 120px) auto clamp(19px, 1.98vw, 38px) auto; /* 84px top, 38px bottom */
    width: 100%;
    height: 7vw; /* 150px at 1920px */
    background-image: url('../svg/Info_Title.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    z-index: 2;
}

/* SecUsage専用のSecTitleBack配置 - SVG背景 */
.SecUsage .SecTitleBack {
    display: block;
    margin: clamp(64px, 4.38vw, 84px) auto clamp(19px, 1.98vw, 38px) auto; /* 84px top, 38px bottom */
    width: 100%;
    height: 7.81vw; /* 150px at 1920px */
    background-image: url('../svg/Usage_Title.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    z-index: 2;
}

/* SecInfo専用のSecTitle h2配置 - SVG背景 */
.SecInfo .SecTitle h2 {
    width: 10.21vw; /* 196px at 1920px */
    height: 2.29vw; /* 44px at 1920px */
    background-image: url('../svg/Title_news.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* SecUsage専用のSecTitle h2配置 - SVG背景 */
.SecUsage .SecTitle h2 {
    width: 16.35vw; /* 314px at 1920px */
    height: 2.40vw; /* 46px at 1920px */
    background-image: url('../svg/Title_usage.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* SecInfo専用のSecTitleBelow配置 - SVG背景 */
.SecInfo .SecTitleBelow {
    display: block;
    width: 7.19vw; /* 138px at 1920px */
    height: 0.73vw; /* 14px at 1920px */
    min-height: 14px; /* 最小高さ保証 */
    background-image: url('../svg/TitleSub_news.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 15px auto 0;
    position: relative;
    z-index: 1;
}

/* SecUsage専用のSecTitleBelow配置 - SVG背景 */
.SecUsage .SecTitleBelow {
    display: block;
    width: 10.42vw; /* 200px at 1920px */
    height: 0.73vw; /* 14px at 1920px */
    min-height: 14px; /* 最小高さ保証 */
    background-image: url('../svg/TitleSub_usage.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 15px auto 0;
    position: relative;
    z-index: 1;
}

/* YokotsuBoxBack専用のTitleMain配置 - SVG背景 */
.YokotsuBoxBack .TitleMain {
    width: 50.21vw; /* 964px at 1920px */
    height: 2.81vw; /* 54px at 1920px */
    background-image: url('../svg/TitleYokotsu.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 0;
    position: relative;
    z-index: 1;
}

.CategoryBoxContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    justify-items: center;
    align-items: center;
    margin: clamp(20px, 2.08vw, 40px) clamp(40px, 4.17vw, 80px) clamp(75px, 7.81vw, 150px);
}

.CategoryBox {
    width: 29.58vw; /* 568px at 1920px */
    height: 14.27vw; /* 274px at 1920px */
    aspect-ratio: 568 / 274;
    background: #D9D9D9 center/cover no-repeat;
    border-radius: clamp(13px, 1.35vw, 26px);
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

/* Scroll Fade-in Animation for CategoryBox */
.CategoryBox {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.CategoryBox.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delay */
.CategoryBoxContainer .CategoryBox:nth-child(1) { transition-delay: 0.1s; }
.CategoryBoxContainer .CategoryBox:nth-child(2) { transition-delay: 0.15s; }
.CategoryBoxContainer .CategoryBox:nth-child(3) { transition-delay: 0.2s; }
.CategoryBoxContainer .CategoryBox:nth-child(4) { transition-delay: 0.25s; }
.CategoryBoxContainer .CategoryBox:nth-child(5) { transition-delay: 0.3s; }
.CategoryBoxContainer .CategoryBox:nth-child(6) { transition-delay: 0.35s; }



.CategoryBox:hover {
    transform: translateY(clamp(-4px, -0.42vw, -8px));
    box-shadow: 0 clamp(4px, 0.42vw, 8px) clamp(12px, 1.25vw, 24px) rgba(0, 0, 0, 0.2);
    background: #CCCCCC;
}

.CategoryTitleImg {
    font-size: clamp(24px, 2.50vw, 48px);
    text-align: center;
    color: black;
    font-family: "Noto Serif JP";
    font-weight: 700;
    letter-spacing: clamp(2px, 0.21vw, 4px);
    word-wrap: break-word;
}

.CategoryEnglishText {
    font-family: "Century Gothic", "Futura", "Avenir Next", "Helvetica Neue", "Arial", sans-serif;
    font-size: 0.83vw;
    color: var(--bg-white);
    letter-spacing: 0.3em;
    text-align: center;
    margin: 0;
    position: relative;
    z-index: 2;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

/* Individual character size settings for CategoryBox text */

/* "•" 記号は常に36pt半角固定 */
.CategoryTitleImg .bullet {
    font-size: 2.50vw;
    font-family: Arial, sans-serif; /* 半角文字用フォント */
}

/* categoryBox-1 くだもの・野菜: く50pt だ36pt も50pt の36pt ・36pt 野50pt 菜36pt */
#categoryBox-1 .CategoryTitleImg .char1,  /* く */
#categoryBox-1 .CategoryTitleImg .char3,  /* も */
#categoryBox-1 .CategoryTitleImg .char6   /* 野 */ {
    font-size: 3.47vw;
}

#categoryBox-1 .CategoryTitleImg .char2,  /* だ */
#categoryBox-1 .CategoryTitleImg .char4,  /* の */
#categoryBox-1 .CategoryTitleImg .char5,  /* ・ */
#categoryBox-1 .CategoryTitleImg .char7   /* 菜 */ {
    font-size: 2.50vw;
}

/* categoryBox-1 SVG置き換え */
#categoryBox-1 .CategoryTitleImg {
    width: 21.98vw; /* 422px at 1920px */
    height: clamp(60px,10vw,80px);/* 102px at 1920px */
    background-image: url('../svg/Category01.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    z-index: 10; /* CategoryBox全体より上に配置 */
    opacity: 1; /* 常に表示 */
    /* テキストを非表示にするため */
    font-size: 0;
}

/* categoryBox-2 お肉: お36pt 肉50pt */
#categoryBox-2 .CategoryTitleImg .char1 {  /* お */
    font-size: 2.50vw;
}

#categoryBox-2 .CategoryTitleImg .char2 {  /* 肉 */
    font-size: 3.47vw;
}

/* categoryBox-2 SVG置き換え */
#categoryBox-2 .CategoryTitleImg {
    width: 21.98vw; /* 422px at 1920px */
    height: clamp(60px,10vw,80px); /* 102px at 1920px */
    background-image: url('../svg/Category02.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    opacity: 1;
    font-size: 0;
}

#categoryBox-2 .CategoryTitleImg span {
    display: none;
}

#categoryBox-2 .CategoryEnglishText {
    display: none;
}

/* categoryBox-3 飲料: 飲50pt 料36pt */
#categoryBox-3 .CategoryTitleImg .char1 {  /* 飲 */
    font-size: 3.47vw;
}

#categoryBox-3 .CategoryTitleImg .char2 {  /* 料 */
    font-size: 2.50vw;
}

/* categoryBox-3 SVG置き換え */
#categoryBox-3 .CategoryTitleImg {
    width: 21.98vw; /* 422px at 1920px */
    height: clamp(60px,10vw,80px);/* 102px at 1920px */
    background-image: url('../svg/Category03.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    opacity: 1;
    font-size: 0;
}

#categoryBox-3 .CategoryTitleImg span {
    display: none;
}

#categoryBox-3 .CategoryEnglishText {
    display: none;
}

/* categoryBox-4 お酒: お36pt 酒50pt */
#categoryBox-4 .CategoryTitleImg .char1 {  /* お */
    font-size: 2.50vw;
}

#categoryBox-4 .CategoryTitleImg .char2 {  /* 酒 */
    font-size: 3.47vw;
}

/* categoryBox-4 SVG置き換え */
#categoryBox-4 .CategoryTitleImg {
    width: 21.98vw; /* 422px at 1920px */
    height: clamp(60px,10vw,80px); /* 102px at 1920px */
    background-image: url('../svg/Category04.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    opacity: 1;
    font-size: 0;
}

#categoryBox-4 .CategoryTitleImg span {
    display: none;
}

#categoryBox-4 .CategoryEnglishText {
    display: none;
}

/* categoryBox-5 加工品: 加50pt 工36pt 品50pt */
#categoryBox-5 .CategoryTitleImg .char1,  /* 加 */
#categoryBox-5 .CategoryTitleImg .char3   /* 品 */ {
    font-size: 3.47vw;
}

#categoryBox-5 .CategoryTitleImg .char2 {  /* 工 */
    font-size: 2.50vw;
}

/* categoryBox-5 SVG置き換え */
#categoryBox-5 .CategoryTitleImg {
    width: 21.98vw; /* 422px at 1920px */
    height: clamp(60px,10vw,80px); /* 102px at 1920px */
    background-image: url('../svg/Category05.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    opacity: 1;
    font-size: 0;
}

#categoryBox-5 .CategoryTitleImg span {
    display: none;
}

#categoryBox-5 .CategoryEnglishText {
    display: none;
}

/* categoryBox-6 旅行・レジャー: 旅50pt 行36pt ・36pt レ50pt ジ36pt ャ36pt ー36pt */
#categoryBox-6 .CategoryTitleImg .char1,  /* 旅 */
#categoryBox-6 .CategoryTitleImg .char4   /* レ */ {
    font-size: 3.47vw;
}

#categoryBox-6 .CategoryTitleImg .char2,  /* 行 */
#categoryBox-6 .CategoryTitleImg .char3,  /* ・ */
#categoryBox-6 .CategoryTitleImg .char5,  /* ジ */
#categoryBox-6 .CategoryTitleImg .char6,  /* ャ */
#categoryBox-6 .CategoryTitleImg .char7   /* ー */ {
    font-size: 2.50vw;
}

/* categoryBox-6 SVG置き換え */
#categoryBox-6 .CategoryTitleImg {
    width: 21.98vw; /* 422px at 1920px */
    height: clamp(60px,10vw,80px); /* 102px at 1920px */
    background-image: url('../svg/Category06.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    opacity: 1;
    font-size: 0;
}

#categoryBox-6 .CategoryTitleImg span {
    display: none;
}

#categoryBox-6 .CategoryEnglishText {
    display: none;
}

/* Individual Category Box Styles */
#categoryBox-1 {
    /* くだもの・野菜 */
    position: relative;
    background-image: url('../images/category01.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#categoryBox-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 154, 48, 0.75);
    border-radius: inherit;
    transition: all 0.3s ease;
    z-index: 1;
}

#categoryBox-1 .CategoryTitleImg {
    position: relative;
    z-index: 2;
    color: white;
    transition: opacity 0.3s ease;
}

#categoryBox-2 {
    /* お肉 */
    position: relative;
    background-image: url('../images/category02.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#categoryBox-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(196, 13, 0, 0.75);
    border-radius: inherit;
    transition: all 0.3s ease;
    z-index: 1;
}

#categoryBox-2 .CategoryTitleImg {
    position: relative;
    z-index: 2;
    color: white;
    transition: opacity 0.3s ease;
}

#categoryBox-3 {
    /* 飲料 */
    position: relative;
    background-image: url('../images/category03.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#categoryBox-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 110, 179, 0.75);
    border-radius: inherit;
    transition: all 0.3s ease;
    z-index: 1;
}

#categoryBox-3 .CategoryTitleImg {
    position: relative;
    z-index: 2;
    color: white;
    transition: opacity 0.3s ease;
}

#categoryBox-4 {
    /* お酒 */
    position: relative;
    background-image: url('../images/category04.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#categoryBox-4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(124, 15, 128, 0.75);
    border-radius: inherit;
    transition: all 0.3s ease;
    z-index: 1;
}

#categoryBox-4 .CategoryTitleImg {
    position: relative;
    z-index: 2;
    color: white;
    transition: opacity 0.3s ease;
}

#categoryBox-5 {
    /* 加工品 */
    position: relative;
    background-image: url('../images/category05.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#categoryBox-5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(116, 80, 40, 0.75);
    border-radius: inherit;
    transition: all 0.3s ease;
    z-index: 1;
}

#categoryBox-5 .CategoryTitleImg {
    position: relative;
    z-index: 2;
    color: white;
    transition: opacity 0.3s ease;
}

#categoryBox-6 {
    /* 旅行・レジャー */
    position: relative;
    background-image: url('../images/category06.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#categoryBox-6::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 123, 0, 0.75);
    border-radius: inherit;
    transition: all 0.3s ease;
    z-index: 1;
}

#categoryBox-6 .CategoryTitleImg {
    position: relative;
    z-index: 2;
    color: white;
    transition: opacity 0.3s ease;
}

/* Hover effects for individual category boxes */
#categoryBox-1:hover::before {
    background: rgba(0, 154, 48, 0.0);
}

#categoryBox-1:hover .CategoryTitleImg,
#categoryBox-1:hover .CategoryEnglishText {
    opacity: 0.0;
}

#categoryBox-2:hover::before {
    background: rgba(196, 13, 0, 0.0);
}

#categoryBox-2:hover .CategoryTitleImg,
#categoryBox-2:hover .CategoryEnglishText {
    opacity: 0.0;
}

#categoryBox-3:hover::before {
    background: rgba(0, 110, 179, 0.0);
}

#categoryBox-3:hover .CategoryTitleImg,
#categoryBox-3:hover .CategoryEnglishText {
    opacity: 0.0;
}

#categoryBox-4:hover::before {
    background: rgba(124, 15, 128, 0.0);
}

#categoryBox-4:hover .CategoryTitleImg,
#categoryBox-4:hover .CategoryEnglishText {
    opacity: 0.0;
}

#categoryBox-5:hover::before {
    background: rgba(116, 80, 40, 0.0);
}

#categoryBox-5:hover .CategoryTitleImg,
#categoryBox-5:hover .CategoryEnglishText {
    opacity: 0.0;
}

#categoryBox-6:hover::before {
    background: rgba(255, 123, 0, 0.0);
}

#categoryBox-6:hover .CategoryTitleImg,
#categoryBox-6:hover .CategoryEnglishText {
    opacity: 0.0;
}

/* Focus styles for accessibility */
.CategoryBox:focus {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Active state */
.CategoryBox:active {
    transform: translateY(clamp(-2px, -0.21vw, -4px));
}


/* ===== BANNER SECTION ===== */
.SecBanner {
    align-self: stretch;
}

.SecBanner .Back {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    background: white;
}

.BannerWrap {
    max-width: clamp(900px, 72.92vw, 1400px);
    height: auto;
    margin: 0 auto;
    padding: 0;
}

.BannerContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(30px, 3.13vw, 60px);
    margin: clamp(47px, 4.90vw, 94px) 0;
    padding: 0 clamp(10px, 1.04vw, 20px);
}

.BannerBtn {
    width: clamp(300px, 34.90vw, 670px);
    height: clamp(90px, 9.38vw, 180px);
    border: none;
    border-radius: clamp(6px, 0.63vw, 12px);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 clamp(2px, 0.21vw, 4px) clamp(6px, 0.63vw, 12px) rgba(0, 0, 0, 0.15);
}

.BannerBtn:hover {
    transform: translateY(clamp(-2px, -0.21vw, -4px));
    box-shadow: 0 clamp(4px, 0.42vw, 8px) clamp(12px, 1.25vw, 24px) rgba(0, 0, 0, 0.2);
}

.BannerBtn.business {
    background: url('../images/banner01.png') center/cover no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.BannerBtn.business::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(219, 110, 0, 0.7); /* #db6e00 with 70% opacity */
    pointer-events: none;
    z-index: 1;
}

.BannerBtn.donation {
    background: url('../images/banner02.png') center/cover no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.BannerBtn.donation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 138, 191, 0.7); /* #008abf with 70% opacity */
    pointer-events: none;
    z-index: 1;
}

.BannerContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: white;
    text-align: center;
    padding: clamp(10px, 1.04vw, 20px);
    position: relative;
    z-index: 2;
}

/* .BannerTitle removed */

.BannerSubTitle {
    width: 17.19vw; /* 330px at 1920px */
    height: 2.60vw; /* 50px at 1920px */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px; /* Hide text */
    margin: 0;
}

.BannerBtn.business .BannerSubTitle {
    background-image: url('../svg/Banner_Left.svg');
}

.BannerBtn.donation .BannerSubTitle {
    background-image: url('../svg/Banner_Right.svg');
}

/* .BannerTitle hover removed */

.BannerBtn:hover .BannerSubTitle {
    transform: translateY(clamp(-1px, -0.10vw, -2px));
    transition: transform 0.3s ease;
}


/* ===== FOOTER SECTION ===== */
footer {
    position: relative;
    width: 100%;
    background: #50809D;
}

.SecFooter {
    align-self: stretch;
}

.SecFooter .Back {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    background: #50809D;
}

.FooterNavBack {
    background: var(--color-primary);
    padding: clamp(34px, 3.54vw, 68px) 0 clamp(30px, 3.13vw, 60px) clamp(30px, 3.13vw, 60px);
    position: relative;
}

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

.FooterNavList {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(70px, 7.29vw, 140px);
}

.FooterNavCategory {
    display: flex;
    flex-direction: column;
}

.Category {
    font-size: clamp(16px,1.25vw,16px);
    color: var(--bg-white);
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: clamp(0.5px, 0.05vw, 1px);
    margin: 0 0 clamp(10px, 1.04vw, 20px) 0;
}

.FooterSubMenu {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.63vw, 12px);
}

.FooterSubMenu a {
    color: var(--bg-white);
    text-decoration: none;
    font-size: clamp(12px,1.25vw,14px);
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: clamp(0.25px, 0.03vw, 0.5px);
    transition: color 0.3s ease;
}

.FooterSubMenu a:hover {
    color: var(--bg-white);
    text-decoration: underline;
}

.FooterMain {
    background: #50809D;
    padding: clamp(30px, 3.13vw, 60px) 0;
    position: relative;
}

.FooterContainer {
    margin: clamp(36px, 3.75vw, 72px) clamp(28px, 2.92vw, 56px) clamp(40px, 4.17vw, 80px);
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 3.13vw, 60px);
    align-items: start;
}

.FooterLeft {
    display: flex;
    flex-direction: column;
}

.FooterInfo {
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 1.56vw, 30px);
}

.FooterTownname {
    font-size: clamp(14px, 1.04vw, 20px);
    color: var(--bg-white);
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: bold;
    margin: 0;
    letter-spacing: clamp(0.5px, 0.05vw, 1px);
}

.FooterAddress {
    font-size: clamp(12px, 0.94vw, 14px);
    color: var(--bg-white);
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.12em;
    font-style: normal;
    margin: 0;
}

.FooterButtons {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.78vw, 15px);
}

.FooterLinkBtn {
    width: 100%;
    height: clamp(40px, 3.13vw, 60px);
    background: var(--color-primary);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.FooterLinkBtn:hover {
    background: #0e4a6b;
    transform: translateY(clamp(-1px, -0.10vw, -2px));
    box-shadow: 0 clamp(2px, 0.21vw, 4px) clamp(6px, 0.63vw, 12px) rgba(18, 95, 134, 0.3);
}

.FooterLinkBtn span {
    color: white;
    font-size: clamp(12px, 1.15vw, 14px);
    letter-spacing: clamp(0.5px, 0.05vw, 1px);
}

.SnsIcons {
    display: flex;
    gap: clamp(11px, 1.15vw, 22px);
    align-items: center;
}

.SnsIcon {
    display: block;
    width: clamp(50px, 3.65vw, 70px);
    height: clamp(50px, 3.65vw, 70px);
    transition: transform 0.3s ease;
    text-decoration: none;
}

.SnsIcon:hover {
    transform: scale(1.1);
}

.SnsIcon.youtube {
    background: url('../svg/youtube.svg') center/contain no-repeat;
    width: 38px;
    height: 26px;
}

.SnsIcon.instagram {
    background: url('../svg/instagram.svg') center/contain no-repeat;
    width: 32px;
    height: 32px;
}

.SnsIcon.x {
    background: url('../svg/x.svg') center/contain no-repeat;
    width: 28px;
    height: 28px;
}


.FooterRight {
    display: flex;
    flex-direction: column;
}

.FooterMap {
    width: 100%;
    height: clamp(244px, 25.42vw, 488px);
    margin-top: clamp(3px, 0.31vw, 6px);
    overflow: hidden;
    box-shadow: 0 clamp(2px, 0.21vw, 4px) clamp(8px, 0.83vw, 16px) rgba(0, 0, 0, 0.2);
}

.FooterCopyrightBack {
    background: #123B52;
    padding: clamp(10px, 1.04vw, 20px) 0;
}

.FooterCopyright {
    max-width: clamp(900px, 72.92vw, 1400px);
    margin: 0 auto;
    padding: 0 clamp(10px, 1.04vw, 20px);
    text-align: center;
}

.Copyright {
    font-size: 10pt;
    color: #64a5dd;
    font-family: 'Noto Sans JP';
    font-weight: 400;
    margin: 0;
    letter-spacing: clamp(0.25px, 0.03vw, 0.5px);
}


/* ===== FAQ SECTION ===== */
.SecFaq {
    align-self: stretch;
}

.SecFaq .Back {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    background: #F2F1F3;
}

.FaqWrap {
    max-width: clamp(900px, 75.94vw, 1458px);
    height: auto;
    margin: clamp(41px, 4.27vw, 82px) auto;
    padding: clamp(45px, 4.69vw, 90px);
}

.title-wrap {
    margin: 0 auto clamp(30px, 3.13vw, 60px);
    text-align: center;
    overflow: hidden;
    position: relative;
}

.faq-title-svg {
    width: 100%;
    max-width: clamp(445.44px, 72.6vw, 1394px);
    height: auto;
    display: block;
    margin: 0 auto;
}

.TitleBack {
    position: absolute;
    top: clamp(42px, 4.38vw, 84px);
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(32px, 4.58vw, 88px);
    text-align: center;
    color: #EAEAEA;
    font-family: Kozuka Gothic Pr6N;
    font-weight: 400;
    letter-spacing: clamp(3.74px, 0.39vw, 7.48px);
    word-wrap: break-word;
    margin: 0 0 1rem 0;
    z-index: 1;
}

.TitleMain {
    font-size: clamp(24px, 1.67vw, 32px);
    text-align: center;
    color: #3c3c3c;
    font-family: "A1明朝", "A1Mincho", "Noto Serif JP";
    font-weight: 400;
    letter-spacing: clamp(1.20px, 0.13vw, 2.40px);
    word-wrap: break-word;
    margin: 0;
}

.TitleSub {
    font-size: clamp(10px, 1.04vw, 20px);
    text-align: center;
    color: #4A4A4A;
    font-family: Kozuka Gothic Pr6N;
    font-weight: 400;
    letter-spacing: clamp(0.84px, 0.09vw, 1.68px);
    word-wrap: break-word;
    margin: 0.5rem 0 0 0;
}

.FaqList {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: clamp(800px, 66.67vw, 1280px);
    margin: 0 auto;
}

.FaqItem {
    margin-bottom: clamp(7.00px, 1.25vw, 24px);
    overflow: hidden;
}

.FaqQuestion {
    display: flex;
    align-items: center;
    padding: clamp(11px, 0.78vw, 15px) 0;
    gap: clamp(10px, 1.04vw, 20px);
}

.QuestionMark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 23px;
    background-image: url('../svg/Q.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
}

.FaqPartsTitle {
    font-size: clamp(16px, 1.53vw, 22px);
    color: #1e2160;
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: clamp(0.25px, 0.03vw, 0.5px);
    word-wrap: break-word;
    margin: 0;
    flex: 1;
}

.FaqPartsLine {
    height: clamp(2.60px, 0.26vw, 5px);
    background: #d9d8E2;
}

.FaqAnswer {
    padding: clamp(9.92px, 1.77vw, 34px) 0;
}

.FaqPartsTxt {
    font-size: clamp(14px, 1.0vw, 20px);
    color: #3c3c3c;
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: clamp(0.25px, 0.03vw, 0.5px);
    word-wrap: break-word;
    margin: 0;
}


/* ===== PORTALSITE SECTION ===== */
.SecPortalsite .Back {
    position: relative;
    width: 100%;
    background: #F2F1F3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* padding: clamp(1rem, 2.08vw, 2rem); */
}

.SiteBoxContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 0.94vw, 18px);
    margin: clamp(14.58px, 2.6vw, 50px) auto clamp(43.75px, 7.81vw, 150px);
    max-width:100%;
}

.SiteBox {
    background: white;
    border-radius: clamp(8px, 0.83vw, 16px);
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(240px, 22vw, 426px);
    height: clamp(80px, 6.35vw, 122px);
    padding: clamp(0.5rem, 1.04vw, 1rem);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.SiteBox:hover {
    transform: translateY(clamp(-3px, -0.26vw, -5px));
    box-shadow: 0 clamp(4px, 0.42vw, 8px) clamp(10px, 1.04vw, 20px) rgba(0, 0, 0, 0.1);
}

.SiteBoxLogoImg {
    width: 100%;
    height: clamp(50px, 4.48vw, 86px);
    background: rgba(217, 217, 217, 0.46) center/cover no-repeat;
    border-radius: clamp(4px, 0.42vw, 8px);
}


/* ===== SHOWCASE SECTION ===== */
.SecShowcase { 
    align-self: stretch; 
}

.SecShowcase .Back {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: clamp(75px, 7.81vw, 150px);
}

.YoutubeBox {
    width: 100%;
    height: auto;
    background: rgba(217, 217, 217, 0.25);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: clamp(8.75px, 1.56vw, 30px) 0 clamp(43.75px, 7.81vw, 150px);
    padding: clamp(30px, 3.13vw, 60px) 0;
}

/* Swiper container styles */
.youtube-swiper {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.youtube-swiper .swiper-wrapper {
    transition-timing-function: linear;
}

.youtube-swiper .swiper-slide {
    width: auto !important;
}

.YoutubeFrame {
    /* 1920px時: 幅485px 高さ910px の比率 (1:1.876) を維持 */
    width: clamp(200px, 25.26vw, 485px);
    height: clamp(375px, 47.40vw, 910px);
    margin-right: clamp(0.5rem, 1.04vw, 1rem);
    border-radius: clamp(4px, 0.42vw, 8px);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    
    /* アスペクト比を維持するため */
    aspect-ratio: 485 / 910;
}

.YoutubeFrame iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Slider buttons removed - using continuous flow animation */


/* ===== PRODUCER SECTION ===== */
.SecProducer { 
    align-self: stretch; 
}

.SecProducer .Back {
    position: relative;
    width: 100%;
    height: fit-content;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: clamp(1rem, 2.08vw, 2rem);
    background: #F4F1E3;
}

/* ===== PRODUCER SLIDESHOW ===== */
.ProducerSlideshow {
    position: relative;
    overflow: hidden;
    margin: 2.08vw 4.17vw 7.81vw; /* 40px 80px 150px at 1920px */
}

.ProducerContainer {
    position: relative;
    width: 100%;
    min-height: clamp(400px, 50vw, 600px); /* Prevent layout shifts */
}

.ProducerSlide {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(19.84px, 3.54vw, 68px);
    justify-items: center;
    align-items: flex-start; /* Better alignment */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.ProducerSlide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

/* Slideshow Controls */
.ProducerControls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 1.04vw, 30px);
    margin-top: clamp(15px, 1.56vw, 30px);
}

.ProducerPrev,
.ProducerNext {
    background: var(--color-primary);
    color: white;
    border: none;
    width:40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    user-select: none;
}

.ProducerPrev:hover,
.ProducerNext:hover {
    background: #0e4a6b;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(18, 95, 134, 0.3);
}

.ProducerPrev:active,
.ProducerNext:active {
    transform: translateY(0);
}

.ProducerDots {
    display: flex;
    gap: clamp(16px, 0.42vw, 20px);
    align-items: center;
}

.ProducerDot {
    width: clamp(6px, 0.63vw, 12px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    background: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.ProducerDot:hover {
    background: #999;
    transform: scale(1.1);
}

.ProducerDot.active {
    background: var(--color-primary);
    transform: scale(1.2);
}

.ProducerDot.active::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    opacity: 0.3;
}

.ProducerPart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(1rem, 2.08vw, 2rem) clamp(0.5rem, 1.04vw, 1rem);
    background: transparent;
}

.ProducerCircle {
    width: clamp(200px, 24.48vw, 470px);
    height: clamp(200px, 24.48vw, 470px);
    background: rgba(217, 217, 217, 0.90) center/cover no-repeat;
    border-radius: 50%;
    margin-bottom: clamp(1rem, 2.08vw, 2rem);
}

.ProducerTitle {
    font-size: clamp(20px, 1.46vw, 28px); /* 28pt at 1920px */
    color: #125f86;
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: bold;
    letter-spacing: clamp(0.84px, 0.09vw, 1.68px);
    margin: 0;
    word-wrap: break-word;
}

.ProducerTxt {
    text-align: left;
    color: black;
    font-size: clamp(16px, 0.64vw, 18px);
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: 400;
    height: 9.2em;
    letter-spacing: clamp(0.54px, 0.06vw, 1.08px); /* はみ出た場合に省略記号を表示 */
    line-height: 1.6;
    margin: 10px 0;
    word-wrap: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.ProducerBtnTxt {
    background: var(--color-primary);
    color: var(--bg-white);
    font-size: 16px;
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: bold;
    letter-spacing: clamp(0.66px, 0.07vw, 1.32px);
    width: 17.46vw;
    padding:10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: clamp(2px, 0.21vw, 4px);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: clamp(0.5rem, 1.04vw, 1rem);
}

.ProducerBtnTxt:hover {
    background: #0e4a6b;
    transform: translateY(clamp(-1px, -0.10vw, -2px));
    box-shadow: 0 clamp(2px, 0.21vw, 4px) clamp(6px, 0.63vw, 12px) rgba(18, 95, 134, 0.3);
}

.ShowcaseBtn {
    display: none;
}

/* ===== DONORS SECTION ===== */
.SecDonors {
    align-self: stretch;
}

.SecDonors .Back {
    position: relative;
    width: 100%;
    height: fit-content;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: clamp(1rem, 2.08vw, 2rem);
    background: white;
}







.DonorsContainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    gap: clamp(1rem, 2.08vw, 2rem);
    justify-items: center;
    align-items: center;
    margin: clamp(1rem, 2.08vw, 2rem) clamp(40px, 4.17vw, 80px);
}

.DonorsPart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: clamp(250px, 21.61vw, 415px);
    height: clamp(350px, 31.88vw, 612px);
}

.Rectangle1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F4F1E3;
    border-radius: clamp(13px, 1.35vw, 26px);
    z-index: 1;
}

.Rectangle1.blue {
    background: #DFF2FC;
}

.DonorsPart .ShowcaseCircle {
    position: relative;
    width: clamp(170px, 14.53vw, 279px);
    height: clamp(170px, 14.53vw, 279px);
    background: rgba(217, 217, 217, 0.90);
    border-radius: 50%;
    margin: clamp(23px, 2.34vw, 45px) auto clamp(21px, 2.14vw, 41px);
    z-index: 2;
}

.DonorsPart .ShowcaseTxt {
    position: relative;
    text-align: left;
    color: black;
    font-size: clamp(12px, 0.94vw, 18px);
    font-family: Kozuka Gothic Pr6N;
    font-weight: 400;
    letter-spacing: clamp(0.54px, 0.06vw, 1.08px);
    line-height: 1.6;
    margin: 0 clamp(17px, 1.77vw, 34px) clamp(17px, 1.77vw, 34px);
    max-width: clamp(220px, 18.44vw, 354px);
    z-index: 2;
}

/* ===== INFO SECTION ===== */
.SecInfo {
    align-self: stretch;
}

.SecInfo .Back {
    position: relative;
    width: 100%;
    height: fit-content;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: clamp(1rem, 2.08vw, 2rem);
    background: #F2F1F3;
}







.InfoList {
    list-style: none;
    margin: 0 auto clamp(100px, 2.08vw, 150px);
    padding: 0;
    width: min(clamp(320px, 91.77vw, 1762px), 100%);
    max-width: 100%;
}

.InfoRow {
    display: grid;
    grid-template-columns: clamp(120px, 7.50vw, 144px) clamp(80px, 5.73vw, 110px) 1fr;
    gap: clamp(0.75rem, 1.56vw, 1.5rem);
    align-items: center;
    min-height: clamp(50px, 3.96vw, 76px);
    padding: clamp(0.5rem, 1.04vw, 1rem) clamp(1rem, 2.08vw, 2rem);
    width: 100%;
    margin-bottom: 1px;
    border-radius: 0;
    list-style: none;
}

.InfoRow:nth-child(odd) { background: #F5F5F5; }
.InfoRow:nth-child(even) { background: #D9D9D9; }

.InfoRow.multiline {
    min-height: clamp(70px, 5.73vw, 110px);
    align-items: flex-start;
    padding: clamp(0.75rem, 1.56vw, 1.5rem) clamp(1rem, 2.08vw, 2rem);
}

.InfoRow:hover {
    background: #CCCCCC;
    cursor: pointer;
}

.InfoDate {
    font-size: clamp(12px, 1.25vw, 24px);
    color: #3c3c3c;
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: 400;
    letter-spacing: clamp(0.36px, 0.04vw, 0.72px);
    word-wrap: break-word;
    text-align: left;
    white-space: nowrap;
}

.InfoBtnBox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(30px, 2.08vw, 40px);
    min-width: clamp(60px, 4.17vw, 80px);
    border-radius: clamp(2px, 0.21vw, 4px);
    padding: clamp(0.25rem, 0.52vw, 0.5rem) clamp(0.5rem, 1.04vw, 1rem);
    transition: all 0.3s ease;
}

.InfoBtnBox.general {
    background: white;
    border: 1px solid #ccc;
}

.InfoBtnBox.general .InfoBtnTxt {
    color: black;
}

.InfoBtnBox.important {
    background: #FD0001;
}

.InfoBtnBox.important .InfoBtnTxt {
    color: white;
}

.InfoBtnBox.business {
    background: #126087;
}

.InfoBtnBox.business .InfoBtnTxt {
    color: white;
}

.InfoBtnTxt {
    font-size: clamp(10px, 0.73vw, 14px);
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: 400;
    letter-spacing: clamp(0.5px, 0.05vw, 1px);
    word-wrap: break-word;
    white-space: nowrap;
}

.InfoTxt {
    font-size: clamp(12px, 1.25vw, 16px);
    color: #3c3c3c;
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: 400;
    letter-spacing: clamp(0.25px, 0.03vw, 0.5px);
    line-height: 1.5;
    word-wrap: break-word;
    margin: 0;
    text-align: left;
    text-decoration: none;
    transition: color 0.3s ease;
}

.InfoTxt:hover {
    color: #125F86;
    text-decoration: underline;
}

.InfoRow.multiline .InfoTxt {
    padding-top: clamp(0.125rem, 0.26vw, 0.25rem);
}

/* ===== YOKOTSU SECTION ===== */
.SecYokotsu {
    align-self: stretch;
}

.SecYokotsu .Back {
    position: relative;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.YokotsuBoxBack {
    width: fit-content;
    height: fit-content;
    margin: clamp(75px, 7.81vw, 150px) auto;
    padding: clamp(50px, 5.21vw, 100px) clamp(50px, 4.69vw, 90px) clamp(30px, 3.13vw, 60px);
    background-image: url('../svg/YokotsuBack.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: clamp(15px, 1.56vw, 30px);
}

.SecYokotsu .TitleMain {
    width: 100%;
    height: auto;
    margin-bottom: 0;
    font-size: clamp(24px, 1.67vw, 32px);
    text-align: center;
    color: #3c3c3c;
    color: black;
    font-family: "Noto Serif JP";
    font-weight: 700;
    word-wrap: break-word;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* TitleMainのbefore/afterを削除 */

.SecYokotsu .TitleSub {
    width: 23.02vw; /* 442px at 1920px */
    height: 0.94vw; /* 18px at 1920px */
    min-height: 18px; /* 最小高さ保証 */
    background-image: url('../svg/TitleSub_Yokotsu.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 15px auto 50px;
    position: relative;
    z-index: 1;
    font-family: Inter;
    font-weight: 400;
    letter-spacing: clamp(1.40px, 0.15vw, 2.80px);
    word-wrap: break-word;
}

.YokotsuTxtTitle {
    width: 100%;
    font-size: clamp(16px, 1.46vw, 28px);
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #125f86;
    font-family: Inter;
    font-weight: 600;
    word-wrap: break-word;
    margin-bottom: 10px;
}

.YokotsuTxtBody {
    width: 100%;
    height: fit-content;
    font-size: clamp(14px, 1.15vw, 22px);
    color: black;
    font-family: Inter;
    font-weight: 400;
    line-height: 160%;
    word-wrap: break-word;
}

.YokotsuImg {
    width: 100%;
    height: clamp(250px, 28.54vw, 548px);
    background: url('../images/yokotsu.png') center/cover no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: clamp(4px, 0.42vw, 8px);
    margin: auto;
}

/* ===== TOWN SECTION ===== */
.SecTown {
    align-self: stretch;
}

.SecTown .Back {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    background: #F4F1E3;
}

.TownWrap {
    max-width: clamp(900px, 75.94vw, 1458px);
    height: auto;
    margin: clamp(78px, 8.13vw, 156px) auto;
    padding: 50px clamp(45px, 4.69vw, 90px);
    background-color: white;
    border-radius: clamp(15px, 1.56vw, 30px);
}

.SecTown .title-wrap {
    margin: 0 auto clamp(23px, 2.40vw, 46px);
    position: relative;
    overflow: visible;
}

/* title-wrap::beforeを削除 */

.SecTown .TitleMain {
    width: 33.54vw; /* 644px at 1920px */
    height: 7.60vw; /* 146px at 1920px */
    background-image: url('../svg/Town_Title.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    font-family: "Noto Serif JP";
    font-weight: 700;
    word-wrap: break-word;
}


.TownContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto repeat(3, 1fr);
    grid-column-gap: clamp(28px, 2.92vw, 56px);
    max-width: clamp(800px, 66.67vw, 1280px);
    margin: 0 auto;
    padding: 0;
    gap:40px;
}

.FurusatoSection {
    grid-area: 1 / 1 / 2 / 3;
    max-width: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: fit-content;
}

.TownCard:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.TownCard:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
.TownCard:nth-child(4) { grid-area: 3 / 1 / 4 / 2; }
.TownCard:nth-child(5) { grid-area: 3 / 2 / 4 / 3; }
.TownCard:nth-child(6) { grid-area: 4 / 1 / 5 / 2; }
.TownCard:nth-child(7) { grid-area: 4 / 2 / 5 / 3; }

.TownPartsImg {
    width: 100%;
    height: clamp(180px, 15.63vw, 300px);
    background: #D9D9D9;
    border-radius: clamp(5px, 0.52vw, 10px);
    margin-bottom: clamp(0.75rem, 1.56vw, 1.5rem);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Individual TownPartsImg backgrounds */
.TownCard:nth-child(2) .TownPartsImg {
    background: url('../images/town01.png') center/cover no-repeat;
}

.TownCard:nth-child(3) .TownPartsImg {
    background: url('../images/town02.png') center/cover no-repeat;
}

.TownCard:nth-child(4) .TownPartsImg {
    background: url('../images/town03.png') center/cover no-repeat;
}

.TownCard:nth-child(5) .TownPartsImg {
    background: url('../images/town04.png') center/cover no-repeat;
}

.TownCard:nth-child(6) .TownPartsImg {
    background: url('../images/town05.png') center/cover no-repeat;
}

.TownCard:nth-child(7) .TownPartsImg {
    background: url('../images/town06.png') center/cover no-repeat;
}

.TownImg {
    width: 100%;
    height: clamp(240px, 20.83vw, 400px);
    background: url('../images/towntitle.png') center/cover no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: clamp(5px, 0.52vw, 10px);
    margin: clamp(0.5rem, 1.04vw, 1rem) 0;
}

.TownTxtTitle {
    font-size: clamp(18px, 1.46vw, 28px);
    color: #1C6188;
    font-family: Inter;
    font-weight: 600;
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0;
}

.TownTxt {
    font-size: clamp(14px, 1.04vw, 20px);
    color: black;
    font-family: Inter;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0em;
    word-wrap: break-word;
    margin: clamp(6px, 0.63vw, 12px) 0;
}

.TownLinkBtn {
    width: clamp(150px, 11.35vw, 218px);
    height: clamp(40px, 2.60vw, 50px);
    background: var(--color-primary);
    border: none;
    border-radius: clamp(4px, 0.42vw, 8px);
    padding: clamp(0.5rem, 1.04vw, 1rem) clamp(1rem, 2.08vw, 2rem);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: clamp(0.5rem, 1.04vw, 1rem);
    margin: clamp(1rem, 2.08vw, 2rem) 0;
}

.TownLinkBtn:hover {
    transform: translateY(clamp(-1px, -0.10vw, -2px));
    box-shadow: 0 clamp(2px, 0.21vw, 4px) clamp(4px, 0.42vw, 8px) rgba(18, 95, 134, 0.3);
}

.TownLinkBtnTxt {
    font-size: clamp(10px, 1.04vw, 20px);
    color: white;
    font-family: Inter;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: clamp(1px, 0.10vw, 2px);
    word-wrap: break-word;
    white-space: nowrap;
}

.TownLinkMark {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== USAGE SECTION ===== */
.SecUsage {
    align-self: stretch;
}

.SecUsage .Back {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
}

.UsageWrap {
    width: 100%;
    height: auto;
    margin: clamp(41px, 4.27vw, 82px) auto;
    background-color: white;
}


/* TitleBackは上部で統一定義済み */



.UsageContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: clamp(10px, 1.04vw, 20px);
    grid-row-gap: clamp(40px, 4.17vw, 80px);
    margin: 0 auto;
    padding: 0 clamp(37px, 3.85vw, 74px) 40px;
}

.UsageCard {
    width: 100%;
}

.UsagePartsImg {
    width: 100%;
    height: clamp(220px, 19.27vw, 370px);
    background: #D9D9D9;
    border-radius: clamp(5px, 0.52vw, 10px);
    margin-bottom: clamp(0.75rem, 1.56vw, 1.5rem);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Individual UsagePartsImg backgrounds */
.UsageCard:nth-child(1) .UsagePartsImg {
    background: url('../images/use01.png') center/cover no-repeat;
}

.UsageCard:nth-child(2) .UsagePartsImg {
    background: url('../images/use02.png') center/cover no-repeat;
}

.UsageCard:nth-child(3) .UsagePartsImg {
    background: url('../images/use03.png') center/cover no-repeat;
}

.UsageCard:nth-child(4) .UsagePartsImg {
    background: url('../images/use04.png') center/cover no-repeat;
}

.UsageCard:nth-child(5) .UsagePartsImg {
    background: url('../images/use05.png') center/cover no-repeat;
}

.UsageCard:nth-child(6) .UsagePartsImg {
    background: url('../images/use06.png') center/cover no-repeat;
}

.UsageCard:nth-child(7) .UsagePartsImg {
    background: url('../images/use07.png') center/cover no-repeat;
}

.UsageCard:nth-child(8) .UsagePartsImg {
    background: url('../images/use08.png') center/cover no-repeat;
}

.UsagePartsTitle {
    font-size: clamp(16px, 1.25vw, 24px);
    color: #1C6188;
    font-family: Inter;
    font-weight: 600;
    line-height: 1.3;
    word-wrap: break-word;
    margin: 0 0 clamp(0.5rem, 1.04vw, 1rem) 0;
}

.UsagePartsTxt {
    font-size: clamp(12px, 0.94vw, 18px);
    color: black;
    font-family: Inter;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: clamp(0.25px, 0.03vw, 0.5px);
    word-wrap: break-word;
    margin: 0;
    text-align: left;
    flex-grow: 1;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* タブレット対応 */
@media (max-width: 1024px) {
    .HeaderNavList {
        gap: 10px;
        padding: 25px;
    
    }
    
    .HeaderNavListItem {
        width: auto;
    }
    
    /* 中央のナビゲーション項目の幅を少し広くする */
    .HeaderNavListItem:nth-child(3) {
        flex-grow: 1.5;
    }

    .header-stetch-lower-wrapper a {
        width: 54px;
        height: 54px;
    }

    .HeaderNavListItemMain {
        font-size: clamp(16px, 1.5vw, 24px);
    }
    
    .HeaderNavListItemSub {
        font-size: clamp(10px, 1.37vw, 14px);
    }
    .header-curve{
        top:clamp(60px, 3.1vw, 60px);
    }
    /* タブレット用の中央特別フォントサイズ */
    .HeaderNavListItem span[style*="font-size: 36px"] {
        font-size: clamp(20px, 3.13vw, 32px) !important;
    }
    
    .HeaderNavListItem span[style*="font-size: 48px"] {
        font-size: clamp(24px, 4.69vw, 48px) !important;
    }
    
    .HeaderNavListItem span[style*="font-size: 24px"] {
        font-size: clamp(14px, 2.34vw, 24px) !important;
    }
    
    .BannerContainer {
        flex-direction: column;
        gap: clamp(20px, 3.91vw, 40px);
        margin: clamp(30px, 5.86vw, 60px) 0;
    }
    
    .BannerBtn {
        width: min(clamp(300px, 65.43vw, 670px), 90vw);
        height: clamp(80px, 15.63vw, 160px);
    }
    
    .FooterNavList {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(20px, 3.91vw, 40px);
    }
    
    .FooterContainer {
        grid-template-columns: 1fr;
        gap: clamp(30px, 5.86vw, 60px);
    }
    
    .SiteBoxContainer {
        gap: clamp(15px, 2.93vw, 30px);
    }
    
    .ProducerSlide {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(15px, 2.93vw, 30px);
    }
    
    .DonorsContainer {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(15px, 2.93vw, 30px);
    }
    
    .InfoRow {
        grid-template-columns: clamp(120px, 7.81vw, 120px) clamp(70px, 6.84vw, 100px) 1fr;
        gap: clamp(10px, 1.95vw, 15px);
        padding: clamp(8px, 1.56vw, 12px) clamp(15px, 2.93vw, 20px);
    }
    
    .TownContainer {
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        grid-row-gap: clamp(20px, 3.91vw, 30px);
    }
    
    .FurusatoSection {
        grid-area: auto;
    }
    
    .TownCard:nth-child(2) { grid-area: auto; }
    .TownCard:nth-child(3) { grid-area: auto; }
    .TownCard:nth-child(4) { grid-area: auto; }
    .TownCard:nth-child(5) { grid-area: auto; }
    .TownCard:nth-child(6) { grid-area: auto; }
    .TownCard:nth-child(7) { grid-area: auto; }
    
    .UsageContainer {
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: clamp(30px, 5.86vw, 60px);
    }

    #categoryBox-1 .CategoryTitleImg,
    #categoryBox-2 .CategoryTitleImg,
    #categoryBox-3 .CategoryTitleImg,
    #categoryBox-4 .CategoryTitleImg,
    #categoryBox-5 .CategoryTitleImg,
    #categoryBox-6 .CategoryTitleImg{
        width:70%;
        height:40%;
    }

    .BannerSubTitle{
        width:50%;
        height:5vw;
    }
}

/* スマートフォン対応 */
@media (max-width: 768px) {
    /* section min-height removed for mobile */

    /* Global container width control for 430px optimization */
    body {
        overflow-x: hidden;
    }

    .container {
        width: 95%;
        max-width: 410px;
        margin: 0 auto;
        padding: 0 10px;
    }


    .SecHero {
        margin: 0;
    }

    /* Hero Section mobile adjustments */
    .SecHero {
        height: auto;
        min-height: 60vh;
    }

    .SecHero .Back {
        height: auto;
        min-height: 60vh;
        padding-bottom: 80px; /* Ensure button is visible */
    }

    h1.HeroTitle {
        width: 90vw;
    }

    .HeroSubtitle {
        width: 100%;
        font-size: 12px;
    }

    .HeroBtnTxt {
        width: 35%;
        height: 100%;
        top: 60%;
    }

    .HeroBtnBox {
        top: 70%;
    }

    .TxtUnder {
        width: 30vw;
        height: auto;
    }

    .SecHero .title-container {
        top: 30%;
    }

    /* Pickup Section mobile adjustments - Complete redesign */
    .SecPickup .SecTitleBack {
        height: auto; /* Remove fixed height for mobile */
        margin: 30px auto 20px; /* Add bottom margin to prevent overlap */
        width:calc(100% - 20px);
    }

    .PickupItemWrap {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: 100%;
        max-width: 400px;
        height: auto;
        margin: 0px auto 0px; /* Add top margin to ensure separation */
        padding: 20px 10px;
        gap: 20px;
        box-sizing: border-box;
    }

    .PickupItemWrap:first-child {
        margin-top: 20px; /* Reduce margin for first item */
    }

    .PickupItemBox {
        position: relative;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 20px 15px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        background: white;
        border-radius: 12px;
        flex-shrink: 0;
        order: 1; /* Display first */
                transform:none;
               
    }

    .PickupItemImg {
        position: static;
        width: 100%;
        height: 300px;
        border-radius: 12px;
        display: block;
        flex-shrink: 0;
        order: 2; /* Display second */
        transform:none;
    }

    /* Scroll Fade-in Animation for PickupItemImg */
    .PickupItemImg {
        opacity: 0;
        /* 垂直中央寄せ(-50%)を維持しつつ、30px下から開始 */
        transform: translateY(30px);
        transition: opacity 1s ease-out, transform 1s ease-out;
    }
    .PickupItemImg.is-visible {
        opacity: 1;
        /* アニメーション終了時は元の垂直中央寄せに戻す */
        transform: translateY(0);
    }

    /* Scroll Fade-in Animation for PickupItemBox */
    .PickupItemBox {
        opacity: 0;
        /* 垂直中央寄せ(-50%)を維持しつつ、30px下から開始 */
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    .PickupItemBox.is-visible {
        opacity: 1;
        /* アニメーション終了時は元の垂直中央寄せに戻す */
        transform: translateY(0);
    }

    .PickupItemBoxNum{

    }

    /* Reset alternating layout for mobile - no overlap */
    .PickupItemWrap:nth-of-type(even) .PickupItemBox,
    .PickupItemWrap:nth-of-type(odd) .PickupItemBox {
        top:0;
        left: auto;
        right: auto;
        margin: -50px 0 0px;
    }

    .PickupItemWrap:nth-of-type(even) .PickupItemImg,
    .PickupItemWrap:nth-of-type(odd) .PickupItemImg {
        position: static;
        left: auto;
        right: auto;
                margin: 0 0 20px;
    }


    /* Category Title Image adjustments */
    .CategoryTitleImg {
        width: 30vw;
        height: 20vh;
   
    }

    #categoryBox-1 .CategoryTitleImg,
    #categoryBox-2 .CategoryTitleImg,
    #categoryBox-3 .CategoryTitleImg,
    #categoryBox-4 .CategoryTitleImg,
    #categoryBox-5 .CategoryTitleImg,
    #categoryBox-6 .CategoryTitleImg{
        width:50%;
    }

    /* Portal Site adjustments */
    .SecPortalsite .SecTitleBack {
        height: 7.81vh;
    }

    /* Site Box adjustments */
    .SiteBox {
        width: calc(50% - 5px); /* 2列表示にするため幅を調整 (gap: 10px) */
        height: auto;
        padding: 10px 8px;
        font-size: 14px;
    }

    /* 430px width optimization */
    .CategoryBox {
        width: 95vw;
        max-width: 410px;
        height: clamp(100px, 20.83vw, 160px);
        margin: 0 auto;
    }

    .YoutubeFrame {
        min-width: 280px;
        width: 90vw;
        max-width: 400px;
        height: 350px;
    }

    .BannerBtn {
        width: 90%;
        max-width: 400px;
        height: clamp(60px, 15vw, 120px);
        margin: 0 auto;
    }

    .ProducerCircle {
        width: clamp(120px, 35vw, 250px);
        height: clamp(120px, 35vw, 250px);
    }


    .DonorsContainer {
        width: 95%;
        max-width: 410px;
        margin: 0 auto;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .DonorsPart {
        width: 100%;
        height: clamp(200px, 50vw, 300px);
    }

    .HeaderNavList {
        flex-direction: column;
        gap: clamp(6px, 1.56vw, 12px);
        padding: clamp(8px, 2.08vw, 16px) clamp(15px, 3.91vw, 30px) clamp(3px, 0.78vw, 6px);
    }
    
    .HeaderNavListItem {
        width: auto;
    }
    
    .HeaderNavListItemMain {
        font-size: clamp(14px, 3.65vw, 20px);
    }
    
    .HeaderNavListItemSub {
        font-size: clamp(8px, 2.08vw, 12px);
        margin: clamp(1px, 0.26vw, 2px) 0 0;
    }
    
    /* モバイル用の中央特別フォントサイズ */
    .HeaderNavListItem span[style*="font-size: 36px"] {
        font-size: clamp(18px, 4.69vw, 28px) !important;
    }
    
    .HeaderNavListItem span[style*="font-size: 48px"] {
        font-size: clamp(20px, 6.25vw, 36px) !important;
    }
    
    .HeaderNavListItem span[style*="font-size: 24px"] {
        font-size: clamp(12px, 3.13vw, 18px) !important;
    }
    
    .BannerContainer {
        gap: clamp(15px, 3.91vw, 30px);
        margin: clamp(20px, 5.21vw, 40px) 0;
        padding: 0 clamp(8px, 1.95vw, 15px);
    }
    
    .BannerBtn {
        width: min(clamp(280px, 87.24vw, 670px), 95vw);
        height: clamp(70px, 18.23vw, 140px);
        border-radius: clamp(4px, 1.04vw, 8px);
    }
    
    .FooterNavList {
        grid-template-columns: 1fr;
        gap: clamp(15px, 3.91vw, 30px);
    }
    
    .CategoryBoxContainer {
        gap: clamp(15px, 2.93vw, 30px);
        grid-template-columns:1fr;
    }
    
    .FooterContainer {
        width: 95%;
        max-width: 80%;
        margin: 0 auto;
        padding: 15px 0;
        gap: 20px;
    }
    
    .CategoryBox {
        width: 90vw;
        height: clamp(100px, 20.83vw, 160px);
    }
    
    .SiteBoxContainer {
        width: 95%;

        margin: clamp(14.58px, 2.6vw, 50px) auto clamp(43.75px, 7.81vw, 150px);
        gap: 10px;
    }
    
    .YoutubeFrame {
        min-width: clamp(250px, 65.10vw, 400px);
        width: clamp(250px, 65.10vw, 400px);
        height: clamp(400px, 104.17vw, 640px);
    }
    
    .ProducerSlide {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    
    .DonorsContainer {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(10px, 2.60vw, 20px);
        margin: clamp(15px, 3.91vw, 30px) clamp(20px, 5.21vw, 40px);
    }
    
    .DonorsPart {
        width: clamp(180px, 46.88vw, 360px);
        height: clamp(280px, 72.92vw, 560px);
    }
    
    .DonorsPart .ShowcaseCircle {
        width: clamp(120px, 31.25vw, 240px);
        height: clamp(120px, 31.25vw, 240px);
        margin: clamp(15px, 3.91vw, 30px) auto clamp(15px, 3.91vw, 30px);
    }
    
    .InfoRow {
        display: flex;
        gap: 8px;
        padding: 12px 15px;
        min-height: auto;
    }

    .InfoRow .InfoDate,
    .InfoRow .InfoBtnBox {
        display: inline-block;
        margin-right: 10px;
    }

    .InfoRow .InfoTxt {
        display: block;
        margin-top: 5px;
        line-height: 1.4;
    }
    
    .InfoDate {
        font-size: 14px;
        flex-shrink: 0;
    }

    .InfoBtnBox {
        height: 24px;
        min-width: 50px;
        padding: 4px 8px;
        flex-shrink: 0;
    }

    .InfoBtnTxt {
        font-size: 10px;
    }

    .InfoTxt {
        font-size: 12px;
        line-height: 1.4;
        margin-top: 4px;
    }
    
    .YokotsuBoxBack {
        margin: clamp(40px, 10.42vw, 80px) auto;
        padding: clamp(25px, 6.51vw, 50px) clamp(20px, 5.21vw, 40px) clamp(15px, 3.91vw, 30px);
    }
    
    .YokotsuImg {
        width: 100%;
        height: clamp(150px, 39.06vw, 300px);
    }
    
    .TownWrap {
        margin: clamp(40px, 10.42vw, 80px) auto;
        padding: clamp(20px, 5.21vw, 40px);
    }
    
    .TownContainer {
        grid-template-columns: 1fr;
        grid-row-gap: clamp(15px, 3.91vw, 30px);
    }
    
    .TownPartsImg {
        height: clamp(120px, 31.25vw, 240px);
    }
    
    .TownImg {
        height: clamp(160px, 41.67vw, 320px);
    }
    
    .UsageWrap {
        margin: clamp(20px, 5.21vw, 40px) auto;
    }
    
    .UsageContainer {
        grid-template-columns: 1fr;
        grid-row-gap: clamp(20px, 5.21vw, 40px);
        padding: 0 clamp(20px, 5.21vw, 40px);
    }

    .UsagePartsImg {
        height: clamp(150px, 39.06vw, 300px);
    }

    .SecCategory .SecTitleBack{
        min-height:70px;
    }

    .SecUsage .SecTitleBack{
        min-height:70px;
    }

    .SecYokotsu{
        padding:0 clamp(5px, 1vw,10px);
    }
    .SecYokotsu .TitleSub{
        height:20px;
        width:80%;
        margin:2vw auto 4vw;
    }
    .SecTown .Back{
        padding:0 10px;
    }
    .SecTown .TitleMain{
        width:100%;
        height:max(14vw,50px);
    }

    .FaqWrap{
        padding-left:clamp(20px, 4.69vw, 90px);
        padding-right:clamp(20px, 4.69vw, 90px);
        
    }

}

/* ========================================
   Background Images Override
   ======================================== */
/* Ensure images take priority over default backgrounds */

/* Pickup Item Images with high specificity */
.SecPickup .Back .PickupItemWrap:nth-child(1) .PickupItemImg {
    background-image: url('../images/pickup01_apple.jpg');
    background-size: cover;
    background-position: center;
}
.SecPickup .Back .PickupItemWrap:nth-child(2) .PickupItemImg {
    background-image: url('../images/pickup02_rice.jpg');
    background-size: cover;
    background-position: center;
}
.SecPickup .Back .PickupItemWrap:nth-child(3) .PickupItemImg {
    background-image: url('../images/pickup03_onuma-beef.png');
    background-size: cover;
    background-position: center;
}
.SecPickup .Back .PickupItemWrap:nth-child(4) .PickupItemImg {
    background-image: url('../images/pickup04_epuy.jpg');
    background-size: cover;
    background-position: center;
}
.SecPickup .Back .PickupItemWrap:nth-child(5) .PickupItemImg {
    background-image: url('../images/pickup05_nanairo.webp');
    background-size: cover;
    background-position: center;
}

/* Category Box Images override */
.SecCategory .CategoryBoxContainer > .CategoryBox:nth-child(1) {
    background-image: url('../images/category01.png');
    background-size: cover;
    background-position: center;
}
.SecCategory .CategoryBoxContainer > .CategoryBox:nth-child(2) {
    background-image: url('../images/category02.png');
    background-size: cover;
    background-position: center;
}
.SecCategory .CategoryBoxContainer > .CategoryBox:nth-child(3) {
    background-image: url('../images/category03.png');
    background-size: cover;
    background-position: center;
}
.SecCategory .CategoryBoxContainer > .CategoryBox:nth-child(4) {
    background-image: url('../images/category04.png');
    background-size: cover;
    background-position: center;
}
.SecCategory .CategoryBoxContainer > .CategoryBox:nth-child(5) {
    background-image: url('../images/category05.png');
    background-size: cover;
    background-position: center;
}
.SecCategory .CategoryBoxContainer > .CategoryBox:nth-child(6) {
    background-image: url('../images/category06.png');
    background-size: cover;
    background-position: center;
}

/* Portal Site Logo Images override */
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(1) .SiteBoxLogoImg {
    background: url('../images/portal01.png') center/contain no-repeat;
}
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(2) .SiteBoxLogoImg {
    background: url('../images/portal02.png') center/contain no-repeat;
}
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(3) .SiteBoxLogoImg {
    background: url('../images/portal03.png') center/contain no-repeat;
}
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(4) .SiteBoxLogoImg {
    background: url('../images/portal04.png') center/contain no-repeat;
}
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(5) .SiteBoxLogoImg {
    background: url('../images/portal05.png') center/contain no-repeat;
}
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(6) .SiteBoxLogoImg {
    background: url('../images/portal06.png') center/contain no-repeat;
}
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(7) .SiteBoxLogoImg {
    background: url('../images/portal07.png') center/contain no-repeat;
}
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(8) .SiteBoxLogoImg {
    background: url('../images/portal08.png') center/contain no-repeat;
}
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(9) .SiteBoxLogoImg {
    background: url('../images/portal09.png') center/contain no-repeat;
}
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(10) .SiteBoxLogoImg {
    background: url('../images/portal10.png') center/contain no-repeat;
}
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(11) .SiteBoxLogoImg {
    background: url('../images/portal11.png') center/contain no-repeat;
}
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(12) .SiteBoxLogoImg {
    background: url('../images/portal12.png') center/contain no-repeat;
}
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(13) .SiteBoxLogoImg {
    background: url('../images/portal13.png') center/contain no-repeat;
}
.SecPortalsite .SiteBoxContainer > .SiteBox:nth-child(14) .SiteBoxLogoImg {
    background: url('../images/portal14.png') center/contain no-repeat;
}

/* Producer Showcase Images override */
.SecProducer .ProducerContainer > .ProducerPart:nth-child(1) .ProducerCircle {
    background: url('../images/producer01.jpg') center/cover no-repeat;
}
.SecProducer .ProducerContainer > .ProducerPart:nth-child(2) .ProducerCircle {
    background: url('../images/producer02.jpg') center/cover no-repeat;
}
.SecProducer .ProducerContainer > .ProducerPart:nth-child(3) .ProducerCircle {
    background: url('../images/producer03.jpg') center/cover no-repeat;
}
.SecProducer .ProducerContainer > .ProducerPart:nth-child(4) .ProducerCircle {
    background: url('../images/producer04.jpg') center/cover no-repeat;
}
.SecProducer .ProducerContainer > .ProducerPart:nth-child(5) .ProducerCircle {
    background: url('../images/producer05.jpg') center/cover no-repeat;
}
.SecProducer .ProducerContainer > .ProducerPart:nth-child(6) .ProducerCircle {
    background: url('../images/producer06.jpg') center/cover no-repeat;
}

/* Hero Section Content - Ensure content appears above slideshow */
.title-container {
    z-index: 2;
}

.HeroBtnBox {
    z-index: 10;
}

/* HeroBtnBox internal stitch-border elements */
.HeroBtnBox .stitch-border-top,
.HeroBtnBox .stitch-border-right,
.HeroBtnBox .stitch-border-bottom,
.HeroBtnBox .stitch-border-left {
    border-radius: 5px;
}

/* YokotsuBoxBack stitch-border elements removed - using SVG background instead */

.TxtUnder-container {
    z-index: 10;
}

/* ============================================
   ハンバーガーメニュー (SP表示時)
   2025-09-23 セマンティックHTML対応
   ============================================ */

/* ハンバーガーメニュートグルボタン */
.hamburger-menu-toggle {
    display: none; /* デフォルトは非表示 */
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    width: 50px;
    height: 50px;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.hamburger-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger-menu-toggle:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}

/* ハンバーガーメニューオーバーレイ */
.hamburger-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    overflow: hidden;
}

.hamburger-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ハンバーガーメニューコンテンツ */
.hamburger-menu-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background: var(--bg-white);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    will-change: transform;
}

.hamburger-menu-overlay.active .hamburger-menu-content {
    transform: translateX(0);
}

/* 閉じるボタン */
.hamburger-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    font-size:40px;
    padding:5px;
}

.hamburger-menu-close:hover {
    color: var(--color-secondary);
}

/* モバイルヘッダーコンテンツ */
.mobile-header-content {
    margin-top: 60px;
}

/* モバイルナビゲーション */
.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-item {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-nav-item:last-child {
    border-bottom: none;
}

.mobile-nav-item a {
    display: block;
    padding: 20px 0;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s ease;
}

.mobile-nav-item a:hover {
    background-color: #f8f8f8;
}

.mobile-nav-main {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-secondary);
    margin-bottom: 4px;
}

.mobile-nav-sub {
    display: block;
    font-size: 14px;
    color: #666;
    font-style: italic;
}

/* モバイルナナエマーク */
.mobile-nanae-mark {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.mobile-nanae-mark img {
    max-width: 120px;
    height: auto;
    }

    .CategoryBoxContainer {
        gap: clamp(10px, 2.60vw, 20px);
        margin: clamp(15px, 3.91vw, 30px) auto clamp(40px, 10.42vw, 100px);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    /* PCナビゲーションを非表示 */
    .HeaderNav {
        display: none;
    }

    /* ハンバーガーメニューボタンを表示 */
    .hamburger-menu-toggle {
        display: flex;
    }

    /* ヘッダーを簡素化 */
    header {
        position: sticky;
        min-height: 80px;
    }

    /* SVGカーブを調整 */
    .header-curve {
        height: 120px;
    }

    /* 下部装飾を調整 */
    .header-stetch-lower-wrapper {
       display:none;
    }
}

@media (max-width: 480px) {
    .hamburger-menu-content {
        width: 90%;
    }

    .mobile-nav-main {
        font-size: 16px;
    }

    .mobile-nav-sub {
        font-size: 13px;
    }
}

/* ===== レスポンシブ設計 - SP表示のみ適用 ===== */

@media (max-width: 768px) {
    /* SP時はheader内の装飾要素とナビゲーションを非表示 */
    .header-curve,
    .ellipse,
    .header-nanae-mark,
    div[role="navigation"] {
        display: none;
    }

    /* SP専用ヘッダーバナー設定 */
    .mobile-header-banner {
        display: block;
        position: relative;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.95);
        border-bottom: 1px solid #eee;
        padding: 10px 0;
    }

    .mobile-header-banner-content {
        text-align: center;
        padding: 0 20px;
    }

    .mobile-header-banner a {
        text-decoration: none;
        color: inherit;
        margin-right:80px;
        position:relative;

        &::before {
            background-image:url(../images/NanaeMark.png);
            background-repeat:no-repeat;
            background-size:80%;
            height:60px;
            width:60px;
            content:"";
            display:block;
            position:absolute;
            top:3px;
     
        }
    }

    .mobile-banner-main {
        font-size: 18px;
        font-weight: bold;
        margin: 0;
        color: #333;
        text-align:left;
        padding-left:60px;
    }

    .mobile-banner-main span {
        display: inline-block;
        margin: 0 2px;
        font-size: clamp(22px, 1.88vw, 36px);
        font-family: "A1MinchoStd Bold", "Noto Serif JP";
        font-weight: 700;
        color: #234283;
        &:first-child{
            font-size:90%;
        }
    }

    .mobile-banner-sub {
        font-size: 12px;
        margin: 2px 0 0 5px;
        color: #666;
        text-align:left;
                padding-left:60px;
        span{
                font-family: "A1MinchoStd Bold", "Noto Serif JP";
    font-weight: 700;
    color: #234283;
        }
    }

    /* SP時のSecHeroの高さ設定 */
    .SecHero {
        height: 90vh;
    }

    .SecHero .Back {
        height: 90vh;
    }

    /* SP時はHeaderNavListItem 3番目のみ表示（他のナビゲーションは非表示） */
    .HeaderNavListItem:not(:nth-child(3)) {
        display: none;
    }

    .HeaderNavListItem:nth-child(3) {
        display: block;
        width: clamp(187px, 15.63vw, 300px);
        text-align: center;
    }

    /* PickupItemWrapのgap設定 - SP表示のみ */
    .SecPickup .PickupItemWrap {
        gap: 0;
        max-width:100%;
    }

    /* PickupItemWrapのPickupItemImg統一設定 - SP表示のみ（優先度向上） */
    .SecPickup .PickupItemWrap:nth-of-type(odd) .PickupItemImg,
    .SecPickup .PickupItemWrap:nth-of-type(even) .PickupItemImg {
        border: 4px solid #fff !important;
        border-right: 4px solid #fff !important;
        border-left: 4px solid #fff !important;
        border-radius: 12px;
    }

    .SecPickup .PickupItemWrap:nth-of-type(odd) .PickupItemImg,
    .PickupItemWrap:nth-of-type(even) .PickupItemBox{
        margin-left:5vw;
        width:calc(100% - 5vw);
    }
    .SecPickup .PickupItemWrap:nth-of-type(even) .PickupItemImg,
        .PickupItemWrap:nth-of-type(odd) .PickupItemBox{
        margin-right:5vw;
        width:calc(100% - 5vw);
    }
    /* InfoDateとInfoBtnBox generalを一列表示 - SP表示のみ */
    .InfoRow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: clamp(8px, 2vw, 12px);
    }

    .InfoDate {
        flex-shrink: 0;
        display: inline-block;
    }

    .InfoBtnBox {
        flex-shrink: 0;
        display: inline-flex;
    }

    .InfoTxt {
        flex: 1;
        margin: 0;
    }

    /* SP時のYokotsuBoxBack背景設定 */
    .YokotsuBoxBack {
        background-image: none !important;
        background: #DFF1FB;
    }

    /* SP時のYokotsuBoxBack::after疑似要素設定 */
    .YokotsuBoxBack::after {
        content: '';
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        border: 1px dashed #d13a25;
        border-radius: clamp(15px, 1.56vw, 30px);
        pointer-events: none;
        z-index: 10;
    }

    /* SP時のTownWrap::after疑似要素設定 */
    .TownWrap::after {
        content: '';
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        border: 1px dashed #C3BA9B;
        border-radius: clamp(15px, 1.56vw, 30px);
        pointer-events: none;
        z-index: 10;
    }

    /* Mobile-nav-listのデザインをPCと同一に統一 */
    .mobile-nav-list .mobile-nav-item {
        text-align: center;
        padding-bottom: clamp(5px, 0.52vw, 10px);
    }

    .mobile-nav-main {
        margin: 0;
        font-size: 16px;
        color: #3c3c3c;
    }

    .mobile-nav-sub {
        margin: 0;
        font-size: 14px;
        font-family: "Century Gothic", "Futura", "Avenir Next", "Helvetica Neue", "Arial", sans-serif;
        font-weight: 400;
        letter-spacing: 0.06em;
        color: #64a5dd;
    }

    /* SP時の.SecProducer .SecTitleBackのheight調整 */
    .SecProducer .SecTitleBack {
        height: 7vh;
    }

    /* ProducerBtnTxtのサイズとフォント設定 */
    .ProducerBtnTxt {
        width: 30vw;
        height: auto;
        font-size: 12pt;
    }

    /* ===== ProducerSlide SP対応 ===== */

    /* SP時のProducerSlide設定 */
    .ProducerSlide {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: auto;
        grid-template-columns: none;
    }

    /* ProducerPartをSP用に調整 */
    .ProducerPart {
        max-width: 90vw;
        padding: clamp(20px, 4vw, 30px);
        width: 100%;
    }

    /* ProducerCircleのサイズ調整 */
    .ProducerCircle {
        width: clamp(150px, 40vw, 250px);
        height: clamp(150px, 40vw, 250px);
    }

    /* ProducerControlsの調整 */
    .ProducerDots {
        gap: clamp(8px, 2vw, 12px);
    }

    /* ドットナビゲーションを6個に対応 */
    .ProducerDot {
        width: 8px;
        height: 12px;
    }

    /* ProducerTxtの高さ調整 */
    .ProducerTxt {
        height: auto;
        min-height: 80px;
    }




    /* FooterNavListを2列表示 */
    .FooterNavList {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .BannerSubTitle{
        width:50%;
        height:5vw;
    }

    .SecInfo .SecTitleBack{
        height:12vw;
    }
}