@charset "UTF-8";
.main-container {
    --lp-c-main: var(--lp-c-accent);
    --lp-c-main-sub: var(--lp-c-accent-sub);
}
/* --------------------------------------------------------------------------
SECTION
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .c-hero-img {
        background-image: url("../img/first-miso/hero_img.png");
    }
}
@media all and (max-width: 767px) {
    .c-hero-img {
        background-image: url("../img/first-miso/hero_img_sp.png");
    }
}

/* --------------------------------------------------------------------------
INTRO
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .intro-section {
    }
    .intro-section__inner {
    }
    .intro-section__body {
    }
    .intro-heading {
    }
    .intro-heading__inner {
        text-align: center;
    }
    .intro-heading__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(20 / var(--lp-font) * 1em);
        font-weight: 600;
        font-feature-settings: "palt";
        line-height: 2;
        letter-spacing: calc(50 / 1000 * 1em);
    }
}
@media all and (max-width: 767px) {
    .intro-section {
    }
    .intro-section__inner {
    }
    .intro-section__body {
    }
    .intro-heading {
    }
    .intro-heading__inner {
        text-align: center;
    }
    .intro-heading__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(32 / 750 * 100vw);
        font-weight: bold;
        font-feature-settings: "palt";
        line-height: 2;
        letter-spacing: calc(20 / 1000 * 1em);
    }
}

/* --------------------------------------------------------------------------
WHATS
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .whats-section {
    }
    .whats-section__inner {
    }
    .whats-section__body {
        padding-top: calc(82 / var(--lp-font) * 1em);
        padding-bottom: calc(122 / var(--lp-font) * 1em);
    }
    .whats-section .l-section__column {
        flex-direction: row;
        gap: calc(55 / var(--lp-font) * 1em);
    }
    .whats-intro {
        max-width: calc(1058 / var(--lp-font) * 1em);
        margin-right: calc(-176 / var(--lp-font) * 1em);
    }
    .whats-intro-img {
    }
    .whats-read {
        margin-top: calc(46 / var(--lp-font) * 1em);
    }
    .whats-read .c-txt {
        line-height: 2;
        font-feature-settings: "palt";
        letter-spacing: calc(60 / 1000 * 1em);
    }
    .whats-miso-list {
        display: flex;
        gap: calc(18 / var(--lp-font) * 1em);
        margin-top: calc(38 / var(--lp-font) * 1em);
    }
    .whats-miso-list-item {
        width: calc((100% - (18 / var(--lp-font) * 1em) * 3) / 4);
    }
    .whats-miso-card {
        position: relative;
        padding-top: calc(87 / var(--lp-font) * 1em);
    }
    .whats-miso-card__inner {
        background: rgba(255, 255, 255, 0.5);
        box-shadow: var(--lp-shadow-006);
    }
    .whats-miso-card__body {
        padding-top: calc(70 / var(--lp-font) * 1em);
        padding-bottom: calc(30 / var(--lp-font) * 1em);
    }
    .whats-miso-card-img {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: calc(160 / var(--lp-font) * 1em);
    }
    .whats-miso-card-read {
    }
    .whats-miso-card-read-heading {
        text-align: center;
    }
    .whats-miso-card-read-heading__label {
        color: var(--lp-c-accent);
        font-family: var(--lp-f-mincho);
        font-size: calc(24 / var(--lp-font) * 1em);
        font-weight: 600;
        font-feature-settings: "palt";
        letter-spacing: calc(50 / 1000 * 1em);
    }
    .whats-miso-card-read-text {
        text-align: center;
        margin-top: calc(14 / var(--lp-font) * 1em);
    }
    .whats-miso-card-read-text__label {
        font-family: var(--lp-f-gothic);
        font-size: calc(14 / var(--lp-font) * 1em);
        font-weight: 500;
        line-height: calc(19.6 / 14);
    }
}
@media all and (max-width: 767px) {
    .whats-section {
    }
    .whats-section__inner {
    }
    .whats-section__body {
        padding-top: calc(82 / 750 * 100vw);
        padding-bottom: calc(122 / 750 * 100vw);
    }
    .whats-section .section-heading-lv2__inner {
        flex-direction: row-reverse;
    }
    .whats-section .l-section__column {
        flex-direction: row;
        gap: calc(18 / 750 * 100vw);
    }
    .whats-intro {
        max-width: calc(588 / 750 * 100vw);
    }
    .whats-intro-img {
    }
    .whats-read {
        margin-top: calc(54 / 750 * 100vw);
        width: calc(670 / 750 * 100vw);
        position: relative;
        left: calc(-124 / 750 * 100vw);
    }
    .whats-read .c-txt {
        line-height: 2;
        font-feature-settings: normal;
    }
    .whats-miso-list {
        display: flex;
        flex-wrap: wrap;
        gap: calc(6 / 750 * 100vw) calc(30 / 750 * 100vw);
        margin-top: calc(38 / 750 * 100vw);
    }
    .whats-miso-list-item {
        width: calc((100% - (30 / 750 * 100vw)) / 2);
    }
    .whats-miso-card {
        position: relative;
        padding-top: calc(118 / 750 * 100vw);
    }
    .whats-miso-card__inner {
        background: rgba(255, 255, 255, 0.5);
        box-shadow: var(--lp-shadow-006);
    }
    .whats-miso-card__body {
        padding-top: calc(92 / 750 * 100vw);
        padding-bottom: calc(30 / 750 * 100vw);
    }
    .whats-miso-card-img {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: calc(221 / 750 * 100vw);
    }
    .whats-miso-card-read {
    }
    .whats-miso-card-read-heading {
        text-align: center;
    }
    .whats-miso-card-read-heading__label {
        color: var(--lp-c-accent);
        font-family: var(--lp-f-mincho);
        font-size: calc(32 / 750 * 100vw);
        font-weight: 600;
        font-feature-settings: "palt";
        letter-spacing: calc(50 / 1000 * 1em);
    }
    .whats-miso-card-read-text {
        text-align: center;
        margin-top: calc(20 / 750 * 100vw);
    }
    .whats-miso-card-read-text__label {
        font-family: var(--lp-f-gothic);
        font-size: calc(24 / 750 * 100vw);
        font-weight: 400;
        line-height: calc(36 / 24);
    }
}

/* --------------------------------------------------------------------------
ABOUT
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .about-section {
        background: var(--lp-sec-bg);
    }
    .about-section__inner {
    }
    .about-section__body {
        padding-top: calc(112 / var(--lp-font) * 1em);
        padding-bottom: calc(110 / var(--lp-font) * 1em);
    }
    .about-intro {
    }
    .about-section .l-section__column {
        gap: calc(20 / var(--lp-font) * 1em);
    }
    .about-section .l-section__column .l-section__content {
        flex-grow: 1;
        margin-left: calc(100 / var(--lp-font) * 1em);
    }
    .about-intro-heading {
        text-align: center;
        margin-bottom: calc(52 / var(--lp-font) * 1em);
    }
    .about-intro-heading__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(28 / var(--lp-font) * 1em);
        font-weight: 600;
        font-feature-settings: "palt";
        letter-spacing: calc(60 / 1000 * 1em);
    }
    .about-intro-heading__label--accent {
        color: var(--lp-c-accent);
    }
    .about-intro-material-list__container {
    }
    .about-intro-material-list {
        display: flex;
        justify-content: center;
        gap: calc(64 / var(--lp-font) * 1em);
    }
    .about-intro-material-list-item {
        width: calc(128 / var(--lp-font) * 1em);
        flex-shrink: 0;
    }
    .about-intro-material-list-item + .about-intro-material-list-item {
        position: relative;
    }
    .about-intro-material-list-item + .about-intro-material-list-item::before {
        content: "+";
        display: block;
        font-size: calc(28 / var(--lp-font) * 1em);
        font-family: var(--lp-f-mincho);
        line-height: 1;
        position: absolute;
        left: 0;
        top: 0;
        margin-top: calc(54 / 28 * 1em);
        margin-left: calc(-20 / 28 * 1em);
        transform: translateX(-100%);
    }
    .about-intro-material-card {
    }
    .about-intro-material-card-img {
    }
    .about-intro-material-card-text {
        text-align: center;
        margin-top: calc(18 / var(--lp-font) * 1em);
    }
    .about-intro-material-card-text__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(24 / var(--lp-font) * 1em);
        font-weight: 600;
        line-height: 1;
    }
    .about-read {
        margin-top: calc(36 / var(--lp-font) * 1em);
    }
    .about-read-text {
        text-align: center;
    }
    .about-read-text .c-txt {
        line-height: 2;
    }
    .about-read-class-list__container {
        margin-top: calc(48 / var(--lp-font) * 1em);
    }
    .about-read-class-list {
        display: flex;
        gap: calc(25 / var(--lp-font) * 1em);
        --miso-color-01: #cd9c4a;
        --miso-color-02: #bd7839;
        --miso-color-03: #643008;
        --miso-color-04: #3d1d07;
    }
    .about-read-class-list-item {
        width: calc((100% - (25 / var(--lp-font) * 1em) * 2) / 3);
    }
    .about-read-class-list-item--material {
    }
    .class-card-content {
    }
    .class-card {
        min-height: calc(441 / var(--lp-font) * 1em);
        height: 0;
    }
    .class-card__inner {
        height: 100%;
        background: var(--lp-c-white);
        padding: 0 calc(24 / var(--lp-font) * 1em);
        box-shadow: var(--lp-shadow-006);
    }
    .class-card__body {
        height: 100%;
        padding-top: calc(20 / var(--lp-font) * 1em);
        padding-bottom: calc(24 / var(--lp-font) * 1em);
    }
    .class-card-heading {
        position: relative;
    }
    .class-card-heading::before {
        content: "";
        display: block;
        width: 1px;
        height: calc(30 / var(--lp-font) * 1em);
        background: var(--lp-c-black);
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50% , 100%);
    }
    .class-card-headng__inner {
        text-align: center;
        background: var(--lp-c-black);
        padding: calc(5 / var(--lp-font) * 1em) calc(20 / var(--lp-font) * 1em);
    }
    .class-card-heading__label {
        color: var(--lp-c-white);
        font-family: var(--lp-f-mincho);
        font-size: calc(20 / var(--lp-font) * 1em);
        font-feature-settings: "palt";
        letter-spacing: calc(50 / 1000 * 1em);
        line-height: 1.5;
    }
    .class-card__main {
        position: relative;
        margin-top: calc(20 / var(--lp-font) * 1em);
    }
    .class-card-kinds-list {
        display: flex;
        justify-content: space-between;
        gap: calc(15 / var(--lp-font) * 1em);
    }
    .class-card-kinds-list-item {
        width: calc(64 / var(--lp-font) * 1em);
        position: relative;
    }
    .class-card-kinds-list-item::before {
        content: "";
        display: block;
        background: var(--lp-c-black);
        width: 100%;
        height: 1px;
        position: absolute;
        top: 0;
    }
    .class-card-kinds-list-item:first-child::before {
        left: 0;
        transform: translateX(50%);
    }
    .class-card-kinds-list-item:last-child::before {
        right: 0;
        transform: translateX(-50%);
    }
    .class-card-kinds-list-item:nth-child(2)::before {
        width: calc(150 / var(--lp-font) * 1em);
        left: 50%;
        transform: translateX(-50%);
    }
    /* 原料 */
    .class-card-kinds-list-item--kome {
        --thema-color: var(--miso-color-02);
    }
    .class-card-kinds-list-item--mugi {
        --thema-color: var(--miso-color-03);
    }
    .class-card-kinds-list-item--mame {
        --thema-color: var(--miso-color-04);
    }
    /* 味 */
    .class-card-kinds-list-item--01 {
        --thema-color: var(--miso-color-02);
    }
    .class-card-kinds-list-item--02 {
        --thema-color: var(--miso-color-03);
        width:calc(132 / var(--lp-font) * 1em);
    }
    .class-card-kinds-list-item--03 {
        --thema-color: var(--miso-color-04);
    }
    /* 色 */
    .class-card-kinds-list-item--white {
        --thema-color: var(--miso-color-01);
    }
    .class-card-kinds-list-item--yellow {
        --thema-color: var(--miso-color-02);
    }
    .class-card-kinds-list-item--red {
        --thema-color: var(--miso-color-03);
    }
    .class-kinds-card {
        position: relative;
        padding-top: calc(40 / var(--lp-font) * 1em);
    }
    .class-card-kinds-list-item--02 .class-kinds-card {
        padding-top: calc(35 / var(--lp-font) * 1em);
    }
    .class-kinds-card::before {
        content: "";
        display: block;
        background: var(--lp-c-black);
        width: 1px;
        height: calc(36 / var(--lp-font) * 1em);
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .class-card-kinds-list-item--02 .class-kinds-card::before {
        height: calc(28 / var(--lp-font) * 1em);
    }
    .class-kinds-card-heading {
    }
    .class-kinds-card-heading-ico {
    }
    .class-kinds-card-heading-ico__inner {
    }
    .class-kinds-card-heading-text {
        text-align: center;
        margin-top: calc(6 / var(--lp-font) * 1em);
    }
    .class-kinds-card-heading-text__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(12 / var(--lp-font) * 1em);
        font-weight: 600;
        font-feature-settings: "palt";
        letter-spacing: calc(50 / 1000 * 1em);
        line-height: calc(16 / 12);
    }
    .class-kinds-card-text {
        display: flex;
        justify-content: center;
        align-items: start;
        margin-top: calc(16 / var(--lp-font) * 1em);
    }
    .class-kinds-card-text__label {
        color: var(--thema-color);
        font-family: var(--lp-f-mincho);
        font-size: calc(24 / var(--lp-font) * 1em);
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }
    .class-card-material-text {
        text-align: center;
        position: relative;
        margin-top: calc(20 / var(--lp-font) * 1em);
        padding-top: calc(6 / var(--lp-font) * 1em);
    }
    .class-card-material-text::before {
        content: "";
        display: block;
        background: var(--lp-c-black);
        width: 1px;
        height: calc(25 / var(--lp-font) * 1em);
        position: absolute;
        left: 50%;
        transform: translate(-50% , -100%);
        top: 0;
    }
    .class-card-material-text__sub {
        font-family: var(--lp-f-mincho);
        font-size: calc(12 / var(--lp-font) * 1em);
        font-feature-settings: "palt";
        letter-spacing: calc(50 / 1000 * 1em);
        line-height: 1.4;
    }
    .class-card-material-text__label {
        color: var(--miso-color-01);
        font-family: var(--lp-f-mincho);
        font-size: calc(24 / var(--lp-font) * 1em);
        font-feature-settings: "palt";
        letter-spacing: calc(50 / 1000 * 1em);
        line-height: 1.4;
    }
    .class-card-content-read {
        margin-top: calc(16 / var(--lp-font) * 1em);
    }
    .class-card-content-read-text {
        font-family: var(--lp-f-gothic);
        font-size: calc(16 / var(--lp-font) * 1em);
        line-height: 1.6;
    }

    /* 原料 */
    .about-read-class-list-item--material .class-kinds-card {
        padding-bottom: calc(31 / var(--lp-font) * 1em);
    }
    .about-read-class-list-item--material .class-kinds-card::after {
        content: "";
        display: block;
        background: var(--lp-c-black);
        width: 1px;
        height: calc(24 / var(--lp-font) * 1em);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .about-read-class-list-item--material .class-card-kinds-list-item::after {
        content: "";
        display: block;
        background: var(--lp-c-black);
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0;
    }
    .about-read-class-list-item--material .class-card-kinds-list-item:first-child::after {
        left: 0;
        transform: translateX(50%);
    }
    .about-read-class-list-item--material .class-card-kinds-list-item:last-child::after {
        right: 0;
        transform: translateX(-50%);
    }
    .about-read-class-list-item--material .class-card-kinds-list-item:nth-child(2)::after {
        width: calc(200 / var(--lp-font) * 1em);
        left: 50%;
        transform: translateX(-50%);
    }
    .about-read-class-list__container {
        container-type: inline-size;
    }
}
@container (max-width: 1024px) {
    .about-read-class-list {
        gap: min(25px, calc(25 / 1024 * 100vw));
    }
    .class-card {
        min-height: min(441px, calc(441 / 1024 * 100vw));
    }
    .class-card__inner {
        padding: 0 min(24px, calc(24 / 1024 * 100vw));
    }
    .class-card__body {
        padding-top: min(20px, calc(20 / 1024 * 100vw));
        padding-bottom: min(20px, calc(20 / 1024 * 100vw));
    }
    .class-card-heading::before {
        height: min(30px, calc(30 / 1024 * 100vw));
    }
    .class-card-headng__inner {
        padding: min(5px, calc(5 / 1024 * 100vw)) min(20px, calc(20 / 1024 * 100vw));
    }
    .class-card-heading__label {
        font-size: min(20px, calc(20 / 1024 * 100vw));
    }
    .class-card__main {
        margin-top: min(20px, calc(20 / 1024 * 100vw));
    }
    .class-card-kinds-list {
        gap: min(15px, calc(15 / 1024 * 100vw));
    }
    .class-card-kinds-list-item {
        width: min(64px, calc(64 / 1024 * 100vw));
    }
    .class-card-kinds-list-item--02 {
        width: min(132px, calc(132 / 1024 * 100vw));
    }
    .class-card-kinds-list-item:nth-child(2)::before {
        width: min(160px, calc(160 / 1024 * 100vw));
    }
    .class-card-kinds-list-item--02 .class-kinds-card {
        padding-top: min(35px, calc(35 / 1024 * 100vw));
    }
    .class-kinds-card {
        padding-top: min(40px, calc(40 / 1024 * 100vw));
    }
    .class-kinds-card::before {
        height: min(36px, calc(36 / 1024 * 100vw));
    }
    .class-card-kinds-list-item--02 .class-kinds-card::before {
        height: min(28px, calc(28 / 1024 * 100vw));
    }
    .class-kinds-card-heading-text {
        margin-top: min(6px, calc(6 / 1024 * 100vw));
    }
    .class-kinds-card-heading-text__label {
        font-size: min(12px, calc(12 / 1024 * 100vw));
    }
    .class-kinds-card-text {
        margin-top: min(16px, calc(16 / 1024 * 100vw));
    }
    .class-kinds-card-text__label {
        font-size: min(24px, calc(24 / 1024 * 100vw));
    }
    .class-card-material-text {
        margin-top: min(20px, calc(20 / 1024 * 100vw));
        padding-top: min(6px, calc(6 / 1024 * 100vw));
    }
    .class-card-material-text::before {
        height: min(25px, calc(25 / 1024 * 100vw));
    }
    .class-card-material-text__sub {
        font-size: min(12px, calc(12 / 1024 * 100vw));
    }
    .class-card-material-text__label {
        font-size: min(24px, calc(24 / 1024 * 100vw));
    }
    .class-card-content-read {
        margin-top: min(16px, calc(16 / 1024 * 100vw));
    }
    .about-read-class-list-item--material .class-kinds-card {
        padding-bottom: min(31px, calc(31 / 1024 * 100vw));
    }
    .about-read-class-list-item--material .class-kinds-card::after {
        height: min(24px, calc(24 / 1024 * 100vw));
    }
    .about-read-class-list-item--material .class-card-kinds-list-item:nth-child(2)::after {
        width: min(160px, calc(160 / 1024 * 100vw));
    }
}
@media all and (max-width: 767px) {
    .about-section {
        background: var(--lp-sec-bg);
    }
    .about-section__inner {
    }
    .about-section__body {
        padding-top: calc(112 / 750 * 100vw);
        padding-bottom: calc(110 / 750 * 100vw);
    }
    .about-intro {
        margin-top: calc(166 / 750 * 100vw);
    }
    .about-section .l-section__column {
        gap: calc(20 / 750 * 100vw);
        position: relative;
        padding-bottom: calc(270 / 750 * 100vw);
    }
    .about-section .l-section__column .l-section__content {
        flex-grow: 1;
    }
    .about-intro-heading {
    }
    .about-intro-heading__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(42 / 750 * 100vw);
        font-weight: bold;
        font-feature-settings: "palt";
        letter-spacing: calc(60 / 1000 * 1em);
        line-height: 1.78;
    }
    .about-intro-heading__label--accent {
        color: var(--lp-c-accent);
    }
    .about-intro-material-list__container {
        width: 100%;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }
    .about-intro-material-list {
        display: flex;
        justify-content: space-between;
    }
    .about-intro-material-list-item {
        width: calc(164 / 750 * 100vw);
        flex-shrink: 0;
    }
    .about-intro-material-list-item + .about-intro-material-list-item {
        position: relative;
    }
    .about-intro-material-list-item + .about-intro-material-list-item::before {
        content: "+";
        display: block;
        font-size: calc(36 / 750 * 100vw);
        font-family: var(--lp-f-mincho);
        line-height: 1;
        position: absolute;
        left: 0;
        top: 0;
        margin-top: calc(68 / 750 * 100vw);
        margin-left: calc(-27 / 750 * 100vw);
        transform: translateX(-100%);
    }
    .about-intro-material-card {
    }
    .about-intro-material-card-img {
    }
    .about-intro-material-card-text {
        text-align: center;
        margin-top: calc(27 / 750 * 100vw);
    }
    .about-intro-material-card-text__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(30 / 750 * 100vw);
        font-weight: 600;
        line-height: 1;
    }
    .about-read {
        margin-top: calc(48 / 750 * 100vw);
    }
    .about-read-text {
    }
    .about-read-class-list__container {
        margin-top: calc(48 / 750 * 100vw);
    }
    .about-read-class-list {
        --miso-color-01: #cd9c4a;
        --miso-color-02: #bd7839;
        --miso-color-03: #643008;
        --miso-color-04: #3d1d07;
    }
    .about-read-class-list-item {
    }
    .about-read-class-list-item + .about-read-class-list-item {
        margin-top: calc(72 / 750 * 100vw);
    }
    .about-read-class-list-item--material {
    }
    .class-card-content {
    }
    .class-card {
        background: var(--lp-c-white);
        box-shadow: var(--lp-shadow-006);
    }
    .class-card__inner {
        padding: 0;
        max-width: calc(471 / 750 * 100vw);
        margin: auto;
    }
    .class-card__body {
        padding-top: calc(40 / 750 * 100vw);
        padding-bottom: calc(40 / 750 * 100vw);
    }
    .class-card-heading {
        position: relative;
    }
    .class-card-heading::before {
        content: "";
        display: block;
        width: 1px;
        height: calc(50 / 750 * 100vw);
        background: var(--lp-c-black);
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50% , 100%);
    }
    .class-card-headng__inner {
        text-align: center;
        background: var(--lp-c-black);
        padding: calc(5 / 750 * 100vw) calc(20 / 750 * 100vw);
    }
    .class-card-heading__label {
        color: var(--lp-c-white);
        font-family: var(--lp-f-mincho);
        font-size: calc(36 / 750 * 100vw);
        font-feature-settings: "palt";
        letter-spacing: calc(50 / 1000 * 1em);
        line-height: 1.5;
    }
    .class-card__main {
        position: relative;
        margin-top: calc(41 / 750 * 100vw);
    }
    .class-card-kinds-list {
        display: flex;
        justify-content: space-between;
        gap: calc(10 / 750 * 100vw);
    }
    .class-card-kinds-list-item {
        width: calc(108 / 750 * 100vw);
        position: relative;
    }
    .class-card-kinds-list-item::before {
        content: "";
        display: block;
        background: var(--lp-c-black);
        width: 100%;
        height: 1px;
        position: absolute;
        top: 0;
    }
    .class-card-kinds-list-item:first-child::before {
        left: 0;
        transform: translateX(50%);
    }
    .class-card-kinds-list-item:last-child::before {
        right: 0;
        transform: translateX(-50%);
    }
    .class-card-kinds-list-item:nth-child(2)::before {
        width: calc(150 / 750 * 100vw);
        left: 50%;
        transform: translateX(-50%);
    }
    /* 原料 */
    .class-card-kinds-list-item--kome {
        --thema-color: var(--miso-color-02);
    }
    .class-card-kinds-list-item--mugi {
        --thema-color: var(--miso-color-03);
    }
    .class-card-kinds-list-item--mame {
        --thema-color: var(--miso-color-04);
    }
    /* 味 */
    .class-card-kinds-list-item--01 {
        --thema-color: var(--miso-color-02);
    }
    .class-card-kinds-list-item--02 {
        --thema-color: var(--miso-color-03);
        width:calc(225 / 750 * 100vw);
    }
    .class-card-kinds-list-item--03 {
        --thema-color: var(--miso-color-04);
    }
    /* 色 */
    .class-card-kinds-list-item--white {
        --thema-color: var(--miso-color-01);
    }
    .class-card-kinds-list-item--yellow {
        --thema-color: var(--miso-color-02);
    }
    .class-card-kinds-list-item--red {
        --thema-color: var(--miso-color-03);
    }
    .class-kinds-card {
        position: relative;
        padding-top: calc(68 / 750 * 100vw);
    }
    .class-card-kinds-list-item--02 .class-kinds-card {
        padding-top: calc(57 / 750 * 100vw);
    }
    .class-kinds-card::before {
        content: "";
        display: block;
        background: var(--lp-c-black);
        width: 1px;
        height: calc(60 / 750 * 100vw);
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .class-card-kinds-list-item--02 .class-kinds-card::before {
        height: calc(48 / 750 * 100vw);
    }
    .class-kinds-card-heading {
    }
    .class-kinds-card-heading-ico {
    }
    .class-kinds-card-heading-ico__inner {
    }
    .class-kinds-card-heading-text {
        text-align: center;
        margin-top: calc(6 / 750 * 100vw);
    }
    .class-kinds-card-heading-text__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(22 / 750 * 100vw);
        font-weight: 600;
        font-feature-settings: "palt";
        letter-spacing: calc(50 / 1000 * 1em);
        line-height: calc(27.2 / 22);
    }
    .class-kinds-card-text {
        display: flex;
        justify-content: center;
        align-items: start;
        margin-top: calc(20 / 750 * 100vw);
    }
    .class-kinds-card-text__label {
        color: var(--thema-color);
        font-family: var(--lp-f-mincho);
        font-size: calc(40 / 750 * 100vw);
        font-weight: bold;
        letter-spacing: calc(50 / 1000 * 1em);
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }
    .class-card-material-text {
        text-align: center;
        position: relative;
        margin-top: calc(20 / 750 * 100vw);
        padding-top: calc(6 / 750 * 100vw);
    }
    .class-card-material-text::before {
        content: "";
        display: block;
        background: var(--lp-c-black);
        width: 1px;
        height: calc(25 / 750 * 100vw);
        position: absolute;
        left: 50%;
        transform: translate(-50% , -100%);
        top: 0;
    }
    .class-card-material-text__sub {
        font-family: var(--lp-f-mincho);
        font-size: calc(22 / 750 * 100vw);
        font-feature-settings: "palt";
        font-weight: 600;
        letter-spacing: calc(50 / 1000 * 1em);
        line-height: 1.4;
    }
    .class-card-material-text__label {
        color: var(--miso-color-01);
        font-family: var(--lp-f-mincho);
        font-size: calc(40 / 750 * 100vw);
        font-weight: bold;
        font-feature-settings: "palt";
        letter-spacing: calc(50 / 1000 * 1em);
        line-height: 1.4;
    }
    .class-card-content-read {
        margin-top: calc(30 / 750 * 100vw);
    }
    .class-card-content-read-text {
        font-family: var(--lp-f-gothic);
        font-size: calc(28 / 750 * 100vw);
        font-weight: 400;
        line-height: 1.6;
        letter-spacing: calc(60 / 1000 * 1em);
    }

    /* 原料 */
    .about-read-class-list-item--material .class-kinds-card {
        padding-bottom: calc(54 / 750 * 100vw);
    }
    .about-read-class-list-item--material .class-kinds-card::after {
        content: "";
        display: block;
        background: var(--lp-c-black);
        width: 1px;
        height: calc(40 / 750 * 100vw);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .about-read-class-list-item--material .class-card-kinds-list-item::after {
        content: "";
        display: block;
        background: var(--lp-c-black);
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0;
    }
    .about-read-class-list-item--material .class-card-kinds-list-item:first-child::after {
        left: 0;
        transform: translateX(50%);
    }
    .about-read-class-list-item--material .class-card-kinds-list-item:last-child::after {
        right: 0;
        transform: translateX(-50%);
    }
    .about-read-class-list-item--material .class-card-kinds-list-item:nth-child(2)::after {
        width: calc(200 / 750 * 100vw);
        left: 50%;
        transform: translateX(-50%);
    }
    .about-read-class-list__container {
        container-type: inline-size;
    }
}

