/* ===============================================### 
可変設定
###=============================================== */
:root {
  --pw: 1600; /* PC幅 */
  --sw: 750; /* SP幅 */
  --artboard-pw: 600; /* PCアートボード幅 */
  --artboard-sw: 750; /* SPアートボード幅 */
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
}

.lp_contents {
  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
  }
}

@media (768px <= width) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}
@media (1600px <= width) {
  :root {
    --variable: 1px;
  }
}
@media (width < 768px) {
  :root {
    --ratio: 1;
    --variable: calc(100vw / var(--sw));
  }
}


/* ===============================================### 
初期設定
###=============================================== */
.summer2026 {
  --font-ja: "hiragino-kaku-gothic-pron", sans-serif;
  --font-en: "helvetica-neue-lt-pro", sans-serif;
  --font-common: "helvetica-neue-lt-pro", "hiragino-kaku-gothic-pron", "Hiragino Sans", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fw-thin: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  font-weight: 400;
  font-style: normal;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-pink: #e585a3;
  --bg-color: #E6F1F5;
  color: #ffffff;
}

.summer2026 * {
  box-sizing: border-box;
}

.summer2026 img,
.summer2026 svg {
  width: 100%;
  height: auto;
}

/* ===========### PC用設定 ###=========== */
@media screen and (min-width: 768px) {
  .main-area{
    overflow-x: visible!important;
  }

  .summer2026 {
    position: relative;
  }

  .summer2026 .sp-visible {
    display: none;
  }

  .summer2026 .pc-visible {
    display: block;
  }

  .summer2026 .image-bg {
    background-color: #fff;
  }

  .summer2026 .image-bg a:hover {
    opacity: 0.7;
  }

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

/* ===========### SP用設定 ###=========== */
@media screen and (max-width: 767px) {
  .summer2026 {
    overflow: clip;
  }

  .summer2026 .sp-visible {
    display: block;
  }

  .summer2026 .pc-visible {
    display: none;
  }
}


/* ===============================================### 
アニメーション設定
###=============================================== */
/************** fade **************/
.summer2026 .js-anime.fade-in{
  opacity: 0;
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.summer2026 .js-anime.fade-in.show{
  opacity: 1;
}

.summer2026 .js-anime.fade-up{
  opacity: 0;
  transition: all 1s ease;
  transform: translateY(30px);
}

.summer2026 .js-anime.fade-up.show{
  opacity: 1;
  transform: translateY(0);
}

/************** mask-text **************/
.summer2026 .js-anime.mask-text {
  mask-image: linear-gradient(180deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
  mask-size: 100% 300%;
  -webkit-mask-size: 100% 300%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: 130% 130%;
  -webkit-mask-position: 130% 130%;
}

.summer2026 .js-anime.mask-text.show {
  animation: mask-animation 2s linear forwards;
}

@keyframes mask-animation {
  0% {
    mask-position: 130% 130%;
    -webkit-mask-position: 130% 130%;
  }
  100% {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
  }
}


/************** modal **************/
.summer2026 .modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* padding: 3rem; */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
}

dialog.modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  transition: background-color 0.3s;
  will-change: background-color;
}

dialog.is-open::backdrop {
  background-color: rgba(0, 0, 0, 0);
}

/* モーダルがactiveの時 */
.summer2026 .modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* モーダル背景のオーバーレイ部分 */
.summer2026 .modal__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: rgba(229, 133, 163, 0.5);
}

/* モーダルのコンテンツ */
.summer2026 .modal__content {
  position: relative;
  background-color: #fff;
  /* width: 50rem;
  padding: 2rem; */
  width: calc(660 * var(--rem));
  padding: calc(120 * var(--rem)) calc(50 * var(--rem));
  border-radius: calc(37 * var(--rem));
}

#modal02 .modal__content{
  padding: calc(120 * var(--rem)) calc(10 * var(--rem));
}

#modal03 .modal__content{
  padding: calc(120 * var(--rem)) calc(10 * var(--rem));
}

/* モーダルのボタン */
.summer2026 .modal-button{
  position: absolute;
  bottom: calc(11 * var(--rem));
  right: 0;
  width: calc(60 * var(--rem));
  cursor: pointer;
}

/* モーダルを閉じるボタン */
.summer2026 .modal__close-btn {
  position: absolute;
  top: calc(31 * var(--rem));
  right: calc(31 * var(--rem));
  width: calc(60 * var(--rem));
  height: calc(60 * var(--rem));
  cursor: pointer;
  z-index: 10;
}

/* スライドの矢印部分 */
.summer2026 .slide-button-prev{
  position: absolute;
  top: 30.5%;
  left: calc(-20 * var(--rem));
  transform: translateY(-50%);
  width: calc(37 * var(--rem));
  height: calc(78 * var(--rem));
  z-index: 1;
  cursor: pointer;
}

#modal02 .slide-button-prev{
  top: 29.3%;
  left: calc(20 * var(--rem));
}

#modal03 .slide-button-prev{
  top: 29.2%;
  left: calc(20 * var(--rem));
}

.summer2026 .slide-button-next{
  position: absolute;
  top: 30.5%;
  right: calc(-20 * var(--rem));
  transform: translateY(-50%);
  width: calc(37 * var(--rem));
  height: calc(78 * var(--rem));
  z-index: 1;
  cursor: pointer;
}

