@charset "UTF-8";
/* calc スタイル
======================================================================================== */
/* html {
  background: #f5f0e1;
} */

#GPH250820HOMMECAT {
  --font-credit: heebo, sans-serif;
  --font-fw-light: 300;
  --color-mustard: #E5CF8B;
  --color-khaki: #B1B398;
  --color-navy: #152643;
  --color-lightblue: #CBD6DB;
  --color-yellow: #FCC54F;
  --color-pink: #EFAC9E;

  --pc-width: 1920;
  --sp-width: 390;
  --pc-artboard-width: 650;
  --sp-artboard-width: 390;
  --formula: calc(var(--variable) * var(--ratio)); /*SP→PC 可変設定*/
  --formula_pc: calc(var(--variable) * 1); /*PC 1400以上は固定*/

  position: relative;
  z-index: 1;
  font-style: normal;
  width: 100%;
}


/* @media screen and (min-width: 1921px) {
  #GPH250820HOMMECAT {
    --ratio: 1px;
  }
} */

@media screen and (min-width: 560px) {
  #GPH250820HOMMECAT {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); 
    --variable: 1px;
  }

  :root {
    --lpSetSize: calc(1px * calc(650 / 390));
    /* --lpSetSize: 0.56px; */
  }
}

/* PC画面幅 768～1400px 可変 */
/* @media (min-width: 560px) and (max-width: 1400px) {
  #GPH250820HOMMECAT {
    --variable: calc(100vw / var(--pc-width));
  }

  :root {
    --lpSetSize: (100vw / 650) * 0.56;
  }
} */

/* SP画面幅 559px以下 可変 */
@media screen and (max-width: 559px) {
  #GPH250820HOMMECAT {
    --reference-value: .1rem;
    --dsesktop-rate: calc(100vw / 1920);
    --rate: calc(100cqi / 390);
    opacity: 1;
/* 
    --ratio: 1;
    --variable: calc(100vw / var(--sp-width)); */
  }


  :root {
    --lpSetSize: (100vw / 390);
  }
}


/* ベーススタイル
======================================================================================== */

.main-area * {
  box-sizing: border-box;
}
.main-area img {
  height: auto;
  opacity: 1;
  width: 100%;
}
.main-area a {
  text-decoration: none;
}
.main-area picture {
  display: block;
}
.main-area p, .main-area ul, .main-area ol, .main-area dl {
  list-style: none;
}

#GPH250820HOMMECAT {
  /* display: grid; */
  grid-template-columns: 1fr 50%;
  background: #f5f0e1;
  font-feature-settings: "palt";
}

/* @media (min-width: 560px) and (max-width: 1400px) {
  .contents_area{
    max-width: calc(650 * var(--lpSetSize));
  }
} */

@media (min-width: 560px) and (max-width: 1400px) {
  .contents_area{
    max-width: calc(650 * var(--lpSetSize));
  }
}

@media screen and (min-width: 560px) {
  #GPH250820HOMMECAT{
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    position: relative;
    overflow-y: clip;
    height: 100%;
     /* background-image: url('../img/fixed-bg.png');
    background-size: cover;   
    background-position: center; 
    background-repeat: repeat;*/
  }

  .contents_area{
    position: relative;
    z-index: 10;
    width: 100%;
    margin: auto;
    overflow-x: clip;
    max-width: 650px;
    background-color: #fff;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    z-index: 1;
  }

  .spOnly {
    display: none;
  }

  .pcOnly {
    display: block;
  }

  .fixed-bg{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    background-image: url(../img/fixed-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
  }

  #style-archive.style-archive{
    position: relative;
    z-index: 1;
    background: #fff;
  }
  #Foot{
    position: relative;
    background: #fff;
    pointer-events: none;
    z-index: 1001;
  }
  #footer{
    pointer-events: all;
  }
  .modal.hide{
    pointer-events: none;
  }
  .modal.hide.open.show{
    pointer-events: all;
  }
  #Header{
    z-index: 999;
  }
  /* .fixed-bg{
    width: 100%;
    z-index: -100;
  } */

  /* .fixed-bg::after{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/fixed-bg.png');
    background-size: cover;   
    background-position: center; 
    background-repeat: no-repeat;
    z-index: 0;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  } */


  /* #style-archive.style-archive{
    position: relative;
    z-index: 1;
    background: #fff;
  } */
