/* ========================================
   Reset & Base Styles
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden;
}

.body-parts {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列で画面幅を均等に */
  gap: 18px;
  margin: 70px auto 15px;
  max-width: 1200px; /* 好きな最大幅 */
  padding: 0 0px;
  }
  .hair {
  aspect-ratio: 1 / 1;       /* 正円にする */
  width: 100%;               /* グリッドセルいっぱいに */
  background: #B6D96D;
  color: white;
  font-weight: bold;
  font-size: 1.4em;
  border-radius: 50%;        /* 正円 */
  display: flex;
  align-items: center;       /* 文字縦中央 */
  justify-content: center;   /* 文字横中央 */
  font-family: "mincho";
  }

@media (min-width: 800px) {
.half1 {
  max-width: 60% !important;
}
.half2 {
  max-width: 40% !important;
}
.row {
  display: flex;
  margin-bottom: 100px;
 }
 .body-parts {
   gap: 50px;
 }
 .hair {
   font-size: 3em;
 }

}

/* ========================================
   First View Section
   ======================================== */
.fv-section {
    position: relative;
    width: 100%;
    margin: auto;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
}

/* Background */
.fv-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.fv-bg-image {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: 50% 50%;
}

.fv-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(200, 200, 200, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(200, 200, 200, 0.15) 100%
    );
}

/* Content Container */
.fv-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
   margin-top: auto;
   margin-bottom: auto;
}

.fv-container {
    position: relative;
    max-width: 1400px;
    width: 95%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Top Headline */
.top-headline {
    text-align: center;
    animation: fadeIn 1s ease-out 0.3s both;
    z-index: 3;

}

.top-headline h1 {
    font-size: 9rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.05em;
    /* text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.3); */
    line-height: 1.5;
    white-space: nowrap;
    font-weight: lighter;
    font-family: "hand" !important;
    transform: rotate(-3deg);
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15); 
    margin-top: -30px;
}

.sub-headline {
    display: block;
    margin-top: -34px;
    font-size: 1.75rem;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.18em;
    /* text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); */
    font-family: 'Noto Sans JP', sans-serif;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
    font-weight: bold;
}

/* Vertical Copy Right */
.vertical-copy {
    animation: fadeIn 1s ease-out 0.6s both;
    z-index: 3;
    font-family: 'mincho', sans-serif;
    width: 100%;
    padding-right: 100px;
    padding-top: 0px;
}

.number-horizontal {
    font-size: 6rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.vertical-text {
    writing-mode: vertical-rl;
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3em;
    text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
}

.vertical-text-single {
    writing-mode: vertical-rl;
    font-size: 3rem;
    color: #ffffff;
    font-weight: 500;
    letter-spacing: 0.3em;
    line-height: 1.2;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
    width: 100%;
    margin-left: 0px;
    text-align: right;
    white-space: nowrap;
}

.big-one {
  font-size: 4rem;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "mincho";
}

/* Bottom Copy */
.bottom-copy {
    text-align: center;
    animation: fadeIn 1s ease-out 0.9s both;
    z-index: 3;
    padding-bottom: 25px;
}

.bottom-copy p {
    font-size: 1.6rem;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.08em;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

/* Product Badge */
.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem 2rem;
    border-radius: 50px;
    margin-bottom: 0;
    box-shadow: 0 4px 20px rgba(139, 111, 71, 0.15);
    animation: fadeIn 1s ease-out 0.9s both;
    border: 2px solid rgba(200, 155, 123, 0.3);
}

.badge-icon {
    font-size: 2rem;
}

.badge-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.badge-label {
    font-size: 1rem;
    font-weight: 600;
    color: #8b6f47;
    letter-spacing: 0.1em;
}

.badge-description {
    font-size: 0.875rem;
    color: #c89b7b;
    font-weight: 400;
}

/* CTA Button */
.fv-cta {
    margin-bottom: 2rem;
    animation: fadeIn 1s ease-out 1.2s both;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 3rem;
    background: linear-gradient(135deg, #c89b7b 0%, #8b6f47 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(139, 111, 71, 0.3);
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    transition: left 0.5s ease;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(139, 111, 71, 0.4);
}

.cta-arrow {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.cta-button:hover .cta-arrow {
    transform: translateX(5px);
}

/* Brand Name */
.brand-name {
    animation: fadeIn 1s ease-out 1.5s both;
}

.brand-logo {
    opacity: 0.9;
}

/* Scroll Indicator */
.scroll-indicator {

    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0rem;
    animation: fadeIn 1s ease-out 1.8s both;
}

.scroll-text {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: #8b6f47;
    font-weight: 500;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, #c89b7b, transparent);
    animation: scrollAnimation 2s ease-in-out infinite;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scrollAnimation {
    0%, 100% {
        transform: translateY(0);
        opacity: 0;
    }
    50% {
        transform: translateY(20px);
        opacity: 1;
    }
}

/* ========================================
   Responsive Design
   ======================================== */


/* Tablet */
@media (max-width: 1024px) {
    .top-headline h1 {
        font-size: 7.5rem;
        white-space: nowrap;
    }

    .sub-headline {
        font-size: 1.4rem;
    }

    .number-horizontal {
        font-size: 4.5rem;
    }

    .vertical-text {
        font-size: 2.8rem;
        letter-spacing: 0.3em;
    }

    .bottom-copy p {
        font-size: 1.3rem;
        white-space: nowrap;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .fv-section {
        min-height: 100vh;
    }

    .fv-container {
        width: 100%;
    }

    .top-headline {
        width: 100%;
    }

    .top-headline h1 {
        font-size: 5.5rem;
        white-space: nowrap;
        line-height: 1.6;
    }

    .sub-headline {
        font-size: 1.1rem;
        display: block;
        margin-top: -22px;
    }

    .vertical-copy {
       padding-right: 80px;
       
    }

    .number-horizontal {
        font-size: 3.5rem;
    }

    .vertical-text {
        font-size: 2.2rem;
        letter-spacing: 0.3em;
    }

    .vertical-text-single {
        font-size: 2.2rem;
        letter-spacing: 0.3em;
    }

    .bottom-copy {
  
        width: 95%;
    }

    .bottom-copy p {
        font-size: 1rem;
        white-space: normal;
    }

    .scroll-indicator {
       
    }
}

@media (max-width: 480px) {
    .top-headline h1 {
        font-size: 4.5rem;
        white-space: nowrap;
       margin-top: -15px;
       

    }

    .sub-headline {
        font-size: 0.85rem;
        display: block;
        margin-top: -10px;
    }

    .vertical-copy {
      padding-right: 15px;
       
    }

    .number-horizontal {
        font-size: 3rem;
    }

    .vertical-text {
        font-size: 1.8rem;
        letter-spacing: 0.3em;
    }

    .bottom-copy p {
        font-size: 1rem;
        white-space: normal;
    }
}

/* ========================================
   Question Section
   ======================================== */
.question-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #f8f6f3 0%, #ffffff 100%);
}

.container-media {
    max-width: 1200px;
    width: 100%;
    padding: 0px 15px;
    margin: 0 auto;
}

.container {
    max-width: 1000px;
    width: 100%;
    padding: 0px 15px;
    margin: 0 auto;
}

.question-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c2c2c;
    text-align: left;
    line-height: 2;
    letter-spacing: 0.05em;
    margin-bottom: 60px;
    animation: fadeInUp 1s ease-out;
}

.beauty-image {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    animation: fadeIn 1s ease-out 0.3s both;
}

.woman-illustration {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

/* ========================================
   Answer Section
   ======================================== */
.answer-section {
    padding: 100px 0;
    background: #ffffff;
}

.answer-heading {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    animation: fadeInUp 1s ease-out;
}

.heading-line {
    width: 4px;
    height: 80px;
    background: #2c2c2c;
    border-radius: 2px;
    flex-shrink: 0;
}

.heading-text {
    font-size: 3rem;
    font-weight: 700;
    color: #2c2c2c;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

.rice-bowl-image {
    width: 100%;
    max-width: 300px;
    margin: 40px auto;
    animation: fadeIn 1s ease-out 0.3s both;
}

.rice-illustration {
    width: 100%;
    height: auto;
}

.answer-content {
    margin-top: 40px;
    animation: fadeIn 1s ease-out 0.5s both;
}

.content-text {
    font-size: 1.25rem;
    line-height: 3;
    color: #333;
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
}

.content-text.highlight {
    font-size: 1.35rem;
    color: #8b6f47;
    font-weight: 600;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.content-text.strong {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c2c2c;
    margin-top: 3rem;
    margin-bottom: 0;
}

.rice-process-image {
    width: 100%;
    max-width: 800px;
    margin: 3rem auto;
    animation: fadeIn 1s ease-out 0.6s both;
}

.process-illustration {
    width: 100%;
    height: auto;
}

.silica-image {
    width: 100%;
    max-width: 300px;
    margin: 3rem auto 2rem;
    animation: fadeIn 1s ease-out 0.8s both;
}

.silica-illustration {
    width: 100%;
    height: auto;
}

.baby-image {
    width: 100%;
    max-width: 300px;
    margin: 2rem auto;
    animation: fadeIn 1s ease-out 0.9s both;
}

.baby-illustration {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

/* ========================================
   Why Section
   ======================================== */
.why-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8f6f3 100%);
}

.why-heading {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    animation: fadeInUp 1s ease-out;
}

.why-heading .heading-text {
    font-size: 2.5rem;
}

.deficiency-image {
    width: 100%;
    max-width: 350px;
    margin: 30px auto 0;
    animation: fadeIn 1s ease-out 0.3s both;
}

.deficiency-illustration {
    width: 100%;
    height: auto;
}

.why-content {
    margin-top: 50px;
}

.sub-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    animation: fadeInUp 1s ease-out 0.5s both;
    border-left: solid 3px #333;
    padding-left: 15px;
}

.sub-heading-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sub-heading-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.sub-heading-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.why-text {
    font-size: 1.125rem;
    line-height: 3;
    color: #333;
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
}

.why-text.emphasis {
    color: #8b6f47;
    font-weight: 500;
    margin-top: 1rem;
}

.sub-heading:not(:first-of-type) {
    margin-top: 3rem;
}

.food-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.food-list li {
    font-size: 1.125rem;
    line-height: 2;
    color: #333;
    letter-spacing: 0.05em;
    padding-left: 1.5em;
    position: relative;
}

.food-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #8b6f47;
    font-weight: 700;
}

/* Food Example Image */
.food-example {
    margin: 40px auto;
    max-width: 600px;
    text-align: center;
    animation: fadeInUp 1s ease-out;
}

.food-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Silica Comparison Graph */
.silica-comparison {
    margin: 10px 0;
    padding: 10px 40px;
    border-radius: 25px;
}

.comparison-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.comparison-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.circle-graph {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #e8e3dc;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.12),
        inset 0 -5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.circle-graph:hover {
    transform: translateY(-5px);
}

.circle-graph.full .circle-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:#B6D96D;
    border-radius: 50%;
    box-shadow: inset 0 10px 20px rgba(255, 255, 255, 0.2);
}

.circle-graph.half .circle-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48%;
    background: #B6D96D;
    border-radius: 0 0 100px 100px;
    box-shadow: inset 0 5px 15px rgba(255, 255, 255, 0.15);
}

.circle-percentage {
    position: relative;
    z-index: 2;
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow:
        2px 2px 8px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 255, 255, 0.3);
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.circle-graph.half .circle-percentage {
    color: white;
    text-shadow:
        2px 2px 8px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 255, 255, 0.3);
    font-size: 2.8rem;
    padding: 0 10px;
    text-align: center;
    font-weight: 700;
}

.comparison-label {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c2c2c;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 10px 20px;
    background: rgba(139, 111, 71, 0.08);
    border-radius: 25px;
    margin-top: 5px;
}

.comparison-arrow {
    font-size: 3.5rem;
    color: #8b6f47;
    animation: slideRight 2s ease-in-out infinite;
    display: flex;
    align-items: center;
    font-weight: 300;
    filter: drop-shadow(2px 2px 4px rgba(139, 111, 71, 0.2));
}

@keyframes slideRight {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

.comparison-alert {
    padding: 25px 50px;
    border-radius: 50px;

    margin-top: 10px;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}


/* Bar Chart Styles */
.bar-chart-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    padding: 20px 0;
}

.bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.bar-wrapper {
    display: flex;
    align-items: flex-end;
    height: 350px;
}

.bar-graph {
    position: relative;
    width: 120px;
    background: linear-gradient(180deg, rgba(232, 227, 220, 0.3) 0%, rgba(232, 227, 220, 0.6) 100%);
    border-radius: 15px 15px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    box-shadow:
        0 -5px 20px rgba(0, 0, 0, 0.08),
        inset 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.bar-graph:hover {
    transform: translateY(-5px);
}

.bar-graph.full {
    height: 100%;
}

.bar-graph.half {
    height: 50%;
}

.bar-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #b8956f 0%, #a68968 30%, #8b6f47 100%);
    border-radius: 15px 15px 0 0;
    box-shadow: inset 0 10px 20px rgba(255, 255, 255, 0.2);
    animation: fillUp 1.5s ease-out;
}

@keyframes fillUp {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

.bar-percentage {
    position: relative;
    z-index: 2;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow:
        2px 2px 8px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 255, 255, 0.3);
    padding: 20px 10px;
    letter-spacing: 0.05em;
    text-align: center;
}

.bar-graph.half .bar-percentage {
    font-size: 1.4rem;
}

.alert-text {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.15em;
    text-align: center;
    margin: 0;
    position: relative;
    z-index: 1;
}

.data-citation {
    font-size: 0.875rem;
    color: #999;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
    font-style: italic;
}

.chart-source {
    font-size: 0.85rem;
    color: #888;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 25px;
    font-style: italic;
    letter-spacing: 0.03em;
    line-height: 1.6;
    opacity: 0.9;
}

/* ========================================
   Solution Section
   ======================================== */
.solution-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #f8f6f3 0%, #ffffff 100%);
}

