@charset "utf-8";

:root {
    --column-color-red: #E50012;
}

.block-event-page:has(#column) .block-event-page--accessory {
    display: none;
    /*移動前の関連記事非表示*/
}

.block-event-page:has(#column) #goodsdetail-share-btn {
    margin: 1.5rem 0 0 0;
}

@media screen and (min-width: 768px) {
    .block-event-page:has(#column) #goodsdetail-share-btn {
        margin: 1.2rem 0 0 1.5rem;
    }
}

#column>.pane-topic-path {
    margin-left: -2rem;
    margin-right: -2rem;
}

@media screen and (min-width: 768px) {
    #column>.pane-topic-path {
        margin-left: 0rem;
        margin-right: 0rem;
    }
}

#column .column-inner {}

@media screen and (min-width: 768px) {
    #column .column-inner {
        padding: 0;
        max-width: 960px;
        width: 100%;
        margin-inline: auto;
    }
}

#column .column-header {
    margin-bottom: 1.5rem;
}

@media screen and (min-width: 768px) {
    #column .column-header {
        margin-bottom: 6rem;
        display: flex;
        justify-content: space-between;
        align-items: start;
    }
}

#column h1 {
    font-weight: bold;
    font-size: 2.5rem;
    line-height: 1.4;
    margin: 0;
}

@media screen and (min-width: 768px) {
    #column h1 {
        font-size: 2.8rem;
    }
}

#column .column-inner>h2 {
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.5;
    margin: 5rem 0 3rem;
    padding: 1.5rem 0;
    border-top: 2px solid #333333;
    border-bottom: 2px solid #333333;
}

@media screen and (min-width: 768px) {
    #column .column-inner>h2 {
        font-size: 2.4rem;
        margin: 6rem 0 3rem;
        padding: 2rem 0
    }
}

#column .column-inner>h3 {
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 1.3;
    margin: 5rem 0 3rem;
    padding: 0 0 0 1.3rem;
    position: relative;
}

@media screen and (min-width: 768px) {
    #column .column-inner>h3 {
        margin: 4rem 0 3rem;
        font-size: 2rem;
    }
}

#column .column-inner>h3::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: -0.1rem;
    width: .3rem;
    height: 2.6rem;
    background-color: #313131;
}

@media screen and (min-width: 768px) {
    #column .column-inner>h3::before {
        top: 0;
    }
}

#column small {
    display: block;
    font-size: 1.5rem;
    margin: 0 0 2rem 0;
    line-height: 1.8;
    color: #838383;
    padding-left: 1em;
    text-indent: -1em;
    letter-spacing: 0.03em;
}

@media screen and (min-width: 768px) {
    #column small {
        font-size: 1.6rem;
    }
}

#column p {
    font-size: 1.5rem;
    margin: 0 0 2rem;
    padding: 0;
    line-height: 2;
}

@media screen and (min-width: 768px) {
    #column p {
        font-size: 1.6rem;
    }
}

#column p a {
    text-decoration: underline;
}

#column p a:hover {
    text-decoration: none;
}

.table-of-contents {
    padding: 2rem;
    border: 1px solid #E8E8E8;
}

@media screen and (min-width: 768px) {
    .table-of-contents {
        padding: 4rem;
    }
}

.table-of-contents-name {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2;
    margin: 0 0 1rem 0
}

@media screen and (min-width: 768px) {
    .table-of-contents-name {
        margin: 0 0 1.7rem 0;
    }
}

.table-of-contents_items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.table-of-contents_item {
    padding: 0 0 0 2rem;
    position: relative;
}

.table-of-contents_item::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 1rem;
    width: 1rem;
    height: .2rem;
    background-color: var(--column-color-red);
}

@media screen and (min-width: 768px) {
    .table-of-contents_item::before {}
}

.table-of-contents_item>a {
    font-size: 1.5rem;
    font-weight: 400;
    text-decoration: underline;
}

@media screen and (min-width: 768px) {
    .table-of-contents_item>a {
        transition: opacity 0.3s;
    }
}

@media screen and (min-width: 768px) {
    .table-of-contents_item>a:hover {
        text-decoration: none;
    }
}