/* --------------------------------------------------------------------------
AREA
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .area-section {
    }
    .area-section__inner {
    }
    .area-section__body {
        padding-top: calc(120 / var(--lp-font) * 1em);
        padding-bottom: calc(120 / var(--lp-font) * 1em);
    }
    .area-section .l-section__column {
        flex-direction: row;
        justify-content: start;
        gap: calc(46 / var(--lp-font) * 1em);
    }
    .area-read {
        margin-top: calc(64 / var(--lp-font) * 1em);
    }
    .area-read-heading {
        margin-bottom: calc(30 / var(--lp-font) * 1em);
    }
    .area-read-heading__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(28 / var(--lp-font) * 1em);
        font-feature-settings: "palt";
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: calc(70 / 1000 * 1em);
    }
    .area-read-text {
    }
    .area-read-text .c-txt {
        line-height: 2;
        font-feature-settings: "palt";
        letter-spacing: calc(60 / 1000 * 1em);
    }
    .area-map {
    }
    .area-map-img {
    }
    .area-table__container {
        margin-top: calc(57 / var(--lp-font) * 1em);
    }
    .area-table {
    }
    .area-table__inner {
    }
    .area-table__body {
    }
    .area-table-chart {
        border: solid 1px #5d5d5d;
        width: 100%;
    }
    .area-table-chart__tr {
    }
    .area-table-chart__cell {
        padding: calc(12 / var(--lp-font) * 1em) calc(19 / var(--lp-font) * 1em);
        background: var(--lp-c-white);
        border: solid 1px #5d5d5d;
    }
    .area-table-chart__cell--lv1 {
        background: var(--lp-c-accent-sub);
    }
    .area-table-chart__cell--lv2 {
        background: #ddb477;
    }
    .area-table-chart__cell--lv3 {
        background: #e0c49b;
    }
    .area-table-chart__cell--lv4 {
        background: #f0dcbe;
    }
    .area-table-chart__label {
        font-family: var(--lp-f-gothic);
        font-size: calc(14 / var(--lp-font) * 1em);
        font-weight: 500;
        line-height: 1.6;
    }
    .area-table-chart__cell--lv1 .area-table-chart__label {
        color: var(--lp-c-white);
        font-family: var(--lp-f-mincho);
        font-size: calc(16 / var(--lp-font) * 1em);
        font-weight: bold;
        font-feature-settings: "palt";
        line-height: 1.2;
    }
    .area-table-chart__cell--lv1 .area-table-chart__label,
    .area-table-chart__cell--lv2 .area-table-chart__label,
    .area-table-chart__cell--lv3 .area-table-chart__label,
    .area-table-chart__cell--lv4 .area-table-chart__label {
        letter-spacing: calc(60 / 1000 * 1em);
    }
}
@media all and (max-width: 767px) {
    .area-section {
    }
    .area-section__inner {
    }
    .area-section__body {
        padding-top: calc(120 / 750 * 100vw);
        padding-bottom: calc(120 / 750 * 100vw);
    }
    .area-section .l-section__column {
        flex-direction: row;
        justify-content: start;
        gap: calc(46 / 750 * 100vw);
    }
    .area-read {
        margin-top: calc(46 / 750 * 100vw);
    }
    .area-read-heading {
        margin-bottom: calc(30 / 750 * 100vw);
    }
    .area-read-heading__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(42 / 750 * 100vw);
        font-feature-settings: "palt";
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: calc(70 / 1000 * 1em);
    }
    .area-read-text {
    }
    .area-read-text .c-txt {
        line-height: 2;
        font-feature-settings: "palt";
        letter-spacing: calc(60 / 1000 * 1em);
    }
    .area-map {
        margin-top: calc(56 / 750 * 100vw);
    }
    .area-map-img {
    }
    .area-table__container {
        margin-top: calc(57 / 750 * 100vw);
    }
    .area-table {
    }
    .area-table__inner {
    }
    .area-table__body {
        overflow-x: scroll;
    }
    .area-table-chart {
        border: solid 1px #5d5d5d;
        width: 750px;
    }
    .area-table-chart__tr {
    }
    .area-table-chart__cell {
        padding: calc(12 / 750 * 100vw) calc(19 / 750 * 100vw);
        background: var(--lp-c-white);
        border: solid 1px #5d5d5d;
    }
    .area-table-chart__cell--lv1 {
        background: var(--lp-c-accent-sub);
    }
    .area-table-chart__cell--lv2 {
        background: #ddb477;
    }
    .area-table-chart__cell--lv3 {
        background: #e0c49b;
    }
    .area-table-chart__cell--lv4 {
        background: #f0dcbe;
    }
    .area-table-chart__label {
        font-family: var(--lp-f-gothic);
        font-size: clamp(12px, calc(24 / 750 * 100vw), 14px);
        font-weight: 500;
        line-height: 1.6;
    }
    .area-table-chart__cell--lv1 .area-table-chart__label {
        color: var(--lp-c-white);
        font-family: var(--lp-f-mincho);
        font-size: clamp(12px, calc(24 / 750 * 100vw), 14px);
        font-weight: bold;
        font-feature-settings: "palt";
        line-height: 1.2;
    }
    .area-table-chart__cell--lv1 .area-table-chart__label,
    .area-table-chart__cell--lv2 .area-table-chart__label,
    .area-table-chart__cell--lv3 .area-table-chart__label,
    .area-table-chart__cell--lv4 .area-table-chart__label {
        letter-spacing: calc(60 / 1000 * 1em);
    }
    #area .l-section__column{
        display: block;
    }
    #area .section-heading-lv2__inner{
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    #area .section-heading-lv2-text__label{
        height: 100px;
    }
    #area .l-section__inner{
        padding: 0 0 0 calc(40 / 750 * 100vw);
    }
    #area .l-section__column, #area .area-map{
        padding-right: calc(40 / 750 * 100vw);
    }
}

/* --------------------------------------------------------------------------
HANDMADE
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .handmade-section {
        background: var(--lp-sec-bg);
    }
    .handmade-section__inner {
    }
    .handmade-section__body {
        padding-top: calc(120 / var(--lp-font) * 1em);
        padding-bottom: calc(120 / var(--lp-font) * 1em);
    }
    .handmade-section .l-section__column {
        gap: calc(55 / var(--lp-font) * 1em);
    }
    .handmade-content {
    }
    .handmade-content__inner {
    }
    .handmade-content-intro {
        max-width: calc(1058 / var(--lp-font) * 1em);
        margin-left: calc(-176 / var(--lp-font) * 1em);
    }
    .handmade-content-intro-img {
    }
    .handmade-content-text {
        margin-top: calc(46 / var(--lp-font) * 1em);
    }
    .handmade-content-text .c-txt {
        font-feature-settings: "palt";
        line-height: 2;
        letter-spacing: calc(60 / 1000 * 1em);
    }
    .handmade-bnr {
        display: block;
        max-width: calc(500 / var(--lp-font) * 1em);
        margin: calc(46 / var(--lp-font) * 1em) auto 0;
    }
    .handmade-bnr-img {
        border-radius: calc(20 / var(--lp-font) * 1em);
        overflow: hidden;
    }
    /* hover時 */
    .handmade-bnr {
        transition: var(--lp-transition);
    }
    .handmade-bnr:hover {
        opacity: var(--hover-animation-E);
    }
}
@media all and (max-width: 767px) {
    .handmade-section {
        background: var(--lp-sec-bg);
    }
    .handmade-section__inner {
    }
    .handmade-section__body {
        padding-top: calc(120 / 750 * 100vw);
        padding-bottom: calc(245 / 750 * 100vw);
    }
    .handmade-section .l-section__column {
        gap: calc(18 / 750 * 100vw);
    }
    .handmade-content-intro {
        margin-top: calc(142 / 750 * 100vw);
    }
    .handmade-content {
    }
    .handmade-content__inner {
    }
    .handmade-content-intro {
        width: calc(579 / 750 * 100vw);
        margin-left: calc(85 / 750 * 100vw);
    }
    .handmade-content-intro-img {
    }
    .handmade-content-text {
        margin-top: calc(64 / 750 * 100vw);
        width: calc(670 / 750 * 100vw);
        position: relative;
        left: calc(125 / 750 * 100vw);
    }
    .handmade-content-text .c-txt {
        font-feature-settings: normal;
        line-height: 2;
    }
    .handmade-bnr {
        display: block;
        margin: calc(72 / 750 * 100vw) auto 0;
    }
    .handmade-bnr-img {
        border-radius: calc(20 / 750 * 100vw);
        overflow: hidden;
    }
}