* {
    font-size: 62.5%;
    margin: 0;
    padding: 0;
}
/* header自体の設定 */
.header {
    background-image: url(img/top.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    /* 高さは固定(100rem)ではなく、中身+余白で決まるのが理想ですが、
       まずはfv(ファーストビュー)として高さを確保します */
    height: 100vh; /* 画面の高さいっぱいに */
    min-height: 700px; /* 小さくなりすぎないように */
    position: relative; /* 子要素の基準点（念のため） */
    
    /* ★Flexbox発動！中身を縦方向に並べる */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 上から順に並べる */
}

/* ロゴの配置 */
.header__logo-wrap {
    width: 100%;
    /* ロゴを中央に寄せる */
    display: flex;
    justify-content: center;
    padding-top: 2rem; /* 上の余白 */
}

.logo_pc {
    width: 100%;       /* 親要素(header__logo-wrap)の幅に合わせるが... */
    max-width: 400px;  /* ★画像の「半分のサイズ」を上限にする */
    height: auto;      /* 比率を維持 */
}

/* メインコンテンツ（特徴＋コピー）の配置 */
.header__content {
    /* 左側に余白を持たせる */
    padding-left: 5%;
    /* ロゴとの距離 */
    margin-top: auto; /* 上下に余白を自動分配して配置調整も可能だが、今回はシンプルに */
    margin-bottom: auto; /* ロゴとコンテンツを画面の上下中央寄りに配置するテクニック */
    
    /* ★ここもFlexbox！中身（特徴とコピー）を縦に並べる */
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 特徴とコピーの間の隙間 */
}

/* 3つの丸（特徴） */
.header__features { /* 元の .container */
    /* position: absolute; は削除！ */
    display: flex; /* 横並び */
    gap: 1rem; /* 丸同士の隙間 */
}
.header__feature-list {
    display: flex;
    gap: 1rem;
}
/* キャッチコピー */
.header__catch-copy { /* 元の .h1 */
    /* position: absolute; は削除！ */
    font-family: "YuMincho", serif;
    font-weight: bold;
    font-size: 4.0rem;
    letter-spacing: 0.5rem; /* 少し調整 */
    color: #FF2C6B;
    line-height: 1.5; /* 行間を読みやすく */
}

.logo_sp {
    display: none;
}

/* --- 親要素（リスト） --- */
.header__feature-list {
    display: flex;
    gap: 1rem;
    /* 必要なら中央揃え */
    /* justify-content: center; */
}

/* --- 丸（バブル）の本体 --- */
.feature-bubble {
    /* block ではなく flex にする */
    display: flex;
    /* 縦並びにする（テキストが上で数字が下、などに対応するため） */
    flex-direction: column;
    /* 上下左右のど真ん中に配置 */
    justify-content: center;
    align-items: center;
    
    border: solid 1px #5B3E00;
    width: 88px;
    height: 61px;
    background-color: #5B3E00;
    border-radius: 20%;
    /* marginは親の gap で管理しているので削除しても良いが、微調整ならOK */
    /* position: relative; ← もう不要です！削除！ */
}

/* --- 中のテキスト --- */
.feature-bubble__text {
    font-family: Noto Sans, sans-serif;
    font-size: 1.6rem;
    color: #F8E6E6;
    text-align: center;
    line-height: 1.2; /* 行間を少し詰める */
    
    /* padding や justify-content は親(feature-bubble)が管理するので不要 */
    margin: 0; /* 余計な余白を消す */
}

.feature-bubble__text--small {
    font-size: 1.0rem; /* 美容成分の文字サイズ */
    margin-bottom: 2px; /* 数字との距離 */
}

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


/* 数字と単位を包む箱 */
.feature-bubble__number-wrap {
    color: #F8E6E6;
    display: flex;          /* ★横並びにする */
    align-items: baseline;  /* ★数字の底辺に単位の底辺を揃える（重要） */
    justify-content: center;/* 中央寄せ */
    line-height: 1;         /* 高さのズレを防ぐ */
    width: 100%;            /* 親要素いっぱいに広げる */
}

/* 数字（99） */
.feature-bubble__number {
    font-size: 2.7rem;
    font-weight: bold;
    /* position: absolute; は削除済み */
    /* top, right も削除済み */
    margin-right: 2px;      /* 単位との間に少し隙間を作る */
}

/* 単位（配合%） */
.feature-bubble__unit {
    font-size: 1.0rem;
    /* position: absolute; は削除済み */
    /* top, left も削除済み */
    text-align: left;
}
.h1 {
    font-family: "YuMincho", serif;
    font-weight: bold;
    font-size: 4.0rem;
    letter-spacing: 1rem;
    color: #FF2C6B;
    width: 90%;
    height: 30%;
    position: absolute;
    top: 65%;
    left: 3
}
.h1_center {
    margin-left: 5%;
    font-size: 4.0rem;
}
.h1_bottom {
    margin-left: 8%;
    font-size: 4.0rem;
}

.buy_wrapper {
    background-image: url(img/checked-img1.png);
    max-width: 1440px;
    height: 32.7rem;
    background-position: center;  
}
.sale {
    display: flex;
    border: solid 1px #F5D479;
    margin: 1.3rem auto 0;
    width: 60%;
    height: 96px;
    background: linear-gradient(180deg, #F5D479 0%, #FFEFC3 100%);
    border-radius: 13.2632px 13.2632px 0px 0px;
    
}
.sale_now {
    border: solid 1px #FF0000;
    border-radius: 50%;
    background-color: #FFFEFE;
    font-family: "Noto sans JP", sans-serif;
    font-size: 1.7rem;
    font-weight: 600;
    color: #FF0000;
    width: 18%;
    text-align: center;
    padding: 0.8rem 0;
    margin-left: 2.5rem;
}
.sale_now span {
    font-size: 3.2rem;
    position: relative;
    top: -0.5rem;
}
.new_sale {
    font-family: "YuMincho", serif;
    font-weight: 700;
    font-size: 3.1rem;
    color: #000000;
    text-align: center;
    margin: 3% 10%;
}
.sale_limit {
    border: solid 1px #FFFEFE;
    border-radius: 10%;
    background-color: #FFFEFE;
    font-family: "Noto sans JP", sans-serif;
    font-size: 2.4rem;
    font-weight: 600;
    color: #FF0000;
    width: 18%;
    text-align: center;
    padding-top: 3px;
    margin: 2.5rem 0.3rem 2.4rem 0;
}
.price_container {
    border: solid 1px #FFBABA;
    border-radius: 0 0 10px 10px;
    background-color: #FFBABA;
    width: 60%;
    height: 203px;
    margin: 0 auto;
}
.price_p {
    display: flex;
    align-items: center;
}
.usually_price {
    font-family: "Noto sans JP", sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #FFFEFE;
    text-align: center;
    border: solid 1px #000000;
    background-color: #000000;
    width: 127px;
    height: 34px;
    padding-top: 0.4rem;
    margin-left: 7.2rem;
}
.before_price {
    font-family: "Noto sans JP", sans-serif;
    font-size: 2.6rem;
    font-weight: 400;
    margin-left: 3rem;
    color: #000000;
    position: relative;
    height: 38px;
}
.before_price::before {
    position: absolute;
    content: "";
    display: block;
    transform: rotate(10deg);
    background-color: #FF0000;
    width: 100%;
    height: 1px;
    top: 45%;
    left: 0;
}

.before_price span {
    font-size: 1.8rem;
    color: #000000;
}
.arrow {
    font-family: "Noto sans JP", sans-serif;
    font-size: 3rem;
    font-weight: 400;
    margin: 3rem;
    height: 40px;
}
.after_price {
    font-family: "YuMincho", serif;
    font-weight: 700;
    font-size: 6.1rem;
    color: #FF0000;
    position: relative;
    width: 230px;
    margin-left: 3rem;
}
.after_price_tax {
    font-family: "YuMincho", serif;
    font-weight: 700;
    font-size: 2.1rem;
    color: #FF0000;
    position: absolute;
    top: 20%;
    left: 72%;
}
.after_price_yen {
    font-family: "YuMincho", serif;
    font-weight: 700;
    font-size: 2.6rem;
    color: #FF0000;
    position: absolute;
    top: 45%;
    left: 74%;
}
.price_container img {
    width: 78px;
    height: 60px;
}
.price_container a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.9rem;
    text-decoration: none;
    margin: 0 auto;
    width: 85%;
    height: 68px;
    background-color: #FF0000;
    border: 1px solid #ffffff;
    color: #ffffff;
    border-radius: 80px;
    font-family: "Noto sans JP", sans-serif;
}
.postage_free {
    font-family: "Noto sans JP", sans-serif;
    font-size: 2rem;
    color: #5B5858;
    margin-left: 60%;
}

.middle_call {
    background-image: url(img/gold-backimg1.png);
    max-width: 1440px;
    background-size: cover;
    background-position: center;
}
.middle_call h2 {
    text-align: center;
    font-family: "Noto sans JP", sans-serif;
    font-weight: bold;
    font-size: 6.4rem;
    color: #5B5858;
    padding: 7%;
}

.solution {
   background-image: url(img/star.png);
    max-width: 1440px;
    background-size: cover;
    background-position: center;
    padding: 10rem 0;
    font-family: "Noto sans JP", sans-serif;

}
.solution_top {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding-top: 100px;
    position: relative;
    border-top: solid 4px #F8E6E6;
    background: rgba(255, 250, 250, 0.14);
}
.solution h3 {
    font-family: "Noto sans JP", sans-serif;
    font-weight: bold;
    font-size: 4.2rem;
    color: #000000;
}
.solution h3 span {
    font-size: 6rem;
    color: #FC7171;
}
.solution_top_h3 {
    position: absolute;
    top: 15%;
    left: 7%;
}
.solution_top img {
    width: 60%;
}
.solution ul {
    list-style: none;
    margin-left: 8rem;
}
.solution li {
    width: 90%;
    border: solid 1px #FEF4F4;
    background-color: #FEF4F4;
    border-radius: 20px;
    margin: 2rem;
    padding: 2rem;
    font-size: 3rem;
    text-align: center;
}
.solution_middle {
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
    align-items: center;
    height: 100%;
    padding-top: 16rem;
    position: relative;
    border-top: solid 4px #F8E6E6;
    border-bottom: solid 4px #F8E6E6;
    background: rgba(255, 223, 134, 0.08);
}
.solution_middle_h3 {
    position: absolute;
    top: 15%;
    right: 10%;
}
.solution_middle li {
    margin-left: 6rem;
}
.solution_middle img {
    width: 48%;
}
.solution_bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding-top: 100px;
    position: relative;
    border-bottom: solid 4px #F8E6E6;
    background: rgba(113, 147, 241, 0.06);
}
.solution_bottom_h3 {
    position: absolute;
    top: 15%;
    left: 7%;
}