.solution-heading {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 60px;
    animation: fadeInUp 1s ease-out;
}

.solution-heading .heading-text {
    font-size: 2.2rem;
}

.solution-content {
    margin-top: 40px;
}

.solution-text {
    font-size: 1.25rem;
    line-height: 3;
    color: #333;
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
    text-align: left;
    animation: fadeIn 1s ease-out 0.3s both;
}

.solution-text.emphasis {
    color: #8b6f47;
    font-weight: 600;
    font-size: 1.35rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.solution-text.highlight {
    color: #8b6f47;
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 0;
}

/* Silica Happy Image */
.silica-happy-image {
    margin: 50px auto;
    max-width: 250px;
    text-align: center;
    animation: fadeInUp 1s ease-out;
}

.silica-happy {
    width: 100%;
    height: auto;
}

/* ========================================
   Product Section
   ======================================== */
.product-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8f6f3 100%);
}

.product-heading {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 60px;
    animation: fadeInUp 1s ease-out;
}

.product-heading .heading-text {
    font-size: 2.2rem;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.05em;
    font-family: 'Noto Serif JP', serif;
}

.product-image {
    max-width: 400px;
    margin: 0 auto 50px;
    text-align: center;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.woman-product {
    width: 100%;
    height: auto;
}

.product-content {

    text-align: center;
}

.product-voice {
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
    line-height: 2;
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
    position: relative;
    padding-left: 2em;
    text-align: left;
    animation: fadeInUp 1s ease-out 0.4s both;
}

.product-voice::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #B6D96D;
    font-size: 1.6rem;
    font-weight: 700;
}

.product-description {
    font-size: 1.25rem;
    line-height: 3;
    color: #333;
    margin-top: 3rem;
    letter-spacing: 0.05em;
    text-align: left;
    animation: fadeInUp 1s ease-out 0.6s both;
}

.product-technology {
    margin-top: 3rem;
    text-align: left;
    animation: fadeInUp 1s ease-out 0.8s both;
}

.technology-text {
    font-size: 1.25rem;
    line-height: 3;
    color: #333;
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
}

.free-middle {
text-align: center;
}

.free-image {
  width: 100%;
  max-width: 700px !important;
  height: auto;
  margin: 30px auto;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.award-text {
    font-size: 1.25rem;
    line-height: 3;
    color: #333;
    margin-top: 2rem;
    letter-spacing: 0.05em;
}

/* ========================================
   Features Intro Section
   ======================================== */
.features-intro-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #f8f6f3 0%, #ffffff 100%);
}

.features-intro-heading {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 60px;
    animation: fadeInUp 1s ease-out;
}

.features-intro-heading .heading-text {
    font-size: 2.2rem;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.05em;
    font-family: 'Noto Serif JP', serif;
}

