@charset "utf-8";
/* reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,img,small,strong,sub,sup,b,i,dl,dt,dd,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;line-height:1.7}th{font-style:normal;font-weight:400}ul li{list-style:none}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}body{margin:0;padding:0;font-size:16px;line-height:1.7;font-family:"�E��E� �E�ゴシチE��","�E��E� ゴシチE��",sans-serif,OSAKA,HELVETICA;border:none;background:#FFF}nav ul{list-style:none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}article,aside,figure,footer,header,hgroup,nav,section{display:block}.wrap img{vertical-align:bottom;width:100%;height:auto;display:block;}.footer img{vertical-align:bottom;width:100%;height:auto;display:block}

/* チE��スチE*/
p {
    font-feature-settings: "palt";
    font-family: 'Noto Sans JP', sans-serif;
}

/* Codex 2026-05-23: image position and product CTA fixes */
.product-purchase__image {
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    padding: clamp(18px, 3vw, 34px);
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 34%, rgba(255,255,255,.72), transparent 34%),
        linear-gradient(135deg, #f4f1ea 0%, #d8e2d8 54%, #b9cbbb 100%) !important;
}

.product-purchase__image picture {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}

.product-purchase__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.about-page .visual-hero--about .image-text-section__picture img,
.about-page--refined .visual-hero--about .image-text-section__picture img {
    object-position: 50% 100% !important;
}

.ingredients-page--final .visual-hero--ingredients .image-text-section__picture img {
    object-position: 42% center !important;
}

.howto-page .visual-hero--howto .image-text-section__picture img {
    object-position: 45% center !important;
}

.faq-page .visual-hero--faq .responsive-picture img,
.visual-hero--faq .responsive-picture img {
    object-position: center center !important;
}

@media screen and (min-width: 768px) {
    .product-purchase__image {
        align-self: stretch;
    }
}

@media screen and (max-width: 767px) {
    .about-page .visual-hero--about .image-text-section__picture img,
    .about-page--refined .visual-hero--about .image-text-section__picture img {
        object-position: 75% 85% !important;
    }

    .ingredients-page--final .visual-hero--ingredients .image-text-section__picture img {
        object-position: 75% 85% !important;
    }

    .howto-page .visual-hero--howto .image-text-section__picture img {
        object-position: 75% 20% !important;
    }

    .faq-page .visual-hero--faq .responsive-picture img,
    .visual-hero--faq .responsive-picture img {
        object-position: center center !important;
    }

    .ingredients-page--final .ingredients-image-message {
        aspect-ratio: 1 / 1;
        min-height: auto !important;
        width: calc(100% - 40px);
    }

    .ingredients-page--final .ingredients-image-message__picture img {
        object-fit: cover;
        object-position: 75% center !important;
    }

    .ingredients-page--final .ingredients-image-message__content {
        width: min(62%, 230px);
        margin: 18px 0 0 18px;
    }

    .ingredients-page--final .ingredients-image-message__content h2 {
        font-size: clamp(21px, 5.8vw, 24px);
        line-height: 1.42;
    }

    .ingredients-page--final .ingredients-image-message__content p {
        font-size: 13.5px;
        line-height: 1.78;
    }

    .product-purchase__image {
        width: 100%;
        min-height: 0 !important;
        aspect-ratio: 16 / 10;
        padding: 18px;
    }
}

/* Codex 2026-05-18: brand-site navigation and static subpage additions.
   Scope is intentionally limited to the AICREMA header, mobile menu, and
   static lower pages so the existing TOP visual design stays intact. */
.headerMenu a {
    position: relative;
}

.headerMenu a[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 3000;
    min-width: max-content;
    padding: 6px 10px;
    border-radius: 3px;
    background: rgba(35, 62, 48, 0.96);
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, top .2s ease;
}

.headerMenu a[data-label]:hover::after {
    top: calc(100% + 3px);
    opacity: 1;
}

/* Codex 2026-05-20: shared parts for all eyecrema pages */
.visual-hero__label,
.section-kicker,
.brand-kicker,
.legal-hero__label {
    display: none !important;
}

.page-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
}

.page-hero::before {
    background: linear-gradient(90deg, rgba(12, 43, 31, .62) 0%, rgba(12, 43, 31, .28) 48%, rgba(12, 43, 31, .06) 100%);
}

.page-hero__content {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .26);
}

.page-hero__title {
    letter-spacing: 0;
}

.page-hero__lead {
    color: rgba(255, 255, 255, .92);
}

.page-next,
.brand-cta.page-next,
.subpage-cta.page-next {
    background: #103426;
    color: #fff;
    text-align: center;
}

.page-next h2,
.page-next p {
    color: inherit;
}

.page-next__buttons,
.brand-cta__links.page-next__buttons,
.subpage-cta__links.page-next__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.page-next a,
.page-next a:link,
.page-next a:visited,
.page-next__button,
.page-next__button:link,
.page-next__button:visited {
    color: #103426;
    background: #fff;
    border-color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.page-next a:hover,
.page-next a:focus {
    color: #103426;
    background: #f3efe5;
    opacity: 1;
    text-decoration: none;
}

.routine-section {
    position: relative;
    overflow: hidden;
}

.routine-section__content {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

header .hamburger p,
.hamburger p {
    display: none !important;
}

@media screen and (max-width: 767px) {
    body {
        padding-top: 64px;
    }

    header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 1px 14px rgba(16, 52, 38, .12);
    }

    #headerWrap_1 {
        position: relative;
        z-index: 10002;
        background: rgba(255, 255, 255, .96);
    }

    .hamburger {
        position: fixed !important;
        top: 12px !important;
        right: 14px !important;
        z-index: 10003 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        background: #fff;
        border: 1px solid rgba(16, 52, 38, .35);
    }

    nav.globalMenuSp,
    header .globalMenuSp {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10001 !important;
        padding-top: 76px;
        background: rgba(16, 52, 38, .97);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .24s ease, visibility .24s ease;
    }

    nav.globalMenuSp.active,
    header .globalMenuSp.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .page-hero::before {
        background: linear-gradient(180deg, rgba(12, 43, 31, .08) 0%, rgba(12, 43, 31, .18) 42%, rgba(12, 43, 31, .34) 100%);
    }

    .page-hero__content {
        background: rgba(12, 43, 31, .34);
        border-radius: 16px;
        padding: 22px 18px;
    }

    .page-next,
    .brand-cta.page-next,
    .subpage-cta.page-next {
        padding-left: 20px;
        padding-right: 20px;
    }

    .page-next__buttons a,
    .brand-cta__links.page-next__buttons a,
    .subpage-cta__links.page-next__buttons a {
        width: 100%;
        max-width: 290px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        box-sizing: border-box;
    }

    .routine-section__content {
        background: rgba(12, 43, 31, .42);
        line-height: 1.85;
    }
}

/* Codex 2026-05-20: pinpoint fixes after common-parts sync */
.routine-section,
.about-routine-section,
.howto-routine-section.image-text-section {
    width: min(1120px, calc(100% - 48px)) !important;
    max-width: 1120px !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 8px;
    overflow: hidden;
}

.routine-section .image-text-section__bg,
.about-routine-section .image-text-section__bg,
.howto-routine-section.image-text-section .image-text-section__bg {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 0 !important;
}

.routine-section__content,
.about-routine-section .howto-routine-section__body,
.howto-routine-section .howto-routine-section__body {
    max-width: 540px !important;
}

.page-next,
.brand-cta.page-next,
.subpage-cta.page-next {
    width: min(1120px, calc(100% - 48px)) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 8px;
}

.page-next .page-next__buttons a,
.page-next .brand-cta__links a,
.page-next .subpage-cta__links a,
.page-next a:link,
.page-next a:visited {
    background: #fff !important;
    color: #123629 !important;
    border: 1px solid rgba(255, 255, 255, .75) !important;
    text-decoration: none !important;
}

.page-next .page-next__buttons a:hover,
.page-next .page-next__buttons a:focus,
.page-next .brand-cta__links a:hover,
.page-next .brand-cta__links a:focus,
.page-next .subpage-cta__links a:hover,
.page-next .subpage-cta__links a:focus {
    background: #f3efe5 !important;
    color: #123629 !important;
    opacity: 1;
}

.product-purchase__button,
.product-purchase__button:link,
.product-purchase__button:visited {
    background: #123629 !important;
    color: #fff !important;
    border: 1px solid #123629 !important;
    text-decoration: none !important;
}

.product-purchase__button:hover,
.product-purchase__button:focus {
    background: #0b2a20 !important;
    color: #fff !important;
    opacity: 1;
}

.page-next .page-next__buttons a,
.page-next .page-next__buttons a:link,
.page-next .page-next__buttons a:visited,
.page-next .brand-cta__links a,
.page-next .brand-cta__links a:link,
.page-next .brand-cta__links a:visited,
.page-next .subpage-cta__links a,
.page-next .subpage-cta__links a:link,
.page-next .subpage-cta__links a:visited {
    background: #fff !important;
    color: #123629 !important;
    -webkit-text-fill-color: #123629 !important;
    border: 1px solid rgba(255, 255, 255, .75) !important;
    text-decoration: none !important;
}

.product-purchase__button,
.product-purchase__button:link,
.product-purchase__button:visited {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

@media screen and (max-width: 767px) {
    .routine-section,
    .about-routine-section,
    .howto-routine-section.image-text-section,
    .page-next,
    .brand-cta.page-next,
    .subpage-cta.page-next {
        width: calc(100% - 32px) !important;
        max-width: none !important;
    }

    .routine-section__content,
    .about-routine-section .howto-routine-section__body,
    .howto-routine-section .howto-routine-section__body {
        max-width: calc(100% - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* AICREMA brand header/footer and purchase area */
.headLogo--text {
    display: flex;
    align-items: center;
}

.brand-text-logo,
.brand-text-logo:link,
.brand-text-logo:visited {
    display: inline-flex;
    align-items: center;
    min-height: 54px;
    padding: 0 18px;
    color: #173326;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-decoration: none;
}

.brand-text-logo:hover,
.brand-text-logo:focus {
    color: #244033;
    text-decoration: none;
}

.headerMenu.headerMenu--jp .headerTitle {
    font-size: 14px;
    letter-spacing: .08em;
}

.product-purchase {
    width: min(1120px, calc(100% - 48px));
    margin: clamp(46px, 7vw, 86px) auto;
    border: 1px solid rgba(36, 64, 51, .14);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(231,225,215,.72)),
        #f7f5ef;
    box-shadow: 0 22px 54px rgba(28, 54, 41, .1);
    overflow: hidden;
}

.product-purchase__inner {
    display: grid;
    grid-template-columns: minmax(240px, .42fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 62px);
    padding: clamp(28px, 5vw, 56px);
}

.product-purchase__image {
    display: grid;
    place-items: center;
    min-height: 280px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 26%, rgba(255,255,255,.5), transparent 28%),
        linear-gradient(135deg, #e8e2d6, #b8c8b9 54%, #173326);
}

.product-purchase__image picture,
.product-purchase__image img {
    display: block;
    max-width: min(180px, 70%);
    height: auto;
}

.product-purchase__category {
    margin: 0 0 12px;
    color: #2b684d;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
}

.product-purchase__name {
    margin: 0;
    color: #173326;
    font-family: Georgia, "Times New Roman", "Yu Mincho", serif;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.25;
}

.product-purchase__description {
    margin: 18px 0 0;
    color: #3e5147;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.9;
}

.product-purchase__specs {
    display: grid;
    gap: 0;
    margin: 24px 0 30px;
    border-top: 1px solid rgba(36, 64, 51, .16);
}

.product-purchase__specs div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(36, 64, 51, .16);
}

.product-purchase__specs dt {
    color: #5a6b61;
    font-size: 13px;
    font-weight: 700;
}

.product-purchase__specs dd {
    margin: 0;
    color: #173326;
    font-weight: 700;
}

.product-purchase__price {
    font-size: 20px;
}

.product-purchase__button,
.product-purchase__button:link,
.product-purchase__button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 52px;
    padding: 14px 26px;
    border-radius: 999px;
    background: #173326;
    color: #fff;
    font-weight: 700;
    letter-spacing: .08em;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(23, 51, 38, .22);
}

.product-purchase__button:hover,
.product-purchase__button:focus {
    background: #244033;
    color: #fff;
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    header {
        display: flex;
        align-items: stretch;
        min-height: 80px;
    }

    #headerWrap_1 {
        flex: 0 0 300px;
        max-width: none;
        margin: 0;
    }

    #headerWrap_2 {
        flex: 1 1 auto;
        max-width: none;
        margin: 0;
    }

    #headerWrap_1 .headBox,
    #headerWrap_2 .headBox {
        position: static;
        height: 80px;
        box-shadow: none;
    }

    .headLogo.headLogo--text {
        position: static;
        height: 100%;
        margin: 0;
        padding-left: 32px;
    }

    .brand-text-logo,
    .brand-text-logo:link,
    .brand-text-logo:visited {
        min-height: 80px;
        padding: 0;
    }

    .headerMenu.headerMenu--jp {
        width: 100%;
        height: 80px;
        margin-left: 0;
        grid-template-columns: repeat(6, minmax(118px, 1fr));
    }

    .headerMenu.headerMenu--jp .headerTitle {
        min-height: 80px;
        padding: 0 12px;
        word-break: keep-all;
        overflow-wrap: normal;
    }
}

.site-footer__logo,
.site-footer__logo:link,
.site-footer__logo:visited {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    color: #fff;
    text-decoration: none;
}

.site-footer__logo span {
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.15;
}

.site-footer__logo small {
    color: rgba(255,255,255,.78);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
}

.subpage-main {
    background: #f8f7f2;
    color: #1f3328;
}

.subpage-hero {
    padding: clamp(90px, 12vw, 150px) 24px clamp(48px, 8vw, 86px);
    background:
        linear-gradient(120deg, rgba(255,255,255,.9), rgba(237,245,238,.86)),
        url("../img/eye-bg.jpg") center/cover no-repeat;
    text-align: center;
}

.subpage-eyebrow {
    margin-bottom: 18px;
    color: var(--brand-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
}

.subpage-hero h1 {
    margin: 0;
    color: #253c2f;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 900;
    line-height: 1.35;
}

.subpage-lead {
    max-width: 760px;
    margin: 26px auto 0;
    color: #3f5148;
    font-size: 17px;
    line-height: 2;
}

.subpage-content {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(46px, 7vw, 84px) 24px;
}

.subpage-section {
    padding: 34px 0;
    border-top: 1px solid rgba(35, 62, 48, .2);
}

.subpage-section h2 {
    margin: 0 0 16px;
    color: #253c2f;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    line-height: 1.55;
}

.subpage-section p,
.subpage-section li {
    color: #394b42;
    font-size: 16px;
    line-height: 2;
}

.subpage-section ul {
    margin: 0;
    padding-left: 1.2em;
}

.article-card {
    display: grid;
    gap: 14px;
    padding: 28px;
    border: 1px solid rgba(35, 62, 48, .18);
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    color: #253c2f !important;
    box-shadow: 0 10px 28px rgba(35, 62, 48, .08);
}

.article-card strong {
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: 24px;
}

.article-card span {
    color: var(--brand-color);
    font-weight: 700;
}

/* Codex 2026-05-18: publish-ready content modules for ingredients/howto/faq/article pages. */
.subpage-hero--brand {
    background:
        linear-gradient(120deg, rgba(255,255,255,.92), rgba(235,240,231,.88)),
        linear-gradient(135deg, #f7f4ed, #d9e3d8);
}

.section-kicker {
    margin: 0 0 12px;
    color: #2b684d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
}

.detail-split {
    display: grid;
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
    gap: clamp(24px, 5vw, 68px);
}

.detail-highlight {
    margin: 34px 0;
    padding: clamp(30px, 5vw, 56px);
    border: 1px solid rgba(36, 64, 51, .12);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(29, 52, 41, .08);
}

.detail-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    border-top: none;
}

.detail-card-grid article {
    padding: clamp(26px, 4vw, 42px);
    border: 1px solid rgba(36, 64, 51, .14);
    border-radius: 8px;
    background: rgba(255,255,255,.82);
}

.ingredient-grid,
.step-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.ingredient-grid article,
.step-cards article {
    min-height: 132px;
    padding: 22px;
    border: 1px solid rgba(36, 64, 51, .14);
    border-radius: 8px;
    background: #fff;
}

.ingredient-grid span,
.step-cards span {
    display: block;
    margin-bottom: 12px;
    color: #2b684d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 700;
}

.ingredient-grid strong,
.step-cards h3 {
    display: block;
    color: #173326;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.55;
}

.ingredient-grid small {
    display: block;
    margin-top: 8px;
    color: #5a6b61;
    font-size: 12px;
    line-height: 1.7;
}

.step-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.step-cards p {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.8;
}

.free-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px !important;
    padding-left: 0 !important;
}

.free-list li {
    padding: 10px 14px;
    border-radius: 999px;
    background: #edf3ed;
    color: #244033;
    font-weight: 700;
    list-style: none;
    text-align: center;
}

.all-ingredients {
    padding: 24px;
    border-radius: 8px;
    background: #fff;
    font-size: 14px !important;
    line-height: 2 !important;
}

.faq-list {
    display: grid;
    gap: 14px;
}

.faq-list article {
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid rgba(36, 64, 51, .13);
    border-radius: 8px;
    background: #fff;
}

.faq-list h2 {
    margin: 0 0 12px;
    color: #173326;
    font-size: clamp(18px, 2.4vw, 23px);
    font-weight: 700;
    line-height: 1.6;
}

.faq-list p {
    margin: 0;
    color: #394b42;
    font-size: 16px;
    line-height: 1.9;
}


.faq-answer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
}

.faq-answer__label {
    color: #173326;
    font-weight: 700;
}

.faq-answer__body {
    display: grid;
    gap: 8px;
}
.article-body {
    max-width: 920px;
}

.article-hero {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(320px, .62fr);
    gap: clamp(34px, 6vw, 72px);
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(78px, 10vw, 128px) 24px clamp(52px, 8vw, 92px);
    background:
        radial-gradient(circle at 82% 18%, rgba(196, 214, 199, .22), transparent 26%),
        linear-gradient(180deg, #f8f7f2, #f2f3ed);
}

.article-hero__text .subpage-eyebrow {
    margin-bottom: 20px;
    text-align: left;
}

.article-hero__text h1 {
    margin: 0;
    color: #173326;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 700;
    line-height: 1.24;
}

.article-hero__text p:not(.subpage-eyebrow) {
    max-width: 680px;
    margin: 28px 0 0;
    color: #344a3e;
    font-size: clamp(16px, 2vw, 19px);
    line-height: 2;
}

.article-hero__image {
    min-height: 0;
}

.subpage-cta {
    margin-top: clamp(44px, 7vw, 78px);
    padding: clamp(36px, 6vw, 64px);
    border-radius: 8px;
    background: linear-gradient(135deg, #173326, #275c43);
    color: #fff;
    text-align: center;
}

.subpage-cta h2 {
    margin: 0;
    color: #fff;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(25px, 3.4vw, 38px);
    font-weight: 700;
    line-height: 1.45;
}

.subpage-cta p {
    margin: 18px auto 0;
    max-width: 620px;
    color: rgba(255,255,255,.86);
    font-size: 16px;
    line-height: 1.9;
}

.subpage-cta__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.subpage-cta__links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    min-height: 52px;
    padding: 0 22px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.subpage-cta__links a:hover {
    background: rgba(255,255,255,.16);
}

/* Codex 2026-05-18: image-first lower-page visual frames with graceful placeholders. */
.visual-frame {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    min-height: 260px;
    border-radius: 8px;
    background:
        var(--visual-image),
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.36), transparent 24%),
        linear-gradient(135deg, #e7e1d7, #b9c7b7 48%, #244033);
    background-position: center;
    background-size: cover;
    box-shadow: 0 22px 54px rgba(28, 54, 41, .12);
}

.responsive-picture {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}

.responsive-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visual-frame > .responsive-picture,
.brand-image-frame > .responsive-picture,
.brand-photo > .responsive-picture,
.brand-wide-photo > .responsive-picture,
.contents-card__image > .responsive-picture,
.botanical-card__media > .responsive-picture {
    z-index: 0;
}

.visual-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(120deg, rgba(255,255,255,.18), transparent 38%),
        linear-gradient(180deg, transparent, rgba(23,51,38,.16));
}

.visual-frame__label {
    position: absolute;
    right: 16px;
    bottom: 14px;
    z-index: 2;
    max-width: calc(100% - 32px);
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 999px;
    background: rgba(23, 51, 38, .68);
    color: rgba(255,255,255,.86);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.35;
}

/* Production pages use real image slots, so placeholder file-name labels stay hidden. */
.visual-frame__label,
.image-placeholder__label,
.page-visual__label,
.responsive-picture__label {
    display: none !important;
}

.visual-frame--hero {
    max-width: 1040px;
    min-height: clamp(320px, 42vw, 520px);
    margin: clamp(34px, 6vw, 64px) auto 0;
}

.visual-frame--square {
    aspect-ratio: 1 / 1;
    min-height: 0;
}

.visual-frame--wide {
    aspect-ratio: 16 / 9;
    min-height: 0;
}

