﻿
#JK251112MerinoKids{
  --font-ja: "Noto Sans JP", sans-serif;
  --font-en01: "orpheuspro", serif;
  --font-en02: "effra", sans-serif;
  --font-common: "effra", "Noto Sans JP", sans-serif;
}
#Contents {
  position: relative;
}
html{
  overflow: auto;
}
body{
  overflow-x: clip;
}
@media screen and (min-width: 768px) {
  .c-breadcrumb {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
  }
}
@media screen and (max-width: 767px) {
  html{
    scroll-behavior: smooth;
  }
  .c-breadcrumb {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    color: var(--color-white);
  }
}
.c-breadcrumb__text{
  color: #fff!important;
}

/*================================
  variables
=================================*/
#JK251112MerinoKids{
  --zindex-behind: -1;
  --zindex-middle: 0;
  --zindex-front: 1;
  --zindex-top: 2;
  --zindex-over: 10;
  --zindex-cursor: 100;
  --zindex-top: 200;
  --pointer-none: none;
  --color-txt: #626666;
  --color-bg: #f3ebde;
}
#JK251112MerinoKids img,
#JK251112MerinoKids picture,
#JK251112MerinoKids video,
#JK251112MerinoKids a{
  display: inline-block;
  width: 100%;
  height: auto;
}
#JK251112MerinoKids video{
  object-fit: cover;
}
#JK251112MerinoKids a:hover{
  transition: .5s;
  opacity: .7;
}
#JK251112MerinoKids span{
  display: inline-block;
}
#JK251112MerinoKids li{
  list-style: none;
}
#JK251112MerinoKids .imgWrap{
  background-color: var(--color-bg);
  position: relative;
  transition: opacity 1.5s;
}
#JK251112MerinoKids .noBgCont.imgWrap{
  background: none;
}
#JK251112MerinoKids .flexArea{
  display: flex;
  width: 100%;
}
#JK251112MerinoKids .gridWrap{
  display: grid;
  margin: 0 auto;
}
/*--------------------------------
  variables for mobile
--------------------------------*/
@media screen and (max-width: 767px) {
  #JK251112MerinoKids .pcOnly {
    display: none!important;
  }
  #JK251112MerinoKids {
    --lpSetSize: (100vw / 750);
    padding-top: 9.6rem;
  }
}
/*--------------------------------
  variables for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  #JK251112MerinoKids .spOnly {
    display: none!important;
  }
  #JK251112MerinoKids .pcOnly {
    display: block;
  }
  #JK251112MerinoKids {
    --lpSetSize: calc(1px * var(--ratio));
    --ratio: calc(510 / 750);
    --variable: 1px;
  }
}
@media screen and (min-width:768px) and (max-width:1400px) {
  #JK251112MerinoKids {
    --lpSetSize: calc(var(--variable) * var(--ratio));
    --ratio: calc(510 / 750);
    --variable: calc(100vw / 1400);
  }
}
/* end variables */

/*================================
  font
=================================*/
#JK251112MerinoKids .font-en-serif{
  font-family: "garamond-premier-pro-caption", serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
}
#JK251112MerinoKids .font-en-sans{
  font-family: "neue-frutiger-world", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
}
#JK251112MerinoKids .font-ja{
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
}
#JK251112MerinoKids .font-credit{
  font-family: "neue-frutiger-world", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
}
/*================================
  font-size
=================================*/
#JK251112MerinoKids [data-txt]{
  color: var(--color-txt);
  letter-spacing: 0;
}
#JK251112MerinoKids [data-txt="common"]{
  font-size: calc(28 * var(--lpSetSize));
  line-height: 2;
  text-align: justify;
}
#JK251112MerinoKids [data-txt="ttl"]{
  font-size: calc(80 * var(--lpSetSize));
  line-height: 1.36875;
  text-align: center;
}
#JK251112MerinoKids .section04 [data-txt="ttl"]{
  line-height: 1.1;
}
#JK251112MerinoKids [data-txt="ttl-small"]{
  font-size: calc(32 * var(--lpSetSize));
  line-height: 1.328125;
  text-align: center;
  margin: calc(18 * var(--lpSetSize)) 0 calc(114* var(--lpSetSize));
}
#JK251112MerinoKids [data-txt="sub-ttl-ja"]{
  font-size: calc(26 * var(--lpSetSize));
  line-height: 2.1538461538;
  text-align: center;
}
#JK251112MerinoKids [data-txt="sub-ttl-en"]{
  font-size: calc(48 * var(--lpSetSize));
  line-height: 1.25;
  text-align: center;
}
#JK251112MerinoKids [data-txt="credit"]{
  font-size: calc(26 * var(--lpSetSize));
  line-height: 2;
  letter-spacing: 0;
  text-align: center;
}
#JK251112MerinoKids [data-txt="credit2"]{
  font-size: calc(36 * var(--lpSetSize));
  line-height: 2;
  text-align: center;
  margin-bottom: calc(63 * var(--lpSetSize));
}
#JK251112MerinoKids [data-txt="credit3"]{
  font-size: calc(40 * var(--lpSetSize));
  line-height: 1.4;
  text-align: center;
  margin: calc(70* var(--lpSetSize)) 0 calc(75* var(--lpSetSize));
}
/* end font-size */


