@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: 767px){
	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;}
.txt-right { text-align:right;}
/* 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{ background: #d3b35c;opacity:1;}
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: 767px){
 a[class^="btn"] {
  width:80%;
  padding: 1em 2em;
  font-size: 18px;
 }
}
/* title
--------------------- */
h2{ margin-bottom: 1em !important; font-size:30px !important;}
@media (max-width: 767px){
 h2{ font-size:22px !important;}
}
@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: 767px){
 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: 768px){
	.br-sp,
	.spShow { display: none;}
}
@media (max-width: 767px){
	.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: #010A1C;
 background: linear-gradient(105deg,rgba(1, 10, 28, 1) 30%, rgba(200, 221, 223, 1) 70%);
 position: relative;
 text-align: center;
}
.mv_logo {
 padding: 8px;
 text-align: right
}
.mv_logo img {
 width:80px;
}
.mv02 {
 margin-top: -33px;
}
.mv_campaign {
 position:absolute;
 bottom:20px;
 right:20px;
 width:70%;
 max-width: 262px
}
@media (max-width: 767px){
 .mv {
  background:none;
 }
 .mv .container { 
  width:100%;
  position:unset;
 }
 .mv_campaign {
  position: relative;
  bottom: -35%;
  left: 0;
  right: 0;
  margin: auto;
 }
 .mv02 {
   margin-top: 20px;
 }
}
#section0 {
 position: relative;
 background:url(../img/bg_songs.jpg)no-repeat bottom center;
 background-size:100% auto;
 padding-bottom:32px;
 text-align: center
}
@media (max-width: 767px){
  #section0 {
  background:none;
 }
}
@media (min-width: 768px){
  #section0::before {
   content: "";
   width:100%;
   height:35%;
   display: block;
   position: absolute;
   top:0;
   left:0;
   background: #ffffff;
   background: linear-gradient(rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%)
  }
}
#section0 ul {
 display:flex;
 justify-content: center;
 align-content: space-between;
 width:100%;
 margin:80px auto 40px;
}
@media (max-width: 767px){
 #section0 ul {
  flex-direction: column;
 }
}
#section0 ul li {
 position:relative;
 width:50%;
}
#section0 ul li img {
 width: 70%;
 max-width: 340px;
 position: relative;
 z-index: 2;
}
#section0 ul li:first-child::before {
  content: "";
  width: 50%;
  height: 84%;
  background: url("../img/img_song01.png") no-repeat top right;
  position: absolute;
  left: -10%;
  top: -55%;
  background-size: contain;
}
#section0 ul li:last-child::before {
  content: "";
  width: 50%;
  height: 84%;
  background: url(../img/img_song02.png) no-repeat top right;
  position: absolute;
  right: -10%;
  top: -55%;
  background-size: contain;
}
@media (max-width: 767px){
 #section0 .container-small { 
  width:100%;
 }
 #section0 ul {
  margin-top: 20px;
  margin-bottom: 0px;
 }
 #section0 ul li {
  width:100%;
 }
 #section0 ul li:first-child {
  background:url(../img/bg_songs_sp01.jpg)no-repeat center bottom;
  background-size:cover;
  padding: 15% 0 10%;
 }
 #section0 ul li:last-child {
  background:url(../img/bg_songs_sp02.jpg)no-repeat center bottom;
  background-size:cover;
  padding: 15% 0 10%;
 }
 #section0 ul li:first-child::before {
   width: 50%;
   height: 84%;
   background: url("../img/img_song01.png") no-repeat top right;
   position: absolute;
   left: 0;
   top: 1%;
   background-size: 100% auto;
 }
 #section0 ul li:last-child::before {
   width: 50%;
   height: 84%;
   background: url(../img/img_song02.png) no-repeat top right;
   position: absolute;
   right: 0;
   top: 1%;
   background-size: 100% auto;
 }
}

#section1 { 
 text-align:center
}
 #section1 .text_area { 
  background: url("../img/message_bg.png")no-repeat center;
  background-size:contain;
 }
@media (min-width: 768px){
 #section1 .text_area { 
  margin: 40px auto 40px;
  font-size:20px;
 }
}
#section1 .logo img {
 width: 30%;
 max-width:200px;
}
@media (max-width: 767px){
 #section1  { 
  padding-bottom: 0
 }
 #section1 .text_area{
  margin: 20px auto 0;
 }
}


#section3 {
 background:url("../img/bg_lineup.png")no-repeat center;
 background-size:cover;
 margin-bottom: 80px;
}
#section3 h2.h2-title {
 color:#fff;
}
#section3 .lineup{
 background:#fff;
 border-radius:20px 20px 0 0;
 margin-top: 80px;
 margin-bottom:-1px;
 padding-top:40px;
 padding-bottom:40px;
}
#section3 .lineup_tabContainer {
  display: flex;
  width:90%;
  margin:40px auto 0;
 }
@media (min-width: 768px){
 #section3 .lineup_tabContainer {
  margin:0 auto 0;
 }
}
#section3 .lineup_tab {
 width:50%;
 padding-bottom:.5em;
 border-bottom:2px solid #ccc;
 text-align: center;
 font-size: 150%;
 color:#ccc;
 cursor:pointer;
 }
