/*================================
  common
=================================*/
@charset "UTF-8";
html {
  font-size: 62.5%;
  box-sizing: border-box;
}
@media only screen and (max-width: 1060px) {
  html {
    scroll-behavior: smooth;
  }
  .category__navBody{
    display: none;
  }
  #LB250328swimsuit {
    margin-bottom: calc(200* (100vw / 750));
  }
}
@media only screen and (min-width: 1061px) {
  #breadcrumb, .bredlist.lp{
    margin: 20px auto 27px;
  }
}
@media only screen and  (max-width: 1400px) and (min-width: 768px){
  html{
    font-size: 0.7142857143vw;
  }
}
@media only screen and (min-width: 1401px) {
  html {
    font-size: 62.5%;
  }
}
@media only screen and (min-width: 768px) {
  #LB250328swimsuit {
    overflow: hidden;
    margin-bottom: 15rem;
  }
}
#LB250328swimsuit {
  overflow-x: clip;
}
.main-inner {
  width: 100% !important;
}
#LB250328swimsuit li {
  list-style: none;
}
#LB250328swimsuit img,
#LB250328swimsuit svg {
  width: 100%;
  height: auto;
}
#LB250328swimsuit picture,
#LB250328swimsuit a{
  width: 100%;
  display: inline-block;
}
/* end common */

/*================================
  variables
=================================*/
:root{
  --zindex-behind: -1;
  --zindex-middle: 0;
  --zindex-front: 1;
  --zindex-over: 10;
  --zindex-cursor: 100;
  --zindex-top: 999;
  --pointer-none: none;
  --pointer-all: all;
  --color-white: #fff;
  --color-block: #000;
}
#LB250328swimsuit .imgWrap{
  background: #fff;
  position: relative;
  transition: opacity 1.5s;
}
#LB250328swimsuit [data-flex]{
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
}
#LB250328swimsuit [data-grid]{
  display: grid;
  margin: 0 auto;
}
/*--------------------------------
  variables for mobile
--------------------------------*/
@media screen and (max-width: 767px) {
  #LB250328swimsuit .pcOnly {
    display: none!important;
  }
  #LB250328swimsuit [data-flex-sp]{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
  }
}
/*--------------------------------
  variables for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  #LB250328swimsuit .spOnly {
    display: none!important;
  }
  #LB250328swimsuit .pcOnly {
    display: block;
  }
  #LB250328swimsuit [data-flex-pc]{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
  }
  #LB250328swimsuit [data-grid-pc]{
    display: grid;
    margin: 0 auto;
  }
}
/* end variables */

/*================================
  font
=================================*/
#LB250328swimsuit .font-ja{
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
  font-feature-settings: "halt";
}
#LB250328swimsuit .font-en{
  font-family: "arboria", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
}

/*================================
  font-size
=================================*/
#LB250328swimsuit .lead-txt{
  color: var(--color-white);
  font-size: calc(26*(100vw / 750));
  line-height: 2;
  letter-spacing: 0.03em;
  text-align: center;
}
#LB250328swimsuit .credit-txt,
#LB250328swimsuit .last-txt{
  color: var(--color-white);
  font-size: calc(24*(100vw / 750));
  line-height: 2;
  letter-spacing: 0;
}
#LB250328swimsuit .last-txt{
  text-align: center;
}
/*--------------------------------
  font-size for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  #LB250328swimsuit .lead-txt{
    font-size: 1.5rem;
  }
  #LB250328swimsuit .credit-txt,
  #LB250328swimsuit .last-txt{
    font-size: 1.2rem;
  }
}
/* end font-size */