.visual-frame--compact {
    margin: 18px 0 22px;
}

.visual-frame--ingredients {
    background:
        var(--visual-image),
        radial-gradient(circle at 80% 28%, rgba(255,255,255,.36), transparent 22%),
        linear-gradient(135deg, #e9e2d7, #b4c6b6 48%, #173326);
    background-position: center;
    background-size: cover;
}

/* Codex 2026-05-18: integrated text-over-image hero for lower pages. */
.visual-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 520px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(23, 51, 38, .88), rgba(23, 51, 38, .52) 52%, rgba(23, 51, 38, .26)),
        var(--visual-hero-image),
        radial-gradient(circle at 75% 22%, rgba(255,255,255,.24), transparent 25%),
        linear-gradient(135deg, #173326, #7f9488 58%, #e7e1d7);
    background-position: center;
    background-size: cover;
    color: #fff;
}

.page-visual__image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page-visual__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(23, 51, 38, .88), rgba(23, 51, 38, .52) 52%, rgba(23, 51, 38, .26)),
        linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.18));
}

.visual-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.18));
}

.visual-hero__inner {
    position: relative;
    z-index: 2;
    width: min(1080px, calc(100% - 48px));
    margin: 0 auto;
    padding: clamp(78px, 10vw, 122px) 0 clamp(56px, 8vw, 92px);
}

.visual-hero__label {
    margin: 0 0 18px;
    color: rgba(255,255,255,.84);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
}

.visual-hero__title {
    margin: 0;
    color: #fff;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(42px, 7vw, 78px);
    font-weight: 700;
    line-height: 1.2;
}

.visual-hero__lead {
    max-width: 700px;
    margin: 26px 0 0;
    color: rgba(255,255,255,.9);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 2;
}

.visual-hero--faq {
    min-height: 500px;
}

.visual-hero--ingredients {
    min-height: 540px;
}

.detail-split--visual {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    align-items: center;
}

.ingredient-percent {
    display: grid;
    grid-template-columns: minmax(170px, .32fr) minmax(0, 1fr);
    gap: clamp(22px, 5vw, 60px);
    align-items: center;
}

.ingredient-percent__number {
    color: #173326;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(76px, 12vw, 148px);
    font-weight: 700;
    line-height: .9;
}

.botanical-section__head {
    max-width: 760px;
    margin-bottom: 10px;
}

.botanical-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 28px);
    margin-top: clamp(34px, 5vw, 58px);
}

.botanical-card {
    overflow: hidden;
    border: 1px solid rgba(36, 64, 51, .14);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(28, 54, 41, .08);
    transition: transform .28s ease, box-shadow .28s ease;
}

.botanical-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(28, 54, 41, .14);
}

.botanical-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background:
        var(--botanical-image),
        radial-gradient(circle at 28% 22%, rgba(255,255,255,.34), transparent 26%),
        linear-gradient(135deg, #e7e1d7, #b9c7b7 52%, #244033);
    background-position: center;
    background-size: cover;
}

.botanical-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(23,51,38,.05), rgba(23,51,38,.72));
    transition: transform .35s ease;
}

.botanical-card:hover .botanical-card__media::before {
    transform: scale(1.04);
}

.botanical-card__overlay {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 24px 20px;
}

.botanical-card__num {
    display: block;
    margin-bottom: 8px;
    color: rgba(255,255,255,.72);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
}

.botanical-card__title {
    margin: 0;
    color: #fff;
    font-size: clamp(19px, 2vw, 24px);
    font-weight: 700;
    line-height: 1.45;
}

.botanical-card__body {
    min-height: 82px;
    margin: 0;
    padding: 18px 20px 22px;
    color: #3e5147;
    font-size: 14px;
    line-height: 1.8;
}

.botanical-card__note {
    color: #5a6b61;
    font-size: 13px;
}

.texture-section {
    display: grid;
    gap: 28px;
}

.step-cards .visual-frame {
    margin-bottom: 20px;
    box-shadow: none;
}

/* Codex 2026-05-19: clearer how-to method layout for AICREMA. */
.howto-page .section-kicker {
    color: #2b684d;
    letter-spacing: .08em;
}

.howto-page .visual-frame__label,
.howto-page .image-placeholder__label,
.howto-page .page-visual__label {
    display: none;
}

.howto-page .image-text-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, #123629 0%, #e8e3d8 50%, #123629 100%);
}

.howto-page .image-text-section__bg {
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100%;
    max-width: 1600px;
    height: 100%;
    margin: 0 auto;
    transform: translateX(-50%);
}

.howto-page .image-text-section__picture,
.howto-page .image-text-section__picture img {
    display: block;
    width: 100%;
    height: 100%;
}

.howto-page .image-text-section__picture img {
    object-fit: cover;
    object-position: center center;
}

.howto-page .image-text-section--hero .image-text-section__picture img {
    object-position: 50% 18%;
}

.howto-page .image-text-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(16, 52, 38, .76) 0%,
        rgba(16, 52, 38, .5) 34%,
        rgba(16, 52, 38, .14) 68%,
        rgba(16, 52, 38, .02) 100%
    );
}

.howto-page .image-text-section__inner {
    position: relative;
    z-index: 2;
}

.howto-page .page-visual__image::after,
.howto-page .howto-routine-section__image::after {
    display: none;
}

.howto-page .visual-hero {
    background:
        linear-gradient(90deg, rgba(16, 52, 38, .78), rgba(16, 52, 38, .38) 54%, rgba(16, 52, 38, .05)),
        var(--visual-hero-image),
        linear-gradient(135deg, #173326, #7f9488 58%, #e7e1d7);
    background-position: center;
    background-size: cover;
}

.howto-page .visual-hero::before {
    background:
        linear-gradient(90deg, rgba(8, 29, 21, .62), rgba(16, 52, 38, .24) 54%, rgba(16, 52, 38, .04)),
        linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18));
}

.howto-page .visual-hero__inner {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.28);
}

.howto-page .visual-hero__label,
.howto-page .visual-hero__title,
.howto-page .visual-hero__lead {
    color: #fff;
}

.about-page--refined .image-text-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, #123629 0%, #e8e3d8 50%, #123629 100%);
}

.about-page--refined .image-text-section__bg {
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100%;
    max-width: 1600px;
    height: 100%;
    transform: translateX(-50%);
    margin: 0 auto;
}

.about-page--refined .image-text-section__picture,
.about-page--refined .image-text-section__picture img {
    display: block;
    width: 100%;
    height: 100%;
}

.about-page--refined .image-text-section__picture img {
    object-fit: cover;
    object-position: center center;
}

.about-page--refined .image-text-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(8, 29, 21, .58), rgba(16, 52, 38, .24) 56%, rgba(16, 52, 38, .04)),
        linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.16));
}

.about-page--refined .image-text-section__inner {
    position: relative;
    z-index: 2;
}

.about-page--refined .visual-hero {
    min-height: 540px;
    background:
        linear-gradient(90deg, rgba(16, 52, 38, .72), rgba(16, 52, 38, .3) 54%, rgba(16, 52, 38, .04)),
        var(--visual-hero-image),
        linear-gradient(135deg, #173326, #87988d 58%, #e7e1d7);
    background-position: center;
    background-size: cover;
}

.about-page--refined .visual-hero__inner {
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.28);
}

.about-page--refined .visual-hero__label,
.about-page--refined .visual-hero__title,
.about-page--refined .visual-hero__lead,
.about-page--refined .visual-hero__statement {
    color: #fff;
}

.about-page--refined .visual-hero__statement {
    max-width: 760px;
    margin: 22px 0 0;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.55;
}

.about-page--refined .visual-hero__lead--sub {
    margin-top: 16px;
}

.about-content {
    padding-top: clamp(54px, 8vw, 90px);
}

.about-lead-panel {
    max-width: 980px;
    margin-inline: auto;
    padding: clamp(28px, 4vw, 44px);
    border-left: 4px solid #173326;
    background: rgba(255,255,255,.74);
    box-shadow: 0 18px 42px rgba(23, 51, 38, .07);
}

.about-lead-panel p {
    color: #273d31;
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 2;
}

.about-story-section h2,
.about-values-section h2 {
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.45;
}

.about-story-section p {
    line-height: 2.05;
}

.detail-split--reverse > figure {
    order: -1;
}

.about-visual-frame {
    min-height: 380px;
}

.about-section-head {
    max-width: 800px;
    margin: 0 auto clamp(30px, 4vw, 46px);
    text-align: center;
}

.about-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 28px);
}

.about-value-grid article {
    min-height: 220px;
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid rgba(23, 51, 38, .14);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(23, 51, 38, .07);
}

.about-value-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: #173326;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.about-value-grid h3 {
    margin: 0 0 14px;
    color: #173326;
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 700;
    line-height: 1.5;
}

.about-value-grid p {
    color: #42574c;
    line-height: 1.9;
}

.about-routine-section {
    background:
        linear-gradient(90deg, rgba(16, 52, 38, .7), rgba(16, 52, 38, .25) 58%, rgba(16, 52, 38, .04)),
        var(--routine-image),
        linear-gradient(135deg, #173326, #6f8578);
    background-position: center;
    background-size: cover;
}

.about-routine-section .howto-routine-section__body {
    background: rgba(8, 29, 21, .54);
}

.about-page--editorial {
    background: #f7f4ee;
}

.about-page--editorial .visual-hero__title {
    max-width: 820px;
    font-size: clamp(44px, 6.7vw, 82px);
    line-height: 1.2;
}

.about-page--editorial .visual-hero__lead {
    max-width: 680px;
}

.about-editorial-intro {
    width: min(980px, calc(100% - 48px));
    margin: 0 auto;
    padding: clamp(72px, 10vw, 118px) 0 clamp(54px, 8vw, 88px);
    text-align: center;
}

.about-editorial-intro h2,
.about-method-band__copy h2,
.about-editorial-card h2 {
    color: #173326;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-weight: 700;
    letter-spacing: .02em;
}

.about-editorial-intro h2 {
    margin: 0;
    font-size: clamp(34px, 5.4vw, 62px);
    line-height: 1.45;
}

.about-editorial-intro p:not(.section-kicker) {
    max-width: 720px;
    margin: 26px auto 0;
    color: #344a3f;
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 2;
}

.about-target-section {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto clamp(70px, 9vw, 112px);
}

.about-target-section__head {
    max-width: 780px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.about-target-section__head h2 {
    margin: 0;
    color: #173326;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(32px, 4.8vw, 56px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .02em;
}

.about-target-section__head p {
    margin-top: 18px;
    color: #3e5147;
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.9;
}

.about-target-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 2.2vw, 24px);
    align-items: stretch;
}

.about-target-visual {
    position: relative;
    min-height: auto;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border-radius: 8px;
    background:
        radial-gradient(circle at 24% 18%, rgba(255,255,255,.52), transparent 28%),
        linear-gradient(135deg, #e8e3d8 0%, #b8c6ba 48%, #173326 100%);
    box-shadow: 0 18px 46px rgba(23, 51, 38, .08);
}

.about-target-visual picture,
.about-target-visual img {
    display: block;
    width: 100%;
    height: 100%;
}

.about-target-visual img {
    object-fit: cover;
}

.about-target-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 20px);
}

.about-target-card {
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(23, 51, 38, .08);
    padding: 22px 20px 24px;
}

.about-target-card h3 {
    color: #173326;
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 700;
    line-height: 1.55;
}

.about-target-card p {
    margin-top: 12px;
    color: #4d6157;
    font-size: 15px;
    line-height: 1.85;
}

.about-image-message {
    position: relative;
    display: grid;
    align-items: center;
    width: min(1120px, calc(100% - 48px));
    min-height: clamp(460px, 52vw, 620px);
    margin: 0 auto clamp(70px, 9vw, 118px);
    overflow: hidden;
    border-radius: 8px;
    background:
        radial-gradient(circle at 80% 22%, rgba(255,255,255,.22), transparent 26%),
        linear-gradient(135deg, #173326 0%, #8fa294 58%, #e8e3d8 100%);
    color: #fff;
}

.about-image-message__picture {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.about-image-message__picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.about-image-message::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(16, 52, 38, .72), rgba(16, 52, 38, .38) 52%, rgba(16, 52, 38, .08));
    pointer-events: none;
}

.about-image-message__content {
    position: relative;
    z-index: 2;
    width: min(620px, calc(100% - 64px));
    margin-left: clamp(28px, 6vw, 72px);
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.26);
}

.about-image-message__content h2 {
    margin: 0;
    color: #fff;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(32px, 4.6vw, 56px);
    font-weight: 700;
    line-height: 1.42;
}

.about-image-message__content p {
    margin-top: 22px;
    color: rgba(255,255,255,.9);
    font-size: clamp(15px, 1.65vw, 18px);
    line-height: 1.95;
}

.about-daily-section {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(24px, 5vw, 64px);
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto clamp(70px, 9vw, 118px);
}

.about-daily-section__image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 3 / 2;
    background:
        radial-gradient(circle at 24% 18%, rgba(255,255,255,.45), transparent 28%),
        linear-gradient(135deg, #e8e3d8 0%, #b8c6ba 48%, #173326 100%);
    box-shadow: 0 18px 46px rgba(23, 51, 38, .08);
}

.about-daily-section__image picture,
.about-daily-section__image img {
    display: block;
    width: 100%;
    height: 100%;
}

.about-daily-section__image img {
    object-fit: cover;
}

.about-page--refined .visual-hero--about {
    min-height: clamp(480px, 54vw, 640px);
}

.about-page--refined .visual-hero--about .image-text-section__picture img {
    object-fit: cover;
    object-position: 58% 22%;
}

.about-daily-section__content h2 {
    margin: 0;
    color: #173326;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(30px, 4.4vw, 54px);
    font-weight: 700;
    line-height: 1.45;
}

.about-daily-section__content p {
    margin-top: 22px;
    color: #3e5147;
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.95;
}

.about-editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto clamp(70px, 9vw, 118px);
    gap: clamp(18px, 3vw, 28px);
}

.about-editorial-card {
    min-height: clamp(360px, 38vw, 520px);
    border-radius: 8px;
    overflow: hidden;
}

.about-editorial-card--visual {
    position: relative;
    display: grid;
    place-items: stretch;
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.4), transparent 28%),
        linear-gradient(135deg, #e7e1d7, #9aafa0 54%, #173326);
}

.about-editorial-card--visual picture,
.about-editorial-card--visual img {
    display: block;
    width: 100%;
    height: 100%;
}

.about-editorial-card--visual img {
    object-fit: cover;
}

.about-editorial-card--text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 5vw, 64px);
    background: #fff;
    box-shadow: 0 18px 46px rgba(23, 51, 38, .08);
}

.about-editorial-card--text h2 {
    margin: 0;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.42;
}

.about-editorial-card--text p:not(.section-kicker) {
    margin-top: 24px;
    color: #3e5147;
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 2;
}

.about-editorial-card--dark {
    background: #173326;
}

.about-editorial-card--dark .section-kicker,
.about-editorial-card--dark h2,
.about-editorial-card--dark p {
    color: #fff;
}

.about-editorial-card--dark p:not(.section-kicker) {
    color: rgba(255,255,255,.82);
}

.about-method-band {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto clamp(70px, 9vw, 118px);
    padding: clamp(44px, 6vw, 72px);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(231,225,215,.74)),
        #eee9df;
    box-shadow: 0 22px 58px rgba(23, 51, 38, .09);
}

.about-method-band__copy {
    max-width: 780px;
}

.about-method-band__copy h2 {
    margin: 0;
    font-size: clamp(32px, 4.6vw, 58px);
    line-height: 1.45;
}

.about-method-band__copy p:not(.section-kicker) {
    margin-top: 22px;
    color: #3e5147;
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 2;
}

.about-method-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: clamp(34px, 5vw, 54px);
}

.about-method-points article {
    padding: 26px;
    border-left: 1px solid rgba(23, 51, 38, .2);
    background: rgba(255,255,255,.42);
}

.about-method-points span {
    display: block;
    color: #2d684d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
}

.about-method-points strong {
    display: block;
    margin-top: 10px;
    color: #173326;
    font-size: 22px;
    line-height: 1.45;
}

.about-method-points p {
    margin-top: 12px;
    color: #4d6157;
    line-height: 1.8;
}

.about-editorial-cta {
    margin-top: clamp(70px, 9vw, 110px);
}

.howto-note {
    margin-top: 22px;
    padding: 18px 20px;
    border-left: 3px solid #2b684d;
    background: rgba(231, 225, 215, .42);
    color: #3e5147;
    font-size: 14px;
    line-height: 1.9;
}

.howto-order-visual::after {
    content: none;
    position: absolute;
    left: 24px;
    top: 24px;
    z-index: 2;
    max-width: calc(100% - 48px);
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(12, 38, 28, .86);
    color: #fffdf4;
    font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", sans-serif;
    font-size: clamp(13px, 1.7vw, 16px);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.55;
    text-shadow: none;
    box-shadow: 0 12px 28px rgba(12, 38, 28, .22);
}

.howto-method-section {
    padding: clamp(42px, 6vw, 72px);
    border: 1px solid rgba(36, 64, 51, .12);
    background:
        linear-gradient(135deg, rgba(255,255,255,.9), rgba(231,225,215,.56)),
        #f7f5ef;
}

.howto-method-head {
    max-width: 780px;
    margin-bottom: clamp(30px, 5vw, 52px);
}

.howto-method-head h2 {
    margin-bottom: 18px;
}

.howto-method-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 34px);
}

.howto-step-card {
    position: relative;
    padding: 0 0 26px;
    overflow: hidden;
    border: 1px solid rgba(36, 64, 51, .14);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(28, 54, 41, .08);
}

.howto-step-card .visual-frame {
    border-radius: 0;
    box-shadow: none;
}

.howto-step-card__num {
    display: inline-block;
    margin: 24px 24px 12px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #173326;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
}

.howto-step-card h3 {
    margin: 0 24px 12px;
    color: #173326;
    font-size: clamp(22px, 2.5vw, 30px);
}

.howto-step-card p {
    margin: 0 24px;
    color: #3e5147;
    line-height: 1.9;
}

.howto-point-grid article {
    background: #fff;
}

.howto-routine-section {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    display: grid;
    align-items: center;
    padding: clamp(44px, 7vw, 78px);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(8, 29, 21, .84), rgba(16, 52, 38, .46)),
        var(--routine-image),
        linear-gradient(135deg, #173326, #6f8578);
    background-position: center;
    background-size: cover;
    color: #fff;
}

.howto-routine-section__image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.howto-routine-section__body {
    position: relative;
    z-index: 1;
    max-width: 680px;
    padding: clamp(30px, 4.5vw, 48px);
    border-radius: 8px;
    background: rgba(12, 38, 28, .5);
    text-shadow: 0 2px 10px rgba(0,0,0,.22);
}

.howto-routine-section__body p {
    line-height: 2;
}

.howto-routine-section .section-kicker,
.howto-routine-section h2,
.howto-routine-section p {
    color: #fff;
}

.howto-routine-section h2 {
    margin-bottom: 22px;
}

.faq-anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 clamp(34px, 5vw, 56px);
}

.faq-anchor-nav a,
.faq-anchor-nav a:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid rgba(36, 64, 51, .2);
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    color: #244033;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.faq-anchor-nav a:hover,
.faq-anchor-nav a:focus {
    background: #244033;
    color: #fff;
}

.faq-list__heading {
    margin: 30px 0 6px;
    color: #173326;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
}

.article-visual-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr);
    gap: clamp(24px, 5vw, 56px);
    align-items: center;
}

.article-visual-section--reverse > div:first-child {
    grid-column: 2;
}

.article-visual-section--reverse > .visual-frame {
    grid-column: 1;
    grid-row: 1;
}

.article-point-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.article-point-grid article {
    padding: 26px;
    border: 1px solid rgba(36, 64, 51, .14);
    border-radius: 8px;
    background: #fff;
}

.article-point-grid .visual-frame {
    margin-bottom: 22px;
    box-shadow: none;
}

@media screen and (max-width: 1100px) and (min-width: 752px) {
    .botanical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Codex 2026-05-18: article-card grid for the eye-care guide index. */
.contents-list {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(58px, 8vw, 104px) 24px clamp(76px, 10vw, 128px);
}

.contents-list__head {
    margin-bottom: clamp(34px, 5vw, 58px);
}

.contents-list__head .subpage-eyebrow {
    margin-bottom: 12px;
    text-align: left;
}

.contents-list__head h2 {
    margin: 0;
    color: #173326;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.45;
}

.contents-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(26px, 4vw, 42px) clamp(20px, 3vw, 34px);
}

.contents-card {
    display: block;
    color: #173326;
    text-decoration: none;
    transition: transform .28s ease, opacity .28s ease;
}

.contents-card:hover {
    transform: translateY(-6px);
}

.contents-card__image {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background:
        var(--contents-image),
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%),
        linear-gradient(135deg, #e6e1d6, #aebfae 52%, #244033);
    background-position: center;
    background-size: cover;
    box-shadow: 0 20px 44px rgba(28, 54, 41, .12);
}