/* 
  .footer-menu{
    position: relative;
    z-index: 1;
    background: #fff;
  } */
}

@media screen and (max-width: 559px) {
  #GPH250820HOMMECAT{
    background-color: #fff!important;
    overflow-x: clip;
  }

  .spOnly {
    display: block;
  }

  .pcOnly {
    display: none;
  }

  /* Chrome, Safari, EdgeなどのWebKit系ブラウザ */
  ::-webkit-scrollbar {
    display: none;
  }

  /* Firefox */
  html {
    scrollbar-width: none;
    overflow-x: clip;
  }

  /* IE、Edge */
  body {
    -ms-overflow-style: none;
  }

  .contents_area{
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
  }
}

  /* Chrome, Safari, EdgeなどのWebKit系ブラウザ */
_::-webkit-full-page-media, _:future, :root .custom-acc-container .custom-acc-content {
  /* max-height: calc(170 * var(--lpSetSize)) !important; */
}

_::-webkit-full-page-media, _:future, :root .custom-acc-container .custom-acc-content.open {
  /* max-height: calc(526 * var(--lpSetSize)) !important; */
}

_::-webkit-full-page-media, _:future, :root .custom-acc-container .custom-acc-btn {
  /* top: calc(50 * var(--lpSetSize)); */
  /* padding-top: calc(20 * var(--lpSetSize)); */
}


/* ==============================
  共通
============================== */
.imgOuter{
  position: relative;
}

.main-area .imgLink{
  position: absolute;
  z-index: 1;
  display: inline-block;
  width: 100%;
  height: 100%;
}

/* ==============================
  section01
============================== */
.mv{
  width: 100%;
  height: 100%;
  background-color: var(--color-mustard);
}

.section01 {
  padding-bottom: calc(110 * var(--lpSetSize));
}

.section01 .sec_img01{
  position: relative;
  padding-top: calc(71 * var(--lpSetSize));
  margin-top: calc(-1 * var(--lpSetSize));
}

.section01 .sec_img01::after{
  content: "";
  position: absolute;
  width: 100%;
  height: calc(202 * var(--lpSetSize));
  background-color: var(--color-mustard);
  top: 0;
  z-index: -1;
}

.section01 .img01_block{
  width: calc(300 * var(--lpSetSize));
  margin: 0 auto;
}

.section01 .js-slider-repeat{
  width: 100%;
  margin: calc(27 * var(--lpSetSize)) 0 calc(25 * var(--lpSetSize));
}

.section01 .js-slider-set2_item{
  margin-right: calc(25 * var(--lpSetSize));
}

.section01 .sec_img02{
  width: calc(300 * var(--lpSetSize));
  margin: 0 auto;
  padding-bottom: calc(90 * var(--lpSetSize));
}

.section01 .sec_img03{
  position: relative;
  background-color: var(--color-mustard);
  padding: calc(60 * var(--lpSetSize)) 0  calc(70 * var(--lpSetSize));
  z-index: 1;
}

.section01 .sec_img03::after{
  content: "";
  position: absolute;
  background-image: url(../img/svg/sjp.svg);
  width: calc(234.9 * var(--lpSetSize));
  height: calc(106.2 * var(--lpSetSize));
  top: calc(38.4 * var(--lpSetSize));
  left: calc(19.6 * var(--lpSetSize));
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
  pointer-events: none;
}

.section01 .sec_img03 .slick-slide{
  width: calc(270 * var(--lpSetSize))!important;
  margin: 0 calc(10 * var(--lpSetSize));
}