#modal02 .slide-button-next{
  top: 29.3%;
  right: calc(20 * var(--rem));
}

#modal03 .slide-button-next{
  top: 29.2%;
  right: calc(20 * var(--rem));
}

/*** text ***/
.summer2026 .modal__slide-item.name{
  margin-top: calc(50 * var(--rem));
  font-family: var(--font-en);
  font-size: calc(28 * var(--rem));
  font-weight: var(--fw-regular);
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--color-pink);
}

.summer2026 .modal__slide-item.detail{
  margin-top: calc(22 * var(--rem));
  font-family: var(--font-common);
  font-size: calc(20 * var(--rem));
  font-weight: var(--fw-regular);
  line-height: 1.75;
  font-feature-settings: "palt";
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--color-pink);
}

/*** image ***/
.summer2026 .modal__slide-item.image{
  position: relative;
  width: calc(460 * var(--rem));
  margin-inline: auto;
}

.summer2026 .modal__slide-item.image::after{
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
  pointer-events: none;
}

/*** モーダルごとの画像位置調整 ***/
#modal01 .modal__slide-item.image::after{
  bottom: calc(-50 * var(--rem));
  right: calc(-50 * var(--rem));
  width: calc(150 * var(--rem));
  height: calc(150 * var(--rem));
}

#modal01 .modal__slide[data-slick-index="0"] .modal__slide-item.image::after{
  background-image: url('../img/gloss/modal-color_01.png');
}

#modal01 .modal__slide[data-slick-index="1"] .modal__slide-item.image::after{
  background-image: url('../img/gloss/modal-color_02.png');
}

#modal01 .modal__slide[data-slick-index="2"] .modal__slide-item.image::after{
  background-image: url('../img/gloss/modal-color_03.png');
}

#modal02 .modal__slide-item.image::after{
  bottom: calc(-69 * var(--rem));
  right: calc(-50 * var(--rem));
  width: calc(150 * var(--rem));
  height: calc(150 * var(--rem));
}

#modal02 .modal__slide[data-slick-index="0"] .modal__slide-item.image::after{
  background-image: url('../img/eye-palette/modal-color_01.png');
}

#modal02 .modal__slide[data-slick-index="1"] .modal__slide-item.image::after{
  background-image: url('../img/eye-palette/modal-color_02.png');
}

#modal02 .modal__slide[data-slick-index="2"] .modal__slide-item.image::after{
  background-image: url('../img/eye-palette/modal-color_03.png');
}

#modal03 .modal__slide-item.image::after{
  bottom: calc(-50 * var(--rem));
  right: calc(-50 * var(--rem));
  width: calc(200 * var(--rem));
  height: calc(150 * var(--rem));
}

#modal03 .modal__slide[data-slick-index="0"] .modal__slide-item.image::after{
  background-image: url('../img/color-pot/modal-color_01.png');
}

#modal03 .modal__slide[data-slick-index="1"] .modal__slide-item.image::after{
  background-image: url('../img/color-pot/modal-color_02.png');
}

#modal03 .modal__slide[data-slick-index="2"] .modal__slide-item.image::after{
  background-image: url('../img/color-pot/modal-color_03.png');
}

#modal03 .modal__slide[data-slick-index="3"] .modal__slide-item.image::after{
  background-image: url('../img/color-pot/modal-color_04.png');
}

/*** button ***/
.summer2026 .modal .product-button{
  margin-top: calc(41 * var(--rem));
}


/* ===============================================### 
コンテンツ共通設定
###=============================================== */
.summer2026 .grid-wrap {
  display: grid;
}

.summer2026 .flex-wrap {
  display: flex;
}

.summer2026 .content {
}

.summer2026 .content .content__inner{
  position: relative;
  z-index: 1;
}

.summer2026 .content .item-wrap{
  position: relative; 
  padding-top: calc(82 * var(--rem));
  padding-bottom: calc(100 * var(--rem)); 
  z-index: 1;
}

.summer2026 .content .item-wrap::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(660 * var(--rem));
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: calc(38 * var(--rem));
  z-index: -1;
}

/************** slide **************/
.summer2026 .slide-wrap.main{
  width: calc(750 * var(--rem));
}

.summer2026 .slide-wrap.product{
  width: calc(460 * var(--rem));
  margin-top: calc(55 * var(--rem));
  margin-inline: auto;
}

.summer2026 .slide-wrap.product li{
  position: relative;
}

/*** dots ***/
.summer2026 .slick-dots{
  bottom: calc(35 * var(--rem));
}

.summer2026 .slick-dots li,
.summer2026 .slick-dots li button{
  width: calc(100 * var(--rem));
  height: calc(4 * var(--rem));
}

.summer2026 .slick-dots li:nth-of-type(1),
.summer2026 .slick-dots li button:nth-of-type(1){
  margin: 0 10px 0 0;
}

.summer2026 .slick-dots li:nth-of-type(2),
.summer2026 .slick-dots li button:nth-of-type(2){
  margin: 0 0 0 10px;
}

.summer2026 .slick-dots li button{
  padding: 0;
  background-color: var(--color-white);
}

.summer2026 .slick-dots li.slick-active button{
  background-color: var(--color-pink);
}

.summer2026 .slick-dots li button:before {
  top: 0;
  width: calc(100 * var(--rem));
  height: calc(4 * var(--rem));
  font-size: calc(16 * var(--rem));
  line-height: 1;
  opacity: 1;
  color: transparent;
}

