@charset "UTF-8";

/* CSS Document */

body , button, input ,select , textarea { font-family: "Klee One", serif; 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 { 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;

 }

}




/* button 20250407更新

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

 p.btn {

 display:inline-block;

 position: relative;

 cursor: pointer;

 box-sizing: border-box;

 font-weight: 500;

 transition: 0s;

 text-align: center;

 white-space: nowrap;

 background: #aaa;

 padding: 1em 4em;

 font-size: 20px;

 line-height: 1;

 transition: 0.3s;

 z-index: 2

}
 p.btn02 {
 	display:block !important;
 	width:280px !important;
 	margin:0 auto !important;
  	padding: 1em !important;
  	position:relative;
  	bottom:9px !important;
 }

 p.btn span{ 

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

 p.btn:hover{ cursor:default;}


@media (max-width: 768px){
 p.btn {
  padding: 1em 2em;
  font-size: 17px;

 }
 p.btn02 {
  	bottom:13px !important;
 }

}


/* 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:9px;width:0%;background: url("https://fits.itembox.design/item/parfatune003/img/line_title.png");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: #090913;

  position: relative;

  text-align: center;

}

.mv h1 { 

  position: absolute;

  top: 10%;

  right: 60px;

  width:25%;

  max-width:250px;

}

.mv_logo {

 position: absolute;

 top: 8px;

 left: 8px;

 z-index: 2

}

.mv02 {

 padding:80px 0 0;

}

.mv_items {

 position:absolute;

 bottom:80px;

 right:0;

 width:40%;

 max-width: 435px

}

@media (max-width: 768px){

 .mv .container { 

  width:100%;

 }

 .mv_logo {

  width: 80px;

  left: auto;

  right: 10px;

 }

 .mv_items {

  width:68%;

 }

}



#section1 { 

 background:#f7f6f1;

 margin-top: -80px

}

@media (min-width: 769px){

 #section1 .text_area { 

  display: flex;

  align-items: center;

  justify-content: space-around;

  margin: 0 auto 40px;

  font-size:20px;

 }

}

#section1 .text { 

 position: relative

}

#section1 .logo img { 

 width: 90%;

 max-width:301px;

}

#section1 .text::before{ 

 content: ""; 

 position: absolute;

 left:-40px;

 top: 0px;

 height:100%;

 width:12px;

 background: url("https://fits.itembox.design/item/parfatune003/img/line.png");

 background-size:12px auto ;

}

@media (max-width: 768px){

 #section1 .text_area{

  margin: 0 auto 40px;

  text-align: center

 }

 #section1 .text_area img { 

  width:50%;

  margin: 0 auto 40px

 }

}

@media (min-width: 769px){

 #section2 .item {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 60px auto 40px;

  gap:40px;

 }

 .item .title,

 .items .title { 

  margin-bottom: 10px;

  font-size:20px;

 }

}

#section2 .online { 

 position: absolute;

 right: 0;

 top: 0;

 width:30%;

 max-width:95px;

}

#section2 .pic { 

 width:45%;

 max-width:500px;

}



#section2 .slide{ 

 width:90%;

 margin: 0 auto;

 position: relative

}

#section2 .text  { 

 width:max-content;

}

@media (max-width: 768px){

 .item .title,

 .items .title { 

   font-size:18px;

  }

 #section2 .online {

  position: absolute;

  right: 0;

  top: 12px;

  width: 25%;

  max-width: 88px;

 }

  #section2 .pic {

   max-width: 500px;

   width: 80%;

   margin: 0 auto;

 }

 #section2 .text  { 

  margin: 10px auto;

  text-align: center

 }

}

.items li {

 position: relative;

 background:#fff;

 box-shadow: 0 0 8px -4px rgba(0,0,0,.8);

margin: 20px;

padding: 40px 60px 20px

}

.items li .btn {

 width: 100%

}

.items li img{ 

 margin: 0 auto

}

.slide li img{ 

 width:99px;

}
.slide li img.slider-image{ 
 width:400px !important;
}

.items li .fragrance { 

 display:inline-block;

 margin: 0 auto 4px;

 background:#e1e8e6;

 padding:.5em 1em;

 line-height: 1;

 font-size: 16px

}

.items li .play { 

 position: absolute;

 top:10px;

 right: 20px;

 width:100px;

}

@media (max-width: 768px){

 .items li {

  box-shadow: 0 0 8px -4px rgba(0,0,0,.8);

  margin: 20px;

  padding: 40px 20px 20px

 }

 .items li .play { 

  position: absolute;

  top:10px;

  right: 20px;

  width:80px;

 }

 .items li .fragrance { 

  font-size: 14px

 }
.slide li img.slider-image{ 
 width:100% !important;
}
}



.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%;

}

.next-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: #ccc;

 border-radius: 50%;

 cursor: pointer;

}



.dots-wrap li:hover,

.dots-wrap li.slick-active {

    background: #222;

}

.dots-wrap li button {

    display: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    outline: none;

    padding: 0;

    border: none;

    background-color: transparent;

}



#section3 { background: #f8f8f8}

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

@media (min-width: 769px){

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

 #section3 .fragrance li {

  display:flex;

  justify-content: center;

  align-items: center;

  column-gap: 40px;

  margin-bottom: 40px

 }

}

@media (max-width: 768px){

 #section3 .fragrance {

  width:80%;

  margin:40px auto;

 }

 #section3 .fragrance li {

  margin-bottom: 60px

 }

}

 #section4 .profile { 

  position: relative;

  padding: 0;

  background:#090c13;

  color: #fff

 }

@media (min-width: 769px){

 #section4 .profile { 

  margin-top:40px;

  display: flex;

  justify-content: flex-end;

  align-items: center;

  column-gap: 40px;

 }

 #section4 .profile p { 

  width:50%;

 }

 #section4 .profile .text { 

  width:40%;

  padding: 20px 0

 }

}

@media (max-width: 768px){

 #section4 .profile { 

   margin-top:60px;

 }

 #section4 .profile .text { 

  padding: 30px 30px 0

 }

}



#section5 { background: #f8f8f8}

#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

}

@media (min-width: 769px){

 #section6 .items {

  display: flex;

  justify-content: space-between

 }

 #section6 .items li {

  width: 48%;

  padding: 20px 20px 40px;

 }

}

@media (max-width: 768px){

 #section6  .items{

  margin-top:60px;

 }

}



.line-img {

 max-width:360px;

 margin-bottom: 60px

}

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

.flower01 {

 top: -220px;

 width:30%;

 max-width: 179px

}

.flower02 {

 top:31%;

 right:0;

 width:26%;

 max-width: 188px

}

.flower03 {

 top: -80px;

 width:30%;

 max-width: 209px

}

.flower04 {

 top:35% ;

 right:0;

 width:27%;

 max-width: 175px

}

.flower05 {

 top: -80px;

 width:30%;

 max-width: 238px

}

.flower06 {

 top: -110px;

 width:30%;

 max-width: 298px

}

.flower07 {

 right:0;

 top: -70px;

 width:30%;

 max-width: 223px

}

.flower08{

 top: -70px;

 width:45%;

 max-width: 453px

}

@media (max-width: 768px){

flower01 { top: -37%;}

.flower02 { top: 18%;}

.flower03 { top:  -3%;}

.flower04 { top: 45% ;}

.flower05 { top: -2%;}

.flower06 { top: -8%;}

.flower07 { top: -50% }

.flower08 { top: -4%;}

}



/* アニメーション */

@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_items { -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;}

}



.flower01 { -webkit-animation: flower01 4s; animation: flower01 4s;}

@keyframes flower01 {

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

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

}

@-webkit-keyframes flower01 {

	0%, 80% { -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;}

}