.reviews {
    background-image: url(img/gold-backimg2.png);
    max-width: 1440px;
    height: 85rem;
    background-size: cover;
    background-position: center;
    position: relative;
}
.reviews_h2 {
   font-family: "YuMincho", serif;
    font-weight: 700;
    font-size: 6rem;
    color: #5B3E00;
    text-align: center; 
    padding: 10rem;
}
.reviews_container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.reviews_item {
    margin-top: 6rem;
}
.reviews_item  img {
    margin-left: 8rem;
}

.problem {
    background-image: url(img/problem.png);
    max-width: 1440px;
    height: 78rem;
    background-size: cover;
    background-position: center;
    position: relative;
}
.problem h2  {
    font-family: "YuMincho", serif;
    font-weight: 700;
    font-size: 3.6rem;
    color: #5B5858;
    position: absolute;
    top: 35%;
    left: 3%;
    z-index: 0;
}
.problem h2::before {
    content: '';
    background-color: #FFFEFE;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    filter: blur(5px);
    z-index: -1;
}
.problem img {
    position: absolute;
    top: 50%;
    left: 5%;
    height: 40%;
}

.mixture {
    background-image: url(img/checked-img1.5.png);
    max-width: 1440px;
    height: 35rem;
    background-position: center;
    background-size: cover;
    position: relative;
    padding-top: 3rem;
}
.mixture_wrapper {
    background-color: #C2F1FA;
    margin: 0 auto;
    width: 80%;
    height: 30rem;
    clip-path: polygon(0 0, 100% 0, 100% 56%, 50% 100%, 0 56%); 
}
.mixture p {
    font-family: "Noto Sans", sans-serif;
    font-weight: 600;
    font-size: 5rem;
    letter-spacing: 0.64em;
    padding-top: 1rem;
    color: #5B5858;
    text-align: center;
}
.double_arrow {
    position: absolute;
    top: 50%;
    left: 46%;
    width: 10rem;
    height: 10rem;
}