.table-of-contents_subitems {
    margin-top: 1rem;
}

.table-of-contents_subitem>a {
    font-size: 1.3rem;
    line-height: 1.76;
    font-weight: 400;
    color: #838383;
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    .table-of-contents_subitem>a {
        transition: opacity 0.3s;
    }
}

@media screen and (min-width: 768px) {
    .table-of-contents_subitem>a:hover {
        opacity: .7;
    }
}

.quotation {
    margin: 0 0 5rem 0;
    padding: 0;
    display: block;
}

.quotation div {
    padding: 2rem;
    background-color: #F0F0F0;
    font-size: 1.5rem;
    line-height: 2;
    margin: 0 0 2rem 0;
}

@media screen and (min-width: 768px) {
    .quotation div {
        padding: 3rem;
        font-size: 1.6rem;
    }
}

.quotation p {
    font-size: 1.5rem;
    font-weight: 400;
}

.quotation p>a {
    text-decoration: underline;
}

@media screen and (min-width: 768px) {
    .quotation p>a:hover {
        text-decoration: none;
    }
}

#column .column-inner>.column-common-btn01 {
    margin-top: 3rem;
}

@media screen and (min-width: 768px) {
    #column .column-inner>.column-common-btn01 {
        margin-top: 6rem;
    }
}

#column .column-common-btn01 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333333;
    border: solid 1px #333333;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 500;
    padding: 1.4rem;
}

@media screen and (min-width: 768px) {
    #column .column-common-btn01 {
        font-size: 1.8rem;
        font-weight: 500;
        padding: 1.8rem;
        transition: all 0.3s;
        max-width: 48rem;
        width: 100%;
        margin-inline: auto;
    }
}

@media screen and (min-width: 768px) {
    #column .column-common-btn01:hover {
        background: #ffffff;
        color: #000000;
        text-decoration: none;
    }
}

#column .column-inner>.column-common-btn02 {
    margin-top: 3rem;
}

@media screen and (min-width: 768px) {
    #column .column-inner>.column-common-btn02 {
        margin-top: 4rem;
    }
}

#column .column-common-btn02 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333333;
    border: solid 1px #333333;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 1.4rem .7rem;
}

@media screen and (min-width: 768px) {
    #column .column-common-btn02 {
        font-size: 1.6rem;
        font-weight: 500;
        padding: 1.8rem 1rem;
        transition: all 0.3s;
        max-width: 43rem;
        width: 100%;
        margin-inline: auto;
    }
}

@media screen and (min-width: 768px) {
    #column .column-common-btn02:hover {
        background: #ffffff;
        color: #000000;
        text-decoration: none;
    }
}

#column .list {
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    margin: 0 0 3rem 0;
    border: 1px solid #F0F0F0;
}

@media screen and (min-width: 768px) {
    #column .list {
        padding: 3rem;
        margin: 0 0 4rem 0;
    }
}

#column .list li {
    position: relative;
    padding: 0 0 0 2.6rem;
}

#column .list li::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: .8rem;
    width: .5rem;
    height: .5rem;
    border-radius: 9999px;
    background-color: var(--column-color-red);
}

@media screen and (min-width: 768px) {
    #column .list li::before {}
}

#column .media1>div:has(img) {
    margin-bottom: 3rem;
}

#column .media2>div:has(img) {
    margin-bottom: 3rem;
}

@media screen and (min-width: 768px) {
    #column .media2>div:has(img) {
        max-width: 84rem;
        width: 100%;
        margin-inline: auto;
    }
}

#column .col2-img {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 0 0 3rem 0;
}

@media screen and (min-width: 768px) {
    #column .col2-img {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.4rem;
        margin: 0 0 7rem 0;
    }
}

#column .item {
    margin: 5rem 0 4rem 0;
}

@media screen and (min-width: 768px) {
    #column .item {
        margin: 6rem 0 6rem 0;
    }
}

#column .item+.item {
    margin: 0 0 4rem 0;
}

@media screen and (min-width: 768px) {
    #column .item+.item {
        margin: 0 0 6rem 0;
    }
}

#column .item>h3 {
    padding: 0;
    line-height: 1.6;
    font-size: 1.6rem;
    margin: 0 0 3rem 0;
}

