@charset "UTF-8";

/*//////////////////////////////////////////////////

Title : 4thanniversary.css

//////////////////////////////////////////////////*/
/* ========================================================
                      * Layout style *
========================================================= */
body {
}

main {
  max-width: inherit;
}

footer {
  margin-top: 0;
}

a,
a:before,
a:after,
a img {
  transition: opacity .3s ease-in-out,
    color .3s ease-in-out,
    background-color .3s ease-in-out,
    border-color .3s ease-in-out,
    text-shadow .3s ease-in-out,
    text-weight .3s ease-in-out;
}

h1 {
  padding: 0;
}

main {
  width: 100%;
  margin: 0 auto;
  max-width: none;
}

/*CK用　追記*/
.contents {
  padding-top: 124px;
  background-color: transparent!important;
}
.lp_contents p, .lp_contents dt, .lp_contents dd {
  text-align: center;
}
#Wrap, .wrapTop, .wrapBottom {
  width: 100%!important;
}
.page-share-btn {
  display: none;
}
/* ===================
  　　 General
=================== */

@font-face {
  font-family: 'diot';
  src: url('../img/Didot-01.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'diot_italic';
  src: url('../img/Didot-Italic-02.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'diot_bold';
  src: url('../img/Didot-Bold-03.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
	font-family: 'Margaret';
	src: url(../font/MARGARET-BOLD.OTF);
}

.txt_en {
  font-family: Margaret, serif;
}

.txt_en_bold {
  font-family: Margaret, serif;
  font-weight: 700;
}

.txt_en_num {
}

.txt_mincho {
  font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "メイリオ", Meiryo, Verdana, sans-serif;
}

.txt_center {
  text-align: center;
}

.txt_grey {
  color: #4d4d4d;
}

/* Clearfix */
.clearfix:after {
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  font-size: 0;
  content: ".";
}

.clearfix {
  min-height: 1px;
  clear: both;
}

* html .clearfix {
  height: 1px;
}

.hidden {
  display: none;
}

/* ===================
  LP Contents
=================== */

html {
}

.lp_wrap {
  background-size: 100% auto;
}

.lp_contents {
  /*width: 120rem;*/
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 0;
  font-family: yu-gothic-pr6n, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.04em;
  position: relative;
}
.lp_contents::after {
  display: block;
  position: fixed;
  content: '';
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(225deg, #f2e8ff 0%, #f1edf5 19.21%, #e5f6fc 40.39%, #f7f7e4 65.02%, #fae8dd 84.24%, #fde5d6 100%);
  z-index: -1;
}

.lp_contents *,
.lp_contents *:before,
.lp_contents *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.lp_contents ul,
.lp_contents li {
  list-style: none;
}

.lp_contents,
.lp_contents a {
  color: #6E6E6E;
}

.lp_contents a:hover {
  opacity: .7;
}

.lp_wrap {
  overflow: hidden;
}

.lp_wrap img {
  max-width: 100%;
}

/* -- List -- */

.list ul {
  letter-spacing: -0.4em;
}

.list ul li {
  display: inline-block;
  letter-spacing: 0.08em;
  vertical-align: top;
}

/* -- List Dot -- */

.list_dot,
.list.list_dot {
  margin: 1em 0;
}

.list_dot .list_dot {
  margin: 0 0 .5em;
}

.list_dot ul,
.list.list_dot ul {
  margin: 0;
  padding-left: 1.5em !important;
}

.list_dot ul li {
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  list-style-type: none;
  line-height: 1.8;
}

.list_dot ul li ul {
  padding-top: 2px;
  padding-left: 2.5em !important;
}

.list_dot ul li:before {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: -1em;
  margin-right: 14px;
  background: #555;
  border-radius: 100%;
  vertical-align: middle;
  content: "";
}


/* ===================
  　　　Modal
=================== */

/* -- JS Setting -- */

html.mfp-ready,
.mfp-ready body {
}

.mfp-container {
  position: relative;
  padding: 5% 4rem !important;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

.mfp-bg,
.mfp-fade.mfp-bg.mfp-ready {
  background: rgba(92, 59, 28, 0.6);
}

.mfp-wrap {
  text-align: center;
}

.mfp-content {
  position: relative;
  height: auto;
  padding-top: 10%;
  padding-bottom: 10%;
}

/* -- Arrow -- */

.mfp-fade.mfp-wrap.mfp-ready .mfp-arrow {
  opacity: 1;
  transition: all .4s linear;
}

.mfp-fade.mfp-wrap .mfp-arrow {
  opacity: 0;
  transition: all .4s linear;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-arrow {
  opacity: 0;
  transition: all .4s linear;
}

.mfp-arrow {
  top: 50% !important;
  width: 5rem;
  height: 9.5rem;
  margin-top: -3rem !important;
  filter: none !important;
}

.mfp-arrow:before {
  transition: opacity .4s ease-in-out;
  top: 0 !important;
  width: 2rem;
  height: 2rem;
  margin-top: 3.5rem !important;
  margin-right: 0;
  margin-left: 0;
  border: 3px solid #222;
}

.mfp-arrow:hover:before {
  opacity: 1;
}

.mfp-arrow:after {
  display: none;
}

.mfp-arrow-right {
  right: 2.5%;
}

.mfp-arrow-right:before{
  transform: rotate(45deg);
  margin-left: 1rem;
  border-left: none;
  border-bottom: none;
}

.mfp-arrow-left {
  left: 2.5%;
}

.mfp-arrow-left:before {
  transform: rotate(-45deg);
  margin-left: 1.6rem;
  border-right: none;
  border-bottom: none;
}

/* -- Close -- */

.mfp-content .mfp-close,
.mfp-content .mfp-close:focus{
  transition: opacity .4s ease-in-out;
  opacity: 1;
  overflow: hidden;
  position: absolute;
  top: 3rem !important;
  right: 3rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  color: #222;
  text-indent: 10rem;
  line-height: 10rem;
  font-size: 0 !important;
  font-family: "游明朝", "YuMincho","ヒラギノ明朝 ProN W3", "HiraMinProN-W3","メイリオ", Meiryo, Verdana, sans-serif;
  font-weight: 400;
}

.mfp-content .mfp-close:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../Contents/ImagesPkg/lp/2022SScollection/icn_close.svg) no-repeat center;
  background-size: 100%;
  content: "";
}

.mfp-content .mfp-close:hover {
  opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  max-height: 88rem;
}

.mfp-figure:after {
  background: none;
  box-shadow: none;
}

/* -- Image -- */

img.mfp-img {
  transition: all .4s ease-in-out;
  padding: 0;
  vertical-align: top;
}

/* -- Bottom Bar -- */

.mfp-bottom-bar {
  margin-top: -3rem;
}

.mfp-title {
  padding: 0;
  color: #000;
}

.mfp-counter {
  display: none;
}

/* -- Modal Sction -- */

.modal_section,
.modal_section:first-child,
.modal_section:last-child {
  margin: 0;
}

.modal_section {
  width: 92rem;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0 !important;
}

.modal_section img {
  max-width: 100%;
}

.modal_section_inner {
  overflow: hidden;
  border-radius: 1rem;
  padding: 6rem;
  background: #fff;
  box-shadow: 0 0 2rem rgba(133, 109, 82, 0.2);
}

/* -- Modal Inline Sction -- */

.mfp-modal-inline .mfp-content {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
}

.mfp-modal-inline .modal_section_inner {
  overflow: scroll;
}

.mfp-modal-inline .modal_section_inner,
.mfp-modal-iframe .mfp-content {
  height: 100%;
}

/* ===================
  　　　Animation
=================== */

/* -- keyframes -- */

@keyframes infinity-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

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

  100% {
    opacity: 0;
  }
}

@keyframes opa0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(1rem);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(1rem);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@-webkit-keyframes tra1 {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@keyframes tra1 {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@-webkit-keyframes tra2 {
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@keyframes tra2 {
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@-webkit-keyframes tra3 {
  0% {
    -webkit-transform: translateY(8rem);
    transform: translateY(8rem);
    -ms-transform: translateY(8rem);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@keyframes tra3 {
  0% {
    -webkit-transform: translateY(8rem);
    transform: translateY(8rem);
    -ms-transform: translateY(8rem);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@-webkit-keyframes tra3_2 {
  0% {
    -webkit-transform: translateY(10rem);
    transform: translateY(10rem);
    -ms-transform: translateY(10rem);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@keyframes tra3_2 {
  0% {
    -webkit-transform: translateY(10rem);
    transform: translateY(10rem);
    -ms-transform: translateY(10rem);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -ms-transform: translateY(0);
  }
}

@-webkit-keyframes tra4 {
  0% {
    -webkit-transform: translateX(30%);
    transform: translateX(30%);
    -ms-transform: translateX(30%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@keyframes tra4 {
  0% {
    -webkit-transform: translateX(30%);
    transform: translateX(30%);
    -ms-transform: translateX(30%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@-webkit-keyframes tra5 {
  0% {
    -webkit-transform: translateX(-30%);
    transform: translateX(-30%);
    -ms-transform: translateX(-30%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@keyframes tra5 {
  0% {
    -webkit-transform: translateX(-30%);
    transform: translateX(-30%);
    -ms-transform: translateX(-30%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@-webkit-keyframes tra6 {
  0% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@keyframes tra6 {
  0% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@-webkit-keyframes tra7 {
  0% {
    -webkit-transform: translateX(-30%);
    transform: translateX(-30%);
    -ms-transform: translateX(-30%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@keyframes tra7 {
  0% {
    -webkit-transform: translateX(-30%);
    transform: translateX(-30%);
    -ms-transform: translateX(-30%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -ms-transform: translateX(0);
  }
}

@keyframes linkbtnAnime {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  60% {
    opacity: 1;
  transform: scale(1.1);
  }
  100% {
    opacity: 0;
  transform: scale(1.1);
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);
  }
}


@keyframes maruAnime {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }

  60% {
    opacity: 0.6;
    transform: scale(1.03);
  }

  100% {
    opacity: 1;
  transform: scale(1);
  }
}

.ef {
  opacity: 0;
}

.ef.effect {
  -webkit-animation: opa1 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
  animation: opa1 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
}

.ef2 {
  opacity: 0;
  filter: blur(1rem);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ef2.effect {
  -webkit-animation: opa2 2s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
  animation: opa2 2s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
}

.ef-top {
  opacity: 0;
  -webkit-transform: translateY(6rem);
  transform: translateY(6rem);
  -ms-transform: translateY(6rem);
}

.ef-top.effect {
  -webkit-animation: opa1 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards, tra3 1.2s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
  animation: opa1 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards, tra3 1.2s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
}

.ef-top2 {
  opacity: 0;
  filter: blur(1rem);
  -webkit-transform: translateY(10rem);
  transform: translateY(10rem);
  -ms-transform: translateY(10rem);
}

.ef-top2.effect {
  -webkit-animation: opa2 2s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards, tra3_2 2s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
  animation: opa2 2s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards, tra3_2 2s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
}

.ef-right {
  opacity: 0;
}

.ef-right.effect {
  -webkit-animation: opa1 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards, tra4 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
  animation: opa1 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards, tra4 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
}

.ef-left {
  opacity: 0;
}

.ef-left.effect {
  -webkit-animation: opa1 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards, tra5 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
  animation: opa1 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards, tra5 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
}

.ef-lg.effect {
  -webkit-animation: opa1 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards, tra6 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
  animation: opa1 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards, tra6 1.8s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
}


/* ===================
  　Section Common
=================== */

.btn_wrap {
  text-align: center;
}

.float_left {
  float: left;
}

.float_right {
  float: right;
}

.inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* ===================
  Loading
=================== */

.loading_area {
  display: none;
  transition: all 1s ease;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background:linear-gradient(130deg, #DDECD5,#F6EAC8,#FDE1C7,#F6EAC8,#DDECD5,#DDECD5,#F6EAC8,#FDE1C7,#F6EAC8,#DDECD5);/*グラデーションを定義*/
  background-size: 400% 400%;/*サイズを大きくひきのばす*/
  background-position: 0% 50%;
  animation: bggradient 8s ease infinite;
}

.loading__ttl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

@keyframes bggradient{
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.loading__ttl {
  opacity: 0;
  animation: opa1 2.5s ease .8s 1 forwards;
}

.loading_area.load-active {
  opacity: 0;
  z-index: -1;
  visibility: hidden;
}

/* ===================
  　　　Intro
=================== */

.intro_section {
}

.intro_title {
  display: none;
  width: 100%;
  margin-bottom: 14rem;
  font-size: 6rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-align: center;
}

/* IE11用 */
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .intro_title {
    display: block;
  }
}

.intro_title span {
  display: inline-block;
  font-family: 'EB Garamond', serif !important;
  vertical-align: middle;
}

.intro_title p {
  margin-bottom: 0;
}

/* -- Main Visual -- */

.mv_area {
  padding: 6rem 0 5.7rem;
  text-align: center;
  /*background: linear-gradient(225deg, #f2e8ff 0%, #f1edf5 19.21%, #e5f6fc 40.39%, #f7f7e4 65.02%, #fae8dd 84.24%, #fde5d6 100%);*/
}

.mv__img {
  margin-bottom: 6rem;
}

.mv__img img {
  width: 72rem;
  max-width: 100%;
}

.mv__tag {
  margin-bottom: 1.6rem;
}

.mv__tag span {
  display: inline-block;
  width: 16rem;
  padding: 0.38rem 0.5rem 0.28rem;
  border: 1px solid #CDA353;
  color: #CDA353;
  font-size: 1.5rem;
  text-align: center;
  line-height: 1;
}

.mv__name {
  overflow: hidden;
  padding-bottom: 0rem;
  font-size: 5.6rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.014em;
}

.mv__name span {
  display: inline-block;
  line-height: 1.2;
  opacity: 0;
  /*transform: translateY(12rem);*/
  transition: 1.8s all;
  background: linear-gradient(0deg, #EAB7B7 0%, #EAB7B7 18.71%, #ffc3a0 23.43%, #fcfc9f 41%, #68d9ff 58.16%, #bcddff 70.29%, #ebdbff 71.12%, #ebdbff 100%);
  background: -webkit-linear-gradient(0deg,  #EAB7B7 0%, #EAB7B7 18.71%, #ffc3a0 23.43%, #fcfc9f 41%, #68d9ff 58.16%, #bcddff 70.29%, #ebdbff 71.12%, #ebdbff 100%);
  background-size: 1000% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mv__name.textEffect span {
  background: linear-gradient(#EAB7B7 0%, #EAB7B7 100%);
  background: -webkit-linear-gradient(#EAB7B7 0%, #EAB7B7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes gradientEffect {
  0% {background-position: right}
  100% {background-position: left}
}

.mv_area_content.effect .mv__name span {
  opacity: 1;
  /*transform: translateY(0);*/
  animation: gradientEffect 8s 1 normal;
}


.mv__name_sub {
  margin-bottom: 1.7rem;
  font-size: 1.6rem;
  letter-spacing: 0;
  color: #EAB7B7;
}

.mv__data {
  letter-spacing: 0.2em;
  color: #EAB7B7;
}

.mv__data .txt_lg {
  padding: 0 0.5rem;
  font-size: 2.2rem;
}

.mv__data .txt_released {
  padding-left: .8rem;
}

/* -- Section Animetion -- */

.mv_area_content .mv__tag,
.mv_area_content .mv__name_sub,
.mv_area_content .mv__data {
  opacity: 0;
  /*filter: blur(1rem);*/
}

.mv_area_content.effect .mv__tag,
.mv_area_content.effect .mv__name_sub,
.mv_area_content.effect .mv__data {
  animation: opa1 1.5s ease-in-out .1s 1 forwards;
}

.mv_area_content.effect .mv__name_sub {
  animation-delay: .4s;
}

.mv_area_content.effect .mv__data {
  animation-delay: .5s;
}

/* -- Catch Area -- */

.catch_area {
  padding: 19.5rem 0 16.5rem;
  font-size: 2.2rem;
  letter-spacing: 0.2em;
  line-height: 1.3;
  background-image: url(../img/bg_chatch.jpg);
  background-size: cover;
}

.catch_area .catch__txt {
  margin-bottom: 6.5rem;
}
.catch_area .catch__txt:last-of-type {
  margin-bottom: 0;
}

.catch_area .catch__txt span {
  opacity: 0;
  filter: blur(1rem);
  transform: translateY(10rem);
  display: block;
  margin-bottom: 3rem;
}

.catch_area.effect .catch__txt span {
  animation: opa2 1.8s ease 0s 1 forwards, tra3 1.8s ease 0s 1 forwards;
}

.catch_area.effect .catch__txt:nth-child(1) span:nth-child(1) {
  animation-delay: 0s,0s;
}

.catch_area.effect .catch__txt:nth-child(1) span:nth-child(2) {
  animation-delay: 0.3s,0.3s;
}

.catch_area.effect .catch__txt:nth-child(1) span:nth-child(3) {
  animation-delay: 0.6s,0.6s;
}

.catch_area.effect .catch__txt:nth-child(1) span:nth-child(4) {
  animation-delay: 0.9s,0.9s;
}

.catch_area.effect .catch__txt:nth-child(2) span:nth-child(1) {
  animation-delay: 1.1s,1.1s;
}

.catch_area.effect .catch__txt:nth-child(2) span:nth-child(2) {
  animation-delay: 1.4s,1.4s;
}

.catch_area.effect .catch__txt:nth-child(2) span:nth-child(3) {
  animation-delay: 1.7s,1.7s;
}

.catch_area.effect .catch__txt:nth-child(2) span:nth-child(4) {
  animation-delay: 2s,2s;
}

/* -- Movie -- */

.movie {
  position: relative;
  overflow: hidden;
}

.movie iframe {
  transform: translate(-50%, 0);
  position: absolute;
  top: -1%;
  left: 50%;
  width: 102%;
  height: 102%;
}

/* ===================
  　　 BG wrap
=================== */
#Bg_wrap {
  /*background: linear-gradient(#f4ebff 0%, #fbf8fd 19.21%, #effbff 40.39%, #fafaf2 64.04%, #fdf1ea 84.24%, #ffedf2 100%);*/
  padding-bottom: 12rem;
}


/* ===================
  　　 Product
=================== */

.product_section {
  position: relative;
  margin-bottom: 11rem;
  padding: 9.9rem 0 0;
}

.product_section .inner {
  max-width: 120rem;
  position: relative;
  z-index: 1;
}

.product_section .product_img {
  position: absolute;
  top: 0;
  right: 18rem;
  z-index: 3;
  width: 45rem;
}

.product_ttl.txt_en {
  /*overflow: hidden;*/
  font-size: 13.5rem;
  font-weight: 400;
  line-height: 1;
  text-align: left;
  color: #fff;
  letter-spacing: -0.02em;
}
/*
.product_section .product_ttl.txt_en {
  padding: 5.3rem 0 0;
  letter-spacing: -0.03em;
}

.infinity-scroll-wrap {
  display: flex;
  overflow: hidden;
  animation :infinity-scroll 1s infinite linear 0.5s both;
  height: 21.7rem;
  width: 68rem;
  transform: rotate(90deg);
}

.infinity-scroll-wrap p {
  display: flex;
  overflow: hidden;
  font-size: 10rem;
}

*/

.product_ttl.txt_en .product_ttl_inner span {
  display: inline-block;
  opacity: 0;
  transform: translateY(15rem);
  transition: 1.5s transform,1.5s opacity;
}

.effect .product_ttl.txt_en .product_ttl_inner span {
  opacity: 1;
  transform: translateY(0);
}

.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(1) { transition-delay: 0.25s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(2) { transition-delay: 0.3s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(3) { transition-delay: 0.35s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(4) { transition-delay: 0.4s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(5) { transition-delay: 0.45s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(6) { transition-delay: 0.5s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(7) { transition-delay: 0.55s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(8) { transition-delay: 0.6s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(9) { transition-delay: 0.65s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(10) { transition-delay: 0.7s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(11) { transition-delay: 0.75s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(12) { transition-delay: 0.8s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(13) { transition-delay: 0.95s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(14) { transition-delay: 1s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(15) { transition-delay: 1.05s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(16) { transition-delay: 1.1s;}
.effect .product_ttl.txt_en .product_ttl_inner span:nth-child(17) { transition-delay: 1.15s;}


.product_section .product_catch {
  width: 60.4rem;
  margin-bottom: 4.5rem;
  padding: 7rem 0 0 6.5rem;
  font-size: 2.6rem;
  line-height: 1.95;
  letter-spacing: 0.15em;
  text-align: center;
}

.product_section .product_cont {
  margin-bottom: 7rem;
  line-height: 2;
  font-size: 1.8rem;
  letter-spacing: 0.15em;
  line-height: 2;
}
.product_section .product_cont span {
  opacity: 0;
  filter: blur(1rem);
  transform: translateY(10rem);
}

.product_section .effect .product_cont span {
  animation: opa2 1.8s ease 0s 1 forwards, tra3 1.8s ease 0s 1 forwards;
}

.product_section .product_data {
  margin-bottom: 2.3rem;
  font-size: 1.6rem;
  font-weight: 400;
}
.product_section .product_head .product_cont_wrap {
  width: 50.4rem;
  margin: 0 0 0 8rem;
}

.ttl_obi {
  margin-bottom: 0.8rem;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.ttl_obi span {
  display: inline-block;
  position: relative;
  z-index: 0;
}

.product_section .btn_wrap {
  margin-bottom: 13rem;
}

.btn_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  text-align: center;
}

.btn_wrap .btn_link {
  position: relative;
  z-index: 10;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  transition: linear-gradien 0.4s ease-in-out,color 0.4s ease-in-out;
  width: 30.8rem;
  height: 5.6rem;
  border-radius: 20rem;
  background: linear-gradient(45deg,#ffdbd3 0%, #dbd3fd 100%);
  color: #fff;
  font-size: 2rem;
  letter-spacing: 0.05em;
  border: none;
}

.btn_wrap .btn_link:hover {
  opacity: 1;
  background: linear-gradient(45deg,#ffeeb4 0%, #c3e8fc 100%);
  color: #fff;
}

.btn_wrap .btn_link:hover::before {
  animation: linkbtnAnime 1s ease 0s 1 forwards;
}

/* -- Section Animetion -- */

.product_section .product_img,
.product_section .product_catch,
.product_section .product_cont_wrap,
.product_section .product_cont,
.product_list li.js-efpoint {
  opacity: 0;
  transform: translateY(10rem);
}

.product_section .product_img,
.product_section .product_catch,
.product_section .product_cont_wrap,
.product_section .product_cont,
.product_list li.js-efpoint {
  animation: opa1 2s ease 0.2s 1 forwards, tra3_2 2s ease 0.2s 1 forwards;
  
}

.product_section.effect .product_catch {
  animation-delay: .4s,.4s;
}

.product_section.effect .product_cont_wrap {
  animation-delay: .8s,.8s;
}

.product_section.effect .product_cont {
  animation-delay: .4s,.4s;
}

.product_list li.js-efpoint.effect{
  animation-delay: .4s,.4s;
}


/* ------- Product Colors ------- */

.product_colors {
}

.product_colors li {
  position: relative;
  text-align: right;
  line-height: 1;
  margin-top: -3rem;
}

.product_colors li,
.product_colors li dt {
  opacity: 0;
  transform: translateX(30%);
}

.product_colors.effect li {
  animation: opa1 3s ease 1s 1 forwards, tra4 3s ease 1s 1 forwards;
}
.product_colors.effect li dt {
  animation: opa_dt 3s ease 1s 1 forwards, tra4 3s ease 1s 1 forwards;
}

@-webkit-keyframes opa_dt {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.6;
  }
}

@keyframes opa_dt {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.6;
  }
}

.product_colors li:nth-child(1) {
  margin-top: 0;
}

.product_colors li:nth-child(1) dt {
  animation-delay: 0.1s, 0.1s;
  color: #E4D28A;
}

.product_colors li:nth-child(2) {
  animation-delay: 1.2s, 1.2s;
}

.product_colors li:nth-child(2) dt {
  animation-delay: 1.3s, 1.3s;
  color: #CAB8D5;
}

.product_colors li:nth-child(3) {
  animation-delay: 1.6s, 1.6s;
}

.product_colors li:nth-child(3) dt {
  animation-delay: 1.7s, 1.7s;
  color: #ABBDD8;
}

.product_colors li:nth-child(4) {
  animation-delay: 1.9s, 1.9s;
}

.product_colors li:nth-child(4) dt {
  animation-delay: 2s, 2s;
  color: #E39D99;
}

.product_colors li:nth-child(5) {
  animation-delay: 2.2s,2.2s;
}

.product_colors li:nth-child(5) dt {
  animation-delay: 2.3s, 2.3s;
  color: #CEC7C1;
}


.product_colors dt {
  opacity: .6;
  position: absolute;
  top: 0;
  font-size: 5rem;
  color: #fff;
  letter-spacing: 0;
}

.product_colors dd {
  padding: 1rem 0 0;
  text-align: right;/*CK追記*/
}

.product_colors dd img {
  position: relative;
  z-index: 2;
  width: 53rem;
}
.product_colors dd img {
  position: relative;
  z-index: 2;
  width: 53rem;
}

.product_colors li:nth-child(1) {
  margin-top: -1.5rem;
  margin-right: 4rem;
}

.product_colors li:nth-child(1) dt {
  left: 52.5rem;
}

.product_colors li:nth-child(2) {
  padding-right: 16rem;
}

.product_colors li:nth-child(2) dt {
  top: 0.6rem;
  left: 39.2rem;
}

.product_colors li:nth-child(3) {
  padding-right: 27.5rem;
}

.product_colors li:nth-child(3) dt {
  top: 1rem;
  left: 21rem;
}

.product_colors li:nth-child(4) {
  padding-right: 39.5rem;
}

.product_colors li:nth-child(4) dt {
  top: 1rem;
  left: 7rem;
}
.product_colors li:nth-child(5) {
  padding-right: 55rem;
  margin-top: -5.5rem;
}
.product_colors li:nth-child(5) img {
  width: 44rem;
}

.product_colors li:nth-child(5) dt {
  top: 3rem;
  left: 3rem;
}

/* ------- パネル ------- */

.color_panel {
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  transition: opacity 0.4s ease-in-out,z-index 0.4s ease-in-out;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: -2rem;
  bottom: 0;
  z-index: 0;
  width: 30rem;
  height: 30rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 100%;
  text-align: center;
}

.color_panel p {
  margin: auto;
}

.color_panel .color_panel__img {
  width: 100%;
  margin-top: 0;
  margin-bottom: 1rem;
}

.color_panel .color_panel__img img {
  width: 8rem;
}

.color_panel .color_panel__tag {
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  text-align: center;
}

.color_panel .color_panel__tag span {
  display: inline-block;
  border-radius: 20rem;
  padding: 0.15rem 3rem;
  background: #f9f2d1;
}

.color_panel .color_panel__txt {
  width: 100%;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  line-height: 1.6;
}

.color_panel .color_panel__txt sup {
  font-size: 1rem;
}

.color_panel .color_panel__txt + .color_panel__txt {
  line-height: 1.1;
  margin-bottom: 0;
}

/* -- Section Animetion -- */

.colors_section .product_video,
.colors_section .product_list,
.colors_section .product_data,
.colors_section .btn_wrap {
  opacity: 0;
  transform: translateY(8rem);
}

.colors_section .product_video {
  transform: translateY(10rem);
}

.colors_section.effect .product_video {
  animation: opa1 2s ease 0s 1 forwards, tra3_2 2s ease 0s 1 forwards;
}

.colors_section.effect .product_list,
.colors_section.effect .product_data,
.colors_section.effect .btn_wrap {
  animation: opa1 2s ease 0.2s 1 forwards, tra3 2s ease 0.2s 1 forwards;
}

.colors_section.effect .product_list {
  animation-delay: .4s,.4s;
}

.colors_section.effect .product_data,
.colors_section.effect .btn_wrap {
  animation-delay: .8s,.8s;
}

/* ===================
  　　 Modal
=================== */
/*
.btn_modal {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  transition: opacity 0.2s ease-in-out;
  width: 30rem;
  height: 6rem;
  margin-right: 2rem;
  padding: 1.3rem;
  border: 1px solid #ffb045;
  border-radius: 20rem;
  background: url(../../Contents/ImagesPkg/lp/2022SScollection/icn_plus.svg) no-repeat 80% center;
  font-size: 1.6rem;
  text-align: center;
  letter-spacing: .04em;
  color: #ffb045 !important;
}
*/

.modal_contents {
  display: block;
  max-width: 120rem;
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s,visible 0.6s;
}
.modal_contents.modal_open {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.modal_close {
  position: absolute;
}
.modaal-content-container {
  padding: 0;
}

.modal_close {
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: -2rem;
  right: -2rem;
  background-color: #E39D99;
  border-radius: 50%;
  z-index: 100;
}
.modaal__blue .modal_close {
  background-color: #AFBDD6;
}
.modal_close span {
  position: relative;
}
.modal_close::after, .modal_close::before {
  display: block;
  position: absolute;
  content: '';
  top: 1rem;
  left: 2rem;
  width: 1px;
  height: 2rem;
  background-color: #fff;
}
.modal_close::before {
  transform: rotate(45deg);
}
.modal_close::after {
  transform: rotate(-45deg);
}
.modal_overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #606561;
  opacity: 1;
  z-index: 1;
}
.modal_fixed {
  touch-action: none;
  -webkit-overflow-scrolling: none;
  overflow: hidden;
  overscroll-behavior: none;
  pointer-events: none;
}
.pointModal__wrap {
  position: relative;
  max-width: 120rem;
  max-height: 90vh;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.pointModal__inner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 8rem 0 5.7rem 4rem;
  background-color: #fff;
  max-width: 120rem;
  max-height: 90vh;
  overflow-y: scroll;
}
.pointModal__wrap img {
  width: 100%;
}
.pointModal__visual {
  width: 34.6rem;
  margin-top: 3rem;
}

.pointModal__visualTitle {
  text-align: center;
  font-size: 5rem;
  margin-top: 1rem;
  color: #E39D99;
  font-family: Margaret;
  letter-spacing: -0.015em;
}
.pointModal__ItemList {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  width: 72rem;
  margin: 0px 0 0 4rem;
}
.pointModal__Item {
  width: 18rem;
  text-align: center;
  position: relative;
}
.pointModal__Item:nth-of-type(n+5) {
  margin-top: 4rem;
}
.item_num {
  position: absolute;
  color: #E39D99;
  font-size: 2.2rem;
  font-family: Margaret;
  display: inline-block;
  top: 0;
  left: 0;
}
.item_name {
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1.8;
}
.pointModal__use {
  margin-top: 5.7rem;
  padding-left: 4rem;
}
.pointModal__use dt {
  display: flex;
  border: 1px solid #E39D99;
  font-size: 1.4rem;
  width: 10rem;
  height: 2.6rem;
  justify-content: center;
  align-items: center;
  line-height: 1;
  color: #E39D99;
  font-weight: bold;
  margin-top: 1.2rem;
  border-radius: 0.5rem;
  text-align-last: left;
}
.pointModal__use dd {
  margin-top: 1.4rem;
  font-size: 1.2rem;
  line-height: 2;
  text-align-last: left;
}
.pointModal__use .credit_item {
  padding-bottom: 0.3rem;
}
.pointModal__use .credit_use {
  padding-bottom: 1rem;
}
.pointModal__use p {
  text-align-last: left;
}
.pointModal__use dd .bold {
  font-weight: bold;
}
.modaal__pink:hover, .modaal__blue:hover {
  opacity: 1!important;
}
.modaal__blue .pointModal__visualTitle {
  color: #AFBDD6;
}
.modaal__blue .item_num {
  color: #AFBDD6;
}
.modaal__blue .pointModal__use dt {
  color: #AFBDD6;
  border-color: #AFBDD6;
}

/* ===================
  　　 loop text
=================== */
.infinity-scroll {
  display: flex;
  overflow: hidden;
  position: absolute;
  width: 68rem;
  top: 14rem;
  right: -22rem;
  transform: rotate(90deg);
}
.infinity-scroll_list {
  display: flex;
  list-style: none;
  animation: infinity-scroll 40s infinite linear 0.5s both;
}
.scroll_text {

}
.scroll_text p{
  margin: 0 2rem;
  letter-spacing: -0.015em;
  line-height: 1;
  word-break: normal;
  font-size: 10rem;
  text-align: left;
  width: 75rem;
  font-family: 'Margaret';
  color: #fff;
}

/* ===================
  　　 キット
=================== */
.product_kit {
    padding-bottom: 4rem;
}

/* ===================
  　　 グリッター
=================== */
.product_mascala {
  position: relative;
  padding: 8rem 0 0;
  overflow: hidden;
}

.animated {
	/*-webkit-animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;*/
	animation-duration: 5s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}


.gritter {
  display: block;
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/pc_bg_gritter.png);
  background-size: cover;
  mix-blend-mode: soft-light;
  /*mix-blend-mode: color-burn;*/
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.product_mascala.effect .gritter {
  opacity: 1;
}

@keyframes gritter {
	from {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 0.0;
	} to {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 0.0;
	} 2% {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	} 10% {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	} 23% {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 0.0;
	} 29% {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 0.0;
	} 35% {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	} 42% {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	} 54% {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 0.0;
	} 59% {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 0.0;
	} 64% {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 0.0;
	} 70% {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	} 88% {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	} 96% {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1.2,1.2) rotate(0deg) skew(0deg,0deg);
		opacity: 0.0;
	} 
}

.gritter {
	/*-webkit-animation-name: gritter;*/
	animation-name: gritter;
	/*-webkit-transform-origin: center center;*/
	transform-origin: center center;
}


/* ===================
  　　 Colors
=================== */

.colors_section {
  position: relative;
  margin-bottom: 11rem;
}

.colors_section .color_cont--wrap.flex-wrap {
  display: flex;
}

.colors_section .product_video {
  position: relative;
  width: 59.8rem;
}

.colors_section .product_video iframe {
  width: 45rem;
  height: 80rem;
  border-radius: 22.5rem 22.5rem 0 0;
  position: absolute;
  top: 7.7rem;
  left: 7rem;
}

.colors_section .product_cont_wrap {
  margin-top: 3rem;
}


/* ---- Product List ---- */

.product_list_wrap {

}

.product_list {
  margin-bottom: .8rem;
  padding-left: 6rem;
}

.product_list ul {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  width: 51.1rem;
  margin-top: 1.5rem;
  margin-left: 3rem;
}

.product_list li {
  position: relative;
  width: 21.5rem;
  text-align: left;
}
.product_list li:nth-of-type(2n) {
  margin-left: 8rem;
}
.product_list li:nth-of-type(n+3) {
  margin-top: 4rem;
}

.product_list img {
  width: 26.2rem;
  filter: drop-shadow(12px 12px 8px rgba(0,0,0,0.1));
}

.colors_section .product_data .ttl_obi {
  margin-bottom: 2rem;
}

.colors_section .product_data ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 2rem;
  align-items: flex-start;
  font-size: 1.2rem;
  letter-spacing: 0.04rem;
  width: 51rem;
}

.colors_section .product_data li {
  width: 50%;
  margin-bottom: 1rem;
  text-align: left;
}

.colors_section .product_data li::before {
  content: "・";
}

.colors_section .btn_wrap {
  position: relative;
  z-index: 2;
}

/* -- Section Animetion -- */

.colors_section .product_video,
.colors_section .product_list,
.colors_section .product_cont_wrap {
  opacity: 0;
  transform: translateY(8rem);
}

.colors_section .product_video {
  transform: translateY(10rem);
}

.colors_section.effect .product_video {
  animation: opa1 1.8s ease 0s 1 forwards, tra3_2 1.8s ease 0s 1 forwards;
}

.colors_section.effect .product_list,
.colors_section.effect .product_cont_wrap {
  animation: opa1 1.8s ease 0.2s 1 forwards, tra3 1.8s ease 0.2s 1 forwards;
}

.colors_section.effect .product_list {
  animation-delay: .4s,.4s;
}

.colors_section.effect .product_cont_wrap {
  animation-delay: .8s,.8s;
}


/* ===================
  　　 Point
=================== */

.point_section {
  margin-bottom: 9rem;
}

.point_section .inner {
  position: relative;
}

.point_cont--wrap {
  display: flex;

}
.point__wrap {
  position: relative;
}
.point__wrap--look {
  position: absolute;
  font-size: 15.3rem;
  color: #FFF;
  letter-spacing: -0.015em;
  top: -2rem;
  left: 0;
  font-family: Margaret, serif;
  opacity: 0.5;
  z-index: -1;
}
.point__wrap.blue  {
  margin-top: 10rem;
  margin-left: 30rem;
}

.point_section .product_img {
  width: 45rem;
      margin-top: 1rem;
  margin-left: 0;
  margin-bottom: 0;
}
.point__wrap .product_point--title {
  font-size: 5rem;
}
.point__wrap.pink .product_point--title {
  color: #E39D99;
  letter-spacing: 0.05em;
}
.point__wrap.blue .product_point--title {
  color: #ABBDD8;
  letter-spacing: 0.05em;
}
.point_section .product_img01::after {
  display: block;
  position: absolute;
  content: '';
  opacity: 0;
  transition: opacity, 1s;
}
.point_section .product_img02::after {
  display: block;
  position: absolute;
  content: '';
  opacity: 0;
  transition: opacity, 1s;
  border-radius: 23.5rem 23.5rem 0 0;
}

.point_section .product_img01::before {
  display: block;
  position: absolute;
  content: 'view items';
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  color: #fff;
  font-family: 'Margaret';
  font-size: 3rem;
  z-index: 2;
  opacity: 0;
  transition: opacity, 1s;
}
.point_section .product_img02::before {
  display: block;
  position: absolute;
  content: 'view items';
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  color: #fff;
  font-family: 'Margaret';
  font-size: 3rem;
  z-index: 2;
  opacity: 0;
  transition: opacity, 1s;
}

.point_section .product_img01:hover::before, .point_section .product_img02:hover::before {
  display: block;
  position: absolute;
  content: 'view items';
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  color: #fff;
  font-family: 'Margaret';
  font-size: 3rem;
  z-index: 2;
}
.point_section .product_img01:hover::after {
  display: block;
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFE5EF;
  opacity: 0.5;
  z-index: 1;
  border-radius: 23.5rem 23.5rem 0 0;
}
.point_section .product_img02:hover::after {
  display: block;
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ABBDD8;
  opacity: 0.5;
  z-index: 1;
  border-radius: 23.5rem 23.5rem 0 0;
}

.point_section .product_img01:hover::before {
  opacity: 1;
}
.point_section .product_img02:hover::before {
  opacity: 1;
}

.point_section .product_img02 {

}


/* -- Section Animetion -- */

.point_section .product_img01,
.point_section .product_img02,
.point_section {
  opacity: 0;
  transform: translateY(10rem);
  position: relative;
  border-radius: 23.5rem 23.5rem 0 0;
}

.point_section.effect .product_img01,
.point_section.effect .product_img02,
.point_section.effect {
  animation: opa1 1.8s ease 0s 1 forwards, tra3_2 1.8s ease 0s 1 forwards;
}

.point_section.effect .product_img02 {
  animation-delay: .3s,.3s;
}

.point_section.effect {
  animation-delay: .5s,.5s;
}

/* ===================
   Product Purchase
=================== */

.purchase_section .inner, .colors_section .inner, .point_section .inner {
  max-width: 120rem;
}

.purchase_section .product_img {
  position: relative;
  left: 0;
  width: 78rem;
  margin: 12rem 21rem 0rem;
  text-align: center;
}
.purchase_section .product_img img {
  width: 77rem;
}
.purchase_section .product_img span {
  display: block;
  position: relative;
}

.purchase_section .product_img span::before {
  transform: none;
  position: absolute;
  top: -3rem;
  right: auto;
  left: 46rem;
  width: 30rem;
  height: 30rem;
  background: url(../img/text_circle.png) no-repeat;
  background-size: 33rem 34rem;
  background-position: 0 0;
  content: "";
}

/*.purchase_section.effect .product_img span::before {
  animation: circle_logo ease 1.5s 1 forwards;
}*/

@keyframes circle_logo {
  0% {
    width: 0;
    height: 15rem;
  }
  40% {
    width: 25rem;
    height: 15rem;
  }
  100% {
    width: 30rem;
    height: 30rem;
  }
}

.purchase_section .product_cont {
  margin-bottom: 2rem;
  font-size: 1.6rem;
  font-weight: bold;
  font-weight: 400;
}
.purchase_section .btn_wrap {
  margin-bottom: 7.5rem;
}

.purchase_section .shop_list {
  width: 80rem;
  border-radius: 2rem;
  padding: 3.5rem 0 2.2rem;
  margin: auto;
  font-size: 1.6rem;
  background-color: #fff;
}

.purchase_section .shop_list__ttl {
  margin-bottom: 0;
  font-weight: 400;
  letter-spacing: 0.18rem;
  font-size: 1.8rem;
}

.purchase_section .shop_list__cont {

}

.purchase_section .shop_list__cont dt {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}

.purchase_section .shop_list__cont dt span.deco_line {
  position: relative;
  display: inline-block;
  padding: 0 4.8rem;
  font-size: 1.6rem;
}

.purchase_section .shop_list__cont dt span.deco_line::before,
.purchase_section .shop_list__cont dt span.deco_line::after {
  position: absolute;
  top: 50%;
  width: 4rem;
  border-top: 1px solid #6E6E6E;
  margin-top: -0.05rem;
  content: "";
}

.purchase_section .shop_list__cont dt span.deco_line::before {
  left: 0;
}

.purchase_section .shop_list__cont dt span.deco_line::after {

  right: 0;
}
.purchase_section .shop_list__cont dt.start {
  margin-top: 3.5rem;
}
.purchase_section .shop_list__cont dt.start .start_icon {
  color: #D6A241;
  border: 1px solid #D6A241;
  margin: 0 1.5rem 0 0;
  padding: 0.3rem 0.8rem;
  line-height: 1;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 0.5rem;
  height: 2.6rem;
  position: static;
}
.purchase_section .shop_list__cont dt.start .start_date {
  font-size: 1.8rem;
}
.purchase_section .shop_list__cont dt.start .start_date .day {
  font-size: 1.4rem;
}
.purchase_section .shop_list__cont dd {
  margin-bottom: 1.2rem;
  letter-spacing: 0.02rem;
}

.purchase_section .shop_list__cont ul {
  letter-spacing: -.4rem;
}

.purchase_section .shop_list__cont li {
  position: relative;
  display: inline-block;
  padding: 0 1rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.purchase_section .shop_list__cont li::before {
  position: absolute;
  top: 50%;
  left: 0;
  height: 1.6rem;
  margin-top: -.8rem;
  border-left: 1px solid #6E6E6E;
  content: "";
}

.purchase_section .shop_list__cont li:first-of-type{
  padding-left: 0;
}

.purchase_section .shop_list__cont li:first-child::before {
  display: none;
}

/* -- Section Animetion -- */

.purchase_section .product_img,
.purchase_section .product_cont_wrap,
.purchase_section .shop_list {
  opacity: 0;
  transform: translateY(10rem);
}

.purchase_section.effect .product_img,
.purchase_section.effect .product_cont_wrap,
.purchase_section.effect .shop_list {
  animation: opa1 1.8s ease 0s 1 forwards, tra3_2 1.8s ease 0s 1 forwards;
}

.purchase_section.effect .product_cont_wrap {
  animation-delay: .3s,.3s;
}

.purchase_section.effect .shop_list {
  animation-delay: .5s,.5s;
}


/*=======================================
               Responsive
========================================*/
/* only PC */
@media screen and (min-width: 768px) {

  html {
    font-size: 62.5%;
  }

  .lp_contents .pc_only {
    display: block;
  }
  .lp_contents .sp_only {
    display: none;
  }

  /* ------- パネル ------- */

  .color_link_area:hover .color_panel {
    opacity: 1;
    z-index: 2;
  }

  /* ===================
    Product Purchase
  =================== */

  .purchase_section .store_list li:nth-child(4):before {
    display: none;
  }


}
/* only tablet */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  header {
    z-index: 5;
  }
  html {
    font-size: calc(10* (100vw / 1200)) !important;
  }
}
/* only SP */
@media only screen and (max-width: 767px) {
  header {
    z-index: 5;
  }
  .lp_contents .pc_only {
    display: none;
  }
  .lp_contents .sp_only {
    display: block;
  }


  /*=======================================
                     SP
  ========================================*/

  #Contents {
  }

  /* ===================
    LP Contents
  =================== */

  html {
  }

  .lp_wrap {
    
  }

  .lp_contents {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    padding: 0;
    font-size: calc(14* (100vw / 375));
    font-family: yu-gothic-pr6n, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  }

  #Bg_wrap {
    padding-bottom: calc(100 * (100vw / 375));
  }

  p, ul, ol, dl {margin-bottom: 0;}

  /* ===================
    　　　Animation
  =================== */

  /* ---- SP Effect ---- */

  .ef_sp {
    opacity: 0;
  }

  .ef_sp.effect {
    -webkit-animation: opa1 1s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards, tra3 1s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
    animation: opa1 1s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards, tra3 1s cubic-bezier(0.4, 0.57, 0.41, 1) 0s 1 forwards;
  }

  /* ===================
    　　　Modal
  =================== */

  /* -- JS Setting -- */

  .mfp-fade.mfp-bg.mfp-ready {
    opacity: .9;
  }

  .mfp-container {
    padding: calc(20* (100vw / 390)) !important;
  }

  .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    max-height: 100%;
    margin-bottom: 0;
    background: none;
  }

  .mfp-wrap {
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }

  html.mfp-helper {
    height: 100%;
  }

  html.mfp-helper body {
    height: 100%;
  }

  html.mfp-helper .mfp-wrap {
    overflow: scroll;
  }

  html.mfp-ready {
    overflow: hidden;
  }

  .mfp-inline-holder .mfp-content,
  .mfp-ajax-holder .mfp-content {
    max-width: 100%;
  }

  .mfp-content {
    padding-top: 55px;
    padding-bottom: 55px;
  }

  /* -- Arrow -- */

  .mfp-arrow {
    margin-top: -40px !important;
  }

  .mfp-arrow:before {
    margin-top: 30px !important;
  }

  .mfp-arrow-right {
    right: 1%;
  }

  .mfp-arrow-left {
    left: 1%;
  }

  /* -- Close -- */

  .mfp-content .mfp-close {
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
  }


  /* -- Bottom Bar -- */

  .mfp-bottom-bar {
    margin-top: -35px;
  }

  .mfp-title {
    font-size: .8em;
  }

  /* -- Modal Sction -- */

  .modal_section,
  .modal_section:first-child,
  .modal_section:last-child {
    margin: 0;
  }

  /* -- Modal Inline Sction -- */

  .mfp-modal-inline .modal_section {
    position: relative;
    padding-bottom: calc(20 * (100vw / 390)) !important;
  }

  .mfp-modal-inline .mfp-content {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* -- Close -- */

  .mfp-modal-inline .mfp-content .mfp-close,
  .mfp-modal-iframe .mfp-content .mfp-close {
    top: calc(15 * (100vw / 375)) !important;
    right: calc(15 * (100vw / 375));
    width: calc(20 * (100vw / 375));
    height: calc(20 * (100vw / 375));
  }

  /* ===================
    　　 loop text
  =================== */
  .infinity-scroll {
    right: 0;
    top: calc(-100 * (100vw / 375));
    transform: rotate(0deg);
    width: 100%;
  }
  .scroll_text p {
    letter-spacing: -0.015em;
    line-height: 1;
    word-break: normal;
    font-size: calc(80 * (100vw / 375));
    width: calc(600 * (100vw / 375));
    font-family: 'Margaret';
    color: #fff;
  }

  /* ===================
    　Section Common
  =================== */

  .contents_inner .section {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 0;
  }

  .inner {
    width: 100%;
  }

  /* ===================
    Loading
  =================== */

  .loading__ttl img {
    width: calc(180 * (100vw / 375));
  }

  /* ===================
    　　　Intro
  =================== */

  .intro_section {
    margin-bottom: calc(73* (100vw / 375));
  }

  .intro_title {
    display: none;
    width: 100%;
    margin-bottom: 14rem;
    font-size: 6rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-align: center;
  }

  /* IE11用 */
  @media all and (-ms-high-contrast:none){
    *::-ms-backdrop, .intro_title {
      display: block;
    }
  }

  .intro_title span {
    display: inline-block;
    font-family: 'EB Garamond', serif !important;
    vertical-align: middle;
  }

  .intro_title p {
    margin-bottom: 0;
  }

  /* -- Main Visual -- */

  .mv_area {
    padding: 0 0 calc(44* (100vw / 375));
    margin-bottom: 0;
    text-align: center;
  }

  .mv__img {
    margin-bottom: calc(50* (100vw / 375));
  }

  .mv__img img {
    width: 100%;
    max-width: 100%;
  }

  .mv__tag {
    margin-bottom: calc(12* (100vw / 375));
  }

  .mv__tag span {
    width: calc(130* (100vw / 375));
    padding: calc(4* (100vw / 390)) 0 calc(3* (100vw / 375));
    font-size: calc(13* (100vw / 375));
  }

  .mv__name {
    padding-bottom: calc(5* (100vw / 375));
    font-size: calc(34* (100vw / 375));
    letter-spacing: -0.014em;
  }

  .mv__name_sub {
    margin-bottom: calc(14* (100vw / 375));
    font-size: calc(14* (100vw / 375));
    letter-spacing: 0;
  }

  .mv__data {
    font-size: calc(13* (100vw / 375));
  }

  .mv__data .txt_lg {
    padding: 0;
    font-size: calc(20* (100vw / 375));
  }

  .mv__data .txt_released {
    padding-left: 0;
  }

  /* -- Catch Area -- */

  .catch_area {
    font-size: calc(16* (100vw / 375));
    padding: calc(92* (100vw / 375)) 0 calc(85* (100vw / 375));
    background-image: url(../img/bg_chatch_sp.jpg);
  }

  .catch_area .catch__txt {
    margin-bottom: calc(26* (100vw / 375));
    line-height: 1;
  }

  .catch_area .catch__txt span {
    margin-bottom: 0;
    line-height: 2.5;
  }

  /* ===================
    　　 Product
  =================== */

  .product_section {
    margin-bottom: calc(64* (100vw / 375));
    padding: calc(47* (100vw / 375)) 0 0 0
  }

  .product_section .inner {
  }

  .product_section .product_img {
    position: relative;
    top: auto;
    right: calc(-11* (100vw / 375));
    width: calc(279* (100vw / 375));
    margin: calc(116* (100vw / 390)) calc(5* (100vw / 375)) calc(26* (100vw / 375)) calc(21* (100vw / 375));
  }

  .product_ttl.txt_en {
    font-size: calc(72* (100vw / 375));
  }

  .product_section .product_ttl.txt_en {
    padding: 0;
  }

  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(1) { transition-delay: 0.05s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(2) { transition-delay: 0.1s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(3) { transition-delay: 0.15s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(4) { transition-delay: 0.2s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(5) { transition-delay: 0.25s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(6) { transition-delay: 0.3s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(7) { transition-delay: 0.35s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(8) { transition-delay: 0.4s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(9) { transition-delay: 0.45s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(10) { transition-delay: 0.5s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(11) { transition-delay: 0.55s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(12) { transition-delay: 0.6s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(13) { transition-delay: 0.65s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(14) { transition-delay: 0.7s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(15) { transition-delay: 0.75s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(16) { transition-delay: 0.8s;}
  .effect .product_ttl.txt_en .product_ttl_inner span:nth-child(17) { transition-delay: 0.85s;}

  .product_section .product_catch {
    margin-bottom: calc(5* (100vw / 375));
    font-size: calc(20* (100vw / 375));
    letter-spacing: 0.05em;
    line-height: 2;
  }

  .product_section .product_catch,
  .product_section .product_cont_wrap {
    padding: 0 calc(30* (100vw / 375));
    width: 100%;
  }
  .product_section.effect .product_cont_wrap {
    width: 100%;
    margin: 0 auto;
  }

  .product_section .product_cont {
    margin-bottom: calc(37* (100vw / 375));
    line-height: 2.25;
    letter-spacing: 0.15em;
    font-size: calc(16* (100vw / 375));
    text-align: center;
  }


  .product_section .product_data {
    margin-top: calc(33* (100vw / 375));
    margin-bottom: calc(26* (100vw / 375));
    font-size: calc(14* (100vw / 375));
  }

  .ttl_obi {
    margin-bottom: calc(6* (100vw / 375));
    font-size: calc(16* (100vw / 375));
    letter-spacing: 0.02em;
    font-weight: bold;
  }

  .ttl_obi span {
    padding: 0 calc(10* (100vw / 375));
  }


  .product_section .btn_wrap {
    margin-bottom: 0;
  }

  .gritter {
    background-image: url(../img/sp_bg_gritter.png);
  }

  .product_kit {
    padding-bottom: calc(60* (100vw / 375));
  }

  /* ---- Product List ---- */

  .product_list {
    margin-bottom: calc(30 * (100vw / 375));
    padding: 0;
  }

  .btn_wrap {
    font-size: calc(18 * (100vw / 375));
  }

  .btn_wrap .btn_link {
    width: calc(240 * (100vw / 375));
    height: calc(56 * (100vw / 375));
    border-radius: calc(200 * (100vw / 375));
    color: #fff;
    font-size: calc(20 * (100vw / 375));
  }

  .product_mascala {
    position: relative;
    padding: calc(50* (100vw / 375)) 0 0;
    overflow: hidden;
  }
  .colors_section .color_cont--wrap.flex-wrap {
    flex-direction: column;
  }
  /* ------- Product Colors ------- */

  .product_colors {
    padding: 0 0 0;
  }

  .product_colors li {
    margin-top: calc(-22 * (100vw / 375));
    padding-right: 0 !important;
  }

  .product_colors li:first-child {
    margin-top: 0;
  }

  .product_colors dt {
    font-size: calc(30 * (100vw / 375));
    letter-spacing: -0.05em;
  }

  .product_colors dd {
    padding: calc(10 * (100vw / 390)) 0 0;
  }

  .product_colors dd img {
    width: calc(393 * (100vw / 375));
  }

  .product_colors li:nth-child(1) {
    margin-right: calc(-136 * (100vw / 375));
    margin-top: calc(-5 * (100vw / 375));
  }

  .product_colors li:nth-child(1) dt {
    top: calc(7 * (100vw / 375));
    left: calc(109 * (100vw / 375));
  }

  .product_colors li:nth-child(2) {
    margin-right: calc(-102 * (100vw / 375));
  }

  .product_colors li:nth-child(2) dt {
    top: calc(7 * (100vw / 375));
    left: calc(75 * (100vw / 375));
  }

  .product_colors li:nth-child(3) {
    margin-right: calc(-68 * (100vw / 375));
    top: calc(3 * (100vw / 375));
  }

  .product_colors li:nth-child(3) dt {
    top: calc(7 * (100vw / 375));
    left: calc(38 * (100vw / 375));
  }

  .product_colors li:nth-child(4) {
    margin-right: calc(-33 * (100vw / 375));
    top: calc(4 * (100vw / 375));
  }

  .product_colors li:nth-child(4) dt {
    top: calc(8 * (100vw / 375));
    left: calc(12 * (100vw / 375));
  }
  .product_colors li:nth-child(5) {
    margin-right: calc(-83 * (100vw / 375));
    top: calc(4 * (100vw / 375));
  }
  .product_colors li:nth-child(5) img {
    width: calc(379 * (100vw / 375));
  }

  .product_colors li:nth-child(5) dt {
    top: calc(33 * (100vw / 375));
    left: calc(12 * (100vw / 375));
  }

  /* ------- パネル ------- */

  .color_panel {
    top: 0;
    left: 50%;
    bottom: calc(-12 * (100vw / 375));
    width: calc(300 * (100vw / 375));
    height: calc(300 * (100vw / 375));
    margin-left: calc(-140 * (100vw / 375));
  }

  .color_panel.is-active {
    opacity: 1;
    z-index: 2;
  }

  .color_area__open {
    position: absolute;
    right: calc(-30 * (100vw / 375));
    bottom: calc(47 * (100vw / 375));
    transition: opacity 0.2s ease-in-out;
    transform: rotate(90deg);
    font-size: calc(11 * (100vw / 375));
    color: #666;
    padding: 0 0 0 calc(20 * (100vw / 375));
    background: url(../img/icn_plus.svg) no-repeat center left;
    background-size: calc(14 * (100vw / 390)) calc(14 * (100vw / 375));
  }

  .color_area__open.is-hidden {
    opacity: 0;
  }

  .color_area__close {
    transition: opacity 0.2s ease-in-out;
    position: absolute;
    top: calc(10 * (100vw / 375));
    right: calc(10 * (100vw / 375));
    width: calc(30 * (100vw / 375));
    height: calc(30 * (100vw / 375));
    background: url(../img/icn_close.svg) no-repeat center;
    background-size: calc(14 * (100vw / 375));
  }

  .color_area__close span {
    display: none;
  }

  .color_panel .color_panel__img {
    margin-bottom: calc(10 * (100vw / 375));
  }

  .color_panel .color_panel__img img {
    width: calc(80 * (100vw / 375));
  }

  .color_panel .color_panel__tag {
    margin-bottom: calc(10 * (100vw / 375));
    font-size: calc(10 * (100vw / 375));
  }

  .color_panel .color_panel__tag span {
    border-radius: calc(200 * (100vw / 375));
    padding: calc(3.5 * (100vw / 390)) calc(30 * (100vw / 375));
  }

  .color_panel .color_panel__txt {
    margin-top: 0;
    margin-bottom: calc(10 * (100vw / 375));
    font-size: calc(15 * (100vw / 375));
    line-height: 1.6;
  }

  .color_panel .color_panel__txt sup {
    font-size: calc(10 * (100vw / 375));
  }

  .color_panel .color_panel__txt + .color_panel__txt {
    line-height: 1.1;
  }

  /* ===================
    　　 Add Modal
  =================== */

  .btn_modal {
    width: calc(250 * (100vw / 375));
    height: calc(50 * (100vw / 375));
    background-size: calc(10 * (100vw / 375));
    margin-right: 0;
    margin-bottom: calc(10 * (100vw / 375));
    border-radius: calc(200 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
  }

  .modal_section_inner {
    padding: calc(20 * (100vw / 375));
    border-radius: calc(10 * (100vw / 375));
  }


  /* ===================
    　　 Colors
  =================== */

  .colors_section {
    position: relative;
    margin-bottom: calc(96 * (100vw / 375));
    margin-bottom: 0;
  }

  .colors_section .product_video {
    position: relative;
    top: 0;
    left: auto;
    margin: auto;
    margin-top: calc(88 * (100vw / 375));
    width: calc(335 * (100vw / 375));
    height: calc(497 * (100vw / 375));
  }

  .colors_section .product_video--ttl {
    width: 59.7rem;
  }

  .colors_section .product_video iframe {
    width: calc(252 * (100vw / 375));
    height: calc(447 * (100vw / 375));
    border-radius: calc(126 * (100vw / 375)) calc(126 * (100vw / 375)) 0 0;
    top: calc(48 * (100vw / 375));
    left: calc(41 * (100vw / 375));
  }

  .colors_section .product_ttl.txt_en {
    letter-spacing: -0.06em;
    width: calc(335 * (100vw / 375));
  }

  .colors_section .product_cont_wrap {
    margin-top: calc(47 * (100vw / 375));
  }

  .colors_section .product_cont_wrap {
    margin-top: calc(47 * (100vw / 375));
  }

  /* ---- Product List ---- */

  .product_list_wrap {
    margin-top: auto;
    padding-left: 0;
  }

  .product_list {
    margin-bottom: calc(4 * (100vw / 375));
    padding-left: calc(0 * (100vw / 375));
  }

  .product_list ul {
    display: block;
    width: calc(241 * (100vw / 375));
    margin: calc(40 * (100vw / 375)) 0 0 calc(57 * (100vw / 375));
  }

  .product_list li {
    width: 100%;
    margin-top: 0;
    text-align: center;
  }
  .product_list li:nth-of-type(2n) {
    margin-left: 0;
  }
  .product_list li:nth-of-type(n+2) {
    margin-top: calc(20 * (100vw / 375));
  }

  .product_list img {
    width: calc(216 * (100vw / 375));
  }

  .colors_section .product_data .ttl_obi {
    margin-bottom: calc(12 * (100vw / 375));
    letter-spacing: 0.05em;
  }

  .colors_section .product_data ul {
    display: inline-block;
    width: auto;
    margin: auto;
    margin-bottom: calc(20 * (100vw / 375));
    padding: 0;
    font-size: calc(12 * (100vw / 375));
    letter-spacing: 0.02rem;
  }

  .colors_section .product_data li {
    width: 100%;
    margin-bottom: calc(9 * (100vw / 375));
    letter-spacing: 0.05em;
  }
  .colors_section .product_cont_wrap {
    margin-top: calc(48 * (100vw / 375));
  }

  /* ===================
    　　 Point
  =================== */

  .point_section {
    margin-bottom: calc(144 * (100vw / 375));
    margin-bottom: 0;
  }

  .point_section .inner {
    position: relative;
    padding: 0 calc(30 * (100vw / 375));
  }

  .point_section .product_ttl.txt_en {
    margin-left: calc(-18 * (100vw / 375));
  }

  .point_section .product_img {
    position: inherit;
    width: 100%;
    margin-bottom: 0;
  }

  .point__wrap.pink .product_point--title,.point__wrap.blue .product_point--title {
    margin-bottom: calc(10 * (100vw / 375));
    letter-spacing: -0.015em;
    font-size: calc(34 * (100vw / 375));
    line-height: 1.5;
  }

  .point_section .product_img01 {
    top: inherit;
    left: inherit;
    margin-top: 0;
  }
  .point_section .product_img01:hover::before, .point_section .product_img02:hover::before {
    display: block;
    position: absolute;
    content: 'view items';
    top: auto;
    bottom: 12%;
    left: -10%;
    right: auto;
    width: auto;
    height: auto;
    color: #fff;
    font-family: 'Margaret';
    font-size: calc(22* (100vw / 390));
    z-index: 2;
}
  .point_section .product_img01::before {
    width: auto;
    transform: rotate(90deg);
    font-size: calc(22* (100vw / 390));
    right: auto;
    left: -10%;
    top: auto;
    bottom: 12%;
    opacity: 1;
  }
  .point_section .product_img02 {
    top: inherit;
    right: inherit;
    margin-bottom: 0;
  }
  .point_section .product_img02::before {
    width: auto;
    transform: rotate(90deg);
    font-size: calc(22* (100vw / 390));
    right: auto;
    left: -10%;
    top: auto;
    bottom: 12%;
    opacity: 1;
  }

  .point_section {
    padding-top: 0;
    padding-left: 0;
    letter-spacing: 0.03em;
  }

  .point_section sup:last-child {
    display: block;
    padding-top: calc(18 * (100vw / 375));
  }
  .point_cont--wrap.flex-wrap {
    flex-direction: column;
  }  
  .point__wrap.pink {
    margin-top: calc(114 * (100vw / 375));
  }
  .point__wrap.blue {
    margin-top: calc(57 * (100vw / 375));
    margin-left: 0;
  }
  .point__wrap--look {
    font-size: calc(105 * (100vw / 375));
  }


  /* ===================
    Product Purchase
  =================== */

  .purchase_section {
    margin-bottom: calc(80 * (100vw / 375));
    margin-bottom: 0;
  }

  .purchase_section .inner {
    padding: 0 calc(20 * (100vw / 375));
  }

  .purchase_section .product_img {
    left: auto;
    width: auto;
    margin: calc(100 * (100vw / 390)) 0 calc(16 * (100vw / 375));
  }

  .purchase_section .product_img img {
    width: 100%!important;
  }

  .purchase_section .product_img span::before {
    top: calc(-7 * (100vw / 375));
    left: calc(205 * (100vw / 375));
    width: calc(152 * (100vw / 375));
    height: calc(162 * (100vw / 375));
    background-size: cover;
  }


  @keyframes circle_logo {
    0% {
      width: 0;
      height: calc(60 * (100vw / 375));
      opacity: 0;
    }
    40% {
      height: calc(60 * (100vw / 375));
    }
    100% {
      width: calc(152 * (100vw / 375));
      height: calc(162 * (100vw / 375));
      opacity: 1;
    }
  }

  .purchase_section .product_cont {
    margin-bottom: calc(25 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
  }

  .purchase_section .btn_wrap {
    margin-bottom: calc(80 * (100vw / 375));
  }

  .purchase_section .shop_list {
    width: calc(335 * (100vw / 375));
    margin: auto;
    padding: calc(35 * (100vw / 375)) 0 calc(20 * (100vw / 375));
    font-size: calc(13 * (100vw / 375));
    line-height: 1.5em;
    border-radius: calc(20 * (100vw / 375));
  }

  .purchase_section .shop_list__ttl {
    margin-bottom: calc(32 * (100vw / 375));
    letter-spacing: 0.04em;
    font-size: calc(16 * (100vw / 375));
  }

  .purchase_section .shop_list__cont {
  }

  .purchase_section .shop_list__cont dt {
    margin-bottom: calc(8 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
  }
  .purchase_section .shop_list__cont dt.start:nth-of-type(2) {
    margin-top: calc(32 * (100vw / 375));
  }

  .purchase_section .shop_list__cont dt span {
    padding: 0;
  }

  .purchase_section .shop_list__cont dt span::before,
  .purchase_section .shop_list__cont dt span::after {
    width: calc(60 * (100vw / 375));
    margin-top: calc(-1 * (100vw / 375));
  }

  .purchase_section .shop_list__cont dt.start .start_icon {
    margin: 0 calc(15 * (100vw / 375)) 0 0;
    padding: calc(3 * (100vw / 375)) calc(8 * (100vw / 375));
    line-height: 1;
    font-size: calc(14 * (100vw / 375));
    font-weight: bold;
    border-radius: calc(5 * (100vw / 375));
    height: calc(26 * (100vw / 375));
    position: static;
  }
  .purchase_section .shop_list__cont dt span.deco_line {
    padding: 0;
    font-size: calc(14 * (100vw / 375));
  }
  .purchase_section .shop_list__cont dt span.deco_line::before, .purchase_section .shop_list__cont dt span.deco_line::after {
    position: absolute;
    top: 50%;
    width: calc(40 * (100vw / 375));
    border-top: 1px solid #6E6E6E;
    margin-top: -0.05rem;
    content: "";
  }
  .purchase_section .shop_list__cont dt span.deco_line::before {
    left: calc(-52 * (100vw / 375));
  }
  .purchase_section .shop_list__cont dt span.deco_line::after {
    right: calc(-52 * (100vw / 375));
  }
  .purchase_section .shop_list__cont dt.start .start_date {
    font-size: calc(17 * (100vw / 375));
  }
  .purchase_section .shop_list__cont dt.start .start_date .day {
    font-size: calc(14 * (100vw / 375));
  }

  .purchase_section .shop_list__cont dd {
    margin-bottom: calc(20 * (100vw / 375));
    letter-spacing: 0.01em;
  }

  .purchase_section .shop_list__cont ul {
    line-height: 1.7;
  }

  .purchase_section .shop_list__cont li {
    padding: 0 calc(8 * (100vw / 375));
  }

  .purchase_section .shop_list__cont li::before {
    height: calc(14 * (100vw / 375));
    margin-top: calc(-7 * (100vw / 375));
  }

/* ===================
  　　 Modal
=================== */
/*
.btn_modal {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  transition: opacity 0.2s ease-in-out;
  width: 30rem;
  height: 6rem;
  margin-right: 2rem;
  padding: 1.3rem;
  border: 1px solid #ffb045;
  border-radius: 20rem;
  background: url(../../Contents/ImagesPkg/lp/2022SScollection/icn_plus.svg) no-repeat 80% center;
  font-size: 1.6rem;
  text-align: center;
  letter-spacing: .04em;
  color: #ffb045 !important;
}
*/

.modaal-container {
  max-width: calc(340 * (100vw / 375));
}
.modaal-inner-wrapper {
  max-width: calc(340 * (100vw / 375));
  padding: calc(60 * (100vw / 375)) calc(25 * (100vw / 375));
}
.modaal-content-container {
  padding: 0;
  height: calc(100vh - calc(120 * (100vw / 375)));
  overflow-y: scroll;
}

.modal_close {
  width: calc(30 * (100vw / 375));
  height: calc(30 * (100vw / 375));
  position: absolute;
  top: calc(-15 * (100vw / 375));
  right: calc(-15 * (100vw / 375));
}
.modal_close:after, .modal_close::before {
  top: calc(7 * (100vw / 375));
  left: calc(14 * (100vw / 375));
  width: 1px;
  height: calc(16 * (100vw / 375));
}

.pointModal__wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  width: calc(325 * (100vw / 375));
  max-width: 100%;
  top: 48%;
}
.pointModal__inner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: calc(13 * (100vw / 375)) 0;
  background-color: #fff;
  max-width: 100%;
  max-height: 80vh;
  overflow-y: scroll;
}
.pointModal__wrap img {
  width: 100%;
}
.pointModal__visual {
  width: calc(285 * (100vw / 375));
  margin-top: 0;
  margin-left: calc(20 * (100vw / 375));
}

.pointModal__visualTitle {
  font-size: calc(34 * (100vw / 375));
  margin-top: calc(1 * (100vw / 375));
}
.pointModal__ItemList {
  width: calc(314 * (100vw / 375));
  margin: calc(20 * (100vw / 375)) 0 0 calc(10 * (100vw / 375));
}
.pointModal__Item {
  width: calc(157 * (100vw / 375));
}
.pointModal__Item:nth-of-type(n+5) {
  margin-top: 0;
}
.pointModal__Item:nth-of-type(n+3) {
  margin-top: calc(20 * (100vw / 375));
}
.item_num {
  font-size: calc(19 * (100vw / 375));
  top: 0;
  left: 0;
}
.item_name {
  font-size: calc(11 * (100vw / 375));
  letter-spacing: 0.05em;
  line-height: 1.8;
}
.pointModal__use {
  margin-top: calc(40 * (100vw / 375));
  padding-left: calc(20 * (100vw / 375));
  width: calc(285 * (100vw / 375));
}
.pointModal__use dt {
  display: flex;
  border: 1px solid #E39D99;
  font-size: calc(14 * (100vw / 375));
  width: calc(100 * (100vw / 375));
  height: calc(26 * (100vw / 375));
  justify-content: center;
  align-items: center;
  line-height: 1;
  color: #E39D99;
  font-weight: bold;
  margin-top: calc(17 * (100vw / 375));
  border-radius: calc(5 * (100vw / 375));
}
.pointModal__use dd {
  margin-top: calc(14 * (100vw / 375));
  font-size: calc(13 * (100vw / 375));
  line-height: 2;
}
.pointModal__use dd .bold {
  font-weight: bold;
}
#modaal__blue .pointModal__visualTitle {
  color: #AFBDD6;
}
#modaal__blue .item_num {
  color: #AFBDD6;
}
#modaal__blue .pointModal__use dt {
  color: #AFBDD6;
  border-color: #AFBDD6;
}
.pointModal__use .credit_item {
  padding-bottom: calc(3 * (100vw / 375));
}
.pointModal__use .credit_use {
  padding-bottom: calc(10 * (100vw / 375));
}

}