/* 共通 */
:root {
    --border-color: #1F1D1B;
    --border-color-orange: #EF7A00;
    --border-color-wineRed: #9E1C49;
    --border-color-darkGreen: #344E3F;
    --border-color-navy: #3A3970;
    --border-color-red: #D51237;
    --border-color-green: #009655;

    --font-accent: "M PLUS Rounded 1c", sans-serif;
}

body{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #1F1D1B;
}

img{
    width: 100%;
    object-fit: cover;
    height: auto;
}

.relative{
    position: relative;
}

.secTtl {
    width: fit-content;
    margin: auto;
}

.secTtlImg {

}

.c-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 262px;
    height: 48px;
    padding: 6px 24px;
    border-radius: 30px;
    background-color: transparent;
    z-index: 1;
    font-weight: bold;
    text-decoration: none;
}

.c-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 30px;
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 0;
}

.c-btn:hover::before {
    transform: scale(1.1);
}

.c-btn img {
    position: relative;
    z-index: 1;
    max-width: 100%;
}

.c-btn:hover img{
    opacity: 1 !important;
}

.c-btn.--orange::before {
    background-color: var(--border-color-orange);
}

.c-btn.--wineRed::before {
    background-color: var(--border-color-wineRed);
}

.c-btn.--darkGreen::before {
    background-color: var(--border-color-darkGreen);
}

.c-btn.--navy::before {
    background-color: var(--border-color-navy);
}

.c-btn.--red::before {
    background-color: var(--border-color-red);
}

.c-btn.--green::before {
    background-color: var(--border-color-green);
}
.fzDown1 {
    font-size: 75%;
}
.fwN {
    font-weight: normal;    
}

/* PC/SP切り替え */

@media screen and (min-width:1100px){
	.pcOnly {
		display: block !important;
	}
	.spOnly {
		display: none !important;
	}
}
@media screen and (min-width: 768px) and (max-width: 1099px) {
	.pcOnly {
		display: none !important;
	}
	.spOnly {
		display: none !important;
	}
}
@media screen and (max-width: 767px) {
	.pcOnly {
		display: none !important;
	}
	.spOnly {
		display: block !important;
	}
}

/* 緑ボタン */
.menuList__imgBox {
    position: relative;
    overflow: visible; /* 确保放大时不会被裁剪 */
}
.green-button {
    position: absolute;
    width: clamp(40px, 18.18%, 64px);
    height: clamp(40px, 24.24%, 64px);
    background: var(--border-color-green); 
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.5); 
    z-index: 2;
    bottom: 0;
    right: 0;
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menuList__link:hover .green-button {
    transform: scale(1.25);
}

.menuList__link:hover .green-button-arrows {
    transform: translateX(100%) scale(0.85);
}

.green-button-arrows {
    position: absolute;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: row-reverse;
    gap: 20%;
}

.green-button-arrows img {
    width: 68px;
    max-width: 100%;
    height: auto;
}

.prev-arrow .green-button-arrows img {
    transform: scaleX(-1); 
}
.prev-arrow .green-button-arrows {
    flex-direction: row;
}

.slide-arrow.prev-arrow.green-button.slick-arrow:hover .green-button-arrows {
    transform: translateX(-100%) scale(0.85);
}

.slide-arrow.next-arrow.green-button.slick-arrow:hover .green-button-arrows {
    transform: translateX(100%) scale(0.85);
}

/* レイアウト */

.l-content {
    background-color: #FBF9EE;
}

.l-section {
    padding: 80px clamp(30px, 5vw ,72px);
}

