@media only screen and (min-width: 500px) {
    body:before {
        content: "";
        display: block;
        width: 100vw;
        height: 100vh;
        background: url('/mewmeltcheek/images/pc/pc_bg.png') no-repeat center center;
        background-size: cover;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 1;
        transition: opacity 0.3s;
        z-index: -1;
    }
}

.rain_menu-content {
    background: linear-gradient(90deg, rgb(238 219 211) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
}

header img {
    width: 100%;
}

.rm_cheek_wrapper {
    width: 400px;
    overflow: hidden;
    display: block;
    background-size: cover;
    margin: 0 auto;
    background: #fff;
}

@media only screen and (max-width: 500px) {
    .rm_cheek_wrapper {
        margin: 0 auto;
        width: 100%;
        overflow: hidden;
    }
}

.rm_cheek_wrapper img {
    width: 100%;
}

button.rain_menu-icon {
    background: rgb(233 169 164);
}

/* Section: rm_head */
section.rm_head_cheek {
    position: relative;
    overflow: visible;
    z-index: 1;
    aspect-ratio: 1000 / 12305;
    width: 100%;
}

.rm_head_bg {
    position: absolute;
    left: 0%;
    top: 26.77%;
    width: 100%;
    z-index: 2;
}

.rm_head_main {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    z-index: 3;
}

.rm_head_item {
    position: absolute;
    left: 0%;
    top: 13.1%;
    width: 100%;
    z-index: 4;
}

.rm_head_title {
    position: absolute;
    left: 11.3%;
    top: 11.96%;
    width: 77.7%;
    z-index: 5;
    opacity: 0;
}

.rm_head_text {
    position: absolute;
    left: 21.7%;
    top: 14.08%;
    width: 58.4%;
    z-index: 6;
    opacity: 0;
}

.rm_head_light1 {
    position: absolute;
    left: 75%;
    top: 0.89%;
    width: 25%;
    z-index: 7;
}

.rm_head_light2 {
    position: absolute;
    left: 0%;
    top: 11.69%;
    width: 78.5%;
    z-index: 8;
}

.rm_head_light3 {
    position: absolute;
    left: 8.3%;
    top: 17.29%;
    width: 37.3%;
    z-index: 9;
}

.rm_head_lineup_bg {
    position: absolute;
    left: 3.8%;
    top: 23.42%;
    width: 92.5%;
    z-index: 10;
}

.rm_head_lineup_title {
    position: absolute;
    left: 20%;
    top: 23.71%;
    width: 60.3%;
    z-index: 11;
}

.rm_head_lineup_line {
    position: absolute;
    left: 50%;
    top: 25.8%;
    width: 0.1%;
    z-index: 12;
}

.rm_head_lineup_01item {
    position: absolute;
    left: 11.4%;
    top: 25.71%;
    width: 32.5%;
    z-index: 13;
}

.rm_head_lineup_02item {
    position: absolute;
    left: 56.8%;
    top: 25.71%;
    width: 32.5%;
    z-index: 14;
}

.rm_head_lineup_01color {
    position: absolute;
    left: 6.7%;
    top: 29.8%;
    width: 42.6%;
    z-index: 15;
}

.rm_head_lineup_02color {
    position: absolute;
    left: 50.8%;
    top: 29.8%;
    width: 42.6%;
    z-index: 16;
}

.rm_head_lineup_btn {
    position: absolute;
    left: 7%;
    top: 34.08%;
    width: 86.1%;
    z-index: 17;
}

.rm_head_detial_dicolor1 {
    position: absolute;
    left: 0%;
    top: 38.1%;
    width: 38%;
    z-index: 18;
}

.rm_head_detial_img1 {
    position: absolute;
    left: 15.4%;
    top: 37.08%;
    width: 84.6%;
    z-index: 19;
    overflow: hidden;
}

.rm_head_detial_vessel1 {
    position: absolute;
    left: 2.5%;
    top: 36.51%;
    width: 32.5%;
    z-index: 20;
}

.rm_head_detial_make1 {
    position: absolute;
    left: 3.9%;
    top: 45.68%;
    width: 60.9%;
    z-index: 21;
}

.rm_head_detial_text1 {
    position: absolute;
    left: 10.3%;
    top: 41.32%;
    width: 7.1%;
    z-index: 22;
}

.rm_head_detial_01title {
    position: absolute;
    left: 62.4%;
    top: 46.29%;
    width: 25.2%;
    z-index: 23;
}

.rm_head_detial_light1 {
    position: absolute;
    left: 3%;
    top: 40.66%;
    width: 32.5%;
    z-index: 24;
}

.rm_head_detial_dicolor2 {
    position: absolute;
    left: 70.8%;
    top: 50.3%;
    width: 29.2%;
    z-index: 25;
}

.rm_head_detial_img2 {
    position: absolute;
    left: 0%;
    top: 49.61%;
    width: 84.7%;
    z-index: 26;
    overflow: hidden;
}

.rm_head_detial_vessel2 {
    position: absolute;
    left: 69.8%;
    top: 48.79%;
    width: 30.2%;
    z-index: 27;
}

.rm_head_detial_make2 {
    position: absolute;
    left: 36.2%;
    top: 57.39%;
    width: 60.8%;
    z-index: 28;
}

.rm_head_detial_02title {
    position: absolute;
    left: 11.9%;
    top: 58.87%;
    width: 25.5%;
    z-index: 29;
}

.rm_head_detial_text2 {
    position: absolute;
    left: 82.6%;
    top: 52.84%;
    width: 7.1%;
    z-index: 30;
}

.rm_head_detial_light2 {
    position: absolute;
    left: 48.7%;
    top: 48.2%;
    width: 28.8%;
    z-index: 31;
}

.rm_head_detial_btn {
    position: absolute;
    left: 7%;
    top: 62.02%;
    width: 86.1%;
    z-index: 32;
}

.rm_head_point1_title {
    position: absolute;
    left: 10.4%;
    top: 64.7%;
    width: 79.1%;
    z-index: 33;
}

.rm_head_point1_maintext {
    position: absolute;
    left: 18.3%;
    top: 65.31%;
    width: 64.6%;
    z-index: 34;
}

.rm_head_point1_img {
    position: absolute;
    left: 0%;
    top: 66.87%;
    width: 99.9%;
    z-index: 35;
    overflow: hidden;
}

.rm_head_point1_foottext {
    position: absolute;
    left: 22.5%;
    top: 71.5%;
    width: 54.8%;
    z-index: 36;
}

.rm_head_point2_title {
    position: absolute;
    left: 10.4%;
    top: 73.14%;
    width: 79.1%;
    z-index: 37;
}

.rm_head_point2_maintext {
    position: absolute;
    left: 11.3%;
    top: 73.78%;
    width: 77.9%;
    z-index: 38;
}

.rm_head_point2_img {
    position: absolute;
    left: 10.4%;
    top: 75.36%;
    width: 78.8%;
    z-index: 39;
    overflow: hidden;
}

.rm_head_point2_foottext {
    position: absolute;
    left: 21%;
    top: 79.11%;
    width: 57.8%;
    z-index: 40;
}

.rm_head_point2_atten {
    position: absolute;
    left: 0%;
    top: 80.33%;
    width: 100%;
    z-index: 41;
}

.rm_head_point2_vessel {
    position: absolute;
    left: 0%;
    top: 79.2%;
    width: 24.5%;
    z-index: 42;
}

.rm_head_point3_title {
    position: absolute;
    left: 10.4%;
    top: 83%;
    width: 79.1%;
    z-index: 43;
}

.rm_head_point3_maintext {
    position: absolute;
    left: 17.2%;
    top: 83.6%;
    width: 65%;
    z-index: 44;
}

.rm_head_point3_compobg {
    position: absolute;
    left: 10.4%;
    top: 85.14%;
    width: 79.2%;
    z-index: 45;
}

.rm_head_point3_compoill {
    position: absolute;
    left: 21.3%;
    top: 85.55%;
    width: 54.8%;
    z-index: 46;
}

.rm_head_point3_plusone {
    position: absolute;
    left: 26.1%;
    top: 91.74%;
    width: 47.8%;
    z-index: 47;
}

.rm_head_point3_plusoneimg {
    position: absolute;
    left: 7.4%;
    top: 92.65%;
    width: 85.3%;
    z-index: 48;
    overflow: hidden;
}

.rm_head_point3_foottext {
    position: absolute;
    left: 22%;
    top: 97.42%;
    width: 55.9%;
    z-index: 49;
}

/* Section: rm_foot */
section.rm_foot_cheek {
    position: relative;
    overflow: visible;
    z-index: 1;
    aspect-ratio: 1000 / 1564;
    width: 100%;
}

.rm_foot_text {
    position: absolute;
    left: 10.5%;
    top: 4.99%;
    width: 75.3%;
    z-index: 3;
}

.rm_foot_01 {
    position: absolute;
    left: 10.8%;
    top: 20.72%;
    width: 36.9%;
    z-index: 4;
}

.rm_foot_02 {
    position: absolute;
    left: 53.1%;
    top: 20.72%;
    width: 36.8%;
    z-index: 5;
}

.rm_foot_btn {
    position: absolute;
    left: 7%;
    top: 69.37%;
    width: 86.1%;
    z-index: 6;
}

/* Section: rm_brand */
section.rm_cheek_brands {
    position: relative;
    overflow: visible;
    z-index: 1;
    aspect-ratio: 1000 / 3189;
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 210, 212, 1) 100%);
}

