@charset "UTF-8";

/* CSS Document */

body , button, input ,select , textarea { font-family: "Libre Baskerville","Zen Old Mincho", serif !important; font-weight: 400; font-style: normal;-webkit-font-feature-settings: "palt" 1;font-feature-settings : "palt" 1;letter-spacing: .01em;font-size:16px;}

@media (max-width: 768px){

	body { font-size:14px;}

}

body { line-height: 1.7;color:#000;}

* { box-sizing: border-box;}

h1 ,h2 ,h3 ,h4{font-weight:normal;} 

img { vertical-align: middle; max-width: 100%; height: auto;}

[type=reset], [type=submit], button, html [type=button] { -webkit-appearance: none;}

a { text-decoration: none;color:#000;transition: 0.3s}

a:hover { color: inherit; text-decoration: none; opacity: 0.65;}

img { width:auto;max-width: 100%; height: auto;}

 div[id^="section"]{ position: relative;padding:80px 0;}

.container { position:relative;width: 98%;max-width: 1260px; margin: auto; }

.container-small { position:relative;width: 95%;max-width: 960px; margin: auto; }

.row { display: -webkit-flex; display: flex;flex-wrap: wrap;}



small{ font-size:80%;}

.txt-L{ font-size:120%;}

.txt-XL{ font-size:130%;}

.txt-B{ font-weight:bold;}

.txt-center { text-align:center;}

/* button

--------------------- */

a[class^="btn"] {

 display:inline-block;

 position: relative;

 cursor: pointer;

 box-sizing: border-box;

 font-weight: 500;

 transition: 0s;

 text-align: center;

 white-space: nowrap;

 background: #222;

 padding: 1em 4em;

 font-size: 20px;

 line-height: 1;

 transition: 0.3s;

 z-index: 2

}

a[class^="btn"] span{ 

 position: relative;color:#fff;transition: 0s; }

a[class^="btn"]:hover,

.contact button:hover{ opacity:.8;}

a[class^="btn"] span::after { content:"";position: absolute;top: 50%;right:-1em;margin-top:-5px; background:url(https://fits.itembox.design/item/parfatune003/img/icon_arrow.png)center no-repeat;background-size:contain;width:8px;height:10px; }

@media (max-width: 768px){

 a[class^="btn"] {

  padding: 1em 2em;

  font-size: 17px;

 }

}

/* title

--------------------- */

h2{ margin-bottom: 1em; font-size:30px;}

@media (max-width: 768px){

 h2{ font-size:22px;}

}

@media (max-width: 468px){

 h2 , h3 ,h4{ font-weight: 600;}

}

h2.h2-title { text-align:center;line-height: 1}

h2.h2-title span { position: relative;z-index: 2}

h2.h2-title span.fade { opacity: 1;}

h2.h2-title span.fade.marker::before { content: ""; position: absolute;left:0;bottom: -4px;height:2px;width:0%;background: #fff;background-size:auto 9px ;transition: all 1.5s ease;z-index: 1}

h2 span.fade.marker.active::before { width:100%;}

@media (max-width: 768px){

 h2.h2-title span.fade.marker::before { bottom: -12px;}

}

ul { list-style-type: none;}

ul.list{ list-style-type: disc;margin-left: 1em}

p + p { margin-top:1em;}



@media (min-width: 769px){

	.br-sp,

	.spShow { display: none;}

}

@media (max-width: 768px){

	.br-pc,

	.spHide { display: none;}

	 div[id^="section"]{ position: relative;padding:60px 0;}

}

@media (min-width: 468px){

	.br-sp { display: none;}

	.br-tb { display: block;}

}

@media (max-width: 467px){

	.br-tb,

	.br-pc { display: none;}

	.br-sp { display: block;}

}

@media (min-width: 960px){

	.br-tb { display: none;}

}



.mv { 

  margin: 0;

  padding: 0;

  background: #fff;

  position: relative;

  text-align: center;

}

.mv h1 { 

  position: absolute;

  top: 10%;

  right: 60px;

  width:250px;

}

.mv_txt {

 padding-top: 80px;

 text-align: right

}

.mv_txt img {

 width:100%;

 max-width: 1000px

}

.mv_logo {

 position: absolute;

 top: 8px;

 right: 8px;

 z-index: 2

}

.mv02 {

   margin-top: -33px;

}

.mv_txt h1 {

 position:absolute;

 top:40px;

 left:0;

 width:60%;

 max-width: 435px

}

.mv_campaign {

 position:absolute;

 bottom:20px;

 right:20px;

 width:70%;

 max-width: 262px

}

@media (max-width: 768px){

 .mv .container { 

  width:100%;

 }

 .mv_logo {

  width: 80px;

  right: 10px;

 }

.mv_campaign {

    bottom: -24%;

    left: 0;

    right: 0;

    margin: auto;

 }

}



#section1 { 

 text-align:center

}

 #section1 .text_area { 

  background: url("../img/message_bg.png")no-repeat center;

  background-size:contain;

 }

@media (min-width: 769px){

 #section1 .text_area { 

  margin: 40px auto 40px;

  font-size:20px;

 }

}

#section1 .logo img {

 width: 30%;

 max-width:200px;

}

@media (max-width: 768px){

 #section1  { 

  margin-top:25%;

 }

 #section1 .text_area{

  margin: 20px auto 0;

  background-size: 100% auto;

 }

}





