﻿/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px){
  .breadcrumb__list{
    padding-bottom: 1.6rem;
  }
}

/* LPコンテンツ */

/* ===============================================### 
初期設定
###=============================================== */
.lp_oshikatsu_nail{
  position: relative;
  --font-ja: "fot-chiaro-std", sans-serif;
  --font-ja02: "Zen Maru Gothic";
  --font-en: "haboro-contrast-extended", sans-serif;
  --font-common: "pragmatica", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ",  sans-serif;
  --fw-thin: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-ex-bold: 800;
  font-weight: 400;
  font-style: normal;
  --color-black: ##453D3D;
  --color-white: #ffffff;
  --color-pink: #F7E9EF;
  --bg-color: #E6F1F5;
  background-color: var(--color-pink);
  color: #453D3D;
  overflow: clip;
}

.lp_oshikatsu_nail img{
  width: 100%;
  height: auto;
}

.main-area * {
  box-sizing: border-box;
}

@font-face {
  font-family: "Zen Maru Gothic";
  src:
    url("../font/ZenMaruGothic-Bold.ttf") format("truetype");
}


/* ===========### PC用設定 ###=========== */
@media screen and (min-width: 768px) {
  .lp_oshikatsu_nail .hidden-phone{
    display: block;
  }

  .lp_oshikatsu_nail .hidden-desktop{
    display: none;
  }

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

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

/* ===========### SP用設定 ###=========== */
@media screen and (max-width: 767px) {
  .lp_oshikatsu_nail{
    overflow: hidden;
  }
  
  .lp_oshikatsu_nail .hidden-phone{
    display: none;
  }

  .lp_oshikatsu_nail .hidden-desktop{
    display: block;
  }
}


/* ===============================================### 
コンテンツ共通設定
###=============================================== */
.lp_oshikatsu_nail .content{
}

.lp_oshikatsu_nail .content .content__inner{
}

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

.lp_oshikatsu_nail .grid-wrap{
  display: grid;
}

/************** text **************/
.lp_oshikatsu_nail .content__title{
  margin-inline: auto;
  padding: calc(16 * (100vw / 1400)) calc(30 * (100vw / 1400));
  font-family: var(--font-ja);
  font-size: calc(24 * (100vw / 1400));
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: #E25D97;
  white-space: nowrap;

  background-color: var(--color-white);
  border: 3px solid #ED6FA6;
  border-radius: calc(32 * (100vw / 1400));
  box-shadow: 0 3px 0px 0 #ED6FA6;
}

.lp_oshikatsu_nail .content__title.flex-wrap{
  justify-content: center;
  align-items: center;
}

.lp_oshikatsu_nail .content__title span.category-name{
  position: relative;
  margin-right: calc(30 * (100vw / 1400));
  font-family: var(--font-ja);
  font-size: calc(24 * (100vw / 1400));
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

.lp_oshikatsu_nail .content__title span.category-name::after{
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
}

.lp_oshikatsu_nail .content__title span.cross-image{
  display: grid;
  width: calc(15 * (100vw / 1400));
  margin-inline: calc(10 * (100vw / 1400));
}

.lp_oshikatsu_nail .credit{
  margin-top: calc(25 * (100vw / 1400));
  font-family: var(--font-ja02);
  font-size: calc(13 * (100vw / 1400));
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.lp_oshikatsu_nail .p-checklist__carousel .swiper-slide.p-checklist__carousel__slide:not(.swiper-slide-active) .credit{
  display: none;
}

.lp_oshikatsu_nail .credit.flex-wrap{
  align-items: center;
  justify-content: space-between;
  width: calc(229 * (100vw / 1400));
  max-width: 22.9rem;
  margin-inline: auto;
  /* gap: calc(57 * (100vw / 1400)); */
}

.lp_oshikatsu_nail .credit__icon{
  display: inline-block;
  width: calc(60 * (100vw / 1400));
  height: calc(24 * (100vw / 1400));
  font-family: var(--font-en);
  font-size: calc(15 * (100vw / 1400));
  font-weight: var(--fw-ex-bold);
  line-height: 1.5166666667;
  letter-spacing: 0.1em;
  color: var(--color-white);
  background-color: #E25D97;
  border-radius: calc(32 * (100vw / 1400));
}

.lp_oshikatsu_nail .credit__icon a{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(1 * (100vw / 1400));
}

.lp_oshikatsu_nail .credit a.link-disable:hover{
  opacity: 1; /* リンクなしのクレジットがある場合に設定 */
}

/************** image **************/


/* ===========### responsive ###=========== */
/*** PC ***/
@media screen and (min-width: 768px) {
  .lp_oshikatsu_nail .content-sticky{
    position: sticky;
    top: var(--header-height);
  }
}

/*** SP ***/
@media screen and (max-width: 767px) {
  .lp_oshikatsu_nail .content-wrap.flex-wrap{
    flex-direction: column;
  }

  .lp_oshikatsu_nail .content{
    margin-top: calc(60 * (100vw / 375));
  }

  .lp_oshikatsu_nail .content .content__inner{
    width: calc(375 * (100vw / 375));
    margin-inline: auto;
  }

  /************** text **************/
  .lp_oshikatsu_nail .content__title{
    padding: calc(20 * (100vw / 375)) calc(30 * (100vw / 375));
    font-size: calc(22 * (100vw / 375));
    border: 3px solid #ED6FA6;
    border-radius: calc(32 * (100vw / 375));
  }

  .lp_oshikatsu_nail .content__title.flex-wrap{
    flex-direction: column;
    gap: calc(8 * (100vw / 375));
  }

  .lp_oshikatsu_nail .content__title span.category-name{
    margin-right: calc(20 * (100vw / 375));
    font-size: calc(22 * (100vw / 375));
  }

  .lp_oshikatsu_nail .content__title span.cross-image{
    width: calc(10 * (100vw / 375));
  }

  .lp_oshikatsu_nail .credit{
    margin-top: calc(15 * (100vw / 375));
    font-size: calc(13 * (100vw / 375));
  }

  .lp_oshikatsu_nail .credit.flex-wrap{
    align-items: center;
    width: calc(190 * (100vw / 375));
    max-width: none;
    /* justify-content: center; */
    /* gap: calc(62 * (100vw / 375)); */
  }

  .lp_oshikatsu_nail .credit__icon{
    width: calc(60 * (100vw / 375));
    height: calc(24 * (100vw / 375));
    font-size: calc(15 * (100vw / 375));
    border-radius: calc(32 * (100vw / 375));
  }
}


/* ===============================================### 
left-area・right-area
###=============================================== */
@media screen and (min-width: 768px) {
  /*** left-area ***/
  .lp_oshikatsu_nail .left-area{
    width: calc(500 * (100vw / 1400));
    height: 100vh;
  }

  .lp_oshikatsu_nail .link-area__inner{
    width: calc(335 * (100vw / 1400));
    margin-top: calc(61 * (100vw / 1400));
    margin-inline: auto;
  }

  .lp_oshikatsu_nail .link-area__title{
    font-family: var(--font-en);
    font-size: calc(40 * (100vw / 1400));
    font-weight: var(--fw-ex-bold);
    line-height: 1.125;
    letter-spacing: 0.1em;
    text-align: center;
    color: #E25D97;
  }

  .lp_oshikatsu_nail .link-area .link-list.grid-wrap{
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(15 * (100vw / 1400));
    row-gap: calc(20 * (100vw / 1400));
    margin-top: calc(43 * (100vw / 1400));
  }

  .lp_oshikatsu_nail .link-area .link-list .link-list__item{
    border: 2px solid #ED6FA6;
    background-color: var(--color-white);
    border-radius: calc(16 * (100vw / 1400));
    box-shadow: 0 3px 0px 0 #ED6FA6;
  }

  .lp_oshikatsu_nail .link-area .link-list .link-list__item a{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding: calc(18 * (100vw / 1400)) calc(30 * (100vw / 1400)) calc(23 * (100vw / 1400));

    font-family: var(--font-ja);
    font-size: calc(18 * (100vw / 1400));
    font-weight: var(--fw-bold);
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-align: center;
  }

  /*** テキスト色調整 ***/
  .lp_oshikatsu_nail .link-area .link-list .link-list__item.item01 a{
    color: #A96ECE;
  }

  .lp_oshikatsu_nail .link-area .link-list .link-list__item.item02 a{
    padding: calc(31 * (100vw / 1400)) calc(30 * (100vw / 1400)) calc(23 * (100vw / 1400));
    color: #C4BD23;
  }

  .lp_oshikatsu_nail .link-area .link-list .link-list__item.item03 a{
    padding: calc(31 * (100vw / 1400)) calc(30 * (100vw / 1400)) calc(23 * (100vw / 1400));
    color: #E36DB4;
  }

  .lp_oshikatsu_nail .link-area .link-list .link-list__item.item04 a{
    padding: calc(31 * (100vw / 1400)) calc(20 * (100vw / 1400)) calc(33 * (100vw / 1400));
    color: #48C3C1;
  }

  .lp_oshikatsu_nail .link-area .link-list .link-list__item a::before{
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
  }

  /*** 各リンクのアイコン ***/
  .lp_oshikatsu_nail .link-area .link-list .link-list__item.item01 a::before{
    top: calc(8 * (100vw / 1400));
    right: calc(10 * (100vw / 1400));
    transform: rotate(21deg);
    width: calc(25 * (100vw / 1400));
    height: calc(15 * (100vw / 1400));
    background-image: url('../img/ribbon.png');
  }

  .lp_oshikatsu_nail .link-area .link-list .link-list__item.item02 a::before{
    top: calc(10 * (100vw / 1400));
    right: calc(20 * (100vw / 1400));
    width: calc(23 * (100vw / 1400));
    height: calc(23 * (100vw / 1400));
    background-image: url('../img/glitter.png');
  }

  .lp_oshikatsu_nail .link-area .link-list .link-list__item.item03 a::before{
    top: calc(15 * (100vw / 1400));
    right: calc(22 * (100vw / 1400));
    transform: rotate(21deg);
    width: calc(25 * (100vw / 1400));
    height: calc(21 * (100vw / 1400));
    background-image: url('../img/heart.png');
  }

  .lp_oshikatsu_nail .link-area .link-list .link-list__item.item04 a::before{
    top: calc(10 * (100vw / 1400));
    left: calc(13 * (100vw / 1400));
    transform: rotate(-10deg);
    width: calc(23 * (100vw / 1400));
    height: calc(21 * (100vw / 1400));
    background-image: url('../img/star.png');
  }

  .lp_oshikatsu_nail .link-area .link-list .link-list__item a::after{
    content: '';
    position: absolute;
    bottom: calc(3 * (100vw / 1400));
    left: 50%;
    transform: translateX(-50%);
    width: calc(20 * (100vw / 1400));
    height: calc(20 * (100vw / 1400));
    background-image: url('../img/arrow.svg');
    background-repeat: no-repeat;
    background-size: contain;
  }

  /*** right-area ***/
  .lp_oshikatsu_nail .right-area{
    width: calc(900 * (100vw / 1400));
    background-image: url('../img/bg.png');
    background-size: cover;
  }

  .lp_oshikatsu_nail .right-area{
    overflow: hidden;
  }
}

@media screen and (max-width: 767px) {
  /*** left-area ***/
  .lp_oshikatsu_nail .left-area{
    display: none;
  }

  /*** right-area ***/
  .lp_oshikatsu_nail .right-area{
    background-image: url('../img/bg_sp.png');
    background-size: cover;
  }
}


/* ===============================================### 
MV
###=============================================== */
.lp_oshikatsu_nail .mv{
}

.lp_oshikatsu_nail .mv__inner{
  width: 100%;
}

/************** image **************/
.lp_oshikatsu_nail .mv__image{
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_oshikatsu_nail .mv__inner{
    width: calc(375 * (100vw / 375));
    margin-inline: auto;
  }
}


/* ===============================================### 
lead-area
###=============================================== */
.lp_oshikatsu_nail .lead-area{
  margin-top: calc(63 * (100vw / 1400));
}

.lp_oshikatsu_nail .lead-area .lead-area__inner{
}

/************** text **************/
.lp_oshikatsu_nail .lead-area .lead__detail{
  position: relative;
  margin-top: calc(38 * (100vw / 1400));
}

.lp_oshikatsu_nail .lead-area .lead__detail::after{
  content: '';
  position: absolute;
  top: calc(-24 * (100vw / 1400));
  left: 50%;
  transform: translateX(-50%);
  width: calc(634 * (100vw / 1400));
  height: calc(299 * (100vw / 1400));
  background-image: url('../img/lead_bg.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.lp_oshikatsu_nail .lead-area .lead__detail p{
  position: relative;
  z-index: 1;
  padding: calc(58 * (100vw / 1400)) calc(45 * (100vw / 1400)) calc(45 * (100vw / 1400));

  font-family: var(--font-ja02);
  font-size: calc(15 * (100vw / 1400));
  font-weight: var(--fw-bold);
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
}

.lp_oshikatsu_nail .lead-area .lead__detail p span{
  display: inline-block;
  margin-top: calc(9 * (100vw / 1400));
  margin-bottom: calc(5 * (100vw / 1400));
  font-family: var(--font-ja);
  font-size: calc(30 * (100vw / 1400));
  font-weight: var(--fw-ex-bold);
  letter-spacing: 0.05em;
  color: #E25D97;
}

/************** image **************/
.lp_oshikatsu_nail .lead-area .lead-area__title{
  width: calc(224 * (100vw / 1400));
  margin-inline: auto;
}

.lp_oshikatsu_nail .lead-area .lead-area__image{
  width: calc(534 * (100vw / 1400));
  margin-top: calc(51 * (100vw / 1400));
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_oshikatsu_nail .lead-area{
    margin-top: calc(40 * (100vw / 375));
  }

  .lp_oshikatsu_nail .lead-area .lead-area__inner{
  }

  /************** text **************/
  .lp_oshikatsu_nail .lead-area .lead__detail{
    margin-top: calc(10 * (100vw / 375));
  }

  .lp_oshikatsu_nail .lead-area .lead__detail::after{
    top: calc(-32 * (100vw / 375));
    width: calc(375 * (100vw / 375));
    height: calc(350 * (100vw / 375));
    background-image: url('../img/lead_bg_sp.png');
  }

  .lp_oshikatsu_nail .lead-area .lead__detail p{
    padding: calc(57 * (100vw / 375)) calc(45 * (100vw / 375)) calc(45 * (100vw / 375));
    font-size: calc(15 * (100vw / 375));
  }

  .lp_oshikatsu_nail .lead-area .lead__detail p span{
    margin-top: calc(6 * (100vw / 375));
    margin-bottom: calc(2 * (100vw / 375));
    font-size: calc(30 * (100vw / 375));
  }

  /************** image **************/
  .lp_oshikatsu_nail .lead-area .lead-area__title{
    width: calc(193 * (100vw / 375));
    margin-inline: auto;
  }

  .lp_oshikatsu_nail .lead-area .lead-area__image{
    width: calc(375 * (100vw / 375));
    margin-top: calc(15 * (100vw / 375));
    margin-inline: auto;
  }
}


/* ===============================================### 
コンテンツ01
###=============================================== */
.lp_oshikatsu_nail .content01{
  margin-top: calc(93 * (100vw / 1400));
}

.lp_oshikatsu_nail .content01 .content__inner{

}

.lp_oshikatsu_nail .content01 .content__item{
}

/************** text **************/
.lp_oshikatsu_nail .content01 .content__title{
  width: calc(565 * (100vw / 1400));
}

.lp_oshikatsu_nail .content01 .content__title .category-name{
  color: #A96ECE;
}

/************** image **************/
.lp_oshikatsu_nail .content01 .content__title span.category-name::after{
  top: calc(8 * (100vw / 1400));
  right: calc(-23 * (100vw / 1400));
  transform: rotate(29deg);
  width: calc(20 * (100vw / 1400));
  height: calc(20 * (100vw / 1400));
  background-image: url('../img/ribbon.png');
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_oshikatsu_nail .content01{
    margin-top: calc(69 * (100vw / 375));
  }

  .lp_oshikatsu_nail .content01 .content__inner{

  }

  .lp_oshikatsu_nail .content01 .content__item{
  }

  /************** text **************/
  .lp_oshikatsu_nail .content01 .content__title{
    width: calc(345 * (100vw / 375));
  }

  /************** image **************/
  .lp_oshikatsu_nail .content01 .content__title span.category-name::after{
    top: calc(6 * (100vw / 375));
    right: calc(-18 * (100vw / 375));
    transform: rotate(29deg);
    width: calc(20 * (100vw / 375));
    height: calc(20 * (100vw / 375));
  }
}


/* ===============================================### 
コンテンツ02
###=============================================== */
.lp_oshikatsu_nail .content02{
  margin-top: calc(76 * (100vw / 1400));
}

.lp_oshikatsu_nail .content02 .content__inner{

}

.lp_oshikatsu_nail .content02 .content__item{
}

/************** text **************/
.lp_oshikatsu_nail .content02 .content__title{
  width: calc(415 * (100vw / 1400));
}

.lp_oshikatsu_nail .content02 .content__title .category-name{
  color: #C4BD23;
}

/************** image **************/
.lp_oshikatsu_nail .content02 .content__title span.category-name::after{
  top: calc(3 * (100vw / 1400));
  right: calc(-26 * (100vw / 1400));
  width: calc(21 * (100vw / 1400));
  height: calc(21 * (100vw / 1400));
  background-image: url('../img/glitter.png');
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_oshikatsu_nail .content02{
    margin-top: calc(44 * (100vw / 375));
  }

  .lp_oshikatsu_nail .content02 .content__inner{

  }

  .lp_oshikatsu_nail .content02 .content__item{
  }

  /************** text **************/
  .lp_oshikatsu_nail .content02 .content__title{
    width: calc(345 * (100vw / 375));
  }

  /************** image **************/
  .lp_oshikatsu_nail .content02 .content__title span.category-name::after{
    top: calc(3 * (100vw / 375));
    right: calc(-22 * (100vw / 375));
    width: calc(18 * (100vw / 375));
    height: calc(18 * (100vw / 375));
  }
}


/* ===============================================### 
コンテンツ03
###=============================================== */
.lp_oshikatsu_nail .content03{
  margin-top: calc(74 * (100vw / 1400));
}

.lp_oshikatsu_nail .content03 .content__inner{

}

.lp_oshikatsu_nail .content03 .content__item{
}

/************** text **************/
.lp_oshikatsu_nail .content03 .content__title{
  width: calc(389 * (100vw / 1400));
}

.lp_oshikatsu_nail .content03 .content__title .category-name{
  color: #E36DB4;
}

/************** image **************/
.lp_oshikatsu_nail .content03 .content__title span.category-name::after{
  top: calc(7 * (100vw / 1400));
  right: calc(-21 * (100vw / 1400));
  width: calc(20 * (100vw / 1400));
  height: calc(20 * (100vw / 1400));
  background-image: url('../img/heart.png');
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_oshikatsu_nail .content03{
    margin-top: calc(46 * (100vw / 375));
  }

  .lp_oshikatsu_nail .content03 .content__inner{

  }

  .lp_oshikatsu_nail .content03 .content__item{
  }

  /************** text **************/
  .lp_oshikatsu_nail .content03 .content__title{
    width: calc(345 * (100vw / 375));
  }

  /************** image **************/
  .lp_oshikatsu_nail .content03 .content__title span.category-name::after{
    top: calc(7 * (100vw / 375));
    right: calc(-26 * (100vw / 375));
    width: calc(20 * (100vw / 375));
    height: calc(20 * (100vw / 375));
  }
}


/* ===============================================### 
コンテンツ04
###=============================================== */
.lp_oshikatsu_nail .content04{
  margin-top: calc(74 * (100vw / 1400));
}

.lp_oshikatsu_nail .content04 .content__inner{

}

.lp_oshikatsu_nail .content04 .content__item{
}

/************** text **************/
.lp_oshikatsu_nail .content04 .content__title{
  width: calc(441 * (100vw / 1400));
}

.lp_oshikatsu_nail .content04 .content__title .category-name{
  color: #48C3C1;
}

/************** image **************/
.lp_oshikatsu_nail .content04 .content__title span.category-name::after{
  top: calc(5 * (100vw / 1400));
  right: calc(-26 * (100vw / 1400));
  transform: rotate(32deg);
  width: calc(20 * (100vw / 1400));
  height: calc(20 * (100vw / 1400));
  background-image: url('../img/star.png');
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_oshikatsu_nail .content04{
    margin-top: calc(45 * (100vw / 375));
  }

  .lp_oshikatsu_nail .content04 .content__inner{

  }

  .lp_oshikatsu_nail .content04 .content__item{
  }

  /************** text **************/
  .lp_oshikatsu_nail .content04 .content__title{
    width: calc(345 * (100vw / 375));
  }

  /************** image **************/
  .lp_oshikatsu_nail .content04 .content__title span.category-name::after{
    top: calc(5 * (100vw / 375));
    right: calc(-19 * (100vw / 375));
    transform: rotate(36deg);
    width: calc(18 * (100vw / 375));
    height: calc(18 * (100vw / 375));
  }
}


/* ===============================================### 
コンテンツ05
###=============================================== */
.lp_oshikatsu_nail .content05{
  margin-top: calc(70 * (100vw / 1400));
  margin-bottom: calc(100 * (100vw / 1400));
}

.lp_oshikatsu_nail .content05 .content__inner{
}

.lp_oshikatsu_nail .content05 .content__item{
}

/************** text **************/
.lp_oshikatsu_nail .content05 .content__lead{
  font-family: var(--font-ja);
  font-size: calc(20 * (100vw / 1400));
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: #E25D97;
}

/************** image **************/
.lp_oshikatsu_nail .content05 .content__image{
  width: calc(300 * (100vw / 1400));
  margin-top: calc(15 * (100vw / 1400));
  margin-inline: auto;
}

/************** button **************/
.lp_oshikatsu_nail .link-button-wrap{
  margin-top: calc(100 * (100vw / 1400));
}

.lp_oshikatsu_nail .link-button{
  width: calc(300 * (100vw / 1400));
  height: calc(50 * (100vw / 1400));
  margin-inline: auto;
  font-family: var(--font-ja02);
  font-size: calc(14 * (100vw / 1400));
  font-weight: var(--fw-bold);
  line-height: 1.2857142857;
  letter-spacing: 0.05em;
  text-align: center;
  border: 2px solid #E25D97;
  border-radius: calc(12 * (100vw / 1400));
}

.lp_oshikatsu_nail .link-button a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.lp_oshikatsu_nail .link-button.all-item{
  color: var(--color-white);
  background-color: #E25D97;
}

.lp_oshikatsu_nail .link-button.top{
  margin-top: calc(14 * (100vw / 1400));
  color: #E25D97;
  background-color: var(--color-white);
}


/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_oshikatsu_nail .content05{
    margin-top: calc(41 * (100vw / 375));
    margin-bottom: calc(70 * (100vw / 375));
  }

  .lp_oshikatsu_nail .content05 .content__inner{
  }

  .lp_oshikatsu_nail .content05 .content__item{
  }

  /************** text **************/
  .lp_oshikatsu_nail .content05 .content__lead{
    font-size: calc(17 * (100vw / 375));
  }

  /************** image **************/
  .lp_oshikatsu_nail .content05 .content__image{
    width: calc(230 * (100vw / 375));
    margin-top: calc(59 * (100vw / 1400));
  }

  /************** button **************/
  .lp_oshikatsu_nail .link-button-wrap{
    margin-top: calc(59 * (100vw / 375));
  }

  .lp_oshikatsu_nail .link-button{
    width: calc(300 * (100vw / 375));
    height: calc(50 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
    border-radius: calc(12 * (100vw / 375));
  }

  .lp_oshikatsu_nail .link-button.top{
    margin-top: calc(16 * (100vw / 375));
  }
}


/* ===============================================### 
follow-nav
###=============================================== */
@media screen and (max-width: 767px) {
  .lp_oshikatsu_nail .follow-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    height: calc(88 * (100vw /375));
    background-color: #F8D4E4;
  }

  .lp_oshikatsu_nail .follow-nav .link-area__title{
    font-family: var(--font-en);
    font-size: calc(16 * (100vw / 375));
    font-weight: var(--fw-ex-bold);
    line-height: 2.8125;
    letter-spacing: 0.1em;
    text-align: center;
    color: #E25D97;
  }

  .lp_oshikatsu_nail .link-area .follow-nav .link-list.grid-wrap{
    grid-template-columns: repeat(4, 1fr);
    column-gap: calc(5 * (100vw / 375));
    margin-top: calc(-8 * (100vw / 375));
    margin-left: calc(14 * (100vw / 375));
    padding-bottom: calc(10 * (100vw / 375));
    overflow-x: scroll;
  }

  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item{
    border: 2px solid #ED6FA6;
    background-color: var(--color-white);
    border-radius: calc(8 * (100vw / 375));
    box-shadow: 0 3px 0px 0 #ED6FA6;
  }

  /*** 各アイテムの幅調整 ***/
  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item.item01{
    width: calc(174 * (100vw / 375));
  }

  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item.item02{
    width: calc(102 * (100vw / 375));
  }

  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item.item03{
    width: calc(86 * (100vw / 375));
  }

  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item.item04{
    width: calc(116 * (100vw / 375));
  }

  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item a{
    display: block;
    position: relative;
    right: calc(10 * (100vw / 375));
    width: 100%;
    height: 100%;
    padding: calc(10 * (100vw / 375)) calc(10 * (100vw / 375));

    font-family: var(--font-ja);
    font-size: calc(14 * (100vw / 375));
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-align: center;
  }

  /*** テキスト色調整 ***/
  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item.item01 a{
    color: #A96ECE;
  }

  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item.item02 a{
    color: #C4BD23;
  }

  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item.item03 a{
    color: #E36DB4;
  }

  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item.item04 a{
    color: #48C3C1;
  }

  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item a::after{
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
  }

  /*** 各リンクのアイコン ***/
  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item.item01 a::after{
    top: calc(13 * (100vw / 375));
    right: 0;
    transform: rotate(21deg);
    width: calc(16 * (100vw / 375));
    height: calc(16 * (100vw / 375));
    background-image: url('../img/ribbon.png');
  }

  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item.item02 a::after{
    top: calc(10 * (100vw / 375));
    right: 0;
    width: calc(16 * (100vw / 375));
    height: calc(16 * (100vw / 375));
    background-image: url('../img/glitter.png');
  }

  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item.item03 a::after{
    top: calc(13 * (100vw / 375));
    right: 0;
    width: calc(16 * (100vw / 375));
    height: calc(16 * (100vw / 375));
    background-image: url('../img/heart.png');
  }

  .lp_oshikatsu_nail .link-area .follow-nav .link-list .link-list__item.item04 a::after{
    top: calc(13 * (100vw / 375));
    right: 0;
    transform: rotate(-10deg);
    width: calc(13 * (100vw / 375));
    height: calc(13 * (100vw / 375));
    background-image: url('../img/star.png');
  }
}


/* ============================================================
カルーセル (Swiper coverflow)
============================================================ */
.p-checklist__carousel.swiper {
  overflow: visible;
  /* padding: 4rem 0; */
  width: calc(746 * (100vw / 1400));
  padding: calc(40 * (100vw / 1400)) 0 calc(25 * (100vw / 1400));
  max-width: 74.6rem;
  margin-left: auto;
  margin-right: auto;
}

.p-checklist__carousel .swiper-slide.p-checklist__carousel__slide {
  width: calc(260 * (100vw / 1400));
  max-width: 26rem;
  flex-shrink: 0;
}

.p-checklist__carousel .swiper-slide.p-checklist__carousel__slide .slide-image{
  position: relative;
}

.p-checklist__carousel .swiper-slide.p-checklist__carousel__slide:not(.swiper-slide-active) .slide-image::after{
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.p-checklist__carousel .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 1rem 3.5rem rgba(0, 0, 0, 0.18);
}

/* Swiper デフォルト矢印を非表示 */
.p-checklist__carousel .swiper-button-prev::after,
.p-checklist__carousel .swiper-button-next::after {
  display: none;
}

/* カスタムナビゲーションボタン */
.p-checklist__carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(40 * (100vw / 1400));
  height: calc(40 * (100vw / 1400));
  margin-top: 0; /* Swiper の margin-top をリセット */
  transition: opacity 0.3s ease;
}

.p-checklist__carousel__nav:hover {
  opacity: 0.7;
}

/* ▼ 変更: コンテナ幅を広げた分、ボタンの位置を少しスライドに近づけます */
.p-checklist__carousel__nav--prev {
  left: 0;
}
.p-checklist__carousel__nav--next {
  right: 0;
}

.p-checklist__carousel__circle {
  position: absolute;
  width: calc(40 * (100vw / 1400))!important;
  height: calc(40 * (100vw / 1400))!important;
  top: 0;
  left: 0;
}

.p-checklist__carousel__arrow {
  position: relative;
  z-index: 1;
  width: calc(20 * (100vw / 1400))!important;
  height: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .p-checklist__carousel.swiper {
    overflow: visible;
    padding: calc(30 * (100vw / 375)) 0 calc(15 * (100vw / 375));
    width: calc(375 * (100vw / 375));
    max-width: initial;
    margin-left: auto;
    margin-right: auto;
  }

  .p-checklist__carousel .swiper-slide.p-checklist__carousel__slide {
    width: calc(200 * (100vw / 375));
    max-width: none;
  }

  .p-checklist__carousel .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 1rem 3.5rem rgba(0, 0, 0, 0.18);
  }

  /* Swiper デフォルト矢印を非表示 */
  .p-checklist__carousel .swiper-button-prev::after,
  .p-checklist__carousel .swiper-button-next::after {
    display: none;
  }

  /* カスタムナビゲーションボタン */
  .p-checklist__carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(40 * (100vw / 375));
    height: calc(40 * (100vw / 375));
    margin-top: 0; /* Swiper の margin-top をリセット */
    transition: opacity 0.3s ease;
  }

  .p-checklist__carousel__nav:hover {
    opacity: 0.7;
  }

  .p-checklist__carousel__nav--prev {
    left: calc(16 * (100vw / 375));
  }
  .p-checklist__carousel__nav--next {
    right: calc(16 * (100vw / 375));
  }

  .p-checklist__carousel__circle {
    position: absolute;
    width: calc(40 * (100vw / 375))!important;
    height: calc(40 * (100vw / 375))!important;
    top: 0;
    left: 0;
  }

  .p-checklist__carousel__arrow {
    position: relative;
    z-index: 1;
    width: calc(20 * (100vw / 375))!important;
    height: auto;
  }
}