.rm_brand_cheek {
    position: absolute;
    left: 21.4%;
    top: 5.02%;
    width: 58%;
    z-index: 3;
}

.rm_brand_gloss {
    position: absolute;
    left: 21.4%;
    top: 18.12%;
    width: 58%;
    z-index: 4;
}

.rm_brand_rain {
    position: absolute;
    left: 28.8%;
    top: 29.63%;
    width: 44.2%;
    z-index: 5;
}

.rm_brand_amulet {
    position: absolute;
    left: 27%;
    top: 36.88%;
    width: 47.9%;
    z-index: 6;
}

.rm_brand_umbrella {
    position: absolute;
    left: 23.9%;
    top: 48.13%;
    width: 53.7%;
    z-index: 7;
}

.rm_brand_bath {
    position: absolute;
    left: 22.6%;
    top: 57.54%;
    width: 56.9%;
    z-index: 8;
}

.rm_brand_bodymist {
    position: absolute;
    left: 25.8%;
    top: 63.53%;
    width: 50.3%;
    z-index: 9;
}

.rm_brand_contact {
    position: absolute;
    left: 42.5%;
    top: 78.65%;
    width: 18.5%;
    z-index: 10;
}

.rm_brand_privacy {
    position: absolute;
    left: 35.7%;
    top: 82.47%;
    width: 32%;
    z-index: 11;
}