.component {
    background-image: url(img/bubble.png);
    max-width: 1440px;
    height: 1800px;
    background-position: center;
    background-size: cover;
    position: relative;
}
.component_img_top {
    display: block;
    padding: 6.6rem;
    width: 50%;
    margin: 0 auto;
}
.component_img_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.component_prescription {
    position: absolute;
    top: 33%;
    left: 35%;
    width: 30%;
    height: 33%;
    background: #FEF4F4;
    box-shadow: 1px 2px 6.8px #5B5858;
    clip-path: polygon(0 0,100% 50%,0 100%);
    transform: rotate(90deg);
}
.component_img_bottom p {
    font-family: "YuMincho", serif;
    font-weight: 700;
    transform: rotate(-90deg);
    font-size: 6rem;
    color: #BB8900;
    position: absolute;
    top: 43%;
    left: -10%;
}

.component_text {
    width: 90%;
    margin: 3rem auto;
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    line-height: 1.8;
    position: relative;
    z-index: 0;
}
.component_text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(10px);
    background-color: #FBF5E5;
    z-index: -1;
    border-radius: 10px;
}
.highlight {
    font-family: "YuMincho", serif;
    font-weight: 700;
    font-size: 6rem;
    position: relative;
    z-index: 1;
}

.highlight::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.2em;
    transform: translateY(-50%);
    background: rgba(255, 223, 100, 0.6); /* 黄系の色味 */
    filter: blur(6px); /* ブラーをかける */
    z-index: -1;
    border-radius: 0.3em;
}
.component_text h3 {
    font-family: "YuMincho", serif;
    font-weight: 700;
    font-size: 6rem;
    text-align: center;
   
} 