/*================================
  layout
=================================*/
#LB250328swimsuit{
  position: relative;
  background: linear-gradient(to bottom, #b9d0dd, #ccdde8, #fff, #c5e2e9);
  padding-bottom: calc(166* (100vw / 750));
}
#LB250328swimsuit .gradationArea{
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, #fffff3, #fdf9f3, #faecf3, rgb(248, 231, 242, 10%));
  width: 100%;
  height: calc(3440*(100vw / 750));
  z-index: 0;
}
/*========== common ==========*/
#LB250328swimsuit [data-img],
#LB250328swimsuit [data-img] .imgWrap{
  position: relative;
  z-index: 1;
}
#LB250328swimsuit [data-deco]{
  position: absolute;
  pointer-events: var(--pointer-none);
  z-index: 0;
}
#LB250328swimsuit [data-credit]{
  position: relative;
  width: 100%;
  margin-top: calc(26*(100vw / 750));
  z-index: 1;
}
/*========== mv ==========*/
#LB250328swimsuit .mvWrap{
  position: relative;
}
#LB250328swimsuit [data-deco="bg01"]{
  bottom: calc(-260*(100vw / 750));
  width: 100%;
}
#LB250328swimsuit .lead-txt{
  position: relative;
  margin: calc(166*(100vw / 750)) auto calc(168*(100vw / 750));
  z-index: 2;
}
/*========== Content ==========*/
#LB250328swimsuit [data-grid-pc="block01"]{
  position: relative;
}
#LB250328swimsuit [data-img="01"]{
  width: calc(670*(100vw / 750));
  margin: 0 auto calc(80*(100vw / 750));
}
#LB250328swimsuit [data-img="02"]{
  width: calc(480*(100vw / 750));
  margin: 0 calc(40*(100vw / 750)) calc(170*(100vw / 750)) auto;
}
#LB250328swimsuit [data-deco="shape01"]{
  /* background-image: url(../img/shape01_sp.png); */
  background-image: url(../img/common-bg.png);
  background-size: cover;
  /* mask-image: url(../img/shape01_sp.png);
  mask-size: cover; */
  top: calc(490*(100vw / 750));
  left: calc(-300*(100vw / 750));
  width: calc(460*(100vw / 750));
  height: calc(448*(100vw / 750));
}
#LB250328swimsuit [data-img="03"]{
  width: calc(670*(100vw / 750));
  margin: 0 auto calc(92*(100vw / 750));
}
#LB250328swimsuit .collageWrap{
  position: relative;
  width: calc(430*(100vw / 750));
  margin: 0 auto 0 calc(40*(100vw / 750));
  z-index: 2;
}
#LB250328swimsuit [data-img="05"]{
  position: absolute;
  top: calc(350*(100vw / 750));
  right: calc(-260*(100vw / 750));
  width: calc(401*(100vw / 750));
  z-index: 2;
}
#LB250328swimsuit [data-img="05"] .imgWrap{
  background-color: inherit;
  background-image: url(../img/img05-bg_sp.png);
  background-size: cover;
}
#LB250328swimsuit [data-deco="txtImg01"]{
  top: calc(430*(100vw / 750));
  left: calc(33*(100vw / 750));
  z-index: 3;
}
#LB250328swimsuit [data-deco="txtImg01"] img{
  width: calc(404*(100vw / 750));
}
#LB250328swimsuit [data-deco="bg02"]{
  top: calc(-360*(100vw / 750));
  width: 100%;
  z-index: 1;
}
#LB250328swimsuit [data-block="02"]{
  position: relative;
  padding-top: calc(542*(100vw / 750));
}
#LB250328swimsuit [data-img="06"]{
  width: calc(640*(100vw / 750));
  margin: 0 auto calc(80*(100vw / 750));
}
#LB250328swimsuit [data-flex="block02"]{
  flex-direction: row-reverse;
}
#LB250328swimsuit [data-img="07"]{
  width: calc(480*(100vw / 750));
  flex-shrink: 0;
  margin-left: calc(-210*(100vw / 750));
}
#LB250328swimsuit [data-img="08"]{
  width: calc(480*(100vw / 750));
  flex-shrink: 0;
  margin-top: calc(520*(100vw / 750));
  z-index: 2;
}
#LB250328swimsuit [data-credit="block02"]{
  margin: calc(26*(100vw / 750)) auto calc(172*(100vw / 750)) calc(40*(100vw / 750));
}
#LB250328swimsuit [data-img="09"]{
  width: calc(640*(100vw / 750));
  margin: 0 auto calc(80*(100vw / 750));
}
#LB250328swimsuit [data-flex="block03"]{
  flex-direction: row-reverse;
}
#LB250328swimsuit [data-img="10"]{
  width: calc(440*(100vw / 750));
  flex-shrink: 0;
  margin-left: calc(-360*(100vw / 750));
  z-index: 2;
  pointer-events: var(--pointer-none);
}
#LB250328swimsuit [data-img="10"] .imgWrap{
  pointer-events: var(--pointer-all);
}
#LB250328swimsuit [data-img="11"]{
  width: calc(670*(100vw / 750));
  flex-shrink: 0;
  margin-top: calc(527*(100vw / 750));
}
#LB250328swimsuit [data-credit="img11"]{
  margin-left: calc(40*(100vw / 750));
}
#LB250328swimsuit [data-img="12"]{
  width: calc(400*(100vw / 750));
  margin: calc(272*(100vw / 750)) auto calc(118*(100vw / 750));
}
#LB250328swimsuit [data-deco="txtImg02"]{
  top: calc(-100*(100vw / 750));
  left: calc(-80*(100vw / 750));
  width: calc(406*(100vw / 750));
  z-index: 2;
}
#LB250328swimsuit [data-deco="shape02"]{
  /* background-image: url(../img/shape02_sp.png); */
  background-image: url(../img/common-bg.png);
  background-size: cover;
  /* mask-image: url(../img/shape02_sp.png);
  mask-size: cover; */
  top: calc(286*(100vw / 750));
  left: auto;
  right: calc(-145*(100vw / 750));
  width: calc(410*(100vw / 750));
  height: calc(418*(100vw / 750));
}
#LB250328swimsuit .allBtn{
  position: relative;
  width: calc(400*(100vw / 750));
  margin: 0 auto calc(168*(100vw / 750));
  z-index: 2;
}