/************** anchor-link(section-link) **************/
.summer2026 .section-link{
}

.summer2026 .section-link .section-link__list{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(25 * var(--rem));
}

.summer2026 .section-link .section-link__list li{
  position: relative;
  width: calc(327 * var(--rem));
}

.summer2026 .section-link .section-link__list li:nth-of-type(4){
  width: calc(267 * var(--rem));
}

.summer2026 .section-link .section-link__list li::after{
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: calc(16 * var(--rem));
  height: calc(8 * var(--rem));
  background-image: url('../img/arrow-white.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.summer2026 .section-link .section-link__list .flex-wrap{
  align-items: center;
  gap: calc(30 * var(--rem));
}

.summer2026 .section-link .link-image{
  width: calc(60 * var(--rem));
}

.summer2026 .section-link .link-text{
  font-family: var(--font-common);
  font-size: calc(16 * var(--rem));
  font-weight: var(--fw-regular);
  line-height: 1.75;
  font-feature-settings: "palt";
  letter-spacing: 0;
  color: var(--color-white);
}

.summer2026 .section-link .link-text span{
  font-family: var(--font-en);
  font-size: calc(15 * var(--rem));
}

/************** release-info **************/
.summer2026 .release-info{
  display: flex;
  flex-direction: column;
  gap: calc(60 * var(--rem));
}

.summer2026 .release-info__detail.flex-wrap{
  align-items: flex-start;
  justify-content: space-between;
}

.summer2026 .release-info__detail{
  margin-top: calc(17 * var(--rem));
}

.summer2026 .release-info__detail:nth-of-type(2){
  margin-top: calc(23 * var(--rem));
}

.summer2026 .release-info__detail dt{
  font-family: var(--font-en);
  font-size: calc(24 * var(--rem));
  font-weight: var(--fw-regular);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: left;
}

.summer2026 .release-info__detail dd{
  position: relative;
  font-family: var(--font-common);
  font-size: calc(20 * var(--rem));
  font-weight: var(--fw-regular);
  line-height: 1.9;
  font-feature-settings: "palt";
  letter-spacing: 0.15em;
  text-align: left;
}

.summer2026 .release-info__detail dd::before{
  content: '';
  position: absolute;
  top: 50%;
  left: calc(((var(--border-width) * var(--rem)) + (20 * var(--rem))) * -1);
  display: block;
  width: calc(var(--border-width) * var(--rem));
  height: 1px;
  background: var(--color-white);
  translate: 0 -50%;
}

.summer2026 .release-date{
  font-family: var(--font-en);
  font-size: calc(30 * var(--rem));
  font-weight: var(--fw-regular);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: center;
}

/************** product-description **************/
.summer2026 .product-description{
  margin-top: calc(70 * var(--rem));
}

.summer2026 .product-description .product-color{
}

.summer2026 .product-description .product-color__list.grid-wrap{
}

.summer2026 .product-description .product-color__list li{
  cursor: pointer;
}

.summer2026 .product-description .product-color__image{
}

.summer2026 .product-description .product-color__text{
  margin-top: calc(24 * var(--rem));
  font-family: var(--font-en);
  font-size: calc(20 * var(--rem));
  font-weight: var(--fw-regular);
  line-height: 1.25;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--color-pink);
}

.summer2026 .product-description .product-name{
  margin-top: calc(89 * var(--rem));
  font-family: var(--font-common);
  font-size: calc(24 * var(--rem));
  font-weight: var(--fw-regular);
  line-height: 1.6;
  font-feature-settings: "palt";
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--color-pink);
}

.summer2026 .product-description .product-price{
  margin-top: calc(16 * var(--rem));
  font-family: var(--font-common);
  font-size: calc(24 * var(--rem));
  font-weight: var(--fw-regular);
  line-height: 1.75;
  font-feature-settings: "palt";
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--color-pink);
}

.summer2026 .product-description .product-price .variation{
  display: inline-block;
  padding-right: calc(7 * var(--rem));
  font-size: calc(22 * var(--rem));
  font-weight: var(--fw-regular);
}

.summer2026 .product-description .product-price .tax{
  font-size: calc(20 * var(--rem));
  font-weight: var(--fw-regular);
}

.summer2026 .product-description .product-button{
  margin-top: calc(36 * var(--rem));
}

/************** other text **************/
.summer2026 .content__title{
  font-family: var(--font-en);
  font-size: calc(44 * var(--rem));
  font-weight: var(--fw-regular);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--color-pink);
}

.summer2026 .content__text{
  margin-top: calc(50 * var(--rem));
  font-family: var(--font-common);
  font-size: calc(26 * var(--rem));
  font-weight: var(--fw-regular);
  line-height: 2;
  font-feature-settings: "palt";
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--color-pink);
}

/************** button **************/
.summer2026 .link-button{
  display: block;
  font-family: var(--font-en);
  font-size: calc(34 * var(--rem));
  font-weight: var(--fw-regular);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: center;
  width: calc(420 * var(--rem));
  padding: calc(10 * var(--rem)) 0 calc(5 * var(--rem));
  background-color: var(--color-white);
  border-radius: calc(100 * var(--rem));
}

.summer2026 .link-button a{
  color: var(--color-pink);
}