.contents-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(23,51,38,0), rgba(23,51,38,.12));
    transition: transform .35s ease, opacity .35s ease;
}

.contents-card:hover .contents-card__image::after {
    transform: scale(1.04);
}

.contents-card__body {
    display: block;
    padding-top: 22px;
}

.contents-card__category {
    display: block;
    margin-bottom: 10px;
    color: #2b684d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
}

.contents-card__title {
    display: block;
    color: #173326;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    line-height: 1.5;
}

.contents-card__text {
    display: block;
    margin-top: 12px;
    color: #3e5147;
    font-size: 15px;
    line-height: 1.9;
}

.contents-card__badge {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.52);
    border-radius: 999px;
    background: rgba(23, 51, 38, .72);
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
}

.contents-card--soon {
    cursor: default;
    opacity: .68;
}

.contents-card--soon:hover {
    transform: none;
}

/* Codex 2026-05-18: modern shared footer for the AICREMA brand site. */
.site-footer {
    background: #173326;
    color: #fff;
}

.site-footer__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(58px, 8vw, 92px) 24px 32px;
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(320px, 1fr);
    gap: clamp(36px, 7vw, 92px);
    align-items: start;
}

.site-footer__brand {
    max-width: 420px;
}

.site-footer__logo {
    margin: 0;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1;
    letter-spacing: .04em;
}

.site-footer__tagline {
    margin: 24px 0 0;
    color: #fff;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(21px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.6;
}

.site-footer__text {
    margin: 12px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 15px;
    line-height: 1.9;
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 34px;
}

.site-footer__nav a,
.site-footer__links a {
    color: rgba(255,255,255,.86);
    font-size: 15px;
    line-height: 1.7;
    text-decoration: none;
    transition: opacity .2s ease, color .2s ease;
}

.site-footer a,
.site-footer a:visited,
.site-footer .site-footer__nav a,
.site-footer .site-footer__nav a:visited,
.site-footer .site-footer__links a,
.site-footer .site-footer__links a:visited {
    color: rgba(255, 255, 255, .86);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus,
.site-footer .site-footer__nav a:hover,
.site-footer .site-footer__nav a:focus,
.site-footer .site-footer__links a:hover,
.site-footer .site-footer__links a:focus {
    color: #fff;
    opacity: 1;
    text-decoration: none;
}

.site-footer a:active,
.site-footer .site-footer__nav a:active,
.site-footer .site-footer__links a:active {
    color: #fff;
}

.site-footer__nav a {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.16);
}

.site-footer__nav a:hover,
.site-footer__links a:hover {
    color: #fff;
    opacity: .72;
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: clamp(42px, 6vw, 72px);
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.18);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.site-footer__copy {
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    line-height: 1.7;
    white-space: nowrap;
}

/* Codex 2026-05-18: premium lower-page layout inspired by cosmetic brand sites.
   Applies only to new Twig lower pages using .brand-page classes. */
.brand-page {
    background: #f7f4ed;
    color: #20362b;
    overflow: hidden;
}

.brand-hero {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(260px, .55fr);
    gap: clamp(28px, 6vw, 76px);
    align-items: center;
    min-height: 680px;
    padding: clamp(110px, 14vw, 172px) max(28px, calc((100vw - 1180px) / 2)) clamp(70px, 9vw, 116px);
    background:
        linear-gradient(110deg, rgba(247,244,237,.98), rgba(247,244,237,.86) 55%, rgba(227,236,225,.72)),
        radial-gradient(circle at 86% 28%, rgba(39, 92, 67, .16), transparent 32%);
}

.brand-kicker {
    margin: 0 0 22px;
    color: #2b684d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
}

.brand-hero h1 {
    margin: 0;
    color: #173326;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(44px, 7vw, 84px);
    font-weight: 900;
    line-height: 1.12;
}

.brand-lead {
    max-width: 780px;
    margin: 34px 0 0;
    color: #2f4439;
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 500;
    line-height: 2.15;
}

.brand-hero__statement {
    margin: 28px 0 0;
    color: #173326;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(28px, 4.2vw, 52px);
    font-weight: 900;
    line-height: 1.35;
}

.brand-hero__visual {
    display: grid;
    place-items: center;
    min-height: 480px;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.72), rgba(219,229,218,.78)),
        linear-gradient(180deg, #eef1ea, #d4dfd1);
    box-shadow: 0 28px 70px rgba(28, 54, 41, .16);
}

.brand-hero__visual img,
.brand-photo img,
.brand-wide-photo img {
    width: auto;
    height: auto;
    max-width: 100%;
}

.brand-hero__visual img {
    max-height: 430px;
    filter: drop-shadow(0 24px 28px rgba(28, 54, 41, .24));
}

.brand-image-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 480px;
    overflow: hidden;
    border-radius: 8px;
}

.brand-image-frame img,
.brand-photo img,
.brand-wide-photo img {
    position: relative;
    z-index: 1;
}

.brand-image-frame img[src],
.brand-photo img[src],
.brand-wide-photo img[src] {
    max-height: 100%;
    object-fit: cover;
}

.brand-image-frame img:not([src]),
.brand-photo img:not([src]),
.brand-wide-photo img:not([src]) {
    display: none;
}

.brand-image-frame .responsive-picture img,
.brand-photo .responsive-picture img,
.brand-wide-photo .responsive-picture img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    filter: none;
}

.brand-image-frame::before,
.brand-photo::before,
.brand-wide-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 72% 28%, rgba(255,255,255,.42), transparent 22%),
        linear-gradient(135deg, #e7dfd2, #bdcdbb 56%, #244a37);
}

.brand-image-frame::after,
.brand-photo::after,
.brand-wide-photo::after {
    content: "IMAGE";
    position: absolute;
    right: 18px;
    bottom: 14px;
    z-index: 0;
    color: rgba(255,255,255,.72);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    letter-spacing: .16em;
}

.brand-intro-band {
    padding: 56px max(28px, calc((100vw - 1040px) / 2));
    background: #173326;
}

.brand-intro-band p {
    max-width: 940px;
    margin: 0 auto;
    color: #fff;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(23px, 3.2vw, 36px);
    font-weight: 800;
    line-height: 1.85;
}

.brand-story {
    display: grid;
    gap: clamp(58px, 9vw, 110px);
    padding: clamp(76px, 10vw, 132px) max(28px, calc((100vw - 1180px) / 2));
}

.brand-story__item {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) minmax(260px, .66fr);
    gap: clamp(24px, 4vw, 54px);
    align-items: start;
}

.brand-story__item--reverse {
    grid-template-columns: 82px minmax(260px, .66fr) minmax(0, 1fr);
}

.brand-story__item--reverse .brand-story__body {
    grid-column: 3;
}

.brand-story__item--reverse .brand-photo {
    grid-column: 2;
    grid-row: 1;
}

.brand-story__item--wide {
    grid-template-columns: 82px minmax(0, 1fr);
    max-width: 980px;
}

.brand-story__number {
    color: #2b684d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    line-height: 1;
}

.brand-story__body {
    padding-top: 4px;
}

.brand-story__body h2 {
    margin: 0 0 28px;
    color: #173326;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 900;
    line-height: 1.35;
}

.brand-story__body p {
    margin: 0 0 14px;
    color: #344a3e;
    font-size: 17px;
    line-height: 2.05;
}

.brand-photo {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 22px 58px rgba(28, 54, 41, .14);
}

.brand-photo--eye {
    background:
        radial-gradient(circle at 58% 38%, rgba(255,255,255,.52), transparent 20%),
        linear-gradient(145deg, #d9c8b8, #9e8069 58%, #264432);
}

.brand-photo--clean {
    background:
        linear-gradient(75deg, transparent 0 44%, rgba(255,255,255,.5) 45% 48%, transparent 49%),
        linear-gradient(135deg, #ebeadf, #c7d7c6 52%, #315842);
}

.brand-photo--texture {
    background:
        radial-gradient(circle at 48% 50%, rgba(255,255,255,.72) 0 13%, transparent 14%),
        radial-gradient(circle at 58% 48%, rgba(42, 105, 78, .26) 0 28%, transparent 29%),
        linear-gradient(135deg, #f4efe5, #b9c7b7);
}

.brand-feature-panel {
    padding: clamp(56px, 8vw, 96px);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 22px 70px rgba(28, 54, 41, .12);
}

.brand-feature-panel__head {
    max-width: 880px;
    margin: 0 auto 40px;
    text-align: center;
}

.brand-feature-panel__head h2 {
    margin: 12px 0 22px;
    color: #173326;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 900;
    line-height: 1.35;
}

.brand-feature-panel__head p {
    margin: 0;
    color: #344a3e;
    font-size: 17px;
    line-height: 2;
}

.brand-feature-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.brand-feature-cards article {
    min-height: 230px;
    padding: 28px;
    border: 1px solid rgba(39, 92, 67, .16);
    border-radius: 8px;
    background: #f7f4ed;
}

.brand-feature-cards span {
    display: block;
    margin-bottom: 28px;
    color: #2b684d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
}

.brand-feature-cards h3 {
    margin: 0 0 12px;
    color: #173326;
    font-size: 22px;
    font-weight: 700;
}

.brand-feature-cards p {
    margin: 0;
    color: #3e5147;
    font-size: 15px;
    line-height: 1.9;
}

.brand-wide-photo {
    position: relative;
    min-height: 340px;
    margin: 46px 0 0;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, #e8e0d4, #c8d4c5);
}

.brand-story__item--closing {
    max-width: none;
    padding: clamp(48px, 7vw, 78px);
    border-radius: 8px;
    background: linear-gradient(135deg, #173326, #2b684d);
}

.brand-story__item--closing .brand-story__number,
.brand-story__item--closing h2,
.brand-story__item--closing p {
    color: #fff;
}

.brand-story__item--closing p {
    color: rgba(255,255,255,.86);
}

.brand-cta {
    padding: clamp(70px, 9vw, 110px) 28px;
    text-align: center;
    background: linear-gradient(135deg, #173326, #275c43);
}

.brand-cta h2 {
    margin: 0;
    color: #fff;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: clamp(30px, 4.2vw, 52px);
    font-weight: 900;
}

.brand-cta__text {
    max-width: 680px;
    margin: 22px auto 0;
    color: rgba(255,255,255,.86);
    font-size: 16px;
    line-height: 1.9;
}

.brand-cta__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.brand-cta__links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 52px;
    padding: 14px 24px;
    border: 1px solid rgba(255,255,255,.5);
    color: #fff !important;
    background: rgba(255,255,255,.08);
    font-weight: 700;
    text-decoration: none !important;
}

.brand-cta__links a:hover {
    background: rgba(255,255,255,.18);
}

@media screen and (max-width: 751px) {
    .brand-hero,
    .brand-story__item,
    .brand-story__item--reverse,
    .brand-story__item--wide {
        grid-template-columns: 1fr;
    }

    .brand-hero {
        min-height: auto;
        padding-top: 92px;
    }

    .brand-hero__visual {
        min-height: 360px;
    }

    .brand-hero__visual img {
        max-height: 320px;
    }

    .brand-story__item--reverse .brand-story__body,
    .brand-story__item--reverse .brand-photo {
        grid-column: auto;
        grid-row: auto;
    }

    .brand-story__number {
        font-size: 28px;
    }

    .brand-photo {
        min-height: 260px;
    }

    .brand-cta__links {
        display: grid;
    }

    .brand-feature-panel {
        padding: 36px 22px;
    }

    .brand-feature-cards {
        grid-template-columns: 1fr;
    }

    .brand-wide-photo {
        min-height: 230px;
    }
}

@media screen and (max-width: 751px) {
    /* Codex 2026-05-18: on mobile, use hamburger navigation instead of squeezing
       the full PC nav into a narrow row. */
    #headerWrap_2 {
        display: none;
    }

    header {
        min-height: 55px;
    }

    nav.globalMenuSp {
        position: fixed;
        top: 55px;
        left: 0;
        width: 100%;
        max-height: calc(100vh - 55px);
        overflow-y: auto;
        transform: translateX(100%);
        background-color: var(--brand-color);
    }

    nav.globalMenuSp.active {
        transform: translateX(0);
    }

    nav.globalMenuSp ul {
        position: static;
        width: 100%;
        padding: 0;
        box-shadow: none;
    }

    nav.globalMenuSp ul li {
        width: 100%;
        height: auto;
        min-height: 48px;
        display: block;
        box-shadow: none;
    }

    nav.globalMenuSp ul li a {
        display: block;
        padding: 14px 18px;
        font-size: 1rem;
        line-height: 1.4;
    }

    .subpage-hero {
        padding-top: 82px;
    }
}
.ff-min{ font-family: 'Noto Serif JP', serif;}
.ff-go{ font-family: 'Noto Sans Japanese', sans-serif;}
.sub-title{font-size: 1.4rem; font-weight: 600; line-height: 1.5;}
.fc-y {color: #ffffbe;}
/*common*/
.wrap{max-width: 100%; margin: 0 auto; overflow: hidden; text-align: center;}
.posi-rela {position: relative;}
.ab-center {position: absolute; left: 0; right: 0; margin: 0 auto; text-align: center;}  
.sp-img {display: block;}
.pc-img {display: none;}
/* utility */
.ut-btm0 {bottom: 0;}
.ut-top0 {top: 0;}
.ut-mgnb-10 {margin-bottom: 10px;}
.ut-mgnb-25 {margin-bottom: 25px;}
.ut-mgnb-30 {margin-bottom: 30px;}
.ut-mgnb-40 {margin-bottom: 40px;}
.ut-mgnb-50 {margin-bottom: 50px;}
a:link,
a:visited {text-decoration: none !important;}


:root {
  --brand-color: #244033;
  --secondary-color:#b4ccc7;
  --gnrl-w:#ffffff;

}

/* ==============================================
 ヘッダー
=============================================== */
/* レイアウチE----------------------------------------------- */
header {
  /*position: absolute;*/
  position: sticky;
  left: 0; top: 0; z-index: 1000; background: rgba(255,255,255,0.82); width: 100%; box-shadow:0px -1px 5px 0px #848484;
}
#headerWrap {
    margin: auto;
    max-width: 100%;
    background-color: #fff;
    display: flex;
}

#headerWrap_1 {
    margin: auto;
    max-width: 100%;
    background-color: #fff;
    display: flex;

}
#headerWrap_2 {
    margin: auto;
    max-width: 55%;
    background-color: #fff;
    display: flex;
    /*position: absolute;*/
    position: relative;
    right: 0;
    margin: 0 0 0 auto;
}

.headBox {
    margin: auto;
    width: 100%;
    background-color: #FFF;
    position: fixed;
    left: 0;
    top: 0;
    height: 80px;
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.04);
    z-index: 100;
}

#errorHeader {
    color: #F00;
    font-weight: bold;
    font-size: 12px;
    background-color: #FEB;
    text-align: center;
    padding: 5px;
    margin: 15px 20px;
}
/* ロゴ
----------------------------------------------- */
.headLogo {
    /*width:250px;
    height:50px; */
    float:left;
    align-items: center;
    margin: 7px 0 0 15px;
    position: absolute;
    z-index: 2000;
}

.headLogo img {
    width: 290px;
    height: auto;
}

.headLogo_1 {
    /* width:250px;
       height:50px;
       float:left;
       margin-right: 100px;  */
    margin: 15px 20px;
    /*align-items: center; */
    position: absolute;
    left: 10px;
}

.headtitle {
    margin: 15px 0 25px 3px;
    font-size: 36px;
    font-weight: bold;
    font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro," メイリオ", Meiryo, Osaka," �E��E� �E�ゴシチE��", MS PGothic," sans-serif";
}

a.gusuri {
    text-decoration: none !important;
}

/*ヘッダーメニュー*/

.headerMenu {
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
    margin-left: 15px;
    height: 100%;
}

.headerTitle {
    /*font-family: 'Noto Sans JP', sans-serif !important;*/
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important;
    /*  font-family: 'Kosugi Maru', sans-serif !important; */
    font-size: clamp(14px, 1.45vw, 21px);
    font-weight: 900;
    letter-spacing: 0.11em;
    padding: 0 clamp(8px, 1.5vw, 25px);
    display: grid;
    place-items: center;
    height: 100%;
    /*color: #333 !important;*/
    color: var(--brand-color) !important;
    white-space: nowrap;

}
.headerMenu a:hover {
    background: #d3f4ff;
    transition: .5s
}

.headerMenu a:first-child {
    border-left: 1px solid #cccccc;
}

.headerMenu a {
    border-right: 1px solid #cccccc;

    text-decoration: none !important;
    height: 100%;
}
.headerMenu a:link,
.headerMenu a:visited {
    color: #333 !important;
    text-decoration: none !important;
}



/* ヘッダーナビ
----------------------------------------------- */
.headerNavi {
    float: left;
    margin-left:390px;
}
.headerNavi ul li {
    display: block;
    float: left;
}
.headerNavi ul li.cartMyPage{
    width:120px;
    margin-right:10px;
}
.headerNavi ul li.headCart {
    width:280px;
    height:60px;
    background:url(../img/header/cart_detail.png) no-repeat;
    background-size:280px;
}
.headerNavi ul li.headCart:hover {
    opacity:0.8;
}
.headerNavi ul li.headCart a {
    width:100%;
    height:100%;
    display:block;
}
.headerNavi ul li.headCart .cDetail {
    width:190px;
    float:left;
    padding:12px 0 0 15px;
    text-align:center;
}
.headerNavi ul li.headCart .cDetail p {
    font-size:11px;
    line-height:1.4em;
    color:#643C32;
}
.headerNavi ul li.headCart .cDetail p strong {
    font-weight:bold;
}
.headerNavi ul li.headCart .cDetail p:nth-child(1) strong {
    font-size:14px;
}
.headerNavi ul li.headCart .cDetail p:nth-child(1) {
    border-bottom:#643C32 1px solid;
    padding-bottom:3px;
    margin-bottom:3px;
}
.headerNavi ul li.headCart .cNam {
    width:18px;
    height:18px;
    background-color:#FFF;
    border-radius:10px;
    float:left;
    font-size:10px;
    line-height:1.8em;
    font-weight:bold;
    color:#E41F19;
    text-align:center;
    margin:5px 0 0 15px;
}
/*グローバルメニュー
--------------------------------------------------*/
.gNavi {
    width:1038px;
    margin:0 auto;
}
.gNavi li {
    width: 14.2%;
    float: left;
    text-align: center;
    border-right: solid 1px #c8c8c8;
}
.gNavi li:last-of-type {
    border-right: none;
}
.gNavi li a {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: #643c32;
    text-decoration: none;
}
.gNavi li.no {
    font-size: 14px;
    font-weight: bold;
    pointer-events: none;
}
.gNavi li.on a {
    pointer-events: none;
    color: #ffffff;
    background-color:#643c32;
}
.gNavi li a:hover {
    color: #ffffff;
    background-color:#643c32;
    text-decoration: none;
}

/*ハンバ�Eガーメニュー
--------------------------------------------------*/
/*　ハンバ�Eガーボタン　*/
.hamburger {
    display : none;
    position: absolute;
    z-index : 100;
    right : 13px;
    top   : 12px;
    width : 60px;
    height: 60px;
    cursor: pointer;
    text-align: center;
    /*border: solid 2px #fff;*/
}
.hamburger span {
    display : block;
    position: absolute;
    width   : 45px;
    height  : 4px ;
    left    : 7px;
    background : #fff;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
    top: 15px;
}
.hamburger span:nth-child(2) {
    top: 30px;
}
.hamburger span:nth-child(3) {
    top: 45px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
    top : 30px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
    top: 30px;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
}

nav.globalMenuSp {
    display: none;
    position: absolute;
    z-index : 2;
    top  : 0;
    left : 5;
    color: #000;
    background: #fff;
    text-align: center;
    transform: translateX(300%);
    transition: all 0.8s;
    width: 70%;
}

nav.globalMenuSp ul {
    /*	background: #ccc; */
    margin: 0 auto;
    padding: 0;
    width: 108%;

    display: flex;
    flex-wrap: wrap;
}

nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 31%;
    height: auto;
    /*	border-bottom: 1px solid #fff; */
}
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
nav.globalMenuSp ul li:hover{
    background :#ddd;
}

nav.globalMenuSp ul li a {
    display: block;
    color: #000;
    /*	padding: 1em 0; */
    width: 100%;
    text-decoration :none;
}

/* こ�Eクラスを、jQueryで付与�E削除する */
nav.globalMenuSp.active {
    transform: translateX(30%);

}


/* ==============================================
 コンチE��チE��覧
=============================================== */
.contents_list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 0;
    margin: 0 auto;
    justify-content: center;
    /*background:#d3f4ff;*/
    width:900px;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.contents_list a {
    display: contents;
}

.contents_list a:link,
.contents_list a:visited {
    color: #fff !important;
}

.contents {
    display: flex;
    background: var(--brand-color);
    width: 100%;
    height: auto;
    padding: 20px !important;
    /*flex: 0 1 48%;*/
    padding: 0 12px 0 12px;
    border-radius: 12px;
    box-shadow: 5px 5px 5px 0 rgb(0 0 0 / 21%), 0 5px 5px 0 rgb(0 0 0 / 22%);
    flex-flow: column;
    margin: 40px 0;
}

