@charset "utf-8";
/* CSS Document */

#contents { border:#DED2B8 solid 1px; background-color:#FFFDF4 }
.grayFrame2 { border:none; }
.grayFrame2 p { margin-left:0; margin-right:0;}
.grayFrame3 {  background-color:#E9E6D4; }
#contents>section {padding-right:20px; padding-left:20px;}
.wl_title { color:#8F4744; font-size:32px; font-family: 'Noto Serif JP', sans-serif; font-weight:bold;}

.wlrp .f_flex>div {margin-left:2.2%; margin-right:2.2%;}
.wlrp .f_flex-sp {display: flex; justify-content: flex-start;/*横*/ align-items: flex-start;/*縦*/ }
.wlrp .f_flex-sp img { margin-right:20px;}
.wlrp .mintyoutai {font-family: 'Noto Serif JP', sans-serif;}
ul.style001 li { background-color:#FFF;  border-radius: 8px; box-shadow: 2px 2px 4px rgba(0,0,0,0.1); margin-top:30px; padding:25px; text-align:left;}


.priceprice { background-image:url(/images/wl/whitelab_bg_price.png); padding:60px 20px;}
.gold { color:#B9B30E}

table.wltable th { padding:10px; background-color:#86A9D9; color:#FFF;}
table.wltable td {}

.f_1 { flex: 1;}

ol { text-align:left;}

.text_center>p { text-align:center;}

ul.list-check li  { background:url(/images/wl/25629040%206.png) no-repeat left top; padding-left:50px; padding-top:10px; margin-bottom:15px; text-align:left; min-height:35px;}

.wlrporder { background-color:#F05CA7;  border-radius: 8px; text-align:center; padding:30px; color:#FFF; width:96%; margin:30px auto;}
.wlrporder h2 {font-family: 'Noto Serif JP', sans-serif; font-size:30px; font-weight:bold;}

.wl_btn { color:#F05CA7; text-decoration:none; background-color:#FFF; width:250px; text-align:center; border-radius: 30px; cursor:pointer; padding: 10px 25px; font-weight: bold; display:block; margin-left:auto; margin-right:auto;}
.wl_btn:hover {opacity:0.8; color:#F05CA7}


.qawlrp dl { }
.qawlrp dt { background-image: url(/images/q.gif);  background-repeat: no-repeat; background-position: 10px 10px; padding:10px; padding-left:30px; margin-top: 10px; background-color: #EDDBD3; border-bottom-color: #CC9933; text-align:left;}
.qawlrp dd { background-image: url(/images/a.gif); background-repeat: no-repeat; background-position: 10px 0px;  padding-left:30px; margin-top: 10px; margin-bottom: 40px; text-align:left}

.whitebox { background-color:#FFF;  border-radius: 8px; box-shadow: 2px 2px 4px rgba(0,0,0,0.1); margin-top:30px; padding:25px; text-align:left;}

.bgrp-1 {background: linear-gradient(0deg, rgb(250, 243, 235), rgb(248, 230, 226));}
.pin20 { color: #EC4899; font-size:18px; text-align:center; font-weight:bold; font-family: 'Noto Serif JP', sans-serif; margin-bottom:20px;}
.pin20 img { position:relative; top:-8px;}

.f_reverse {flex-flow: row-reverse; }
.f_reverse>div, .f_reverse>li, .f_reverse>p {margin-left:2.2% !important; margin-right:2.2% !important;}
.f_reverse>div:first-child, .f_reverse>li:first-child , .f_reverse-sp>div:first-child, .f_reverse-sp>li:first-child { margin-right:0 !important; }
.f_reverse>div:last-child, .f_reverse>li:last-child , .f_reverse-sp>div:last-child, .f_reverse-sp>li:last-child {margin-left:0 !important}

dl.rpstyle001 {display: grid ; column-gap: 3.3%; grid-template-columns: 230px 1fr;}
dl.rpstyle001 dt { text-align:left; background-color:#A12E65; padding:10px; color:#FFF; font-weight:bold;margin-bottom:10px;}
dl.rpstyle001 dd { text-align:left; padding:10px; display:inline-block; margin-bottom:10px;}

.wlrp strong {background:linear-gradient(transparent 65%, #FFD9F2 65%);font-weight:bold; font-weight:normal;}
.text_left { text-align:left;}


   .comparison-table {overflow-x: auto; margin-top: 30px; }
        
        .tablerp {            width: 100%;            border-collapse: collapse;            background: white;            border-radius: 15px;            overflow: hidden;            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);        }
                .tablerp th,        .tablerp td {            padding: 15px;            text-align: left;            border-bottom: 1px solid #e0e0e0; font-weight:bold;}
                .tablerp th {            background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);            color: white;            font-weight: 600;        }
				.roma-pink-row {
            background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
            color: white;            font-weight: normal !important;        }
        
        .lip-art-row { font-weight: normal !important;
            background: #f8f9fa;
        }
.text_center-sp { text-align:center;}		
		
  @media (max-width: 768px) {
.wlrp br { display:none;}
.wlrp .text_center { text-align:left !important;}
.wl_title { font-size:26px; text-align:center}	  
.wlrp br.sp { display: inline-block;} 

dl.rpstyle001 {display: block ;}



 .tablerp {            width: 100%;            border-collapse: collapse; background: white;            border-radius: 15px;            overflow: hidden;            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);        }
 .tablerp th,.tablerp td { padding: 10px;  }
 .tablerp th {  background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);            color: white;            font-weight: 600;        }
.roma-pink-row {
            background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
            color: white;            font-weight: normal !important;        }
        
        .lip-art-row { font-weight: normal !important;
            background: #f8f9fa;
        }

.comparison-table {overflow-x: scroll;}
.tablerp {  width: 100%;  min-width: 600px;}

.pin20 img { position:relative; top:0px; }
.pin20 {  text-align:center !important;}
  }
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		      .tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
            gap: 10px;
        }

        .tab {
            padding: 12px 30px;
            font-size: 18px;
            font-weight: 500;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid #E68A9E;
        }

        .tab.active {
            background-color: #E68A9E;
            color: white;
        }

        .tab:not(.active) {
            background-color: white;
            color: #E68A9E;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .price-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
            border-radius: 10px;
            overflow: hidden; text-align:left;
        }

        .price-table th {
            background-color: #E68A9E;
            color: white;
            text-align: left;
            padding: 15px 20px;
            font-size: 18px;
        }

        .price-table td {
            padding: 15px 20px;
            font-size: 16px;
        }

        .price-table tr:nth-child(odd) {
            background-color: #FFF0F5;
        }

        .price-table tr:nth-child(even) {
            background-color: white;
        }

        .price-value {
            text-align: right;
            font-weight: bold;
            font-size: 18px;
        }

        .notes {
            background-color: #FFF0F5;
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
        }

        .notes-title {
            display: flex;
            align-items: center;
            color: #E68A9E;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .notes-title i {
            margin-right: 8px;
        }

        .notes ul {
            list-style: none;
            padding-left: 28px;
        }

        .notes li {
            position: relative;
            padding-left: 15px;
            margin-bottom: 8px;
            font-size: 14px;
            color: #666;
        }

        .notes li:before {
            content: "•";
            position: absolute;
            left: 0;
            color: #E68A9E;
        }

        .brand {
            text-align: center;
            margin-top: 40px;
        }

        .brand-name {
            font-size: 24px;
            font-weight: bold;
            color: #E68A9E;
        }

        @media (max-width: 768px) {
            .price-section {
                padding: 20px;
            }

            .section-title {
                font-size: 24px;
            }

            .tab {
                padding: 10px 20px;
                font-size: 15px;
            }

            .price-table th, .price-table td {
                padding: 12px 15px;
                font-size: 14px;
            }

            .price-value {
                font-size: 16px;
            }
        }