@media screen and (min-width: 768px) {
    #column .item>h3 {
        font-size: 2rem;
    }
}

#column .item>h3::before {
    display: none;
}

@media screen and (min-width: 768px) {
    #column .item>div {
        display: flex;
        align-items: center;
    }
}

#column .item>div>div:has(img) {
    margin-bottom: 3rem;
}

@media screen and (min-width: 768px) {
    #column .item>div>div:has(img) {
        max-width: 48rem;
        width: 100%;
        margin-right: 5rem;
        margin-bottom: 0;
    }
}

@media screen and (min-width: 768px) {
    #column .item>div>div:has(p) {
        max-width: 43rem;
        width: 100%;
    }
}

#column .item>div>div>p {
    margin-bottom: 3rem;
}

@media screen and (min-width: 768px) {
    #column .item>div>div>p {
        margin-bottom: 4rem;
    }
}

#column .item>div>div>a {
    margin-bottom: 2rem;
}

#column .item>div>div>a:last-of-type {
    margin-bottom: 0;
}

#column .relation {
    margin-top: 6rem;

}

@media screen and (min-width: 768px) {
    #column .relation {
        margin-top: 10rem;
        max-width: 1280px;
        width: 100%;
        margin-inline: auto;
    }
}

#column .relation:not(:has(.column-list-item)) {
    display: none !important;
}

#column .relation-name {
    min-height: 5.6rem;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: bold;
    background-color: #F9F8F6;
    margin: 0 0 2rem 0;
}

@media screen and (min-width: 768px) {
    #column .relation-name {
        font-size: 2.4rem;
        margin: 0 0 4rem 0;
    }

}

#column .relation-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin: 0 0 5rem 0;
}

@media screen and (min-width: 768px) {
    #column .relation-block {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin: 0 0 7.4rem 0;
    }
}

#column .relation>a {
    width: 20rem;
    min-height: 5rem;
    font-size: 1.6rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2.7rem;
    border: 1px solid #333;
    margin-inline: auto;
}

@media screen and (min-width: 768px) {
    #column .relation>a {
        font-size: 1.8rem;
    }
}

#column .relation>a::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    transform: rotate(45deg);
    margin-left: 1rem;
}

@media screen and (min-width: 768px) {
    #column .relation>a::after {
        margin-left: 1.5rem;
    }
}

#column .column-list-item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
}

#column .column-list-item>figure {
    text-align: center;
}

#column .column-list-item>figure img {
    width: 100%;
}

#column .column-list-ttl {
    font-size: 1.7rem;
    font-weight: bold;
    margin: 1.5rem 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: break-word;
}

@media screen and (min-width: 768px) {
    #column .column-list-ttl {
        font-size: 1.8rem;
        margin: 1rem 0 .9rem 0;
    }
}

#column .column-list-text {
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 1rem;
    line-height: 1.6;
    margin: 0;
}

@media screen and (min-width: 768px) {
    #column .column-list-text {
        font-size: 1.6rem;
    }
}

#column .p-lineup {
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
}

#column .p-lineup__slider {
    position: relative;
}

@media (min-width: 768px) {
    #column .p-lineup__slider {
        overflow: hidden;
    }
}

#column .p-lineup__slider::before,
#column .p-lineup__slider::after {
    content: "";
    background: #ffffff;
    width: 7rem;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
}

#column .p-lineup__slider::after {
    background: linear-gradient(270deg, rgb(255, 255, 255) 25%, transparent);
    right: -2rem;
}

@media (min-width: 768px) {
    #column .p-lineup__slider::after {
        right: -1.5rem;
    }
}

#column .p-lineup__slider::before {
    background: linear-gradient(90deg, rgb(255, 255, 255) 25%, transparent);
    left: -2rem;
}

@media (min-width: 768px) {
    #column .p-lineup__slider::before {
        left: -1.5rem;
    }
}

@media (min-width: 768px) {

    #column .p-lineup__slider::before,
    #column .p-lineup__slider::after {
        width: 18.1rem;
    }
}

#column .p-lineup__slider .swiper-button-prev {
    background-image: url("../img/ic_arrow_prev.png");
}