.product-package-image {
    max-width: 500px;
    margin: 0 auto 60px;
    text-align: center;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.package-photo {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.features-intro-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.features-intro-text {
    font-size: 1.25rem;
    line-height: 3;
    color: #333;
    margin-bottom: 2.5rem;
    letter-spacing: 0.05em;
    text-align: left;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.features-intro-lead {
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.05em;
    text-align: left;
    animation: fadeInUp 1s ease-out 0.4s both;
    line-height: 3;
}

/* ========================================
   Features Detail Section
   ======================================== */
.features-detail-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8f6f3 100%);
}

.feature-item {
    max-width: 900px;
    margin: 0 auto 80px;
    padding: 50px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
    animation: fadeInUp 1s ease-out;
}

.feature-item:last-child {
    margin-bottom: 0;
}

.feature-number {
    font-size: 0.9rem;
    font-weight: 600;
    color: #B6D96D;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
    text-align: center;
}

.feature-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
    font-family: 'Noto Serif JP', serif;
    border-bottom: solid 1px #333;
    padding-bottom: 10px;
    text-align: center;
}

.feature-subtitle {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    font-family: 'Noto Serif JP', serif;
    margin-bottom: 25px;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: nowrap;
   padding-bottom: 32px;
}

.feature-description {
    font-size: 1.125rem;
    line-height: 3;
    color: #333;
    letter-spacing: 0.05em;
}

/* Comparison Images */
.comparison-images {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    margin: 35px 0;
}

.comparison-item-visual {
    flex: 0 1 auto;
    text-align: center;
}

.comparison-img {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-bottom: -5px;
    object-fit: contain;
}

.comparison-label-visual {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin-top: 0px;
    line-height: 1.6;
    background: #d4a574;
    padding: 2px 0px;
}

.comparison-label-visual2 {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin-top: 0px;
    line-height: 1.6;
    background: #B6D96D;
    padding: 2px 0px;
}

.silica-amount {
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
    color: #333;
    margin-top: 10px;
}

/* Rice Silica Image */
.rice-silica-image {
    margin: 40px 0;
    text-align: center;
}

.rice-image {
    width: 100%;
    max-width: 700px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

/* Highlight Marker */
.highlight-marker {
    background: linear-gradient(transparent 60%, #fff59d 60%);
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 2px;
}

.highlight-marker2 {
    background: linear-gradient(transparent 60%, #fff59d 60%);
    font-weight: 700;
    padding: 2px 0px;
    border-radius: 2px;
}

/* ========================================
   Expert Section
   ======================================== */
.expert-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8f6f3 100%);
}

.expert-heading {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 60px;
    animation: fadeInUp 1s ease-out;
}

.expert-heading .heading-text {
    font-size: 2.2rem;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.05em;
}

.expert-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 50px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
    animation: fadeInUp 1s ease-out 0.2s both;
}

/* ========================================
   Benefits Section
   ======================================== */

.benefits-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #f8f6f3 0%, #ffffff 100%);
}

.section-heading-center {
    text-align: left;
    margin-bottom: 40px;
    animation: fadeInUp 1s ease-out;
}

.section-heading-center .heading-number {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: #8b6f47;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    opacity: 0.7;
}

.section-heading-center .heading-text {
    font-size: 2.2rem;
    color: #2c2c2c;
    line-height: 1.7;
    letter-spacing: 0.05em;
}

.benefits-image {
    margin: 40px auto;
    text-align: left;
}

.benefits-photo {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.benefits-list {
    margin-top: 40px;
    text-align: left;
}

.benefit-item {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
    animation: fadeInUp 1s ease-out both;
    margin-top: 40px;
}

.benefit-item:nth-child(1) {
    animation-delay: 0.1s;
}

.benefit-item:nth-child(2) {
    animation-delay: 0.2s;
}

.benefit-item:nth-child(3) {
    animation-delay: 0.3s;
}

.benefit-item:last-child {
    margin-bottom: 0;
}

.benefit-item strong {
    font-size: 1.6rem;
    color: #333;
    display: block;
    margin-bottom: 3px;
    span {
      color: #B6D96D;
    }
}

/* ========================================
   Age Awareness Section
   ======================================== */

.age-awareness-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8f6f3 100%);
}

.qa-container {
    margin: 0 auto;
    text-align: left;
}