/*================================
  layout
=================================*/
#JK251112MerinoKids [data-credit]{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
#JK251112MerinoKids [data-img]{
  position: relative;
}
#JK251112MerinoKids [data-deco]{
  position: absolute;
  display: block;
  pointer-events: var(--pointer-none);
  z-index: var(--zindex-front);
}
/*========== mvWrap ==========*/
#JK251112MerinoKids .mvWrap{
  position: relative;
  background-color: var(--color-bg);
  padding-bottom: calc(148 * var(--lpSetSize));
}
#JK251112MerinoKids .mvWrap__img{
  margin-bottom: calc(140 * var(--lpSetSize));
}
#JK251112MerinoKids  [data-img="ttl"]{
  width: calc(540 * var(--lpSetSize));
  margin: 0 auto;
}
/*========== section01 ==========*/
#JK251112MerinoKids .section01{
  background-color: var(--color-bg);
}
#JK251112MerinoKids .section01__inner{
  padding: 0 calc(60 * var(--lpSetSize)) calc(96* var(--lpSetSize));
}
#JK251112MerinoKids [data-img="img01"]{
  margin-bottom: calc(108 * var(--lpSetSize));
}
#JK251112MerinoKids [data-ttl="section01"]{
  margin-bottom: calc(48 * var(--lpSetSize));
}
#JK251112MerinoKids .section01 [data-txt="common"]{
  margin-bottom: calc(52 * var(--lpSetSize));
}
/*========== section02 ==========*/
#JK251112MerinoKids .section02{
  padding-bottom: calc(39 * var(--lpSetSize));
}
#JK251112MerinoKids .section02__inner{
  padding: 0 calc(60 * var(--lpSetSize));
}
#JK251112MerinoKids [data-img="img02"]{
  margin-bottom: calc(108 * var(--lpSetSize));
}
#JK251112MerinoKids [data-img="icon01"]{
  display: block;
  width: calc(150 * var(--lpSetSize));
  margin: 0 auto calc(36 * var(--lpSetSize));
}
#JK251112MerinoKids [data-img="icon02"]{
  display: block;
  width: calc(187.5 * var(--lpSetSize));
  padding-right: calc(22 * var(--lpSetSize));
  margin: 0 auto calc(37 * var(--lpSetSize));
}
#JK251112MerinoKids [data-img="icon03"]{
  display: block;
  width: calc(150 * var(--lpSetSize));
  margin: 0 auto calc(37 * var(--lpSetSize));
}
#JK251112MerinoKids .section02 [data-txt="sub-ttl-en"]{
  margin-bottom: calc(5 * var(--lpSetSize));
}
#JK251112MerinoKids .section02 [data-txt="sub-ttl-ja"]{
  margin-bottom: calc(52 * var(--lpSetSize));
}
#JK251112MerinoKids .section02 [data-txt="common"]{
  margin-bottom: calc(108 * var(--lpSetSize));
}
/*========== section03 ==========*/
#JK251112MerinoKids .section03{
  background-color: var(--color-bg);
  padding-bottom: calc(54 * var(--lpSetSize));
}
#JK251112MerinoKids .section03__inner{
  padding: 0 calc(60 * var(--lpSetSize));
}
#JK251112MerinoKids [data-img="movieImg"]{
  margin-bottom: calc(110 * var(--lpSetSize));
}
#JK251112MerinoKids .section03 [data-txt="sub-ttl-ja"]{
  margin: calc(10* var(--lpSetSize)) 0 calc(53 * var(--lpSetSize));
}
#JK251112MerinoKids .section03 [data-txt="common"]:nth-child(5) {
  margin-bottom: calc(146 * var(--lpSetSize));
}
#JK251112MerinoKids .section03 [data-txt="common"]{
  margin-bottom: calc(52 * var(--lpSetSize));
}
#JK251112MerinoKids [data-img="03"],
#JK251112MerinoKids [data-img="04"],
#JK251112MerinoKids [data-img="05"]{
  width: calc(480 * var(--lpSetSize));
  padding-bottom: calc(57* var(--lpSetSize));
  margin: 0 auto calc(60 * var(--lpSetSize));
}
#JK251112MerinoKids [data-img="03"] .swiper-wrapper,
#JK251112MerinoKids [data-img="04"] .swiper-wrapper,
#JK251112MerinoKids [data-img="05"] .swiper-wrapper{
  max-width: calc(480 * var(--lpSetSize));
}
#JK251112MerinoKids [data-credit="img03"],
#JK251112MerinoKids [data-credit="img04"],
#JK251112MerinoKids [data-credit="img05"]{
  margin-bottom: calc(106 * var(--lpSetSize));
}
#JK251112MerinoKids [data-img="credit01"],
#JK251112MerinoKids [data-img="credit02"],
#JK251112MerinoKids [data-img="credit03"]{
  margin: 0 auto calc(26 * var(--lpSetSize));
}
#JK251112MerinoKids [data-img="credit01"]{
  width: calc(553.5 * var(--lpSetSize));
}
#JK251112MerinoKids [data-img="credit02"]{
  width: calc(456 * var(--lpSetSize));
}
#JK251112MerinoKids [data-img="credit03"]{
  width: calc(456 * var(--lpSetSize));
}
/*========== section04 ==========*/
#JK251112MerinoKids .section04{
  padding-top: calc(118 * var(--lpSetSize));
}
#JK251112MerinoKids .section04__inner{
  padding: 0 calc(60 * var(--lpSetSize));
  margin-bottom: calc(106 * var(--lpSetSize));
}
#JK251112MerinoKids .section04 [data-txt="sub-ttl-ja"]{
  margin: calc(18* var(--lpSetSize)) 0 calc(106* var(--lpSetSize));
}
#JK251112MerinoKids [data-img="06"],
#JK251112MerinoKids [data-img="07"],
#JK251112MerinoKids [data-img="08"]{
  padding-bottom: calc(57* var(--lpSetSize));
  margin-bottom: calc(60 * var(--lpSetSize));
}
#JK251112MerinoKids [data-img="icon04"]{
  width: calc(132 * var(--lpSetSize));
  margin: 0 auto calc(25 * var(--lpSetSize));
}
#JK251112MerinoKids [data-img="icon05"]{
  width: calc(231 * var(--lpSetSize));
  margin: calc(68 * var(--lpSetSize)) auto calc(24 * var(--lpSetSize));
}
#JK251112MerinoKids .allBtn{
  width: calc(600 * var(--lpSetSize));
  margin: calc(144 * var(--lpSetSize)) auto calc(160 * var(--lpSetSize));
}
#JK251112MerinoKids .lastWrap{
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  row-gap: calc(51 * var(--lpSetSize));
  padding: calc(106 * var(--lpSetSize)) 0 calc(146 * var(--lpSetSize));
}
#JK251112MerinoKids .lastWrap [data-txt]{
  text-align: center;
}
#JK251112MerinoKids .lastWrap [data-txt]:last-child{
  padding-right: calc(18 * var(--lpSetSize));
}