#column .p-lineup__slider .swiper-button-next {
    background-image: url("../img/ic_arrow_next.png");
}

#column .p-lineup__slider .swiper-button-next,
#column .p-lineup__slider .swiper-button-prev {
    width: 4.4rem;
    height: 4.4rem;
    margin-top: -3rem;
}

@media (max-width: 767px) {
    #column .p-lineup__slider .swiper-slide {
        width: 15rem;
    }

    #column .p-lineup__slider .swiper-button-prev {
        left: -0.5rem;
    }

    #column .p-lineup__slider .swiper-button-next {
        right: -0.5rem;
    }

}

#column .p-lineup__slider .name {
    color: #333333;
    font-size: 1.65rem;
    font-weight: normal;
    letter-spacing: 0.024em;
    position: relative;
    text-align: center;
}

@media (min-width: 768px) {
    #column .p-lineup__slider .name {
        font-size: 2rem;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
    }
}

#column .p-lineup__slider .name::after {
    background-color: #333333;
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 6.5rem;
    height: 0.1rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    #column .p-lineup__slider .name::after {
        width: 7.9rem;
    }
}

#column .p-lineup__slider .desc {
    color: #333333;
    font-size: 1rem;
    line-height: 1.6666666667;
    letter-spacing: 0.02em;
    text-align: center;
}

#column .p-lineup__slider .desc {
    font-size: 1.2rem;
}

#column .p-video {
    margin: 3rem 0 5rem;
}

@media (min-width: 768px) {
    #column .p-video {
        margin: 4rem 0 5rem;
    }
}

#column .p-video__body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 2rem 0;
    color: #99999a;
}

@media (min-width: 768px) {
    #column .p-video__body {
        margin: 0 0 3.9rem 0;
    }
}

#column .p-video__sub {
    font-weight: bold;
    display: inline-block;
    margin-top: auto;
    border: 1px solid #99999a;
    font-size: 1.7rem;
    border-radius: 2rem;
    padding: 1px 1.7rem 0;
    margin: 0 1rem 0 0;
    line-height: 1.3;
}

@media (min-width: 768px) {
    #column .p-video__sub {
        border-width: 2px;
        font-size: 2.2rem;
        border-radius: 4rem;
        padding: 0 2rem;
        margin: 0 1rem 0 0;
    }
}

#column .p-video__des {
    font-size: 1.7rem;
    font-weight: 500;
    margin: 0;
}

@media (min-width: 768px) {
    #column .p-video__des {
        font-size: 3.4rem;
    }
}

#column .p-video__thumb::after {
    content: "";
    position: absolute;
    z-index: 2;
    aspect-ratio: 1;
    background: url(../img/icon_play.png) no-repeat center / contain;
    transition: all 0.2s ease-in-out;
    width: 4.3rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

@media (min-width: 768px) {
    #column .p-video__thumb::after {
        width: 12.3rem;
    }
}

#column .p-video__thumb {
    overflow: hidden;
    position: relative;
    display: block;
    border: 2px solid #99999a;
    border-radius: 1.2rem;
}

#column .p-video__thumb img {
    width: 100%;
}

@media (max-width: 767px) {
    #column .p-video__thumb {
        margin-bottom: 2.6rem;
    }
}

@media (min-width: 768px) {
    #column .p-video__thumb {
        border-radius: 1.5rem;
        max-width: 91.7rem;
        width: 100%;
        margin-inline: auto;
    }
}

@media screen and (min-width: 768px) {}

@media screen and (min-width: 768px) {}

@media screen and (min-width: 768px) {}

/* -------------------------
VITALTECHによる血行促進のメカニズム
------------------------- */
#column .product-common-block1 {
    margin-top: 3rem;
}

#column .sec-ttl {
    font-weight: bold;
    text-align: center;
    color: var(--column-color-red);
    font-size: 1.8rem;
}

#column .sec-ttl {
    letter-spacing: 0.15em;
    margin-bottom: 2.5rem;
    border: none;
}

#column .sec-ttl span:not([class]) {
    border-style: solid;
    border-color: var(--column-color-red);
    border-width: 2px 0;
    padding-block: 0.5rem;
    display: inline-block;
}