.l-inner {
    max-width: 1160px;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {

    body.js-noScroll{
        overflow: hidden;
    }

    .secTtl {
        max-width: 350px;
    }

    .l-section {
        padding: 80px 20px;
        background-color: #FBF9EE;
    }

    .l-content.js-noScroll {
        overflow-y: hidden;
    }
}
/* js フェードイン */
.js-fadeIn {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

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

.spMenuWrap {
    display: none;
}

@media screen and (max-width: 767px) {

    .spMenuWrap.js-active {
        display: block;
    }
}

.spMenuBtn {
    position: fixed;
    top: 70px;
    right: 0;
    display: inline-block;
    width: 170px;
    height: 80px;
    z-index: 11;
}

.spMenuBtnImg {
    display: none;
    transition: 0.3s;
}

.spMenuBtnImg.js-active {
    display: block;
    transition: 0.3s;
}

.spMenuBox {
    position: fixed;
    width: 100vw;
    height: 100svh;
    padding: 29px 20px 190px;
    background: url(../img/top/nav_bg.png)no-repeat bottom / 100%;
    background-color: #FBF9EE;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease , visibility 0.3s ease;
    overflow: hidden;
}

.spMenuBox::before {
    display: block;
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    margin: auto;
    width: 350px;
    height: 62px;
    background: url(../img/top/nav_bg_deco.png)no-repeat center / contain;
    content: '';
}

.spMenuBox.js-active {
    position: fixed;
    top: 70px;
    left: 0;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease , visibility 0.3s ease;
    z-index: 10;
}

.spMenu__logo {
    display: inline-block;
    width: 169px;
}

.spMenuNav {
    height: 100%;
    padding: 32px 15px 52px;
    margin-top: 20px;
    overflow-y: scroll;
}

.spMenuNavList {
    padding: 0 20px;
}

.spMenuNavList__item {
    position: relative;
    width: 100%;
    padding-bottom: 32px;
}

.spMenuNavList__item::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 1.5px;
    background: url(../img/top/line-dot-sp.svg)no-repeat center / 100%;
    content: '';
}

.spMenuNavList__item:last-of-type {
    padding-bottom: 0;
}

.spMenuNavList__item:last-of-type::before {
    display: none;
}

.spMenuNavList__item + .spMenuNavList__item {
    margin-top: 32px;
}

.spMenuNavList__item:nth-of-type(1) .spMenuNavList__link {
    max-width: 140px;
}

.spMenuNavList__item:nth-of-type(2) .spMenuNavList__link {
    max-width: 100px;
}

.spMenuNavList__item:nth-of-type(3) .spMenuNavList__link {
    max-width: 114px;
}

.spMenuNavList__item:nth-of-type(4) .spMenuNavList__link {
    max-width: 143px;
}

.spMenuNavList__item:nth-of-type(5) .spMenuNavList__link{
    max-width: 140px;
}

.spMenuNavList__link {
    display: block;
    margin: auto;
}


/* kv */
.kvArea {
    position: relative;
    width: 100vw;
    z-index: 2;
}

.kvArea.topKvArea {
    aspect-ratio: 1440/786;
    margin-top: -3px;
    overflow: hidden;
}

.kvLogo {
    position: absolute;
    top: 10.972vw;
    left: 0;
    right: 0;
    width: 22.083vw;
    margin: auto;
    z-index: 10;
}

.kv_bgWrap,
.kv_imgWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.kv_bg01,
.kv_bg02,
.kv_bg03 {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
}

.kv_bg01 {
    top: 33px;
    z-index: 1;
}

.kv_bg01.js-anime01 {
    opacity: 1;
    transform: translateY(-30px);
    transition: all 0.5s ease;
}

.kv_bg02 {
    bottom: -56px;
    z-index: 1;
}

.kv_bg02.js-anime02 {
    opacity: 1;
    transform: translateY(-70px);
    transition: opacity 0.5s ease, transform 0.5s ease-out;
}

.kv_bg03 {
    bottom: -30px;
    z-index: 2;
}

.kv_bg03.js-anime03 {
    opacity: 1;
    transform: translateY(-30px);
}

.kv_img01,
.kv_img02,
.kv_img03,
.kv_img04,
.kv_img05,
.kv_img06 {
    position: absolute;
    opacity: 0;
    z-index: 3;
}

.kv_img.js-anime04 {
    opacity: 1;
    animation: kvImg 1s ease-out 0.5s normal none;
    transition: opacity 1s ease;
    transition-delay: 0.5s;
}

@keyframes kvImg{
    0% {
        transform: scale(0.9);
    }
    30% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.kv_img01 {
    top: -1.972%;
    left: 0;
    /* width: 312px; */
    width: 21.6%;
}

.kv_img02 {
    top: 26.805vw;
    left: 4.5138vw;
    /* width: 253px; */
    width: 17.5694%;
}

.kv_img03 {
    top: 21.1vw;
    left: 21.6vw;
    /* width: 160px; */
    width: 11.11111111%;
}

.kv_img04 {
    top: 3.8vw;
    right: 0;
    /* width: 265px; */
    width: 18.4027%;
}

.kv_img05 {
    top: 9.2361vw;
    right: 18.4027vw;
    /* width: 220px; */
    width: 15.27%;
}

.kv_img06 {
    top: 21.805vw;
    right: 7.361vw;
    /* width: 360px; */
    width: 25%;
}


@media screen and (max-width: 767px) {

    .kvArea {
        margin-top: -65px;
    }

    .kvArea.topKvArea {
        aspect-ratio: 390/750;
        margin-top: -65px;
    }

    .kvLogo {
        top: 50%;
        width: 55.128vw;
        transform: translateY(-50%);
    }

    .kv_bg01 {
        top: 25px;
    }

    .kv_bg02 {
        bottom: -76px;
    }

    .kv_bg03 {
        bottom: -58px;
    }

    .kv_img01 {
        top: 10.512vw;
        left: 4.358vw;
        /* width: 170px; */
        width: 43.589%;
    }
    
    .kv_img02 {
        top: 48.461vw;
        left: 0;
        /* width: 70px; */
        width: 17.948%;
    }
    
    .kv_img03 {
        top: 25.128vw;
        left: 50.512vw;
        /* width: 72px; */
        width: 18.461%;
    }
    
    .kv_img04 {
        top: 129.487vw;
        left: 0;
        right: auto;
        /* width: 87px; */
        width: 22.307%;
    }
    
    .kv_img05 {
        top: 104.871vw;
        right: 0;
        /* width: 61px; */
        width: 15.641%;
    }
    
    .kv_img06 {
        top: 132.307vw;
        right: 0;
        /* width: 126px; */
        width: 32.307%;
    }
}


/* ナビゲーション */
.nav {
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    width: fit-content;
    padding: 0 30px;
    margin: auto;
    z-index: 10;
    opacity: 0;
    transition: all 0.5s ease;
}

.nav.js-anime {
    opacity: 1;
    transition: all 0.5s ease;
}

.navList {
    display: flex;
    align-items: flex-end;
    gap: 0 clamp(20px, 3.57vw ,40px);
}

.navList__item {
    position: relative;
    max-width: 140px;
}

.navList__item:nth-of-type(2) {
    max-width: 100px;
}

.navList__item:nth-of-type(3) {
    max-width: 120px;
}

.navList__item:nth-of-type(4) {
    max-width: 143px;
}

.navList__item:nth-of-type(5){
    max-width: 140px;
}

.navList__item + .navList__item::before {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(-21px, -1.875vw ,-11px);
    width: 2px;
    height: 39px;
    margin: auto;
    background: url(../img/top/line-dot.svg)no-repeat center / contain;
    content: '';
}

.navList__link {
    display: inline-block;
}

.navList__img {

}

@media screen and (max-width: 1000px) {

    .nav {
        top: 15px;
    }

    .navList {
        padding: 10px 24px;
        background-color: #FFFFFF;
        border-radius: 15px;
    }
}

@media screen and (max-width: 767px) {

    .nav {
        display: none;
    }
}

/* 下層ページ ナビゲーション */
.lowerNav {
    position: 'fixed';
    top: '140px';
    max-width: 1312px;
    width: 'calc(100% - 60px)';
    padding: 0;
}

.lowerNavInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 20px;
    padding: 11px 24px;
    background-color: #FFFFFF;
    border-radius: 10px;
}

.lowerNav__logo {
    display: inline-block;
    max-width: 225px;
}

@media screen and (max-width: 959px) {

    .lowerNav__logo {
        display: inline-block;
        max-width: 180px;
    }

    .lowerNav .navList{
        padding: 0;
        background-color: transparent;
        border-radius: 0;
     }
}

.scroll-hint {
    position: absolute;
    display: inline-block;
    bottom: 2vw;
    left: 0;
    right: 0;
    font-size: 12px;
    font-weight: 500;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    letter-spacing: 1px;
    width: fit-content;
    padding: 12px 3px 32px;
    margin: auto;
    background-color: #1F1D1B;
    border-radius: 20px;
    color: #FFFFFF;
    opacity: 0;
    z-index: 5;
}

.scroll-hint.js-anime {
    opacity: 1;
    transition: all 0.5s ease;
}

.scroll-hint::before {
    position: absolute;
    display: block;
    bottom: 12px;
    left: 0;
    right: 0;
    width: 16px;
    height: 16px;
    margin: auto;
    background: url(../img/top/common_scroll_arrow.svg)no-repeat center / contain;
    content: '';
    animation: scroll-hint 3s ease 0s infinite normal none;
}

@keyframes scroll-hint {
    0% {
      transform: translateY(0);
    }
    50% {
        transform: translateY(6px);
    }
    100% {
        transform: translateY(0);
    }
}

@media screen and (max-width: 959px) {

    .scroll-hint {
        bottom: 0;
        padding: 12px 3px 27px;
    }
}


/* topMessageArea */
.topMessageArea {
    position: relative;
    --parallax-offset: 20px;
    width: 100%;
    height: 900px;
    margin-top: -50px;
    overflow: hidden;
    z-index: 1;
}

.topMessageArea .l-inner {
    display: flex;
}

.topMessageArea::after {
    display: block;
    position: absolute;
    top: calc(var(--parallax-offset, 0px) + 30%);
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    background: url(../img/top/section1_bg.png) no-repeat center / contain;
    content: '';
    z-index: 1;
    opacity: 0;
    transform: var(--parallax-transform, translateY(0));
    transition: opacity 2.5s ease, transform 0.4s linear;
    will-change: transform, opacity;
  }

.topMessageArea.is-visible::after {
    opacity: 1;
  }

.topMessageArea::before {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: calc(100% - 60px);
    width: 924px;
    height: 676px;
    margin: auto;
    background: url(../img/top/section1_bg_02.png)no-repeat top / contain;
    content: '';
}


@media screen and (max-width: 767px) {

    .topMessageArea {
        --parallax-offset: 0;
        height: 934px;
        padding-top: 110px;
        margin-top: 0;
    }
    
    .topMessageArea::before {
        max-width: none;
        top: 30px;
        bottom: auto;
        margin: 0 auto;
        width: 356px;
        height: 132px;
        background: url(../img/top/section1_bg_top-sp.png)no-repeat center / contain;
        z-index: 2;
    }
    
    .topMessageArea::after {
        top: auto;
        bottom: 80px;
        margin: 0 auto;
        width: 355px;
        height: 136px;
        background: url(../img/top/section1_bg_bottom-sp.png)no-repeat center / contain;
        z-index: 2;
        opacity: 1;
    }

    .topMessageArea .relative::before {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        /* left: clamp(-90px, -24vw ,0); */
        left: 50%;
        transform: translateX(-50%);
        margin: auto;
        max-width: none;
        width: 483px;
        height: 664px;
        background: url(../img/top/section1_bg_02-sp.png)no-repeat center / contain;
        content: '';
        z-index: 1; 
    }
}

@media screen and (max-width: 485px) {

    /* .topMessageArea .relative::before {
        margin-left: -20px;
    } */
}

.topMessageBox {
    position: relative;
    width: fit-content;
    margin: 65px auto 0; 
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    z-index: 2;
}

.topMessageTtl{
    max-width: 96px;
}

.topMessageTtl img {
    max-width: 96px;
}

.topMessage{
    font-size: 24px;
    font-weight: 500;
    line-height: 2.1;
    margin: 45px clamp(40px, 7.857vw ,88px) 0 0;
}

.topDecoImg img{
    background-color: #FBF9EE;
    width: 100%;
}

@media screen and (max-width: 767px) {

    .topMessageBox {
        position: relative;
        width: fit-content;
        margin: 85px auto 0; 
        writing-mode: horizontal-tb;
    }
    
    .topMessageTtl{
        max-width: 293px;
        margin: 0 auto;
    }

    .topMessageTtl img {
        max-width: 293px;
    }
    
    .topMessage{
        font-size: 18px;
        line-height: 2;
        text-align: center;
        margin: 45px 0 0;
    }
}


/* topLeadArea */
.topLeadArea {
    position: relative;
    padding-top: 30px;
    padding-bottom: 25.34722222vw;
    background: url(../img/top/section2_bg_top_wherefrom.svg)no-repeat bottom / 100%;
    background-color: #FBF9EE;
    -webkit-filter: none;
    filter: none;
}

.safari .topLeadArea {
    background: url(../img/top/section2_bg_top_wherefrom-safari.svg)no-repeat bottom / 100%;
    background-color: #FBF9EE;
}

/* .topLeadFlex {
    display: flex;
    align-items: center;
    gap: 0 clamp(20px, 5.535vw ,62px);
} */

.topLeadFlex__contBox {
    flex: 1 1 680px;
    max-width: 680px;
}

.topLeadFlex__txt {
    font-size: 20px;
    font-weight: 500;
    line-height: 2;
}

.topLeadFlex__txt + .topLeadFlex__txt {
    margin-top: 30px;
}

/* .topLeadFlex__imgBox {
    flex: 1 1 490px;
    max-width: 490px;
    margin-right: clamp(-80px,-4.68vw,-10px);
} */

.topLeadFlex {
    max-width: 1232px;
    margin: 0 auto;
    /* padding: 0 64px 0 -16px;  */
    display: flex;
    gap: 62px; 
    justify-content: space-between;
    align-items: center;
}

.topLeadFlex__contBox {
    flex: 1;
    min-width: 0; 
}

.topLeadFlex__imgBox {
    flex-shrink: 0;
    max-width: 490px; 
}

.topLeadFlex__img {
    width: 100%;
    height: auto;
    display: block;
}
@media screen and (min-width: 768px) {

    .topLeadFlex__imgBox {
        width: 40.333%;
    }
}

@media screen and (max-width: 767px) {

    .topLeadArea {
        position: relative;
        padding-bottom: 52vw;
        background: url(../img/top/section2_bg_top_wherefrom-sp.svg)no-repeat bottom / 100%;
        background-color: #FBF9EE;
    }

    .safari .topLeadArea {
        position: relative;
        padding-bottom: 52vw;
        background: url(../img/top/section2_bg_top_wherefrom-safari-sp.svg)no-repeat bottom / 100%;
        background-color: #FBF9EE;
    }

    .topLeadFlex {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px 0;
    }
    
    .topLeadFlex__contBox {
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    .topLeadFlex__txt {
        font-size: 16px;
        line-height: 2;
    }
    
    .topLeadFlex__txt + .topLeadFlex__txt {
        margin-top: 30px;
    }
    
    /* .topLeadFlex__imgBox {
        flex: 1 1 100%;
        max-width: 280px;
        margin-right: 0;
    } */
}

.logoIntroBox {
    display: flex;
    align-items: center;
    gap: 0 clamp(30px, 6.896vw ,80px);
    padding: 40px clamp(30px, 6.896vw ,80px);
    margin-top: 80px;
    background-color: #FFFFFF;
    border-radius: 64px 5px 64px 5px;
}

.logoIntro__logoBox {
    width: 124px;
}

.logoIntro__contBox {

}

.logoIntro__ttl {
    width: 102px;
}

.logoIntro__txt {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 671px;
    margin-top: 8px;
}

@media screen and (max-width: 767px) {

    .logoIntroBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px 0;
        padding: 32px 20px 40px;
        margin: 80px auto 0;
    }
    
    .logoIntro__logoBox {
        width: 124px;
    }
    
    .logoIntro__ttl {
        width: 102px;
    }
}


/* whereFromArea */
.whereFromArea {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: clamp(-10.41666667vw ,-10.41666667vw ,-150px);
    background-color: #F7F3DE;
    z-index: 2;
}

.whereFromArea .l-inner {
    position: relative;
    z-index: 2;
}

.whereFromArea .secTtl {
    max-width: 1064px;
}

.prefWrap.--hokkaido {
    margin-top: 63px;
}

.prefWrap.--honshu {
    margin-top: 32px;
}

.prefWrap.--hokkaido .prefImgBox {
    width: 200px;
}

.prefWrap.--honshu .prefImgBox {
    width: 160px;
}

.prefImgBox {
    margin: auto;
}

.prefVegetableList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 32px;
}

