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

/*メディアクエリー
---------------------------------------------*/
/*変数
---------------------------------------------*/
/* medium:500, semiB:600 */
/* R:400,M:500 */
/* コンテンツ
---------------------------------------------*/
html,
body,
#wrapper {
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
@media screen and (min-width: 769px) {
  html,
  body,
  #wrapper {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  html,
  body,
  #wrapper {
    font-size: 12px;
  }
}
html a,
body a,
#wrapper a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition-duration: 0.6s;
}
@media screen and (min-width: 769px) {
  html a:hover,
  body a:hover,
  #wrapper a:hover {
    opacity: 0.6;
  }
}

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;
  }
}

/* ローディング画面 --------------------------------------- */
.loading_wrapper {
  background-color: #fff;
  width: 100%;
  height: 100svh;
  position: relative;
  position: fixed;
  z-index: 100;
}
.loading_wrapper .loading_flex {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  -moz-column-gap: 5.8666666667vw;
       column-gap: 5.8666666667vw;
}
.loading_wrapper .loading_flex.loading_fadeIn {
  opacity: 0;
  transition-duration: 1s;
}
.loading_wrapper .loading_flex.loading_fadeIn.on {
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .loading_wrapper .loading_flex div.pal {
    width: 22.9333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .loading_wrapper .loading_flex div.pal {
    width: 9.6527777778vw;
  }
}
@media screen and (max-width: 768px) {
  .loading_wrapper .loading_flex div.cross {
    width: 10.9333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .loading_wrapper .loading_flex div.cross {
    width: 4.5833333333vw;
  }
}
@media screen and (max-width: 768px) {
  .loading_wrapper .loading_flex div.shiseido {
    width: 28vw;
  }
}
@media screen and (min-width: 769px) {
  .loading_wrapper .loading_flex div.shiseido {
    width: 11.8055555556vw;
  }
}

/* 共通クレジットエリア --------------------------------------- */
.credit-area {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .credit-area {
    margin-top: 9.3333333333vw;
    padding-bottom: 13.8666666667vw;
    width: 83.4666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .credit-area {
    width: 33.4722222222vw;
    padding-bottom: 6.9444444444vw;
    margin-top: 2.3611111111vw;
  }
}
.credit-area ul.credit__list {
  display: grid;
}
@media screen and (max-width: 768px) {
  .credit-area ul.credit__list {
    row-gap: 2.4vw;
  }
}
@media screen and (min-width: 769px) {
  .credit-area ul.credit__list {
    row-gap: 0.625vw;
  }
}
.credit-area ul.credit__list li.credit__list__item a {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .credit-area ul.credit__list li.credit__list__item a {
    -moz-column-gap: 2.4vw;
         column-gap: 2.4vw;
  }
}
.credit-area ul.credit__list li.credit__list__item a div.credit {
  display: grid;
}
@media screen and (max-width: 768px) {
  .credit-area ul.credit__list li.credit__list__item a div.credit {
    grid-template-columns: 10.4vw 1fr;
    -moz-column-gap: 2.4vw;
         column-gap: 2.4vw;
  }
}
@media screen and (min-width: 769px) {
  .credit-area ul.credit__list li.credit__list__item a div.credit {
    -moz-column-gap: 0.7638888889vw;
         column-gap: 0.7638888889vw;
  }
}
.credit-area ul.credit__list li.credit__list__item a div.credit div.img {
  background-color: gray;
  grid-row: 1/4;
}
@media screen and (max-width: 768px) {
  .credit-area ul.credit__list li.credit__list__item a div.credit div.img {
    width: 10.4vw;
    height: 12.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .credit-area ul.credit__list li.credit__list__item a div.credit div.img {
    width: 3.1944444444vw;
    height: 3.75vw;
  }
}
.credit-area ul.credit__list li.credit__list__item a div.credit p {
  grid-column: 2;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .credit-area ul.credit__list li.credit__list__item a div.credit p {
    font-size: 2.9333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .credit-area ul.credit__list li.credit__list__item a div.credit p {
    font-size: 0.8333333333vw;
  }
}
.credit-area ul.credit__list li.credit__list__item a div.credit p.item {
  grid-row: 1;
}
.credit-area ul.credit__list li.credit__list__item a div.credit p.brand {
  grid-row: 2;
}
@media screen and (max-width: 768px) {
  .credit-area ul.credit__list li.credit__list__item a div.credit p.brand {
    margin-top: -0.5333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .credit-area ul.credit__list li.credit__list__item a div.credit p.brand {
    margin-top: -0.2777777778vw;
  }
}
.credit-area ul.credit__list li.credit__list__item a div.credit p.price {
  grid-row: 3;
}
.credit-area ul.credit__list li.credit__list__item a div.btn p {
  background-color: #857196;
  letter-spacing: 0.13em;
  color: #fff;
  line-height: 1.16;
  align-items: center;
  text-wrap: nowrap;
  font-family: "ivyora-text", serif;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .credit-area ul.credit__list li.credit__list__item a div.btn p {
    padding: 0.8vw 4vw 0.8vw;
    font-size: 3.2vw;
    border-radius: 1.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .credit-area ul.credit__list li.credit__list__item a div.btn p {
    padding: 0.2777777778vw 1.2319444444vw 0.2777777778vw;
    font-size: 0.9722222222vw;
    border-radius: 0.3284722222vw;
  }
}
.credit-area ul.credit__list li.credit__list__item a:has(.shop) div.btn p {
  background-color: transparent;
  border: solid 1px #fff;
  letter-spacing: 0.06em;
  color: #fff;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .credit-area ul.credit__list li.credit__list__item a:has(.shop) div.btn p {
    padding: 0.8vw 4vw 0.8vw;
    font-size: 3.2vw;
  }
}

.creditAjax_price__sale {
  margin-left: 5px;
  color: red;
}

.creditAjax_price__sale::before {
  content: "¥";
}

.creditAjax_price__off {
  color: red;
}
.creditAjax_price__off::before {
  content: "(";
}
.creditAjax_price__off::after {
  content: ")";
}

.creditAjax_link.creditAjax__saleOn .proper {
  text-decoration: line-through;
}

/* shop がある場合はホバーアニメーション無効 */
.creditAjax_link.no-hover .proper {
  text-decoration: none;
}
.creditAjax_link.no-hover .creditAjax_price__sale {
  display: none;
}
.creditAjax_link.no-hover .creditAjax_price__off {
  display: none;
}

.creditAjax_link.no-hover:hover,
.creditAjax_link.no-hover:hover .btn {
  transform: none !important;
  transition: none !important;
  cursor: default !important;
  opacity: 1;
}

/* main ----------------------------------- */
main {
  overflow: clip;
  color: #fff;
  font-family: "shippori-mincho-b1", sans-serif;
  background-color: #c4b3ad;
  transition: background-color 0.5s ease;
}
@media screen and (min-width: 769px) {
  main {
    display: flex;
  }
}

/* FV ----------------------------------- */
@media screen and (max-width: 768px) {
  .fv_dummy {
    width: 100%;
    height: 100svh;
  }
}

.fv {
  position: relative;
}
@media screen and (max-width: 768px) {
  .fv {
    width: 100%;
    position: fixed;
    top: 0;
    transition: opacity 0.7s ease;
  }
  .fv.op {
    opacity: 0;
  }
}
@media screen and (min-width: 769px) {
  .fv {
    width: 41%;
    height: 100svh;
    position: sticky;
    top: 0;
    left: 0;
  }
}
@media screen and (max-width: 768px) {
  .fv .img_area ul.zoom-slide {
    position: relative;
    width: 100%;
    height: 100svh; /* ファーストビューいっぱい */
    overflow: hidden;
  }
  .fv .img_area ul.zoom-slide li.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
  }
  .fv .img_area ul.zoom-slide li.slide:first-child {
    opacity: 1;
  }
  .fv .img_area ul.zoom-slide li.slide img {
    width: 100%;
    height: 100svh;
    -o-object-fit: cover;
       object-fit: cover;
    transform: scale(1);
    transition: transform 10s ease, opacity 3s ease;
  }
  .fv .img_area ul.zoom-slide li.slide.active {
    opacity: 1;
  }
  .fv .img_area ul.zoom-slide li.slide.active img {
    transform: scale(1.05);
  }
}
@media screen and (max-width: 768px) {
  .fv .ttl {
    color: #6a574f;
    position: absolute;
    top: 9.0666666667vw;
    left: 6.9333333333vw;
    width: 63.3893333333vw;
  }
}
@media screen and (min-width: 769px) {
  .fv .ttl {
    margin: 5.4166666667vw 0 0 7.0138888889vw;
    width: 24.0972222222vw;
  }
}
@media screen and (max-width: 768px) {
  .fv .logo_area {
    display: flex;
    position: absolute;
    align-items: center;
    background-color: #fff;
    left: 0;
    bottom: 0;
    -moz-column-gap: 4.8vw;
         column-gap: 4.8vw;
    width: 51.7333333333vw;
    height: 13.8666666667vw;
    border-radius: 0 2.8453333333vw 0 0;
    justify-content: center;
  }
  .fv .logo_area .pal {
    width: 13.8666666667vw;
  }
  .fv .logo_area .cross {
    width: 6.4vw;
  }
  .fv .logo_area .shiseido {
    width: 17.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .fv .brand-list_area {
    position: absolute;
    left: 7.0138888889vw;
    bottom: 4.1666666667vw;
    font-family: "ivyora-text", serif;
  }
  .fv .brand-list_area .brand-list_wrapper {
    transition-delay: 0.5s;
    transition-duration: 0.5s;
    opacity: 0;
  }
  .fv .brand-list_area .brand-list_wrapper.fv_fadeIn_active {
    opacity: 1;
  }
  .fv .brand-list_area .brand-list_wrapper p {
    font-size: 1.5277777778vw;
    font-style: italic;
    letter-spacing: -0.01em;
    margin-bottom: 1.3888888889vw;
  }
  .fv .brand-list_area .brand-list_wrapper ul li {
    margin-bottom: 0.6944444444vw;
  }
  .fv .brand-list_area .brand-list_wrapper ul li a {
    font-size: 2.0833333333vw;
    transition-duration: 0.3s;
  }
  .fv .brand-list_area .brand-list_wrapper ul li a span {
    font-style: italic;
    margin-right: 1.3888888889vw;
  }
  .fv .brand-list_area .brand-list_wrapper ul li:first-child.current a {
    color: #857196;
  }
  .fv .brand-list_area .brand-list_wrapper ul li:nth-child(2).current a {
    color: #796064;
  }
  .fv .brand-list_area .brand-list_wrapper ul li:last-child.current a {
    color: #5a6983;
  }
}

/* メインエリア ----------------------------------- */
.main_wrapper {
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 769px) {
  .main_wrapper {
    width: 59%;
  }
}
@media screen and (min-width: 769px) {
  .main_wrapper .main_inner {
    width: 72%;
    margin-left: 4.7916666667vw;
    position: relative;
  }
}
@media screen and (min-width: 769px) {
  .main_wrapper .main_inner .pc-fvImg_dummy {
    width: 100%;
    height: 100svh;
    position: relative;
    z-index: -2;
  }
}
@media screen and (min-width: 769px) {
  .main_wrapper .main_inner .pc-fvImg {
    position: fixed;
    z-index: -1;
    top: 0;
    width: 42.4%;
    margin: 0 auto;
    transition: opacity 0.7s ease;
  }
  .main_wrapper .main_inner .pc-fvImg.op {
    opacity: 0;
  }
  .main_wrapper .main_inner .pc-fvImg ul.zoom-slide {
    position: relative;
    width: 100%;
    height: 100svh; /* ファーストビューいっぱい */
    overflow: hidden;
  }
  .main_wrapper .main_inner .pc-fvImg ul.zoom-slide li.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
  }
  .main_wrapper .main_inner .pc-fvImg ul.zoom-slide li.slide:first-child {
    opacity: 1;
  }
  .main_wrapper .main_inner .pc-fvImg ul.zoom-slide li.slide img {
    width: 100%;
    height: 100svh;
    -o-object-fit: cover;
       object-fit: cover;
    transform: scale(1);
    transition: transform 6s ease; /* ズーム時間 */
  }
  .main_wrapper .main_inner .pc-fvImg ul.zoom-slide li.slide.active {
    opacity: 1;
  }
  .main_wrapper .main_inner .pc-fvImg ul.zoom-slide li.slide.active img {
    transform: scale(1.05);
  }
  .main_wrapper .main_inner .pc-fvImg .logo_area {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #fff;
    width: 13.1944444444vw;
    height: 3.3333333333vw;
    border-radius: 0.5194444444vw 0 0 0;
    justify-content: center;
  }
  .main_wrapper .main_inner .pc-fvImg .logo_area .pal {
    width: 3.6111111111vw;
  }
  .main_wrapper .main_inner .pc-fvImg .logo_area .cross {
    width: 1.6666666667vw;
    margin-left: 0.9722222222vw;
    margin-right: 0.9027777778vw;
  }
  .main_wrapper .main_inner .pc-fvImg .logo_area .shiseido {
    width: 4.4444444444vw;
  }
}

/* 説明文 ----------------------------------- */
@media screen and (max-width: 768px) {
  .description_area {
    padding-top: 21.3333333333vw;
    margin-bottom: 16.5333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .description_area {
    padding-top: 9.4444444444vw;
    margin-bottom: 10.8333333333vw;
  }
}
.description_area p {
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.01em;
}
@media screen and (max-width: 768px) {
  .description_area p {
    line-height: 2.1428571429;
    font-size: 3.7333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .description_area p {
    line-height: 2.4444444444;
    font-size: 1.25vw;
  }
}

/* SP ブランドリスト ----------------------------------- */
@media screen and (max-width: 768px) {
  .brand-list_area {
    margin-bottom: 22.9333333333vw;
  }
  .brand-list_area h2 {
    text-align: center;
    font-family: "ivyora-text", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 4.8vw;
    margin-bottom: 5.3333333333vw;
  }
  .brand-list_area ul {
    display: flex;
    justify-content: center;
    -moz-column-gap: 1.0666666667vw;
         column-gap: 1.0666666667vw;
  }
  .brand-list_area ul li {
    width: 30.4vw;
    height: 56.5333333333vw;
  }
  .brand-list_area ul li a {
    display: block;
    position: relative;
    height: 56.5333333333vw;
  }
  .brand-list_area ul li a p {
    text-align: center;
    font-family: "ivyora-text", serif;
    font-weight: 500;
    color: #fff;
    font-size: 4vw;
    margin-top: 2.6666666667vw;
    line-height: 1.4166666667;
  }
  .brand-list_area ul li a .arrow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2.9333333333vw;
  }
  .brand-list_area ul li:nth-child(2) p {
    font-size: 3.2vw;
  }
}

/* ブランドエリア 共通 ----------------------------------- */
@media screen and (max-width: 768px) {
  .brand_area {
    padding-bottom: 42.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area {
    padding-bottom: 11.1111111111vw;
  }
}
.brand_area h3 {
  text-align: center;
  font-family: "ivyora-text", serif;
}
@media screen and (max-width: 768px) {
  .brand_area h3 {
    margin-bottom: 8.5333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area h3 {
    margin-bottom: 3.3333333333vw;
  }
}
.brand_area h3 .ttl-num {
  font-weight: 500;
  font-style: italic;
}
@media screen and (max-width: 768px) {
  .brand_area h3 .ttl-num {
    font-size: 3.7333333333vw;
    margin-bottom: 2.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area h3 .ttl-num {
    font-size: 1.4583333333vw;
  }
}
.brand_area h3 .brand {
  font-weight: 400;
  letter-spacing: -0.03em;
}
@media screen and (max-width: 768px) {
  .brand_area h3 .brand {
    font-size: 15.2vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area h3 .brand {
    font-size: 5.9027777778vw;
    line-height: 1.1529411765;
  }
}
.brand_area h3 .staff {
  font-weight: 500;
  padding-bottom: 1%;
}
@media screen and (max-width: 768px) {
  .brand_area h3 .staff {
    font-size: 3.4666666667vw;
    margin-top: 5.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area h3 .staff {
    font-size: 1.3194444444vw;
    margin-top: 1.4583333333vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .main-img {
    width: 38.8194444444vw;
    margin: 0 auto;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content {
    padding-top: 12.9166666667vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .staff_area {
    width: 38.8194444444vw;
    margin: 0 auto;
  }
}
.brand_area .content .staff_area .staff-img {
  margin-left: auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .brand_area .content .staff_area .staff-img {
    width: 94.4vw;
    padding-top: 33.3333333333vw;
    margin-bottom: 14.4vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .staff_area .staff-img {
    width: 36.6666666667vw;
    margin-bottom: 5.625vw;
  }
}
.brand_area .content .staff_area .staff-img h4 {
  display: grid;
  position: absolute;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .brand_area .content .staff_area .staff-img h4 {
    grid-template-columns: 4vw auto;
    height: 21.3333333333vw;
    top: 16.8vw;
    left: 5vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .staff_area .staff-img h4 {
    grid-template-columns: 1.5972222222vw auto;
    height: 8.2638888889vw;
    top: -6.3888888889vw;
    left: 1.4583333333vw;
  }
}
.brand_area .content .staff_area .staff-img h4::before {
  content: "";
  border-left: solid 3px #857196;
  height: 100%;
  grid-column: 1/2;
  grid-row: 1/3;
  position: relative;
  display: block;
  transition: all 0.8s ease;
  clip-path: inset(0 0 100% 0);
}
@media screen and (min-width: 769px) {
  .brand_area .content .staff_area .staff-img h4::before {
    border-left: solid 0.3104166667vw #857196;
  }
}
.brand_area .content .staff_area .staff-img h4.clip_anim::before {
  clip-path: inset(0);
}
.brand_area .content .staff_area .staff-img h4 .staff-name {
  font-family: "ivyora-text", serif;
  grid-column: 2/3;
  grid-row: 1/2;
}
@media screen and (max-width: 768px) {
  .brand_area .content .staff_area .staff-img h4 .staff-name {
    font-size: 5.8666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .staff_area .staff-img h4 .staff-name {
    font-size: 2.2916666667vw;
  }
}
.brand_area .content .staff_area .staff-img h4 .brand-name {
  letter-spacing: 0.04em;
  font-weight: 600;
  grid-column: 2/3;
  grid-row: 2/3;
}
@media screen and (max-width: 768px) {
  .brand_area .content .staff_area .staff-img h4 .brand-name {
    font-size: 3.2vw;
    margin-top: -5.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .staff_area .staff-img h4 .brand-name {
    font-size: 1.25vw;
    margin-top: -2vw;
  }
}
.brand_area .content .staff_area .staff-img .txt {
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .brand_area .content .staff_area .staff-img .txt {
    line-height: 1.7692307692;
    width: 85.3333333333vw;
    font-size: 3.4666666667vw;
    margin-top: 4vw;
    margin-left: 3.7333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .staff_area .staff-img .txt {
    line-height: 1.8;
    width: 34.3055555556vw;
    font-size: 1.1805555556vw;
    margin: 1.5972222222vw auto 0;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .style-point_area {
    width: 38.8194444444vw;
    margin: 5.625vw auto 0;
  }
}
.brand_area .content .style-point_area .style-point_wrapper {
  position: relative;
}
@media screen and (min-width: 769px) {
  .brand_area .content .style-point_area .style-point_wrapper {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .brand_area .content .style-point_area .style-point_wrapper ul.img_area {
    width: 88vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .style-point_area .style-point_wrapper ul.img_area {
    width: 34.1666666667vw;
  }
}
.brand_area .content .style-point_area .style-point_wrapper .style-txt {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .brand_area .content .style-point_area .style-point_wrapper .style-txt {
    width: 30.0266666667vw;
    top: -1.6vw;
    right: 0;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .style-point_area .style-point_wrapper .style-txt {
    width: 10.8333333333vw;
    top: 0.6944444444vw;
    right: 0.3472222222vw;
  }
}
.brand_area .content .style-point_area .style-point_wrapper .style-txt .txt-img {
  transition-delay: 0.3s;
}
@media screen and (min-width: 769px) {
  .brand_area .content .style-point_area .credit-area {
    margin-left: 0.4861111111vw;
  }
}
.brand_area .content .point_area {
  background-color: #faf6f4;
  color: #72635d;
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area {
    width: 94.6666666667vw;
    border-radius: 1.8666666667vw;
    margin: 0 auto 24.8vw;
    padding-bottom: 13.6vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .point_area {
    width: 45.1388888889vw;
    border-radius: 0.725vw;
    margin: 0 auto 8.0555555556vw;
    padding-bottom: 7.2222222222vw;
    margin-left: -1.3888888889vw;
  }
}
.brand_area .content .point_area .point_ttl {
  text-align: center;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area .point_ttl {
    -moz-column-gap: 19.4666666667vw;
         column-gap: 19.4666666667vw;
    padding-top: 9.8666666667vw;
    padding-bottom: 3.4666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .point_area .point_ttl {
    -moz-column-gap: 6.8055555556vw;
         column-gap: 6.8055555556vw;
    padding-top: 4.2361111111vw;
    padding-bottom: 1.3194444444vw;
  }
}
.brand_area .content .point_area .point_ttl::before {
  content: "{";
  display: block;
  font-family: "garamond-premier-pro-display", serif;
  font-weight: 300;
  color: #857196;
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area .point_ttl::before {
    font-size: 14.9333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .point_area .point_ttl::before {
    font-size: 5.8333333333vw;
  }
}
.brand_area .content .point_area .point_ttl::after {
  content: "}";
  display: block;
  font-family: "garamond-premier-pro-display", serif;
  font-weight: 300;
  color: #857196;
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area .point_ttl::after {
    font-size: 14.9333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .point_area .point_ttl::after {
    font-size: 5.8333333333vw;
  }
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area .point_ttl .point__ttl_txt {
    padding-top: 1.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .point_area .point_ttl .point__ttl_txt {
    padding-top: 0.5555555556vw;
  }
}
.brand_area .content .point_area .point_ttl .point__ttl_txt h5 {
  font-family: "ivyora-text", serif;
  font-weight: 400;
  font-style: italic;
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area .point_ttl .point__ttl_txt h5 {
    font-size: 6.1333333333vw;
    line-height: 1.1304347826;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .point_area .point_ttl .point__ttl_txt h5 {
    font-size: 2.3611111111vw;
    line-height: 1.1470588235;
  }
}
.brand_area .content .point_area .point_ttl .point__ttl_txt .txtJa {
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 2.25;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area .point_ttl .point__ttl_txt .txtJa {
    font-size: 3.2vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .point_area .point_ttl .point__ttl_txt .txtJa {
    font-size: 1.0416666667vw;
    padding-top: 0.2083333333vw;
  }
}
.brand_area .content .point_area .point_img {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area .point_img {
    width: 80.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .point_area .point_img {
    width: 31.25vw;
  }
}
.brand_area .content .point_area .point_txt_area {
  position: relative;
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area .point_txt_area {
    margin: 5.0666666667vw auto 2.6666666667vw;
    width: 75.7333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .point_area .point_txt_area {
    width: 30.5555555556vw;
    margin: 2.0833333333vw auto 0.6944444444vw;
  }
}
.brand_area .content .point_area .point_txt_area .treat {
  position: absolute;
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area .point_txt_area .treat {
    width: 21vw;
    top: -11vw;
    left: -4.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .point_area .point_txt_area .treat {
    width: 7.3611111111vw;
    top: -3.8888888889vw;
    left: -1.6666666667vw;
  }
}
.brand_area .content .point_area .point_txt_area .txt {
  line-height: 1.6666666667;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area .point_txt_area .txt {
    font-size: 3.2vw;
    margin-bottom: 2.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .point_area .point_txt_area .txt {
    font-size: 1.0416666667vw;
    margin-bottom: 1.3888888889vw;
  }
}
.brand_area .content .point_area .point_txt_area .btn a {
  display: inline-block;
  border-bottom: solid 1px #72635d;
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area .point_txt_area .btn a {
    padding-bottom: 0.8vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .point_area .point_txt_area .btn a {
    line-height: 2.4666666667;
  }
}
.brand_area .content .point_area .point_txt_area .btn a p {
  color: #72635d;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area .point_txt_area .btn a p {
    font-size: 2.9333333333vw;
  }
}
.brand_area .content .point_area .point_txt_area .btn a p span {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .brand_area .content .point_area .point_txt_area .btn a p span {
    width: 2.3626666667vw;
    margin-left: 0.5333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content .point_area .point_txt_area .btn a p span {
    width: 0.9027777778vw;
  }
}
@media screen and (max-width: 768px) {
  .brand_area .content.shiseido-staff h4 {
    left: 6.4vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content.shiseido-staff h4 {
    left: 8.4027777778vw;
  }
}
.brand_area .content.shiseido-staff .staff-img {
  margin-left: 0;
}
@media screen and (max-width: 768px) {
  .brand_area .content.shiseido-staff .staff-img p.txt {
    margin-left: 6.9333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content.shiseido-staff .staff-img p.txt {
    margin-left: 1.3888888889vw;
  }
}
@media screen and (max-width: 768px) {
  .brand_area .content.shiseido-staff .style-point_area .style-point_wrapper .img_area {
    margin-left: auto;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content.shiseido-staff .style-point_area .style-point_wrapper .img_area {
    margin-left: auto;
  }
}
@media screen and (min-width: 769px) {
  .brand_area .content.shiseido-staff .style-point_area .credit-area {
    margin-right: 0.1388888889vw;
    margin-left: auto;
  }
}
.brand_area .content.shiseido-staff .point_area {
  margin-bottom: 0;
}

.brand_area#galante.show {
  background-color: #b2bab9;
}
@media screen and (max-width: 768px) {
  .brand_area#galante h3 .brand {
    font-size: 8.8vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area#galante h3 .brand {
    font-size: 3.2vw;
    margin-top: 1.1111111111vw;
  }
}
.brand_area#galante .content h4::before {
  border-left: solid 3px #796064;
}
@media screen and (min-width: 769px) {
  .brand_area#galante .content h4::before {
    border-left: solid 0.3104166667vw #796064;
  }
}
.brand_area#galante .content .style-point_area .style-txt {
  top: auto;
  bottom: 5%;
  right: 3%;
}
@media screen and (max-width: 768px) {
  .brand_area#galante .content .style-point_area .style-txt {
    width: 53.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area#galante .content .style-point_area .style-txt {
    width: 20.625vw;
  }
}
.brand_area#galante .content .style-point_area .credit-area .btn p {
  background-color: #796064;
}
.brand_area#galante .content .point_area .point_ttl::before {
  color: #796064;
}
.brand_area#galante .content .point_area .point_ttl::after {
  color: #796064;
}

.brand_area#kastane.show {
  background-color: #bab1c0;
}
.brand_area#kastane .content h4::before {
  border-left: solid 3px #5a6983;
}
@media screen and (min-width: 769px) {
  .brand_area#kastane .content h4::before {
    border-left: solid 0.3104166667vw #5a6983;
  }
}
@media screen and (max-width: 768px) {
  .brand_area#kastane .content .style-point_area .style-txt {
    width: 21.7626666667vw;
    top: -2.6666666667vw;
    right: 1.8666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .brand_area#kastane .content .style-point_area .style-txt {
    width: 8.4722222222vw;
    top: -3%;
  }
}
.brand_area#kastane .content .style-point_area .creditAjax_link .btn p {
  background-color: #5a6983;
}
.brand_area#kastane .content .style-point_area .creditAjax_link:has(.shop) div.btn p {
  background-color: #bab1c0;
}
.brand_area#kastane .content .point_area .point_ttl::before {
  color: #5a6983;
}
.brand_area#kastane .content .point_area .point_ttl::after {
  color: #5a6983;
}

/* 上へボタン ----------------------------------- */
.top-arrow {
  position: fixed;
  z-index: 50;
  opacity: 0;
  transition-duration: 0.6s;
  right: 0;
  bottom: 0;
}
.top-arrow.top-arrow_active {
  opacity: 1;
}
.top-arrow a {
  display: block;
  position: relative;
  background-color: #faf6f4;
  opacity: 0.8;
}
@media screen and (max-width: 768px) {
  .top-arrow a {
    width: 11.4666666667vw;
    height: 11.4666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .top-arrow a {
    width: 43px;
    height: 43px;
  }
}
.top-arrow a img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .top-arrow a img {
    width: 2.8666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .top-arrow a img {
    width: 10.75px;
  }
}

/* 自動取得エリア ----------------------------------- */
.other_area {
  position: relative;
  background-color: #faf6f4;
}
@media screen and (max-width: 768px) {
  .other_area {
    padding-top: 2.6666666667vw;
    padding-bottom: 24vw;
  }
}
@media screen and (min-width: 769px) {
  .other_area {
    width: 52.0833333333vw;
    border-radius: 0.6763888889vw;
    padding-bottom: 7.2916666667vw;
    margin: 0 auto;
    overflow: clip;
    margin-left: -4.7916666667vw;
  }
}
@media screen and (max-width: 768px) {
  .other_area .loop-txt_area {
    margin-bottom: 14.9333333333vw;
  }
}
.other_area .loop-txt_area ul {
  display: flex;
  gap: 2rem;
  animation: loop-slide 20s linear infinite 1s both;
  text-wrap: nowrap;
  font-family: "ivyora-text", serif;
  font-weight: 400;
  color: #72635d;
}
@media screen and (max-width: 768px) {
  .other_area .loop-txt_area ul {
    font-size: 5.8666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .other_area .loop-txt_area ul {
    font-size: 2.0138888889vw;
    padding-top: 1.3888888889vw;
    padding-bottom: 5.8333333333vw;
  }
}
.other_area .loop-txt_area ul li {
  white-space: nowrap;
}
@keyframes loop-slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.other_area div.other-credit {
  position: relative;
}
.other_area div.other-credit ul {
  width: 100%;
  position: relative;
  display: grid;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .other_area div.other-credit ul {
    grid-template-columns: 42.1333333333vw 42.1333333333vw;
    gap: 6.1333333333vw 3.4666666667vw;
    padding-bottom: 12.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .other_area div.other-credit ul {
    grid-template-columns: 12.5vw 12.5vw 12.5vw;
    gap: 3.8194444444vw 1.0416666667vw;
    padding-bottom: 5.1388888889vw;
  }
}
.other_area div.other-credit li {
  flex-shrink: 0;
  color: #72635d;
}
.other_area div.other-credit .zetaAjax_link {
  display: block;
}
.other_area div.other-credit .zetaAjax_link .flex {
  display: flex;
}
@media screen and (min-width: 769px) {
  .other_area div.other-credit .zetaAjax_link .flex {
    margin-top: 0.3472222222vw;
  }
}
.other_area div.other-credit .zetaAjax_couponArea {
  position: relative;
}
.other_area div.other-credit .zetaAjax_img__120,
.other_area div.other-credit .zetaAjax_img__360,
.other_area div.other-credit .zetaAjax_img__1500 {
  width: 100%;
}
.other_area div.other-credit .zetaAjax_brand {
  line-height: 1.49;
  font-family: "shippori-mincho-b1", sans-serif;
  color: #72635d;
}
@media screen and (max-width: 768px) {
  .other_area div.other-credit .zetaAjax_brand {
    font-size: 2.9333333333vw;
    margin-top: 2.1333333333vw;
    margin-bottom: 0.8vw;
    padding: 0 1.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .other_area div.other-credit .zetaAjax_brand {
    font-size: 0.9027777778vw;
    margin-top: 0.6944444444vw;
    margin-bottom: 0.2083333333vw;
    padding: 0 0.3472222222vw;
  }
}
.other_area div.other-credit .zetaAjax_name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: "shippori-mincho-b1", sans-serif;
  line-height: 1.4;
  color: #72635d;
}
@media screen and (max-width: 768px) {
  .other_area div.other-credit .zetaAjax_name {
    font-size: 2.9333333333vw;
    margin-bottom: 0.8vw;
    padding: 0 1.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .other_area div.other-credit .zetaAjax_name {
    font-size: 0.9027777778vw;
    margin-bottom: 0.2083333333vw;
    padding: 0 0.3472222222vw;
  }
}
.other_area div.other-credit .zetaAjax_proper {
  font-family: "shippori-mincho-b1", sans-serif;
  color: #72635d;
}
@media screen and (max-width: 768px) {
  .other_area div.other-credit .zetaAjax_proper {
    font-size: 2.9333333333vw;
    padding: 0 1.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .other_area div.other-credit .zetaAjax_proper {
    font-size: 0.9027777778vw;
    padding: 0 0.3472222222vw;
  }
}
.other_area div.other-credit .zetaAjax_proper::before {
  content: "¥";
}
.other_area div.other-credit .zetaAjax_proper__onSale .zetaAjax_proper {
  text-decoration: line-through;
}
.other_area div.other-credit .zetaAjax_sale {
  color: #ee2e2e;
  font-family: "shippori-mincho-b1", sans-serif;
}
@media screen and (max-width: 768px) {
  .other_area div.other-credit .zetaAjax_sale {
    font-size: 2.9333333333vw;
    padding: 0 1.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .other_area div.other-credit .zetaAjax_sale {
    font-size: 0.7638888889vw;
    margin-left: 0.3472222222vw;
  }
}
.other_area div.other-credit .zetaAjax_sale::before {
  content: "¥";
}
.other_area div.other-credit .zetaAjax_off {
  color: #ee2e2e;
  font-family: "shippori-mincho-b1", sans-serif;
}
@media screen and (max-width: 768px) {
  .other_area div.other-credit .zetaAjax_off {
    font-size: 2.9333333333vw;
    padding: 0 1.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .other_area div.other-credit .zetaAjax_off {
    font-size: 0.7638888889vw;
  }
}
.other_area div.other-credit .zetaAjax_off::before {
  content: "(";
}
.other_area div.other-credit .zetaAjax_off::after {
  content: ")";
}
.other_area .btn a {
  position: relative;
  background-color: #72635d;
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .other_area .btn a {
    width: 62.9333333333vw;
    height: 10.6666666667vw;
    border-radius: 1.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .other_area .btn a {
    width: 20vw;
    height: 3.4027777778vw;
    border-radius: 0.3472222222vw;
  }
}
.other_area .btn a p {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "ivyora-text", serif;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .other_area .btn a p {
    font-size: 5.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .other_area .btn a p {
    font-size: 1.5972222222vw;
  }
}

/* インフォメーション ----------------------------------- */
@media screen and (max-width: 768px) {
  .information_area {
    padding-top: 22.1333333333vw;
    padding-bottom: 42.1333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .information_area {
    padding-top: 9.375vw;
    padding-bottom: 12.0833333333vw;
  }
}
.information_area h2 {
  text-align: center;
  font-family: "ivyora-text", serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 768px) {
  .information_area h2 {
    font-size: 4.8vw;
    margin-bottom: 2.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .information_area h2 {
    font-size: 1.3194444444vw;
    margin-bottom: 0.9722222222vw;
  }
}
@media screen and (max-width: 768px) {
  .information_area .wrapper.hair_wrapper {
    margin-bottom: 10.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .information_area .wrapper.hair_wrapper {
    margin-bottom: 4.1666666667vw;
  }
}
.information_area .wrapper p {
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .information_area .wrapper p {
    font-size: 5.0666666667vw;
    line-height: 1.3157894737;
    margin-bottom: 5.8666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .information_area .wrapper p {
    font-size: 1.9444444444vw;
    line-height: 1.3214285714;
    margin-bottom: 2.0138888889vw;
  }
}
.information_area .wrapper .banner {
  background-color: gray;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .information_area .wrapper .banner {
    width: 85.6vw;
  }
}
@media screen and (min-width: 769px) {
  .information_area .wrapper .banner {
    width: 36.9444444444vw;
  }
}

/* スタッフインスタグラム ----------------------------------- */
@media screen and (max-width: 768px) {
  .staff-instagram_area {
    padding-bottom: 31.2vw;
  }
}
@media screen and (min-width: 769px) {
  .staff-instagram_area {
    padding-bottom: 14.6527777778vw;
  }
}
.staff-instagram_area h2 {
  text-align: center;
  font-family: "ivyora-text", serif;
  font-weight: 400;
  font-style: italic;
}
@media screen and (max-width: 768px) {
  .staff-instagram_area h2 {
    font-size: 5.6vw;
    margin-bottom: 11.7333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .staff-instagram_area h2 {
    font-size: 1.8055555556vw;
    margin-bottom: 3.3333333333vw;
  }
}
.staff-instagram_area .staff_area ul {
  display: grid;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .staff-instagram_area .staff_area ul {
    grid-template-columns: 39.2vw 39.2vw;
    -moz-column-gap: 5.0666666667vw;
         column-gap: 5.0666666667vw;
    row-gap: 10.9333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .staff-instagram_area .staff_area ul {
    grid-template-columns: 12.5vw 12.5vw;
    -moz-column-gap: 3.9583333333vw;
         column-gap: 3.9583333333vw;
    row-gap: 4.4444444444vw;
  }
}
.staff-instagram_area .staff_area ul li a p {
  font-family: "ivyora-text", serif;
  text-align: center;
}
.staff-instagram_area .staff_area ul li a p.staff_name {
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .staff-instagram_area .staff_area ul li a p.staff_name {
    font-size: 5.6vw;
    margin-top: 3.2vw;
    margin-bottom: 1.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .staff-instagram_area .staff_area ul li a p.staff_name {
    font-size: 1.8055555556vw;
    margin-top: 1.0416666667vw;
    margin-bottom: 0.8333333333vw;
  }
}
.staff-instagram_area .staff_area ul li a p.brand {
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .staff-instagram_area .staff_area ul li a p.brand {
    font-size: 2.6666666667vw;
    line-height: 1.4;
  }
}
@media screen and (min-width: 769px) {
  .staff-instagram_area .staff_area ul li a p.brand {
    font-size: 0.8333333333vw;
    line-height: 1.4166666667;
  }
}

/* スタッフクレジット ----------------------------------- */
@media screen and (max-width: 768px) {
  .staff-credit_area {
    padding-bottom: 49.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .staff-credit_area {
    padding-bottom: 12.7777777778vw;
  }
}
.staff-credit_area h2 {
  text-align: center;
  font-family: "ivyora-text", serif;
  font-weight: 400;
  font-style: italic;
}
@media screen and (max-width: 768px) {
  .staff-credit_area h2 {
    font-size: 5.6vw;
    margin-bottom: 11.7333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .staff-credit_area h2 {
    font-size: 1.8055555556vw;
    margin-bottom: 3.3333333333vw;
  }
}
@media screen and (max-width: 768px) {
  .staff-credit_area .staff {
    margin-bottom: 8vw;
  }
}
@media screen and (min-width: 769px) {
  .staff-credit_area .staff {
    margin-bottom: 2.2222222222vw;
  }
}
.staff-credit_area .staff p {
  font-family: "ivyora-text", serif;
  font-weight: 500;
  text-align: center;
}
.staff-credit_area .staff p.profession {
  letter-spacing: 0.03em;
}
@media screen and (max-width: 768px) {
  .staff-credit_area .staff p.profession {
    font-size: 3.4666666667vw;
    margin-bottom: 1.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .staff-credit_area .staff p.profession {
    font-size: 1.1111111111vw;
    margin-bottom: 0.5555555556vw;
  }
}
.staff-credit_area .staff p.name a {
  display: block;
}
@media screen and (max-width: 768px) {
  .staff-credit_area .staff p.name a {
    font-size: 5.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .staff-credit_area .staff p.name a {
    font-size: 1.6666666667vw;
  }
}
.staff-credit_area .staff p.name a span {
  display: inline-block;
  vertical-align: bottom;
}
@media screen and (max-width: 768px) {
  .staff-credit_area .staff p.name a span {
    width: 4.5333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .staff-credit_area .staff p.name a span {
    width: 1.5972222222vw;
  }
}
.staff-credit_area .staff.staff2 {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .staff-credit_area .staff.staff2 p.name {
    font-size: 5.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .staff-credit_area .staff.staff2 p.name {
    font-size: 1.6666666667vw;
  }
}

/* 無限スクロール ----------------------------------- */
@media screen and (min-width: 769px) {
  .infinite-scroll_area {
    width: 20%;
    position: absolute;
    top: 0;
    right: 0;
    height: 100svh;
    overflow: clip;
    transition: opacity 0.7s ease;
    opacity: 1;
  }
  .infinite-scroll_area.op {
    opacity: 0;
  }
  .infinite-scroll_area ul {
    writing-mode: vertical-rl;
    display: flex;
    margin: 0 auto;
    animation-name: loop-slide-vl;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .infinite-scroll_area ul li {
    text-wrap: nowrap;
    font-family: "ivyora-text", serif;
    font-weight: 400;
    font-size: 3.8194444444vw;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
  }
}

@keyframes loop-slide-vl {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
/* blurStep
===================================================== */
.fade-clip.img img {
  opacity: 0;
  clip-path: inset(0 100% 0 0); /* 左から右に隠す */
  filter: blur(20px);
  transition: opacity 1s ease, clip-path 1s ease, filter 1s ease;
}
.fade-clip.img.active img {
  opacity: 1;
  clip-path: inset(0% 0% 0% 0%);
  filter: blur(0);
}

.fade-clip.txt {
  opacity: 0;
  clip-path: inset(0 100% 0 0); /* 左から右に隠す */
  filter: blur(20px);
  transition: opacity 1.6s ease, clip-path 2s ease, filter 1s ease;
}
.fade-clip.txt.active {
  opacity: 1;
  clip-path: inset(0% 0% 0% 0%);
  filter: blur(0);
}

/* zoomout-fade ------------------------------ */
.zoomout-fade {
  overflow: clip;
}
.zoomout-fade img {
  transition: transform 3s ease, opacity 1s ease;
  opacity: 0;
  transform: scale(1.05);
}
.zoomout-fade.zoomout-active img {
  opacity: 1;
  transform: scale(1);
}

/* ズームスライダー ------------------------------ */
.zoom-slide .slick-slide img {
  transition: transform 10s ease, opacity 3s ease;
  opacity: 0;
  transform: scale(1);
}
.zoom-slide .slick-slide.slick-active img {
  opacity: 1;
  transform: scale(1.05); /* ズーム */
}

.fadeIn {
  opacity: 0;
  transition-duration: 0.8s;
}
.fadeIn.fadeIn_active {
  opacity: 1;
}/*# sourceMappingURL=style.css.map */