@charset "UTF-8";/**/
#info_contents { margin-bottom:0!important; }
.body_sph .contents_main { margin: 0; }
#melano { /*text-align: center; margin: 0 auto; padding-bottom:40px; background-color:#FFFBEA;*/ }

/* スペース調整 */
.mTB5 { margin: 5% 0; }
.mT5 { margin-top: 5%; }
.mB5 { margin-bottom: 5%; }
.mB10{ margin-bottom: 10%; }
.mT10 { margin-top: 10%; }

.pT5 { padding-top: 5%; }
.pB5 { padding-bottom: 5%; }

.body_pc .vce_btn img { width:70%; }
.body_sph .vce_btn { margin:0 10%; }

/*透過png配置 */
.nayamiArea, .lotinArea, .serumArea, .creamArea { position: relative; }
.nayami_o1, .nayami_o2, .lo_img, .lo_name, .lo_cart, 
.se_img, .se_name, .se_cart, .cr_img, .cr_name, .cr_cart { position: absolute; display: block; }

/* Area */
.nayami_o1 { top: 23.45%; left: 6.52%; }
.nayami_o2 { top: 79.89%; left: 8.33%; }
.nayami_o1 { width: 36.94%; height: 22.05%; }
.nayami_o2 { width: 83.33%; height: 19.56%; }

.lo_img { width: 130px; height: 460px; top: 5.99%; left: 73.75%; }
.lo_name { width: 450px; height: 40px; top: 78.07%; left: 9.02%; } 
.se_img { width: 120px; height: 400px; top: 15.05%; left: 74.58%; }
.se_name { width: 400px; height: 40px; top: 78.07%; left: 9.02%; } 
.cr_img { width: 200px; height: 160px; top: 50.29%; left: 65.41%; }
.cr_name { width: 420px; height: 40px; top: 78.07%; left: 9.02%; } 
.lo_cart, .se_cart, .cr_cart { width: 320px; height: 70px; top: 85.23%; left: 9.02%; } 

.body_sph .lo_img { width: 18.05%; height: 67.25%; }
.body_sph .lo_name { width: 62.5%; height: 5.84%; }
.body_sph .se_img { width: 16.66%; height: 58.47%; }
.body_sph .se_name { width: 55.55%; height: 5.84%; }
.body_sph .cr_img { width: 27.77%; height: 23.39%; }
.body_sph .cr_name { width: 58.33%; height: 5.84%; }
.body_sph .lo_cart, .body_sph .se_cart, .body_sph .cr_cart { width: 44.44%; height:10.23%; }

