@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.unagi-mv {
    width: 100%;
}

html {
    scroll-behavior: smooth !important;
}

.unagi-main {
    padding-top: clamp(5rem, 1.757rem + 6.757vw, 10rem);
}

.logo-top-fixed {
    top: clamp(1.6rem, 0.917rem + 1.707vw, 3rem) !important;
}

.unagi-white-spacing {
    height: clamp(5rem, 1.757rem + 6.757vw, 10rem);
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 9;
    pointer-events: none;
    user-select: none;
    transition: background .3s ease-in;
}

.unagi-white-spacing.hide {
    background: transparent;
}

.unagi-mv img {
    width: 100%;
    height: auto;
}

.unagi-section3 h3 {
    color: var(--color-green);
}

.disp-pc {
    display: block;
}

.disp-sp {
    display: none;
}

.font-32-u {
    font-size: clamp(2rem, 1.415rem + 1.463vw, 3.2rem);
    font-weight: 700;
}

.font-24-u {
    font-size: 2.4rem;
    font-weight: 700;
}

.ur-cont {
    width: 100%;
    padding: 2rem 1.5rem;
    background: #F4EEE5;
}

.u-more-a {
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 400;
    cursor: pointer;
}

.u-more-a:hover {
    text-decoration: underline;
}

.u-more-rec-b {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: clamp(8rem, 5.073rem + 7.317vw, 14rem) 0 15rem 0;
}

.u-green-div {
    display: block;
    position: relative;
    width: 100%;
    padding: 5rem 5rem 5rem 16rem;
    background-color: var(--color-green);
}

.u-green-div p {
    color: #fff;
}

.u-ar-b {
    background: #fff !important;
}

.u-abs {
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    width: 20rem;
}

.ug-div2 {
    display: block;
    width: 100%;
    background: var(--color-green);
    margin-top: clamp(6rem, 3.561rem + 6.098vw, 11rem);
}

.ufd2-img {
    width: 100%;
    display: flex;
}

.ufd2-img img {
    width: 100%;
    height: auto;
}

.ufd2-text {
    padding: 2rem 3rem 2rem 0;
}

.unagi-section4 {
    padding: clamp(8rem, 6.049rem + 4.878vw, 12rem) 1.6rem 10rem 1.6rem;
}

.u-abs img {
    width: 100%;
    height: auto;
}

.font-32-24-u {
    font-size: clamp(2.4rem, 2.01rem + 0.976vw, 3.2rem);
    font-weight: 700;
}

.font-48-u {
    font-size: clamp(3.2rem, 2.42rem + 1.951vw, 4.8rem);
    font-weight: 700;
}

.font-16-u {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 200%;
}

.font-14-u {
    font-size: 1.4rem;
    font-weight: 300;
}

.unagi-section1 {
    padding: clamp(5rem, 2.561rem + 6.098vw, 10rem) 1.6rem;
    background-color: #F4EEE5;
}

.gap-8 {
    gap: clamp(4rem, 2.049rem + 4.878vw, 8rem);
}

.bg-green-text {
    background-color: var(--color-green);
    padding: .2rem 2rem;
    width: fit-content;
}

.u-flex-5-5 .u-flex-left {
    width: 50%;
}

.u-flex-5-5 .u-flex-right {
    width: 50%;
}

.flex-image-box {
    display: flex;
}

.flex-image-box img {
    width: 100%;
    height: auto;
}

.gap4 {
    gap: 4rem;
}

.pc-w-70u {
    width: 77%;
}

.unagi-section2 {
    padding: clamp(6rem, 2.585rem + 8.537vw, 13rem) 1.6rem;
}

.unagi-header {
    gap: 1.4rem;
}

.unagi-header span {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--color-green);
}

.unagi-header h2 {
    font-size: clamp(2.4rem, 1.62rem + 1.951vw, 4rem);
    font-weight: 700;
}

.u-sec2-cards {
    gap: 4rem;
    margin-top: clamp(5rem, 3.537rem + 3.659vw, 8rem);
}

.u-sec2-card {
    padding: 4rem;
    background-color: #F8F6F2;
    width: 100%;
    gap: 5rem;
}

.u-sec2-card-img {
    width: 50%;
}

.u-sec2-card-img img {
    width: 100%;
    height: auto;
}

.u-sec2-card-text {
    width: 60%;
}

.u-br-top {
    width: 100%;
    padding-top: 2rem;
    margin-top: 1.2rem;
    border-top: .1rem solid #000;
}

.u-bg-span {
    display: inline-block;
    padding: .4rem 1.3rem;
    border: .1rem solid #000;
    background-color: #F4EEE5;
}

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

.coupon-u {
    width: 8.4rem;
    height: auto;
}

.u-price-flex {
    align-items: baseline;
}

.font-48-u-f {
    font-size: 4.8rem;
    font-weight: 700;
}

.font-18-u {
    font-size: 1.8rem;
    font-weight: 700;
}

