@charset "UTF-8";
/*
--------------------------------------------------------------
 Mix-In
--------------------------------------------------------------
*/
@media screen and (min-width: 768px) { #flavorlist .sp-disp { display: none !important; } }

@media screen and (max-width: 767px) { #flavorlist .pc-disp { display: none !important; } }

/*
--------------------------------------------------------------
 Laline-Reset
--------------------------------------------------------------
*/
#flavorlist p { line-height: 1; margin: auto; }

#flavorlist ul, #flavorlist ol { line-height: 1; margin: auto; padding: 0; }

footer#footer { z-index: 100; }

/*
--------------------------------------------------------------
 General
--------------------------------------------------------------
*/
body { background: #cfc; font-family: 'Noto Sans JP',noto sans japanese,Quicksand,游ゴシック体,yu gothic,YuGothic,ヒラギノ角ゴシック pro,hiragino kaku gothic pro,メイリオ,Meiryo,Osaka,sans-serif; }

@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

::-moz-selection { background: #bb4a68; color: #fff; }

::selection { background: #bb4a68; color: #fff; }

::-moz-selection { background: #bb4a68; color: #fff; }

#flavorlist { background: #fff; color: #010101; position: relative; }

#flavorlist img { -webkit-backface-visibility: hidden; backface-visibility: hidden; line-height: 0; margin: 0 auto; }

#flavorlist a { -webkit-transition-duration: 600ms; -webkit-transition-timing-function: ease; transition-duration: 600ms; transition-timing-function: ease; }

#flavorlist a img { -webkit-transition-duration: 600ms; -webkit-transition-timing-function: ease; transition-duration: 600ms; transition-timing-function: ease; }

#flavorlist a:hover { opacity: 0.6; }

@media screen and (max-width: 767px) { #flavorlist { -webkit-box-sizing: border-box; box-sizing: border-box; margin-left: -10px; margin-right: -10px; padding: 0 10px; width: 100vw; z-index: 3; } }

.section { overflow: visible; position: relative; text-align: center; width: 100%; z-index: 50; }

@media screen and (max-width: 767px) { #flavorlist .section { width: 100%; }
  #flavorlist .section p { font-size: 13px; font-size: 4.0625vw; line-height: 1.53846; }
  #flavorlist .section img { height: auto; width: 100%; } }

@media screen and (min-width: 768px) { #flavorlist .section p { font-size: 14px; line-height: 1.85714; } }

/*
--------------------------------------------------------------
 Main
--------------------------------------------------------------
*/
#flavorlist .flv-head { margin-bottom: 8.125vw; margin-top: 12.34375vw; }

#flavorlist .flv-head__inner { margin: 0 auto; max-width: 1120px; }

#flavorlist .flv-head__title { line-height: 0; margin-bottom: 0; }

#flavorlist .flv-head__read-text { font-size: 13px; line-height: 1.76923; margin-bottom: 0; }

@media screen and (min-width: 768px) { #flavorlist .flv-head { margin-bottom: 44px; margin-top: 79px; }
  #flavorlist .flv-head__read-text { font-size: 16px !important; } }

/*
--------------------------------------------------------------
 Links
--------------------------------------------------------------
*/
#flavorlist .flv-links { margin-bottom: 4.375vw; margin-left: -10px; width: 100vw; }

#flavorlist .flv-links__inner { -ms-flex-align: center; -webkit-box-align: center; -webkit-box-sizing: border-box; align-items: center; background: url("../../images/flavorlist/flavor_links_bg_sp.png"); background-size: 100% 100%; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; max-width: 884px; min-height: 227.5px; }

#flavorlist .flv-links__list { -ms-flex-align: center; -ms-flex-wrap: wrap; -webkit-box-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; height: 100%; width: 100%; }

#flavorlist .flv-links__item { display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 500; }

#flavorlist .flv-links__item:before { content: "｜"; }

#flavorlist .flv-links__item:first-child:before, #flavorlist .flv-links__item.newline:before { display: none; }

#flavorlist .flv-links__item a { line-height: 1; position: relative; }

#flavorlist .flv-links__item a:before { -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); -webkit-transition-delay: 0s; -webkit-transition-duration: 400ms; -webkit-transition-timing-function: ease; border-bottom: 1px solid #010101; bottom: 0; content: ""; display: block; height: 1px; left: 50%; position: absolute; transform: translateX(-50%); transition-delay: 0s; transition-duration: 400ms; transition-timing-function: ease; width: 100%; }

#flavorlist .flv-links__item a:hover { opacity: 1; }

#flavorlist .flv-links__item a:hover:before { opacity: 0; width: 0px; }

@media screen and (max-width: 767px) { #flavorlist .flv-links__list { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; margin: 0 40px; }
  #flavorlist .flv-links__item { font-size: 12px; margin-bottom: 8px; margin-top: 4px; }
  #flavorlist .flv-links__item a { margin: 0 6px; padding-bottom: 7px; } }

@media screen and (min-width: 768px) { #flavorlist .flv-links { margin-bottom: 43px; margin-left: 0; margin-right: 0; width: 100%; }
  #flavorlist .flv-links__inner { background: url("../../images/flavorlist/flavor_links_bg.png"); background-size: 100% 100%; min-height: 161px; padding: 20px 0; }
  #flavorlist .flv-links__list { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; max-width: 585px; }
  #flavorlist .flv-links__item { font-size: 14px; margin-bottom: 8px; margin-top: 4px; }
  #flavorlist .flv-links__item a { margin: 0 9px; padding-bottom: 7px; } }

/*
--------------------------------------------------------------
 Flavor
--------------------------------------------------------------
*/
#flavorlist .flv-type__inner { margin: 0 auto; max-width: 1120px; }

#flavorlist .flv-type__item { -ms-flex-wrap: wrap; border-bottom: 1px solid #dcdcdc; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; }

#flavorlist .flv-type__item:last-child { border-bottom: none; }

#flavorlist .flv-type__head { -ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; width: 100%; }

#flavorlist .flv-type__head-bg { -ms-flex-align: center; -webkit-box-align: center; align-items: center; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; }

#flavorlist .flv-type__head-bg img { height: auto; width: 100%; }

#flavorlist .flv-type__head-title { line-height: 0; position: relative; z-index: 10; }

#flavorlist .flv-type__head-title img { height: auto; width: 100%; }

#flavorlist .flv-type__head a .flv-type__head-bg img { -webkit-transition-delay: 0s; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease; transition-delay: 0s; transition-duration: 0.5s; transition-timing-function: ease; }

#flavorlist .flv-type__head a:hover { opacity: 1; }

#flavorlist .flv-type__head a:hover .flv-type__head-bg img { opacity: 0.4 !important; }

#flavorlist .flv-type__text { text-align: left; }

#flavorlist .flv-type__list { display: -webkit-box; display: -ms-flexbox; display: flex; }

#flavorlist .flv-type__list-item { line-height: 0; position: relative; z-index: 10; }

#flavorlist .flv-type__list-item img { height: auto; width: 100%; }

#flavorlist .flv-type__btn { margin: 0 auto; }

#flavorlist .flv-type__btn a { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; position: relative; }

#flavorlist .flv-type__btn a span { -ms-flex-align: center; -ms-flex-pack: center; -ms-transform: translate(-50%, -50%); -webkit-box-align: center; -webkit-box-pack: center; -webkit-transform: translate(-50%, -50%); align-items: center; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 500; height: 100%; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%; }

#flavorlist .flv-type__btn a img { width: 100%; }

@media screen and (max-width: 767px) { #flavorlist .flv-type__item { padding: 10.9375vw 0 10.625vw 0; }
  #flavorlist .flv-type__head { margin-bottom: 4.6875vw; }
  #flavorlist .flv-type__body { width: 100%; }
  #flavorlist .flv-type__text { font-size: 13px; line-height: 1.53846; margin-bottom: 4.375vw; }
  #flavorlist .flv-type__list { margin-bottom: 6.25vw; margin-left: -10px; margin-right: -10px; width: 100vw; }
  #flavorlist .flv-type__list-item { width: 25vw; }
  #flavorlist .flv-type__btn { font-size: 12px; margin: 0 auto; white-space: nowrap; width: 100%; width: 87.5vw; }
  #flavorlist .flv-type__btn a { font-size: 12px; font-weight: 400; width: 100%; }
  #flavorlist .flv-type__btn a img { height: 10.625vw; } }

@media screen and (min-width: 768px) { #flavorlist .flv-type__item { -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding: 70px 0; }
  #flavorlist .flv-type__item:nth-child(even) .flv-type__head { -ms-flex-order: 2; -webkit-box-ordinal-group: 3; margin-left: auto; order: 2; }
  #flavorlist .flv-type__item:nth-child(even) .flv-type__body { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; margin-left: 0; order: 1; }
  #flavorlist .flv-type__head { max-width: 50%; }
  #flavorlist .flv-type__head-bg { background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; }
  #flavorlist .flv-type__head-title { position: relative; z-index: 10; }
  #flavorlist .flv-type__body { margin-left: auto; margin-right: 6px; max-width: 46.96429%; }
  #flavorlist .flv-type__text { margin-bottom: 35px; }
  #flavorlist .flv-type__list { margin-bottom: 35px; }
  #flavorlist .flv-type__btn { font-size: 16px; }
  #flavorlist .flv-type__btn a { max-width: 397px; width: 100%; } }

@media screen and (max-width: 767px) { 
  #flavorlist #ob .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_ob_bg_sp.jpg"); }
  #flavorlist #cb .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_cb_bg_sp.jpg"); }
  #flavorlist #va .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_va_bg_sp.jpg"); }
  #flavorlist #peony .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_peony_bg_sp.jpg"); }
  #flavorlist #oc .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_oc_bg_sp.jpg"); }
  #flavorlist #vpp .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_vpp_bg_sp.jpg"); }
  #flavorlist #vpp .flv-type__list-item:nth-child(1) { margin-right: -3.125vw; width: 28.125vw; z-index: 11; }
  #flavorlist #fp .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_fp_bg_sp.jpg"); }
  #flavorlist #lv .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_lv_bg_sp.jpg"); }
  #flavorlist #monoi .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_monoi_bg_sp.jpg"); }
  #flavorlist #sk .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_sk_bg_sp.jpg"); }
  #flavorlist #dsm .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_dsm_bg_sp.jpg"); }
  #flavorlist #dsm .flv-type__list-item:nth-child(1) { margin-right: -3.125vw; width: 28.125vw; z-index: 11; }
  #flavorlist #lg .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_lg_bg_sp.jpg"); }
  #flavorlist #mr .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_mr_bg_sp.jpg"); } }

@media screen and (min-width: 768px) {
   #flavorlist #ob .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_ob_bg.jpg"); }
   #flavorlist #cb .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_cb_bg.jpg"); }
  #flavorlist #va .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_va_bg.jpg"); }
  #flavorlist #peony .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_peony_bg.jpg"); }
  #flavorlist #oc .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_oc_bg.jpg"); }
  #flavorlist #vpp .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_vpp_bg.jpg"); }
  #flavorlist #fp .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_fp_bg.jpg"); }
  #flavorlist #fp .flv-type__list-item:nth-child(2) { margin-left: -17px; margin-right: -18px; width: 170px; z-index: 11; }
  #flavorlist #lv .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_lv_bg.jpg"); }
  #flavorlist #monoi .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_monoi_bg.jpg"); }
  #flavorlist #sk .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_sk_bg.jpg"); }
  #flavorlist #dsm .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_dsm_bg.jpg"); }
  #flavorlist #lg .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_lg_bg.jpg"); }
  #flavorlist #mr .flv-type__head-bg { background-image: url("../../images/flavorlist/fl_mr_bg.jpg"); } }

/*
--------------------------------------------------------------
 Scroll Animation
--------------------------------------------------------------
*/
.js-anim-scroll { -webkit-transition-duration: 2000ms; -webkit-transition-timing-function: ease; opacity: 0; transition-duration: 2000ms; transition-timing-function: ease; visibility: hidden; }

.js-anim-scroll.inview { opacity: 1; visibility: visible; }

.js-anim-scroll[data-anim="b-to-t"] { -ms-transform: translateY(30px); -webkit-transform: translateY(30px); -webkit-transition-duration: 1800ms; transform: translateY(30px); transition-duration: 1800ms; }

.js-anim-scroll[data-anim="b-to-t"].inview { -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }

.js-anim-scroll[data-anim="t-to-b"] { -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); -webkit-transition-duration: 1800ms; transform: translateY(-30px); transition-duration: 1800ms; }

.js-anim-scroll[data-anim="t-to-b"].inview { -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }

.js-anim-scroll[data-anim="l-to-r"] { -ms-transform: translateX(-30px); -webkit-transform: translateX(-30px); -webkit-transition-duration: 2000ms; transform: translateX(-30px); transition-duration: 2000ms; }

.js-anim-scroll[data-anim="l-to-r"].inview { -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }

.js-anim-scroll[data-anim="r-to-l"] { -ms-transform: translateX(30px); -webkit-transform: translateX(30px); -webkit-transition-duration: 2000ms; transform: translateX(30px); transition-duration: 2000ms; }

.js-anim-scroll[data-anim="r-to-l"].inview { -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }

.js-anim-scroll .fragrance-box .fragrance-box__item { -ms-transform: scale(1) translateY(-20%); -webkit-transform: scale(1) translateY(-20%); -webkit-transition-duration: 1500ms; -webkit-transition-timing-function: ease; opacity: 0; transform: scale(1) translateY(-20%); transition-duration: 1500ms; transition-timing-function: ease; }

.js-anim-scroll .fragrance-box .fragrance-box__item:nth-child(1) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; }

@media screen and (min-width: 768px) { .js-anim-scroll .fragrance-box .fragrance-box__item:nth-child(1) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } }

.js-anim-scroll .fragrance-box .fragrance-box__item:nth-child(2) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; }

@media screen and (min-width: 768px) { .js-anim-scroll .fragrance-box .fragrance-box__item:nth-child(2) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } }

.js-anim-scroll .fragrance-box .fragrance-box__item:nth-child(3) { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }

@media screen and (min-width: 768px) { .js-anim-scroll .fragrance-box .fragrance-box__item:nth-child(3) { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } }

.js-anim-scroll .fragrance-box .fragrance-box__item:nth-child(4) { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; }

@media screen and (min-width: 768px) { .js-anim-scroll .fragrance-box .fragrance-box__item:nth-child(4) { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; } }

.js-anim-scroll.inview .fragrance-box .fragrance-box__item { -ms-transform: scale(1) translateY(0); -webkit-transform: scale(1) translateY(0); opacity: 1; transform: scale(1) translateY(0); }

#flavorlist .flv-type__head.js-anim-scroll { opacity: 1; visibility: visible; }

#flavorlist .flv-type__head.js-anim-scroll .flv-type__head-bg { -webkit-transition-delay: 0; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: ease; transition-delay: 0; transition-duration: 0.6s; transition-timing-function: ease; }

#flavorlist .flv-type__head.js-anim-scroll .flv-type__head-bg img { -webkit-transition-delay: 0s; -webkit-transition-duration: 0.7s; -webkit-transition-timing-function: ease; height: 100%; opacity: 0; transition-delay: 0s; transition-duration: 0.7s; transition-timing-function: ease; width: 1px; }

#flavorlist .flv-type__head.js-anim-scroll :hover .flv-type__head-bg img { -webkit-transition-delay: 0s; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; opacity: 0.6; transition-delay: 0s; transition-duration: 1s; transition-timing-function: ease; }

#flavorlist .flv-type__head.js-anim-scroll .flv-type__head-title { -ms-transform: translateY(0%); -webkit-transform: translateY(0%); -webkit-transition-delay: 0.8s; -webkit-transition-duration: 1.5s; -webkit-transition-timing-function: ease; opacity: 0; transform: translateY(0%); transition-delay: 0.8s; transition-duration: 1.5s; transition-timing-function: ease; }

#flavorlist .flv-type__head.js-anim-scroll.inview .flv-type__head-bg img { opacity: 1; width: 100%; }

#flavorlist .flv-type__head.js-anim-scroll.inview .flv-type__head-title { -ms-transform: translateY(0); -webkit-transform: translateY(0); opacity: 1; transform: translateY(0); }