/* CPインクルード部分*/
.box_cp { border:2px solid #e40681; margin-bottom:5%; text-align:left; border-radius:1.3em; }
.body_sph .box_cp { border:2px solid #e40681;  margin:0 2% 5% 2%; border-radius:1em; }/**/
.box_cptit { /*margin-top:-13.5%;*/ }

.include01 li { /*background:#FFF; border-radius:10px;*/ }
.include01 li.firstChild { margin-top: 0; }
.include01 li.lastChild { border: none; }
.include01 .img_box { float: left; margin-bottom:0; }
.include01 .name { font-weight: normal; }
.include01 .copy { display:none; }
.include01 .btn { margin-top: 2%; text-align: right; }

/* PC表示 */
.body_pc .include01 li { margin: 0 25px 25px 25px; text-align: center; }
.body_pc .box_step .include01 li { margin: 20px 25px 0 25px; padding-bottom: 20px; }
.body_pc .include01 .txt_box { text-align:left; }
.body_pc .include01 .name_box { font-size:130%; }
.body_pc .include01 .price_box { font-size:140%; }
.body_pc .include01 .r_img { width: 200px; margin-right:15px; }
.body_pc .include01 .name { font-weight:normal; }
.body_pc .include01 .btn img { width: 280px; }
.body_pc .include01 .icon_box { font-size:1.3em; }
body.body_pc #melano .goods_set .btn img { width:40%; }

/* SP表示 */
.body_sph .include01 li { margin: 0 4% 3% 4%; }
.body_sph .box_step .include01 li { margin:5%; }
.body_sph .include01 .txt_box { /*margin-left: 30%;*/ text-align:left; }
.body_sph .include01 .name_box { font-size:70%; }
.body_sph .include01 .price_box { font-size:80%; }
.body_sph .include01 .r_img { width:; }
.body_sph .include01 .img_box { margin-right:8px; width:30%; }
.body_sph .include01 .goods_set .btn { margin-top:10px; }
body.body_sph .include01 .btn img {
min-width:; width:60%; height:auto; }


/* シリーズインクルード部分 */
/*.body_pc .line_item .l_img { height: 200px; width: auto; margin: 10px 0; }
.body_sph .line_item .l_img { height: 8.5em; width: 30%; float: left; margin: 0 2%; }*/
    
.line_item { background:#ffffff/*#fbecf3*/; }
.body_pc .line_item { /*上にタイトル入れるときは要　padding-top:2%;*/ }
.body_pc .line_item .icon_box { text-align:center; }
/*.line_item .img_box { display: none; }*/
.body_pc .line_item ul { /*背景色入れて余白とるときは要　padding: 1% 2%;*/ }
.body_sph .line_item ul { /*上にタイトル入れるときは要　padding-top: 3%*/; }
.body_pc .line_item .display_hybrid li { width: 33.3%; margin-bottom: 1.5em; }
.body_sph .line_item .display_hybrid li { padding:3% 2%; border-bottom: 1px solid #dddddd; }
.body_sph .line_item .display_hybrid li:nth-last-child(1) { padding:3% 2%; border-bottom: none; }
.body_pc .line_item .display_hybrid goods_set { margin: 0.5em 1.5em 1.5em 1.5em; }
.body_sph .line_item .display_hybrid .txt_box { font-size:95%; }
.body_sph .line_item .display_hybrid .name { font-weight:normal; }
.body_pc .line_item .display_hybrid .name { font-size:1.3em; }
.body_pc #melano .line_item .display_hybrid .goods_set .btn img { width:165px; padding-top:8px; }

.body_pc .bihaku { margin: 5% 0; }
.body_sph .bihaku { margin: 5% 2%; }

/* 動画部分 
.movie_box { margin-bottom:0%; }*/


/* 動き */
/*translateX(-50px)  X軸（左横に）方向に50px */
/*translateY(50px)  Y軸（上縦に）方向に50px */
/*translateY(-50px)  Y軸（下縦に）方向に50px */

/* ふわっとアニメ */
/* 動作を適用する箇所 */
.fuwatAnime { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:2s; /* アニメ時間 */
-ms-animation-duration:2s; 
animation-duration:2s; 
-webkit-transition-delay: 0.5s;/* 開始時間 */
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
-webkit-animation-name: fuwatAnime; /* アニメ名 */
-ms-animation-name: fuwatAnime; 
animation-name: fuwatAnime; visibility: visible !important; }

.fuwatAnime2 { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:2.5s; /* アニメ時間 */
-ms-animation-duration:2.5s; 
animation-duration:2.5s; 
-webkit-transition-delay: 1.5s;/* 開始時間 */
-ms-transition-delay: 1.5s;
transition-delay: 1.5s;
-webkit-animation-name: fuwatAnime2; /* アニメ名 */
-ms-animation-name: fuwatAnime2; 
animation-name: fuwatAnime2; visibility: visible !important; }

.fadeIn_r_Anime { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:1.5s; /* アニメ時間 */
-ms-animation-duration:1.5s; 
animation-duration:1.5s; 
-webkit-transition-delay: 0.0s;/* 開始時間 */
-ms-transition-delay: 0.0s;
transition-delay: 0.0s;
-webkit-animation-name: fadeIn_r_Anime; /* アニメ名 */
-ms-animation-name: fadeIn_r_Anime; 
animation-name: fadeIn_r_Anime; visibility: visible !important; }

.fadeIn_l_Anime { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:1.5s; /* アニメ時間 */
-ms-animation-duration:1.5s; 
animation-duration:1.5s; 
-webkit-transition-delay: 0.0s;/* 開始時間 */
-ms-transition-delay: 0.0s;
transition-delay: 0.0s;
-webkit-animation-name: fadeIn_l_Anime; /* アニメ名 */
-ms-animation-name: fadeIn_l_Anime; 
animation-name: fadeIn_l_Anime; visibility: visible !important; }

.fadeIn_ru_Anime { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:1.5s; /* アニメ時間 */
-ms-animation-duration:1.5s; 
animation-duration:1.5s; 
-webkit-transition-delay: -0.5s;/* 開始時間 */
-ms-transition-delay: -0.5s;
transition-delay: -0.5s;
-webkit-animation-name: fadeIn_ru_Anime; /* アニメ名 */
-ms-animation-name: fadeIn_ru_Anime; 
animation-name: fadeIn_ru_Anime; visibility: visible !important; }

.fadeIn_lu_Anime { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:1.5s; /* アニメ時間 */
-ms-animation-duration:1.5s; 
animation-duration:1.5s; 
-webkit-transition-delay: -0.5s;/* 開始時間 */
-ms-transition-delay: -0.5s;
transition-delay: -0.5s;
-webkit-animation-name: fadeIn_lu_Anime; /* アニメ名 */
-ms-animation-name: fadeIn_lu_Anime; 
animation-name: fadeIn_lu_Anime; visibility: visible !important; }

/* 動作内容 */
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-200px);  }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-webkit-keyframes fuwatAnime2 {
 0% { opacity: 0; -webkit-transform: translateY(-200px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
/*大から実寸にフェードイン@-webkit-keyframes fuwatAnime2 {
 0% { opacity: 0; -webkit-transform: translateY(0) scale(0.5); }
 70% { opacity: 1; -webkit-transform: translateY(0) scale(1.2); }
 100% { opacity: 1; -webkit-transform: translateY(0) scale(1.0); }
}*/
@-webkit-keyframes fadeIn_r_Anime {
 0% { opacity: 0; -webkit-transform: translateX(300px); }
 100% { opacity: 1; -webkit-transform: translateX(0); width:720px; }
}
@-webkit-keyframes fadeIn_l_Anime {
 0% { opacity: 0; -webkit-transform: translateX(-300px); }
 100% { opacity: 1; -webkit-transform: translateX(0); width:720px; }
}
@-webkit-keyframes fadeIn_ru_Anime {
 0% { opacity: 0; -webkit-transform: translateX(300px) translateY(200px); }
 100% { opacity: 1; -webkit-transform: translateX(0); width:720px; }
}
@-webkit-keyframes fadeIn_lu_Anime {
 0% { opacity: 0; -webkit-transform: translateX(-300px) translateY(200px); }
 100% { opacity: 1; -webkit-transform: translateX(0); width:720px; }
}


@keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-150px); -ms-transform: translateY(-200px); transform: translateY(-200px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
@keyframes fuwatAnime2 {
 0% { opacity: 0; -webkit-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/*大から実寸にフェードイン@keyframes fuwatAnime2 {
 0% { opacity: 0; -webkit-transform: translateY(0) scale(0.5); -ms-transform: translateY(0) scale(0.5); transform: translateY(0) scale(0.5); }
 70% { opacity: 1; -webkit-transform: translateY(0) scale(1.2); -ms-transform: translateY(0) scale(1.2); transform: translateY(0) scale(1.2); }
 100% { opacity: 1; -webkit-transform: translateY(0) scale(1.0); -ms-transform: translateY(0) scale(1.0); transform: translateY(0) scale(1.0); }
}*/
@keyframes fadeIn_r_Anime {
 0% { opacity: 0.5;/* 透明 */ -webkit-transform: translateX(300px) ; -ms-transform: translateX(300px); transform: translateX(300px);/*X軸（右横に）方向に300px */}
100% { opacity: 1;/* 不透明 */ -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); width: ; }
}
@keyframes fadeIn_l_Anime{
 0% { opacity: 0.5; -webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); transform: translateX(-300px);}
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); width: ; }
}
@keyframes fadeIn_ru_Anime {
 0% { opacity: 0.5; -webkit-transform: translateX(300px) translateY(200px); -ms-transform: translateX(300px) translateY(200px); transform: translateX(300px) translateY(200px);}
100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); width: ; }
}
@keyframes fadeIn_lu_Anime{
 0% { opacity: 0.5; -webkit-transform: translateX(-300px) translateY(200px); -ms-transform: translateX(-300px) translateY(200px); transform: translateX(-300px) translateY(200px);}
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); width: ; }
}