/*--------------------------------
  layout for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  /*========== fixedArea ==========*/
  #JK251112MerinoKids{
    position: relative;
  }
  #JK251112MerinoKids .contWrap{
    position: relative;
    background-color: #fff;
    width: calc(750 * var(--variable) * var(--ratio));
    margin: 0 auto;
    z-index: 2;
    overflow: clip;
  }
  #JK251112MerinoKids .fixedArea{
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-bg);
    width: 100vw;
    height: 100%;
    z-index: 2;
  }
  #JK251112MerinoKids .fixedArea__inner{
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: calc(100% + (6rem + var(--header-height)));
    margin: calc(-1 * (6rem + var(--header-height))) auto 0;
    z-index: 1;
  }
  #JK251112MerinoKids [data-fixed]{
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc((100% - calc(750 * var(--variable) * var(--ratio))) / 2);
    height: 100vh;
  }
  #JK251112MerinoKids [data-img="ttl-pc"]{
    width: 324px;
    padding-top: 86px;
  }
  #JK251112MerinoKids .fixedList{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 23px;
    width: fit-content;
    margin: 95px 23px 0 0;
  }
  #JK251112MerinoKids .fixedList li{
    width: fit-content;
  }
  #JK251112MerinoKids [data-txt="fixed"]{
    position: relative;
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
    padding-right: 16px;
  }
  #JK251112MerinoKids [data-txt="fixed"]::before{
    content: "";
    background-image: url(../img/arrow-pc.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: auto;
    bottom: 28%;
    right: 0;
    width: 15px;
    height: 9px;
  }
  #JK251112MerinoKids .fixedList li:last-child [data-txt="fixed"]::before{
    bottom: 14%;
  }
  @media screen and (min-width:768px) and (max-width:1400px) {
    #JK251112MerinoKids [data-img="ttl-pc"]{
      width: calc(324 * (100vw / 1400));
      padding-top: calc(86 * (100vw / 1400));
    }
    #JK251112MerinoKids .fixedList{
      row-gap: calc(23 * (100vw / 1400));
      margin: calc(95 * (100vw / 1400)) calc(23 * (100vw / 1400)) 0 0;
    }
    #JK251112MerinoKids [data-txt="fixed"]{
      font-size: calc(24 * (100vw / 1400));
      padding-right: calc(16 * (100vw / 1400));
    }
    #JK251112MerinoKids [data-txt="fixed"]::before{
      width: calc(15 * (100vw / 1400));
      height: calc(9 * (100vw / 1400));
    }
  }
  /*========== ataLink ==========*/
  #JK251112MerinoKids .dataLink-area{
    width: 100%;
    height: var(--header-height);
  }
  #JK251112MerinoKids .dataLink-area-top{
    width: 100%;
    margin-bottom: calc(-1* var(--header-height));
  }
  /*========== section02 ==========*/
  #JK251112MerinoKids [data-features="01"] .pcWidth{
    padding: 0 calc(50 * var(--lpSetSize));
  }
}