.contents .photo {
    width:100%;
    margin: 0 auto;
    overflow: clip;
    /*align-items: center;
    display: grid;
    aspect-ratio: 1 / 1;*/
    border-radius: 12px;
}

.contents img {
    transition: transform .6s ease;
}

.contents:hover img {
    transform: scale(1.1);

}

.contents a:hover {
    text-decoration: none !important;
}

.pagetitle {
   /*position: relative;
    display: grid;
    place-items: center;*/
    margin: 20px auto;
}

.pagetitle p.heading {
    font-size: 2.4rem !important;
    letter-spacing: 0.06em !important;
    line-height: 2.2rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #fff !important;
    margin: 10px 0 20px!important;
    padding: 0 !important;
}

.pagetitle p.description {
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    line-height: 2.8rem;
    text-align: center;
    color: #fff;
}

.point_bnr {
  width: 60% !important;
  display: block;
  margin: 0 auto !important;
  clip-path: none !important;
  height: auto !important;
}


.review_box{
    padding: 20px 20px 10px;
    border: 1px solid #8b8b8b;
    border-radius: 4px;
    margin: 10px 10px 30px;
}

.reviewer {
    font-size: 18px;
    text-align: left;
}

.review_star {
    display: flex;
    margin: 10px 0 0;
}
.star {
    width: 30px;
    height: 30px;
}

.star img {
        width: 25px !important;
        height: 25px !important;
        padding : 2px !important;
        object-fit: contain !important;
}
.review_txt {
    text-align: justify;
    padding: 1em 0 .5em;
}

.item {
    display: block;
    max-width: 800px;
    height: auto;
    margin: 20px auto 0 !important;
    padding: 0 !important;
}

.item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 5px 6px 6px 0px rgb(0 0 0 / 12%), 5px 6px 6px 0 rgb(0 0 0 / 22%);
}
@media screen and (max-width: 751px) {

    /* ----------------------------------------------------------------------------
	header
---------------------------------------------------------------------------- */

.clearfix:after {
    display: block;
    clear: both;
    height: 0px;
    line-height: 0px;
    visibility: hidden;
    /*content: ".";*/
}
.clearfix {
    display: block; /* for IE8 */
}
.clear {
    clear: both;
}

body.fixed header {  background: rgba(255,255,255,1.0);  }
header h1 { width:160px; position: absolute; left: 7px; top: 12px;}
header h1 img { width: 100%;}

header li img {
width: 100%;
height: auto;
}
header #gNavBtn p:not(.txt) { width: 26px; height: 28px; background: url(../img/cmn/m_menu.svg) no-repeat center top; background-size: 26px 56px;}
body.fixed header #gNavBtn p:not(.txt) { background-position: center bottom;}

      #headerWrap_1 {
        margin: auto;
        max-width: 100%;
        background-color: #fff; 
        display: flex;    
        justify-content: space-around;
        height: 55px;
        }

        #headerWrap_2 {
          margin: auto;
          max-width: 100%;
          background-color: #fff; 
         /* display: flex;    
          justify-content: space-around;*/
          box-shadow: 0 5px 5px rgba(0, 0, 0, 0.08);
          /*position: relative;
          padding: 0;
          height: 40px;*/
        }

    .headBox {
        max-width: 100%;
        margin: 0;
        padding: 5px 0 0;
        height: 45px;
        position: relative;
        display: flex;
        justify-content: center;
    }
    
      .headLogo {
        /*width:180px;*/
        /*height:45px;*/
        float:left;
        /* margin-left: 5px; */
        /* margin: 15px 20px; */
        display: flex;
        align-items: center;
        margin: 0;
        }

        .headLogo img {
        width: 200px;
        height: auto;
        }

 
     .headerMenu {
      margin: 0;
      /*height: 35px;*/
        width: 100%;
        justify-content: space-around;
        border-top: 1px solid var(--brand-color);
     }

     .headerMenu a {
      display: block;
      color: #333;
      font-family: 'Noto Sans JP', sans-serif !important;
      font-size: 1.5rem;
      letter-spacing: 0.06em;
      text-align: center;
      /*border-right: 1px solid #cccccc; */
      border-right: 1px solid  var(--brand-color);
      height: 100%;
      width: 100%;
     }

     .headerMenu a:first-child {
      border-left: none;
      }
    .headerMenu a:last-child {
      border-right:none;
      }

      .headerMenu a:link,
      .headerMenu a:visited {
        color: #333 !important;
        text-decoration: none !important;
      }

 
    .headerTitle  {
        font-size: 1.3rem;
        font-weight: 900;
        padding: 0 2px;
        margin: 0 7px;
    }

    header .globalMenuSp ul {
       position: absolute;
        right: 4px; top: 3px;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
      }
/*
    header .globalMenuSp li {
       position:relative;
       width: 52px;
       height: 52px;
       text-align: center;
       font-size: 0.9rem;
       display: -webkit-flex;
       display: flex;
       -webkit-flex-direction: column; 
       flex-direction: column; 
       -webkit-justify-content: center; 
       justify-content: center; 
       -webkit-align-items: center; 
       align-items: center;
       }
   */    
    header .globalMenuSp li a { 
      height: 100%; 
      display: flex;
      -webkit-flex-direction: column; 
      flex-direction: column; 
      -webkit-justify-content: center; 
      justify-content: center; 
      align-items: center;
    }
    header .globalMenuSpli p.txt { 
      margin-top: 4px; 
      line-height: 1.0;
    }
    header .globalMenuSp li span.num { 
      font-size: 1.1rem; 
      color: #fff; 
      background: #54A353; 
      border: #fff 1px solid; 
      border-radius: 50%; width: 20px; height: 20px; line-height: 1.0; 
      display: -webkit-flex; display: flex; 
      -webkit-justify-content: center; 
      justify-content: center; 
      -webkit-align-items: center;
      align-items: center;
      position: absolute; right: -1px; top: -1px;
     }
    


/*　ハンバ�Eガーボタン　*/
.hamburger {
	display : block;
	position: absolute;
	z-index : 1000;
	right : 1vw;
	top   : 17px;
	width : 45px;
	height: 42px;
	cursor: pointer;
	text-align: center;
/*	border: solid 2px #454545; */
  }
  .hamburger span {
	display : block;
	position: absolute;
	width   : 34px;
	height  : 4px ;
	left    : 3px;
	background : var(--brand-color);
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition   : 0.3s ease-in-out;
	transition        : 0.3s ease-in-out;
  }
  .hamburger span:nth-child(1) {
	top: 7px;
  }
  .hamburger span:nth-child(2) {
	top: 17px;
  }
  .hamburger span:nth-child(3) {
	top: 27px;
  }

  .hamburger p  {
    font-family: 'Noto Sans JP', sans-serif !important;
    color: var(--brand-color) !important;
    font-size: 11px;
    font-weight: 600;
    bottom: 40px;
    position: absolute;
    left: -1px;
  }
  
  /* ナビ開いてる時のボタン */
  .hamburger.active span:nth-child(1) {
	top : 18px;
	left: 4px;
	-webkit-transform: rotate(-45deg);
	-moz-transform   : rotate(-45deg);
	transform        : rotate(-45deg);
  }
  
  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
	top: 18px;
	-webkit-transform: rotate(45deg);
	-moz-transform   : rotate(45deg);
	transform        : rotate(45deg);
  }
  
  nav.globalMenuSp {
    display: block;
	position: absolute;
	z-index : 2;
	top  : 0;
	left : -50px;
	color: #fff;
  background-color: var(--brand-color);
	text-align: center;
	transform: translateX(100%);
	transition: all 0.6s;
	width: 100%;
  z-index: 1000;

  }
  
  nav.globalMenuSp ul {
/*	background: #ccc; */
	margin: 0 auto;
	padding: 5px 0 0 0;
	width: 85%;
	display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 8px;
  display: inline-block;
  box-shadow: 3px 3px 3px 0 rgb(0 0 0 / 21%);
}

  nav.globalMenuSp ul li {
	list-style-type: none;
  font-size: .9rem;
	padding: 0;
	width: 100%;
  height: 40px;
  line-height: 40px;
  display: inline-table;
  border-bottom: 1px solid #fff;
  background-color: var(--brand-color);
  box-shadow: 3px 3px 3px 0 rgb(0 0 0 / 21%);

  }

/*
  nav.globalMenuSp ul li::before {
    content: '';
    display: inline-block;
    width: 60px;
    height: 22px;
    background-image: url(/template/default/img/icon/midashi_sakana_wt.png);
    background-size: contain;
    object-fit: cover;
    position: relative;
    top: 3px;
  }
*/

  nav.globalMenuSp ul li:last-child {
	padding-bottom: 0;
	border-bottom: none;
  }
  /*
  nav.globalMenuSp ul li:hover{
	background :#ddd;
  }
  */
  nav.globalMenuSp ul li a {
	color: #fff !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 1rem;
/*	padding: 1em 0; */
    width: 100%;
	text-decoration :none;
  }
  
  /* こ�Eクラスを、jQueryで付与�E削除する */
  nav.globalMenuSp.active {
	transform: translateX(0%);
  }

  /* ==============================================
 アコーチE��オン
=============================================== */

  li.accordionMenu {
    width: 100% !important;
    background: none !important;
    /*height: 150px;*/
  }

  /*
  li.accordionMenu::before {
    content: '';
    display: inline-block;
    width: 50px;
    height: 19px;
    background-image: url(/template/default/img/icon/midashi_sakana_wt.png);
    background-size: contain;
    object-fit: cover;
    position: relative;
    top: 3px;
  }
*/

/*
li.accordionMenu:hover {
  /*opacity: 0.7; */
  /*
  background-color: #fff;
  color: rgb(5 118 171);
  transition: .5s
}
*/
summary {
  display: block flow; /* 初期値のlist-item以夁E*/
  cursor: pointer;
  grid-template-columns: 1fr auto;
  gap: 1em;
  height: 40px;
  border-bottom: solid 2px #fff;
  &::-webkit-details-marker {
    display: none;
  }
}
/*
summary:hover {
  background-color: #fff;
  transition: .5s;
  width: 100% !important;
}
*/
p.summarytitle {
font-family: 'Noto Sans JP', sans-serif !important;
/*  font-family: 'Kosugi Maru', sans-serif !important; */
    height: 40px;
    margin: 0 auto;
    align-content: center;
    font-size: 1rem;
    letter-spacing: 0.06em;
    line-height: 2rem;
    text-align: center;
    /* color: #333;*/
    /* background-color: #D3F4FF;*/
    color: #FFF;
    /* background-color: rgb(5 118 171);*/
    background-color:  var(--brand-color);
    width: 100%;
    transition-property: opacity;
    transition-duration: 0.5s;
    display: grid;
  }  
  /*
  p.summarytitle::before  {
      content: '';
       display: inline-block;
        width: 80px;
        height: 30px;
      background-image: url(/template/default/img/icon/midashi_sakana_wt.png);
      background-size: contain;
      object-fit: cover;
      position: relative;
      left: 76px;
      top: -6px;
  }
  */
/*
  p.summarytitle:hover {
      background-color: #fff;
      color: #0351a7;
      transition: .5s;
      width: 100% !important;
      }
*/

.panel {
  display: block grid;
  transition: grid-template-rows 0.5s;
  background: #fff;
}

.inner {
  overflow: hidden;
  margin: 2px 0;
  box-shadow: 3px 3px 3px 0 rgb(0 0 0 / 21%);
}

.inner ul {
  width: 100% !important;
  padding: 0 !important;
  position: static !important;
}

li.accordion-inner  {
  min-height: 40px;
  font-family: 'Noto Sans JP', sans-serif !important;
  /*font-family: 'Kosugi Maru', sans-serif !important;*/
  margin: 0 auto;
  align-content: center;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  line-height: 2rem;
  text-align: center;
  /*color: #333;*/
  /*background-color: #D3F4FF;*/
  color: #FFF;
  /* background-color: rgb(5 118 171);*/
  background-color:  #0351a7;
  width: 100% !important;
  transition-property: opacity;
  transition-duration: 0.5s;
  border-bottom: solid 1px #fff !important;
  display: inline-block !important;
}

li.accordion-inner:last-child {
  border: none ;
}
/*
li.accordion-inner:hover {
 background-color: #fff;
 color: #0351a7;
  transition: .5s;
  width: 100% !important;
  }
*/
  .icon {
      position: relative;
      display: inline-block;
      inline-size: 2em;
      aspect-ratio: 1;
      left: 140px;
      bottom: 36px;
      /*color: #fff;*/
      /*color:#025aee;*/
      /*color: #011a66;*/
      color: #ff9ed0;

    
      &::before,
      &::after {
        position: absolute;
        inset: 0;
        inline-size: 80%;
        block-size: 3px;
        margin: auto;
        content: "";
        background-color: currentcolor;
      }
    
      &::after {
        transition: opacity 0.3s;
        rotate: 90deg;
      }
    
      &:where(.accordion[open] *)::after {
        opacity: 0;
      }
  }

} 


/* main-visual */
.main-visual {
position: relative;
width: 100%;
height: 460px; /* 高さ固宁E*/
background: url('../img/eye-bg.jpg') no-repeat bottom center;
background-size: cover; /* 幁E��フィチE��させつつトリミング */
color: white;
display: flex;
justify-content: center;
}

.main-visual h1 {
margin: 10px;
z-index: 1;
}

.main-visual::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 0;
}
.content img {max-width: 100%; height: auto;}

.main-visual .content {
position: relative;
z-index: 1;
flex-direction: column;
align-items: center;
justify-content: center;
max-height: 100%;
box-sizing: border-box;
}

.vertical {
writing-mode: vertical-rl;
text-orientation: upright;
}
.marker_text-decoration {
text-decoration: underline;
text-decoration-color: #ffffbe;
text-decoration-thickness: 0.1em;
text-decoration-skip-ink: none;
text-underline-offset: 0.15em;
}

/* contents */
.fv-ttl {text-align: center; width: 40%; margin: 1.5rem auto 0;}
.fv-cp1 {position: absolute; top: 20%; right: 4%;}
.fv-cp2 {position: absolute; top: 26%; left: 4%;}
.fv-pac {width: 115px; bottom: 6%;}
.eye-blogo {position: absolute; width: 12%; bottom: 5%; left: 5%;}
.eye-mdl {position: absolute; width: 38%; bottom: 18%; right: 5%;}
.section-01{
background-color: var(--brand-color);
padding: 30px 10px;
position: relative;
}
.section-01::after {
content: '';
display: block;
position: absolute;
left:0;
bottom: 0;
border-top: 60px solid transparent;
border-left: 50vw solid transparent;
border-right: 50vw solid var(--secondary-color);
border-bottom: 60px solid var(--secondary-color);
}
.sec01-cp {color: var(--gnrl-w);}
.sec01-ttl {
color: var(--gnrl-w);
font-size: 3rem;
font-weight: 500;
margin-top: -1.5rem;
}

.sec01-ttl::before {
content: attr(data-en);
display: block;
color: var(--brand-color);
font-size: 1.5rem;
font-family: 'Noto Serif JP', serif;
font-weight: 800;
}

/* .section-02{
background-color: var(--secondary-color);
padding: 20px 10px;
background-image: url("../img/eye-plant-1.png"), url("../img/eye-plant-2.png");
background-size: 445px 664px, 445px 664px;
background-position: 100% 0%, 0% 80%;
background-repeat: no-repeat; 
} */
.section-02{
background-color: var(--secondary-color);
padding: 20px 10px;
background-image: url("../img/eye-plant-1.png"), url("../img/eye-plant-2.png");
background-size: 290px 420px, 290px 420px;
background-position: 100% 0%, 0% 80%;
background-repeat: no-repeat; 
background-blend-mode: multiply;
}

/* オファーボタン 位置 */
.jmp-btn-sub {position: absolute; bottom: 28.5%; width: 15%; left: 6%;}
.jmp-btn {bottom: 6%;}
.jmp-btn-sub2 {position: absolute; bottom: 6%; width: 15%; left: 6%;}
.jmp-btn2 {bottom: 2%;}
.ofr-btn {bottom: 7%;}
.ofr-btn2 {bottom: -1%;}
.btn-arr {position: absolute; bottom: 14.5%; width: 15%; left: 10%;}
.btn-arr2 {position: absolute; bottom: 3.5%; width: 15%; left: 10%;}

/* カードデザイン */
.card {
position: relative;
max-width: 100%;
margin: 0 auto;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
z-index: 99;
}

.card-picture {
  width: 100%;
}

.card img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}

.card-content {
padding: 2rem;
}

.card-content h2 {
font-size: 2rem;
margin-bottom: 20px;

}

.card-content p {
font-size: 1.3rem;
line-height: 1.6;
color: #555;
margin-bottom: 10px;
}

.card-content a {
color: #007bff;
text-decoration: none;
}

.card-content a:hover {
text-decoration: underline;
}

/* 見�Eしデザイン */
.sec-02-ttl {
position: relative;
box-sizing: border-box;
max-width: 100%;
text-align: left;
background-image: linear-gradient(0deg, rgba(219, 233, 220, 1) 24%, rgba(255, 255, 255, 1) 26%);
padding: 1rem 1.5rem;
border-bottom: 1px solid #ccc;
border-radius: 10px;
margin: 40px auto 30px;
}

.headline-left {
border-left: 6px solid var(--brand-color);
padding-left: 0.8rem;
margin-bottom: 0.5rem;
}

.headline-left h2 {
margin: 0;
font-size: 1.5rem;
color: var(--brand-color);
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
}

.headline-left p {
margin: 0;
font-size: 1rem;
color: var(--brand-color);
}

.headline-right {
position: absolute;
width: 80px;
bottom: 0;
right: 1rem;
}

/* カードデザイン 2 */
.card-wrap {
max-width: 100%;
display: block;
margin: 40px auto;
}

.card2 {
align-items: flex-start;
background-color: #ffffff;
overflow: hidden;
box-shadow: 0px 30px 2px -15px rgba(36, 64, 51, 0.45);
padding: 1em;
height: auto;
}

.card2-hed { display: flex; }
.card2 img {
width: 70px;
height: 70px;
object-fit: cover;
margin-right: 1em;
clip-path: circle(50%);
}
.card2-txt {
padding: .7em; 
text-align: justify;
}

.card2-txt p {
font-size: 1.2rem;
line-height: 1.8;
}

.card2-ttl {
margin-top: 0.25em;
font-size: 1.25rem;
margin-bottom: 10px;
font-weight: 600;
color: var(--brand-color);
text-align: left;
}
.flex-item{
width: 100%;    
}
.oneline {
width: 100% !important;
height: auto !important;    
}
.flex-item a:hover{
opacity: 0.7;
transition: 0.3s;
}
/* 丸ボタン */
.btn-maru{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin:10px auto 15px;
padding: .9em 2em;
border: 1px solid var(--brand-color);
border-radius: 50px;
background-color: #fff;
color: var(--brand-color);
font-size: 1.25rem;
font-weight: 500;
box-shadow: 5px 5px 5px 0 rgb(0 0 0 / 21%), 0 5px 5px 0 rgb(0 0 0 / 22%);
}
.btn-maru::after {
transform: rotate(45deg);
width: 8px;
height: 8px;
margin-left: 12px;
border-top: 3px solid var(--brand-color);
border-right: 3px solid var(--brand-color);
content: '';
position: relative;
top: 1px;
}
.btn-maru a:link,
.btn-maru a:visited {
text-decoration: none;
color: #1e286e !important;
text-decoration: none !important;
}

.btn-maru:hover{
    opacity: 0.7;
    transition: 0.3s;
}

.floating {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    transition: .3s;
    max-width: 750px;
    margin: 0 auto;
    /*チE��ォルトで非表示にする*/
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    /* background-color: var(--gnrl-w); */
}
/*こ�Eクラスが付与されると表示する*/
.active {opacity: 1; visibility: visible;}
.float-bnr {display: block; width: 90%; margin: 0 auto;}


/* アニメーション */
/* L→R */
.lr-slide {
animation: lr-s 1s linear 0s infinite;
}
@keyframes lr-s {
0%   { opacity: 1; transform: translatex(-10px); }
30%  { opacity: 1; transform: translatex( 0px); }
50%  { opacity: 1; transform: translatex( 0px); }
}
/* gyugyugyu */
@keyframes gyugyu {
0% {transform:scale(0.85);}
50% {transform:scale(1);}
100% {transform:scale(0.85);}
}
.ani-gyu { animation: gyugyu 1s infinite; } 
/* fuwafuwa */
@keyframes fuwafuwa {
0% {transform: translateY(0px);}
50% {transform: translateY(-10px);}
100% {transform: translateY(0px);}
}
.ani-fuwa { animation: fuwafuwa 2s infinite; } 
/* flash */
@keyframes flash {
0%, 100% { opacity: 1; }
50% { opacity: 0; } }
.u--flash { animation: flash 0.7s infinite; cubic-bezier(0.445, 0.05, 0.55, 0.95); }
/* flash2 */
@keyframes flash2 {
0%, 100% { opacity: 0; }
30%, 90% { opacity: 1; } }
.u--flash2 { animation: flash2 1s infinite; cubic-bezier(0.445, 0.05, 0.55, 0.95); }
/* flash3 */
@keyframes flash3 {
0%, 30%, 70%, 100% { opacity: 1; }
40%, 50% { opacity: 0; } }
.u--flash3 { animation: flash3 1s infinite; cubic-bezier(0.445, 0.05, 0.55, 0.95); }
/* flash4 */
@keyframes flash4 {
0%, 50% { opacity: 0; }
70%, 100% { opacity: 1; } }
.u--flash4 { animation: flash4 2s infinite; cubic-bezier(0.445, 0.05, 0.55, 0.95); }
/* flash5 */
@keyframes flash5 {
0%, 50% { opacity: 1; }
70%, 100% { opacity: 0; } }
.u--flash5 { animation: flash5 2s infinite; cubic-bezier(0.445, 0.05, 0.55, 0.95); }

