@charset "utf-8";
/*Reset*/
html,body,h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd{
margin: 0;
padding: 0;
line-height: 1;
font-family: "Hiragino Kaku Gothic ProN",Meiryo, sans-serif;
color: #333;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
img{
border: none;
vertical-align: bottom;
max-width: 100%;
}

/*共通css*/
.container{
max-width:960px;
margin:0 auto;
padding: 0 10px;
}

/*Header*/
header.container{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 10px;
}
header.container>div:first-child{
width:360px;
}
h1{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.title{
margin-top: -30px;
font-size: 300%;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 4px;
}
.title span{
color:  #0082e7
}
.co{
font-weight: bold;
font-size: 18px;
letter-spacing: 26px;
margin-bottom: 5px;
}
header div:first-child p:last-of-type{
line-height: 1.3;
}
header div:last-child{
text-align: right;
}
.tel{
display: inline;
font-size: 300%;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 1px;
font-weight: bold;
border:2px solid #0082e7;
border-radius: 10px;
background:url(../img/phone.svg) no-repeat left 10px center/50px;
padding: 10px 10px 10px 65px;
}
.add{
font-size: 18px;
margin-top: 20px;
}

/*------Navigation------*/
/*Top*/
.pcnav ul{
display: flex;
justify-content: center;
background:#0082e7;
}
.pcnav li{
/*width:130px;*/
color:#fff;
/*line-height: 44px;*/
text-align: center;
font-weight: bold;
}
.pcnav a{
display: block;
font-size: 14px;
padding: 1em 5px;
}
.pcnav a:hover{
background:#f5a;
}
.pcnav img{
vertical-align:sub;
}

/* hover img */
.pcnav li{
position: relative;
}
.pcnav span{
position:absolute;
width: 150%;
top: 100%;
left: 0;
color: #7c0101;
background:rgba(255, 255, 255, 1);
text-align: left;
line-height: 1.3;
padding: 10px;
opacity: 0;
transition: 300ms;
}
.pcnav span img{
width:80px;
display: block;
margin: 0 auto 10px;
}
.pcnav a:hover span{
opacity: 1;
}

/*Sp nav*/
.spnav{
position: fixed;
z-index: 99999;
width: 100%;
top:57px;
height: calc(60vh - 57px);
display: none;
}
.spnav ul{
display: flex;
flex-wrap: wrap;
}
.spnav li{
text-align: center;
font-size: 100%;
width:50%;
line-height: calc((150vh - 57px)/9);
font-weight: bold;
color: #fff;
border-bottom: 1px solid #fff;
}
.spnav img{
vertical-align: middle
}
.spnav a{
display: block;
background: rgba(100,150,255,0.8)
}

/*Topへ戻る*/
.top{
color: #fff;
background:#f5a;
font-weight: bold;
box-sizing: border-box;
width:50px;
height: 50px;
padding-top: 17px;
text-align: center;
border-radius: 50%;
position: fixed;
right:5px;
bottom: 5px;
cursor: pointer;
}
/*Sp Btn*/
.btn{
width:50px;
height: 50px;
background:rgba(255,255,255,0.8);
border:1px solid #0082e7;
border-radius: 5px;
position: fixed;
top:5px;
right: 5px;
display: none;
}
.btn span{
display: block;
width:35px;
height: 3px;
background:#0082e7;
border-radius: 3px;
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.btn span::before, .btn span::after{
content: "";
display: block;
width:35px;
height: 3px;
background:#0082e7;
border-radius: 3px;
}
.btn span::before{
margin-top: -10px;
}
.btn span::after{
margin-top: 17px;
}

/*---------- ロースブルガスカ -----------*/
.title span{
color: #eb00b6;
}
.tel{
background-image: url(../img/rose-phone.png);
border-color: #eb00b6;
}
.pcnav ul{
background: #eb00b6;
}
.pcnav a:hover{
background:#a0a;
}


/* キービジュアル */
.keyVis2{
padding-bottom:20px ;
text-align: right;
background:url(../img/rose-keyvis.jpg) no-repeat center top/cover ;
margin-bottom: 5px;
}
.keyVis2 .drink{
margin-bottom: 10px;
}
.keyVis2 h2{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-weight: 300;
margin-bottom: 20px;
}
.keyVis2 .name{
color: #fee;
font-size: 1.8em;
padding: 10px 10px 10px 45px;
letter-spacing: 5px;
border: 1px solid #fee;
border-radius: 10px;
background: rgba(100,0,0,0.4) url(../img/rose-logo.png) no-repeat 10px center/35px auto;
margin-bottom: 20px;
}
.keyVis2 .damas{
color: #fee;
text-shadow: 0 0 15px #7c0101,0 0 15px #7c0101,0 0 15px #7c0101;
font-size: 1.8em;
line-height: 1.3;
}
.keyVis2 .rose-logo{
width:25%;
padding:5px 50px 5px 0;
}
.keyVis2 .syohin{
width:17%;
}
/* お悩み */
.titleBox{
border-bottom: 10px solid #ffd1fc;
}
.problem{
padding: 100px 0;
}
.problem h2, .answer h2,.botanicle h2,.damask h2,.qa h2,.rosabul h2{
font-size: 5em;
font-family: 'M PLUS Rounded 1c', sans-serif;
color:#fff;
text-shadow: 0 0 2px #eb00b6,0 0 2px #eb00b6,0 0 2px #eb00b6;
letter-spacing: 5px;
border-bottom: 10px solid #ffd1fc;
line-height: 0.8;
margin-bottom: -10px;
}
.titleBox>.container{
position: relative;
}
.titleBox>.container img{
position: absolute;
right:calc(100% + 20px);
bottom: 10px;
}
/* 共通 */
.info p,.damask .keyvis p{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
}
.nayami{
font-size: 3em;
color: #af0094;
margin: 50px 0;
}
.nayami>span{
font-size: 1.5em;
color: #fd0404;
}
.nayamiBox img{
display: block;
margin:0 auto;
}
.nayamiBox img:first-of-type{
margin-bottom: 30px;
}

/* Answer */
.answerBox{
padding: 100px 0;
background: #ffecff;
}
.answerBox p,.answerBox li, .botanicle .container p{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-size: 2.5em;
color: #af0094;
line-height: 1.3;
}
.answerBox p span{
color:#fff;
text-shadow: 0 0 3px #9d0174, 0 0 3px #9d0174, 0 0 3px #9d0174,0 0 3px #9d0174,0 0 3px #9d0174,0 0 3px #9d0174,0 0 3px #9d0174;
font-size: 2.5em;
line-height: 1.6;
}
.answerBox .container{
background: url(../img/answer-img.jpg) no-repeat right top;
}
.powerBox{
background:#fff;
padding: 3em;
border: 3px solid #af0094;
border-radius: 10px;
margin: 4em 0;
}
.powerBox ul{
margin-top: 3em;
padding-left: 6em;
}
.powerBox li{
background: url(../img/mark.gif) no-repeat left center;
padding-left: 1.3em;
}
.answerBox .start{
padding-left: 35%;
background:url(../img/start-bg.png) no-repeat left center/55% auto;
text-shadow: 0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff;
}
.try{
display: block;
margin:50px auto;
}

/* ボタニカルエキス */
.botanicle .titleBox{
background: #ffecff;
}
.botanicle>.container{
padding: 5em 0;
}
.botanicle .copy{
text-align: center;
padding: 1em;
margin-bottom: 2em;
border: 3px solid #af0094;
border-radius: 10px;
background:linear-gradient(to bottom,#fff,#ffecff);
text-shadow: 0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff;
}
.botanicle .copy span{
font-size:1.5em;
}
.exBox>section{
display: flex;
justify-content: space-between;
margin-bottom: 2em;
}
.exBox>section>div{
width:52%;
margin-bottom: 1em;
}
.exBox>section>p{
width:45%;
}
.exBox h3{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-size: 2em;
color: #af0094;
border-bottom:3px solid #af0094;
margin-bottom: 0.5em;
}
.botanicle .container .exBox-p{
font-size: 1.5em;
color: #555;
margin-bottom: 1em;
}
.botanicle .exBox ul{
padding-left: 3em;
font-size: 1.4em;
}
.botanicle .exBox li{
list-style: disc;
color: #af0094;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
margin-bottom: 5px;
}
.botanicle .container .free{
color: #af0094;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
text-align: center;
font-size: 3em;
font-weight: 200;
border: 2px solid #af0094;
border-radius: 10px;
padding: 0.5em 0;
background:linear-gradient(to bottom,#fff,#f5cdf5);
text-shadow: 0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff;
margin: 2em 0 1em;
}
.botanicle .mutenka{
text-align: center;
}
.botanicle .mutenka2{
text-align: center;
margin: 1em 0 2em;
}

/* ダマスクローズ */
.damask p{
color: #af0094;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
}
.damask .keyvis{
background: url(../img/damask.jpg) no-repeat top center/cover;
}
.damask .keyvis p{
font-size:4em;
color: #fef;
line-height: 1.5;
padding: 1em 0 2em;
text-shadow: 0 0 6px #82013b,0 0 6px #82013b,0 0 6px #82013b,0 0 6px #82013b;
}
.damask-content{
background: #ffecff;
padding: 4em 0 0;
}
.damask-content>.container>div{
display: flex;
justify-content: space-between;
margin-bottom: 3em;
}
.damask-content>.container>div:last-child{
margin-bottom: 5em;
}
.damask-content>.container>div>p:first-child{
width:55%;
}
.damask-content>.container>div>p:first-child{
box-sizing: border-box;
line-height: 1.5;
font-size: 1.7em;
/*padding-top: 1em;*/
}
.damask-content>.container>div:first-child>p:first-child{
background:#fff;
line-height: 2;
text-align: center;
font-size: 2em;
padding-top: 1em;
border: 1px solid #af0094;
border-radius: 10px;
}
.damask-content>.container>div>p:last-child{
width:41%;
box-shadow: 3px 3px 10px #a5a;
}
.damask-content>.container>div:nth-child(3) p{
line-height: 1.3;
}
.damask-content>.container>div span{
font-size: 2.5em;
}
.damask-content .try{
margin-bottom: 10em;
}

/* User's Voice */
.voice{
padding: 6em 0;
}
.voice >h2,.qa h3,.rosabul h3{
text-align: center;
color: #af0094;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-size: 4em;
font-weight: lighter;
border: 1px solid #eb00b6;
padding: 1em 0;
background:linear-gradient(to bottom,#fff,#f5cdf5);
text-shadow: 0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff,0 0 6px #fff;
margin-bottom: 1em;
}
.voice dl{
margin-bottom: 3em;
}
.voice dt,.voice dd{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-size: 2em;
line-height: 1.4;
color: #af0094;
border: 1px solid #eb00b6;
padding: 0.4em 1em;
}
.voice dt{
text-align: center;
width:25%;
border-bottom: none;
border-radius: 20px 20px 0 0;
}

/* Q & A */
.qa{
background: #ffecff;
}
.qa .titleBox{
background: #fff;
}
.qa>.container{
padding: 6em 0;
}
.qa h3+p{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-size: 1.5em;
color: #af0094;
margin-bottom: 1em;
text-align: center;
}
.qa dl{
margin-bottom: 4em;
}
.qa dl>div{
border: 1px solid #eb00b6;
border-radius: 5px;
padding: 2em 2em 1em;
background: #fff;
margin-bottom: 1em;
}
.qa dt,.qa dd{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-size: 2em;
font-weight: bold;
color: #af0094;
}
.qa dt{
margin-bottom: 0.4em;
cursor: pointer;
}
.qa dd{
font-weight: normal;
line-height: 1.2;
text-indent: -1em;
padding-left: 1em;
}

/* Rosa Bulgarska */
.rosabul{
padding: 6em 0;
}
.rosabul h3{
font-size: 2.5em;
margin-top: 1em;
padding-top: 0.6em;
padding-bottom: 0.6em;
}
.rosabul h3>span{
margin-top: 1em;
padding-top: 0.6em;
padding-bottom: 0.6em;
}
.rosabul h3+img{
display: block;
margin: 0 auto 4em;
}
.rosabul dl{
border: 1px solid #aaa;
padding: 2em;
}
.rosabul dt{
float: left;
}
.rosabul dl dt:nth-of-type(4){
float: none;
margin-bottom: 0;
}
.rosabul dt,.rosabul dd{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-size: 2em;
color: #af0094;
margin-bottom: 0.5em;
line-height: 1.4;
}
.rosabul dd{
padding-left: 5em;
}

/*共通おすすめ商品*/
.reco>section{
padding: 50px 0;
}
.reco>p:first-of-type{
line-height: 1.4;
margin:5px 0 ;
}
.reco>p:first-of-type a{
color: #00f;
text-decoration: underline;
}
.reco h2{
width: 6em;
margin: 0 auto 4em;
position: relative;
}
.reco h2::before{
content: "";
display: block;
width: 60%;
height: 2px;
background:#af0094;
position: absolute;
left: -0.3em;
top:-0.3em;
}
.reco h2::after{
content: "";
display: block;
width: 60%;
height: 2px;
background:#af0094;
position: absolute;
bottom: -0.3em;
right: -0.3em;
}
.reco h3{
text-align: center;
margin-bottom: 10px;
font-size: 130%;
color: #0082e7;
}
.recoBox{
display: flex;
justify-content: left;
flex-wrap: wrap;
}
.recoBox>section{
box-sizing: border-box;
width: 25%;
padding: 0 0.8em;
margin-bottom: 1em;
}
.reco img{
object-fit: contain;
height: 210px;
display: block;
margin:0 auto  20px;
}
.recoBox p:last-of-type{
line-height: 1.3;
}
/*チェックボタン*/
.check{
width:80%;
text-align: center;
margin:20px auto;
color: #fff;
background:#0082e7;
padding: 15px  0;
border-radius: 5px;
font-weight: bold;
box-shadow: 1px 1px 1px #000;
}

/*共通Footer*/
footer{
border-top: 1px solid #aaa;
padding: 30px 0;
text-align: center;
}
footer p:first-child{
font-family: 'Roboto Condensed', sans-serif;
font-size: 150%;
letter-spacing: 1px;
margin-bottom: 10px;
}
footer span{
color:  #0082e7;
}

/*----------- メディアクエリ---------- */
@media screen and (max-width:768px){
/*共通Header*/
header.container{
display: block;
text-align: center;
padding:20px 0 0;
}
header.container>div:first-child{
width:auto;
}
.co{
margin-bottom: 10px;
}
header div:first-child p:last-of-type{
display: none;
}
header div:last-child{
background:#eb00b6;
}
.tel{
display: block;
color: #fff;
width:7em;
margin:0 auto;
padding-left:45px;
background:#eb00b6 url(../img/phone-white.svg) no-repeat left 10px center/50px;
}
.add{
display: none;
}
.pcnav{
display: none;
}
.btn{
display: block;
}

/* キービジュアル */
.keyVis{
text-align: center;
}
.keyVis .drink{
width:300px;
}
.keyVis h2{
width: 300px;
margin: 0 auto 20px;
font-size: 0.7em;
}
.keyVis .name{
background-size: 20px auto;
}
.keyVis .damas{
font-size: 1em;
}
.keyVis .rose-logo{
display: none;
}

/* お悩み */
.problem{
padding: 30px 0;
}
.problem h2, .answer h2,.botanicle h2,.damask h2,.qa h2,.rosabul h2{
font-size: 3em;
display: inline-block;
/**/
}
.titleBox>.container{
text-align: center;
}
.titleBox>.container img{
position: static;
width:20%;
}


.nayami{
font-size: 1.5em;
color: #af0094;
margin: 20px 0;
}

/* Answer */
.answerBox{
padding: 30px 0;
}
.answerBox p,.answerBox li, .botanicle .container p{
font-size: 1.5em;
color: #af0094;
text-align: center;
}
.answerBox p span{
font-size:  1.5em;
line-height: 1.3;
}
.answerBox .container{
background: none;
}
.powerBox{
padding: 1em;
border: 1px solid #af0094;
margin: 2em 0;
}
.powerBox ul{
margin-top: 1em;
padding-left: 4em;
}
.powerBox li{
text-align: left;
padding-left: 2em;
}
.answerBox .start{
padding: 0;
}
.try{
display: block;
margin:20px auto;
}

/* ボタニカルエキス */
.botanicle>.container{
padding:2em 0;
}
.botanicle .copy{
border-width: 1px;
text-align: center;
}
.botanicle>.container p.exBox-p{
text-align: left;
}
.exBox>section{
display: block;
margin-bottom: 1em;
}
.exBox>section>div{
width:auto;
padding: 0 1em;
}
.exBox>section>p{
width:auto;
}

/* ダマスクローズ */
.damask .keyvis p{
text-align: center;
line-height: 1.3;
font-size:3em;
padding: 1em 0 ;
}
.damask-content{
padding: 2em 0 0;
}
.damask-content>.container>div{
display:block;
margin-bottom: 1em;
}
.damask-content>.container>div>p:first-child{
width:auto;
}
.damask-content>.container>div>p:last-child{
width:auto;
text-align: center;
box-shadow: none;
margin: 2em 0;
}
.damask-content>.container>div:first-child>p:first-child{
line-height:1.3;
padding:0.7em;
}
.damask-content>.container>div:nth-child(3) p{
line-height: 1.3;
text-align: center;
}
.damask-content>.container>div span{
font-size: 2em;
}
.damask-content .try{
margin-bottom:3em;
}

/* User's Voice */
.voice{
padding:2em 10px;
}
/*共通*/
.voice >h2,.qa h3,.rosabul h3{
font-size: 2em;
}
.voice dl{
margin-bottom: 2em;
}
.voice dt,.voice dd{
font-size: 1.5em;
}
.voice dt{
width:40%;
border-radius: 10px 10px 0 0;
}

/* Q & A */
.qa>.container{
padding: 2em 10px;
}
.qa dl{
margin-bottom: 2em;
}
.qa dt,.qa dd{
font-size: 1.5em;
}

/* Rosa Bulgarska */
.rosabul{
padding: 2em 10px;
}
.rosabul dt,.rosabul dd{
font-size: 1.5em;
margin-bottom: 1em;
line-height: 1.2;
}

/* 共通おすすめ */
.recoBox>section{
width: 50%;
}

}

/* ----------メディアクエリ---------- */
@media screen and (max-width:550px){

/*共通Header*/
h1{
font-size: 150%;
}
.title{
font-size: 200%;
}
.co{
letter-spacing: 9px;
}
.tel{
font-size: 32px;
width:7em;
margin:0 auto;
padding-left:45px;
background:url(../img/phone-white.svg) no-repeat left 10px center/40px;
}

/* Keyvis */
.keyVis2 .name{
font-size: 1.1em;
}
.keyVis2 .damas{
font-size: 1.2em;
}

/* Answer */
.powerBox ul{
padding-left: 1em;
}

.damask .keyvis p{
font-size:2em;
}
.damask-content>.container>div:first-child>p:first-child{
font-size: 1.5em;
}
.damask-content>.container>div>p:first-child{
font-size: 1.5em;
}

.voice dt,.voice{
font-size: 1.1em;
}

/* Q&A */
.qa dt{
line-height: 1.3;
}
.qa dt,.qa dd{
font-size: 1.2em;
}

/* 商品詳細 */
.rosabul h3{
font-size: 1.3em;
}

.rosabul dl{
padding: 1em;
}
.rosabul dt,.rosabul dd{
font-size: 1.5em;
}

/*共通おすすめ商品*/
.reco>section{
padding: 30px 0;
}
.reco h2{
margin-bottom: 20px;
}
.reco h3{
font-size: 100%;
}


}