.prefVegetableList__item {
    max-width: 340px;
    min-width: 290px;
    width: calc((100% - 64px)/3);
    padding: 0 0 26px;
    background-color: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
}

.prefVegetableList__item.--orange{
    border: 4px solid var(--border-color-orange);
}

.prefVegetableList__item.--wineRed{
    border: 4px solid var(--border-color-wineRed);
}

.prefVegetableList__item.--darkGreen{
    border: 4px solid var(--border-color-darkGreen);
}

.prefVegetableList__item.--navy{
    border: 4px solid var(--border-color-navy);
}

.prefVegetableList__item.--red{
    border: 4px solid var(--border-color-red);
}

.prefVegetableList__imgBox {
    width: 100%;
}

.prefVegetableList__iconBox {
    position: relative;
    width: 124px;
    margin: -50px auto 0;
    background-color: #FFFFFF;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}

.prefVegetableList__icon {
    padding: 4px;
    border-radius: 50%;
}

.prefVegetableList__contBox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #1F1D1B;
    padding: 0 20px;
    margin-top: 16px;
    line-height: 1.7;
}

.prefVegetableList__txtBox {
    margin-bottom: 24px;
}

.prefVegetableList__name {
    text-align: center;
    font-size: 20px;
    font-weight: 400;
}