#section3 .lineup_tab.is_active {
 border-bottom:2px solid #d3b35c;
 color:#d3b35c;
 }

 .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%);
 }
.lineup_content  { display:none;}
.lineup_content.is_show  { display:block;}
@media (min-width: 768px){
 #section3 .item {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width:90%;
  margin: 0 auto 0;
  padding:40px 0 0;
  gap:40px;
 } 
 .item .title { 
  margin-bottom: 10px;
  font-size:20px;
 }
}
#section3 .online { 
  position: absolute;
  left: 10px;
  top: 20px;
  width: 24%;
  max-width: 110px;
}
#section3 .pic {
 width:30%;
 max-width:500px;
}
#section3 .slide{ 
 width:90%;
 margin: 0 auto;
 position: relative
}
#section3  .slick-slide {
  padding: 0 20px;
}
#section3 .text  { 
 width:65%;
}
@media (max-width: 767px){
 .item .title{ 
   font-size:18px;
  }
 #section3 .online {
  position: absolute;
  top: 16px;
  left:0;
 }
  #section3 .pic {
   position: relative;
   max-width: 500px;
   width: 80%;
   margin: 0 auto;
 }
 #section3 .text { 
  width:90%;
  margin: 10px auto 0;
 }
}
#section3 .slick-dotted.slick-slider {
  margin-bottom: 0;
}
 
#section3 .link { 
 margin: 40px auto 80px;
 text-align: center
}
#section3 .fragrance { 
 margin: -1px auto -1px;
 padding: 30px 0 0;
 font-size: 16px
}
#section3 .fragrance ul {
 display:flex;
 justify-content: center;
 background:#faf6ef;
 width:90%;
 margin: 0 auto -1px;
 padding:40px;
}
#section3 .fragrance ul li:first-child { 
 width:30%;
}
#section3 .fragrance ul li:last-child { 
 width:max-content;
 text-align: center
}
#section3 .fragrance ul li img.img{ 
  width: 80%;
  max-width: 300px;
  margin-top: 20px;
}
@media (max-width: 767px){
 #section3 .fragrance { 
   font-size: 14px
  }
 
 #section3 .fragrance ul {
  flex-direction: column;
 }
 #section3 .fragrance ul li:first-child ,
 #section3 .fragrance ul li:last-child { 
  width:100%
 }
}
.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: 767px){
 #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 img {
  width:100%;
  max-width:470px;
} 
#section3 #campaign h4  {
  margin: 32px auto;
}
#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;
}
#section3 #campaign .target {
  text-align: center
}
#section3 #campaign .target img {
  width: 90%;
  max-width: 640px;
  margin: 20px auto;
}
#section3 #campaign .set {
  margin: 40px auto;
  padding: 32px 0;
  border-top: solid 4px #FFF;
  border-bottom: solid 4px #fff;
  text-align: center;
}
#section3 #campaign .set img {
  width: 90%;
  max-width: 640px;
}
@media (max-width: 767px){
 #section3 #campaign h3 {
   font-size: 7vw;
 }  
 #section3 #campaign h4 span {
   font-size: 4.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: 768px){
 #section3 #campaign .course {
  width:80%;
  margin-left: auto;
  margin-right: auto
 }
 #section3 #campaign .course ul {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto 0;
  flex-wrap: wrap;
 }
 #section3 #campaign .course ul li {
  width:47%;
 }
 #section3 #campaign .detail ul {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap:40px;
  width: 80%;
  margin: 0 auto;
 }
 #section3 #campaign .detail .detail03 p,
 #section3 #campaign .detail .detail04 p{
  width:95%;
  margin-left:  auto;
  margin-right:  auto;
 }
 #section3 #campaign .detail img {
  width:120px;
 }
}
#section3 #campaign .detail .detail02 div {
 display:flex;
 justify-content: center;
 align-items: center;
}
@media (max-width: 767px){
 #section3 #campaign .detail img {
  width:20%;
 }
}
#section3 .step li  {
 position: relative;
 text-align: center
}
#section3 .step li img {
 width: 100%;
 max-width: 250px
}
@media (min-width: 768px){
 #section3 .step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2%;
  margin: 60px auto 60px;
  width: 80%;
 }

 #section3 .step li {
  width:31%;
 }
}

@media (max-width: 767px){
 #section3 .step li {
  position: relative;
  margin: 40px auto 40px
 }
}


#section4 { background: #f8f8f8}


#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: 768px){
 #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: 767px){
 #section2 .text { 
  width: 90%;
  margin: 0 auto;
 }
}

#section5 { background: #e8e8e8}
#section5 .shops { 
 margin-top: 40px;
 }
#section5 .shops li { 
 margin-top: .5em;
 text-align: center
 }

#section8 {
 text-align: center
}
#section8 img {
 width:80%;
 max-width: 500px
}


.line-img {
 max-width:360px;
 margin-bottom: 60px
}
div[class^="flower"] { position: absolute}
.flower01 {
 top: -220px;
 width:30%;
 max-width: 179px
}
.floating {
  display: none;
  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: 768px){
	#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;}
}