.rm_brand_company {
    position: absolute;
    left: 41.8%;
    top: 86.3%;
    width: 19.9%;
    z-index: 12;
}

.rm_brand_insta {
    position: absolute;
    left: 24.7%;
    top: 89.59%;
    width: 52.6%;
    z-index: 13;
}


[class*="light"] {
    mix-blend-mode: screen;
}

.rm_cheek_foot_bodymist_contents {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 69.3%;
    left: 21%;
    z-index: 55;
    transform: scale(0.8);
    color: #e5959e;
    font-family: "futura-pt", sans-serif;
}

.rm_cheek_foot_bodymist_contents a {
    color: #e5959e;
    text-decoration: none;
}

.rm_cheek_foot_copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0%;
    z-index: 9;
    color: #c05c6a;
    text-align: center;
    font-family: "century-gothic", sans-serif;
    letter-spacing: 1px;
    font-size: 10px;
    font-weight: bold;
    padding-bottom: 4%;
}


/* ==============================================
 * WaterDropEffect 共通スタイル
 * animations.js の [data-water-effect] 要素に必要なCSS。
 *
 * 【iOS Safari 修正ポイント】
 * will-change: transform を SVG filter 適用要素に設定すると
 * GPU合成レイヤーが先に確定し、後から適用する filter: url(#id) が
 * 無視される不具合が iOS Safari (全世代) で発生する。
 * JS側（animations.js）で iOS Safari 検出時に will-change: auto に
 * 上書きするため、CSS では opacity: 0 のみ設定する。
 * translateZ(0) も同様に合成レイヤー競合を引き起こすため削除。
 * ============================================== */

/* 画像ベースの水滴 (PNG/JPG/SVG 要素用) */
[data-water-effect] {
    opacity: 0;
}

/* クラス指定版（.water-drop-img を付与している場合） */
.water-drop-img {
    display: block;
    opacity: 0;
}

/* CSS生成ベースの水滴 (Pure CSS / .water-drop-css 要素用) */
.water-drop-css {
    width: 60px;
    height: 60px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow:
        inset 10px 10px 20px rgba(255, 255, 255, 0.15),
        inset -5px -10px 15px rgba(0, 0, 0, 0.2),
        inset 2px 2px 2px rgba(255, 255, 255, 0.8),
        5px 20px 30px rgba(0, 0, 0, 0.2);
    will-change: transform, opacity, border-radius;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    position: relative;
    z-index: 10;
    opacity: 0;
}

.water-drop-css::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 15%;
    height: 10%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    filter: blur(0.5px);
    transform: rotate(-45deg);
}

.water-drop-css::before {
    content: '';
    position: absolute;
    bottom: 15%;
    right: 15%;
    width: 10%;
    height: 5%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(1px);
    transform: rotate(-45deg);
}

/* Splashコンテナ用 */
.water-splash-container {
    width: 100%;
    height: 160px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
}

/* perfect-splash で自動生成されるパーツ */
.generated-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 80px;
    height: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    filter: blur(1px);
}

.generated-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 15;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}