/* Bounce In */
@keyframes bounceIn {
0% {transform: scale(0.5);opacity: 0; }
80% {transform: scale(1.02);opacity: 1; }
100% {transform: scale(1);opacity: 1; } }
.u--bounceIn {animation: bounceIn 1.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
/* fadein soon */
@keyframes fadein-soon {
0% {opacity: 0; }
100% {opacity: 1; }
}
.u--fadein {animation: fadein-soon 1s}

/* x-swing */
@keyframes x-swing {
50% {transform: translatex(0px);}
52% {transform: translatex(3px);}
54% {transform: translatex(0px);}
56% {transform: translatex(-3px);}
58% {transform: translatex(0px);}
60% {transform: translatex(3px);}
62% {transform: translatex(0px);} }
.x-swing {animation: x-swing 1s infinite;}
.x-swing-b {animation: x-swing 1.2s infinite;}
/* Swing */
@keyframes swing {
10% {transform: rotate(0, 0, 1, 0deg); }
20% {transform: rotate3d(0, 0, 1, 1deg); }
25% {transform: rotate3d(0, 0, 1, -1deg); }
30% {transform: rotate3d(0, 0, 1, 1deg); }
35% {transform: rotate3d(0, 0, 1, -1deg); }
40% {transform: rotate3d(0, 0, 1, 0deg); }
100% {transform: rotate3d(0, 0, 1, 0deg); } }
.u--swing {
transform-origin: bottom center;
animation: swing 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite; }
.u--swing-c {
transform-origin: center;
animation: swing 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite; }
.u--swing3 {
transform-origin: bottom right;
animation: swing 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite; }

/* swing */
@keyframes swing2{
0% { transform: rotate(0deg); }
25% { transform: rotate(3deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-2deg); }
100% { transform: rotate(0deg); }
}
.u--swing2 { 
transform-origin: bottom left;
animation: swing2 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite; 
}

/* swing */
@keyframes swing3{
0% { transform: rotate(3deg); }
30% { transform: rotate(3deg); }
50% { transform: rotate(-3deg); }
70% { transform: rotate(-3deg); }
90% { transform: rotate(3deg); }
100% { transform: rotate(3deg); }
}
.u--swing4 {
transform-origin: center;
animation: swing3 0.75s cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite; 
}

/* fadeIn */
.fadein {opacity : 0;transform: translateY(20px);transition: all 1s;}
.fadein2 {opacity : 0;transform: translateY(-20px);transition: all 1s;}
.fadein3 {opacity : 0;transition: all 2s;}
.fadein4 {opacity : 0;transform: scale(0.6);transition: all 1s;}
.fadein5 {opacity : 0;transform: translatex(-20px);transition: all 1s;}
.fadein6 {opacity : 0;transform: translatex(20px);transition: all 1s;}
.fadein7 {opacity : 0;transform: scale(1.2);transition: all 0.4s;}
/* buruburu */
@keyframes bururi {
50% {transform: scale(1, 1);}
52% {transform: scale(0.98, 0.95)}
54% {transform: scale(1, 1);}
56% {transform: scale(0.98, 0.95)}
58% {transform: scale(1, 1);}
60% {transform: scale(0.98, 0.95)}
}
.bururi {animation: bururi 1s infinite;}
/* purupuru */
@keyframes purupuru {
0% {transform: skew(0deg, 0deg);}
5% {transform: skew(1deg, 1deg);}
10% {transform: skew(-2deg, -1deg);}
15% {transform: skew(2deg, 1.5deg);}
20% {transform: skew(-2deg, -1.5deg);}
25% {transform: skew(0.9deg, 0.9deg);}
30% {transform: skew(-0.6deg, -0.6deg);}
35% {transform: skew(0.3deg, 0.3deg);}
40% {transform: skew(-0.2deg, -0.2deg);}
45% {transform: skew(0.1deg, 0.1deg);}
50% {transform: skew(0deg, 0deg);}
}
.purupuru {animation: purupuru 1.5s infinite;}
.purupuru2 {animation: purupuru 1.75s infinite;}

/* kurukuru */

@keyframes anikuru{
0%{ transform:rotate(0);}
100%{ transform:rotate(360deg); }
}
.ani-kuru{animation:5s linear infinite anikuru;}

@keyframes anikuru2{
0%{ transform:rotate(0);}
100%{ transform:rotate(-360deg); }
}
.ani-kuru2{animation:8s linear infinite anikuru2;}

/* underslide */
@keyframes u-slide {
0% {transform: translateY(0px);}
50% {transform: translateY(5px);}
60% {transform: translateY(0px);}
}
.ani-slide { animation: u-slide 0.5s infinite; animation-timing-function: ease;} 
@keyframes u-slide2 {
0% {transform: translateY(5px);}
50% {transform: translateY(0px);}
60% {transform: translateY(5px);}
}
.ani-slide2 { animation: u-slide2 1.5s infinite; animation-timing-function: ease;} 

/* マ�Eカー */
.akahuto {color: #C00652;font-weight: bold;}
.mk-st_a {
background: -webkit-linear-gradient(left,  #f04b9a 50%, transparent 50%);
background: linear-gradient(left,  #f04b9a 50%, transparent 50%);
background-repeat: no-repeat;
background-size: 200% .9em; 
background-position: 100% .9em;
transition: 2s;
}
.mk-st_a.is-active{background-position: 0% 0.9em;}
.mk-st_b {
background: -webkit-linear-gradient(left, #f04b9a 50%, transparent 50%);
background: linear-gradient(left, #f04b9a 50%, transparent 50%);
background-size: 200% .8em; 
background-position: 100% .1em;
transition: 2s;
}
.mk-st_b.is-active{background-position: 0% .1em;}

.mk-st_c {
background: -webkit-linear-gradient(left, #fffa00 50%, transparent 50%);
background: linear-gradient(left, #fffa00 50%, transparent 50%);
background-size: 200% .8em; 
background-position: 100% .1em;
transition: 2s;
}
.mk-st_c.is-active{background-position: 0% .1em;}

.mk-st_d {
background: -webkit-linear-gradient(left, #fffa00 50%, transparent 50%);
background: linear-gradient(left, #fffa00 50%, transparent 50%);
background-repeat: no-repeat;
background-size: 200% 0.1em; 
background-position: 100% 1.2em;
transition: 2s;
}
.mk-st_d.is-active{background-position: 0% 1.2em;}

/* スクロールフォチE*/

.scroll-infinity {
border-top: 5px solid #072718;
border-bottom: 5px solid #072718;
}      
@keyframes infinity-scroll-right {
from {transform: translateX(-100%);}
to {transform: translateX(0%);}
}
.scroll-infinity__wrap {
display: flex;
overflow: hidden;
}
.scroll-infinity__list {
display: flex;
list-style: none;
padding: 0;
}
.scroll-infinity__list--right {
animation: infinity-scroll-right 50s infinite linear 0.2s both;
}
.scroll-infinity__item {
width: calc(100vw / 5);
}
.scroll-infinity__item>img {
width: 100%;
height: auto;
display: block;
}
/* 左へ変える場合　*/
@keyframes infinity-scroll-left {
from {transform: translateX(0%);}
to {transform: translateX(-100%);}
}
.scroll-infinity__list--left{
animation :infinity-scroll-left 50s infinite linear 0.2s both;
}

@media screen and (min-width: 751px) {
.sp-img {display: none;}
.pc-img {display: block;}
.sub-title{font-size: 1.75rem; font-weight: 600;}
.main-visual {height: 600px;}
.main-visual h1 {margin: 10px 120px 0;}
.content {width: 750px;}
.fv-pac {width: 135px;} 
.eye-mdl {width: 25%; bottom: 20%; right: 5%;}
.ao-anniv {width: 225px; bottom: 5%;}
.ao-tb {width: 190px; right: -5%;}
.scroll-infinity__item {width: calc(100vw / 8);}
.headline-right {width: 115px;}
.sec01-ttl {font-size: 4rem;}
.section-02{padding: 20px 15px;}
.card {/*flex-direction: row;*/ width: 900px; /*height: 300px;*/ margin: 0 auto 40px;}
.card-content p {font-size: 1.7rem;}
.card-content h2 {font-size: 2.4rem; margin-bottom: 15px;}
.sec-02-ttl {width: 900px;}
.card-wrap {width: 900px; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;}
.card-wrap-single {width: 600px;}
/*.card2{height: 320px;}*/
.card2-ttl {font-size: 1.7rem;}
.card2 img {width: 100px; height: 100px;}
/*.flex-item {width: 45%;}*/
.btn-maru {width: 360px;}

}

@media only screen and (max-width: 2000px) {
.section-01::after {
border-left: 1000px solid transparent;  /* 実数で幁E��持E��E*/
border-right: 1000px solid var(--secondary-color);  /* 実数で幁E��持E��E*/
}
}

/* ==============================================
 フッター
=============================================== */
#footerWrap {
    width: 100%;
    min-width:1080px;
    background-color: #FFF;
    background: url(../img/footer/footer_line.png) top repeat-x, url(../img/footer/foot_btm.jpg) bottom repeat-x;
    padding-bottom: 100px;
}
.footBox {
    width: 1060px;
    margin: auto;
    padding-top: 10px;
    padding-left: 20px;
    color: #643C32;
    font-size: 13px;

}
.footBox a {
    color: #643C32;
    text-decoration: none;
}
.footBox a:hover {
    color: #643C32;
    text-decoration: underline;
}

#footer_description {
    padding: 15px;
    margin: 30px auto;
    max-width: 100%;
    background-color: #fff;
    width: 864px;
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 12%), 0 2px 4px 0 rgb(0 0 0 / 22%);
    border-radius: 15px;
    border: 8px solid;
    border-color: #FEC1AF;
}

#footer_description .banner{
    /*  width:350px; */
    /*  height: 50px; */
    margin: 20px auto;
    /*  line-height: 50px; */
    align-items: center;
    justify-content:space-evenly;
    padding: 0;
    display: flex;
}

#footer_description .banner img {
    width:300px;
    height: auto;
    margin: 0 30px
}

.sitedescription {
    font-family: 'Noto Sans JP', sans-serif;
    width: 864px;
    font-size: 19px;
    font-weight: 600;
    color: #454545;
    margin: 20px auto 10px;
    line-height: 2rem;
    text-align: center;
}

#footerbox {
    /*height: 450px;*/
    background-color: #0351a7;
    background-color: #fff;
    padding: 10px;
    max-width: 100%;
}

#footerbox .container {
    max-width: 1080px;
    height: auto;
    padding: 10px 0;
    margin: 0 auto;
}

#footerbox .footerlogo {
    display: flex;
    align-items: center;
    justify-content: center;
}

#footerbox .footermenu {
    padding: 10px 0;
    align-items: center;
    justify-content: center;
}

#footerbox .footermenu ul {
    text-align: center;
    margin: 0 auto;
    padding: 0 30px;
    list-style: none;
    font-size: 1.7rem;
    display: flex;
}

#footerbox .footermenu ul li {
    margin: 25px auto;
}


#footerbox .footermenu_s ul {
    text-align: center;
    margin: 0 auto;
    list-style: none;
    font-size: 1.2rem;
    display: flex;
    width: 80%;
}

#footerbox .footermenu_s ul li {
    margin: 20px auto;
}

#footerbox .footerimg {
    display: block;
    width:80%;
    margin: 0 auto;
    text-align: center;
}

#footerbox .footerimg img {
    width: 200px;
    height: auto;
    display: inline-block;
}

/*  #footerbox .footercopy  {
      display: block;
      margin: 0 auto;
       }
*/
a.footer {
    display: block;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif !important;
    /*color: #fff  !important;*/
    color: #0351a7  !important;
    text-decoration: none !important;
    line-height: 20px;
    transition: 0.5s;
    letter-spacing: 2px;
    font-size: 18px;
    font-weight: 400;
}

a.footer:visited {
    /*color: #fff  !important;*/
    color: #0351a7  !important;
}

#copyRight {
    font-family: 'Noto Sans JP', sans-serif !important;
    /*color: #fff  !important;*/
    color: #0351a7  !important;
    font-size: 1.1rem;
    letter-spacing: 0.8px;
    text-align: center;
    margin-bottom: 8em;
}

@media screen and (max-width: 751px) {
html {
  overflow-x: hidden;
  overflow-y: scroll; -webkit-overflow-scrolling: touch
 }
body{
 overflow-x: hidden;
}
.contents_list {
    width: 100% !important;
    justify-content: center;
    /*background:#d3f4ff;*/
    font-family: 'Noto Sans JP', sans-serif !important;
}
/*
.contents_list a {
  display: contents;
}
*/
.contents {
    display: block;
    width: auto;
    background: #0351a7;
    border-radius: 7px;
    margin: 0 15px;
    padding: 10px !important;
  }

.main-visual .content {width: 100%;}

.sec01-ttl::before {
font-size: 1.3rem;
}

.headline-left {
  margin-bottom:0;
}

.sec-02-ttl {
  padding: 1rem 1rem;
}


.contents .photo {
  display: inline-block;
  width:100%;
  margin: 3px auto;
  overflow: hidden;
}

.contents img {
  transition: transform .6s ease;
}

.contents:hover img {
	transform: scale(1.1); 
}

.contents a:hover {
	text-decoration: none !important;
}

.point_bnr {
    width: 100% !important;
}

.pagetitle {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    padding: 0; 
    margin: 0 auto 10px;
  }

.pagetitle p.heading {
    font-size: 1.9rem !important;
    letter-spacing: 0.05em !important;
    line-height: 3.5rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #fff !important; 
    margin: 5px auto 0!important;  
}

.pagetitle p.description {
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    line-height: 2.2rem;
    text-align: center;
    color: #fff;   
}
.oneline {
width: auto !important;
}

.review_box{
    margin: 10px 5px 30px;
}

.btn-maru {
  margin: 10px auto 20px;
  width: 90%;
}

.item {
    max-width: 100%;
    margin: 10px auto 20px !important;
}

#footerbox .footermenu_s ul {
    text-align: center;
    margin: 0 auto;
    list-style: none;
    font-size: 1.2rem;
    display: flex;
    width: 100%;
    flex-flow: column;
}
#footerbox .footermenu_s ul li {
    margin: 12px auto;
}
a.footer {
    font-size: 16px;
}
#copyRight {
font-size: 0.8rem;
}


}

/* Codex 2026-05-18 override: placed at file end so mobile header fixes win
   over older duplicated header rules above. */
@media screen and (max-width: 751px) {
    #headerWrap_2 {
        display: none !important;
    }

    nav.globalMenuSp {
        position: fixed !important;
        top: 55px !important;
        left: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 55px);
        overflow-y: auto;
        transform: translateX(100%) !important;
        background-color: var(--brand-color);
    }

    nav.globalMenuSp.active {
        transform: translateX(0) !important;
    }

    nav.globalMenuSp ul {
        position: static !important;
        width: 100% !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    nav.globalMenuSp ul li {
        width: 100% !important;
        height: auto !important;
        min-height: 48px;
        display: block !important;
        box-shadow: none !important;
    }

    nav.globalMenuSp ul li a {
        display: block !important;
        padding: 14px 18px !important;
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
}

@media screen and (max-width: 751px) {
    /* Codex 2026-05-18: stack new lower-page content modules cleanly on mobile. */
    .detail-split,
    .detail-card-grid,
    .ingredient-grid,
    .step-cards,
    .contents-grid,
    .botanical-grid,
    .article-hero,
    .detail-split--visual,
    .ingredient-percent,
    .botanical-section__head,
    .article-visual-section,
    .article-point-grid {
        grid-template-columns: 1fr;
    }

    .detail-highlight,
    .detail-card-grid article,
    .ingredient-grid article,
    .step-cards article,
    .faq-list article,
    .subpage-cta {
        padding: 24px 20px;
    }

    .free-list {
        grid-template-columns: 1fr;
    }

    .subpage-cta__links {
        display: grid;
    }

    .subpage-cta__links a {
        min-width: 0;
        width: 100%;
    }

    .visual-frame--hero {
        min-height: 260px;
    }

    .visual-hero,
    .visual-hero--faq,
    .visual-hero--ingredients {
        min-height: 360px;
    }

    .visual-hero__inner {
        width: min(100% - 40px, 1080px);
        padding: 76px 0 54px;
    }

    .visual-hero__title {
        font-size: 36px;
    }

    .visual-hero__lead {
        font-size: 15px;
        line-height: 1.9;
    }

    .visual-frame__label {
        font-size: 9px;
    }

    .article-hero {
        padding: 72px 22px 54px;
        gap: 28px;
    }

    .article-hero__text .subpage-eyebrow {
        text-align: left;
    }

    .article-hero__text h1 {
        font-size: 36px;
    }

    .article-hero__text p:not(.subpage-eyebrow) {
        font-size: 15px;
        line-height: 1.9;
    }

    .ingredient-percent__number {
        font-size: 76px;
    }

    .botanical-grid {
        gap: 18px;
    }

    .faq-anchor-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .faq-anchor-nav a {
        flex: 0 0 auto;
    }

    .article-visual-section--reverse > div:first-child,
    .article-visual-section--reverse > .visual-frame {
        grid-column: auto;
        grid-row: auto;
    }

    .contents-list {
        padding: 48px 22px 78px;
    }

    .contents-card__body {
        padding-top: 18px;
    }

    .site-footer__top,
    .site-footer__nav {
        grid-template-columns: 1fr;
    }

    .site-footer__inner {
        padding: 48px 22px 28px;
    }

    .site-footer__bottom {
        display: grid;
    }

    .site-footer__links {
        display: grid;
        gap: 12px;
    }

    .site-footer__copy {
        white-space: normal;
    }
}

/* Codex 2026-05-18: keep footer links readable after browser visited styles. */
.site-footer a,
.site-footer a:link,
.site-footer a:visited,
.site-footer .site-footer__nav a,
.site-footer .site-footer__nav a:link,
.site-footer .site-footer__nav a:visited,
.site-footer .site-footer__links a,
.site-footer .site-footer__links a:link,
.site-footer .site-footer__links a:visited {
    color: rgba(255, 255, 255, .86) !important;
    text-decoration: none !important;
}

.site-footer a:hover,
.site-footer a:focus,
.site-footer .site-footer__nav a:hover,
.site-footer .site-footer__nav a:focus,
.site-footer .site-footer__links a:hover,
.site-footer .site-footer__links a:focus {
    color: #fff !important;
    opacity: 1;
    text-decoration: none !important;
}

.site-footer a:active,
.site-footer .site-footer__nav a:active,
.site-footer .site-footer__links a:active {
    color: #fff !important;
}

/* Codex 2026-05-18: final brand polish for visited links, Japanese nav, voice, and legal pages. */
@media screen and (min-width: 768px) {
    header {
        display: flex !important;
        align-items: stretch;
        min-height: 80px;
    }

    #headerWrap_1 {
        flex: 0 0 300px !important;
        max-width: none !important;
        margin: 0 !important;
    }

    #headerWrap_2 {
        flex: 1 1 auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    #headerWrap_1 .headBox,
    #headerWrap_2 .headBox {
        position: static !important;
        width: 100% !important;
        height: 80px !important;
        box-shadow: none;
    }

    .headLogo.headLogo--text {
        position: static !important;
        height: 100%;
        margin: 0 !important;
        padding-left: 32px;
    }
}

.headerMenu.headerMenu--jp {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.headerMenu.headerMenu--jp a,
.headerMenu.headerMenu--jp a:link,
.headerMenu.headerMenu--jp a:visited {
    color: #173326 !important;
}

.headerMenu.headerMenu--jp .headerTitle {
    display: grid;
    place-items: center;
    min-height: 54px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: .04em;
    text-align: center;
    white-space: normal;
}

.globalMenuSp a,
.globalMenuSp a:link,
.globalMenuSp a:visited {
    color: #173326 !important;
}

nav.globalMenuSp,
header .globalMenuSp {
    background: #123729 !important;
}

nav.globalMenuSp ul li,
header .globalMenuSp li {
    border-color: rgba(255, 255, 255, .22) !important;
}

nav.globalMenuSp ul li a,
nav.globalMenuSp ul li a:link,
nav.globalMenuSp ul li a:visited,
header .globalMenuSp li a,
header .globalMenuSp li a:link,
header .globalMenuSp li a:visited {
    color: rgba(255, 255, 255, .94) !important;
    font-weight: 700;
}

nav.globalMenuSp ul li a:hover,
nav.globalMenuSp ul li a:focus,
header .globalMenuSp li a:hover,
header .globalMenuSp li a:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, .08);
}