footer {
    background-color: #ffffff;
    max-width: 1440px;
    height: 30rem;
    position: relative;
}
.footer_container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}
.sns_icons {
    display: flex;
    justify-content: center;
    align-items: center;
}
.sns_icons img {
    width: 8rem;
    height: 8rem;
    margin: 0 0.6rem;
}
.footer_text {
   font-family: "YuMincho", serif;
    font-weight: 300;
    font-size: 4rem;
    color: #000000;
    display: flex;
    text-align: center;
    justify-content: center;
    padding-bottom: 6rem;
}
.footer_text p {
    margin-right: 3rem;
}
.privacy::before {
    content: '';
    border-left: solid 1px #000000;
    height: 1px;
    padding: 1rem;
    
}


@media screen and (max-width: 1280px) {
    .buy_wrapper {
        background-image: url(img/checked-img1.png);
        height: 32.7rem;
        background-position: center;  
    }
    .sale , .price_container {
        width: 75%;
    }
    .middle_call h2 {
        font-size: 5rem;
        padding: 10%;
    }

    .solution {
        background-image: url(img/star.png);
        padding: 8rem 0;
    }
    .solution_top {
        padding-top: 80px;  
    }
    .solution h3 {
        font-size: 3rem;
    }
    .solution h3 span {
        font-size: 4.5rem;
    }
    .solution_top_h3 {
        position: absolute;
        top: 20%;
        left: 7%;
    }
    .solution ul {
        margin-left: 5rem;
    }
    .solution li {
        width: 100%;
        margin: 1.5rem;
        padding: 1.5rem;
        font-size: 2rem;
    }
    .solution_middle_h3 {
        position: absolute;
        top: 25%;
        right: 10%;
    }
    .solution_middle li {
        margin-left: 6rem;
    }
    .solution_bottom_h3 {
        position: absolute;
        top: 23%;
        left: 7%;
    }

    .reviews_h2 {
        font-size: 5rem;
        padding-top: 10rem;
    }
    .reviews_item  img {
        margin-left: 4rem;
    }

    .mixture_wrapper {
        width: 65%;
        height: 24rem;
    }
    .mixture p {
        font-size: 4rem;
        letter-spacing: 0.4em;
    }
    .double_arrow {
        top: 45%;
        width: 8rem;
        height: 8rem;
    }

    .component {
        background-image: url(img/bubble.png);
        height: 1500px;
        background-position: center;
        background-size: cover;
    }
    .component_prescription {
        position: absolute;
        top: 38%;
        left: 38%;
        width: 25%;
        height: 25%;
    }
    .component_img_bottom p {
        font-size: 4.2rem;
    }
    .component img {
        width: 45%;
        height: auto;
    }
    .component_img_top {
        padding: 6.6rem;
        width: 53%;
    }
    .component_text h3 {
        font-size: 4.8rem;
    } 
    .component_text span {
        font-size: 4.8rem;
    }
}