.section01 .decoration01{
  position: absolute;
  width: calc(159.02 * var(--lpSetSize));
  bottom: calc(-54.7 * var(--lpSetSize));
  right: calc(26.5 * var(--lpSetSize));
  z-index: 10;
}


/* @media (min-width: 560px) {
  .section01 .js-slider-set2_item{
    width: calc(770 * var(--lpSetSize));
  }

  .section01 .js-slider-repeat{
    margin: calc(27 * var(--lpSetSize)) 0 calc(42 * var(--lpSetSize));
  }

  .section01 .sec_img02{
    width: calc(304 * var(--lpSetSize));
  }

  .section01 .sec_img03{
    padding: calc(60 * var(--lpSetSize)) 0 calc(72 * var(--lpSetSize));
  }

  .section01 .sec_img03::after{
    width: calc(217.9 * var(--lpSetSize));
  }

  .section02 .img04_block{
    width: calc(303 * var(--lpSetSize));
  }
  
} */


/* ==============================
  section02
============================== */
.section02 {
  padding-bottom: calc(120 * var(--lpSetSize));
}

.section02 .sec_img01{
  background-color: var(--color-khaki);
  padding: calc(45 * var(--lpSetSize)) 0 calc(190 * var(--lpSetSize));
  z-index: 1;
}

.section02 .sec_img02{
  position: relative;
  z-index: 1;
}