.prefVegetableList__place {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    width: fit-content;
    padding-left: 20px;
    margin: 0 auto;
}

.prefVegetableList__place::before {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 13px;
    height: 15px;
    margin: auto;
    background: url(../img/top/common_btn_location.svg)no-repeat center / contain;
    content: '';
}

.prefVegetableList__btn {
    margin: 0 auto ;
}

@media screen and (max-width: 767px) {

    .whereFromArea .secTtl {
        max-width: 350px;
    }

    .prefVegetableList {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .prefVegetableList__item {
        max-width: 350px;
        min-width: auto;
        width: 100%;
    }
}


/* seasonArea */
.seasonArea {
    position: relative;
    padding-top: 17.972vw;
    background: url(../img/top/section2_bg_bottom_wherefrom.svg)no-repeat top / 100%;
    background-color: #FBF9EE;
}

.safari .seasonArea {
    background: url(../img/top/section2_bg_bottom_wherefrom-safari.svg)no-repeat top / 100%;
    background-color: #FBF9EE;
}

.profileArea .secTtl {
    max-width: 1118px;
}

.seasonCalenderBox {
    position: relative;
    margin-top: 48px;
    border-radius: 10px;
}

.seasonCalenderBox.is-visible .seasonCalenderBarList__item{
    transform: scaleX(1);
}

.seasonCalenderBox.is-visible .seasonCalenderBarList__item.--right {
    transition: transform 0.75s ease-out;
}

.seasonCalenderBox.is-visible .seasonCalenderBarList__item.--left {
    transition: transform 0.75s ease-out;
    transition-delay: 0.75s;
}

.seasonCalenderBarList {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.seasonCalenderBarList__item {
    position: absolute;
    height: 2.591%;
    background-color: #8FC31F;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.5s ease-out;
    will-change: transform;
}

.seasonCalenderBarList__item.--right {
    right: 3.448%;
    border-radius: 30px 0 0 30px;
}

.seasonCalenderBarList__item.--left {
    left: 29.482%;
    border-radius: 0 30px 30px 0;
}

.seasonCalenderBarList__item:nth-of-type(1) {
    top: 14.794%;
    left: 58.275%;
    width: 31.896%;
    border-radius: 30px;
}

.seasonCalenderBarList__item:nth-of-type(2) {
    top: 26.997%;
    width: 21.551%;
}

.seasonCalenderBarList__item:nth-of-type(3) {
    top: 26.997%;
    width: 10.344%;
}

.seasonCalenderBarList__item:nth-of-type(4) {
    top: 39.092%;
    width: 15.948%;
}

.seasonCalenderBarList__item:nth-of-type(5) {
    top: 39.092%;
    width: 10.344%;
}

.seasonCalenderBarList__item:nth-of-type(6) {
    top: 51.295%;
    width: 15.948%;
}

.seasonCalenderBarList__item:nth-of-type(7) {
    top: 51.295%;
    width: 4.827%;
}

.seasonCalenderBarList__item:nth-of-type(8) {
    top: 63.498%;
    width: 4.8279%;
}

.seasonCalenderBarList__item:nth-of-type(9) {
    top: 63.498%;
    width: 10.344%;
}

.seasonCalenderBarList__item:nth-of-type(10) {
    top: 75.701%;
    width: 4.8279%;
}

.seasonCalenderBarList__item:nth-of-type(11) {
    top: 75.701%;
    width: 21.551%;
}

.seasonCalenderBarList__item:nth-of-type(12) {
    top: 87.796%;
    width: 21.551%;
}

@media screen and (max-width: 767px) {

    .seasonArea {
        position: relative;
        padding-top: 21.3vw;
        background: url(../img/top/section2_bg_bottom_wherefrom-sp.svg)no-repeat top / 100%;
        background-color: #FBF9EE;
    }

    .safari .seasonArea {
        background: url(../img/top/section2_bg_bottom_wherefrom-safari-sp.svg)no-repeat top / 100%;
        background-color: #FBF9EE;
    }

    .seasonArea .secTtl {
        max-width: 350px;
    } 

    .seasonCalenderBox {
        text-align: center;
        width: calc(100% + 20px);
        padding-right: 20px;
        margin-top: 56px;
        border-radius: 10px 0 0 10px;
        overflow-x: scroll;
    }

    .seasonCalenderImg {
        width: 727px;
    }

    .seasonCalenderBarList {
        width: 727px;
    }
}

@media screen and (min-width: 1440px) {
    .seasonCalenderBtnList {
        position: absolute;
        top: 97px;
        left: 40px;
        width: 8.5%;
        height: 83.5%;
        display: flex;
        flex-direction: column;
        gap: 17px;
    }

    .seasonCalenderBtnList__item {
        position: relative;
        height: 96px;
        width: 96px;
    }
    .seasonCalenderBtnList__item .green-button {
        width: 33.3%;
        height: 33.3%;
    }

    .btnList__link:hover .green-button {
        transform: scale(1.25);
    }

    .btnList__link:hover .green-button-arrows {
        transform: translateX(100%) scale(0.85);
    }
}
@media screen and (min-width: 768px)  and (max-width: 1439px) {
    .seasonCalenderBtnList {
        position: absolute;
        width: calc((97 / 1160) * 100%);
        height: calc((774 / 926.38) * 100%);
        top: calc((96 / 926.38) * 100%);
        left: calc((40 / 1160) * 100%);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .seasonCalenderBtnList__item {
        position: relative;
        height: calc((774 / 926.38) * 100%);
        width: 100%;
    }
    .seasonCalenderBtnList__item .green-button {
        width: 33.3%;
        height: 33.3%;
    }
    .btnList__link:hover .green-button {
        transform: 
            scale(1.25);
    }
    .btnList__link:hover .green-button-arrows {
        transform: 
        translateX(100%)  
        scale(0.85);
    }
}
@media screen and (max-width: 767px) {
    .seasonCalenderBtnList {
        position: absolute;
        top: 61px;
        left: 26px;
        width: 60px;
        height: 485px;
        display: flex;
        flex-direction: column;
        gap: 11px;
    }
    .seasonCalenderBtnList__item {
        position: relative;
        height: 60px;
        width: 60px;
    }
    .seasonCalenderBtnList__item .green-button {
        width: 33.3%;
        height: 33.3%;
    }
    .btnList__link:hover .green-button {
        transform: scale(1.25);
    }
    .btnList__link:hover .green-button-arrows {
        transform: translateX(100%) scale(0.85);
    }
}

/* profile */
.profile {

}

.profileArea .secTtl {
    max-width: 1120px;
}

.profileListWrap{
    position: relative;
}

.profileList {
    position: static;
    width: 100vw;
    margin: 48px calc(50% - 50vw) 0;
}

.profileList .prev-arrow,
.profileList .next-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    z-index: 2;
    transform-origin: center; /* 设置变换基准点为元素中心 */
    transition: transform 0.3s ease; /* 添加过渡效果到原始元素 */
    will-change: transform; /* 优化渲染性能 */
}

.profileList .prev-arrow{
    left: -4vw;
}

.profileList .next-arrow {
    right: -4vw;
}

.profileList .prev-arrow:hover,
.profileList .next-arrow:hover {
    transform: translateY(-50%) scale(1.25); /* 保持原有位移的同时缩放 */
}

.profileList__item {
    display: flex;
    align-items: center;
    gap: 0 clamp(20px, 4.137vw ,48px);
    max-width: 1072px;
    padding: clamp(30px, 5.517vw ,64px);
    margin: 0 30px;
    background-color: #FFFFFF;
    border-radius: 20px;
}

.profileList__item.slick-slide {
    display: flex;
}

.profileList__imgBox {
    flex: 1 1 400px;
    max-width: 400px;
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.profileList__img {
    object-fit: cover;
}

.profileList__contBox {
    flex: 1 1 496px;
}

.profileList__ttl {
    font-family: var(--font-accent);
    font-size: 28px;
    font-weight: bold;
}

.profileList__txt {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 12px;
}

.profileList__btn {
    margin: 24px auto 0 0;
}

.profileFeatureList {
    display: flex;
    gap: 0 10px;
    margin-top: 48px;
}

.profileFeatureList__item {
    max-width: 152px;
    width: calc((100% - 20px)/3);
}


@media screen and (max-width: 767px) {

    .profileArea .secTtl {
        max-width: 350px;
    } 

    .profileList .prev-arrow,
    .profileList .next-arrow{
        width: 40px;
        height: 40px;
    }

    .profileList .prev-arrow{
        left: -1vw;
    }

    .profileList .next-arrow {
        right: -1vw;
    }

    .profileList__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px 0;
        max-width: 100%;
        padding: 32px 42px;
        margin: 0 20px;
    }
    
    .profileList__imgBox {
        flex: 1 1 100%;
        max-width: 200px;
    }
    
    .profileList__contBox {
        flex: 1 1 100%;
    }
    
    .profileList__ttl {
        font-size: 24px;
    }
    
    .profileList__txt {
        margin-top: 16px;
    }
    
    .profileList__btn {
        width: 262px;
        margin: 24px auto 0 auto;
    }
    
    .profileFeatureList {
        justify-content: center;
        margin-top: 32px;
    }
}


/* menuArea */
.menuArea {

}

.menuArea .secTtl {
    max-width: 784px;
} 

.menuList {
    display: flex;
    gap: 0 clamp(20px, 4.137vw ,48px);
    margin-top: 24px;
}

/* .menuList.topMenuList .menuList__imgBox {
    position: relative;
}

.menuList.topMenuList .menuList__imgBox::before {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    background: url(../img/top/section3_menu_img_frame.png)no-repeat bottom right / 100%;
    content: '';
}

.menuList.topMenuList .menuList__imgBox:hover::before {
    opacity: 1;
} */

.menuList__item {
    max-width: 352px;
    width: calc((100% - clamp(40px, 8.275vw ,96px)));
}

.menuList__link {
    display: inline-block;
    width: 100%;
}

.menuList__imgBox {
    position: relative;
    border-radius: 20px;
    /* overflow: hidden; */
}

.menuList__contBox {
    color: #1F1D1B;
    margin-top: 16px;
}

.menuList__ttl {
    height: 21px;
}
.menuList__ttl.smileballchips {
    height: 42px;
}

.menuList__ttlImg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.menuList__txt {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    margin-top: 15px;
}

@media screen and (max-width: 767px) {

    .menuArea {
        padding-bottom: 180px;
    }

    .menuArea .secTtl {
        max-width: 350px;
    } 

    .menuList {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 48px 0;
        margin-top: 56px;
    }
    
    .menuList__item {
        max-width: 350px;
        width: 100%;
    }
}


/* ----------------------------
 下層ページ 
------------------------------- */

/* 共通 */
.lowerPage {
    font-family: "Noto Sans JP", sans-serif;
}

.c-lowerTtl {
    font-size: 32px;
    font-weight: bold;
}

.c-lowerTxt {
    font-size: 20px;
    font-weight: 400;
    line-height: 2;
    margin-top: 42px;
}

@media screen and (max-width: 767px) {

    .lowerPage .kvArea {
        margin-top: 0;
    }

    .c-lowerTtl {
        font-size: 24px;
    }
    
    .c-lowerTxt {
        font-size: 18px;
        margin-top: 16px;
    }
}

/* lowerLeadArea */
.lowerLeadArea {
    padding-top: 0;
    padding-bottom: 32.916vw;
}

.lowerLeadTtl {
    width: fit-content;
    margin: auto;
}

.lowerSecTtl {
    width: fit-content;
    margin: auto;
}

.lowerLeadTxt {
    font-size: 20px;
    font-weight: 400;
    line-height: 2;
    text-align: center;
}

.lowerLeadImgList {
    display: flex;
    justify-content: center;
    gap: 0 clamp(8px, 3.103vw ,36px);
    margin-top: 48px;
}

.lowerLeadImgList__item {
    max-width: 360px;
    width: calc((100% - (clamp(8px, 3.103vw ,36px)*2))/3);
    max-height: 240px;
    aspect-ratio: 360/240;
    border-radius: 20px;
    overflow: hidden;
}

.lowerLeadImgList__img {
    height: 100%;
}

@media screen and (max-width: 767px) {

    .lowerLeadArea {
        padding-top: 60px;
        padding-bottom: 56vw;
    }

    .lowerLeadImgList {
        width: calc(100% + 20px);
        gap: 0 8px;
        margin: 32px 0 0 -10px;
    }
    
    .lowerLeadImgList__item {
        border-radius: 10px;
    }
}


/* charArea */
.charArea {
    position: relative;
    padding-top: 0;
    padding-bottom: 31.94vw;
    margin-top: -9.375vw;
}

.charBox {
    display: flex;
    align-items: center;
    gap: 0 clamp(20px,4.568vw ,53px);
    margin-top: 45px;
}

.charBox__imgBox {
    flex: 1 1 490px;
    max-width: 490px;
}

.charBox__contBox {
    flex: 1 1 575px;
    max-width: 575px;
}

.charInfoBox {
    display: flex;
    align-items: center;
    gap: 0 clamp(20px, 4.137vw ,48px);
    font-family: var(--font-accent);
    margin-top: 40px;
}

.charInfo__area {
    display: flex;
    align-items: center;
}

.charInfo__mapIcon {
    max-width: 97px;
}

.charInfo__contBox {
    position: relative;
}

.charInfo__contBox::before {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(-25px, -2.155vw ,-11px);
    width: 1.5px;
    height: 80px;
    margin: auto;
    content: '';
}

.charInfo__areaContBox {
    margin-left: 27px;
}

.charInfo__areaContBox::before {
    display: none;
}

.charInfo__cat,
.charInfo__cont {
    display: block;
    font-size: 20px;
    line-height: 2;
}

.charInfo__cont {
    display: block;
}

@media screen and (max-width: 1205px) {

    .charInfoBox {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .charInfo__contBox {
        position: relative;
        display: flex;
        justify-content: center;
        padding-top: 16px;
        margin-top: 16px;
    }

    .charInfo__contBox::before {
        bottom: auto;
        left: 0;
        width: 100%;
        height: 1.5px;
    }

    .charInfo__areaContBox {
        display: block;
        padding-top: 0;
        margin-top: 0;
    }

    .charInfo__areaContBox .charInfo__cont {
        margin-left: 0;
    }

    .charInfo__harvest,
    .charInfo__sale {
        width: 100%;
    }

    .charInfo__cont {
        margin-left: 8px;
    }

    
}

@media screen and (max-width: 767px) {

    .charArea {
        padding-bottom: 73.94vw;
    }

    .charBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px 0;
        margin-top: 45px;
    }

    .charBox__imgBox {
        flex: 1 1 100%;
    }

    .charBox__contBox {
        flex: 1 1 100%;
    }

}



/* recommendArea */
.recommendArea {
    padding-top: 160px;
}

.recommendBox {
    display: flex;
    align-items: center;
    gap: 0 clamp(30px, 5.517vw, 64px);
    margin-top: clamp(14px, calc(2vw + 10px), 50px);
}

.recommendBox__contBox {
    flex: 1 1 512px;
    max-width: 512px;
}

.recommendBox__imgBox {
    flex: 1 1 640px;
    max-width: 640px;
    margin-right: -40px;
}

.recommendArea .menuList {
    margin-top: 80px;
}

.recommendArea .menuList__contBox {
    color: #FFFFFF;
}

@media screen and (max-width: 767px) {

    .recommendArea {
        padding-top: 80px;
        padding-bottom: 40px;
    }
    
    .recommendBox {
        display: flex;
        flex-direction: column;
        gap: 40px 0;
        margin-top: 40px;
    }
    
    .recommendBox__contBox {
        flex: 1 1 100%;
    }
    
    .recommendBox__imgBox {
        flex: 1 1 100%;
        max-width: 512px;
        margin-right: 0;
    }
    
}


/* aboutArea */
.aboutArea {
    padding-top: 36.805vw;
    padding-bottom: 140px;
    margin-top: -19.4vw;
}

.aboutViewBox {
    max-width: 1312px;
    margin: 80px auto 0;
    border-radius: 10px;
    overflow: hidden;
}

.aboutList {
    margin-top: 107px;
}

.aboutList__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 30px;
}

.aboutList__item + .aboutList__item {
    flex-direction: row-reverse;
    margin-top: 56px;
}

.aboutList__item:nth-of-type(1) .aboutList__imgBox {
    flex: 1 1 509px;
    max-width: 509px;
}

.aboutList__item:nth-of-type(2) .aboutList__imgBox {
    flex: 1 1 466px;
    max-width: 466px;
    margin-left: clamp(6px, 2.43055vw, 35px);
}

.aboutList__contBox {
    flex: 1 1 576px;
    max-width: 576px;
}

@media screen and (max-width: 767px) {

    .aboutArea {
        padding-bottom: 70px;
        margin-top: -8vw;
    }
    
    .aboutViewBox {
        margin: 56px auto 0;
    }
    
    .aboutList {
        margin-top: 56px;
    }
    
    .aboutList__item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 40px 0;
    }
    
    .aboutList__item + .aboutList__item {
        flex-direction: column;
    }
    
    .aboutList__item:nth-of-type(1) .aboutList__imgBox {
        flex: 1 1 100%;
    }
    
    .aboutList__item:nth-of-type(2) .aboutList__imgBox {
        flex: 1 1 100%;
    }
    
    .aboutList__contBox {
        flex: 1 1 100%;
    }
    
}