#column .sec-ttl .txt-special {
    width: 0.75rem;
    margin-right: 0.2rem;
    min-width: 0.6rem;
    vertical-align: super;
    min-width: 0.5rem;
    aspect-ratio: 1;
    display: inline-block;
    background: url(../img/txt_r.png) no-repeat center/contain;
}

#column .product-common-block1_items {
    border-radius: .5rem;
    border: 2px solid var(--column-color-red);
    margin-top: 2.6rem;
}

#column .product-common-block1_item {
    display: flex;
    padding: 1rem;
    align-items: center;
    border-bottom: 2px solid var(--column-color-red);
    position: relative;
}

#column .product-common-block1_item:last-of-type {
    border-bottom: none;
}

#column .product-common-block1_item:last-of-type::before {
    display: none;
}

#column .product-common-block1_item::before {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 6.5rem;
    background-color: #fff;
    width: 1.7rem;
    height: 1.7rem;
    border-right: 2px solid var(--column-color-red);
    border-bottom: 2px solid var(--column-color-red);
    transform: rotate(45deg);
}

#column .product-common-block1_contents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 2px solid var(--column-color-red);
    border-radius: .5rem;
    margin-top: 5rem;
}

#column .product-common-block1_content {
    padding: .5rem .4rem .6rem;
}

#column .product-common-block1_content:first-of-type {
    border-right: 2px solid var(--column-color-red);
    box-sizing: border-box;
}

#column .product-common-block1_content-body {
    margin-top: .7rem;
}

#column .product-common-block1_body {
    max-width: 13.1rem;
    width: 100%;
    margin-right: auto;
}

#column .product-common-block1_content-text {
    font-size: 1.15rem;
    line-height: 1.48;
    text-align: center;
    font-weight: 500;
    color: var(--column-color-red);
}

#column .product-common-block1_text {
    font-size: 1.4rem;
    line-height: 1.48;
    text-align: center;
    font-weight: 500;
    color: var(--column-color-red);
    margin: 0
}

#column .product-common-block1_img {
    max-width: 18rem;
    width: 100%;
}

#column .product-common-block1_bottom {
    text-align: right;
    font-size: 1.2rem;
    margin-top: 1rem;
    color: var(--column-color-red);
}

@media screen and (min-width: 768px) {
    #column .product-common-block1 {
        margin-top: 10rem;
    }

    #column .sec-ttl {
        font-size: 3rem;
    }

    #column .sec-ttl .txt-special {
        margin-right: 0.3rem;
        width: 1.35rem;
    }

    #column .product-common-block1_items {
        border-radius: 1rem;
        border: 2px solid var(--column-color-red);
        margin-top: 6rem;
    }

    #column .product-common-block1_item {
        display: flex;
        padding: 2.2rem;
        align-items: center;
        border-bottom: 2px solid var(--column-color-red);
        position: relative;
    }

    #column .product-common-block1_item:last-of-type {
        border-bottom: none;
    }

    #column .product-common-block1_item:last-of-type::before {
        display: none;
    }

    #column .product-common-block1_item::before {
        content: "";
        position: absolute;
        bottom: -1.7rem;
        left: 24.6rem;
        background-color: #fff;
        width: 3.1rem;
        height: 3.1rem;
        border-right: 2px solid var(--column-color-red);
        border-bottom: 2px solid var(--column-color-red);
        transform: rotate(45deg);
    }

    #column .product-common-block1_body {
        max-width: 53.1rem;
        width: 100%;
    }

    #column .product-common-block1_text {
        font-size: 2.6rem;
        line-height: 1.48;
        text-align: center;
        color: var(--column-color-red);
    }

    #column .product-common-block1_img {
        max-width: 38.1rem;
        width: 100%;
    }

    #column .product-common-block1_bottom {
        text-align: right;
        font-size: 1.6rem;
        margin-top: 1rem;
        color: var(--column-color-red);
    }

    #column .product-common-block1_contents {
        border-radius: 1rem;
    }

    #column .product-common-block1_content {
        padding: 4.2rem 4.2rem 3.4rem;
    }

    #column .product-common-block1_content-text {
        font-size: 2.6rem;
    }

    #column .product-common-block1_content-body {
        margin-top: 1.2rem;
    }
}