#section3 {

 background:url("../img/bg_lineup.png")no-repeat center;

 background-size:cover;

}

#section3 .item {

 background:#fff;

 border-radius:20px 20px 0 0;

 margin-top: 80px;

 padding-top:40px;

 padding-bottom:40px;

}

 #section3 .item01 {

  padding:60px 0;

 }

#section3 .item01 .pic img{

  max-width:127px;

 }

 .item .title::after { 

  content: "";

  position:relative;

  display: block;

  width:100%;

  height:2px;

  margin: .8em 0;

  background: rgb(219,231,234);

  background: linear-gradient(135deg, rgba(219,231,234,1) 0%, rgba(253,236,238,1) 100%);

 }

.item01 .title { 

  border-bottom: 2px solid #fff;

 }

@media (min-width: 769px){

 #section3 .item {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 80px auto 0;

  padding:60px 60px 40px;

  gap:40px;

 } 

 #section3 .item01 {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 80px auto 0;

  gap:40px;

 }

 .item .title, 

 .item01 .title,

 .items .title { 

  margin-bottom: 10px;

  font-size:20px;

 }

}

#section3 .online { 

position: absolute;

  right: 0;

  left: 0;

  top: -24px;

  width: 66%;

  max-width: 308px;

  margin: auto;

}

#section3 .pic {

 width:40%;

 max-width:500px;

}



#section3 .slide{ 

 width:90%;

 margin: 0 auto;

 position: relative

}

#section3 .text  { 

 width:50%;

}

@media (max-width: 768px){

 .item .title,

 .items .title,

 .item01 .title{ 

   font-size:18px;

  }

 #section3 .online {

  position: absolute;

  top: 3%;

 }

  #section3 .pic {

   max-width: 500px;

   width: 80%;

   margin: 0 auto;

 }

 #section3 .text  { 

  width:90%;

  margin: 10px auto 0;

 }

 #section3 .link { 

  text-align: center

 }

}

#section3 .fragrance { 

 display:inline-block;

 margin: 0 auto 4px;

 background:#fff;

 padding:.5em 1em;

 line-height: 1;

 font-size: 16px

}

@media (max-width: 768px){

#section3 .fragrance { 

  font-size: 14px

 }

}

.arrow_box {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  margin: 20px 0 0;

  position: relative;

}

.prev-arrow,

.next-arrow {

  display: block;

  width: 5%;

  height: 50px;

  background: url("https://fits.itembox.design/item/parfatune003/img/button_left.png") no-repeat center;

  background-size:contain;

  cursor: pointer;

  position:absolute;

  left:-5%;

  top:45%;

}