@media screen and (max-width: 1080px) {
    header {
        position: relative;
    }
    /* 1. ロゴの切り替え */
    .logo_pc {
        display: none; /* PCロゴを消す */
    }
    
    .logo_sp {
        display: block; /* SPロゴを出す */
        width: 40%;     /* サイズ調整（お好みで） */
        max-width: 200px;
        height: auto;
    }
    /* 2. レイアウトの調整 */
    .header {
        /* スマホでは背景位置を微調整したくなる場合があるかも */
        background-position: center top; 
    }

    .header__content {
        padding-left: 0; /* 左の余白をなくす */
        align-items: center; /* ★重要：中身をすべて中央揃えにする */
        text-align: center; /* テキストも中央揃え */
    }

    /* 3. キャッチコピーのサイズ調整 */
    .header__catch-copy {
        font-size: 2.8rem; /* 少し小さく */
        letter-spacing: 0.2rem;
        width: 90%; /* 横幅いっぱいに広がらないように */
    }
    
    /* 4. 3つの特徴（丸）の調整 */
    .header__features {
        gap: 0.5rem; /* 間隔を少し狭める */
    }
    /* .logo_pc {
        display: none;
    }
    .logo_sp {
        display: block;
        width: 38%;
        height: 10%;
        position: absolute;
        top: 2%;
        left: 45%;
    } */
    .container {
        align-items: center;
    }
    .h1 {
        font-size: 3.5rem;
        top: 70%;
        letter-spacing: 0.7rem;
    }
    .sale, .price_container {
        width: 90%;
    }
    .middle_call h2 {
        font-size: 4rem;
        padding: 12%;
    }

    .solution_top , .solution_middle, .solution_bottom {
        display: flex;
        height: 100%;
        padding-top: 100px;
        position: relative;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .solution_top_h3 , .solution_middle_h3, .solution_bottom_h3 {
        position: static;
        margin: 2rem 0;
    }
    .solution ul {
        margin-left: 1rem;
    }
    .solution li {
        width: 48rem;
        margin: 1.5rem;
        padding: 1.5rem;
        font-size: 2rem;
    }
    .solution_top img {
        width: 55%;
        padding-top: 3rem;
    }
    .solution_middle img {
        width: 50%;
        margin-right: 12rem;
        padding-top: 3rem;
    }
    .solution_bottom img {
        width: 60%;
    }

    .reviews_h2 {
        font-size: 4rem;
        padding-top: 10rem;
    }
    .reviews_item  img {
        margin-left: 1rem;
        width: 30%;
    }
    
    .problem_h2 {
        font-size: 3.2rem;
    }
    .problem img {
        height: 35%;
    }

    .mixture_wrapper {
        width: 70%;
        height: 24rem;
    }
    .mixture p {
        font-size: 3.6rem;
        letter-spacing: 0.4em;
    }
    .double_arrow {
        top: 45%;
        width: 6rem;
        height: 6rem;
    }

    .component {
        background-image: url(img/bubble.png);
        height: 1300px;
    }
    .component_img_bottom p {
        font-size: 3.6rem;
    }
    .component_img_top {
        padding: 6rem;
        width: 53%;
        margin: 0 auto;
    }
    .component_text h3 {
        font-size: 4.2rem;
    } 
    .component_text span {
        font-size: 4.2rem;
    }
}
@media screen and (max-width: 880px) {
    
    header {
        background-image: url(img/top.png);
        height: 50rem;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    .header {
        background-image: url(img/top.png);
        height: 80rem;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    .feature-bubble {
        width: 80px;
        height: 55px;
    }
    .feature-bubble p {
        font-size: 1.4rem;
    }
    .feature-bubble__small {
        font-size: 1.2rem;
    }
    feature-bubble__number {
        font-size: 2.4rem;
        top: 35%;
        right: 45%;
    }
    #beauty {
        font-size: 0.9rem;
    }
    .feature-bubble__unit {
        font-size: 0.9rem;
        top: 50%;
        left: 55%;
    }
    .sale, .price_container {
        width: 95%;
    }
    .sale_now {
        font-size: 1.5rem;
    }
    .sale_now span {
        font-size: 3.0rem;
        position: relative;
        top: -0.3rem;
    }
    .new_sale {
        margin: 4% 6%;
        font-size: 2.8rem;
    }
    .new_sale {
        margin: 3% 6%;
    }
    .usually_price {
        margin-left: 3.2rem;
    }
    .arrow {
        margin: 1rem;
    }
    .after_price {
        margin-left: 1rem;
    }
    .middle_call h2 {
        font-size: 3rem;
        padding: 12%;
    }

    .reviews {
        height: 100%;
    }

    .reviews_h2 {
        font-size: 3rem;
        padding-top: 8rem;
    }
    .reviews_item {
        display: flex;
        flex-direction: column;
    }
    .reviews_item  img {
        width: 100%;
        padding-bottom: 3rem;
    }

    .problem {
        height: 80rem;
    }
    .problem h2 {
        font-size: 3.0rem;
        top: 55%;
        left: 5%;
    }
    .problem img {
        position: absolute;
        top: 63%;
        left: 10%;
        height: 25%;
    }

    .mixture_wrapper {
        width: 70%;
        height: 20rem;
    }
    .mixture p {
        font-size: 3rem;
        letter-spacing: 0.3em;
    }
    .double_arrow {
        top: 43%;
        width: 5rem;
        height: 5rem;
    }

    .component {
        background-image: url(img/bubble.png);
        height: 1000px;
        background-position: center;
        background-size: cover;
    }
    .component_prescription {
        position: absolute;
        top: 38%;
        left: 38%;
        width: 25%;
        height: 25%;
    }
    .component_img_bottom p {
        font-size: 2.4rem;
    }
    .component img {
        width: 45%;
        height: auto;
    }
    .component_img_top {
        padding: 4rem;
        width: 53%;
        margin: 0 auto;
    }
    .component_text h3 {
        font-size: 3.6rem;
    } 
    .component_text span {
        font-size: 3.6rem;
    }

}
@media screen and (max-width: 645px) {
    .header {
        background-image: url(img/top.png);

        height: 50rem;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    .logo_sp {
        width: 45%;
        height: 10%;
        position: absolute;
        top: 2%;
        left: 40%;
    }
    .container {
        flex-direction: column;
        position: absolute;
        top: 34%;
        left: 10%;
        align-items: center;
    }
    .feature-bubble {
        width: 60px;
        height: 40px;
    }
    .feature-bubble p {
        font-size: 1.0rem;
    }
    .feature-bubble__small {
        font-size: 1.0rem;
    }
    .feature-bubble__number {
        font-size: 1.6rem;
        top: 40%;
        right: 50%;
    }
    
    .feature-bubble__unit {
        font-size: 0.6rem;
        top: 50%;
        left: 55%;
    }
    .h1 {
        font-size: 1.8rem;
        top: 73%;
        letter-spacing: 0.3rem;
    }
    .h1_center {
        margin-left: 10%;
        font-size: 2.4rem;
    }
    .h1_bottom {
        margin-left: 15%;
        font-size: 2.4rem;
    }
    .header__catch-copy {
        font-size: 2rem; /* さらに小さく */
        letter-spacing: 0.1rem;
        width: 90%; /* 横幅いっぱいに広がらないように */
    }
    .sale_now {
        font-size: 1.6rem;
        width: 17%;
        padding: 1rem 0;
    }
    .sale_now span {
        font-size: 2.4rem;
        position: relative;
        top: 0.4rem;
    }
    .new_sale {
        margin: 5% 6%;
        font-size: 2.4rem;
    }
    .sale_limit {
        font-size: 2rem;
        width: 20%;
        padding-top: 6px;
        margin: 2.3rem 0.3rem 2.4rem 0;
    }
    .usually_price {
        margin-left: 6rem;
        width: 90px;
    }
    .before_price {
        margin-left: 1rem;
        margin-top: 1rem;
        font-size: 1.8rem;
    }
    .before_price span {
        font-size: 1.2rem;
    }
    .arrow {
        margin: 1.2rem;
        font-size: 2.5rem;
    }
    .after_price {
        font-size: 4rem;
        margin-left: 1rem;
    }
    .after_price_tax {
        font-size: 1.5rem;
        position: absolute;
        top: 16%;
        left: 52%;
    }
    .after_price_yen {
        font-size: 1.5rem;
        position: absolute;
        top: 45%;
        left: 52%;
    }
    .price_container a {
        font-size: 2.4rem;
        width: 88%;
    }
    .postage_free {
        font-size: 1.8rem;
        margin-left: 50%
    }
    .middle_call h2 {
        font-size: 2.4rem;
        padding: 12%;
    }
    .solution_top {
        padding-top: 80px;  
    }
    .solution h3 {
        font-size: 2.4rem;
    }
    .solution h3 span {
        font-size: 3.6rem;
    }
     .solution ul {
        margin-left: 1rem;
    }
    .solution li {
        width: 30rem;
        margin: 1rem;
        padding: 1rem;
        font-size: 1.5rem;
    }

     .reviews_h2 {
        font-size: 2.4rem;
        padding: 3rem;
    }

    .problem {
        max-width: 645px;
        height: 60rem;
    }
    .problem h2 {
        font-size: 2.4rem;
        top: 55%;
        left: 5%;
    }
    .problem img {
        position: absolute;
        top: 65%;
        left: 10%;
        height: 25%;
    }

    .mixture_wrapper {
        width: 70%;
        height: 25rem;
    }
    .mixture p {
        font-size: 2.4rem;
        letter-spacing: 0.3em;
        padding-top: 3rem;
    }
    .double_arrow {
        top: 43%;
        width: 5rem;
        height: 5rem;
    }

    .component {
        background-image: url(img/bubble.png);
        height: 800px;
        background-position: center;
        background-size: cover;
    }
    .component_prescription {
        position: absolute;
        top: 35%;
        left: 38%;
        width: 23%;
        height: 23%;
    }
    .component_img_bottom p {
        font-size: 1.8rem;
    }
    .component img {
        width: 40%;
        height: auto;
    }
    .component_img_top {
        padding: 3rem;
        width: 50%;
        margin: 0 auto;
    }
    .component_text h3 {
        font-size: 2.4rem;
    } 
    .component_text span {
        font-size: 2.4rem;
    }

    footer {
        height: 20rem;
    }
    .footer_container img {
        width: 40%;
    }
    .sns_icons img {
        width: 6rem;
        height: 6rem;
        margin: 0 0.3rem;
    }
    .footer_text {
        font-size: 2.4rem;
        padding-bottom: 3rem;
    }
}
@media screen and (max-width: 500px) {
    
    .sale_now {
       font-size: 1.2rem;
        width: 18%;
        padding: 1.2rem 0 0 0.6rem;
    }
    .sale_now span {
        font-size: 2.2rem;
        position: relative;
        top: 0.5rem;
    }
    .new_sale {
        margin: 7% 2%;
        font-size: 1.8rem;
    }
    .sale_limit {
        font-size: 1.8rem;
        width: 20%;
        padding-top: 8px;
    }
    .usually_price {
        margin-left: 1.8rem;
        width: 28%;
    }
    .before_price {
        margin-left: 1rem;
        margin-top: 1rem;
        font-size: 1.4rem;
        width: 20%;
    }
    .before_price ::before {
        top: 28%;
    }
    .after_price_tax {
        font-size: 1.4rem;
        position: absolute;
        top: 16%;
        left: 63%;
    }
    .after_price_yen {
        font-size: 1.4rem;
        position: absolute;
        top: 45%;
        left: 68%;
    }
    .postage_free {
        margin-left: 40%;
    }
    .middle_call h2 {
        font-size: 2rem;
        padding: 12%;
    }

    .mixture_wrapper {
        width: 80%;
        height: 25rem;
        margin-top: 5rem;
        clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
    }
    .mixture p {
        font-size: 2.4rem;
        letter-spacing: 0.3em;
        padding-top: 5rem;
    }
    .double_arrow {
        top: 60%;
        width: 4rem;
        height: 6rem;
    }

    .component {
        background-image: url(img/bubble.png);
        height: 500px;
        background-position: center;
        background-size: cover;
    }
    .component_prescription {
        position: absolute;
        top: 38%;
        left: 38%;
        width: 23%;
        height: 23%;
    }
    .component_img_bottom p {
        font-size: 1.2rem;
    }
    .component img {
        width: 38%;
        height: auto;
    }
    .component_img_top {
        padding: 1rem;
        width: 45%;
        margin: 0 auto;
    }
    .component_text h3 {
        font-size: 1.8rem;
    } 
    .component_text span {
        font-size: 1.8rem;
    }

    .footer_container img {
        width: 38%;
    }
    .sns_icons img {
        width: 5rem;
        height: 5rem;
        margin: 0 0.3rem;
    }
}