/* -------------------------
ReDの効能効果
------------------------- */
#column .product-effect {
    margin: 3rem 0;
}

#column .product-effect_copy {
    max-width: fit-content;
    width: 100%;
    padding: .3rem .6rem;
    border-radius: .5rem;
    color: #fff;
    background-color: var(--column-color-red);
    margin-inline: auto;
    font-size: 1.1rem;
}

#column .product-effect_title {
    margin-top: 1rem;
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    color: var(--column-color-red);
}

#column .product-effect_items {
    margin-top: 1.6rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

#column .product-effect_item {
    border: 2px solid var(--column-color-red);
    border-radius: .5rem;
    font-size: 2rem;
    min-height: 7.1rem;
    display: grid;
    place-items: center;
    color: var(--column-color-red);
    font-weight: 500;
    letter-spacing: 0.35em;
}

#column .product-effect_contents {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

#column .product-effect_content {
    border: 2px solid var(--column-color-red);
    border-radius: .5rem;
    font-size: 1.7rem;
    min-height: 4rem;
    display: grid;
    place-items: center;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--column-color-red);
}

#column .product-effect_text {
    color: var(--column-color-red);
    font-size: 1.2rem;
    margin-top: 0.4rem;
    text-align: right;
}

@media screen and (min-width: 768px) {
    #column .product-effect {
        margin: 6rem 0;
    }

    #column .product-effect_inner {
        max-width: 88rem;
        width: 100%;
        margin-inline: auto;
    }

    #column .product-effect_copy {
        font-size: 1.8rem;
        padding: .4rem 1.2rem;
    }

    #column .product-effect_title {
        margin-top: 2rem;
        font-size: 2.8rem;
    }

    #column .product-effect_items {
        margin-top: 2.6rem;
        gap: 1.8rem;
    }

    #column .product-effect_item {
        min-height: 7.5rem;
        font-size: 3rem;
        border: 3px solid var(--column-color-red);
        border-radius: 1.2rem;
    }

    #column .product-effect_contents {
        margin-top: 2rem;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.8rem;
    }

    #column .product-effect_content {
        gap: 2rem;
        min-height: 7.5rem;
        font-size: 2.2rem;
        border: 3px solid var(--column-color-red);
        border-radius: 1.2rem;

    }

    #column .product-effect_text {
        font-size: 1.6rem;
        margin-top: 1rem;
    }
}
#column .column-banner1 {
    margin:2rem 0 5rem;
}
#column .column-banner1 a{
    padding: 1rem;
    background-color: #F9F8F6;
    display: flex;
    align-items: center;
}
#column .column-banner1 a>div:has(img){
    max-width: 10rem;
    width: 100%;
    margin-right: 1rem;
}
#column .column-banner1 div:not(:has(img)){
    max-width: 22rem;
    width: 100%;
    flex:1;
}
#column .column-banner1 div:not(:has(img)) p{
    display: none;
}
#column .column-banner1 div:not(:has(img)) div{
    font-size: 1.4rem;
    font-weight: bold;
}
@media screen and (min-width: 768px) {
    #column .column-banner1 {
        margin:4rem 0 6rem;
    }
    #column .column-banner1 a{
        padding: 2rem;
    }
    #column .column-banner1 a>div:has(img){
        max-width: 16rem;
        margin-right: 3rem;
    }
    #column .column-banner1 div:not(:has(img)){
        max-width: 73rem;
    }
    #column .column-banner1 div:not(:has(img)) p{
        display: block;
        font-size: 1.5rem;
        margin:0;
    }
    #column .column-banner1 div:not(:has(img)) div{
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }
}

#column .btn-col2 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 3rem;
}
@media screen and (min-width: 768px) {
    #column .btn-col2 {
        margin: 0 0 4rem 0;
    }
}

@media screen and (min-width: 768px) {
    #column .btn-col2 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 3rem;
    }
}

#column .column-inner>.btn-col2 {
    margin: 3rem 0 4rem;
}

@media screen and (min-width: 768px) {
    #column .column-inner>.btn-col2 {
        margin: 4rem 0 6rem;
    }
}