.prev-arrow {

  transform: rotate(180deg);

  left:inherit;

  right:-5%;

}

.slick-slide { height:auto;}



.dots-wrap {

 display: flex;

 justify-content: center;

}

.dots-wrap li {

 width: 10px;

 height: 10px;

 margin: 0 5px;

 background: #dee5e8;

 border-radius: 50%;

 cursor: pointer;

}



.dots-wrap li:hover,

.dots-wrap li.slick-active {

    background: #ca9e63;

}

.dots-wrap li button {

    display: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    outline: none;

    padding: 0;

    border: none;

    background-color: transparent;

}

#section3 #campaign {

 position: relative;

 margin: 0 auto 0;

 padding: 0 80px 80px;

 background:rgba(255,255,255,.5);

}

#section3 #campaign::before {

  content: "";

  display: block;

  width: 100%;

  height: 150px;

  clip-path: polygon(0 0, 0% 100%, 100% 0);

  background-color: #fff;

  position: absolute;

  top: 0;

  left: 0;

}

@media (max-width: 768px){

 #section3 #campaign {

  margin-bottom: 80px;

  padding: 0 20px 40px;

 }

}

#section3 #campaign h3 ,

#section3 #campaign h4 {

 position: relative;

 text-align: center;

 z-index: 2

}

#section3 #campaign h3  {

 font-size: 36px

}

 #section3 #campaign h3 img {

   width:54%;

   max-width:277px;

 } 

#section3 #campaign h4  {

  margin: 1em auto 2em;

}

#section3 #campaign h4 span {

 background:#fff;

 padding:.2em 1em;

 font-size: 28px;

 line-height: 1

}

#section3 #campaign h5 {

 position: relative;

 margin: 1em 0 0.5em;

 border-bottom:2px solid #ddc157;

 text-align: center;

 font-size:24px;

}

@media (max-width: 768px){

 #section3 #campaign h3 {

   font-size: 7vw;

 }  

 #section3 #campaign h4 span {

   font-size: 5vw;

 }

}

#section3 #campaign .detail li {

  width:100%;

}

#section3 #campaign .detail .title {

  display:inline-block;

 border:1px solid #333;

 margin: .5em 0 .5em;

 padding:.5em;

 line-height: 1

}

 #section3 #campaign .course{

  margin-bottom: 40px

 }

@media (min-width: 769px){

 #section3 #campaign .course ul {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 0;

  gap:60px;

 }

 #section3 #campaign .detail ul {

  position: relative;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap:40px;

 }

 #section3 #campaign .detail .detail01,

 #section3 #campaign .detail .detail02{

  width:45%;

 }

 #section3 #campaign .detail .detail03 p,

 #section3 #campaign .detail .detail04 p{

  width:80%;

  margin-left:  auto;

  margin-right:  auto;

 }

 #section3 #campaign .detail img {

  width:120px;

 }

}



#section4 { background: #f8f8f8}

#section4 .fragrance { margin-top:60px;}

@media (min-width: 769px){

 #section4 .fragrance h3 { margin-bottom:30px;}

 #section4 .fragrance li {

  display:flex;

  justify-content: center;

  align-items: center;

  column-gap: 40px;

  margin-bottom: 40px

 }

}

@media (max-width: 768px){

 #section4 .fragrance {

  width:80%;

  margin:40px auto;

 }

 #section4 .fragrance li {

  margin-bottom: 60px

 }

}



#section2 .containerBg { 

  background:#faf6ef;

 padding-bottom:40px;

 }

 #section2 .pic { 

  margin-bottom: 20px;

 }

#section2 .pic img { 

  width:100%;

  max-width:640px;

 }

#section2 h2 { 

  font-size:20px;

 }

#section2 .sign { 

  text-align: right

 }

#section2 .sign img { 

  max-width:134px;

 }