/* Codex 2026-05-19: harden the TOP mobile menu against older duplicated rules
   and external common JS/CSS differences in production. */
@media screen and (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
    }

    #headerWrap_2 {
        display: none !important;
    }

    .hamburger {
        display: flex !important;
        position: fixed !important;
        top: 10px !important;
        right: 12px !important;
        z-index: 10001 !important;
        width: 46px !important;
        height: 46px !important;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(23, 51, 38, .28);
        background: rgba(255, 255, 255, .94);
        box-sizing: border-box;
    }

    .hamburger p {
        position: absolute;
        left: 50%;
        bottom: -18px;
        transform: translateX(-50%);
        margin: 0;
        color: #173326 !important;
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
    }

    .hamburger span {
        left: 9px !important;
        width: 28px !important;
        height: 3px !important;
        background: #173326 !important;
    }

    .hamburger span:nth-child(1) {
        top: 12px !important;
    }

    .hamburger span:nth-child(2) {
        top: 21px !important;
    }

    .hamburger span:nth-child(3) {
        top: 30px !important;
    }

    .hamburger.active span:nth-child(1) {
        top: 21px !important;
        left: 9px !important;
    }

    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
        top: 21px !important;
        left: 9px !important;
    }

    nav.globalMenuSp,
    header .globalMenuSp {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 10000 !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: none !important;
        padding-top: 82px !important;
        overflow-y: auto !important;
        background: rgba(16, 52, 38, .96) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none !important;
        transition: opacity .25s ease, visibility .25s ease;
        box-sizing: border-box;
    }

    nav.globalMenuSp.active,
    header .globalMenuSp.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    nav.globalMenuSp ul,
    header .globalMenuSp ul {
        position: static !important;
        display: block !important;
        width: min(420px, calc(100% - 40px)) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    nav.globalMenuSp ul li,
    header .globalMenuSp li {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 52px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .2) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    nav.globalMenuSp ul li a,
    nav.globalMenuSp ul li a:link,
    nav.globalMenuSp ul li a:visited,
    header .globalMenuSp li a,
    header .globalMenuSp li a:link,
    header .globalMenuSp li a:visited {
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        min-height: 52px;
        padding: 14px 18px !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        text-align: center;
        text-decoration: none !important;
    }
}

.wrap a:visited,
.subpage-main a:visited,
.legal-page a:visited,
.contents-list a:visited {
    color: inherit;
}

.subpage-cta a,
.subpage-cta a:link,
.subpage-cta a:visited,
.brand-cta a,
.brand-cta a:link,
.brand-cta a:visited,
.btn-maru,
.btn-maru:link,
.btn-maru:visited,
a:visited .btn-maru {
    color: #fff !important;
}

.btn-maru {
    background: #173326 !important;
    border-color: #173326 !important;
    color: #fff !important;
}

.btn-maru::after {
    border-color: #fff !important;
}

.faq-anchor-nav a,
.faq-anchor-nav a:link,
.faq-anchor-nav a:visited {
    color: #173326 !important;
}

.contents-card,
.contents-card:link,
.contents-card:visited {
    color: #173326 !important;
}

.legal-page__content a,
.legal-page__content a:link,
.legal-page__content a:visited {
    color: #1f5c43 !important;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.legal-page__content a:hover,
.legal-page__content a:focus {
    color: #0f3324 !important;
}

.user-voice {
    margin: 80px auto 0;
    padding: 72px 28px;
    background: linear-gradient(135deg, #123729 0%, #173f30 54%, #0c241a 100%);
    color: #fff;
}

.user-voice__inner {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.user-voice__label {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, .7);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
}

.user-voice h2 {
    margin: 0;
    color: #fff;
    font-family: Georgia, "Times New Roman", "Yu Mincho", serif;
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 500;
    line-height: 1.25;
}

.user-voice__lead {
    max-width: 680px;
    margin: 18px 0 36px;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    line-height: 1.9;
}

.user-voice__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.user-voice__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 900px;
}

.user-voice__card {
    min-height: 260px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 22px 54px rgba(0, 0, 0, .18);
}

.user-voice__meta {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
    letter-spacing: .08em;
}

.user-voice__stars {
    margin: 0 0 12px;
    color: #e7a742;
    font-size: 18px;
    letter-spacing: .06em;
}

.user-voice__card h3 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 20px;
    line-height: 1.55;
}

.user-voice__card p:not(.user-voice__meta) {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    line-height: 1.9;
}

.user-voice__card span {
    display: inline-block;
    margin-top: 20px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    letter-spacing: .08em;
}

.user-voice__notice {
    margin: -22px 0 28px;
    color: rgba(255, 255, 255, .62);
    font-size: 12px;
    line-height: 1.7;
}

.legal-page {
    background: linear-gradient(180deg, #f7f7f1 0%, #ffffff 44%, #f5f2ea 100%);
    color: #173326;
}

.legal-hero {
    padding: 92px 24px 58px;
    text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(168, 185, 171, .42), transparent 45%);
}

.legal-hero__label {
    margin: 0 0 14px;
    color: #244033;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.legal-hero h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", "Yu Mincho", serif;
    font-size: clamp(34px, 4.4vw, 58px);
    font-weight: 500;
    line-height: 1.25;
}

.legal-hero p:not(.legal-hero__label) {
    max-width: 720px;
    margin: 20px auto 0;
    color: #30483d;
    font-size: 16px;
    line-height: 1.9;
}

.legal-page__content {
    width: min(1040px, calc(100% - 48px));
    margin: 0 auto 92px;
    padding: 44px;
    border: 1px solid rgba(23, 51, 38, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 24px 70px rgba(23, 51, 38, .08);
}

.legal-page__content h1 {
    margin-top: 0;
    font-size: 30px;
}

.legal-page__content h2,
.legal-page__content h3,
.legal-page__content h4 {
    color: #173326;
    line-height: 1.55;
}

.legal-page__content p,
.legal-page__content li,
.legal-page__content td {
    font-size: 15px;
    line-height: 1.9;
}

.legal-page__content table {
    width: 100%;
    border-collapse: collapse;
}

.legal-page__content td {
    padding: 16px;
    border-bottom: 1px solid rgba(23, 51, 38, .12);
    vertical-align: top;
}

.legal-page__content iframe {
    display: block;
    max-width: 100%;
    margin-top: 12px;
}

.privacy-contact-card {
    margin-top: 44px;
    padding: 32px;
    border: 1px solid rgba(23, 51, 38, .14);
    border-radius: 8px;
    background: linear-gradient(135deg, #f6f4ed 0%, #ffffff 100%);
    box-shadow: 0 18px 46px rgba(23, 51, 38, .08);
}

.privacy-contact-card__label {
    margin: 0 0 8px !important;
    color: #1f5c43;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .16em;
}

.privacy-contact-card h2 {
    margin: 0 0 12px;
    font-size: 28px;
}

.privacy-contact-card__actions {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 18px;
    align-items: center;
    margin: 24px 0;
}

.privacy-contact-card__button,
.privacy-contact-card__button:link,
.privacy-contact-card__button:visited {
    display: inline-grid;
    place-items: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    background: #173326;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
}

.privacy-contact-card__button:hover,
.privacy-contact-card__button:focus {
    background: #244033;
    color: #fff !important;
}

.privacy-contact-card__tel {
    display: grid;
    gap: 2px;
    padding: 16px 18px;
    border-left: 3px solid #b4ccc7;
    background: rgba(180, 204, 199, .18);
}

.privacy-contact-card__tel span {
    color: #53675f;
    font-size: 13px;
}

.privacy-contact-card__tel strong {
    color: #173326;
    font-size: 24px;
    letter-spacing: .04em;
}

.privacy-contact-card__note,
.privacy-contact-card__address {
    margin: 10px 0 0 !important;
    color: #53675f;
    font-size: 14px !important;
}

@media screen and (max-width: 751px) {
    .headerMenu.headerMenu--jp {
        display: none;
    }

    .brand-text-logo,
    .brand-text-logo:link,
    .brand-text-logo:visited {
        min-height: 48px;
        padding: 0 14px;
        font-size: 25px;
    }

    .product-purchase {
        width: calc(100% - 32px);
        margin: 42px auto;
    }

    .product-purchase__inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 20px 28px;
    }

    .product-purchase__image {
        min-height: 230px;
    }

    .product-purchase__image picture,
    .product-purchase__image img {
        max-width: 150px;
    }

    .product-purchase__specs div {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 12px;
    }

    .product-purchase__button,
    .product-purchase__button:link,
    .product-purchase__button:visited {
        width: 100%;
        box-sizing: border-box;
    }

    .howto-method-section {
        padding: 30px 18px;
    }

    .howto-method-grid {
        grid-template-columns: 1fr;
    }

    .howto-step-card__num,
    .howto-step-card h3,
    .howto-step-card p {
        margin-left: 20px;
        margin-right: 20px;
    }

    .howto-routine-section {
        min-height: 480px;
        padding: 0;
        background:
            linear-gradient(180deg, rgba(8, 29, 21, .08), rgba(16, 52, 38, .2)),
            var(--routine-image),
            #173326;
        background-position: 68% center;
        background-size: cover;
    }

    .howto-page .image-text-section__bg {
        inset: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
        transform: none;
    }

    .howto-page .image-text-section__picture img {
        object-fit: cover;
    }

    .howto-page .image-text-section--hero .image-text-section__picture img {
        object-position: 62% 18%;
    }

    .howto-page .image-text-section--routine .image-text-section__picture img {
        object-position: 72% center;
    }

    .howto-page .image-text-section::before {
        background: linear-gradient(
            180deg,
            rgba(16, 52, 38, .06) 0%,
            rgba(16, 52, 38, .16) 46%,
            rgba(16, 52, 38, .38) 100%
        );
    }

    .howto-page .image-text-section--routine::before {
        background: linear-gradient(
            180deg,
            rgba(16, 52, 38, .02) 0%,
            rgba(16, 52, 38, .08) 48%,
            rgba(16, 52, 38, .22) 100%
        );
    }

    .howto-routine-section__image {
        position: absolute;
        inset: 0;
        display: block;
        aspect-ratio: auto;
    }

    .howto-routine-section__body {
        max-width: none;
        margin: 0 18px;
        padding: 26px 22px 30px;
        background: rgba(8, 29, 21, .42);
        line-height: 1.95;
        text-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    }

    .howto-routine-section .section-kicker {
        font-size: 13px;
        line-height: 1.6;
    }

    .howto-routine-section h2 {
        font-size: clamp(26px, 8.2vw, 34px);
        line-height: 1.35;
        margin-bottom: 18px;
    }

    .howto-routine-section p {
        font-size: 14px;
        line-height: 1.95;
    }

    .howto-page .visual-hero {
        min-height: 420px;
    }

    .howto-page .visual-hero::before {
        background: linear-gradient(
            180deg,
            rgba(16, 52, 38, .01) 0%,
            rgba(16, 52, 38, .04) 48%,
            rgba(16, 52, 38, .12) 100%
        );
    }

    .howto-page .visual-hero__inner {
        width: calc(100% - 40px);
        padding: 20px 18px;
        border-radius: 8px;
        background: rgba(8, 29, 21, .16);
        backdrop-filter: none;
        box-sizing: border-box;
        text-shadow: 0 2px 10px rgba(0, 0, 0, .36);
    }

    .howto-page .visual-hero__title {
        color: #fffdf4;
        font-size: clamp(28px, 9.4vw, 40px);
        line-height: 1.32;
    }

    .howto-page .visual-hero__lead {
        color: rgba(255, 253, 244, .94);
        font-size: 14px;
        line-height: 1.9;
    }

    .howto-page .visual-hero__label {
        color: rgba(255, 253, 244, .88);
    }

    .about-page--refined .image-text-section__bg {
        inset: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        transform: none;
        margin: 0;
    }

    .about-page--refined .image-text-section__picture img {
        object-fit: cover;
    }

    .about-page--refined .image-text-section--hero .image-text-section__picture img {
        object-position: 62% 18%;
    }

    .about-page--refined .image-text-section--routine .image-text-section__picture img {
        object-position: 72% center;
    }

    .about-page--refined .image-text-section::before {
        background: linear-gradient(
            180deg,
            rgba(16, 52, 38, .03) 0%,
            rgba(16, 52, 38, .12) 48%,
            rgba(16, 52, 38, .32) 100%
        );
    }

    .about-page--refined .visual-hero {
        min-height: 430px;
    }

    .about-page--refined .visual-hero--about {
        min-height: 420px;
    }

    .about-page--refined .visual-hero--about .image-text-section__picture img {
        object-position: 58% 18%;
    }

    .about-page--refined .visual-hero__inner {
        width: calc(100% - 40px);
        padding: 20px 18px;
        border-radius: 8px;
        background: rgba(8, 29, 21, .2);
        text-shadow: 0 2px 12px rgba(0,0,0,.34);
    }

    .about-page--refined .visual-hero__title {
        font-size: clamp(32px, 9.4vw, 38px);
        line-height: 1.32;
    }

    .about-page--refined .visual-hero__statement {
        font-size: clamp(21px, 6.4vw, 28px);
        line-height: 1.5;
    }

    .about-page--refined .visual-hero__lead {
        font-size: 14px;
        line-height: 1.85;
    }

    .about-lead-panel {
        padding: 24px 20px;
    }

    .detail-split--reverse > figure {
        order: 0;
    }

    .about-value-grid {
        grid-template-columns: 1fr;
    }

    .about-value-grid article {
        min-height: auto;
    }

    .about-routine-section .howto-routine-section__body {
        background: rgba(8, 29, 21, .42);
    }

    .about-page--editorial .visual-hero__title {
        font-size: clamp(32px, 10vw, 44px);
        line-height: 1.35;
    }

    .about-editorial-intro {
        width: calc(100% - 40px);
        padding: 58px 0 44px;
        text-align: left;
    }

    .about-editorial-intro h2 {
        font-size: clamp(28px, 9vw, 38px);
    }

    .about-target-section {
        width: calc(100% - 40px);
        margin-bottom: 58px;
    }

    .about-target-section__head {
        margin-bottom: 26px;
    }

    .about-target-section__head h2 {
        font-size: clamp(28px, 8.8vw, 38px);
    }

    .about-target-section__head p {
        font-size: 15px;
        line-height: 1.9;
    }

    .about-target-layout,
    .about-target-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .about-target-visual {
        min-height: auto;
        aspect-ratio: 16 / 9;
    }

    .about-target-card {
        padding: 20px 18px 22px;
    }

    .about-image-message {
        width: calc(100% - 40px);
        min-height: auto;
        aspect-ratio: 1 / 1;
        margin-bottom: 58px;
        align-items: start;
    }

    .about-image-message__picture img {
        object-position: center top;
    }

    .about-image-message::before {
        background: linear-gradient(
            180deg,
            rgba(16, 52, 38, .2) 0%,
            rgba(16, 52, 38, .08) 46%,
            rgba(16, 52, 38, .02) 100%
        );
    }

    .about-image-message__content {
        align-self: start;
        width: calc(100% - 36px);
        margin: 20px 18px 0;
        text-shadow: 0 2px 12px rgba(0,0,0,.34);
    }

    .about-image-message__content h2 {
        font-size: clamp(22px, 6.4vw, 24px);
        line-height: 1.45;
    }

    .about-image-message__content p {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.78;
    }

    .about-daily-section {
        grid-template-columns: 1fr;
        width: calc(100% - 40px);
        margin-bottom: 58px;
    }

    .about-daily-section__content h2 {
        font-size: clamp(26px, 8.4vw, 36px);
    }

    .about-daily-section__content p {
        font-size: 15px;
        line-height: 1.9;
    }

    .about-editorial-grid {
        grid-template-columns: 1fr;
        width: calc(100% - 40px);
        margin-bottom: 58px;
    }

    .about-editorial-card {
        min-height: auto;
    }

    .about-editorial-card--visual {
        min-height: 330px;
        aspect-ratio: 1 / 1;
    }

    .about-editorial-card--text {
        padding: 30px 24px;
    }

    .about-editorial-card--text h2 {
        font-size: clamp(26px, 8.4vw, 36px);
    }

    .about-editorial-card--text p:not(.section-kicker) {
        font-size: 15px;
        line-height: 1.9;
    }

    .about-method-band {
        width: calc(100% - 40px);
        margin-bottom: 58px;
        padding: 32px 24px;
    }

    .about-method-band__copy h2 {
        font-size: clamp(28px, 8.8vw, 38px);
    }

    .about-method-points {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .about-method-points article {
        padding: 22px 0 22px 18px;
        background: transparent;
    }

    .howto-order-visual::after {
        left: 16px;
        right: 16px;
        top: 16px;
        max-width: calc(100% - 32px);
        padding: 10px 12px;
        border-radius: 8px;
        text-align: center;
        font-size: 12px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .subpage-cta {
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .subpage-cta__links {
        align-items: center;
        justify-content: center;
        gap: 14px;
    }

    .subpage-cta__links a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 280px;
        min-height: 48px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        text-align: center;
    }

    .user-voice {
        margin-top: 56px;
        padding: 56px 22px;
    }

    .user-voice__grid {
        grid-template-columns: 1fr;
    }

    .user-voice__grid--two {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .user-voice__card {
        min-height: 0;
        padding: 24px 20px;
    }

    .legal-hero {
        padding: 76px 22px 44px;
    }

    .legal-page__content {
        width: calc(100% - 32px);
        padding: 24px 18px;
        margin-bottom: 64px;
    }

    .legal-page__content td {
        display: block;
        width: 100% !important;
        padding: 12px 0;
    }

    .privacy-contact-card {
        padding: 24px 18px;
    }

    .privacy-contact-card__actions {
        grid-template-columns: 1fr;
    }

    .privacy-contact-card__tel {
        border-left: 0;
        border-top: 3px solid #b4ccc7;
    }
}

/* Codex 2026-05-20: final shared override for header/footer/CTA consistency */
.visual-hero__label,
.section-kicker,
.brand-kicker,
.legal-hero__label,
.subpage-eyebrow,
.hamburger p {
    display: none !important;
}

.site-footer a,
.site-footer a:link,
.site-footer a:visited,
.globalMenuSp a,
.globalMenuSp a:link,
.globalMenuSp a:visited {
    text-decoration: none;
}

.page-next a,
.page-next a:link,
.page-next a:visited {
    color: #103426;
    text-decoration: none;
}

.page-next__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
    body {
        padding-top: 64px;
    }

    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10000 !important;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 1px 14px rgba(16, 52, 38, .12);
    }

    #headerWrap_1 {
        position: relative;
        z-index: 10002;
        background: rgba(255, 255, 255, .96);
    }

    .hamburger {
        position: fixed !important;
        top: 12px !important;
        right: 14px !important;
        z-index: 10003 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
    }

    nav.globalMenuSp,
    header .globalMenuSp {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10001 !important;
        padding-top: 76px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    nav.globalMenuSp.active,
    header .globalMenuSp.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .page-hero__content {
        background: rgba(12, 43, 31, .34);
        border-radius: 16px;
        padding: 22px 18px;
    }

    .page-next {
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
    }

    .page-next__buttons a {
        width: 100%;
        max-width: 290px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        box-sizing: border-box;
    }

    .routine-section__content {
        background: rgba(12, 43, 31, .42);
        line-height: 1.85;
    }
}

/* Codex 2026-05-21: publish-ready ingredients page image layout */
.ingredients-page--final .image-text-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #123629 0%, #e8e3d8 50%, #123629 100%);
}

.ingredients-page--final .image-text-section__bg {
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100%;
    max-width: 1600px;
    height: 100%;
    margin: 0 auto;
    transform: translateX(-50%);
}

.ingredients-page--final .image-text-section__picture,
.ingredients-page--final .image-text-section__picture img {
    display: block;
    width: 100%;
    height: 100%;
}

.ingredients-page--final .image-text-section__picture img {
    object-fit: cover;
    object-position: center 24%;
}

.ingredients-page--final .visual-hero--ingredients {
    min-height: clamp(500px, 54vw, 640px);
}

.ingredients-page--final .visual-hero--ingredients::before {
    background: linear-gradient(90deg, rgba(8, 29, 21, .6), rgba(16, 52, 38, .28) 54%, rgba(16, 52, 38, .04));
}

.ingredients-page--final .visual-hero__inner {
    position: relative;
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.28);
}

.ingredients-page--final .visual-hero__title,
.ingredients-page--final .visual-hero__lead {
    color: #fff;
}

.ingredients-content {
    padding-top: clamp(58px, 8vw, 96px);
}

.ingredients-image-message {
    position: relative;
    display: grid;
    align-items: center;
    width: min(1120px, calc(100% - 48px));
    min-height: clamp(460px, 52vw, 620px);
    margin: 0 auto clamp(70px, 9vw, 112px);
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, #173326 0%, #71887b 56%, #e8e3d8 100%);
    color: #fff;
}