.question-block {
    margin-bottom: 40px;
    animation: fadeInUp 1s ease-out;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.qa-label {
    font-size: 2.5rem;
    font-weight: 700;
    color: #8b6f47;
    font-family: 'Noto Serif JP', serif;
    flex-shrink: 0;
    line-height: 1.6;
}

.qa-question {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2c2c2c;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin: 0;
}

.answer-block {
    margin-bottom: 50px;
    padding: 40px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
    animation: fadeInUp 1s ease-out 0.3s both;
    display: flex;
    align-items: center;
    gap: 15px;
}

.answer-label {
    color: #d4a574;
}

.qa-answer {
    font-size: 2.8rem;
    font-weight: 700;
    color: #8b6f47;
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin: 0;
    font-family: 'Noto Serif JP', serif;
}

.age-message {
    margin-top: 40px;
    animation: fadeInUp 1s ease-out 0.6s both;
}

.age-text {
    font-size: 1.25rem;
    line-height: 3;
    color: #333;
    letter-spacing: 0.05em;
    margin-bottom: 25px;
    text-align: left;
}

.emphasis-text {
    font-weight: 600;
    color: #8b6f47;
    font-size: 1.4rem;
}

/* ========================================
   Product Price Section
   ======================================== */

.product-price-section {
    padding: 120px 0;
    background: #ffffff;
}

.price-section-heading {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #2c2c2c;
    margin-bottom: 60px;
    letter-spacing: 0.05em;
    animation: fadeInUp 1s ease-out;
}

.product-price-card {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.product-image-placeholder {
    width: 100%;
    max-width: 350px;
    height: 350px;
    margin: 0 auto 40px;
    background: #f8f6f3;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #d4cec4;
}

.placeholder-label {
    font-size: 1rem;
    color: #999;
    letter-spacing: 0.1em;
}

.product-image-real {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 40px;
}

.product-photo {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.product-price-info {
    text-align: center;
}

.product-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c2c2c;
    margin-bottom: 0px;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.campaign-text {
    font-size: 1.2rem;
    font-weight: bold;
    display: inline;
    padding: 10px 10px;
    background: #C41E1E;
    color: white;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
    border-radius: 15px;
}

.price-display {
    margin-top: 12px;
}

.original-price {
    font-size: 1.2rem;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 5px;
    letter-spacing: 0.05em;
}

.special-price {
    font-size: 3rem;
    font-weight: 700;
    color: #C41E1E;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.price-note {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: #2c2c2c;
    margin-top: 1px;
    letter-spacing: 0.05em;
}

.material {
  font-size: 0.8em;
  margin-top: 30px;
}

/* ========================================
   Subscription Section
   ======================================== */

.subscription-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #f8f6f3 0%, #ffffff 100%);
}

.subscription-heading {
    text-align: left;
    font-size: 2.2rem;
    font-weight: 700;
    color: #2c2c2c;
    line-height: 2;
    margin-bottom: 60px;
    letter-spacing: 0.05em;
    animation: fadeInUp 1s ease-out;
}

.subscription-content {
    margin: 0 auto;
    text-align: left;
}

.subscription-text {
    font-size: 1.2rem;
    line-height: 3;
    color: #333;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.voice-box {
    background: #ffffff;
    padding: 40px;
    border-radius: 15px;
    margin: 40px 0;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
    animation: fadeInUp 1s ease-out 0.4s both;
}

.voice-item {
    font-size: 1.15rem;
    color: #666;
    line-height: 2;
    letter-spacing: 0.05em;
}

.voice-item:not(:last-child) {
    margin-bottom: 20px;
}

.subscription-emphasis {
    font-size: 1.5rem;
    font-weight: 700;
    color: #8b6f47;
    line-height: 1.8;
    margin: 50px 0;
    letter-spacing: 0.08em;
    animation: fadeInUp 1s ease-out 0.6s both;
}

.subscription-solution {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c2c2c;
    line-height: 3;
    letter-spacing: 0.05em;
    margin-top: 40px;
    padding: 40px;
    background: linear-gradient(135deg, #fff8f0 0%, #fef5eb 100%);
    border-radius: 15px;
    animation: fadeInUp 1s ease-out 0.8s both;
}

/* ========================================
   Subscription Plan Section
   ======================================== */

.subscription-plan-section {
    padding: 120px 0;
    background: #B6D96D;
}

.plan-intro-box {
    max-width: 600px;
    margin: 0 auto 40px;
    padding: 25px 35px;
    background: #ffffff;
    border-radius: 30px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 1s ease-out;
}

.plan-intro-text {
    text-align: center;
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    letter-spacing: 0.05em;
}

.plan-heading {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 50px;
    letter-spacing: 0.1em;
    padding: 15px 0;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.plan-card {
    max-width: 700px;
    margin: 0 auto;
    background: linear-gradient(135deg, #fff8f0 0%, #fef5eb 100%);
    border: 2px solid #d4a574;
    border-radius: 15px;
    padding: 50px 40px;
    text-align: center;
    animation: fadeInUp 1s ease-out 0.4s both;
}

.plan-card-new {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(135deg, #d4a574 0%, #c89b7b 100%);
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 8px 30px rgba(139, 111, 71, 0.2);
    border: 3px solid #ffffff;
    animation: fadeInUp 1s ease-out 0.4s both;
}

.plan-catchcopy {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #87ceeb;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
    font-family: 'Noto Sans JP', sans-serif;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.3);
}

.plan-main-info {
    max-width: 600px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 15px;
    padding: 50px 45px;
    display: flex;
    align-items: center;
    gap: 40px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 1s ease-out 0.4s both;
}

.plan-product-image {
    flex-shrink: 0;
}

.product-thumb {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.plan-price-section {
    flex: 1;
    text-align: left;
}

.plan-header-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.plan-course-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    padding-bottom: 17px;
    line-height: 1.45;
    white-space: nowrap;
}

.plan-discount-badge {
    display: inline-block;
    padding: 5px 15px;
    background: #C41E1E;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 20px;
    white-space: nowrap;
}

.plan-combined-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 13px 30px;
    background: #C41E1E;
    color: #ffffff;
    border-radius: 50%;
    gap: 2px;
}

.badge-line {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-line-big {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.plan-price-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}

.plan-price-display {
    display: flex;
    align-items: baseline;
    margin-top: -33px;
}

.price-yen {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
}

.price-amount-large {
    font-size: 3.5rem;
    font-weight: 700;
    color: #333;
    font-family: 'Noto Sans JP', sans-serif;
}

.plan-shipping-badge {
    display: inline-block;
    padding: 8px 20px;
    background: #2c2c2c;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 25px;
    white-space: nowrap;
}

.plan-exchange-note,
.plan-billing-note {
    font-size: 0.9rem;
    color: #666;
    margin: 3px 0;
}

.plan-bonus-info {
    background: #ffffff;
    border-radius: 15px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 25px;
}

.bonus-icon .case-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
}

.bonus-text {
    flex: 1;
}

.bonus-line {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    line-height: 1.8;
}

.plan-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c2c2c;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
}

.plan-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.price-amount {
    font-size: 3rem;
    font-weight: 700;
    color: #8b6f47;
    letter-spacing: 0.05em;
    font-family: 'Noto Serif JP', serif;
}

.price-badge {
    display: inline-block;
    padding: 8px 20px;
    background: #8b6f47;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 25px;
    letter-spacing: 0.05em;
}

.price-shipping {
    display: inline-block;
    padding: 8px 20px;
    background: #2c2c2c;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 25px;
    letter-spacing: 0.05em;
}

.plan-notes {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(139, 111, 71, 0.2);
}

.plan-note {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.expert-image-placeholder {
    width: 150px;
    height: 150px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, #e8e3dc 0%, #d4cec4 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-text {
    font-size: 0.9rem;
    color: #999;
    text-align: center;
    line-height: 1.5;
}

.expert-info {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e8e3dc;
}

.expert-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.expert-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #B6D96D;
    margin-bottom: 15px;
}

.expert-facility {
    font-size: 1rem;
    color: #666;
    margin-bottom: 5px;
}

.expert-address {
    font-size: 0.9rem;
    color: #999;
}

.expert-comment {
    margin-top: 30px;
}

.comment-text {
    font-size: 1.05rem;
    line-height: 3;
    color: #333;
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
    text-align: left;
}

.comment-text:last-child {
    margin-bottom: 0;
}

/* ========================================
   Responsive Utilities
   ======================================== */
.sp-only {
    display: none;
}

@media (max-width: 768px) {
    .sp-only {
        display: inline;
    }

    .question-section {
        padding: 80px 0;
    }

    .question-heading {
        font-size: 2rem;
        line-height: 2.2;
        margin-bottom: 40px;
    }

    .beauty-image {
        max-width: 100%;
    }

    /* Silica Comparison Mobile */
    .silica-comparison {
        padding: 10px 15px;
    }

    .comparison-row {
        gap: 20px;
    }

    .circle-graph {
        width: 120px;
        height: 120px;
    }

    .circle-percentage {
        font-size: 1.6rem;
    }

    .circle-graph.half .circle-percentage {
        font-size: 1.6rem;
    }

    .comparison-label {
        font-size: 0.95rem;
    }

    .comparison-arrow {
        font-size: 2rem;
    }

    .comparison-alert {
        margin-top: 25px;
    }

    .alert-text {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .question-section {
        padding: 60px 0;
    }

    .question-heading {
        font-size: 1.6rem;
        margin-bottom: 30px;
    }

    .answer-section {
        padding: 60px 0;
    }

    .heading-line {
        height: 60px;
    }

    .heading-text {
        font-size: 1.8rem;
    }

    .rice-bowl-image {
        max-width: 250px;
        margin: 30px auto;
    }

    /* Silica Comparison Small Mobile */
    .silica-comparison {
        padding: 0px 0px;
    }

    .comparison-row {
        gap: 10px;
    }

    .circle-graph {
        width: 90px;
        height: 90px;
    }

    .circle-percentage {
        font-size: 1.3rem;
    }

    .circle-graph.half .circle-percentage {
        font-size: 1.2rem;
        padding: 0 5px;
    }

    .comparison-label {
        font-size: 0.85rem;
    }

    .comparison-arrow {
        font-size: 1.5rem;
    }

    .comparison-alert {
        padding: 10px 20px;
        margin-top: 15px;
    }

    .alert-text {
        font-size: 1.1rem;
    }

    .data-citation {
        font-size: 0.7rem;
    }

    .answer-content {
        margin-top: 30px;
    }

    .content-text {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .content-text.highlight {
        font-size: 1.1rem;
        margin-top: 2rem;
        margin-bottom: 1.5rem;
    }

    .content-text.strong {
        font-size: 1.2rem;
        margin-top: 2rem;
    }

    .rice-process-image {
        max-width: 100%;
        margin: 2rem auto;
    }

    .silica-image {
        max-width: 250px;
        margin: 2rem auto 1.5rem;
    }

    .why-section {
        padding: 60px 0;
    }

    .why-heading .heading-text {
        font-size: 1.6rem;
    }

    .deficiency-image {
        max-width: 280px;
        margin: 25px auto 0;
    }

    .why-content {
        margin-top: 35px;
    }

    .sub-heading {
        margin-bottom: 1rem;
    }

    .sub-heading-text {
        font-size: 1.4rem;
    }

    .why-text {
        font-size: 1rem;
        margin-bottom: 1.2rem;
    }

    .sub-heading:not(:first-of-type) {
        margin-top: 2.5rem;
    }

    .product-section {
        padding: 60px 0;
    }

    .product-heading .heading-text {
        font-size: 1.4rem;
    }

    .product-image {
        max-width: 280px;
    }

    .product-voice {
        font-size: 1.05rem;
        padding-left: 1.5em;
    }

    .product-voice::before {
        font-size: 1.2rem;
    }

    .product-description {
        font-size: 1rem;
        margin-top: 1.5rem;
    }

    .features-intro-section {
        padding: 80px 0;
    }

    .features-intro-heading {
        margin-bottom: 40px;
    }

    .features-intro-heading .heading-text {
        font-size: 1.6rem;
    }

    .product-package-image {
        max-width: 380px;
        margin-bottom: 40px;
    }

    .features-intro-text {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    .features-intro-lead {
        font-size: 1.2rem;
    }

    .features-detail-section {
        padding: 80px 0;
    }

    .feature-item {
        margin-bottom: 60px;
        padding: 40px 30px;
    }

    .feature-number {
        font-size: 0.85rem;
    }

    .feature-title {
        font-size: 1.5rem;
    }

    .feature-subtitle {
        font-size: 1.3rem;
    }

    .feature-description {
        font-size: 1.05rem;
    }

    /* Comparison Images - Mobile */
    .comparison-images {
        gap: 0;
    }

    .comparison-img {
        max-width: 150px;
    }

    .silica-amount {
        font-size: 1.3rem;
    }

    /* Rice Silica Image - Mobile */
    .rice-silica-image {
        margin: 30px 0;
    }

    .rice-image {
        max-width: 100%;
        border-radius: 8px;
    }

    .benefits-section {
        padding: 80px 0;
    }

    .section-heading-center {
        margin-bottom: 30px;
    }

    .section-heading-center .heading-text {
        font-size: 1.6rem;
        white-space: nowrap;
       
    }

    .benefits-image {
        margin: 30px auto;
    }

    .benefits-photo {
        max-width: 100%;
        border-radius: 8px;
    }

    .benefits-list {
        margin-top: 30px;
    }

    .benefit-item {
        font-size: 1rem;
        margin-bottom: 25px;
        line-height: 3;
    }

    .benefit-item strong {
        font-size: 1.2rem;
        margin-bottom: 2px;
    }

    .age-awareness-section {
        padding: 80px 0;
    }

    .question-block {
        gap: 10px;
        margin-bottom: 30px;
    }

    .qa-label {
        font-size: 1.5rem;
    }

    .qa-question {
        font-size: 1.5rem;
    }

    .answer-block {
        padding: 30px 20px;
        gap: 10px;
        margin-bottom: 40px;
        align-items: center;
    }

    .qa-answer {
        font-size: 1.8rem;
    }

    .age-text {
        font-size: 1rem;
    }

    .emphasis-text {
        font-size: 1.15rem;
    }

    .product-price-section {
        padding: 80px 0;
    }

    .price-section-heading {
        font-size: 1.5rem;
        margin-bottom: 40px;
    }

    .product-image-placeholder {
        height: 280px;
    }

    .product-image-real {
        max-width: 100%;
        margin-bottom: 30px;
    }

    .product-photo {
        border-radius: 10px;
        margin-bottom: 15px;
    }

    .placeholder-label {
        font-size: 0.9rem;
    }

    .product-title {
        font-size: 1.4rem;
    }

    .campaign-text {
        font-size: 1rem;
        white-space: nowrap;
    }

    .special-price {
        font-size: 2.5rem;
    }

    .price-note {
        font-size: 0.9rem;
    }

    .subscription-section {
        padding: 80px 0;
    }

    .subscription-heading {
        font-size: 1.4rem;
        margin-bottom: 40px;
    }

    .subscription-text {
        font-size: 1.05rem;
    }

    .voice-box {
        padding: 30px 20px;
    }

    .voice-item {
        font-size: 1rem;
    }

    .subscription-emphasis {
        font-size: 1.3rem;
        margin: 40px 0;
    }

    .subscription-solution {
        font-size: 1rem;
        padding: 30px 20px;
    }

    .subscription-plan-section {
        padding: 80px 0;
    }

    .plan-intro-box {
        padding: 20px 25px;
        margin-bottom: 30px;
    }

    .plan-intro-text {
        font-size: 0.9rem;
    }

    .plan-heading {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }

    .plan-card {
        padding: 40px 25px;
    }

    .plan-card-new {
        padding: 30px 20px;
    }

    .plan-main-info {
        padding: 25px 20px;
        gap: 9px;
    }

    .product-thumb {
        width: 80px;
        height: 80px;
    }

    .plan-course-name {
        font-size: 0.95rem;
    }

    .plan-discount-badge {
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    .plan-combined-badge {
        padding: 14px 11px;
        gap: 1px;
    }

    .badge-line {
        font-size: 0.75rem;
    }
    .badge-line-big {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.4;
        white-space: nowrap;
    }

    .price-yen {
        font-size: 1.2rem;
    }

    .price-amount-large {
        font-size: 2.2rem;
    }

    .plan-shipping-badge {
        font-size: 0.85rem;
        padding: 6px 15px;
    }

    .plan-exchange-note,
    .plan-billing-note {
        font-size: 0.8rem;
    }

    .plan-bonus-info {
        flex-direction: column;
        padding: 25px 20px;
        text-align: center;
    }

    .bonus-line {
        font-size: 1rem;
    }

    .plan-name {
        font-size: 1.4rem;
    }

    .plan-price {
        gap: 15px;
    }

    .price-amount {
        font-size: 2.5rem;
    }

    .price-badge {
        font-size: 0.9rem;
        padding: 6px 15px;
    }

    .price-shipping {
        font-size: 0.9rem;
        padding: 6px 15px;
    }

    .plan-note {
        font-size: 0.85rem;
    }

    .expert-section {
        padding: 80px 0;
    }

    .expert-heading {
        margin-bottom: 40px;
    }

    .expert-heading .heading-text {
        font-size: 1.6rem;
    }

    .expert-card {
        padding: 40px 30px;
    }

    .expert-image-placeholder {
        width: 120px;
        height: 120px;
    }

    .expert-name {
        font-size: 1.3rem;
    }

    .expert-title {
        font-size: 1rem;
    }

    .expert-facility {
        font-size: 0.95rem;
    }

    .expert-address {
        font-size: 0.85rem;
    }

    .comment-text {
        font-size: 1rem;
    }

    .food-example {
        margin: 30px auto;
        max-width: 100%;
    }

    .food-list {
        margin: 1.2rem 0;
    }

    .food-list li {
        font-size: 1rem;
    }

    .solution-section {
        padding: 80px 0;
    }

    .solution-heading {
        margin-bottom: 40px;
    }

    .solution-heading .heading-text {
        font-size: 1.4rem;
    }

    .solution-text {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .solution-text.emphasis {
        font-size: 1.1rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .silica-happy-image {
        max-width: 200px;
        margin: 40px auto;
    }

    .solution-text.highlight {
        font-size: 1.2rem;
    }

    .product-section {
        padding: 80px 0;
    }

    .product-heading {
        margin-bottom: 40px;
    }

    .product-heading .heading-text {
        font-size: 1.43rem;
    }

    .product-image {
        max-width: 320px;
        margin-bottom: 40px;
    }

    .product-voice {
        font-size: 1.2rem;
        margin-bottom: 1.2rem;
    }

    .product-voice::before {
        font-size: 1.4rem;
    }

    .product-description {
        font-size: 1rem;
        margin-top: 2rem;
    }

    .product-technology {
        margin-top: 2rem;
    }

    .technology-text {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

   .award-text {
        font-size: 1rem;
        margin-top: 1.5rem;
    }


    .features-intro-section {
        padding: 60px 0;
    }

    .features-intro-heading .heading-text {
        font-size: 1.4rem;
    }

    .product-package-image {
        max-width: 300px;
        margin-bottom: 30px;
    }

    .features-intro-text {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .features-intro-lead {
        font-size: 1.1rem;
    }

    .expert-section {
        padding: 60px 0;
    }

    .expert-heading .heading-text {
        font-size: 1.4rem;
    }

    .expert-card {
        padding: 30px 20px;
    }

    .expert-image-placeholder {
        width: 100px;
        height: 100px;
    }

    .placeholder-text {
        font-size: 0.8rem;
    }

    .expert-name {
        font-size: 1.2rem;
    }

    .expert-title {
        font-size: 0.95rem;
    }

    .expert-facility {
        font-size: 0.9rem;
    }

    .expert-address {
        font-size: 0.8rem;
    }

    .comment-text {
        font-size: 0.95rem;
        margin-bottom: 1.2rem;
    }

    .features-detail-section {
        padding: 60px 0;
    }

    .feature-item {
        margin-bottom: 50px;
        padding: 30px 20px;
    }

    /* Comparison Images - Tablet */
    .comparison-images {
        gap: 0;
    }

    .comparison-img {
        max-width: 200px;
    }

    .feature-number {
        font-size: 0.8rem;
    }

    .feature-title {
        font-size: 1.3rem;
    }

    .feature-subtitle {
        font-size: 1.3rem;
    }

    .feature-description {
        font-size: 1rem;
    }
}


@media (max-width: 365px) { 
  .silicatsu {
    font-size: 0.9rem;
  }
  .bottom-copy p {
   font-size: 0.85rem;
  }
  .content-text {
    font-size: 0.9rem;
  } 
  .question-heading {
    font-size: 1.5rem;
  }

  .solution-heading .heading-text {
    font-size: 1.3rem;
  }
  .features-intro-heading .heading-text { 
    font-size: 1.3rem;
  }
  .feature-title {
    font-size: 1.1rem;
  }

  .feature-subtitle {
    font-size: 1.1rem;
  }

  .comparison-label-visual {
    font-size: 0.9rem;
  }
  .comparison-label-visual2 {
    font-size: 0.9rem;
  }
  .product-heading .heading-text {
    font-size: 1.4rem;
  }
  .expert-heading .heading-text {
    font-size: 1.3rem;
  }
  .experts-section .profile-title {
    font-size: 14px;
  }
  .section-heading-center .heading-text {
    font-size: 1.5rem;
  }
  .benefit-item strong {
     font-size: 1.15rem;
  }
  .qa-answer {
    font-size: 1.6rem;
  }
  .product-title {
    font-size: 1.2rem;
  }
  .subscription-heading {
    font-size: 1.2rem;
  }
  .voice-item {
    font-size: 0.9rem;
  }
  .campaign-text {
    font-size:  0.9rem;
  }
  .plan-course-name {
    font-size:  0.8rem;
  }
  .price-amount-large {
    font-size: 2rem;
  }
  .badge-line-big {
    font-size:  0.9rem;
  } 
}

/* ========================================
   Benefits of Subscription Section
   ======================================== */

.benefits-subscription-section {
    padding: 80px 0 120px;
    background: #ffffff;
}

.benefits-subscription-heading {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 2.2rem;
    font-weight: 700;
    color: #2c2c2c;
    margin-bottom: 50px;
    letter-spacing: 0.05em;
    animation: fadeInUp 1s ease-out;
    line-height: 1.6;
}

.benefits-subscription-heading::before {
    content: '';
    width: 4px;
    height: 60px;
    background: #2c2c2c;
    border-radius: 2px;
    flex-shrink: 0;
}

.benefits-subscription-list {
    max-width: 900px;
    margin: 0 auto;
}

.benefit-subscription-item {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 0;
    padding: 30px 0;
    background: transparent;
    border-bottom: 1px solid #e8e3dc;
    transition: all 0.3s ease;
    animation: fadeInUp 1s ease-out both;
}

.benefit-subscription-item:nth-child(1) {
    animation-delay: 0.1s;
}

.benefit-subscription-item:nth-child(2) {
    animation-delay: 0.2s;
}

.benefit-subscription-item:nth-child(3) {
    animation-delay: 0.3s;
}

.benefit-subscription-item:nth-child(4) {
    animation-delay: 0.4s;
}

.benefit-subscription-item:nth-child(5) {
    animation-delay: 0.5s;
    border-bottom: none;
}

.benefit-subscription-item:last-child {
    border-bottom: none;
}

.benefit-subscription-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #B6D96D;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-right: 5px;
}

.benefit-subscription-content {
    flex: 1;
}

.benefit-subscription-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: #2c2c2c;
    line-height: 1.6;
    letter-spacing: 0.05em;
}


/* Responsive Styles for Benefits Subscription */
@media (max-width: 768px) {
    .benefits-subscription-section {
        padding: 60px 0 80px;
    }

    .benefits-subscription-heading {
        font-size: 1.5rem;
        margin-bottom: 40px;
    }

    .benefits-subscription-heading::before {
        height: 50px;
    }

    .benefit-subscription-item {
        gap: 20px;
        padding: 25px 0;
    }

    .benefit-subscription-number {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .benefit-subscription-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .benefits-subscription-section {
        padding: 40px 0 60px;
    }

    .benefits-subscription-heading {
        font-size: 1.3rem;
        margin-bottom: 30px;
    }

    .benefits-subscription-heading::before {
        height: 45px;
    }

    .benefit-subscription-item {
        gap: 15px;
        padding: 20px 0;
    }

    .benefit-subscription-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .benefit-subscription-title {
        font-size: 1rem;
    }


}

/* ========================================
   Customer Reviews Section
   ======================================== */

.customer-reviews-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #f8f6f3 0%, #ffffff 100%);
}

.customer-reviews-heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2c2c2c;
    line-height: 2;
    letter-spacing: 0.05em;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 1s ease-out;
}

/* Responsive Styles for Customer Reviews */
@media (max-width: 768px) {
    .customer-reviews-section {
        padding: 80px 0;
    }

    .customer-reviews-heading {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .customer-reviews-section {
        padding: 60px 0;
    }

    .customer-reviews-heading {
        font-size: 1.4rem;
    }
}

/* ========================================
   Hesitation Message Section
   ======================================== */

.hesitation-message-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8f6f3 100%);
}

.hesitation-message-heading {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2c2c2c;
    line-height: 2;
    letter-spacing: 0.05em;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 1s ease-out;
}

.hesitation-message-content {
    margin-top: 50px;
    max-width: 900px;
    animation: fadeIn 1s ease-out 0.3s both;
}

.hesitation-message-text {
    font-size: 1.25rem;
    line-height: 3;
    color: #333;
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
    text-align: left;
}

.hesitation-message-text.emphasis {
    font-size: 1.5rem;
    font-weight: 700;
    color: #8b6f47;
    margin-bottom: 2.5rem;
}

.hesitation-message-text:last-child {
    margin-bottom: 0;
}

/* Responsive Styles for Hesitation Message */
@media (max-width: 768px) {
    .hesitation-message-section {
        padding: 80px 0;
    }

    .hesitation-message-heading {
        font-size: 1.6rem;
    }

    .hesitation-message-content {
        margin-top: 40px;
    }

    .hesitation-message-text {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

    .hesitation-message-text.emphasis {
        font-size: 1.3rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 480px) {
    .hesitation-message-section {
        padding: 60px 0;
    }

    .hesitation-message-heading {
        font-size: 1.4rem;
    }

    .hesitation-message-content {
        margin-top: 30px;
    }

    .hesitation-message-text {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .hesitation-message-text.emphasis {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }
}

/* ========================================
   Order Section
   ======================================== */
.order-section {
    padding-top: 100px;
    background: #ffffff;
}

.order-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c2c2c;
    text-align: center;
    letter-spacing: 0.08em;
    line-height: 1.6;
}

/* Responsive Styles for Order Section */
@media (max-width: 768px) {
    .order-section {
        padding-top: 80px;
    }

    .order-heading {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .order-section {
        padding-top: 60px;
    }

    .order-heading {
        font-size: 1.6rem;
    }
}




/* ========================================
   Media Authority Section
   ======================================== */
.media-authority-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%);
}

.media-authority-section .container {
    text-align: center;
}

.media-authority-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    letter-spacing: 0.08em;
    line-height: 1.6;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #d4af37 0%, #f4e4a6 25%, #d4af37 50%, #c5a028 75%, #d4af37 100%);
    padding: 25px 50px;
    border-radius: 15px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    width: 100%;
}

.media-authority-heading::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.media-authority-subheading {
    font-size: 1.15rem;
    color: #555;
    text-align: left;
    line-height: 1.9;
    letter-spacing: 0.03em;
    margin-bottom: 35px !important;
}

.media-grid {
  /* 📌 Flexboxに切り替える 📌 */
    display: flex;
    flex-wrap: wrap; /* 要素を折り返す */
    justify-content: center; /* これで全要素を中央寄せにし、最終行も自動的に中央に配置される */
    /* ------------------------ */

    gap: 30px;
    margin-bottom: 50px;
    /* width: fit-content; や grid-template-columns は不要になります */
}


.media-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 35px 25px;
    box-shadow: 0 5px 20px rgba(139, 111, 71, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 2px solid #d4af37;
    position: relative;
    overflow: hidden;
    width: calc(33.333% - 20px); /* 33.333% - (30px gap * 2 / 3) のざっくり計算 */
    max-width: 100%;
}


@media (max-width: 1200px) {
  .media-card {
    width: 48% ;
  }

}

@media (max-width: 764px) {
  .media-card {
    width: 100% ;
  }

}

@media (max-width: 480px) {
  .media-card {
    width: 100% ;
  }
}




.media-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    padding: 2px;
    background: linear-gradient(135deg, #d4af37 0%, #f4e4a6 25%, #d4af37 50%, #c5a028 75%, #d4af37 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.media-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 10px 30px rgba(139, 111, 71, 0.18),
        0 0 20px rgba(212, 175, 55, 0.3);
    border-color: #f4e4a6;
}

.media-label {
    font-family: 'Arial', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #999;
    letter-spacing: 0.15em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.media-intro {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #8b6f47;
    margin-bottom: 20px;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-shadow: 0 2px 4px rgba(139, 111, 71, 0.1);
}

.media-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c2c2c;
    line-height: 1.6;
    margin-bottom: 12px;
    letter-spacing: 0.03em;
}

.nippo {
  margin-top: 25px;
}

.media-date {
    font-size: 0.95rem;
    color: #888;
    margin-bottom: 15px;
   padding-bottom: 8px;
}

.media-description {
  margin-top: 15px;
  color: #555;
  text-align: left;
  line-height: 2;
}

.media-image {
    width: 100%;
    margin-top: 15px;
}

.media-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.video-image video {
  width: 100%;
  height: auto;
}

.media-highlight {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, #faf8f5 0%, #f5f2ed 100%);
    border-radius: 20px;
    border: 2px solid rgba(139, 111, 71, 0.15);
}

.media-highlight-text {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c2c2c;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

/* Responsive Styles for Media Authority Section */
@media (max-width: 968px) {
    .media-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .media-authority-section {
        padding: 80px 0;
    }

    .media-authority-heading {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }

    .media-authority-subheading {
        font-size: 1rem;
        margin-bottom: 40px;
    }

    .media-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .media-card {
        padding: 30px 20px;
    }

    .media-label {
        font-size: 0.8rem;
    }

    .media-intro {
        font-size: 1.5rem;
    }

    .media-title {
        font-size: 1.3rem;
    }

    .media-highlight-text {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .media-authority-section {
        padding: 60px 0;
    }

    .media-authority-heading {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .media-authority-subheading {
        font-size: 0.95rem;
        margin-bottom: 30px;
    }

    .media-card {
        padding: 25px 15px;
    }

    .media-label {
        font-size: 0.75rem;
    }

    .media-intro {
        font-size: 1.3rem;
    }

    .media-title {
        font-size: 1.15rem;
    }

    .media-date {
        font-size: 0.9rem;
    }

    .media-highlight-text {
        font-size: 1.1rem;
    }
}

.select {
text-align: center;
font-size: 20px;
margin-top: 45px;
}

.message-wrapper {
  position: relative;
  .img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    position: relative;
    opacity: 0.4;
  }
  h3 {
    margin-top: 30px;
    color: #107289;
    font-family: "noto";
    letter-spacing: 0.1em;
    display: flex;
    align-items: center; /* 垂直中心 */
    font-weight: lighter;
    position: relative;
    z-index: 2;
  }
  .flex-box {
  display: flex;
  justify-content:center;
  align-items: center;
}

  .catch:before {
    border-top: 1px solid;
    content: "";
    width: 1em; /* 線の長さ */
  }
  .catch:after {
    margin-left: 1em; /* 文字の左隣 */
  }
  .cheer {
    position: absolute;
    top: 20px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 3;
    font-family: "mincho";
    color: #5F5F5F;
    letter-spacing: 0.2em;
    line-height: 2;
    font-size: 16px;

  }
  .vision {
      position: absolute;
      bottom: 22px;
      right: 100px;
      margin: 0 auto;
      z-index: 3;
      font-family: "mincho";
      color: #5F5F5F;
      letter-spacing: 0.1em;
      line-height: 2;
  }
  .lunaologo {
    position: absolute;
    width: 130px;
    height: auto;
    bottom: 12px;
    right: 0px;
    margin: 0 auto;
    z-index: 3;
  }
}

@media (min-width: 1200px) {
.message-wrapper {
  .cheer {
    font-size: 18px;

  }
}
}



.company-wrapper {
  margin-top: -7px;
  padding-top: 40px;
  padding-bottom: 100px;
  padding-right: 10px;
  padding-left: 10px;
  background: #B6D96D;
  color: white;
  letter-spacing: 0.1em;
  font-size: 14px;
  text-decoration: none;
  .long {
    width: 130px;
    height: auto;
  }
  .border {
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: solid 1px white;
  }
  a {
    text-align: center;

    color: white;
  }
}

.benefits-subscription-section{
  .hidden {
    display: none;
  }
  .howto {
    padding-top: 25px;
  }
  .each {
    text-align: center;
    margin-top: 0px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
}

:root {
    /* カラーパレット */
    --color-bg-body: #f9fafb; /* gray-50 */
    --color-bg-white: #ffffff;
    --color-bg-gray: yellow;
    --color-bg-img-placeholder: #e5e7eb; /* gray-200 */

    --color-text-main: #555555;
    --color-text-heading: #666666;
    --color-text-sub: #4b5563; /* gray-600 */
    --color-text-name: #374151; /* gray-700 */

    --color-highlight: #fbf899;
    --color-tag-gray: #464D2D;
    --color-tag-pink: #d65f9a;
    --color-tag-blue: #D93C6E;

    /* フォント */
    --font-family-base: "Noto Sans JP", sans-serif;

    /* サイズ・スペース */
    --container-max-width: 1000px;
    --spacing-base: 4px;
}


.experts-section {
  max-width: 1000px;
  margin: auto;
  padding-top: 50px;
    padding-bottom: 50px;
  /* =========================================
     インタビューセクション共通
     ========================================= */
  .interview-card {
      position: relative;
      margin-bottom: 64px;
      /* widthはデフォルト100% */
  }

  .interview-card:last-child {
      margin-bottom: 0;
  }

  /* 背景装飾（グレーのボックス） */
  .bg-decoration {
      position: absolute;
      top: 0;
      width: 75%;
      height: 100%;

      z-index: 0;
      /* デフォルトはスマホ用（角丸なしまたは片側のみ） */
  }
  /* 右配置の背景 */
  .bg-decoration.right {
      right: 0;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
  }
  /* 左配置の背景 */
  .bg-decoration.left {
      left: 0;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
  }

  /* スマホ用レイアウト：Flexboxで画像とテキストを重ねる */
  .card-inner-wrapper {
      position: relative;
      width: 100%;
      margin-bottom: 32px;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
  }

  /* 左テキスト・右画像 のパターン */
  .card-inner-wrapper.type-a {
      padding-left: 16px;
  }
  /* 左画像・右テキスト のパターン */
  .card-inner-wrapper.type-b {
      padding-right: 0px;
  }

  /* =========================================
     情報エリア（テキスト部分）
     ========================================= */
  .info-area {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-bottom: 16px;
      width: 62.333%; /* 7/12 */
      flex-shrink: 0;
      margin-top: 40px;
  }

  /* Type A: テキストが左 */
  .info-area.pos-left {
      margin-right: -48px; /* ネガティブマージンで重ねる */
  }
  /* Type B: テキストが右 */
  .info-area.pos-right {
      margin-left: -48px; /* ネガティブマージンで重ねる */
      padding-left: 20px;
  }

  /* キャッチコピー */
  .info-catch {
      margin-bottom: 16px;
      font-size: 1rem; /* 18px */
      font-weight: 500;
      color: var(--color-text-name);
      letter-spacing: 0.025em;
  }

  /* マーカー（黄色い線） */
  .highlight {
      background-color: var(--color-highlight);
      padding: 4px 4px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
  }
  .highlight.block-style {
      display: inline-block;
      margin-top: 10px;
  }

  /* タグ */
  .tag-wrapper {
      margin-bottom: 8px;
  }

  .tag {
      display: inline-block;
      padding: 6px 10px;
      font-size: 15px; /* 12px */
      font-weight: 700;
      color: #fff;
      white-space: nowrap;
      letter-spacing: 0.05em;
  }
  .tag-gray { background-color: var(--color-tag-gray); }
  .tag-pink { background-color: var(--color-tag-pink); }
  .tag-blue { background-color: var(--color-tag-blue); }

  .tag-normal-weight {
      margin-left: 8px;
      font-weight: 700;
      letter-spacing: 0.05em;
  }

  /* 名前・肩書き */
  .profile-wrapper {
      color: var(--color-text-sub);
  }
  .profile-title {
      font-size: 15px;
      margin-bottom: 4px;
      line-height: 1.6;
  }
  .profile-name {
      font-size: 1.5rem; /* 24px */
      font-weight: 500;
      color: var(--color-text-name);
  }
  .profile-name-suffix {
      font-size: 1.125rem; /* 18px */
  }

  /* =========================================
     画像エリア
     ========================================= */
  .image-area {
      width: 50%; /* 6/12 */
      position: relative;
      z-index: 0;
      display: flex;
      align-items: flex-end;
  }
  .image-area.align-end { justify-content: flex-end; }
  .image-area.align-start { justify-content: flex-start; }

  .image-frame {
      position: relative;
      width: 100%;
      padding-top: 130%; /* アスペクト比調整 */
      background-color: var(--color-bg-img-placeholder);
      overflow: hidden;
  }
  /* 角丸の調整（スマホ時） */
  .image-frame.round-bl { border-bottom-left-radius: 1.5rem; }
  .image-frame.round-br { border-bottom-right-radius: 1.5rem; }

  .image-obj {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 画像の拡大・位置調整 */
      transform: scale(1.1) translateY(8px);
  }
  .image-obj.position-center { object-position: center; }
  .image-obj.position-top { object-position: top; }
  /* 2人目調整用：顔が見えるように */
  .image-obj.adjust-left { object-position: 25% center; }


  /* =========================================
     本文エリア
     ========================================= */
  .body-text-area {
      padding: 0 15px;
      color: var(--color-text-main);
      line-height: 3; /* leading-loose */
      text-align: justify;
      font-size: 1rem;
      letter-spacing: 0.05em; /* tracking-[3px] */
  }
  .br-sp { display: inline; }
  .br-pc { display: none; }


  /* =========================================
     PC / タブレット (768px以上)
     ========================================= */
  @media (min-width: 768px) {



      /* インタビューカード：Gridレイアウトへ */
      .interview-card {
          margin-bottom: 96px;
          padding: 0 48px;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          column-gap: 48px;
          align-items: center;
      }

      /* 背景装飾のPC版（絶対配置でGridの後ろに敷く） */
      .bg-decoration {
          display: none; /* スマホ用は消す */
      }
      .bg-decoration-pc {
          display: block;
          position: absolute;
          top: 16px;
          width: 45%;
          height: 95%;
          z-index: -10;
      }
      .bg-decoration-pc.right {
          right: 0;
          border-top-left-radius: 1.5rem;
          border-bottom-left-radius: 1.5rem;
      }
      .bg-decoration-pc.left {
          left: 0;
          border-top-right-radius: 1.5rem;
          border-bottom-right-radius: 1.5rem;
      }

      /* Flexコンテナを解除し、中身を直接Grid配置させる */
      .card-inner-wrapper {
          display: contents; /* 魔法のプロパティ：ラッパーを無視して子要素を親Gridに配置 */
      }

      /* --- Type A: 左テキスト / 右画像 --- */
      /* テキストエリア */
      .type-a .info-area {
          width: 100%;
          margin: 0;
          padding: 0;
          grid-column: 1;
          grid-row: 1;
      }
      /* 画像エリア */
      .type-a .image-area {
          width: 100%;
          grid-column: 2;
          grid-row: 1 / span 2; /* 縦に2行分使う */
      }
      /* 本文エリア */
      .interview-card.type-a-card .body-text-area {
          grid-column: 1;
          grid-row: 2;
          align-self: start;
          margin-top: 24px;
          padding: 0;
          font-size: 1rem;
      }


      /* --- Type B: 左画像 / 右テキスト --- */
      /* 画像エリア */
      .type-b .image-area {
          width: 100%;
          grid-column: 1;
          grid-row: 1 / span 2;
      }
      /* テキストエリア */
      .type-b .info-area {
          width: 100%;
          margin: 0;
          padding: 0;
          grid-column: 2;
          grid-row: 1;
      }
      /* 本文エリア */
      .interview-card.type-b-card .body-text-area {
          grid-column: 2;
          grid-row: 2;
          align-self: start;
          margin-top: 24px;
          padding: 0;
          font-size: 1rem;
      }


      /* 要素内のサイズ・微調整 (PC) */
      .info-catch { font-size: 1.25rem; /* 20px */ }
      .tag { font-size: 0.875rem; /* 14px */ }
      .profile-title { font-size: 0.875rem; /* 14px */ }
      .profile-name { font-size: 1.875rem; /* 30px */ }
      .profile-name-suffix { font-size: 1.25rem; /* 20px */ }

      .image-frame {
          padding-top: 100%; /* 正方形に近づける */
          border-radius: 1.5rem; /* 全角丸 */
          box-shadow: none;
      }
      .image-obj {
          transform: scale(1.1) translateY(0);
      }

      .br-sp { display: none; }
      .br-pc { display: block; }
  }
}


.individual {
 padding: 0px 15px;
 text-align: center;
 font-size: 0.8em;
 margin-top: 20px;
}

.chart-padding {
  padding: 30px 0px;
}

.silica-chart-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    padding: 35px 0px;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Arial, sans-serif;
    text-align: center;
    border-radius: 12px;
    /* 影をつけて浮き上がらせる */
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  }

  .chart-title {
    font-size: 1em;
    font-weight: bold;
    color: #333;
    margin-bottom: 23px;
    line-height: 1.5;
  }

  .chart-highlight {
    color: #e74c3c; /* 警告色（赤） */
    font-size: 22px;
    background: linear-gradient(transparent 70%, #ffdfdd 70%); /* マーカー風 */
  }

  /* キャンバス自体のスタイル */
  canvas#silicaCanvas {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 10px;
  }

.ugc-wrapper {
text-align: center;
  .voice2 {
    width: 48%;
    height: auto;
    padding-right: 3px;
   }

.voice3 {
    width: 48%;
    height: auto;
    padding-left: 3px;
  }
}

.voice {
margin-top: 7px;
}

.by {
  text-align: center;
  color: #888;
  font-size: 13px;
  padding-top: 16px;
}

.single2 {
 padding-left: 20px;
margin-bottom: 15px;
}

.silicatsu {
  font-size: 1.6em;
  color: white;
  letter-spacing: 0.05em;
  padding-bottom: 5px;
  white-space: nowrap;
}

.oneprice {
  font-size: 1.6rem;
}

@media (max-width: 1024px) {
  .silicatsu {
    font-size: 1.3em;
  }
}
@media (max-width: 768px) {
  .silicatsu {
    font-size: 1.2em;
  }
}

@media (max-width: 480px) {
  .silicatsu {
    font-size: 1.1em;
  }
 .oneprice {
  font-size: 1.5rem;
}
}


.order-section {
  #qa_open2 {
text-decoration: underline;
  text-underline-offset: 4px; /* 線と文字の間隔を少し空けると読みやすいです */
  text-decoration-thickness: 1px; /* 線の太さ */
  font-size: 14px;
}

.hidden {
    display: none;
  }
  .howto {
    padding-top: 25px;
  }
}


.lp-store {
  width: 100%;
  text-align: center;
  padding-bottom: 30px;
  .lp-store-logo {
    width: 170px;
    height: auto;
  }
  .lp-store-name {
    font-size: 14px;
    margin-top: -10px;
    margin-left: -18px;
    letter-spacing: 0.05em;
    color: #a1a689;
  }
}


@media (min-width: 554px) {
  .lp-store {
    width: 100%;
    text-align: center;
    padding-bottom: 30px;
    .lp-store-logo {
      width: 270px;
      height: auto;
    }
    .lp-store-name {
      font-size: 23px;
      margin-top: -10px;
      margin-left: -18px;
      letter-spacing: 0.05em;
      color: #a1a689;
    }
  }
}

.lp-store2 {
  width: 100%;
  text-align: center;
  .lp-store-name2 {
    font-size: 14px;
    margin-top: -5px;
    letter-spacing: 0.05em;
    color: #a1a689;
  }
}

.lp-lock-btn {
  border: none;
  color: white;
  background: #B6D96D;
  width: 75px;
  height: 75px;
  position: fixed;
  bottom: 49px;
  right: 0px;
  z-index: 200;
  border-radius: 10px 0 0 10px;
  .tobuy {
    color: white;
    font-size: 12px;
    padding-bottom: 2px;
  }
  .cart-white {
    width: 54px;
    height: auto;
  }
}

.lp-lock-btn:hover,
.lp-lock-btn:active,
.lp-lock-btn:focus {
    background: #B6D96D !important; /* 色を固定 */
    color: white !important;
    opacity: 1 !important; /* 透明度も変えない */
}

.easy-stop {
  padding-top: 14px;
  font-size: 14px;
}