.justify-right {
    align-items: flex-end;
}

.justify-right-row {
    justify-content: flex-end;
}

.umt-16 {
    margin-top: clamp(9rem, 5.585rem + 8.537vw, 16rem);
}

.u-grid-3 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3rem;
    row-gap: 6rem;
    margin-top: 12rem;
}

.ugc-img {
    display: flex;
}

.ugrid-card a {
    margin-top: auto;
}

.ugc-img img {
    width: 100%;
    height: auto;
}

.font-32-u-f {
    font-size: 3.2rem;
    font-weight: 700;
}

.font-18-us {
    font-size: 1.8rem;
    font-weight: 400;
}

.umtm {
    margin-top: .5rem;
}

.u-date {
    padding: .5rem 1.6rem !important;
}

.unagi-section3 {
    padding: clamp(6rem, 4.049rem + 4.878vw, 10rem) 1.6rem clamp(6rem, 4.049rem + 4.878vw, 10rem) 1.6rem;
    background-color: #F4EEE5;
}

.pdt5 {
    padding-top: 3rem !important;
}

.sec3-up {
    text-align: center;
    margin-top: clamp(5rem, 3.537rem + 3.659vw, 8rem);
}

.u-topics-wrapper {
    margin-top: clamp(5rem, 3.537rem + 3.659vw, 8rem);
    gap: clamp(4rem, 3.024rem + 2.439vw, 6rem);
    width: 100%;
}

.umt-8 {
    margin-top: clamp(5rem, 3.537rem + 3.659vw, 8rem);
}

.u-t-img {
    width: 40%;
    display: flex;
}

.u-t-img img {
    width: 100%;
    height: auto;
}

.u-topics-card {
    width: 100%;
    background-color: #fff;
}

.u-t-text {
    width: 60%;
    padding: 0 clamp(3rem, 1.049rem + 4.878vw, 7rem);
    display: flex;
}

.green-spans-u {
    align-items: baseline;
    gap: 1rem;
}

.green-spans-u span {
    color: var(--color-green);
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

.font16-700u {
    font-weight: 700;
    font-size: 1.6rem;
    color: #262626;
}

.u-recipe-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4rem;
    row-gap: 6rem;
}

.urg-item {
    gap: 3rem;
}

.urg-img {
    display: flex;
}

.urg-img img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

.green-layer {
    background: #00633D;
    padding: 2.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rem;
}

.white-card {
    background: #fff;
    color: #00633D;
    width: fit-content;
    padding: .1rem .15rem .25rem .15rem;
}