.section02 .sec_img02::after{
  content: "";
  position: absolute;
  width: calc(218.77 * var(--lpSetSize));
  height: calc(231.35 * var(--lpSetSize));
  background-image: url(../img/img05.png);
  top: calc(-162 * var(--lpSetSize));
  left: 52%;
  transform: translateX(-50%);
  z-index: 2;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.section02 .img04_block{
  width: calc(300 * var(--lpSetSize));
  margin: 0 auto;
}

.section02 .img04{
  position: relative;
  z-index: 1
}

.section02 .img04::after{
  content: "";
  position: absolute;
  width: calc(171.14 * var(--lpSetSize));
  height: calc(74.2 * var(--lpSetSize));
  background-image: url(../img/svg/jc.svg);
  bottom: calc(14 * var(--lpSetSize));
  left: calc(-14.4 * var(--lpSetSize));
  z-index: 2;
  background-repeat: no-repeat;
  background-size: cover;

}

/* ==============================
  section03
============================== */
.section03 {
  position: sticky;
  padding-bottom: calc(80 * var(--lpSetSize));
  z-index: 1;
  top: calc(-400 * var(--lpSetSize));
}


.section03 .decoration02{
  position: absolute;
  width: calc(119.62 * var(--lpSetSize));
  z-index: 20;
  top: calc(-65.8 * var(--lpSetSize));
  left: calc(15 * var(--lpSetSize));
  pointer-events: none;
}

.section03 .img07{
  position: relative;
  z-index: 1;
}

.section03 .img07 .animation_icon{
  position: absolute;
  top: calc(14 * var(--lpSetSize));
  right: calc(14 * var(--lpSetSize));
  width: calc(88 * var(--lpSetSize));
  z-index: 10;
}

.section03 .img08{
  position: relative;
  width: calc(250 * var(--lpSetSize));
  margin: calc(80 * var(--lpSetSize)) auto 0;
}

.section03 .img08::after{
  content: "";
  position: absolute;
  background-image: url(../img/svg/nc.svg);
  width: calc(79.3 * var(--lpSetSize));
  height: calc(79.31 * var(--lpSetSize));
  left: calc(-15 * var(--lpSetSize));
  top: calc(-8 * var(--lpSetSize));
  background-size: contain;
  background-repeat: no-repeat;
}

/* ==============================
  section03_2
============================== */
.section03_2{
  position: relative;
  z-index: 10;
  background-color: var(--color-lightblue);
  width: 100%;
  padding: calc(68 * var(--lpSetSize)) 0 calc(40 * var(--lpSetSize));
  z-index: 10;
}

.section03_2::after{
  content: "";
  position: absolute;
  background-image: url(../img/svg/text_img09.svg);
  width: calc(246.25 * var(--lpSetSize));
  height: calc(22.21 * var(--lpSetSize));
  left: 50%;
  transform: translateX(-50%);
  top: calc(30.8 * var(--lpSetSize));
  background-repeat: no-repeat;
  background-size: contain;
}

.section03_2 .sec_img01{
  width: calc(350 * var(--lpSetSize));
  margin:  0 auto;
}

/* ==============================
  section04
============================== */
.section_wrapper{
  position: relative;
  z-index: 10;
  background: #fff;
}

.section04 .sec_img01{
  position: relative;
  padding: calc(100 * var(--lpSetSize)) 0 calc(40 * var(--lpSetSize));
}

_::-webkit-full-page-media, _:future, :root .section04 .sec_img01{
  margin-top: calc(-5 * var(--lpSetSize));
  padding: calc(105 * var(--lpSetSize)) 0 calc(40 * var(--lpSetSize));
}

.section04 .img10_block{
  width: calc(312 * var(--lpSetSize));
  margin: 0 auto;
}

.section04 .sec_img01::before{
  content: "";
  position: absolute;
  width: 100%;
  height: calc(140 * var(--lpSetSize));
  background-color: var(--color-yellow);
  bottom: 0;
}

.section04 .animation_icon{
  position: absolute;
  width: calc(100 * var(--lpSetSize));
  top: calc(55 * var(--lpSetSize));
  right: calc(20 * var(--lpSetSize));
  z-index: 10;
  pointer-events: none;
}

.section04 .sticky_contents .img11-sticky{
  position: sticky;
  width: 100%;
  top: calc(calc((100vh - calc(200 * var(--lpSetSize))) / 2) * -1);
  /* top: calc((100vh - calc(585 * var(--lpSetSize))) / 2); */
}


@media screen and (min-width: 1401px) {
  .section04 .sticky_contents .img11-sticky{
    top: calc(calc(300 * var(--lpSetSize)) * -1);
    /* top: calc( -1 * calc((100vh - calc(300 * var(--lpSetSize))) / 2) ); */
  }
}

.section04 .sticky_contents .sec_img02{
  position: relative;
  z-index: 2;
  width: calc(250 * var(--lpSetSize));
  /* top: 0; */
  padding-bottom: calc(117 * var(--lpSetSize));
  /* margin: calc(118 * var(--lpSetSize)) auto 0; */
  margin: calc(62 * var(--lpSetSize)) auto 0;
}

.section04 .sticky_contents .sec_img02::before{
  content: "";
  position: absolute;
  z-index: -1;
  background-color: var(--color-pink);
  width: calc(300 * var(--lpSetSize));
  height: calc(400 * var(--lpSetSize));
  top: calc(-25 * var(--lpSetSize));
  left: calc(-24 * var(--lpSetSize));
}

.section04 .sticky_contents .sec_img02::after{
  content: "";
  position: absolute;
  z-index: 3;
  background-image: url(../img/svg/jp.svg);
  width: calc(365.74 * var(--lpSetSize));
  height: calc(54.6 * var(--lpSetSize));
  bottom: calc(22.5 * var(--lpSetSize));
  left: 50%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.section04 .img11{
  position: relative;
}

.section04 .txt_img{
  content: "";
  position: absolute;
  width: calc(344 * var(--lpSetSize));
  height: calc(45 * var(--lpSetSize));
  bottom: calc(-35 * var(--lpSetSize));
  left: 50%;
  transform: translateX(-50%);
}

.section04 .img12{
  position: relative;
  width: calc(470 * var(--lpSetSize));
  padding: calc(108.7 * var(--lpSetSize)) 0 calc(80 * var(--lpSetSize));
  transform: translateX(-50%);
  left: 50%;
  overflow-x: clip;
}

.section04 .circl-img01{
  position: relative;
  z-index: 1;
  width: calc(300 * var(--lpSetSize));
  margin: 0 0 0 auto;
}

.section04 .circl-img01::after{
  content: "";
  position: absolute;
  background-image: url(../img/svg/arch-txt.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(124 * var(--lpSetSize));
  height: calc(76 * var(--lpSetSize));
  top: calc(-10.3 * var(--lpSetSize));
  left: calc(0.6 * var(--lpSetSize));
  margin: 0 0 0 auto;
}

.section04 .circl-img02{
  position: relative;
  z-index: 2;
  width: calc(280 * var(--lpSetSize));
  margin: calc(-101 * var(--lpSetSize)) auto 0 0;
}

/* ==============================
  cai_btn
============================== */
.cai_btn{
  position: relative;
  background-color: #fff;
  padding: 0 0 calc(40 * var(--lpSetSize));
  z-index: 10;
}

.cai_btn a{
  display: block;
  width: calc(180 * var(--lpSetSize));
  margin: 0 auto;
}

/* ==============================
  animatiion
============================== */
.background-change-element{
  transition: all 0.4s;
}

/* fadeIn ___________________________*/
.section02 .sec_img02 .js-show.fadeIn::after,
.js-show.fadeIn{
  opacity: 0;
}

.section02 .sec_img02 .js-show.fadeIn.view::after,
.js-show.fadeIn.view{
  transition-property: opacity, transform;
  transition-duration: 1s;
  opacity: 1;
}

/* zoomOut ___________________________*/
.js-show.zoomOut{
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0);
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), scale 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-show.zoomOut.view{
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

/* slideUp ___________________________*/
.js-show.slideUp{
  transform: translateY(calc(70 * var(--lpSetSize)));
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-show.slideUp.view{
  opacity: 1;
  transform: translateY(0);
}

/* roating ___________________________*/
.js-show.roating{
  animation: 40s linear infinite rotation1;
}


@keyframes rotation1 {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/* creditLinks ___________________________*/
#GPH250820HOMMECAT .section03_2 .sec_img01 .openBtn,
#GPH250820HOMMECAT .section02 .sec_img01 .openBtn,
#GPH250820HOMMECAT .section04 .sec_img01 .openBtn,
#G#GPH250820HOMMECAT .section04 .sec_img02 .openBtn,
#GPH250820HOMMECAT .section04 .sec_img02 .openBtn {
  background-color: #fff;
}

#GPH250820HOMMECAT .section02 .sec_img01 .openBtn span::before,
#GPH250820HOMMECAT .section02 .sec_img01 .openBtn span::after,
#GPH250820HOMMECAT .section02 .sec_img02 .openBtn{
   background: var(--color-khaki);
}

#GPH250820HOMMECAT .section03 .sec_img01 .openBtn {
  background-color: var(--color-navy);
}

#GPH250820HOMMECAT .section03_2 .sec_img01 .openBtn span::before,
#GPH250820HOMMECAT .section03_2 .sec_img01 .openBtn span::after{
  background: var(--color-khaki);
}

#GPH250820HOMMECAT .section03 .sec_img02 .openBtn span::before,
#GPH250820HOMMECAT .section03 .sec_img02 .openBtn span::after{
  background: var(--color-lightblue);
}