.body_pc .kaiyuu { /*display:none;*/ margin:5% 0; }
.body_sph .kaiyuu { margin:5% 2%; }/**/

/* 追加部分　スポットショット追加時 202508 */
.line_item{
    width: 80%;
    margin: 0 auto;
}
.pB5 {
    padding-bottom: 2%;
}
#melano{
    margin-bottom: 10%;
}
#melano .spec-wrapper{
    margin-top: -5%;
    margin-bottom: 10%;
}

/* 商品インクルード */


/* ラインナップ */

#melano .display_matrix{
    display: flex;
    flex-direction: row;
    margin: 3% 6%;
    justify-content: space-between;
}
#melano .display_matrix li{
    width: 30%;
    margin: 2%;
    padding-bottom: 5%;
}

#melano .btn {
    width: 100%;
    margin-left: auto;
    margin-top: 1em;
    background-color: #fff;
    position: relative;
    transition: 0.2s;
    border: 1px solid #333;
    border-radius: 30px;
}
#melano .btn:hover {
    opacity: 0.7;
}
#melano .btn p{
    margin-bottom: 0;
    color: #333;
    text-align: center;
    padding: 4% 20% 5% 4%;
    font-size: 1.1em;
    font-weight: 500;
}

#melano .btn p::after {
    content: '\e96a';
    font-size: 1.5em;
    position: absolute;
    top: 8%;
    right: 5%;
    -webkit-text-stroke: 0.5px #f2f3fb;
}
#melano #series .btn{
    width: 70%;
    margin: 0 auto;
    background-color: #f2f3fb;
    position: relative;
    transition: 0.2s;
    border: 1px solid #333;
    border-radius: 50px;
}
#melano #series .btn p{
    margin-bottom: 0;
    color: #333;
    text-align: center;
    padding: 2% 15% 3% 4%;
    font-size: 1.0em;
    font-weight: 400;
}
#melano #series .btn p::after {
    content: '\e96a';
    font-size: 1.5em;
    position: absolute;
    top: 7%;
    right: 25%;
    -webkit-text-stroke: 2px #f2f3fb;
}
#melano #series .price_box{margin-bottom: 3%;}
.c-panel__desc.copy {
    display: none;
}