.white-card p {
    color: #00633D;
    text-align: center;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.green-layer h4 {
    color: #FFF;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 48px;
}

.green-layer h4 span {
    font-size: 4.8rem;
}

.page-anchor-links {
    margin-top: 11rem;
}

.pal-one,
.pal-two {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pal-one img {
    width: 100%;
    height: auto;
    transition: transform .3s ease-in;
}

.pal-two img {
    width: 100%;
    height: auto;
    transition: transform .3s ease-in;
}

.pal-one img:hover {
    transform: scale(1.1);
}

.pal-two img:hover {
    transform: scale(1.1);
}

.unagi-header h4 {
    margin-top: 4rem;
    color: #262626;
    text-align: center;
    font-size: 3.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
}

.mt-spacers {
    margin-top: 15rem;
}

@media screen and (max-width: 1060px) {
    .u-green-div {
        padding: 6rem 4rem 4rem 8rem;
    }

    .u-abs {
        right: 3%;
    }
}

@media screen and (max-width: 1040px) {
    .u-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 7rem;
    }
}

@media screen and (max-width: 1018px) {
    .unagi-section4 {
        padding: clamp(8rem, 6.049rem + 4.878vw, 12rem) 1.6rem 0rem 1.6rem;
    }
}

@media screen and (max-width: 998px) {
    .u-abs {
        right: 3%;
    }

    .u-sec2-card-img {
        width: 45%;
    }

    .u-sec2-card-text {
        width: 55%;
    }
}

.u-abs-sm {
    display: none;
}

@media screen and (max-width: 972px) {
    .u-abs {
        width: 16.5rem;
        top: 17%;
        transform: translateY(-50%);
    }

    .u-abs-sm {
        display: block;
        position: relative;
        width: 107%;
        transform: translateX(-3%);
    }

    .u-abs-sm img {
        width: 100%;
        height: auto;
    }

    .u-t-text .flex-column.gap4 {
        gap: 2rem !important;
    }
}

@media screen and (max-width: 812px) {
    .u-br-top .flex-row.gap-2 {
        flex-direction: column;
    }

    .u-br-top .flex-row.gap-2 .flex-row.align-center.gap-1 {
        justify-content: flex-start !important;
    }

    .u-sec2-card-text .flex-row.justify-between.align-center {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
}

.flex-row.justify-right-row a.btn-main {
    width: 30rem !important;
}

.disp-pc-flex {
    display: flex;
}

.disp-sp-flex {
    display: none;
}

@media screen and (max-width: 768px) {
    .pdt5 {
        padding-top: 1rem !important;
    }

    .mt-spacers {
        margin-top: 8rem;
    }

    .font-18-us {
        font-size: 1.4rem;
        font-weight: 300;
    }

    .font-18-u {
        font-size: 1.4rem;
        font-weight: 700;
    }

    .font-32-u-f {
        font-size: 2rem;
    }

    .u-price-flex {
        flex-wrap: wrap;
    }

    .ugrid-card .flex-column.gap-1 {
        gap: 0 !important;
    }

    .green-l-line {
        width: 100%;
        background: rgba(255, 255, 255, 0.20);
        height: 1px;
    }

    .green-layer {
        flex-direction: column;
        gap: 2.4rem;
        align-items: flex-start;
        padding: 2rem;
    }


    .green-layer h4 {
        color: #FFF;
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 30px;
    }

    .green-layer h4 span {
        font-size: 3.2rem;
    }

    .unagi-header h4 {
        font-size: 1.8rem;
        line-height: 29px;
        margin-top: .6rem;
    }

    .page-anchor-links {
        flex-direction: column;
        margin-top: 2rem;
        padding: 0 1.4rem;
    }

    .ugrid-card a.btn-main.btn-green {
        padding: 1.15rem 1rem 1.15rem 1rem !important;
        gap: .5rem !important;

    }

    .ugrid-card a.btn-main.btn-green .btn-bg {
        padding: .7em !important;
    }

    .ugrid-card a span.font18.fw700 {
        font-size: 1.3rem !important;
    }

    .disp-pc-flex {
        display: none;
    }

    .disp-sp-flex {
        display: flex;
    }

    .sp-rev-col-flex {
        flex-direction: column-reverse !important;
    }

    .u-topics-card {
        flex-direction: column;
        gap: 3rem;
    }

    .u-t-text,
    .u-t-img {
        width: 100%;
    }

    .u-t-text {
        padding: 2rem clamp(3rem, 1.049rem + 4.878vw, 7rem) 0 clamp(3rem, 1.049rem + 4.878vw, 7rem);
    }

    .u-flex-5-5 .u-flex-left {
        width: 100%;
    }

    .sp-mt4 {
        margin-top: 3rem !important;
    }

    .u-sec2-card {
        flex-direction: column;
        padding: 2rem;
    }

    .u-sec2-card-img {
        width: 100%;
    }

    .u-sec2-card-text {
        width: 100%;
    }

    .u-flex-5-5 .u-flex-right {
        width: 100%;
    }

    .u-sec2-card-text .flex-row.justify-between.align-center {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .flex-row.justify-right-row a.btn-main {
        width: 100% !important;
        max-width: 100% !important;
    }

    .u-sp-col {
        flex-direction: column;
    }

    .disp-pc {
        display: none;
    }

    .disp-sp {
        display: block;
    }

    .u-abs-sm {
        width: 112%;
        transform: translateX(-5.5%);
    }

    .u-recipe-grid {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 5rem;
    }

    .urg-item.flex-column {
        gap: 2rem;
    }

    .u-grid-3 {
        /* grid-template-columns: repeat(1, 1fr); */
        margin-top: 5rem;
        column-gap: 1rem !important;
        row-gap: 2.6rem !important;
    }

    .pc-w-70u {
        width: 100%;
    }

    .u-sec2-card {
        gap: 3.6rem;
    }

    .u-more-rec-b {
        margin: clamp(6rem, 5.073rem + 7.317vw, 14rem) 0 9rem 0;
    }

    .sm-jus-between {
        width: 100%;
        justify-content: space-between !important;
    }

    .ufd2-text {
        padding: 1.6rem;
    }

    .sp-align-left {
        align-items: flex-start !important;
    }

    .bg-green-text.disp-sp {
        background: transparent;
    }

    .bg-green-text.disp-sp h2 {
        width: fit-content;
        background-color: transparent;
    }

    .bg-green-text.disp-sp h2 span {
        background-color: var(--color-green);
        display: inline-block;
    }

    .bg-green-text.disp-sp h2 span:not(:last-child) {
        margin-bottom: .4rem;
    }

    .sp-text-a-c {
        text-align: center !important;
    }

}

@media screen and (max-width: 480px) {
    .bg-green-text {
        padding: .2rem .4rem;
    }

    .u-abs-sm {
        width: 114%;
        transform: translateX(-5.9%) translateY(-4rem);
    }

    .sp-mt-u-minus {
        margin-top: -4rem !important;
    }

    .u-green-div {
        padding: 3rem 1.6rem 2rem 1.6rem;
    }

    .arrow-btn.u-ar-b.uarbsm {
        flex-shrink: 0;
    }

    .price-sp-col-u {
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    .sec3-up {
        text-align: left !important
    }
}