@charset "UTF-8";

:root {
  --rate: 50rem / 390;
  --font-lp_base: "neue-haas-grotesk-display","ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --color-lp_bg: #FEF6EC;
  --color-lp_font: #040000;
}

/*--------------------------------
            CSS Animation
 --------------------------------*/
/* Fade In
==================================*/
@keyframes opa {
  0% {
    opacity: 0;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

#ckPhilosophy .Gradualfade {
  opacity: 0;
  animation: opa 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
  -webkit-mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
  mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
  -webkit-mask-size: 100% max(300%, 100vh);
  mask-size: 100% max(300%, 100vh);
  -webkit-mask-position: center 100%;
  mask-position: center 100%;
  -webkit-mask-repeat: none;
  mask-repeat: none;
  transform: translateZ(0);
  transition: -webkit-mask-position 2s linear;
  transition: mask-position 2s linear;
  transition: mask-position 2s linear, -webkit-mask-position 2s linear;
}

#ckPhilosophy .Gradualfade.is-show{
  -webkit-mask-position: center 0;
  mask-position: center 0;
}

#ckPhilosophy .fadeIn {
  opacity: 0;
  transition: 2s;
}

#ckPhilosophy .fadeIn.is-show {
  opacity: 1;
}


/* slider
==================================*/
#ckPhilosophy .slick-track {
  display: flex;
}

#ckPhilosophy .slick-slide {
  height: auto !important;
}


/*--------------------------------
                共 通
 --------------------------------*/

main,#Wrap,.wrapBottom,.wrapTop{
  width: 100%;
  max-width: 100%;
}

#FooterWrap{
  position: relative;
  z-index: 100;
  background-color: #fff;
}

#header_txt_slider,
#header_img_slider {
  position: relative;
  z-index: 100;
}

#ckPhilosophy *{
  box-sizing: border-box;
}

#ckPhilosophy{
  font-family: var(--font-lp_base);
  font-size: calc(13 * (var(--rate)));
  letter-spacing: 0.05em;
  line-height: 2.2;
  text-align: center;

  display: flex;
  justify-content: center;

  color: var(--color-lp_font);
  background-color: var(--color-lp_bg);
  position: relative;
  /*overflow: hidden;*/
}
#ckPhilosophy .sp_only{display: none;}
#ckPhilosophy img{width: 100%;display: block;height: auto; image-rendering: -webkit-optimize-contrast; -webkit-backface-visibility: hidden;}
#ckPhilosophy a{display: block;width: 100%;cursor: pointer;transition: all 0.5s;color: inherit;}
#ckPhilosophy a:hover{opacity: .8}
#ckPhilosophy ul li,#ckPhilosophy ol li{list-style: none;}
#ckPhilosophy section{
  position: relative;
}
#ckPhilosophy .lp_inner{
  position: relative;
  display: grid;
  gap: calc(80 * (var(--rate)));
  padding-bottom: calc(100 * (var(--rate)));
}

/*------------ Text ------------*/
#ckPhilosophy h1,#ckPhilosophy h2,#ckPhilosophy h3{padding: 0;float: none;font-weight: normal;}
#ckPhilosophy p {
  display: block;
  margin: 0;
  font-size: calc(13 * (var(--rate)));
  line-height: 2.2;
}
#ckPhilosophy sup{
  font-size: 50%;
  margin-top: -0.6rem;
}
#ckPhilosophy .note{
  display: block;
  font-size: calc(10 * (var(--rate)));
  line-height: 1.5;
  margin-top: calc(6 * (var(--rate)));
}
#ckPhilosophy .bold{
  font-weight: bold;
}

/*------------ Title ------------*/
#ckPhilosophy .ttl_wrap{
  position: relative;
  border-top: 1px solid;
  border-bottom: 1px solid;
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  letter-spacing: 0.1em;
  line-height: 1;
}

#ckPhilosophy .ttl_wrap .ttl_num{
  position: absolute;
  top: 0;
  left: calc(20 * (var(--rate)));
  display: flex;
  align-items: center;
  font-size: calc(20 * (var(--rate)));
  letter-spacing: 0.1em;
  padding-right: calc(20 * (var(--rate)));
  border-right: 1px solid;
  height: 100%;
}

#ckPhilosophy .ttl_wrap.ttl_1,
#ckPhilosophy .ttl_wrap.ttl_1 .ttl_num{
  border-color: #EFB69C;
}

#ckPhilosophy .ttl_wrap.ttl_2,
#ckPhilosophy .ttl_wrap.ttl_2 .ttl_num{
  border-color: #C6B2E0;
}

#ckPhilosophy .ttl_wrap .ttl_txt{
  padding:calc(16 * (var(--rate))) calc(25 * (var(--rate))) calc(16 * (var(--rate))) calc(80 * (var(--rate)));
}

#ckPhilosophy .ttl_wrap .ttl_txt span{
  display: block;
  line-height: 1;
  letter-spacing: 0.1em;
}

#ckPhilosophy .ttl_wrap .ttl_txt .eng{
  font-size: calc(18 * (var(--rate)));
}