#GPH250820HOMMECAT .section04 .sec_img01 .openBtn span::before,
#GPH250820HOMMECAT .section04 .sec_img01 .openBtn span::after{
  background: var(--color-yellow);
}

#GPH250820HOMMECAT .section04 .sec_img02 .openBtn span::before,
#GPH250820HOMMECAT .section04 .sec_img02 .openBtn span::after {
  background-color: var(--color-pink);
}

#GPH250820HOMMECAT .openBtn{
  background-color: var(--color-mustard);
}


#GPH250820HOMMECAT .openBtn{
  position: absolute;
  display: block;
  width: calc(36 * var(--lpSetSize));
  height: calc(36 * var(--lpSetSize));
  /* width: calc(20 * var(--lpSetSize));
  height: calc(20 * var(--lpSetSize)); */
  z-index: 3;
  cursor: pointer;
  bottom: 0;
  right: 0;
}

#GPH250820HOMMECAT .openBtn span::before,
#GPH250820HOMMECAT .openBtn span::after{
  content: '';
  position: absolute;
  display: block;
  width: calc(20 * var(--lpSetSize));
  height: 1px;
  background: #fff;
  left: 20%;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center center;
  transition: transform .6s ease,opacity .6s ease;
}

#GPH250820HOMMECAT .openBtn span{
  position: relative;
  display: inline-block;
  width: calc(36 * var(--lpSetSize));
  height: calc(36 * var(--lpSetSize));
  animation: rotateback 0.5s linear;
  transform-origin: center center;
}