@media (min-width: 769px){

 #section2 .profile { 

  margin-top:40px;

  display: flex;

  justify-content: space-around;

  align-items: center;

  column-gap: 40px;

 }

 #section2 .pic { 

  margin-top: -80px;

  margin-bottom: 0

 }

 #section2 h2 { 

  font-size:24px;

 }

}

@media (max-width: 768px){

 #section2 .text { 

  width: 90%;

  margin: 0 auto;

 }

}



#section5 { background: #e8e8e8}

#section5 .shops { 

 margin-top: 40px;

 }

#section5 .shops li { 

 margin-top: .5em;

 text-align: center

 }



#section6 .items li .btn {

 width: 90%;

}

#section6 .items li {

 text-align: center

}

#section6 .fragrance { 

 display:inline-block;

 margin: 0 auto 4px;

 background:#f8f4f5;

 padding:.5em 1em;

 line-height: 1;

 font-size: 16px

}



@media (min-width: 769px){

 #section6 .items {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap

 }

 #section6 .items li {

  width: 45%;

  padding: 20px 20px 40px;

 }

}

@media (max-width: 768px){

 #section6  .items{

  margin-top:60px;

 }

}

#section7  {

 background:#000;

 text-align: center;

 color: #fff

}





.line-img {

 max-width:360px;

 margin-bottom: 60px

}

div[class^="flower"] { position: absolute}

.flower01 {

 top: -220px;

 width:30%;

 max-width: 179px

}

.floating {

  position: fixed;

  bottom: 8px;

  right: 8px;

  width:40%;

  max-width: 262px;

  z-index: 99;

}

.floating img:hover{

  opacity:1;

  filter: brightness(105%);

}

.footer {z-index: 999;}

/* アニメーション */

@media (min-width: 769px){

	#nav {background:#fff; -webkit-animation: navInit 1.5s; animation: navInit 1.5s;}

}

.spMenu { -webkit-animation: navInit 1.5s; animation: navInit 1.5s;}

@keyframes navInit {

	0% { transform: translate(0, -30%); opacity: 0;}

	100% { transform: translate(0, 0); opacity: 1;}

}

@-webkit-keyframes navInit {

	0% { -webkit-transform: translate(0, -30%); opacity: 0;}

	100% { -webkit-transform: translate(0, 0); opacity: 1;}

}



.mv_txt { -webkit-animation: mv-anime 3s; animation: mv-anime 3s;}

@keyframes mv-anime {

	0% { opacity: 0;}

	100% { topacity: 1;}

}

@-webkit-keyframes mv-anime {

	0% { opacity: 0;}

	100% { opacity: 1;}

}



.mv_txt h1 { -webkit-animation: mv-anime02 3s; animation: mv-anime02 3s;}

@keyframes mv-anime02 {

	0%, 40% { transform: translate(0, 10px); opacity: 0;}

	100% { transform: translate(0, 0); opacity: 1;}

}

@-webkit-keyframes mv-anime02 {

	0%, 40% { -webkit-transform: translate(0, 10px); opacity: 0;}

	100% { -webkit-transform: translate(0, 0); opacity: 1;}

}

.mv_campaign { -webkit-animation: mv-anime03 3s; animation: mv-anime03 3s;}

@keyframes mv-anime03 {

	0%, 60% { transform: translate(0, 10px); opacity: 0;}

	100% { transform: translate(0, 0); opacity: 1;}

}

@-webkit-keyframes mv-anime03 {

	0%, 60% { -webkit-transform: translate(0, 10px); opacity: 0;}

	100% { -webkit-transform: translate(0, 0); opacity: 1;}

}





.fade { opacity:0;transition: 0.3s}

.fade.fadein-up.active { animation: fadein-up 1.5s; opacity: 1;}

@keyframes fadein-up {

	0% { transform: translate(0, 20px); opacity: 0;}

	100% { transform: translate(0, 0px); opacity: 1;}

}

@-webkit-keyframes fadein-up {

	0% { -webkit-transform: translate(0, 20px); opacity: 0;}

	100% { -webkit-transform: translate(0, 0px); opacity: 1;}

}