#melano .c-panel__desc{
	display: none;
}

@media screen and (max-width: 768px) {
.line_item{
    width: 90%;
}
}




@media print, screen and (min-width: 768px) {
    #melano {
        width: 720px;
        margin: 0 auto;
    }
}

/* 画像位置調整 */
.c-panel__link {
  display: inline-flex;
}
 
/* 商品名、受取方法、価格 */
.c-panel__body {
  place-content: center;
  place-items: start;
}
 
/* 価格色調整 */
.c-panel__price-wrapper {
  color: #f30;
  margin: 0 auto;
  margin-top: 16px;
}
 
/* ボタン調整 */
.c-panel__action .btn {
  width: 100%;
}

.c-panel__header {
    flex: 0.8;
    padding-right: 3%;
}

/* オリジナル-------------------------*/

/* inculude使用時のボタン、画像、商品名調整 */
.sample_view .c-panel__header img { 
        max-width: 100%;
        max-height: 100%;
	margin-bottom: auto;
}
.sample_view .c-panel__name {
    margin: auto;
	font-size: 80%;
    text-decoration: underline;
	height: 30px;
    text-align: center;
}

.sample_view .btn-primary {
    color: #333;
}


/* パネル削除 */
.clear_badge .sample_view .c-panel__badge{
  display: none;
}