.ingredients-image-message__picture {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.ingredients-image-message__picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.ingredients-image-message::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(8, 29, 21, .68), rgba(16, 52, 38, .34) 55%, rgba(16, 52, 38, .08));
    pointer-events: none;
}

.ingredients-image-message__content {
    position: relative;
    z-index: 2;
    width: min(650px, calc(100% - 64px));
    margin-left: clamp(28px, 6vw, 72px);
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.28);
}

.ingredients-image-message__content h2,
.ingredients-section-head h2,
.ingredients-texture-section__content h2,
.ingredients-all-section h2 {
    margin: 0;
    color: #173326;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(30px, 4.4vw, 54px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .02em;
}

.ingredients-image-message__content h2 {
    color: #fff;
}

.ingredients-image-message__content p {
    margin-top: 18px;
    color: rgba(255,255,255,.92);
    font-size: clamp(15px, 1.65vw, 18px);
    line-height: 1.95;
}

.ingredients-botanical-section,
.ingredients-free-section,
.ingredients-texture-section,
.ingredients-all-section {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto clamp(70px, 9vw, 112px);
}

.ingredients-section-head {
    max-width: 780px;
    margin-bottom: clamp(28px, 4vw, 46px);
}

.ingredients-section-head p,
.ingredients-texture-section__content p,
.ingredients-all-section > p:not(.all-ingredients) {
    margin-top: 18px;
    color: #3e5147;
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.9;
}

.ingredients-botanical-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 24px);
}

.ingredients-botanical-card {
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(23, 51, 38, .08);
}

.ingredients-botanical-card picture,
.ingredients-botanical-card img {
    display: block;
    width: 100%;
}

.ingredients-botanical-card picture {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, #e8e3d8, #b8c6ba 52%, #173326);
}

.ingredients-botanical-card img {
    height: 100%;
    object-fit: cover;
    transition: transform .32s ease;
}

.ingredients-botanical-card:hover img {
    transform: scale(1.04);
}

.ingredients-botanical-card div {
    padding: 16px 16px 18px;
}

.ingredients-botanical-card h3 {
    margin: 0;
    color: #173326;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 700;
    line-height: 1.45;
}

.ingredients-botanical-card p {
    margin: 8px 0 0;
    color: #4d6157;
    font-size: 14px;
    line-height: 1.65;
}

.ingredients-free-section {
    padding: clamp(34px, 5vw, 58px);
    border-radius: 8px;
    background: #ede8dd;
}

