.about{
    position: relative;
    font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",-apple-system, BlinkMacSystemFont, Meiryo, sans-serif;
    color: var(--color-text-primary, #000B20);
}

html {
    font-size: calc(100vw / 375);
}
@media screen and (min-width: 768px) {
    html {
        font-size: 1px;
    }
}

/* 共通 */
.content-block {
    display: block;
}
.content-block__body {
    margin: 0 auto;
}
.content-block__area {
    padding: 0 20rem;
}
@media screen and (min-width: 768px) {
    .content-block__area {
        padding: 0;
    }
}

/* タイトルブロック */
.about__h2-title {
    color: var(--color-text-primary, #000B20);
    text-align: center;
    font-size: 22rem;
    font-weight: 600;
    line-height: 160%;
    letter-spacing: 0.04em;
    margin-bottom: 20rem;
}
.about__h2-title--mb30-50 {
    margin-bottom: 30rem;
}
.about__h2-title--accent {
    color: var(--color-text-accent, #E83821);
    font-size: 22rem;
    font-weight: 600;
    line-height: 160%;
    letter-spacing: 0.04em;
}
@media screen and (min-width: 768px) {
    .about__h2-title {
        font-size: 30px;
        line-height: 140%;
        letter-spacing: 0.06em;
        margin-bottom: 30rem;
    }
    .about__h2-title--accent {
        font-size: 30px;
        line-height: 140%;
        letter-spacing: 0.06em;
    }
    .about__h2-title--mb30-50 {
        margin-bottom: 50rem;
    }
}

/* ふくしまの酒の特徴 */
.content-block__content--about-features {
    /* padding: 0; */
    padding: 30rem 0 25rem;
}
.about-features__item {
    margin-bottom: 40rem;
}
.about-features__item:last-of-type {
    margin-bottom: 0;
}
.content-block__area--about-features {
    padding: 0 25rem;
}
.about-features__item-title-img-block {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rem;
}
.about-features__item-title {
    color: var(--color-text-primary, #000B20);
    font-size: 26rem;
    font-weight: 600;
    line-height: 120%;
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    width: fit-content;
    height: fit-content;
    padding: 10rem 0 0 9rem;
}
.about-features__item-title--accent {
    color: var(--color-text-accent, #E83821);
    font-size: 26rem;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.2em;
}
.about-features__item-img {
    display: block;
    width: 260rem;
    border-radius: 10rem;
}
.about-features__item-text {
    color: var(--color-text-primary, #000B20);
    font-size: 14rem;
    font-weight: 300;
    line-height: 170%;
    letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
    .content-block__content--about-features {
        padding: 50rem 0 60rem;
    }
    .about-features__item {
        margin-bottom: 0;
    }
    .content-block__area--about-features {
        padding: 0 15rem;
    }
    .about-features__list {
        display: flex;
        justify-content: space-between;
        max-width: 1200rem;
        margin: 0 auto;
    }
    .about-features__item {
        width: calc((100% - 120rem) / 3);
    }
    .about-features__item-title-img-block {
        align-items: flex-start;
    }
    .about-features__item-title {
        font-size: 32rem;
    }
    .about-features__item-title--accent {
        font-size: 32rem;
    }
    .about-features__item-img {
        object-fit: contain;
        width: calc((100% - 70rem));
        border-radius: 10rem;
    }
    .about-features__item-text {
        font-size: 15rem;
    }
}

/* 三つの地域が織りなすおいしさ */
.content-block__body--about-area {
    padding: 25rem 0 40rem;
}
.about-area__text {
    color: var(--color-text-primary, #000B20);
    text-align: center;
    font-size: 14rem;
    font-weight: 300;
    line-height: 170%;
    letter-spacing: 0.1em;
    margin-bottom: 56rem;
}
.about-area__item {
    border: 1px solid var(--color-border-quaternary, #E0DEDB);
    padding: 20rem;
    border-radius: 10rem;
    margin-bottom: 16rem;
}
.about-area__item:last-of-type {
    margin-bottom: 0;
}
.about-area__item-img {
    display: block;
    width: 100%;
    margin-bottom: 10rem;
}
.about-area__item-text {
    color: var(--color-text-primary, #000B20);
    font-size: 14rem;
    font-weight: 300;
    line-height: 170%;
    letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
    .content-block__body--about-area {
        padding: 60rem 0;
    }
    .content-block__area--about-area {
        padding: 0 15rem;
    }
    .about-area__text {
        font-size: 15rem;
        letter-spacing: 0.06em;
        margin-bottom: 50rem;
    }
    .about-area__list {
        display: flex;
        justify-content: space-between;
        max-width: 1200rem;
        margin: 0 auto;
    }
    .about-area__item {
        padding: 20rem;
        margin-bottom: 0;
        width: calc((100% - 40rem) / 3);
    }
    .about-area__item-img {
        margin-bottom: 20rem;
    }
}

/* ふくしまのお酒を支える酒米と酵母 */
.content-block__body--about-original {
    padding: 36rem 0 65rem;
}
.about-original__text {
    color: var(--color-text-primary, #000B20);
    text-align: center;
    font-size: 14rem;
    font-weight: 300;
    line-height: 170%;
    letter-spacing: 0.06em;
    margin-bottom: 40rem;
}
.about-original__item {
    margin-bottom: 40rem;
}
.about-original__item:last-of-type {
    margin-bottom: 0;
}
.about-original__item-title {
    color: var(--color-text-primary, #000B20);
    font-size: 20rem;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0.1em;
    text-align: center;
    border-top: 1px solid rgba(197, 195, 193, 1);
    border-bottom: 1px solid rgba(197, 195, 193, 1);
    padding: 14rem 0 16rem;
    margin-bottom: 20rem;
}
.about-original__second-list {
    border: 1px solid var(--color-border-quaternary, #E0DEDB);
    padding: 24rem 20rem;
    border-radius: 10rem;
}
.about-original__second-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted var(--color-border-quaternary, #C5C3C1);
    padding-bottom: 20rem;
    margin-bottom: 20rem;
}
.about-original__second-item:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.about-original__second-item-img {
    display: block;
    width: 78rem;
    border-radius: 39rem;
    flex-shrink: 1;
}
.about-original__second-item-text-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 197rem;
}
.about-original__second-item-title-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.about-original__second-item-title {
    color: var(--color-text-primary, #000B20);
    font-size: 18rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.04em;
    width: fit-content;
    margin-bottom: 10rem;
}
.about-original__second-item-sub-title {
    position: relative;
    right: 4rem;
    font-size: 10rem;
    transform: scale(0.8);
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.08em;
    width: fit-content;
    margin-bottom: 2.5rem;
}
.about-original__second-item-sub-title--02 {
    right: -6rem;
}
.about-original__second-item-text {
    color: var(--color-text-primary, #000B20);
    font-size: 14rem;
    font-weight: 300;
    line-height: 160%;
    letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
    .content-block__body--about-original {
        padding: 60rem 0 70rem;
    }
    .content-block__area--about-original {
        padding: 0 15rem;
    }
    .about-original__text {
        font-size: 15rem;
        margin-bottom: 50rem;
    }
    .about-original__list {
        display: flex;
        justify-content: space-between;
        max-width: 1200rem;
        margin: 0 auto;
    }
    .about-original__item {
        width: calc((100% - 20rem) / 2);
        margin-bottom: 0;
    }
    .about-original__item-title {
        font-size: 22rem;
        letter-spacing: 0.1em;
        padding: 17rem 0;
        margin-bottom: 30rem;
    }
    .about-original__second-list {
        padding: 30rem;
    }
    .about-original__second-item {
        align-items: center;
        padding-bottom: 30rem;
        margin-bottom: 30rem;
        min-height: 130rem;
    }
    .about-original__second-item-img {
        width: 130rem;
        border-radius: 65rem;
    }
    .about-original__second-item-text-block {
        width: calc((100% - 160rem));
    }
    .about-original__second-item-title {
        font-size: 20rem;
        line-height: 130%;
        letter-spacing: 0.12em;
        margin-bottom: 14rem;
    }
    .about-original__second-item-sub-title {
        right: 10rem;
        transform: scale(0.9);
    }
    .about-original__second-item-sub-title--02 {
        right: 1rem;
    }
    .about-original__second-item-text {
        line-height: 170%;
    }
}

/* バナー */
.content-block__body--about-banner {
    padding: 40rem 0 40rem;
}
.content-block__area--about-banner {
    padding: 0 44rem;
}
.about-banner__list {
    display: block;
    margin-bottom: 30rem;
}
.about-banner__item {
    margin-bottom: 20rem;
}
.about-banner__item:last-of-type {
    margin-bottom: 0;
}
.about-banner__link {
    display: block;
}
.about-banner__item-img {
    display: block;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .content-block__body--about-banner {
        padding: 60rem 0 10rem;
    }
    .content-block__area--about-banner {
        padding: 0 15rem;
    }
    .about-banner__list {
        display: flex;
        justify-content: space-between;
        max-width: 1200rem;
        margin: 0 auto 60rem;
    }
    .about-banner__item {
        margin-bottom: 0;
        width: calc((100% - 42rem) / 3);
    }
    .about .common-button {
        width: fit-content;
        margin: 0 auto;
    }
}