.summer2026 .product-button{
  display: block;
  font-family: var(--font-en);
  font-size: calc(34 * var(--rem));
  font-weight: var(--fw-regular);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: center;
  width: calc(280 * var(--rem));
  margin-inline: auto;
  padding: calc(5 * var(--rem));
  background-color: var(--color-pink);
  border-radius: calc(100 * var(--rem));
}

.summer2026 .product-button a{
  color: var(--color-white);
}

/* ===========### responsive ###=========== */
@media screen and (min-width: 768px) {
  /************** layout **************/
  .summer2026 .left-area,
  .summer2026 .right-area{
    position: relative;
    width: calc((100% - (var(--artboard-pw) * var(--rem-pc))) / 2);
  }

  .summer2026 .center-area{
    width: calc(var(--artboard-pw) * var(--rem-pc));
    background-color: var(--color-white);
  }

  .summer2026 .left-area__sticky,
  .summer2026 .right-area__sticky{
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;

    background-repeat: no-repeat;
    background-size: cover;
  }

  .summer2026 .left-area__sticky{
    background-image: url('../img/lp_bg_left.jpg');
  }

  .summer2026 .right-area__sticky{
    background-image: url('../img/lp_bg_right.jpg');
  }

  /************** anchor-link(section-link) **************/
  .summer2026 .link-wrap{
    position: relative;
  }

  .summer2026 .section-link{
  }

  .summer2026 .section-link .section-link__list ul{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(25 * var(--rem-pc));
  }

  .summer2026 .section-link .section-link__list li{
    position: relative;
    width: calc(327 * var(--rem-pc));
  }

  .summer2026 .section-link .section-link__list li:nth-of-type(4){
    width: calc(237 * var(--rem-pc));
  }

  .summer2026 .section-link .section-link__list li::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: calc(16 * var(--rem-pc));
    height: calc(8 * var(--rem-pc));
    background-image: url('../img/arrow-white.svg');
    background-repeat: no-repeat;
    background-size: contain;
  }

  .summer2026 .section-link .section-link__list .flex-wrap{
    align-items: center;
    gap: calc(30 * var(--rem-pc));
  }

  .summer2026 .section-link .link-image{
    width: calc(60 * var(--rem-pc));
  }

  .summer2026 .section-link .link-text{
    font-family: var(--font-common);
    font-size: calc(16 * var(--rem-pc));
    font-weight: var(--fw-regular);
    line-height: 1.75;
    font-feature-settings: "palt";
    letter-spacing: 0.15em;
    color: var(--color-white);
  }

  .summer2026 .section-link .link-text span{
    font-family: var(--font-en);
    font-size: calc(15 * var(--rem-pc));
    letter-spacing: 0.1em;
  }

  /************** image **************/
  .summer2026 .fixed_title {
    grid-column: 1;
    width: calc(270 * var(--rem-pc));
  }

  /************** button **************/
  .summer2026 .right-area .link-button{
    position: absolute;
    bottom: calc(-274 * var(--rem-pc));
    right: calc(33 * var(--rem-pc));
    width: calc(260 * var(--rem-pc));
    font-size: calc(20 * var(--rem-pc));
  }

  .summer2026 .right-area .link-button span{
    display: block;
    margin-bottom: calc(-9 * var(--rem));
    font-size: calc(10 * var(--rem-pc));
    font-weight: var(--fw-regular);
    letter-spacing: 0.1em;
  }

  /************** background **************/
  .summer2026 .bg-fixed{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    background: url(../img/lp_bg-pc.jpg) center top repeat;
    background-size: cover;
    z-index: -1;
  }
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  /************** layout **************/
  .summer2026 .center-area {
    width: calc(750 * var(--rem));
    margin-inline: auto;
  }

    /************** slide **************/
    .summer2026 .slick-dots{
      bottom: calc(31 * var(--rem));
    }

    .summer2026 .slick-dots li:nth-of-type(1),
    .summer2026 .slick-dots li button:nth-of-type(1){
      margin: 0 8px 0 0;
    }
}