.ingredients-free-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ingredients-free-grid span {
    display: grid;
    place-items: center;
    min-height: 76px;
    border: 1px solid rgba(23, 51, 38, .16);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(12deg, transparent calc(50% - 1px), rgba(23, 51, 38, .18) calc(50% - 1px), rgba(23, 51, 38, .18) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(-12deg, transparent calc(50% - 1px), rgba(23, 51, 38, .10) calc(50% - 1px), rgba(23, 51, 38, .10) calc(50% + 1px), transparent calc(50% + 1px)),
        #fff;
    color: #173326;
    font-weight: 700;
    text-align: center;
}

.ingredients-texture-section {
    display: grid;
    grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(24px, 5vw, 64px);
}

.ingredients-texture-section__image {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 8px;
    aspect-ratio: 3 / 2;
    background: linear-gradient(135deg, #e8e3d8, #b8c6ba 52%, #173326);
    box-shadow: 0 18px 46px rgba(23, 51, 38, .08);
}

.ingredients-texture-section__image picture,
.ingredients-texture-section__image img {
    display: block;
    width: 100%;
    height: 100%;
}

.ingredients-texture-section__image img {
    object-fit: cover;
}

.ingredients-all-section {
    padding: clamp(28px, 4.6vw, 52px);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(23, 51, 38, .08);
}

.ingredients-all-section .all-ingredients {
    margin-top: 20px;
    padding: clamp(18px, 3vw, 28px);
    border-radius: 8px;
    background: #f7f4ee;
    color: #3e5147;
    font-size: 14px;
    line-height: 2;
    overflow-wrap: anywhere;
    word-break: normal;
}

@media screen and (max-width: 767px) {
    .ingredients-page--final .visual-hero--ingredients {
        min-height: 420px;
    }

    .ingredients-page--final .visual-hero--ingredients .image-text-section__bg {
        left: 0;
        max-width: none;
        transform: none;
    }

    .ingredients-page--final .visual-hero--ingredients .image-text-section__picture img {
        object-position: 58% 20%;
    }

    .ingredients-page--final .visual-hero--ingredients::before {
        background: linear-gradient(180deg, rgba(8,29,21,.06), rgba(16,52,38,.16) 48%, rgba(16,52,38,.36));
    }

    .ingredients-page--final .visual-hero__inner {
        width: calc(100% - 40px);
        padding: 20px 18px;
        border-radius: 8px;
        background: rgba(8, 29, 21, .22);
    }

    .ingredients-page--final .visual-hero__title {
        font-size: clamp(32px, 9.4vw, 38px);
        line-height: 1.32;
    }

    .ingredients-page--final .visual-hero__lead {
        font-size: 14px;
        line-height: 1.82;
    }

    .ingredients-content {
        padding-top: 58px;
    }

    .ingredients-image-message {
        width: calc(100% - 40px);
        min-height: 520px;
        align-items: start;
        margin-bottom: 58px;
    }

    .ingredients-image-message::before {
        background: linear-gradient(180deg, rgba(16, 52, 38, .18), rgba(16, 52, 38, .08) 42%, rgba(16, 52, 38, .18));
    }

    .ingredients-image-message__content {
        width: calc(100% - 36px);
        margin: 22px 18px 0;
        text-shadow: 0 2px 12px rgba(0,0,0,.36);
    }

    .ingredients-image-message__content h2 {
        font-size: clamp(23px, 6.6vw, 26px);
        line-height: 1.45;
    }

    .ingredients-image-message__content p {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.78;
    }

    .ingredients-botanical-section,
    .ingredients-free-section,
    .ingredients-texture-section,
    .ingredients-all-section {
        width: calc(100% - 40px);
        margin-bottom: 58px;
    }

    .ingredients-section-head h2,
    .ingredients-texture-section__content h2,
    .ingredients-all-section h2 {
        font-size: clamp(26px, 8.2vw, 36px);
    }

    .ingredients-botanical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .ingredients-botanical-card div {
        padding: 13px 12px 15px;
    }

    .ingredients-botanical-card h3 {
        font-size: 14px;
    }

    .ingredients-botanical-card p {
        font-size: 12px;
        line-height: 1.55;
    }

    .ingredients-free-section {
        padding: 28px 20px;
    }

    .ingredients-free-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ingredients-free-grid span {
        min-height: 62px;
        font-size: 14px;
    }

    .ingredients-texture-section {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ingredients-texture-section__image {
        aspect-ratio: 4 / 3;
    }

    .ingredients-all-section {
        padding: 28px 20px;
    }
}

/* Codex 2026-05-23: about page final visual tuning */
.about-page .about-daily-section {
    position: relative;
    display: block;
    width: min(1120px, calc(100% - 48px));
    min-height: clamp(460px, 46vw, 560px);
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 108px;
    padding: clamp(44px, 6vw, 72px);
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(247,244,238,.96) 0%, rgba(247,244,238,.9) 44%, rgba(247,244,238,.34) 72%, rgba(247,244,238,.08) 100%),
        linear-gradient(135deg, #e8e3d8 0%, #b8c6ba 48%, #173326 100%);
    box-shadow: 0 18px 46px rgba(23, 51, 38, .08);
}

.about-page .about-daily-section__content {
    position: static;
    z-index: 2;
    max-width: 560px;
}

.about-page .about-daily-section__content h2,
.about-page .about-daily-section__text {
    position: relative;
    z-index: 2;
    max-width: 560px;
}

.about-page .about-daily-section__image {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 1;
    width: min(58%, 650px);
    height: 100%;
    margin: 0;
    border-radius: 0;
    aspect-ratio: auto;
    box-shadow: none;
}

.about-page .about-daily-section__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(247,244,238,.82) 0%, rgba(247,244,238,.2) 38%, rgba(247,244,238,0) 72%);
    pointer-events: none;
}

.about-page .about-daily-section__image img {
    object-fit: cover;
    object-position: center center;
}

.about-page .about-daily-section__text p:first-child {
    margin-top: 22px;
}

@media screen and (max-width: 767px) {
    .about-page--editorial .visual-hero__title,
    .about-page--refined .visual-hero__title,
    .about-page .visual-hero__title {
        font-size: clamp(32px, 8.8vw, 36px) !important;
        line-height: 1.34 !important;
        letter-spacing: 0 !important;
    }

    .about-page .about-editorial-intro h2,
    .about-page .about-target-section__head h2,
    .about-page .about-daily-section__content h2,
    .about-page .about-method-band__copy h2,
    .about-page .about-routine-section h2,
    .about-page .page-next h2 {
        font-size: clamp(26px, 7.4vw, 30px) !important;
        line-height: 1.42 !important;
        letter-spacing: 0 !important;
    }

    .about-page .about-image-message {
        align-items: start;
        min-height: auto;
        aspect-ratio: 1 / 1;
    }

    .about-page .about-image-message::before {
        background: linear-gradient(180deg, rgba(8, 29, 21, .16) 0%, rgba(8, 29, 21, .05) 42%, rgba(8, 29, 21, .02) 100%) !important;
    }

    .about-page .about-image-message__picture img {
        object-position: center top;
    }

    .about-page .about-image-message__content {
        align-self: start;
        width: min(56%, 210px);
        margin: 16px 0 0 16px;
        text-shadow: 0 2px 10px rgba(0,0,0,.34);
    }

    .about-page .about-image-message__content h2 {
        font-size: clamp(21px, 5.8vw, 23px) !important;
        line-height: 1.38 !important;
        letter-spacing: 0 !important;
    }

    .about-page .about-image-message__content p {
        margin-top: 10px;
        font-size: 13.5px !important;
        line-height: 1.84 !important;
    }

    .about-page .about-daily-section {
        display: block;
        width: calc(100% - 40px);
        min-height: 0;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 58px;
        padding: 0;
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    .about-page .about-daily-section__content {
        position: relative;
        display: flex;
        flex-direction: column;
        max-width: none;
    }

    .about-page .about-daily-section__content h2 {
        order: 1;
        margin-bottom: 22px;
    }

    .about-page .about-daily-section__image {
        position: relative;
        inset: auto;
        order: 2;
        width: 100%;
        height: auto;
        margin: 0;
        overflow: hidden;
        border-radius: 8px;
        aspect-ratio: 3 / 2;
        box-shadow: 0 18px 46px rgba(23, 51, 38, .08);
    }

    .about-page .about-daily-section__image::after {
        display: none;
    }

    .about-page .about-daily-section__image img {
        object-fit: cover;
        object-position: center center;
    }

    .about-page .about-daily-section__text {
        order: 3;
        margin-top: 22px;
    }

    .about-page .about-daily-section__text p:first-child {
        margin-top: 0;
    }

    .about-page .about-daily-section__text p {
        font-size: 15px;
        line-height: 1.9;
    }
}

/* Codex 2026-05-23: shared hero and CTA visual alignment */
.page-hero .image-text-section__bg,
.page-hero .page-visual__image,
.page-hero .responsive-picture,
.page-hero .image-text-section__picture,
.page-hero .image-text-section__picture img {
    width: 100%;
    height: 100%;
}

.page-hero .image-text-section__picture img,
.page-hero .responsive-picture img {
    display: block;
    object-fit: cover;
}

.visual-hero--about .image-text-section__picture img {
    object-position: center bottom;
}

.about-page--refined .visual-hero--about .image-text-section__picture img,
.about-page .visual-hero--about .image-text-section__picture img {
    object-position: center bottom !important;
}

.visual-hero--ingredients .image-text-section__picture img {
    object-position: 42% center;
}

.visual-hero--howto .image-text-section__picture img {
    object-position: 45% center;
}

.visual-hero--faq .image-text-section__picture img {
    object-position: 45% center;
}

.ingredients-page--final .visual-hero--ingredients .image-text-section__picture img {
    object-position: 42% center !important;
}

.howto-page .visual-hero--howto .image-text-section__picture img {
    object-position: 45% center !important;
}

.faq-page .visual-hero--faq .image-text-section__picture img,
.visual-hero--faq .responsive-picture img {
    object-position: 45% center !important;
}

.ingredients-page--final .visual-hero--ingredients::before {
    background: linear-gradient(
        90deg,
        rgba(9, 28, 21, .72) 0%,
        rgba(9, 28, 21, .46) 42%,
        rgba(9, 28, 21, .14) 76%,
        rgba(9, 28, 21, .04) 100%
    ) !important;
}

.ingredients-page--final .visual-hero--ingredients .visual-hero__inner {
    text-shadow: 0 2px 14px rgba(0,0,0,.28);
}

.about-page .about-daily-section {
    background: #f8f6f1;
}

.about-page .about-daily-section__content {
    position: static;
    z-index: 2;
    max-width: 520px;
    padding: clamp(34px, 4.4vw, 54px);
    border-radius: 8px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 42px rgba(23, 51, 38, .08);
}

.about-page .about-daily-section__content h2,
.about-page .about-daily-section__text {
    max-width: none;
}

.about-page .about-daily-section__image {
    width: min(56%, 620px);
}

.about-page .about-daily-section__image img {
    object-position: 35% center;
}

.about-page .about-daily-section__image::after {
    background: linear-gradient(90deg, rgba(248,246,241,.72) 0%, rgba(248,246,241,.16) 38%, rgba(248,246,241,0) 72%);
}

.product-purchase__image picture,
.product-purchase__image img {
    display: block;
    width: 100%;
    height: 100%;
}

.product-purchase__image img {
    object-fit: cover;
    object-position: center center;
}

.product-purchase__button,
.product-purchase__button:link,
.product-purchase__button:visited {
    color: #fff !important;
    background: #123629;
    border-color: #123629;
}

.product-purchase__button:hover,
.product-purchase__button:focus {
    color: #fff !important;
    background: #0b2a20;
    border-color: #0b2a20;
}

@media screen and (min-width: 768px) {
    .product-purchase__inner {
        grid-template-columns: minmax(360px, .95fr) minmax(360px, 1.05fr);
        align-items: center;
    }

    .product-purchase__image {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }
}

@media screen and (max-width: 767px) {
    .about-page .visual-hero--about .image-text-section__picture img {
        object-position: center bottom;
    }

    .about-page .about-image-message__content p br {
        display: none;
    }

    .about-page .about-daily-section__content {
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .about-page .about-daily-section__image {
        width: 100%;
    }

    .about-page .about-daily-section__image img {
        object-position: center center;
    }

    .ingredients-page--final .visual-hero--ingredients::before {
        background: linear-gradient(
            180deg,
            rgba(9, 28, 21, .26) 0%,
            rgba(9, 28, 21, .14) 48%,
            rgba(9, 28, 21, .36) 100%
        ) !important;
    }

    .ingredients-page--final .visual-hero--ingredients .image-text-section__picture img {
        object-position: 42% center !important;
    }

    .ingredients-page--final .ingredients-texture-section {
        display: flex;
        flex-direction: column;
    }

    .ingredients-page--final .ingredients-texture-section__content {
        order: 1;
    }

    .ingredients-page--final .ingredients-texture-section__image {
        order: 2;
        width: 100%;
        margin-top: 24px;
    }

    .product-purchase__inner {
        display: flex;
        flex-direction: column;
    }

    .product-purchase__image {
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    .product-purchase__content {
        width: 100%;
    }
}

/* Codex 2026-05-23: final image position and product CTA fixes */
.product-purchase__image {
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    padding: clamp(18px, 3vw, 34px);
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 34%, rgba(255,255,255,.72), transparent 34%),
        linear-gradient(135deg, #f4f1ea 0%, #d8e2d8 54%, #b9cbbb 100%) !important;
}
.product-purchase__image picture {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}
.product-purchase__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}
.about-page .visual-hero--about .image-text-section__picture img,
.about-page--refined .visual-hero--about .image-text-section__picture img {
    object-position: 50% 100% !important;
}
.ingredients-page--final .visual-hero--ingredients .image-text-section__picture img {
    object-position: 42% center !important;
}
.howto-page .visual-hero--howto .image-text-section__picture img {
    object-position: 45% center !important;
}
.faq-page .visual-hero--faq .responsive-picture img,
.visual-hero--faq .responsive-picture img {
    object-position: center center !important;
}
@media screen and (min-width: 768px) {
    .product-purchase__image {
        align-self: stretch;
    }
}
@media screen and (max-width: 767px) {
    .about-page .visual-hero--about .image-text-section__picture img,
    .about-page--refined .visual-hero--about .image-text-section__picture img {
        object-position: 75% 85% !important;
    }
    .ingredients-page--final .visual-hero--ingredients .image-text-section__picture img {
        object-position: 75% 85% !important;
    }
    .howto-page .visual-hero--howto .image-text-section__picture img {
        object-position: 75% 20% !important;
    }
    .faq-page .visual-hero--faq .responsive-picture img,
    .visual-hero--faq .responsive-picture img {
        object-position: center center !important;
    }
    .ingredients-page--final .ingredients-image-message {
        aspect-ratio: 1 / 1;
        min-height: auto !important;
        width: calc(100% - 40px);
    }
    .ingredients-page--final .ingredients-image-message__picture img {
        object-fit: cover;
        object-position: 75% center !important;
    }
    .ingredients-page--final .ingredients-image-message__content {
        width: min(62%, 230px);
        margin: 18px 0 0 18px;
    }
    .ingredients-page--final .ingredients-image-message__content h2 {
        font-size: clamp(21px, 5.8vw, 24px);
        line-height: 1.42;
    }
    .ingredients-page--final .ingredients-image-message__content p {
        font-size: 13.5px;
        line-height: 1.78;
    }
    .product-purchase__image {
        width: 100%;
        min-height: 0 !important;
        aspect-ratio: 16 / 10;
        padding: 18px;
    }
}

/* Codex 2026-05-23: about daily section vertical stack reset */
.about-page .about-daily-section {
    display: block !important;
    width: min(960px, calc(100% - 48px)) !important;
    min-height: 0 !important;
    margin: clamp(58px, 8vw, 96px) auto !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.about-page .about-daily-section__content {
    display: flex !important;
    flex-direction: column !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative !important;
}
.about-page .about-daily-section__content h2 {
    order: 1 !important;
    width: 100% !important;
    max-width: 820px !important;
    margin: 0 auto clamp(24px, 4vw, 34px) !important;
    color: #173326 !important;
    font-size: clamp(28px, 3.6vw, 42px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    position: static !important;
}
.about-page .about-daily-section__image {
    order: 2 !important;
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    aspect-ratio: auto !important;
    box-shadow: 0 18px 46px rgba(23, 51, 38, .08) !important;
}
.about-page .about-daily-section__image::after {
    display: none !important;
}
.about-page .about-daily-section__image picture,
.about-page .about-daily-section__image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
}
.about-page .about-daily-section__image img {
    object-fit: contain !important;
    object-position: center center !important;
}
.about-page .about-daily-section__text {
    order: 3 !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: clamp(24px, 4vw, 34px) auto 0 !important;
    color: #3e5147 !important;
    position: static !important;
}
.about-page .about-daily-section__text p {
    margin-top: 16px !important;
    font-size: clamp(15px, 1.45vw, 17px) !important;
    line-height: 1.95 !important;
}
.about-page .about-daily-section__text p:first-child {
    margin-top: 0 !important;
}
@media screen and (max-width: 767px) {
    .about-page .about-daily-section {
        width: calc(100% - 40px) !important;
        margin: 58px auto !important;
    }
    .about-page .about-daily-section__content h2 {
        font-size: clamp(26px, 7.2vw, 30px) !important;
        line-height: 1.42 !important;
        text-align: left !important;
    }
    .about-page .about-daily-section__text {
        margin-top: 22px !important;
    }
}

/* Codex 2026-05-23: about daily image flow height fix */
.about-page .about-daily-section__image {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
}
.about-page .about-daily-section__image picture {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
.about-page .about-daily-section__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Codex 2026-05-23: howto PC hero position */
@media screen and (min-width: 768px) {
    .howto-page .visual-hero--howto .image-text-section__picture img {
        object-fit: cover !important;
        object-position: 75% 20% !important;
    }
}

/* Codex 2026-05-25: ingredients aidelin section height and readability */
.ingredients-page--final .ingredients-aidelin-section,
.ingredients-page--final .ingredients-image-message.ingredients-aidelin-section {
    min-height: clamp(560px, 60vw, 740px) !important;
}
.ingredients-page--final .ingredients-aidelin-section::before {
    background: linear-gradient(
        90deg,
        rgba(2, 18, 22, .66) 0%,
        rgba(6, 42, 36, .48) 44%,
        rgba(6, 42, 36, .16) 74%,
        rgba(6, 42, 36, .04) 100%
    ) !important;
}
.ingredients-page--final .ingredients-aidelin-section .ingredients-image-message__picture img {
    object-fit: cover !important;
    object-position: center center !important;
}
@media screen and (max-width: 767px) {
    .ingredients-page--final .ingredients-aidelin-section,
    .ingredients-page--final .ingredients-image-message.ingredients-aidelin-section {
        aspect-ratio: auto !important;
        min-height: 620px !important;
        align-items: start !important;
    }
    .ingredients-page--final .ingredients-aidelin-section::before {
        background: linear-gradient(
            180deg,
            rgba(0, 18, 24, .58) 0%,
            rgba(0, 36, 34, .46) 44%,
            rgba(0, 36, 34, .24) 72%,
            rgba(0, 36, 34, .12) 100%
        ) !important;
    }
    .ingredients-page--final .ingredients-aidelin-section .ingredients-image-message__content {
        width: calc(100% - 36px) !important;
        margin: 20px 18px 0 !important;
        padding: 18px 16px !important;
        border-radius: 8px !important;
        background: linear-gradient(135deg, rgba(0, 28, 28, .56), rgba(9, 42, 36, .38)) !important;
        box-sizing: border-box !important;
        text-shadow: 0 2px 12px rgba(0,0,0,.38) !important;
    }
    .ingredients-page--final .ingredients-aidelin-section .ingredients-image-message__content h2 {
        font-size: clamp(22px, 6.2vw, 25px) !important;
        line-height: 1.44 !important;
    }
    .ingredients-page--final .ingredients-aidelin-section .ingredients-image-message__content p {
        font-size: 14px !important;
        line-height: 1.82 !important;
    }
    .ingredients-page--final .ingredients-aidelin-section .ingredients-image-message__picture img {
        object-position: 58% center !important;
    }
}
/* Codex 2026-05-25: stable product purchase CTA layout */
.product-purchase {
    width: min(1120px, calc(100% - 48px)) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.product-purchase__inner {
    display: grid !important;
    grid-template-columns: minmax(320px, 460px) minmax(0, 1fr) !important;
    gap: clamp(32px, 4vw, 48px) !important;
    align-items: center !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}
.product-purchase__image {
    position: relative !important;
    z-index: 0 !important;
    width: 100% !important;
    max-width: 460px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #e8eee6 !important;
    align-self: center !important;
}
.product-purchase__image picture,
.product-purchase__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}
.product-purchase__image img {
    object-fit: cover !important;
    object-position: center center !important;
}
.product-purchase__content {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
}
.product-purchase__button,
.product-purchase__button:link,
.product-purchase__button:visited {
    color: #ffffff !important;
}
.product-purchase__button:hover,
.product-purchase__button:focus,
.product-purchase__button:active {
    color: #ffffff !important;
}
@media screen and (max-width: 767px) {
    .product-purchase {
        width: calc(100% - 40px) !important;
    }
    .product-purchase__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        padding: 24px 20px 28px !important;
    }
    .product-purchase__image {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 16 / 10 !important;
    }
    .product-purchase__content {
        text-align: left !important;
    }
    .product-purchase__button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* Codex 2026-05-25: pinpoint aidelin SP height and howto order label */
.howto-order-visual {
    position: relative;
}
.howto-order-visual::after {
    content: none;
}
.howto-order-visual__label {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 4;
    max-width: calc(100% - 48px);
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(12, 38, 28, .88);
    color: #fffdf4;
    font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", sans-serif;
    font-size: clamp(13px, 1.7vw, 16px);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.55;
    text-align: center;
    text-shadow: none;
    box-shadow: 0 12px 28px rgba(12, 38, 28, .22);
    box-sizing: border-box;
}
@media screen and (max-width: 767px) {
    .ingredients-page--final .ingredients-aidelin-section,
    .ingredients-page--final .ingredients-image-message.ingredients-aidelin-section {
        aspect-ratio: 4 / 5 !important;
        min-height: 0 !important;
        height: auto !important;
        align-items: start !important;
    }
    .ingredients-page--final .ingredients-aidelin-section::before {
        background: linear-gradient(
            180deg,
            rgba(0, 18, 24, .50) 0%,
            rgba(0, 36, 34, .42) 42%,
            rgba(0, 36, 34, .20) 74%,
            rgba(0, 36, 34, .08) 100%
        ) !important;
    }
    .ingredients-page--final .ingredients-aidelin-section .ingredients-image-message__picture,
    .ingredients-page--final .ingredients-aidelin-section .ingredients-image-message__picture img {
        width: 100% !important;
        height: 100% !important;
    }
    .ingredients-page--final .ingredients-aidelin-section .ingredients-image-message__picture img {
        object-fit: cover !important;
        object-position: 70% center !important;
    }
    .ingredients-page--final .ingredients-aidelin-section .ingredients-image-message__content {
        width: calc(100% - 36px) !important;
        margin: 16px 18px 0 !important;
        padding: 16px 14px !important;
        background: linear-gradient(135deg, rgba(0, 28, 28, .58), rgba(9, 42, 36, .40)) !important;
    }
    .ingredients-page--final .ingredients-aidelin-section .ingredients-image-message__content h2 {
        font-size: clamp(21px, 6vw, 24px) !important;
        line-height: 1.4 !important;
    }
    .ingredients-page--final .ingredients-aidelin-section .ingredients-image-message__content p {
        font-size: 13.5px !important;
        line-height: 1.76 !important;
    }
    .howto-order-visual__label {
        top: 14px;
        left: 14px;
        max-width: calc(100% - 28px);
        padding: 9px 13px;
        font-size: 12px;
        line-height: 1.45;
        white-space: normal;
    }
}

/* Codex 2026-05-25: about intro left alignment */
.about-editorial-intro {
    text-align: left !important;
}
.about-editorial-intro h2,
.about-editorial-intro p {
    text-align: left !important;
}
.about-editorial-intro p:not(.section-kicker) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Codex 2026-05-25: align about intro and target section */
.about-editorial-intro,
.about-target-section {
    width: min(1120px, calc(100% - 48px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.about-editorial-intro p:not(.section-kicker),
.about-target-section__head p {
    max-width: 780px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.about-target-section__head,
.about-target-layout,
.about-target-visual {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Codex 2026-05-25: about daily section source order */
.about-page .about-daily-section {
    display: block !important;
    width: min(980px, calc(100% - 48px)) !important;
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.about-page .about-daily-section > h2 {
    margin: 0 0 clamp(24px, 3vw, 34px) !important;
    color: #173326 !important;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
    font-size: clamp(30px, 4.4vw, 54px) !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    letter-spacing: .02em !important;
}
.about-page .about-daily-section__image {
    width: 100% !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
}
.about-page .about-daily-section__image picture,
.about-page .about-daily-section__image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
.about-page .about-daily-section__image img {
    object-fit: contain !important;
}
.about-page .about-daily-section__content {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: clamp(24px, 3.5vw, 34px) 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
.about-page .about-daily-section__content p {
    margin-top: 0 !important;
    color: #3e5147 !important;
    font-size: clamp(15px, 1.7vw, 18px) !important;
    line-height: 1.95 !important;
}
.about-page .about-daily-section__content p + p {
    margin-top: 18px !important;
}
@media screen and (max-width: 767px) {
    .about-page .about-daily-section {
        width: min(100% - 40px, 980px) !important;
    }
    .about-page .about-daily-section > h2 {
        font-size: clamp(26px, 7.2vw, 30px) !important;
        line-height: 1.42 !important;
        margin-bottom: 20px !important;
    }
    .about-page .about-daily-section__content {
        margin-top: 20px !important;
    }
}
/* Codex 2026-05-26: readable owned-media article layout */
.article-page--choice {
    background: #f8f7f2;
}
.article-page--choice .article-hero {
    align-items: center;
    border-bottom: 1px solid rgba(35, 62, 48, .12);
}
.article-page--choice .article-hero__text h1 {
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.34;
}
.article-page--choice .article-hero__text p {
    margin-top: 18px;
}
.article-page--choice .article-body {
    max-width: 860px;
    padding-top: clamp(42px, 6vw, 72px);
    padding-bottom: clamp(70px, 9vw, 118px);
}
.article-page--choice .subpage-section {
    margin: 0 0 clamp(34px, 5vw, 56px);
    padding: clamp(30px, 5vw, 52px);
    border: 1px solid rgba(35, 62, 48, .12);
    border-radius: 8px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 16px 42px rgba(23, 51, 38, .06);
}
.article-page--choice .subpage-section h2 {
    margin-bottom: 20px;
    font-size: clamp(25px, 3.4vw, 36px);
    line-height: 1.5;
}
.article-page--choice .subpage-section h3 {
    margin: clamp(28px, 4vw, 40px) 0 14px;
    padding-left: 16px;
    border-left: 4px solid #2b684d;
    color: #173326;
    font-size: clamp(19px, 2.3vw, 24px);
    font-weight: 700;
    line-height: 1.6;
}
.article-page--choice .subpage-section p {
    margin: 0;
    color: #394b42;
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 2;
}
.article-page--choice .subpage-section p + p {
    margin-top: 16px;
}
.article-page--choice .page-next {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
.article-page--choice .page-next p + p {
    margin-top: 14px;
}
.article-page--choice .page-next a,
.article-page--choice .page-next a:visited {
    color: #ffffff;
}
@media screen and (max-width: 767px) {
    .article-page--choice .article-hero {
        grid-template-columns: 1fr;
        padding-top: 92px;
    }
    .article-page--choice .article-hero__text h1 {
        font-size: clamp(28px, 8vw, 36px);
    }
    .article-page--choice .article-body {
        padding-left: 20px;
        padding-right: 20px;
    }
    .article-page--choice .subpage-section {
        padding: 26px 20px;
    }
    .article-page--choice .subpage-section h2 {
        font-size: clamp(23px, 6.4vw, 29px);
    }
    .article-page--choice .subpage-section h3 {
        font-size: 18px;
    }
    .article-page--choice .subpage-section p {
        font-size: 15.5px;
        line-height: 1.95;
    }
}

/* Codex 2026-05-26: show current eye impression lab article as a single live card */
.contents-grid--single {
  grid-template-columns: minmax(280px, 420px);
}

@media screen and (max-width: 767px) {
  .contents-grid--single {
    grid-template-columns: 1fr;
  }
}

/* Codex 2026-05-26: final content article mobile headings and stable product CTA image */
.product-purchase__image img {
    object-fit: contain !important;
    object-position: center center !important;
    background: #e8eee6 !important;
}
.article-page--choice .product-purchase {
    margin-top: clamp(34px, 5vw, 56px) !important;
    margin-bottom: 0 !important;
}
.article-page--choice .page-next h2 {
    font-size: clamp(24px, 3.2vw, 34px) !important;
}
.article-page--choice .page-next p {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 767px) {
    .article-page--choice .article-hero__text h1 {
        font-size: clamp(22px, 6.1vw, 28px) !important;
        line-height: 1.45 !important;
        letter-spacing: 0 !important;
    }
    .article-page--choice .subpage-section h2,
    .article-page--choice .page-next h2 {
        font-size: clamp(20px, 5.4vw, 24px) !important;
        line-height: 1.55 !important;
        letter-spacing: 0 !important;
    }
    .article-page--choice .subpage-section h3 {
        font-size: clamp(16px, 4.4vw, 18px) !important;
        line-height: 1.65 !important;
    }
    .article-page--choice .page-next p {
        font-size: 14.5px !important;
        line-height: 1.85 !important;
    }
    .article-page--choice .product-purchase {
        width: calc(100% - 32px) !important;
        margin-top: 30px !important;
    }
}

/* Codex 2026-05-26: final article hero and product CTA placement */
.article-page--choice .article-hero__text h1 {
    font-size: clamp(40px, 3.2vw, 48px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
}
.article-page--choice .article-body > .product-purchase {
    width: min(1120px, calc(100vw - 48px)) !important;
    max-width: 1120px !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
}
.article-page--choice .product-purchase__inner {
    grid-template-columns: minmax(340px, 480px) minmax(420px, 1fr) !important;
    gap: clamp(36px, 4vw, 56px) !important;
    align-items: center !important;
}
.article-page--choice .product-purchase__content {
    min-width: 0 !important;
    max-width: 560px !important;
}
.article-page--choice .product-purchase__name {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-height: 1.35 !important;
}
.article-page--choice .product-purchase__button {
    width: fit-content !important;
    min-width: 220px !important;
    max-width: 100% !important;
}
@media screen and (max-width: 767px) {
    .article-page--choice .article-hero__text h1 {
        font-size: clamp(22px, 6.1vw, 28px) !important;
        line-height: 1.45 !important;
    }
    .article-page--choice .article-body > .product-purchase {
        width: calc(100% - 0px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
    }
    .article-page--choice .product-purchase__inner {
        grid-template-columns: 1fr !important;
    }
    .article-page--choice .product-purchase__content {
        max-width: none !important;
    }
    .article-page--choice .product-purchase__button {
        width: 100% !important;
        min-width: 0 !important;
    }
}



/* Codex 2026-05-27: keep the mens eye cream choice article eyecatch square and readable */
.article-page--choice .article-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    grid-template-areas:
        "title image"
        "lead image";
}

.article-page--choice .article-hero__text {
    grid-area: title;
}

.article-page--choice .article-hero__lead {
    grid-area: lead;
    max-width: 680px;
}

.article-page--choice .article-hero__lead p {
    margin: 18px 0 0;
    color: #344a3e;
    font-size: clamp(16px, 2vw, 19px);
    line-height: 2;
}

.article-page--choice .article-hero__image {
    grid-area: image;
    width: min(100%, 420px);
    max-width: 420px;
    aspect-ratio: 1 / 1;
    justify-self: center;
    background-color: #ebe7dc;
    background-size: contain;
    background-repeat: no-repeat;
}

.article-page--choice .article-hero__image .responsive-picture img {
    object-fit: contain !important;
    object-position: center center !important;
}

.contents-card__image .responsive-picture img {
    object-fit: contain;
    object-position: center center;
    background: #ebe7dc;
}

@media screen and (max-width: 767px) {
    .article-page--choice .article-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "image"
            "lead";
        gap: 24px;
    }

    .article-page--choice .article-hero__image {
        width: min(100%, 360px);
        max-width: 360px;
        margin-inline: auto;
    }

    .article-page--choice .article-hero__lead p {
        margin-top: 14px;
        font-size: 14.5px;
        line-height: 1.9;
    }
}

/* Codex 2026-05-27: contents card square eyecatch fix */
.contents-card__image {
    aspect-ratio: 1 / 1;
}

.contents-card__image .responsive-picture,
.contents-card__image picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.contents-card__image .responsive-picture img,
.contents-card__image picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Codex 2026-05-27: final square eyecatch display for contents article/list */
.contents-card__image,
.article-page--choice .article-hero__image {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #ebe7dc !important;
}

.contents-card__image .responsive-picture,
.contents-card__image picture,
.article-page--choice .article-hero__image .responsive-picture,
.article-page--choice .article-hero__image picture {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.contents-card__image .responsive-picture img,
.contents-card__image picture img,
.article-page--choice .article-hero__image .responsive-picture img,
.article-page--choice .article-hero__image picture img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

/* Codex 2026-05-27: render contents list card images by img tag only */
.contents-card__image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: 0 20px 44px rgba(28, 54, 41, .12) !important;
}

.contents-card__image::before,
.contents-card__image::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.contents-card__image picture {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    z-index: auto !important;
}

.contents-card__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    background: transparent !important;
}

/* Codex 2026-05-27: hard reset for contents list eyecatch, img-only display */
.contents-card__image--plain {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: 0 20px 44px rgba(28, 54, 41, .12) !important;
}

.contents-card__image--plain::before,
.contents-card__image--plain::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.contents-card__image--plain .contents-card__picture {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.contents-card__image--plain .contents-card__picture img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    background: transparent !important;
}

/* Codex 2026-05-27: article detail eyecatch img-only square display */
.article-page--choice .article-hero__image--plain {
    display: block !important;
    position: relative !important;
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: transparent !important;
    background-image: none !important;
}

.article-page--choice .article-hero__image--plain::before,
.article-page--choice .article-hero__image--plain::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.article-page--choice .article-hero__image--plain picture,
.article-page--choice .article-hero__image--plain .responsive-picture {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.article-page--choice .article-hero__image--plain img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    background: transparent !important;
}

/* Codex 2026-05-28: privacy contact button readability */
.privacy-contact-card__button,
.privacy-contact-card__button:link,
.privacy-contact-card__button:visited,
.privacy-contact-card__button:hover,
.privacy-contact-card__button:focus {
    color: #ffffff !important;
}
/* Codex 2026-05-28: force privacy inquiry button text white */
.privacy-page .privacy-contact-card .privacy-contact-card__button,
.privacy-page .privacy-contact-card .privacy-contact-card__button:link,
.privacy-page .privacy-contact-card .privacy-contact-card__button:visited,
.privacy-page .privacy-contact-card .privacy-contact-card__button:hover,
.privacy-page .privacy-contact-card .privacy-contact-card__button:focus,
body .privacy-contact-card a.privacy-contact-card__button {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* Codex 2026-05-29: exchange policy page and mobile menu label */
.exchange-policy-page .legal-hero {
    background: linear-gradient(135deg, #f8f6ef 0%, #eef3ed 100%);
}

.exchange-policy__date {
    text-align: right;
    color: #5c6f64;
    margin: 0 0 24px;
    font-size: 1.4rem;
}

.exchange-policy__block {
    background: #fff;
    border: 1px solid rgba(16, 52, 38, .12);
    border-radius: 8px;
    padding: clamp(24px, 4vw, 44px);
    margin: 0 0 28px;
    box-shadow: 0 18px 40px rgba(16, 52, 38, .06);
}

.exchange-policy__block h2 {
    color: #103426;
    font-size: clamp(2.2rem, 3vw, 3.2rem);
    line-height: 1.45;
    margin: 0 0 18px;
}

.exchange-policy__block h3 {
    color: #173326;
    font-size: clamp(1.8rem, 2.4vw, 2.2rem);
    line-height: 1.55;
    margin: 0 0 12px;
}

.exchange-policy__block p,
.exchange-policy__block li {
    color: #18382d;
    font-size: 1.6rem;
    line-height: 1.9;
}

.exchange-policy__block ul {
    margin: 14px 0 0;
    padding-left: 1.4em;
}

.exchange-policy__strong {
    font-weight: 700;
    color: #103426 !important;
    font-size: clamp(1.8rem, 2.4vw, 2.2rem) !important;
}

.exchange-policy__steps {
    display: grid;
    gap: 18px;
}

.exchange-policy__step {
    background: #f8f6ef;
    border-radius: 8px;
    padding: clamp(20px, 3vw, 30px);
}

.exchange-policy__button,
.exchange-policy__button:link,
.exchange-policy__button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    background: #103426;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
}

.exchange-policy__button:hover,
.exchange-policy__button:focus {
    background: #244033;
    color: #fff !important;
}

@media screen and (max-width: 767px) {
    .hamburger {
        top: 7px !important;
        right: 12px !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 6px !important;
        border: 1px solid rgba(16, 52, 38, .28) !important;
        background: rgba(255, 255, 255, .96) !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 8px !important;
    }

    header .hamburger p,
    .hamburger p {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 5px !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        color: #103426 !important;
        font-size: 9px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    .hamburger span {
        left: 11px !important;
        width: 28px !important;
        height: 3px !important;
        background: #103426 !important;
    }

    .hamburger span:nth-child(1) { top: 10px !important; }
    .hamburger span:nth-child(2) { top: 18px !important; }
    .hamburger span:nth-child(3) { top: 26px !important; }

    .hamburger.active span:nth-child(1) {
        top: 18px !important;
        left: 11px !important;
    }

    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
        top: 18px !important;
    }

    .exchange-policy__date {
        text-align: left;
        font-size: 1.3rem;
    }

    .exchange-policy__block {
        padding: 22px 18px;
        margin-bottom: 20px;
    }

    .exchange-policy__block p,
    .exchange-policy__block li {
        font-size: 1.5rem;
        line-height: 1.85;
    }

    .exchange-policy__button {
        width: 100%;
        max-width: 320px;
    }
}
/* Codex 2026-05-29: prevent stray text on hamburger button */
.hamburger::before,
.hamburger::after,
.hamburger span::before,
.hamburger span::after {
    content: none !important;
    display: none !important;
}
/* Codex 2026-05-29: refine mobile hamburger balance */
@media screen and (max-width: 767px) {
    .hamburger {
        top: 4px !important;
        right: 12px !important;
        width: 46px !important;
        height: 46px !important;
        padding-top: 7px !important;
    }

    .hamburger span {
        left: 9px !important;
        width: 26px !important;
        height: 3px !important;
    }

    .hamburger span:nth-child(1) { top: 9px !important; }
    .hamburger span:nth-child(2) { top: 17px !important; }
    .hamburger span:nth-child(3) { top: 25px !important; }

    header .hamburger p,
    .hamburger p {
        bottom: 4px !important;
        font-size: 8px !important;
    }

    .hamburger.active span:nth-child(1) {
        top: 17px !important;
        left: 9px !important;
    }

    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
        top: 17px !important;
    }
}
/* Codex 2026-05-29: force exchange inquiry button text white */
.exchange-policy__button,
.exchange-policy__button:link,
.exchange-policy__button:visited,
.exchange-policy__button:hover,
.exchange-policy__button:focus,
body .exchange-policy a.exchange-policy__button {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}