@keyframes rotateback {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}

#GPH250820HOMMECAT .openBtn.open span{
  animation: rotate 0.5s linear;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

#GPH250820HOMMECAT .openBtn span::after{
  -webkit-transform:  translateY(-50%) rotate(90deg);
  transform:  translateY(-50%) rotate(90deg);
}

#GPH250820HOMMECAT .creditLinks{
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  font-family: var(--font-credit);
  font-weight: var(--font-fw-light);
  font-size: calc(11 * var(--lpSetSize));
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: left;
  left: 0;
  bottom: 0;
  z-index: 2;
  opacity: 0;
  /* transform: translateY(100%); */
  transition: transform .6s ease,opacity .6s ease;
}


#GPH250820HOMMECAT .creditLinks__cont{
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  row-gap: calc(16 * var(--lpSetSize));
}

#GPH250820HOMMECAT .credit-item{
  display: none;
  z-index: 10;
}

#GPH250820HOMMECAT .credit-item a{
  pointer-events: all;
}

#GPH250820HOMMECAT .credit > .openBtn.open + .creditLinks .credit-item{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: underline;
  pointer-events: none;
}

#GPH250820HOMMECAT .credit > .openBtn.open + .creditLinks{
  /* transform: translateY(0); */
  opacity: 1;
  pointer-events: inherit;
}

#GPH250820HOMMECAT .credit .creditLinks::after{
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: rgb(255 255 255 / 0.7);
  left: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .6s ease;
}

#GPH250820HOMMECAT .credit > .openBtn.open + .creditLinks::after{
  opacity: 1;
}

#GPH250820HOMMECAT .creditLinks >  a{
  display: inline-block;
  white-space: nowrap;
  color: #000;
  font-weight: 200;
  text-decoration: none;
}

#GPH250820HOMMECAT .creditLinks >  span{
  display: block;
  white-space: nowrap;
  color: #000;
  font-weight: 200;
  font-size: 2rem;
  letter-spacing: 0.05em;
  text-decoration: none;
}

#GPH250820HOMMECAT .sec05__inner__container03 .credit-item {
  margin-top: 246px;
}

/* pagination */
.slick-dots {
  position: absolute;
  bottom: calc(-20 * var(--lpSetSize));
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: calc(6 * var(--lpSetSize));
}

.slick-dots li {
  margin: 0;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: calc(10 * var(--lpSetSize));
  height: calc(10 * var(--lpSetSize));
  /* padding: 5px; */
  cursor: pointer;
  background: transparent;
  border-radius: 0;
  border: 1px solid var(--color-mustard);
  transition: all 0.3s ease;
}


/* アクティブなドットのスタイル */
.sec_img02 .slick-dots li button {
  border: 1px solid var(--color-mustard);
}

.sec_img02 .slick-dots li.slick-active button {
  background: var(--color-mustard); /* アクティブなドットの色 */
}

.sec_img03 .slick-dots li button {
  border: 1px solid #fff;
}

.sec_img03 .slick-dots li.slick-active button {
  background: #fff; /* アクティブなドットの色 */
}

/* ==============================
  breadcrumb
============================== */
#main-container.center-contents .breadcrumb{
  color: #4D4D4D;
}

#main-container .cateList{
  position: relative;
  z-index: 10;
  background-color: #fff;
  padding-top: calc(59*(100vw / 390)) ;
  margin: 0 auto;
}