/* ===============================================### 
MV
###=============================================== */
.summer2026 .mv {
  width: calc(750 * var(--rem));
  height: calc(1330 * var(--rem));
  background-image: url(../img/mv.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.summer2026 .mv__inner{
  width: 100%;
  height: 100%;
}

.summer2026 .mv__inner a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

/************** image **************/
.summer2026 .mv__image {
  width: calc(750 * var(--rem));
  margin-inline: auto;
}

.summer2026 .mv__text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.summer2026 .mv__text.main{
  top: calc(100 * var(--rem));
  width: calc(332 * var(--rem));
}

.summer2026 .mv__text.sub{
  bottom: calc(100 * var(--rem));
  width: calc(426 * var(--rem));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
}


/* ===============================================### 
lead-area
###=============================================== */
.summer2026 .lead-area{
  padding-top: calc(120 * var(--rem));
  padding-bottom: calc(100 * var(--rem));
  background-image: url('../img/lead_bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.summer2026 .lead-area .content__inner{
  width: calc(660 * var(--rem));
  margin-inline: auto;
}

.summer2026 .lead-area .release-info{
  margin-top: calc(83 * var(--rem));
  padding: calc(58 * var(--rem)) calc(58 * var(--rem));
  border: 1px solid var(--color-white);
  border-radius: calc(43 * var(--rem));
}

/*** あしらいの線の長さ調整 ***/
.summer2026 .lead-area .release-info__item.item01 dl:nth-of-type(1) dd{
  --border-width: 106;
}

.summer2026 .lead-area .release-info__item.item01 dl:nth-of-type(2) dd{
  --border-width: 46;
}

.summer2026 .lead-area .release-info__item.item02 dl dd{
  --border-width: 73;
}

/*** 線の位置微調整 ***/
.summer2026 .lead-area .release-info__item.item01 .release-info__detail:nth-of-type(1) dd::before{
  top: 27%;
}


/************** text **************/
.summer2026 .lead-text{
  margin-top: calc(44 * var(--rem));
  font-family: var(--font-common);
  font-size: calc(22 * var(--rem));
  font-weight: var(--fw-regular);
  line-height: 2.4;
  font-feature-settings: "palt";
  letter-spacing: 0.2em;
  text-align: center;
}

.summer2026 .lead-text.text02,
.summer2026 .lead-text.text03{
  margin-top: calc(29 * var(--rem));
}

/************** image **************/
.summer2026 .lead-area .lead-title{
  width: calc(366 * var(--rem));
  margin-inline: auto;
}


/* ===============================================### 
anchor-link
###=============================================== */
.summer2026 .link-area.anchor-link{
  margin-top: calc(100 * var(--rem));
  margin-bottom: calc(100 * var(--rem));
}

.summer2026 .link-area.anchor-link .content__inner{
  width: calc(700 * var(--rem));
  margin-inline: auto;
}

.summer2026 .anchor-link__list.grid-wrap{
  grid-template-columns: repeat(3, 1fr);
  gap: calc(20 * var(--rem));
}

.summer2026 .anchor-link__list li{
  position: relative;
}

.summer2026 .anchor-link__list li::after{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  border: calc(2 * var(--rem)) solid var(--color-pink);
  z-index: -1;
  border-radius: calc(30 * var(--rem));
}

/************** text **************/
.summer2026 .anchor-link__title{
  margin-top: calc(16 * var(--rem));
  font-family: var(--font-en);
  font-size: calc(20 * var(--rem));
  font-weight: var(--fw-regular);
  line-height: 1.25;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--color-pink);
}

/************** image **************/
.summer2026 .anchor-link__image{
  width: calc(220 * var(--rem));
}

.summer2026 .anchor-link__arrow{
  width: calc(20 * var(--rem));
  margin: calc(4 * var(--rem)) auto calc(20 * var(--rem));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .summer2026 .anchor-link__arrow{
    margin: calc(-9 * var(--rem)) auto calc(20 * var(--rem));
  }
}


/* ===============================================### 
Petal Blooming Gloss C
###=============================================== */
.summer2026 .content-gloss{
}

.summer2026 .content-gloss .content__inner{
}

.summer2026 .content-gloss .content__item{
}

.summer2026 .content-gloss .content__item.item01{
}

.summer2026 .content-gloss .content__item.item02{
  padding-top: calc(45 * var(--rem));
  padding-bottom: calc(45 * var(--rem));
  background-image: url('../img/gloss/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

/************** slide **************/
.summer2026 .content-gloss .slide-wrap.fade-slide{
}

/************** product-description **************/
.summer2026 .content-gloss .product-description{
}

.summer2026 .content-gloss .product-description .product-color__list{
  width: calc(570 * var(--rem));
  margin-inline: auto;
}

.summer2026 .content-gloss .product-description .product-color__list.grid-wrap{
  grid-template-columns: repeat(3, 1fr);
}

.summer2026 .content-gloss .product-description .product-color__image{
  width: calc(150 * var(--rem));
  margin-inline: auto;
}

/************** image **************/
.summer2026 .content-gloss .content__item.item01 .content__image{
}

.summer2026 .content-gloss .content__item.item02 .content__image{
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
}


/* ===============================================### 
Petal Float Eye Palette
###=============================================== */
.summer2026 .content-eye-palette{
}

.summer2026 .content-eye-palette .content__inner{
}

.summer2026 .content-eye-palette .content__item{
}

.summer2026 .content-eye-palette .content__item.item01{
}

.summer2026 .content-eye-palette .content__item.item02{
  padding-top: calc(45 * var(--rem));
  padding-bottom: calc(45 * var(--rem));
  background-image: url('../img/eye-palette/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

/************** slide **************/
.summer2026 .content-eye-palette .modal-button{
  bottom: calc(21 * var(--rem));
}

/************** slide **************/
.summer2026 .content-eye-palette .slide-wrap.fade-slide{
}

/************** product-description **************/
.summer2026 .content-eye-palette .product-description{
}

.summer2026 .content-eye-palette .product-description .product-color__list{
  width: calc(604 * var(--rem));
  margin-inline: auto;
}

.summer2026 .content-eye-palette .product-description .product-color__list.grid-wrap{
  grid-template-columns: repeat(2, 1fr);
}

.summer2026 .content-eye-palette .product-description .product-color__image{
  width: calc(242 * var(--rem));
  margin-inline: auto;
}

/************** image **************/
.summer2026 .content-eye-palette .content__item.item01 .content__image{
}

.summer2026 .content-eye-palette .content__item.item02 .content__image{
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
}


/* ===============================================### 
Petal Melting Color Pot
###=============================================== */
.summer2026 .content-color-pot{
}

.summer2026 .content-color-pot .content__inner{
}

.summer2026 .content-color-pot .content__item{
}

.summer2026 .content-color-pot .content__item.item01{
}

.summer2026 .content-color-pot .content__item.item02{
  padding-top: calc(45 * var(--rem));
  padding-bottom: calc(45 * var(--rem));
  background-image: url('../img/color-pot/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

/************** slide **************/
.summer2026 .content-color-pot .slide-wrap.fade-slide{
}

/************** product-description **************/
.summer2026 .content-color-pot .product-description{
}

.summer2026 .content-color-pot .product-description .product-color__list{
  width: calc(520 * var(--rem));
  margin-inline: auto;
}

.summer2026 .content-color-pot .product-description .product-color__list.grid-wrap{
  grid-template-columns: repeat(2, 1fr);
  row-gap: calc(36 * var(--rem));
}

.summer2026 .content-color-pot .product-description .product-color__image{
  width: calc(200 * var(--rem));
  margin-inline: auto;
}

/************** release-info **************/
.summer2026 .content-color-pot .release-info {
  margin-top: calc(100 * var(--rem));
  width: calc(560 * var(--rem));
  margin-inline: auto;
  padding: calc(51 * var(--rem));
  border: calc(2 * var(--rem)) solid var(--color-pink);
  border-radius: calc(40 * var(--rem));
}

.summer2026 .content-color-pot .release-info__detail.flex-wrap{
  justify-content: center;
  align-items: center;
  gap: calc(25 * var(--rem));
}

.summer2026 .content-color-pot .release-info__detail{
  margin-top: 0;
}

.summer2026 .content-color-pot .release-info__detail:nth-of-type(2){
  margin-top: calc(-3 * var(--rem));
}

.summer2026 .content-color-pot .release-info__detail dt{
  font-size: calc(30 * var(--rem));
  font-weight: var(--fw-medium);
  color: var(--color-pink);
}

.summer2026 .content-color-pot .release-info__detail dd {
  font-size: calc(30 * var(--rem));
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  color: var(--color-pink);
}

.summer2026 .content-color-pot .release-info__detail dd::before{
  content: none;
}

/************** slide **************/
.summer2026 .content-color-pot .slide-wrap.product{
  width: calc(520 * var(--rem));
}

/************** image **************/
.summer2026 .content-color-pot .fade-slide.product .content__image{
  position: relative;
}

.summer2026 .content-color-pot .fade-slide.product .content__image::after{
  content: '';
  position: absolute;
  top: calc(59 * var(--rem));
  left: calc(30 * var(--rem));
  width: calc(140 * var(--rem));
  height: calc(140 * var(--rem));
  background-image: url('../img/limited-icon.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.summer2026 .content-color-pot .content__item.item01 .content__image{
}

.summer2026 .content-color-pot .content__item.item02 .content__image{
  width: calc(460 * var(--rem));
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
}


/* ===============================================### 
Make Look
###=============================================== */
.summer2026 .content-look{
}

.summer2026 .content-look .content__inner{
}

.summer2026 .content-look .content__item{
  padding-top: calc(77 * var(--rem));
  padding-bottom: calc(99 * var(--rem));
  background-repeat: no-repeat;
  background-size: cover;
}

.summer2026 .content-look .content__item.item01{
  background-image: url('../img/look_01/bg.jpg');
}

.summer2026 .content-look .content__item.item02{
  background-image: url('../img/look_02/bg.jpg');
}

.summer2026 .content-look .content__item.item03{
  background-image: url('../img/look_03/bg.jpg');
}

/************** use-item **************/
.summer2026 .content-look .use-item.item-area{
  width: calc(672 * var(--rem));
  margin-top: calc(103 * var(--rem));
  margin-inline: auto;
}

.summer2026 .content-look .use-item__title{
  font-family: var(--font-en);
  font-size: calc(44 * var(--rem));
  font-weight: var(--fw-regular);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: center;
}

.summer2026 .content-look .use-item__list{
  margin-top: calc(-19 * var(--rem));
}

.summer2026 .content-look .use-item__list.grid-wrap{
  grid-template-columns: repeat(3, 1fr);
}

.summer2026 .content-look .use-item__image{
  width: calc(224 * var(--rem));
}

.summer2026 .content-look .use-item-name{
  margin-top: calc(22 * var(--rem));
  font-family: var(--font-common);
  font-size: calc(20 * var(--rem));
  font-weight: var(--fw-regular);
  line-height: 1.4;
  font-feature-settings: "palt";
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--color-white);
}

/************** accordion__title **************/
.summer2026 .content-look .accordion-area{
  margin-top: calc(98 * var(--rem));
}

.summer2026 .content-look .accordion__text{
  margin-top: calc(10 * var(--rem));
  max-height: var(--max-height, 0);
  overflow: hidden;
  transition: max-height .6s ease-in-out;
  will-change: max-height;
  transform: translate3d(0, 0, 0);
}

.summer2026 .content-look .accordion__text.is-open{
  margin-bottom: calc(92 * var(--rem));
}

/*** 各アコーディオンの高さ ***/
.summer2026 .content-look .content__item.item01 .accordion__text.is-open{
  --max-height: calc(1300 * var(--rem));
}

.summer2026 .content-look .content__item.item02 .accordion__text.is-open{
  --max-height: calc(1300 * var(--rem));
}

.summer2026 .content-look .content__item.item03 .accordion__text.is-open{
  --max-height: calc(1300 * var(--rem));
}

.summer2026 .content-look .accordion__title{
  font-family: var(--font-en);
  font-size: calc(44 * var(--rem));
  font-weight: var(--fw-regular);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: center;
}

.summer2026 .content-look .accordion__button{
  position: relative;
  padding-block: calc(20 * var(--rem));
  font-family: var(--font-en);
  font-size: calc(28 * var(--rem));
  font-weight: var(--fw-regular);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: center;
  cursor: pointer;
}

.summer2026 .content-look .accordion__button.is-open{
  margin-bottom: calc(-32 * var(--rem));
}

.summer2026 .content-look .accordion__button::before,
.summer2026 .content-look .accordion__button::after {
  content: "";
  position: absolute;
  left: 50%;
  width: calc(32 * var(--rem));
  height: calc(16 * var(--rem));
  background-image: url('../img/accordion-arrow.svg');
  background-repeat: no-repeat;
  background-size: contain;
  translate: -50% 0;
}

.summer2026 .content-look .accordion__button::before{
  top: 0;
  rotate: 180deg;
  opacity: 0;
}

.summer2026 .content-look .accordion__button.is-open::before{
  opacity: 1;
}

.summer2026 .content-look .accordion__button::after{
  bottom: 0;
  opacity: 1;
}

.summer2026 .content-look .accordion__button.is-open::after{
  opacity: 0;
}

.summer2026 .content-look .accordion .use-description{
  margin-top: calc(76 * var(--rem));
}

.summer2026 .content-look .accordion .use-description:nth-of-type(1){
  margin-top: calc(17 * var(--rem));
}

.summer2026 .content-look .accordion .use-description dt{
  font-family: var(--font-en);
  font-size: calc(36 * var(--rem));
  font-weight: var(--fw-regular);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: center;
}

.summer2026 .content-look .accordion .use-description dd{
  margin-top: calc(13 * var(--rem));
  font-family: var(--font-common);
  font-size: calc(24 * var(--rem));
  font-weight: var(--fw-regular);
  line-height: 2;
  font-feature-settings: "palt";
  letter-spacing: 0.15em;
  text-align: center;
}

.summer2026 .content-look .accordion .use-description dd span.item a{
  color: var(--color-white);
  text-decoration: underline;
}

/************** slide **************/
.summer2026 .content-look .slide-wrap.fade-slide{
  width: calc(600 * var(--rem));
  margin-top: calc(38 * var(--rem));
  margin-inline: auto;
}

/************** text **************/
.summer2026 .content-look .content__title{
  font-size: calc(54 * var(--rem));
  color: var(--color-white);
}

/************** button **************/
.summer2026 .content-look .link-button{
  margin-top: calc(100 * var(--rem));
  margin-inline: auto;
  padding: calc(6 * var(--rem)) 0 calc(5 * var(--rem));
}


/* ===============================================### 
content-info
###=============================================== */
.summer2026 .content-info{
  background-image: url('../img/info_bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.summer2026 .content-info .content__inner{
  padding-top: calc(80 * var(--rem));
  padding-bottom: calc(120 * var(--rem));
}

.summer2026 .content-info .release-info{
  width: fit-content;
  margin-top: calc(30 * var(--rem));
  margin-inline: auto;
}

.summer2026 .content-info .release-info__detail{
  margin-top: calc(19 * var(--rem));
}

.summer2026 .content-info .release-info__item.item01,
.summer2026 .content-info .release-info__item.item02{
  width: calc(541 * var(--rem));
  margin-inline: auto;
}

.summer2026 .content-info .release-info__item.item03{
  width: calc(620 * var(--rem));
  margin-inline: auto;
}

.summer2026 .content-info .release-info__item.item03 .release-info__detail{
  margin-top: calc(3 * var(--rem));
}

.summer2026 .content-info .release-info__item.item04{
  width: calc(664 * var(--rem));
  margin-inline: auto;
}

.summer2026 .content-info .release-info__item.item04 .release-info__detail{
  margin-top: calc(-29 * var(--rem));
}

.summer2026 .content-info .release-info__item.item03 .release-info__detail.flex-wrap,
.summer2026 .content-info .release-info__item.item04 .release-info__detail.flex-wrap{
  flex-direction: column;
  align-items: center;
}

.summer2026 .content-info .shop-list.grid-wrap{
  grid-template-rows: repeat(3, 1fr);
  justify-content: center;
}

.summer2026 .content-info .shop-list li{
  font-family: var(--font-en);
  font-size: calc(22 * var(--rem));
  font-weight: var(--fw-regular);
  line-height: 2;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
}

.summer2026 .content-info .shop-list li span.ja{
  font-size: calc(20 * var(--rem));
}

/*** あしらいの線の長さ調整 ***/
.summer2026 .content-info .release-info__item.item01 dl:nth-of-type(1) dd {
  --border-width: 106;
}

.summer2026 .content-info .release-info__item.item01 dl:nth-of-type(2) dd {
  --border-width: 46;
}

.summer2026 .content-info .release-info__item.item02 dl:nth-of-type(1) dd {
  --border-width: 73;
}

/*** 線の長さ調整 ***/
.summer2026 .content-info .release-info__item.item01 .release-info__detail:nth-of-type(1) dd::before {
  top: 27%;
}

/************** text **************/
.summer2026 .content-info .content__title{
  color: var(--color-white);
}

/************** button **************/
.summer2026 .content-info .link-button{
  width: calc(600 * var(--rem));
  margin-top: calc(108 * var(--rem));
  margin-inline: auto;
  padding: calc(18 * var(--rem)) 0 calc(7 * var(--rem));
  font-size: calc(44 * var(--rem));
}

.summer2026 .content-info .link-button span{
  display: block;
  margin-bottom: calc(-14 * var(--rem));
  font-size: calc(24 * var(--rem));
  font-weight: var(--fw-regular);
  letter-spacing: 0.1em;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .summer2026 .content-info .release-info__item.item03 .release-info__detail{
    margin-top: calc(5 * var(--rem));
  }
}


/* ===============================================### 
ハンバーガーメニュー
###=============================================== */
/************** button **************/
.summer2026 .hamburger-menu{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  transition: opacity 0.3s;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  background-image: url('../img/hamburger/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.summer2026 .hamburger-menu.is-active{
  opacity: 1;
  pointer-events: auto;
}

.summer2026 .hamburger-menu__content{
  padding-top: calc(366 * var(--rem));
  padding-inline: calc(95 * var(--rem));
}

.summer2026 .hamburger-menu__inner{
  position: relative;
}

/************** anchor-link(section-link) **************/
.summer2026 .hamburger-menu .section-link{
}

.summer2026 .hamburger-menu .section-link .section-link__list{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(33 * var(--rem));
}

.summer2026 .hamburger-menu .section-link .section-link__list li{
  position: relative;
  width: calc(542 * var(--rem));
}

.summer2026 .hamburger-menu .section-link .section-link__list li:nth-of-type(4){
  width: calc(400 * var(--rem));
}

.summer2026 .hamburger-menu .section-link .section-link__list li::after{
  content: '';
  position: absolute;
  top: 50%;
  right: calc(16 * var(--rem));
  transform: translateY(-50%);
  width: calc(24 * var(--rem));
  height: calc(12 * var(--rem));
  background-image: url('../img/arrow-white.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.summer2026 .hamburger-menu .section-link .section-link__list .flex-wrap{
  align-items: center;
  gap: calc(50 * var(--rem));
}

.summer2026 .hamburger-menu .section-link .link-image{
  width: calc(96 * var(--rem));
}

.summer2026 .hamburger-menu .section-link .link-text{
  font-family: var(--font-common);
  font-size: calc(24 * var(--rem));
  font-weight: var(--fw-regular);
  line-height: 2;
  font-feature-settings: "palt";
  letter-spacing: 0.25em;
  color: var(--color-white);
}

_::-webkit-full-page-media, _:future, :root .summer2026 .hamburger-menu .section-link .link-text {
  letter-spacing: 0.15em;
}

.summer2026 .hamburger-menu .section-link .link-text span{
  font-family: var(--font-en);
  font-size: calc(24 * var(--rem));
  letter-spacing: 0.1em;
}

/************** button **************/
.summer2026 .hamburger-menu .modal__close-btn{
  top: calc(-195 * var(--rem));
  right: calc(-35 * var(--rem));
}

.summer2026 .hamburger-menu .link-button{
  display: block;
  font-family: var(--font-en);
  font-size: calc(44 * var(--rem));
  font-weight: var(--fw-regular);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: center;
  margin-top: calc(89 * var(--rem));
  width: calc(560 * var(--rem));
  padding: calc(10 * var(--rem)) 0 calc(3 * var(--rem));
  background-color: var(--color-white);
  border-radius: calc(100 * var(--rem));
}

.summer2026 .hamburger-menu .link-button span{
  display: block;
  margin-bottom: calc(-11 * var(--rem));
  font-size: calc(24 * var(--rem));
  font-weight: var(--fw-regular);
  letter-spacing: 0.1em;
}

.summer2026 .hamburger-button-wrap {
  position: fixed;
  bottom: calc(40 * var(--rem));
  right: 0;
  z-index: 20;
}

.summer2026 .hamburger-button{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  width: calc(160 * var(--rem));
  height: calc(192 * var(--rem));
  padding-top: calc(20 * var(--rem));

  font-family: var(--font-en);
  font-size: calc(28 * var(--rem));
  font-weight: var(--fw-regular);
  letter-spacing: 0.1em;
  text-align: center;

  background-image: url('../img/hamburger/button-bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: calc(20 * var(--rem)) 0 0 calc(20 * var(--rem));
  cursor: pointer;
}

.summer2026 .hamburger-button::before{
  content: '';
  display: block;
  width: calc(80 * var(--rem));
  height: calc(80 * var(--rem));
  margin-bottom: calc(6 * var(--rem));
  background: url('../img/hamburger/button-deco.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.summer2026 .hamburger-button::after{
  content: '';
  display: block;
  width: calc(18 * var(--rem));
  height: calc(18 * var(--rem));
  margin-top: calc(4 * var(--rem));
  background: url('../img/hamburger/button-open.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

/*** animation ***/
.summer2026 .js-follow-button {
  translate: 100% 0;
  transition: translate .6s ease-in-out;
  will-change: transform, translate;
}

.summer2026 .js-follow-button.is-active {
  translate: 0 0;
}