/*--------------------------------
  layout for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  #LB250328swimsuit{
    overflow: hidden;
    background: linear-gradient(to bottom, rgb(194, 214, 226), rgb(194, 214, 226, 20%) 30%, rgb(201, 227, 234, 10%) 50%, rgb(201, 227, 234));
    /* background: linear-gradient(to bottom, #F2FAFD 72%, #E4F3F7 83%, #C3E1E9 96%);; */
    background: linear-gradient(to bottom, rgb(184, 207, 221), rgb(245, 252, 255) 30%, rgb(245, 252, 255) 74%, rgb(196, 225, 232));;
    padding-bottom: 9rem;
  }
  #LB250328swimsuit .gradationArea{
    /* background: linear-gradient(to bottom, rgb(250, 252, 247), rgb(255, 255, 243) 30%, rgb(248, 231, 242) 50%, rgb(250, 252, 247, 10%)); */
    background: linear-gradient(to bottom, #FFFFF3, rgb(255, 255, 243) 24%, rgb(248, 231, 242) 58%, rgb(250, 252, 247, 10%));
    height: 246.6rem;
    transform: translateY(-20rem);
  }
  /*========== common ==========*/
  #LB250328swimsuit [data-credit]{
    margin-top: 2.5rem;
  }
  /*========== mv ==========*/
  #LB250328swimsuit .mvWrap{
    width: 102.2rem;
    margin: 5rem auto 0;
  }
  #LB250328swimsuit .mvWrap__img{
    position: relative;
    width: 72rem;
    margin: 0 0 0 auto;
    z-index: 1;
  }
  #LB250328swimsuit [data-deco="mvWrap-ttl"]{
    top: 18rem;
    left: 0;
    width: 39.33rem;
    z-index: 2;
  }
  #LB250328swimsuit [data-deco="bg01"]{
    bottom: auto;
    top: 38%;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: min(434px, 31vw);
    overflow: hidden;
    background-image: url(../img/bg01_pc.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  #LB250328swimsuit [data-deco="bg01"] img{
    display: none;
  }
  #LB250328swimsuit .lead-txt{
    margin: 19.3rem auto 9.18rem;
  }
  /*========== Content ==========*/
  #LB250328swimsuit [data-grid-pc="block01"]{
    grid-template-columns: 35rem 15rem 21rem 9rem 36rem;
    grid-template-rows: 60rem 10rem 33rem 15rem 27rem 24.7rem 29.5rem;
    width: 116rem;
    margin: 0 auto;
    z-index: 2;
  }
  #LB250328swimsuit [data-img="01"]{
    width: 46rem;
    margin: 0;
    grid-column: 2/5;
    grid-row: 1/2;
  }
  #LB250328swimsuit [data-img="02"]{
    width: 36rem;
    margin: 0;
    grid-column: 5/6;
    grid-row: 3/5;
  }
  #LB250328swimsuit [data-deco="shape01"]{
    /* background-image: url(../img/shape01_pc.png); */
    /* mask-image: url(../img/shape01_pc.png); */
    top: 34.1rem;
    left: -14rem;
    width: 29.8rem;
    height: 29rem;
  }
  #LB250328swimsuit [data-img="03"]{
    width: 50rem;
    margin: 0;
    grid-column: 1/3;
    grid-row: 4/7;
  }
  #LB250328swimsuit .collageWrap{
    width: 28rem;
    margin: 0;
    grid-column: 4/6;
    grid-row: 6/8;
  }
  #LB250328swimsuit [data-img="05"]{
    top: 21rem;
    right: -17rem;
    width: 27.6rem;
  }
  #LB250328swimsuit [data-img="05"] .imgWrap{
    background-image: url(../img/img05-bg_pc.png);
  }
  #LB250328swimsuit [data-deco="txtImg01"]{
    top: 23rem;
    left: -15rem;
  }
  #LB250328swimsuit [data-deco="txtImg01"] img{
    width: 26.5rem;
  }
  #LB250328swimsuit [data-deco="bg02"]{
    top: auto;
    top: -40.9%;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: min(600px, 42.85714vw);
    overflow: hidden;
    background-image: url(../img/bg02_pc.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  #LB250328swimsuit [data-deco="bg02"] img{
    display: none;
  }
  #LB250328swimsuit [data-block="02"]{
    padding-top: 12.8rem;
  }
  #LB250328swimsuit [data-img="06"]{
    width: 45rem;
    margin-bottom: 6rem;
  }
  #LB250328swimsuit [data-flex="block02"]{
    width: 75rem;
  }
  #LB250328swimsuit [data-img="07"]{
    width: 36rem;
  }
  #LB250328swimsuit [data-img="08"]{
    width: 36rem;
    margin-top: 6rem;
  }
  #LB250328swimsuit [data-credit="block02"]{
    width: 75rem;
    margin: 2.5rem auto 9.4rem;
  }
  #LB250328swimsuit [data-block="03"]{
    display: grid;
    grid-template-columns: 23rem 22rem auto;
    grid-template-rows: 32rem 28rem auto;
    width: 96rem;
    margin: 0 auto;
  }
  #LB250328swimsuit [data-img="09"]{
    width: 45rem;
    margin: 0;
    grid-column: 1/3;
    grid-row: 1/3;
  }
  #LB250328swimsuit [data-flex="block03"]{
    width: 73rem;
    grid-column: 2/4;
    grid-row: 2/4;
  }
  #LB250328swimsuit [data-img="10"]{
    width: 32rem;
  }
  #LB250328swimsuit [data-img="11"]{
    width: 50rem;
    margin-top: 34.7rem;
  }
  #LB250328swimsuit [data-credit="img11"]{
    margin-left: 0;
  }
  #LB250328swimsuit [data-img="12"]{
    width: 26rem;
    margin: 15.4rem auto 6rem;
  }
  #LB250328swimsuit [data-deco="txtImg02"]{
    top: -6rem;
    left: -5rem;
    width: 25rem;
  }
  #LB250328swimsuit [data-deco="shape02"]{
    /* background-image: url(../img/shape02_pc.png); */
    /* mask-image: url(../img/shape02_pc.png); */
    top: 15.5rem;
    right: -12.6rem;
    width: 29.9rem;
    height: 30.3rem;
  }
  #LB250328swimsuit .allBtn{
    width: 26rem;
    margin-bottom: 9.4rem;
  }
}
/* end layout */


/*================================
  fadeIn
=================================*/
#LB250328swimsuit .js-fadeIn{
  opacity: 0;
  transition: 1.5s;
}
#LB250328swimsuit .js-scrollIn{
  opacity: 1;
}
/* end fadeIn */


/*================================
  wave
=================================*/
#LB250328swimsuit .anime-wave{
  animation: fluid_hitode 20s ease 0s infinite;
}
@keyframes fluid_hitode{
  0%, 100% {
    border-radius: 72% 28% 48% 52% / 67% 52% 48% 33%;
  }
  14% {
    border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
  }
  84% {
    border-radius: 72% 28% 48% 52% / 67% 52% 48% 33%;
  }
}
/* end wave */