#ckPhilosophy .ttl_wrap .ttl_txt .jpn{
  margin-top: calc(10 * (var(--rate)));
  font-size: calc(10 * (var(--rate)));
}


/*------------ btn ------------*/
#ckPhilosophy .link_btn a{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: calc(300 * (var(--rate)));
  height: calc(50 * (var(--rate)));
  background-color: #000;
  font-size: calc(13 * (var(--rate)));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  color: #fff;
}

/* sec_mv
==================================*/
#ckPhilosophy .sec_mv{
  display: grid;
  gap: calc(60 * (var(--rate)));
  margin: auto;
}

#ckPhilosophy .sec_mv .mv_img img{
  width: calc(390 * (var(--rate)));
  height: calc(390 * (var(--rate)));
  object-fit: cover;
}

#ckPhilosophy .sec_mv .mv_txt{
  display: grid;
  gap: calc(40 * (var(--rate)));
}

#ckPhilosophy .sec_mv .main_ttl{
  font-size: calc(24 * (var(--rate)));
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
}

#ckPhilosophy .sec_mv .sub_ttl{
  font-size: calc(18 * (var(--rate)));
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
}


/* sec_text
==================================*/
#ckPhilosophy .sec_text{
  width: 100vw;
  height: calc(60 * (var(--rate)));
  display: flex;
  align-items: center;
  overflow: hidden;
}

#ckPhilosophy .sec_text.loop_1,
#ckPhilosophy .sec_text.loop_3{
  background-color: #F8C5AD;
}

#ckPhilosophy .sec_text.loop_2{
  background-color: #E5DEEE;
}

#ckPhilosophy .sec_text .loop_wrap{
  width: 100vw;
  height: fit-content;
}

#ckPhilosophy .sec_text .loop_wrap p{
  display: flex;
  align-items: center;
  gap: calc(36 * (var(--rate)));
  font-size: calc(20 * (var(--rate)));
  line-height: 1;
  letter-spacing: 0.15em;
  white-space: nowrap;
  width: fit-content;
  margin: 0 calc(18 * (var(--rate)));
}

#ckPhilosophy .sec_text .loop_wrap img{
  width: calc(16 * (var(--rate)));
}


/* sec_sentence
==================================*/
#ckPhilosophy .sec_sentence{
  display: grid;
  gap: calc(50 * (var(--rate)));
  width: calc(390 * (var(--rate)));
  margin: auto;
}

#ckPhilosophy .sec_sentence.sentence_4 .img{
  width: calc(240 * (var(--rate)));
  mix-blend-mode: multiply;
  margin: auto;
}

#ckPhilosophy .sec_sentence .sentence_wrap{
  display: grid;
  gap: calc(40 * (var(--rate)));
  width: calc(310 * (var(--rate)));
  margin: auto;
}

#ckPhilosophy .sec_sentence .sentence_wrap .lead{
  font-size: calc(21 * (var(--rate)));
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.2em;
}

#ckPhilosophy .sec_sentence .sentence_wrap ol{
  display: grid;
  gap: calc(30 * (var(--rate)));
}

#ckPhilosophy .sec_sentence .sentence_wrap li{
  display: flex;
}

#ckPhilosophy .sec_sentence .sentence_wrap .num{
  display: block;
  width: calc(50 * (var(--rate)));
  text-align: left;
  font-size: calc(24 * (var(--rate)));
  font-weight: 500;
  line-height: 1;
}

#ckPhilosophy .sec_sentence .sentence_wrap .sentence{
  text-align: left;
  width: calc(260 * (var(--rate)));
}


/*--------------------------------
            Layout  PC
 --------------------------------*/
@media screen and (min-width: 768px){
  #ckPhilosophy .lp_inner{
    padding-top: 5rem;
  }

  #ckPhilosophy .sec_mv .mv_img img{
    width: 100rem;
    height: auto;
    object-fit: initial;
  }

  #ckPhilosophy .ttl_wrap{
    text-align: center;
  }

  #ckPhilosophy .ttl_wrap .ttl_num{
    left: 4rem;
    font-size: 3rem;
    padding-right: 4rem;
  }

  #ckPhilosophy .ttl_wrap .ttl_txt{
    padding: 2rem 0;
    margin: auto;
  }

  #ckPhilosophy .ttl_wrap .ttl_txt .eng{
    font-size: 3.2rem;
  }

  #ckPhilosophy .ttl_wrap .ttl_txt .jpn{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    font-size: 1.3rem;
    height: fit-content;
  }
}


/*--------------------------------
            Responsive
 --------------------------------*/
@media screen and (max-width: 1400px){
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  html {
    font-size: calc(10 * (100vw / 1200));
  }
}


/*--------------------------------
            Layout  SP
 --------------------------------*/
@media (max-width: 767px) {
  html {
    font-size: calc(10 * (100vw / 500));
  }

  .page-share-btn{
    height: 0;
  }

  #share{
    z-index: 100 !important;
  }

  #FooterWrap {
    margin-top: -3rem;
  }

  #ckPhilosophy .sp_only{display: block;}
  #ckPhilosophy .pc_only{display: none;}

  #ckPhilosophy a:hover{opacity: 1}
}