/* inculude使用時の値段表示だけしたい場合（class名.clear_headerで囲む必要有） */
/* パネル削除 */
.clear_header .sample_view .c-panel__badge{
  display: none;
}



/* パネル削除 */
.clear_header .sample_view .c-panel__badge{
  display: none;
}
/* 商品名削除 */
.clear_header .sample_view .c-panel__name{
  display: none;
}
/* イメージ画像削除 */
.clear_header .sample_view .c-panel__header img{
  display: none;
}
/* ボタン削除 */
.clear_header .sample_view .c-panel__action{
  display: none;
}
/* 受け取り場所の表示削除 */
.clear_header .sample_view .c-panel__badge{
  display: none;
}
/* 値段を赤文字にして真ん中に配置 */
.clear_header .sample_view .c-price{
	text-align: center;
	font-size: 100%;
	color: #FF3300;
	white-space: nowrap;
}
/* 位置調整 */
.clear_header .sample_view .c-panel__body {
    display: flex;
    flex-direction: column;
}

/* 画像調整 */
.revival_header .sample_view .c-panel__link{
	display: block !important;
	justify-content: center;
}
.c-panel__action{
    margin-top: -5px;
}



/*========= スマホはこっち ===============*/
@media screen and (max-width:768px){
    #melano .spec-wrapper{
        font-size: 0.8em;
    }
.spec-wrapper p {
  margin-top: 2.2em;
}

    
#melano a.cp_link {height: 60px;}
    /* BASE */
    .pB3{padding-bottom: 5%;}
    .pB7{padding-bottom: 5%;}
    .w60{width: 60%;}
    .w85{width: 85%;}
    p.attention{font-size: 0.6em;}
    #melano h3 {font-size: 1.0em;}
    #melano .display_matrix {margin: 3% 2%;}
    #melano .display_matrix li {margin: 1%; flex: 1;}
    #melano section#lineup .cp_box{font-size: 0.6em;}
    #melano section#lineup .tax{font-size: 0.6em;}
    #melano .btn p{font-size: 0.7em;}
    #melano #lineup .name_box{font-size: 0.7em;}
    #melano section#satisfaction a img.satisfaction__absolute {bottom: 10%; width: 40%;}
    #melano section#satisfaction p.satisfaction__absolute {bottom: -1%;font-size: 0.8em;}
    #melano section#yellow h2{font-size: 1em;}
    #melano section#yellow h2 span{font-size: 2em;}
    #melano section#yellow .yellow__wapper{padding: 13% 3% 0;}
    #melano section#yellow p:first-of-type{font-size: 0.9em;}
    #melano section#series h3{font-size: 1.0em;}
    #melano #series .price_box{font-size: 0.7em;}
    #melano .btn {width: 100%; margin-top: 0.5em;}
    #melano #series .btn p{font-size: 0.65em;}
    #melano #series .btn p::after{top: -3%;right: 6%; -webkit-text-stroke: 2px #f2f3fb;}
    #melano #series .series__o > div{transform: translate(-50%, 10%);}
    #melano #series .series__o > div h3 {font-size:0.8em;margin: 0;}
    #melano #series #cotton .name{font-size: 1.0em;}
    #melano #series #cotton .copy{font-size: 0.7em;}
    #melano #series #cotton .price2{font-size: 1em;}
    #melano #series #cotton .btn p::after {top: 4%;right: 2%;-webkit-text-stroke: 1px #f2f3fb;}
    #melano #series #cotton .btn {width: 50%; margin-top: 0;}

    .c-panel__price-wrapper {
    margin-top: 3px;
    }
    .clear_header .sample_view .c-price{
	font-size: 1.4rem;
    }
    .sample_view .c-panel__name {
        font-size: 100%;
        height: 15px;
    }
    .c-panel__action{
        height: 10px;
        margin-top: 3px !important;
    }
    #melano .btn{
        font-size: 0.8em;
    }
    .chousei .c-panel__price-wrapper{
        margin-top: 3px !important;
    }
}