@charset "UTF-8";
/*リセット
--------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/*メディアクエリー
---------------------------------------------*/
/*変数
---------------------------------------------*/
/* フェミニンタイトル、テキスト */
/* MVタイトル、フェミニンアイテム画像背景、「COORDINATE ITEMS」、アイテム枠 */
/* アイテム名、BUYボタン縁（反転ver） */
/* BUYボタン */
/* フェミニンタイトル「STYLE」 */
/* フェミニンタイトル「STYLE」下線 */
/* クール一般 */
/* クールタイトル「STYLE」下線 */
/* コンテンツ
---------------------------------------------*/
html,
body,
#wrapper {
  width: 100%;
  color: #1c1c1c;
  font-family: "dnp-shuei-mincho-pr6n", sans-serif;
  font-weight: 500;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
@media screen and (min-width: 769px) {
  html,
  body,
  #wrapper {
    font-size: 62.5%;
  }
}
@media screen and (max-width: 768px) {
  html,
  body,
  #wrapper {
    font-size: min(3.7333333333vw, 14px);
  }
}
html a,
body a,
#wrapper a {
  text-decoration: none;
  color: #1c1c1c;
}

img {
  width: 100%;
  display: block;
}

@media screen and (min-width: 769px) {
  .pcNone {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .pcNone {
    display: block;
  }
}

@media screen and (min-width: 769px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .spNone {
    display: none;
  }
}

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

div.fv {
  position: relative;
}
@media screen and (max-width: 768px) {
  div.fv {
    margin-bottom: min(40vw, 150px);
  }
}
@media screen and (min-width: 769px) {
  div.fv {
    margin-bottom: min(10.2777777778vw, 148px);
  }
}
@media screen and (min-width: 769px) {
  div.fv:after {
    content: "";
    display: block;
    padding-top: 46.3194444444vw;
  }
}
div.fv ul.flex {
  display: flex;
}
@media screen and (min-width: 769px) {
  div.fv ul.flex {
    position: relative;
  }
}
div.fv ul.flex li {
  position: relative;
}
@media screen and (max-width: 768px) {
  div.fv ul.flex li {
    width: 50vw;
    height: 145.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.fv ul.flex li {
    position: absolute;
  }
}
@media screen and (max-width: 768px) {
  div.fv ul.flex li.fem_img {
    height: 139.4666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.fv ul.flex li.fem_img {
    width: 29.9305555556vw;
    height: 38.0555555556vw;
    top: 0;
    left: 22.2222222222vw;
  }
}
@media screen and (min-width: 769px) {
  div.fv ul.flex li.fem_img::before {
    content: "FEMININE";
    color: #BABABA;
    font-family: "playfair-display", serif;
    font-size: 4.6527777778vw;
    transform: rotate(-90deg);
    position: absolute;
    top: 9.4444444444vw;
    left: -13.1944444444vw;
  }
}
div.fv ul.flex li.fem_img div.box1 {
  position: absolute;
  display: block;
  width: 100%;
  height: 139.4666666667vw;
  background: #A06AA7;
  animation: box-sc1 3s 1s cubic-bezier(1, 0, 0, 1) forwards;
  z-index: 100;
  opacity: 0;
}
@media screen and (min-width: 769px) {
  div.fv ul.flex li.fem_img div.box1 {
    height: 38.0555555556vw;
  }
}
div.fv ul.flex li.fem_img img {
  animation: delay 2.5s;
}
@media screen and (max-width: 768px) {
  div.fv ul.flex li.cool_img {
    margin-top: 27.4666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.fv ul.flex li.cool_img {
    width: 30.1388888889vw;
    height: 38.2638888889vw;
    top: 8.0555555556vw;
    right: 20.6944444444vw;
  }
}
@media screen and (min-width: 769px) {
  div.fv ul.flex li.cool_img::after {
    content: "COOL";
    color: #BABABA;
    font-family: "playfair-display", serif;
    font-size: 4.6527777778vw;
    transform: rotate(90deg);
    position: absolute;
    bottom: 5vw;
    right: -8.5416666667vw;
  }
}
div.fv ul.flex li.cool_img div.box2 {
  position: absolute;
  display: block;
  width: 100%;
  height: 145.0666666667vw;
  background: #6978A8;
  animation: box-sc2 3s 1s cubic-bezier(1, 0, 0, 1) forwards;
  z-index: 100;
  opacity: 0;
}
@media screen and (min-width: 769px) {
  div.fv ul.flex li.cool_img div.box2 {
    height: 38.2638888889vw;
  }
}
div.fv ul.flex li.cool_img img {
  animation: delay 2.5s;
}
@keyframes delay {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes box-sc1 {
  0% {
    opacity: 1;
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    opacity: 1;
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    opacity: 1;
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    opacity: 1;
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
@keyframes box-sc2 {
  0% {
    opacity: 1;
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
  50% {
    opacity: 1;
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  50.1% {
    opacity: 1;
    transform: scale(1, 1);
    transform-origin: 0 0%;
  }
  100% {
    opacity: 1;
    transform: scale(1, 0);
    transform-origin: 0 0%;
  }
}
div.fv div.sub_title {
  position: absolute;
  z-index: 1000;
}
@media screen and (max-width: 768px) {
  div.fv div.sub_title {
    width: 28.8vw;
    top: 3.4666666667vw;
    right: 2.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.fv div.sub_title {
    width: 10.8333333333vw;
    top: 1.3194444444vw;
    right: 15.7638888889vw;
  }
}
div.fv h2 {
  position: absolute;
  background-color: #A16AA8;
  left: 0;
  z-index: 1000;
  animation-name: fadeRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  div.fv h2 {
    width: 95.2vw;
    height: 21.0666666667vw;
    bottom: 2.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.fv h2 {
    width: 52.5694444444vw;
    height: 8.75vw;
    top: 36.8055555556vw;
  }
}
div.fv h2 img {
  position: absolute;
}
@media screen and (max-width: 768px) {
  div.fv h2 img {
    width: 90.1333333333vw;
    top: -2.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.fv h2 img {
    width: 44.7222222222vw;
    top: 0.4861111111vw;
    left: 6.4583333333vw;
  }
}

@keyframes fadeRightAnime {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@media screen and (min-width: 769px) {
  @keyframes fadeRightAnime {
    0% {
      opacity: 0;
      transform: translateX(-300px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
}
div.description {
  margin: 0 auto;
  line-height: 2.2142857143;
  max-width: 1094px;
}
@media screen and (max-width: 768px) {
  div.description {
    width: min(88vw, 330px);
    margin-bottom: min(33.3333333333vw, 125px);
  }
}
@media screen and (min-width: 769px) {
  div.description {
    width: min(38vw, 456px);
    margin-bottom: min(14.1666666667vw, 170px);
    font-size: 1.4rem;
  }
}

div.contents {
  max-width: 1094px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  div.contents {
    padding: 0 min(4.6666666667vw, 17.5px);
    margin-bottom: min(40vw, 150px);
  }
}
@media screen and (min-width: 769px) {
  div.contents {
    width: min(44.8333333333vw, 538px);
    margin: 0 auto min(18.3333333333vw, 220px);
  }
}
div.contents h3 {
  font-family: "playfair-display", serif;
  font-style: italic;
  text-align: center;
  letter-spacing: 0.06em;
  line-height: 1.3548387097;
  border-bottom: solid 1px #1c1c1c;
}
@media screen and (max-width: 768px) {
  div.contents h3 {
    font-size: min(8.2666666667vw, 31px);
    padding-bottom: min(4vw, 15px);
  }
}
@media screen and (min-width: 769px) {
  div.contents h3 {
    font-size: min(3.8rem, 38px);
    padding-bottom: min(1.8333333333vw, 22px);
  }
}
div.contents ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: solid 1px #1c1c1c;
}
@media screen and (max-width: 768px) {
  div.contents ul {
    gap: 4.2666666667vw 3.7333333333vw;
    margin-top: 6.9333333333vw;
    margin-left: 1.3333333333vw;
    margin-right: 1.3333333333vw;
    padding-bottom: 11.2vw;
  }
}
@media screen and (min-width: 769px) {
  div.contents ul {
    gap: min(2.5vw, 30px) min(2.75vw, 33px);
    margin-top: min(3.3333333333vw, 40px);
    margin-left: 1.25vw;
    margin-right: 1.25vw;
    padding-bottom: min(4.1666666667vw, 50px);
  }
}
div.contents ul li a {
  display: block;
  position: relative;
}
div.contents ul li a div.num {
  font-family: "stix-two-text", serif;
  position: absolute;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  div.contents ul li a div.num {
    font-size: 6.4vw;
    top: -4vw;
    left: 1.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.contents ul li a div.num {
    font-size: min(2.6666666667vw, 32px);
    top: min(-0.9166666667vw, -11px);
    left: min(-0.4166666667vw, -5px);
  }
}
div.contents ul li a div.num:after {
  content: "";
  display: block;
  position: absolute;
  background: #1c1c1c;
  transform: rotate(125deg);
}
@media screen and (max-width: 768px) {
  div.contents ul li a div.num:after {
    width: 5.6vw;
    height: 1px;
    top: 5.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.contents ul li a div.num:after {
    width: min(3vw, 36px);
    height: min(0.0833333333vw, 1px);
    top: min(2.1666666667vw, 26px);
    left: min(-0.1666666667vw, -2px);
  }
}
div.contents ul li a div.center {
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  div.contents ul li a div.center {
    width: 39.4666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.contents ul li a div.center {
    width: min(18.5vw, 222px);
  }
}
div.contents ul li a div.center div.img {
  position: relative;
}
@media screen and (max-width: 768px) {
  div.contents ul li a div.center div.img {
    width: 39.4666666667vw;
    height: 25.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.contents ul li a div.center div.img {
    width: min(18.5vw, 222px);
    height: min(11.5vw, 138px);
  }
}
div.contents ul li a div.center div.img::after {
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.2);
  top: 0;
  left: 0;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  div.contents ul li a div.center div.img::after {
    width: 39.4666666667vw;
    height: 25.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.contents ul li a div.center div.img::after {
    width: min(18.5vw, 222px);
    height: min(11.8333333333vw, 142px);
  }
}
div.contents ul li a div.center p.item_name {
  text-align: center;
}
@media screen and (max-width: 768px) {
  div.contents ul li a div.center p.item_name {
    font-size: min(3.4666666667vw, 13px);
    margin-top: min(0.8vw, 3px);
  }
}
@media screen and (min-width: 769px) {
  div.contents ul li a div.center p.item_name {
    font-size: min(1.5833333333vw, 19px);
    margin-top: min(1vw, 12px);
  }
}
@media screen and (min-width: 769px) {
  div.contents ul li a:hover div.center div.img::after {
    opacity: 0;
  }
}
@media screen and (max-width: 768px) {
  div.contents ul li:first-child a div.num:after {
    left: 0.5333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.contents ul li:first-child a div.num:after {
    left: min(-0.0833333333vw, -1px);
  }
}
@media screen and (max-width: 768px) {
  div.contents ul li:nth-child(2) a div.num:after {
    left: 0.5333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.contents ul li:nth-child(2) a div.num:after {
    left: min(-0.0833333333vw, -1px);
  }
}

@media screen and (max-width: 768px) {
  section.sec {
    margin-bottom: min(42.6666666667vw, 160px);
  }
}
@media screen and (min-width: 769px) {
  section.sec {
    margin-bottom: min(19.1666666667vw, 230px);
  }
}
section.sec div.head {
  display: flex;
  align-items: center;
  border-bottom: solid 1px #1c1c1c;
  justify-content: center;
  max-width: 1094px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  section.sec div.head {
    padding-bottom: min(1.3333333333vw, 5px);
    margin: 0 min(4.8vw, 18px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.head {
    margin: 0 auto;
    padding-bottom: min(0.5833333333vw, 7px);
  }
}
section.sec div.head div.num {
  position: relative;
}
@media screen and (max-width: 768px) {
  section.sec div.head div.num {
    width: min(13.6vw, 51px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.head div.num {
    width: min(5.1666666667vw, 62px);
  }
}
@media screen and (max-width: 768px) {
  section.sec div.head div.num img {
    width: min(13.6vw, 51px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.head div.num img {
    width: min(5.1666666667vw, 62px);
  }
}
section.sec div.head div.num:after {
  content: "";
  display: block;
  background: #1c1c1c;
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
  transform: rotate(125deg);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  section.sec div.head div.num:after {
    width: min(16vw, 60px);
    height: min(0.2666666667vw, 1px);
    left: min(5.8666666667vw, 22px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.head div.num:after {
    width: min(6.5vw, 78px);
    height: min(0.1083333333vw, 1.3px);
    left: min(2.0833333333vw, 25px);
  }
}
section.sec div.head h4 {
  font-weight: bold;
  line-height: 1.1212121212;
  color: #3C3C3C;
}
@media screen and (max-width: 768px) {
  section.sec div.head h4 {
    font-size: min(8.8vw, 33px);
    margin-left: min(8.8vw, 33px);
    margin-top: min(2.9333333333vw, 11px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.head h4 {
    font-size: min(3.5833333333vw, 43px);
    margin-left: min(1.65vw, 19.8px);
  }
}
section.sec p.text {
  line-height: 1.7142857143;
  letter-spacing: 0.03em;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  section.sec p.text {
    width: min(82.6666666667vw, 310px);
    margin-top: min(5.3333333333vw, 20px);
    margin-bottom: min(16vw, 60px);
  }
}
@media screen and (min-width: 769px) {
  section.sec p.text {
    width: min(34.25vw, 411px);
    font-size: min(1.1666666667vw, 14px);
    margin-top: min(2.25vw, 27px);
    margin-bottom: min(8.3333333333vw, 100px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex {
    display: flex;
    justify-content: space-between;
    width: min(79.1666666667vw, 950px);
    margin: 0 auto;
  }
}
section.sec div.wrap_flex div.wrap {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap {
    margin-bottom: min(32vw, 120px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap {
    width: min(36.6666666667vw, 440px);
    margin-bottom: min(10vw, 120px);
  }
}
section.sec div.wrap_flex div.wrap div.title {
  text-align: center;
  font-family: "playfair-display", serif;
}
section.sec div.wrap_flex div.wrap div.title div.style {
  color: #9869A8;
  letter-spacing: 0.06em;
  position: relative;
  line-height: 1;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap div.title div.style {
    font-size: min(4.8vw, 18px);
    font-size: 18px;
    padding: 0 min(0.5333333333vw, 2px) min(0.8vw, 3px);
    margin-bottom: min(0.5333333333vw, 2px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap div.title div.style {
    font-size: min(1.75vw, 21px);
    padding: 0 min(0.1666666667vw, 2px) min(0.25vw, 3px);
    margin-bottom: min(0.1666666667vw, 2px);
  }
}
section.sec div.wrap_flex div.wrap div.title div.style::before {
  content: "";
  display: block;
  background-color: #DFD2E4;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -2;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap div.title div.style::before {
    width: min(16.8vw, 63px);
    height: min(1.6vw, 6px);
    top: min(3.7333333333vw, 14px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap div.title div.style::before {
    width: min(6.1666666667vw, 74px);
    height: min(0.5833333333vw, 7px);
    top: min(1.4166666667vw, 17px);
  }
}
section.sec div.wrap_flex div.wrap div.title div.style::after {
  content: "";
  display: block;
  background-color: #ffffff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap div.title div.style::after {
    width: min(16.8vw, 63px);
    height: min(2.1333333333vw, 8px);
    top: min(3.7333333333vw, 14px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap div.title div.style::after {
    width: min(6.1666666667vw, 74px);
    height: min(0.75vw, 9px);
    top: min(1.4166666667vw, 17px);
  }
}
section.sec div.wrap_flex div.wrap div.title h5 {
  color: #A06AA7;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap div.title h5 {
    font-size: min(10.4vw, 39px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap div.title h5 {
    font-size: min(3.75vw, 45px);
  }
}
section.sec div.wrap_flex div.wrap div.title h5:after {
  content: "[ フェミニン ]";
  font-weight: 500;
  display: block;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap div.title h5:after {
    font-size: min(3.7333333333vw, 14px);
    padding-top: min(2.6666666667vw, 10px);
    margin-bottom: min(4vw, 15px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap div.title h5:after {
    font-size: min(1.25vw, 15px);
    padding-top: min(1.1666666667vw, 14px);
    margin-bottom: min(1.5vw, 18px);
  }
}
section.sec div.wrap_flex div.wrap ul.img {
  position: relative;
  line-height: 0;
}
section.sec div.wrap_flex div.wrap ul.img li img {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap ul.img li img {
    width: min(90.4vw, 339px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap ul.img li img {
    width: min(33.1666666667vw, 398px);
  }
}
section.sec div.wrap_flex div.wrap ul.img::before {
  content: "";
  display: block;
  background: #A06AA8;
  position: absolute;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap ul.img::before {
    height: min(64vw, 240px);
    top: min(28.2666666667vw, 106px);
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap ul.img::before {
    width: 100%;
    height: min(23.5vw, 282px);
    top: min(10.4166666667vw, 125px);
  }
}
section.sec div.wrap_flex div.wrap ul.img .slick-dots li button:before {
  background: #A16AA8;
  content: "" !important;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap ul.img .slick-dots li button:before {
    width: min(8vw, 30px);
    height: min(0.5333333333vw, 2px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap ul.img .slick-dots li button:before {
    width: min(3vw, 36px);
    height: min(0.1666666667vw, 2px);
  }
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap ul.img .slick-dots li {
    width: min(8vw, 30px);
    height: min(0.5333333333vw, 2px);
    margin: min(1.3333333333vw, 5px) !important;
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap ul.img .slick-dots li {
    width: min(3vw, 36px);
    height: min(0.1666666667vw, 2px);
    margin: min(0.5vw, 6px) !important;
  }
}
section.sec div.wrap_flex div.wrap p.text {
  margin: 0 auto;
  line-height: 1.5714285714;
  color: #A06AA7;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap p.text {
    margin-top: min(10.6666666667vw, 40px);
    width: min(82.6666666667vw, 310px);
    margin-bottom: min(13.8666666667vw, 52px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap p.text {
    margin-top: min(4.5vw, 54px);
    width: min(30.25vw, 363px);
    margin-bottom: min(4.1666666667vw, 50px);
  }
}
section.sec div.wrap_flex div.wrap div.item_area {
  border: solid 1px #A16AA8;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap div.item_area {
    padding: min(10.9333333333vw, 41px) min(4vw, 15px) min(8vw, 30px);
    width: min(82.6666666667vw, 310px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap div.item_area {
    padding: min(4vw, 48px) min(2.25vw, 27px) min(2.5vw, 30px) min(2.1666666667vw, 26px);
    width: min(30.25vw, 363px);
    box-sizing: border-box;
  }
}
section.sec div.wrap_flex div.wrap div.item_area h6 {
  color: #A16AA8;
  font-family: "playfair-display", serif;
  letter-spacing: 0.04em;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap div.item_area h6 {
    font-size: min(5.6vw, 21px);
    top: min(-3.4666666667vw, 13px);
    padding: 0 min(3.2vw, 12px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap div.item_area h6 {
    font-size: min(2vw, 24px);
    top: min(-1.25vw, -15px);
    padding: 0 min(1.0833333333vw, 13px);
  }
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap ul li {
    margin-bottom: min(2.6666666667vw, 10px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap ul li {
    margin-bottom: min(0.8333333333vw, 10px);
  }
}
section.sec div.wrap_flex div.wrap ul li:last-child {
  margin-bottom: 0;
}
section.sec div.wrap_flex div.wrap ul li a.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
section.sec div.wrap_flex div.wrap ul li a.flex div.item_description {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap ul li a.flex div.item_description img {
    width: min(16.5333333333vw, 62px);
    margin-right: min(2.6666666667vw, 10px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap ul li a.flex div.item_description img {
    width: min(5.1666666667vw, 62px);
    margin-right: min(0.3333333333vw, 4px);
  }
}
section.sec div.wrap_flex div.wrap ul li a.flex div.item_description div.text p {
  color: #A06AA8;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap ul li a.flex div.item_description div.text p {
    margin-bottom: min(2.4vw, 9px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap ul li a.flex div.item_description div.text p {
    margin-bottom: min(0.75vw, 9px);
  }
}
section.sec div.wrap_flex div.wrap ul li a.flex div.item_description div.text p.price {
  margin-bottom: 0;
}
section.sec div.wrap_flex div.wrap ul li a.flex div.buy {
  background: #A169A8;
  position: relative;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  section.sec div.wrap_flex div.wrap ul li a.flex div.buy {
    flex-shrink: 0;
    width: min(19.2vw, 72px);
    height: min(6.9333333333vw, 26px);
    border-radius: min(16vw, 60px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.wrap_flex div.wrap ul li a.flex div.buy {
    width: min(6vw, 72px);
    height: min(2.1666666667vw, 26px);
    border-radius: min(5vw, 60px);
  }
}
section.sec div.wrap_flex div.wrap ul li a.flex div.buy p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
}
section.sec div.wrap_flex div.wrap ul li a.flex:hover div.buy {
  background: #ffffff;
  border: solid 1px #A06AA8;
}
section.sec div.wrap_flex div.wrap ul li a.flex:hover div.buy p {
  color: #A16AA8;
}
section.sec div.wrap_flex div.wrap.wrap_cool div.title div.style {
  color: #6978A8;
}
section.sec div.wrap_flex div.wrap.wrap_cool div.title div.style::before {
  background-color: #D1D6E5;
}
section.sec div.wrap_flex div.wrap.wrap_cool div.title h5 {
  color: #6978A8;
}
section.sec div.wrap_flex div.wrap.wrap_cool div.title h5:after {
  content: "[ クール ]";
}
section.sec div.wrap_flex div.wrap.wrap_cool ul.img::before {
  background: #6978A8;
}
section.sec div.wrap_flex div.wrap.wrap_cool ul.img .slick-dots li button:before {
  background: #6978A8;
}
section.sec div.wrap_flex div.wrap.wrap_cool p.text {
  color: #6978A8;
}
section.sec div.wrap_flex div.wrap.wrap_cool div.item_area {
  border: solid 1px #6978A8;
}
section.sec div.wrap_flex div.wrap.wrap_cool div.item_area h6 {
  color: #6978A8;
}
section.sec div.wrap_flex div.wrap.wrap_cool ul li a.flex div.item_description div.text p {
  color: #6978A8;
}
section.sec div.wrap_flex div.wrap.wrap_cool ul li a.flex div.buy {
  background: #6978A8;
}
section.sec div.wrap_flex div.wrap.wrap_cool ul li a.flex:hover div.buy {
  background: #ffffff;
  border: solid 1px #6978A8;
}
section.sec div.wrap_flex div.wrap.wrap_cool ul li a.flex:hover div.buy p {
  color: #6978A8;
}
section.sec div.recommend {
  background-color: #F5F5F5;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  section.sec div.recommend {
    padding-bottom: min(10.6666666667vw, 40px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.recommend {
    padding-bottom: min(5.8333333333vw, 70px);
  }
}
section.sec div.recommend p.head {
  font-family: "playfair-display", serif;
  text-align: center;
  letter-spacing: 0.004em;
}
@media screen and (max-width: 768px) {
  section.sec div.recommend p.head {
    padding-top: min(10.6666666667vw, 40px);
    font-size: min(5.6vw, 21px);
    margin-bottom: min(5.3333333333vw, 20px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.recommend p.head {
    padding-top: min(5.8333333333vw, 70px);
    font-size: min(2vw, 24px);
    margin-bottom: min(2.5vw, 30px);
  }
}
section.sec div.recommend ul {
  display: flex;
  width: min(75.6666666667vw, 908px);
  margin: 0 auto min(5vw, 60px);
  padding-bottom: min(2.5vw, 30px);
  overflow: scroll;
  /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}
section.sec div.recommend ul li {
  margin-right: min(0.8333333333vw, 10px);
  padding-bottom: min(2.5vw, 30px);
}
section.sec div.recommend ul li a {
  display: block;
}
section.sec div.recommend ul li a p {
  font-size: min(1vw, 12px);
  margin-bottom: min(0.5833333333vw, 7px);
}
section.sec div.recommend ul li a p img {
  width: min(13.5833333333vw, 163px);
  margin-bottom: min(0.8333333333vw, 10px);
}
section.sec div.recommend ul li a p.ico_box {
  display: none;
}
section.sec div.recommend ul li a p.price {
  margin: 0;
}
section.sec div.recommend ul li a p:first-child span {
  display: none;
}
@media screen and (min-width: 769px) {
  section.sec div.recommend .pcNone {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  section.sec div.recommend .spNone {
    display: none;
  }
}
section.sec div.recommend div.sectionAjax {
  padding-bottom: 5.3333333333vw;
  margin-bottom: 10.6666666667vw;
  margin-left: 4.8vw;
  overflow: scroll;
}
@media screen and (max-width: 768px) {
  section.sec div.recommend div.sectionAjax {
    display: flex;
  }
}
section.sec div.recommend div.sectionAjax div {
  margin-right: min(2.6666666667vw, 10px);
  list-style: none;
}
section.sec div.recommend div.sectionAjax div a p {
  font-size: min(3.2vw, 12px);
  margin-bottom: min(2.6666666667vw, 10px);
}
section.sec div.recommend div.sectionAjax div a p img {
  width: min(43.4666666667vw, 163px);
  margin-bottom: min(2.6666666667vw, 10px);
}
section.sec div.recommend div.sectionAjax div a p.ico_box {
  display: none;
}
section.sec div.recommend div.sectionAjax div a p.price {
  margin: 0;
}
section.sec div.recommend div.sectionAjax div a p:first-child span {
  display: none;
}
section.sec div.recommend div.all_btn a {
  display: block;
  background: #ffffff;
  border: solid 1px rgba(28, 28, 28, 0.7);
  position: relative;
  margin: 0 auto;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  section.sec div.recommend div.all_btn a {
    width: 80vw;
    height: min(13.6vw, 51px);
    border-radius: min(6.6666666667vw, 25px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.recommend div.all_btn a {
    width: min(30.4166666667vw, 365px);
    height: min(4.25vw, 51px);
    border-radius: min(2.0833333333vw, 25px);
  }
}
section.sec div.recommend div.all_btn a p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  section.sec div.recommend div.all_btn a p {
    font-size: min(4vw, 15px);
  }
}
@media screen and (min-width: 769px) {
  section.sec div.recommend div.all_btn a p {
    font-size: min(1.25vw, 15px);
  }
}
section.sec div.recommend div.all_btn a:hover {
  background: #1c1c1c;
  border: none;
}
section.sec div.recommend div.all_btn a:hover p {
  color: #ffffff;
}

div.recommend ul::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 768px) {
  section.sec_2 div.head div.num:after {
    left: min(5.3333333333vw, 20px);
  }
}
@media screen and (min-width: 769px) {
  section.sec_2 div.head div.num:after {
    left: min(1.8333333333vw, 22px);
  }
}

@media screen and (max-width: 768px) {
  section.sec_3 div.head div.num:after {
    left: min(4vw, 15px);
  }
}
@media screen and (min-width: 769px) {
  section.sec_3 div.head div.num:after {
    left: min(1.3333333333vw, 16px);
  }
}

section.sec_4 {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  section.sec_4 div.head div.num:after {
    left: min(5.3333333333vw, 20px);
  }
}
@media screen and (min-width: 769px) {
  section.sec_4 div.head div.num:after {
    left: min(1.8333333333vw, 22px);
  }
}

@media screen and (max-width: 768px) {
  div.staff_credit {
    margin-top: min(53.3333333333vw, 200px);
    margin-bottom: min(53.3333333333vw, 200px);
  }
}
@media screen and (min-width: 769px) {
  div.staff_credit {
    margin-top: min(140vw, 140px);
    margin-bottom: min(140vw, 140px);
  }
}
div.staff_credit p {
  text-align: center;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 768px) {
  div.staff_credit p {
    font-size: min(3.2vw, 12px);
    margin-bottom: min(6.6666666667vw, 25px);
  }
}
@media screen and (min-width: 769px) {
  div.staff_credit p {
    font-size: min(1vw, 12px);
    margin-bottom: min(2.0833333333vw, 25px);
  }
}

.wrap-fadeIn {
  transition: 1s;
  opacity: 0;
}

.wrap-fadeIn_active {
  opacity: 1;
}

.js-fadeUp {
  opacity: 0;
  visibility: hidden;
  transform: translateY(80px);
  transition: opacity 1.5s, visibility 1.5s, transform 1.5s;
}

.js-fadeUp_active {
  opacity: 1;
  visibility: visible;
  transform: translate(0px);
}

h2 img {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-80px);
  transition: opacity 1s, visibility 1s, transform 1s;
  transition-delay: 2s;
}

.js-fadeBottom_delay {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
}

.js-fadeTop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-80px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.js-fadeBottom {
  opacity: 0;
  visibility: hidden;
  transform: translateY(80px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.scroll {
  opacity: 1;
  visibility: visible;
  transform: translate(0px);
}

.js-fadeIn {
  transition: 1s;
  opacity: 0;
}

.fadeIn {
  opacity: 1;
}

.img-blur {
  opacity: 0;
  transition: transform 0.5s linear;
  animation-duration: 1.5s;
  animation-fill-mode: both;
}

.img-blur_active {
  animation-name: imageBlur;
  opacity: 1;
  transition: 0.5s;
}
@keyframes imageBlur {
  from {
    opacity: 0;
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }
  to {
    opacity: 1;
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
.fade_250ms {
  opacity: 0;
  visibility: hidden;
  transition: all 1s 250ms linear;
}

.fade_500ms {
  opacity: 0;
  visibility: hidden;
  transition: all 1s 500ms linear;
}

.fade_800ms {
  opacity: 0;
  visibility: hidden;
  transition: all 1s 800ms linear;
}

.fade_1s {
  opacity: 0;
  visibility: hidden;
  transition: all 1s 1s linear;
}

.fade_1200ms {
  opacity: 0;
  visibility: hidden;
  transition: all 1s 1200ms linear;
}

.scroll_lag {
  opacity: 1;
  visibility: visible;
}

div.style.line-height_after::after {
  animation: slideIn_left both 1.4s ease;
  animation-delay: 0.3s;
}
@keyframes slideIn_left {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media screen and (max-width: 768px) {
  body.Android .sec .wrap_flex .wrap .title .style::before {
    top: min(2.6666666667vw, 10px);
  }
}

@media screen and (max-width: 768px) {
  body.Android .sec .wrap_flex .wrap .title .style::after {
    top: min(2.6666666667vw, 10px);
  }
}/*# sourceMappingURL=style.css.map */