/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./node_modules/import-glob-loader/index.js!./src/scss/page/nub.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";

/* ==========================================================================
   Foundation
   ========================================================================== */
/* ==========================================================================
   Object
   ========================================================================== */
/* Component
   ----------------------------------------------------------------- */
/* Bread
   ----------------------------------------------------------------- */
.c-bread {
  height: auto;
  width: 100vw;
  padding: 13px 0;
}
.c-bread--box {
  height: 100%;
  flex-wrap: wrap;
}
.c-bread--box,.c-bread--list {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  gap: 6px;
}
.c-bread--list:after {
  content: "＞";
  font-size: 10px;
  color: #C7C7C7;
  display: block;
}
.c-bread--list:last-child:after {
  display: none;
}

/* Project
   ----------------------------------------------------------------- */
.p-nub__main {
  padding-bottom: 0px;
}
.p-nub__can {
  padding: 100px 0 168px;
}
.p-nub__can--title {
  font-size: 40px;
  line-height: 1.67;
  letter-spacing: 6px;
}
.p-nub__can--title:before {
  margin-top: calc((1 - 1.67) * 0.5em);
}
.p-nub__can--title:after,.p-nub__can--title:before {
  display: block;
  width: 0;
  height: 0;
  content: "";
}
.p-nub__can--title:after {
  margin-bottom: calc((1 - 1.67) * 0.5em);
}
.p-nub__can--title__label {
  padding: 9px 0px;
}
.p-nub__can__box {
  display: grid;
  gap: 69px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 65px;
}
.p-nub__can__content {
  display: grid;
}
.p-nub__can__content--title {
  margin: 25px auto 16px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
.p-nub__point {
  padding: 116px 0 100px;
  background: #F4F8F0;
  position: relative;
}
.p-nub__point:before {
  content: "";
  display: block;
  width: 589px;
  height: 106px;
  background-image: url(/images/beginner/point_title.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: -44px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.p-nub__point__box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 32px;
}
.p-nub__step {
  padding: 100px 0 140px;
}
.p-nub__step__title {
  font-size: 40px;
  line-height: 1.67;
  letter-spacing: 6px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  padding: 3.5px 0px;
}
.p-nub__step__title:before {
  display: block;
  width: 0;
  height: 0;
  margin-top: calc((1 - 1.67) * 0.5em);
  content: "";
}
.p-nub__step__title:after {
  display: block;
  width: 0;
  height: 0;
  margin-bottom: calc((1 - 1.67) * 0.5em);
  content: "";
}
.p-nub__step__title__box {
  display: grid;
  gap: 3px;
}
.p-nub__step__title--min {
  font-size: 24px;
  letter-spacing: 3.6px;
  line-height: 1.67;
  padding: 5.5px 0px;
}
.p-nub__step__title--min:before {
  display: block;
  width: 0;
  height: 0;
  margin-top: calc((1 - 1.67) * 0.5em);
  content: "";
}
.p-nub__step__title--min:after {
  display: block;
  width: 0;
  height: 0;
  margin-bottom: calc((1 - 1.67) * 0.5em);
  content: "";
}
.p-nub__step__title--color {
  font-size: 56px;
  line-height: 1.67;
  letter-spacing: 8.4px;
  display: block;
}
.p-nub__step__title--color:before {
  display: block;
  width: 0;
  height: 0;
  margin-top: calc((1 - 1.67) * 0.5em);
  content: "";
}
.p-nub__step__title--color:after {
  display: block;
  width: 0;
  height: 0;
  margin-bottom: calc((1 - 1.67) * 0.5em);
  content: "";
}
.p-nub__step__img {
  width: 100%;
  margin: 65px auto 88px;
}
.p-nub__step__bottom {
  width: 288px;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto 18px;
}
.p-nub__step__link-text {
  line-height: 20.04px;
  margin: 72px auto 32px;
}
.p-nub__submit {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
.p-nub__submit .c-button {
  max-width: 374px;
  width: 100%;
  height: 76px;
  border-radius: 38px;
}
.p-nub__submit .c-button__inner--default {
  font-size: 18px;
}
.p-nub--center {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
.p-nub__slider {
  height: auto;
  max-height: 477px;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
  position: relative;
  z-index: 1;
  margin: 0 0 64px !important;
}
.p-nub__slider.slick-initialized {
  opacity: 1;
}
.p-nub__slider__arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(38, 38, 38, 0.3);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  z-index: 10;
}
.p-nub__slider__arrow:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.p-nub__slider__arrow--next {
  right: 8px;
}
.p-nub__slider__arrow--next:before {
  width: 7px;
  height: 11px;
  background-image: url(/images/icon/parts/ico-arrow-right-white.png);
  background-size: cover;
}
.p-nub__slider__arrow--prev {
  left: 8px;
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}
.p-nub__slider__arrow--prev:before {
  width: 7px;
  height: 11px;
  background-image: url(/images/icon/parts/ico-arrow-left-white.png);
  background-size: cover;
}
.p-nub__slider__dots {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  gap: 8px;
  margin: 0 auto !important;
  position: relative;
  top: 0px;
}
.p-nub__slider__dots>li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C7C7C7;
  -webkit-transition: background 0.4s;
  transition: background 0.4s;
}
.p-nub__slider__dots>li.slick-active {
  background: #767676;
}
.p-nub__slider__dots>li>button {
  opacity: 0;
  width: 100%;
  height: 100%;
}

/* Utility
   ----------------------------------------------------------------- */
.u-margin--center {
  margin: 0 auto;
}
@media (max-width: 768px){
  .pc {
    display: none !important;
  }
  .p-nub__main {
    padding-bottom: 0px;
  }
  .p-nub__can {
    padding: 40px 0 107px;
  }
  .p-nub__can--title {
    font-size: 24px;
    line-height: 1.67;
  }
  .p-nub__can--title:before {
    margin-top: calc((1 - 1.67) * 0.5em);
  }
  .p-nub__can--title:after,.p-nub__can--title:before {
    display: block;
    width: 0;
    height: 0;
    content: "";
  }
  .p-nub__can--title:after {
    margin-bottom: calc((1 - 1.67) * 0.5em);
  }
  .p-nub__can--title__label {
    padding: 4.5px 0px;
  }
  .p-nub__can__box {
    grid-template-columns: 100%;
    gap: 56px;
    margin-top: 8px;
  }
  .p-nub__can__content--title {
    margin: 12px auto 10px;
  }
  .p-nub__point {
    padding: 24px 0 56px;
  }
  .p-nub__point:before {
    background-image: url(/images/beginner/point_title_sp.png);
    width: 299px;
    height: 54px;
    top: -27px;
  }
  .p-nub__point__content {
    -webkit-filter: drop-shadow(0px 3px 10px #0000001A);
            filter: drop-shadow(0px 3px 10px #0000001A);
    padding: 15px 7.5px;
  }
  .p-nub__point__box {
    width: 100vw;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    display: block;
    gap: 15px;
    margin-bottom: 0px !important;
  }
  .p-nub__step {
    padding: 40px 0 100px;
  }
  .p-nub__step__title {
    font-size: 24px;
    letter-spacing: 3.6px;
    padding: 4px 0px;
  }
  .p-nub__step__title:before {
    margin-top: calc((1 - 1.67) * 0.5em);
  }
  .p-nub__step__title:after,.p-nub__step__title:before {
    display: block;
    width: 0;
    height: 0;
    content: "";
  }
  .p-nub__step__title:after {
    margin-bottom: calc((1 - 1.67) * 0.5em);
  }
  .p-nub__step__title__box {
    gap: 0px;
  }
  .p-nub__step__title--min {
    font-size: 18px;
    letter-spacing: 2.4px;
    padding: 3px 0px;
  }
  .p-nub__step__title--min:before {
    display: block;
    width: 0;
    height: 0;
    margin-top: calc((1 - 1.67) * 0.5em);
    content: "";
  }
  .p-nub__step__title--min:after {
    display: block;
    width: 0;
    height: 0;
    margin-bottom: calc((1 - 1.67) * 0.5em);
    content: "";
  }
  .p-nub__step__title--color {
    font-size: 36px;
    letter-spacing: 5.4px;
  }
  .p-nub__step__title--color:before {
    display: block;
    width: 0;
    height: 0;
    margin-top: calc((1 - 1.67) * 0.5em);
    content: "";
  }
  .p-nub__step__title--color:after {
    display: block;
    width: 0;
    height: 0;
    margin-bottom: calc((1 - 1.67) * 0.5em);
    content: "";
  }
  .p-nub__step__img {
    margin: 32px auto 56px;
  }
  .p-nub__slider {
    width: 100vw;
    margin: 0 0 43px !important;
  }
  .u-margin--center--fit--sp {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
  }
  .u-margin--l--minus-4 {
    margin-left: -4px;
  }
}
@media (min-width: 769px){
  .sp {
    display: none !important;
  }
  .p-nub__point__content {
    -webkit-box-shadow: 0px 3px 10px #0000001A;
            box-shadow: 0px 3px 10px #0000001A;
  }
  .u-margin--center--fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
  }
}

/*# sourceMappingURL=nub.css.map*/