/*================================
  fadeIn
=================================*/
#JK251112MerinoKids .js-fadeIn{
  opacity: 0;
  -webkit-transform: translateY(3rem);
  transform: translateY(3rem);
}
#JK251112MerinoKids .js-fadeIn.js-scrollIn{
  -webkit-animation: fadeup 1s forwards;
  animation: fadeup 1s forwards;
}
@keyframes fadeup{
  0% {
    opacity: 0;
    -webkit-transform: translateY(3rem);
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  } 
}
/* end fadeIn */


/*================================
  swiper
=================================*/
#JK251112MerinoKids .swiper-wrapper{
  overflow: hidden;
}
#JK251112MerinoKids .swiper-container{
  position: relative;
  margin-inline: auto;
}
#JK251112MerinoKids .swiper-container.imgWrap:hover{
  transition: .5s;
  opacity: .7;
}
#JK251112MerinoKids .swiper-slide img {
  width: auto;
  height: 100%!important;
  align-items: end;
  vertical-align: bottom;
}
#JK251112MerinoKids .swiper-slide img:hover,
#JK251112MerinoKids .swiper-slide a:hover{
  opacity: 1;
}
#JK251112MerinoKids .swiper-notification{
  display: none!important;
}
#JK251112MerinoKids .swiper-slide img{
  height: auto;
  width: 100%;
}
#JK251112MerinoKids .swiper-notification{
  display: none!important;
}
/*========== swiper-dot ==========*/
#JK251112MerinoKids .js-swiper .swiper-pagination,
#JK251112MerinoKids .js-swiper .swiper-pagination{
  bottom: calc(0 * var(--lpSetSize)) !important;
  display: flex;
  justify-content: center;
  column-gap: calc(32 * var(--lpSetSize)) !important;
}
#JK251112MerinoKids .js-swiper .swiper-pagination-clickable .swiper-pagination-bullet{
  background: #faf6ee;
  box-sizing: border-box;
  border-radius: 100%;
  width: calc(16 * var(--lpSetSize)) !important;
  height: calc(16 * var(--lpSetSize)) !important;
  border-radius: 100%;
  opacity: 1;
  margin: 0!important;
}
#JK251112MerinoKids .js-swiper span.swiper-pagination-bullet.swiper-pagination-bullet-active{
  background: #baaa95;
}
/*========== swiper-arrow ==========*/
#JK251112MerinoKids .js-swiper .swiper-button-prev,
#JK251112MerinoKids .js-swiper .swiper-button-next{
  height: calc(68 * var(--lpSetSize));
  width: calc(68 * var(--lpSetSize));
  top: 47%;
}
#JK251112MerinoKids .js-swiper .swiper-button-prev{
  left: -20.5%;
}
#JK251112MerinoKids .js-swiper .swiper-button-next{
  left: auto;
  right: -20.5%;
}
#JK251112MerinoKids .js-swiper .swiper-button-prev::after,
#JK251112MerinoKids .js-swiper .swiper-button-next::after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  height: calc(68 * var(--lpSetSize));
  width: calc(68 * var(--lpSetSize));
  margin: auto;
}
#JK251112MerinoKids .js-swiper .swiper-button-prev::after {
  background-image: url(../img/arrow.png);
}
#JK251112MerinoKids .js-swiper .swiper-button-next::after {
  background-image: url(../img/arrow.png);
  transform: rotate(180deg);
}
#JK251112MerinoKids .js-swiper .swiper-slide img {
  height: auto;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  #JK251112MerinoKids .js-swiper .swiper-button-prev,
  #JK251112MerinoKids .js-swiper .swiper-button-next{
    top: 45.7%;
  }
}
/* end swiper */