/* mastushima */

#matsushima {
    background-color: #261F38;
    color: #FFFFFF;
}

#matsushima .kvArea {
    z-index: 1;
    max-width: calc(100% - 60px);
    width: 1312px;
    margin: 0 auto;
}

#matsushima .kvArea::before {
    display: block;
    position: absolute;
    bottom: clamp(-490px, -34.027vw, -200px);
    right: max(0px, calc(50% - 720px));
    width: clamp(151px, 29.16vw, 420px);
    height: clamp(201px, 38.680vw, 557px);
    margin: auto;
    background: url(../img/matsushima/kv_bg_hakusai.png)no-repeat center / 100%;
    content: '';
    z-index: -1;
}

#matsushima .c-lowerTtl {
    color: #CEC8C1;
}

#matsushima .lowerLeadArea {
    position: relative;
    padding-top: 120px;
    background: url(../img/matsushima/bg_wave_before.svg)no-repeat bottom / 100%;
}

#matsushima .lowerLeadArea .relative {
    /* z-index: 1; */
}

/* #matsushima .lowerLeadArea::before {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: clamp(250px, 29.16vw, 420px);
    height: clamp(331px, 38.680vw, 557px);
    margin: auto;
    background: url(../img/matsushima/kv_bg_hakusai.png)no-repeat center / 100%;
    content: '';
} */

