@charset "utf-8";
.mincho{
  font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}
.classical__inner{
  position: relative;
}
@media screen and (min-width: 768px) {
  a img,a{
  	transition: all 0.5s;
  }
  a:hover,
  a:hover img{
  	opacity:0.8;
  }
  .classical__inner{
    max-width: 1340px;
    margin: 0 auto;
  }
}
.classical__page{
  color: #606060;
}
.top__img{
  margin: 0 calc(50% - 50vw);
}
.top__area{
  position: relative;
}
.top__text{
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 90%;
  max-width: 1440px;
}
.top__text-small{
  font-size: max(1.7vw, 18px);
  line-height: 1.9;
}
.top__text-large{
  margin-top: 18%;
  font-size: max(2.5vw, 24px);
  position: relative;
}
.top__text-large span{
  width: 40%;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: -1;
  min-width: 290px;
}
@media screen and (min-width: 768px){
	.top__text-large{
	  margin-top: 8%;
	}

}
@media screen and (max-width: 767px){
	.top__text-large{
	  margin-top: 18%;
	}

}

.texture__area{
  background-image: url(/farfalle/images/classical2024/back-texture-pc.jpg);
  background-size: 100%;
  padding: 80px 0;
}
.products__area{
  background-color: rgba(253, 253, 253, 0.4);
  border-radius: 50px;
  max-width: 1440px;
  width: 90%;
  margin: 0 auto;
  padding: 80px 0;
}
.products__list{
  display: flex;
  max-width: 960px;
  width: 80%;
  margin: 0 auto;
  justify-content: space-between;
}
.products__name{
  text-align: center;
  margin-top: 20px;
}
.products__name a{
  color: #AA628D;
  font-size: clamp(13px, 1.8vw, 24px);
}
.products__btn a{
  display: block;
  max-width: 300px;
  text-align: center;
  font-size: clamp(14px, 1.8vw, 22px);
  border: 1px solid #AA5072;
  color: #AA628D;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 0;
  position: relative;
  width: 90%;
}
.products__btn a::after{
  background: url(/farfalle/images/classical2024/arrow-p.svg) no-repeat;
}
.products__all-btn a::after{
  background: url(/farfalle/images/classical2024/arrow-w.svg) no-repeat;
}
.products__btn a::after,
.products__all-btn a::after{
  content: '';
  background-size: contain;
  display: inline-block;
  width: 30px;
  height: 5px;
  position: absolute;
  top: 50%;
  right: 6%;
  transform: translateY(-50%);
}
.products__all-btn a{
  display: block;
  max-width: 650px;
  width: 80%;
  text-align: center;
  font-size: clamp(14px, 1.8vw, 22px);
  color: #fff;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 0;
  background: linear-gradient(to left, rgba(177, 58, 104, 0.6), rgba(213, 121, 178, 0.6));
  position: relative;
}
@media screen and (min-width: 768px) {
  .products__list li{
    width: 46%;
  }
  .products__btn a:hover{
	  color: #fff;
	  background: #AA628D;
	  opacity: 1;
  }
  .products__btn a:hover::after{
	  background: url(/farfalle/images/classical2024/arrow-w.svg) no-repeat;
	}

}
@media screen and (max-width: 767px) {
  .texture__area{
    background-image: url(/farfalle/images/classical2024/back-texture-sp.jpg);
    padding: 60px 0;
  }
  .products__area{
    padding: 60px 0;
  }
  .products__list{
    flex-direction: column;
    row-gap: 40px;
  }
  .products__name,
  .products__btn a{
    margin-top: 10px;
  }
  .products__all-btn a{
    margin-top: 40px;
  }
  .products__btn a::after,
  .products__all-btn a::after{
    width: 24px;
    height: 4px;
    right: 3%;
  }
}
.point__area{
  margin-top: 120px;
  max-width: 1240px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.point__area li{
  display: flex;
  justify-content: space-between;
  column-gap: 5%;
}
.point__area li + li{
  margin-top: 80px;
}
.point__content{
  background-image: url(/farfalle/images/classical2024/point-bg.png);
  background-size: cover;
  padding: 40px;
}
.point__img{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 40px;
}
.point__number{
  width: 70%;
}
.point__catch{
  text-align: center;
  font-size: clamp(19px, 3.3vw, 33px);
  margin-top: 20px;
  text-align: center;
}
.point__catch-img01{
  display: block;
  width: 60%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}
.point__text{
  font-size: clamp(14px, 2.1vw, 21px);
  line-height: 1.9;
  margin-top: 20px;
}
.point__youtube iframe{
  aspect-ratio: 16/9;
  border-radius: 20px;
}
.point__catch-deco{
  display: flex;
  font-size: 0.9em;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.point__catch-deco::before,
.point__catch-deco::after{
  content: '';
  display: inline-block;
  background-color: #707070;
  height: 1px;
  width: 40px;
}
.point__img03{
  width: 60%;
  margin: 0 auto;
}
.point__area li:nth-child(5){
  flex-direction: column;
}
.point__variation{
  display: flex;
  width: 90%;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
  align-items: center;
}
.point__variation-content{
  padding: 40px;
  background: linear-gradient(to right top, #FADFEC 0%, #FFF0F0 50%, #FADFEC 100%);
}
.point__variation-title{
  text-align: center;
  font-size: clamp(20px, 3.1vw, 31px);
  color: #AA628D;
}
.point__variation-text{
  font-size: clamp(14px, 2.0vw, 20px);
  margin-top: 20px;
}
.point__variation-content .point__variation-title:nth-child(n+2){
  margin-top: 60px;
}
@media screen and (min-width: 1101px) {
  .point__area li:nth-child(2n){
    flex-direction: row-reverse;
  }
  .point__content{
    width: 49%;
    min-height: 740px;
  }
  .point__content05{
    display: flex;
    background-image: url(/farfalle/images/classical2024/point-bg05.png);
    background-size: cover;
    padding: 40px;
  }
  .point__img04{
    width: 75%;
    margin: 0 auto;
  }
  .point__area li:nth-child(5) .point__variation:nth-child(2n-1){
    flex-direction: row-reverse;
  }
  .point__variation-img{
    width: 48%;
  }
  .point__variation-content{
    width: 48%;
  }
  .point__number05{
    width: 33%;
  }
}
@media screen and (max-width: 1100px) {
  .point__area li{
    flex-direction: column;
    max-width: 750px;
    margin: 0 auto;
    row-gap: 20px;
  }
  .point__content05{
    background-image: url(/farfalle/images/classical2024/point-bg.png);
    background-size: cover;
    padding: 40px;
  }
  .point__variation{
    flex-direction: column;
    max-width: 600px;
    row-gap: 20px;
    margin-top: 20px;
  }
  .point__number05{
    width: 70%;
  }
}
@media screen and (max-width: 767px) {
  .point__area{
    margin-top: 60px;
  }
  .point__content,
  .point__content05{
    padding: 20px;
  }
  .point__number,
  .point__number05{
    width: 80%;
  }
  .point__area li + li{
    margin-top: 60px;
  }
  .point__img{
    gap: 20px;
  }
  .point__variation-content{
    padding: 20px;
  }
  .point__variation-text{
    margin-top: 10px;
  }
  .point__variation-content .point__variation-title:nth-child(n+2){
    margin-top: 40px;
  }
}
.related__section{
  background-image: url(/farfalle/images/classical2024/back-relatedproducts-pc.jpg);
  background-size: cover;
  padding: 120px 0;
}
.section__title{
  font-size: clamp(24px, 5.4vw, 54px);
  color: #AA628D;
  position: relative;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
}
.section__title span{
  display: block;
  max-width: 317px;
  width: 40%;
  position: absolute;
  bottom: -50%;
  left: 46%;
}
.related__list{
  display: flex;
  column-gap: 4%;
  max-width: 1240px;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}
.related__text{
  font-size: clamp(12px ,1.5vw ,18px);
  margin-top: 10px;
}
.related__name{
  margin-top: 10px;
}
.related__name a{
  font-size: clamp(16px ,2.1vw ,27px);
  color: #AA628D;
}
.related__name a span{
  font-size: 0.7em;
}
.related__note{
  margin-top: 10px;
  font-size: clamp(10px ,1.2vw ,14px);
}
.related__img{
  width: 80%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .related__list li{
    flex: 1;
  }
}
@media screen and (max-width: 767px) {
  .related__section{
    background-image: url(/farfalle/images/classical2024/back-relatedproducts-sp.jpg);
    padding: 80px 0;
  }
  .related__list{
    flex-direction: column;
    width: 80%;
    margin-top: 40px;
    row-gap: 40px;
  }
}
.youtube__section{
  background-image: url(/farfalle/images/classical2024/back-youtube-pc.jpg);
  background-size: cover;
  padding: 120px 0;
}
.youtube__title{
  font-size: clamp(20px ,3vw, 40px);
  color: #AA628D;
  text-align: center;
  font-weight: 500;
  display: flex;
  column-gap: 25px;
  justify-content: center;
  align-items: flex-end;
}
.youtube__title::before,
.youtube__title::after{
  content: '';
  width: 1px;
  height: 2em;
  background-color: #AA628D;
  display: inline-block;
}
.youtube__title::before{
  transform: rotate(-30deg);
}
.youtube__title::after{
  transform: rotate(30deg);
}
.youtube__area{
  max-width: 780px;
  width: 90%;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
}
.youtube__area{
  aspect-ratio: 16/9;
}
.youtube__area a{
  text-decoration: underline;
  color: #AA628D;
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .youtube__section {
    background-image: url(/farfalle/images/classical2024/back-youtube-sp.jpg);
    padding: 60px 0;
  }
  .youtube__title::before,
  .youtube__title::after{
    height: 3em;
  }
  .youtube__area{
    text-align: center;
  }
  .youtube__area a{
    font-size: 14px;
  }
}
.section__voice{
  background-image: url(/farfalle/images/classical2024/back-voice-pc.jpg);
  background-size: cover;
  padding: 120px 0;
}
.voice__list{
  max-width: 1440px;
  width: 90%;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  column-gap: 4%;
  row-gap: 60px;
}
.voice__list li{
  border-bottom: 1px solid #707070;
  padding-bottom: 20px;
}
.voice__number{
  border: 1px solid #707070;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  line-height: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.voice__number .small{
  font-size: 20px;
}
.voice__number .large{
  font-size: 40px;
}
.voice__number-area{
  display: flex;
  justify-content: center;
  align-items: center;
}
.voice__number-area::before,
.voice__number-area::after{
  content: '';
  display: inline-block;
  height: 1px;
  flex: 1;
  background-color: #707070;
}
.voice__wrap{
  display: flex;
  column-gap: 2%;
}
.voice__img{
  width: 35%;
}
.voice__content{
  flex: 1;
}
.voice__character{
  font-size: 14px;
  text-align: right;
  font-weight: 400;
  margin-top: 10px;
}
.voice__text{
  font-size: 16px;
  margin-top: 10px;
  font-weight: bold;
  font-family:  "游ゴシック","Yu Gothic","YuGothic","メイリオ","Meiryo",sans-serif;
}
@media screen and (min-width: 1101px) {
  .voice__list li{
    width: calc(92% / 3);
  }
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
  .voice__list li{
    width: 46%;
  }
}
@media screen and (max-width: 767px) {
  .section__voice{
    background-image: url(/farfalle/images/classical2024/back-voice-sp.jpg);
    padding: 80px 0;
  }
  .voice__character{
    font-size: 12px;
  }
  .voice__text{
    font-size: 13px;
  }
  .voice__number{
    width: 66px;
    height: 66px;
  }
  .voice__number .small{
    font-size: 14px;
  }
  .voice__number .large{
    font-size: 20px;
  }
  .voice__list{
    margin-top: 60px;
    row-gap: 40px;
  }
}
.section__faq{
  background-image: url(/farfalle/images/classical2024/back-faq-pc.jpg);
  background-size: cover;
  padding: 120px 0;
}
.faq-list{
  max-width: 1240px;
  width: 90%;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid #C4C4C4;
}
.faq-list dt{
  font-size: clamp(13px, 2vw, 26px);
  color: #8B5475;
  padding: 20px 6%;
  position: relative;
  cursor: pointer;
  transition: all .5s;
}
.faq-list dt::before{
  content: 'Q';
  font-size: clamp(23px, 2.9vw, 35px);
  display: inline-block;
  position: absolute;
  top: 20px;
  left: 0;
  line-height: 1;
}
.faq-list dt::after{
  content: '';
  display: inline-block;
  width: 20px;
  height: 12px;
  background: url(/farfalle/images/classical2024/faq-arrow.svg) no-repeat;
  position: absolute;
  background-size: contain;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  transition: all 0.5s;
}
.faq-list dt.active::after{
  transform: translateY(-50%) rotate(180deg);
}
.faq-list dd{
  font-size: clamp(13px, 1.7vw, 20px);
  display: none;
  position: relative;
  padding-left: 6%;
  padding-bottom: 40px;
}
.faq-list dd::before{
  content: 'A';
  font-size: clamp(23px, 2.9vw, 35px);
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1;
}
.faq-list dt:nth-child(n+2){
  border-top: 1px solid #C4C4C4;
}
@media screen and (min-width: 768px) {
  .faq-list dt:hover{
    opacity: 0.8;
  }
}
@media screen and (max-width: 767px) {
  .section__faq{
    background-image: url(/farfalle/images/classical2024/back-faq-sp.jpg);
    padding: 80px 0;
  }
  .faq-list dt{
    padding: 20px 10%;
  }
  .faq-list dt::after{
    width: 14px;
    height: 8px;
  }
  .faq-list dd{
    padding-left: 10%;
  }
  .faq-list{
    margin-top: 40px;
  }
}
.products__section{
  background-image: url(/farfalle/images/classical2024/back-cta-pc.jpg);
  background-size: cover;
  padding: 120px 0;
}
.products__list01{
  display: flex;
  max-width: 1440px;
  width: 90%;
  margin: 0 auto;
  column-gap: 4%;
}
@media screen and (min-width: 768px) {
  .products__list01 li{
    flex: 1;
  }
  .related__list li {
    display: flex;
    flex-direction: column;
  }
  .related__wrap {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
	}
	.related__text-wrap {
	    flex-direction: column;
	    display: flex;
	    flex-grow: 1;
	}
}
@media screen and (max-width: 767px) {
  .products__section{
    background-image: url(/farfalle/images/classical2024/back-cta-sp.jpg);
    padding: 80px 0;
  }
  .products__list01{
    flex-direction: column;
    width: 80%;
  }
	.products__list01 li:not(:last-child) {
		margin-bottom: 50px;
	}
}
.bubble{
  position: absolute;
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  .bubble01{
    top: 4%;
    right: 50%;
    width: 127px;
  }
  .bubble02{
    top: 45%;
    left: 4%;
    width: 104px;
  }
  .bubble03{
    top: 54%;
    right: 2%;
    width: 133px;
  }
  .bubble04{
    bottom: 12%;
    right: 10%;
    width: 90px;
  }
  .bubble05{
    bottom: -7%;
    left: 12%;
    width: 86px;
  }
  .bubble06 {
    top: 7%;
    left: 0;
    width: 80px;
	}
	.bubble07 {
    top: 15%;
    right: -4%;
    width: 120px;
	}
	.bubble08 {
    top: 23%;
    left: -4%;
    width: 110px;
	}
	.bubble09 {
    top: 30%;
    right: 2%;
    width: 90px;
	}
	.bubble10 {
    top: 42%;
    left: 2%;
    width: 90px;
	}
	.bubble11 {
		top: 51%;
    right: -4%;
    width: 110px;
	}
	.bubble12 {
		top: 56%;
    left: -4%;
    width: 100px;
	}
	.bubble12 {
		top: 63%;
    right: 0%;
    width: 80px;
	}
	.bubble13 {
		top: 66%;
    right: 0%;
    width: 80px;
	}
	.bubble14 {
		top: 82%;
    left: 2%;
    width: 80px;
	}
	.bubble15 {
		top: 92%;
    right: -5%;
    width: 110px;
	}
	.bubble16 {
		top: 98%;
    left: -4%;
    width: 110px;
	}
	.bubble17 {
		top: 103%;
    right: 0%;
    width: 90px;
	}
	.bubble18 {
    top: 116%;
    left: 3%;
    width: 90px;
	}
	.bubble19 {
		top: 123%;
    right: -4%;
    width: 110px;
	}
	.bubble20 {
		top: 180%;
    left: -2%;
    width: 100px;
	}
	.bubble21 {
		top: 230%;
    right: 2%;
    width: 120px;
	}
	.bubble22 {
		top: 274%;
    left: 2%;
    width: 80px;
	}
	.bubble23 {
		top: 310%;
    right: -4%;
    width: 110px;
	}
	.bubble24 {
		top: 364%;
    left: -2%;
    width: 100px;
	}
	.bubble25 {
		top: 454%;
    right: 0%;
    width: 80px;
	}
	.bubble26 {
		top: 480%;
    left: 2%;
    width: 80px;
	}
	.bubble27 {
		top: 600%;
	  right: -4%;
    width: 110px;
	}
	.bubble28 {
		top: 650%;
    left: -4%;
    width: 110px;
	}
	.bubble29 {
		top: 720%;
	  right: 2%;
    width: 80px;
	}
	.bubble30 {
		top: 790%;
    left: 4%;
    width: 80px;
	}
	.bubble31 {
		top: 820%;
    right: -4%;
    width: 110px;
	}
	.bubble32 {
		top: 860%;
    left: -4%;
    width: 100px;
	}
}
@media screen and (max-width: 767px) {
  .bubble01{
    top: 4%;
    left: 50%;
    width: 56px;
  }
  .bubble02{
    top: 50%;
    left: 5%;
    width: 47px;
  }
  .bubble03{
    bottom: -22%;
    right: 6%;
    width: 47px;
  }
  .bubble06 {
    top: 7%;
    left: 0;
    width: 47px;
	}
	.bubble07 {
    top: 15%;
    right: 5%;
    width: 60px;
	}
	.bubble08 {
    top: 23%;
    left: 5%;
    width: 56px;
	}
	.bubble09 {
    top: 36%;
    right: 2%;
    width: 53px;
	}
	.bubble10 {
    top: 42%;
    left: 2%;
    width: 53px;
	}
	.bubble11 {
		top: 51%;
    right: 5%;
    width: 56px;
	}
	.bubble12 {
		top: 56%;
    left: 5%;
    width: 58px;
	}
	.bubble12 {
		top: 63%;
    right: 6%;
    width: 47px;
	}
	.bubble13 {
		top: 66%;
    right: 6%;
    width: 47px;
	}
	.bubble14 {
		top: 82%;
    left: 2%;
    width: 47px;
	}
	.bubble15 {
		top: 92%;
    right: 2%;
    width: 56px;
	}
	.bubble16 {
		top: 98%;
    left: 5%;
    width: 56px;
	}
	.bubble17 {
		top: 103%;
    right: 6%;
    width: 53px;
	}
	.bubble18 {
    top: 116%;
    left: 3%;
    width: 53px;
	}
	.bubble19 {
		top: 123%;
    right: 5%;
    width: 56px;
	}
	.bubble20 {
		top: 110%;
    left: 1%;
    width: 58px;
	}
	.bubble21 {
		top: 160%;
    right: 2%;
    width: 58px;
	}
	.bubble22 {
		top: 198%;
    left: 2%;
    width: 47px;
	}
	.bubble23 {
		top: 220%;
    right: 5%;
    width: 56px;
	}
	.bubble24 {
		top: 278%;
    left: 1%;
    width: 58px;
	}
	.bubble25 {
		top: 379%;
    right: 6%;
    width: 47px;
	}
	.bubble26 {
		top: 410%;
    left: 2%;
    width: 47px;
	}
	.bubble27 {
		top: 506%;
	  right: 5%;
    width: 56px;
	}
	.bubble28 {
		top: 530%;
    left: 5%;
    width: 56px;
	}
	.bubble29 {
		top: 650%;
	  right: 2%;
    width: 47px;
	}
	.bubble30 {
		top: 720%;
    left: 4%;
    width: 47px;
	}
	.bubble31 {
		top: 750%;
    right: 5%;
    width: 56px;
	}
	.bubble32 {
		top: 790%;
    left: 5%;
    width: 58px;
	}
}
/* 商品ページから移動 */
.classical2024 {
    color: #3d3d3f;
}
.mainp{
  background: none;
}
.data-img {
  max-width: 640px;
  margin: 30px auto;
}
.headnewsbox.fixed {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
}
#fs_CustomPage #mainarea {
    width: 100%;
    max-width: unset;
    padding: 0;
}
.classical2024 .classical-btn a {
  background-color: #3d3d3f;
}
h2.add-title {
    background-color: #3d3d3f;
}
@media screen and (min-width: 768px){
.foottoparea {
    display: none;
}
.btn-mg a {
  margin-top: 30px;
}

}
@media screen and (max-width: 767px){
.hamburger.fixed {
    top: 45px;
}
.btn-mg a {
  margin-top: 20px;
}
.classical-img {
  width: 90%;
}
}
.checkeditemarea .sec-ttl {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic", "メイリオ", "Meiryo", sans-serif;
}
.checkeditemarea li .price{
	text-align: left;
}