#matsushima .lowerLeadTtl {
    max-width: 616px;
}

#matsushima .lowerLeadTxt {
    margin-top: 40px;
}

#matsushima .charArea {
    background: url(../img/matsushima/section2_img_03.png)no-repeat bottom / 100%;
    background-color: #3C354C;
}

#matsushima .charArea .lowerSecTtl {
    max-width: 616px;
}

#matsushima .charBox__ttl {
    color: #CEC8C1;
}

#matsushima .charInfo__contBox::before {
    background: url(../img/matsushima/line_dot.svg)no-repeat center / 100%;
}

#matsushima .charInfo__mapIcon {
    width: 92px;
}

#matsushima .recommendArea {
    background-color: #3C354C;
}

#matsushima .recommendArea .lowerSecTtl {
    max-width: 840px;
}

#matsushima .aboutArea {
    background: url(../img/matsushima/bg_wave_after.svg)no-repeat top / 100%;
}

#matsushima .aboutArea .lowerSecTtl {
    max-width: 560px;
}

@media screen and (max-width: 1205px) {

    #matsushima .charInfo__contBox::before {
        background: url(../img/matsushima/line_dot-sp.svg)no-repeat center / 100%;
    }
}

@media screen and (max-width: 767px) {
    
    #matsushima .kvArea {
        max-width: 100%;
    }

    #matsushima .kvArea::before {
        display: block;
        position: absolute;
        bottom: -170px;
        right: 0;
        width: 151px;
        height: 201px;
        margin: auto;
        background: url(../img/matsushima/kv_bg_hakusai.png)no-repeat center / 100%;
        content: '';
        z-index: -1;
    }

    #matsushima .lowerLeadArea {
        background: url(../img/matsushima/bg_wave_before-sp.svg)no-repeat bottom / 100%;
    }

    #matsushima .lowerLeadTtl {
        margin-top: -30px;
        max-width: 350px;
    }

    #matsushima .charArea {
        background: url(../img/matsushima/section2_img_03-sp.png)no-repeat bottom / 100%;
        background-color: #3C354C;
    }
    #matsushima .charArea .lowerSecTtl {
        max-width: 239px;
    }

    #matsushima .recommendArea .lowerSecTtl {
        max-width: 315px;
    }

    #matsushima .aboutArea {
        background: url(../img/matsushima/bg_wave_after-sp.svg)no-repeat top / 100%;
    }

    #matsushima .aboutArea .lowerSecTtl {
        max-width: 236px;
    }
}