@charset "UTF-8";
/*
Sass変数

_variables.scss

各パーツの色やサイズを変数として定義しています。
*/
/*
デバイス別設定
*/
/*
メディア

_media.scss
*/
/*
メディアクエリ

※デバイスごとのブレイクポイントは_variables.scssにて変数で設定。
*/
/*
コンテナ

* @mixin container
*/
/*

_projects.scss

*/
.p-guide .sec-main__pic.m-left {
  width: 83.3333%;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .sec__catch {
    text-align: left;
    padding-left: 3.90625vw;
    padding-right: 3.90625vw;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .sec__catch {
    font-size: 6.9333333333vw;
    text-align: left;
    padding-left: 4.2666666667vw;
    padding-right: 4.2666666667vw;
  }
}
.p-guide .sec__content {
  margin: 4rem auto 0;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .sec__content {
    padding-left: 3.90625vw;
    padding-right: 3.90625vw;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .sec__content {
    margin: 10.6666666667vw auto 0;
    padding-left: 4.2666666667vw;
    padding-right: 4.2666666667vw;
  }
}
@media only screen and (min-width: 1101px) {
  .p-guide .p-guide__sec01 .sec-main__content {
    padding-top: 64rem;
    padding-bottom: 12rem;
  }
}
.p-guide .p-guide__sec01 .sec-main__content table {
  width: 100%;
}
.p-guide .p-guide__sec01 .sec-main__content table tr:first-child .ttl, .p-guide .p-guide__sec01 .sec-main__content table tr:first-child .text {
  padding-top: 0;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .p-guide__sec01 .sec-main__content table .ttl {
    width: 100%;
    display: block;
  }
  .p-guide .p-guide__sec01 .sec-main__content table .text {
    width: 100%;
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec01 .sec-main__content table .ttl {
    width: 100%;
    display: block;
  }
  .p-guide .p-guide__sec01 .sec-main__content table .text {
    width: 100%;
    display: block;
  }
}
.p-guide .p-guide__sec02 {
  padding-top: 17.5rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec02 {
    padding-top: 27.3866666667vw;
  }
}
.p-guide .p-guide__sec02 .sec-main__content {
  padding-top: 64rem;
}
.p-guide .p-guide__sec02 .sec-main__content table {
  width: 100%;
}
.p-guide .p-guide__sec02.rainbow1::before {
  top: -8rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec02.rainbow1::before {
    top: -4.2666666667vw;
  }
}
.p-guide .p-guide__sec02 .sec-main__pic {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec02 .sec-main__pic {
    margin-bottom: 10.6666666667vw;
  }
}
.p-guide .p-guide__sec02 .flex1 {
  gap: 7rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec02 .flex1 {
    gap: 10.6666666667vw;
  }
}
.p-guide .p-guide__sec02 .flex1 .pic {
  width: 40%;
}
@media only screen and (max-width: 980px) {
  .p-guide .p-guide__sec02 .flex1 .pic {
    width: 100%;
  }
}
.p-guide .p-guide__sec02 .flex1 .inner {
  width: calc(60% - 7rem);
}
@media only screen and (max-width: 980px) {
  .p-guide .p-guide__sec02 .flex1 .inner {
    width: 100%;
  }
}
.p-guide .p-guide__sec02 .flex1 .inner .catch {
  display: inline-block;
  color: #DF3189;
  font-size: 3.8rem;
  font-weight: 400;
  font-family: shippori-mincho, sans-serif;
  margin: 0 auto 4rem;
  position: relative;
  z-index: 100;
  line-height: 55.02px;
  letter-spacing: 0.08em;
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .p-guide .p-guide__sec02 .flex1 .inner .catch {
    line-height: 1.6em;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .p-guide__sec02 .flex1 .inner .catch {
    margin: 0 auto 6.4vw;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec02 .flex1 .inner .catch {
    font-size: 7.4666666667vw;
    line-height: 10.8106666667vw;
    margin: 0 auto 6.4vw;
  }
}
.p-guide .columRole {
  background: #f6f5ef;
  padding: 4rem;
  position: relative;
  margin-bottom: 12rem;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .columRole {
    margin-bottom: 8rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .columRole {
    padding: 10.6666666667vw 4.2666666667vw;
    width: 91.4666666667vw;
    margin-top: 0;
    margin-bottom: 10.6666666667vw;
  }
}
.p-guide .columRole .ttl {
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 4rem;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .p-guide .columRole .ttl {
    font-size: 6.9333333333vw;
    line-height: 10.8106666667vw;
    text-align: center;
    margin: 0 auto 6.4vw;
  }
}
.p-guide .columRole .ttl .large {
  font-size: 3rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .columRole .ttl .large {
    font-size: 6.9333333333vw;
  }
}
.p-guide .columRole .inner {
  width: calc(52.5% - 2.4rem);
}
@media only screen and (max-width: 980px) {
  .p-guide .columRole .inner {
    width: 100%;
  }
}
.p-guide .columRole .flex-box {
  gap: 2.4rem;
  background-color: #fff;
  padding: 1.6rem;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .p-guide .columRole .flex-box {
    gap: 6.4vw;
    padding: 4.2666666667vw;
  }
}
.p-guide .columRole .pic {
  width: 47.5%;
}
@media only screen and (max-width: 980px) {
  .p-guide .columRole .pic {
    width: 100%;
  }
}
.p-guide .whitening__conetnt {
  margin-bottom: 12rem;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .whitening__conetnt {
    margin-bottom: 8vw;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .whitening__conetnt {
    margin-bottom: 21.3333333333vw;
  }
}
.p-guide .whitening__conetnt .ttl {
  background-color: #f6f5ef;
  font-weight: 700;
  padding: 0.1rem 1.6rem;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .whitening__conetnt .ttl {
    padding: 0 4.2666666667vw;
    margin-bottom: 4.2666666667vw;
  }
}
.p-guide .whitening__conetnt .pic {
  padding: 0 2.4rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .whitening__conetnt .pic {
    padding: 0 4.2666666667vw;
  }
}
.p-guide .p-guide__sec03 {
  position: relative;
  padding-top: 9rem;
  margin-bottom: 8rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec03 {
    padding-top: 6.4vw;
    margin-bottom: 21.3333333333vw;
  }
}
.p-guide .p-guide__sec03.rainbow1::before {
  top: -16rem;
  z-index: 100;
}
.p-guide .p-guide__sec03.rainbow2::before {
  top: 0;
  z-index: 100;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec03.rainbow2::before {
    top: -20vw;
  }
}
.p-guide .p-guide__sec03.rainbow3::before {
  top: -8rem;
  z-index: 100;
}
.p-guide .p-guide__sec03 .sec-main__content {
  position: relative;
  padding-bottom: 12rem;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .p-guide__sec03 .sec-main__content {
    padding-bottom: 56vw;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec03 .sec-main__content {
    padding-bottom: 51.2vw;
  }
}
.p-guide .p-guide__sec03 .sec__text {
  width: 100%;
  max-width: 76rem;
}
@media only screen and (min-width: 980px) and (max-width: 1100px) {
  .p-guide .p-guide__sec03 .sec__text {
    max-width: 70%;
  }
}
.p-guide .p-guide__sec03 .obj {
  bottom: 17.2rem;
  right: 0;
  width: 30.5rem;
  height: auto;
  z-index: 100;
}
@media only screen and (min-width: 980px) and (max-width: 1100px) {
  .p-guide .p-guide__sec03 .obj {
    right: 0;
    bottom: -10vw;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .p-guide__sec03 .obj {
    right: 0;
    bottom: -10vw;
    width: 44.3066666667vw;
    height: auto;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec03 .obj {
    width: 44.3066666667vw;
    height: auto;
    right: 0;
    bottom: -12vw;
  }
}
.p-guide .p-guide__sec04 {
  position: relative;
  padding-top: 9rem;
  margin-bottom: 8rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec04 {
    padding-top: 6.4vw;
    margin-bottom: 21.3333333333vw;
  }
}
.p-guide .p-guide__sec04.rainbow1::before {
  top: -16rem;
  z-index: 100;
}
.p-guide .p-guide__sec04.rainbow2::before {
  top: 0;
  z-index: 100;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec04.rainbow2::before {
    top: -20vw;
  }
}
.p-guide .p-guide__sec04.rainbow3::before {
  top: -8rem;
  z-index: 100;
}
.p-guide .p-guide__sec04 .sec-main__pic {
  margin-bottom: 2.4rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec04 .sec-main__pic {
    margin-bottom: 4.2666666667vw;
  }
}
.p-guide .p-guide__sec05 {
  position: relative;
  padding-top: 9rem;
  margin-bottom: 8rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec05 {
    padding-top: 6.4vw;
    margin-bottom: 21.3333333333vw;
  }
}
.p-guide .p-guide__sec05.rainbow1::before {
  top: -16rem;
  z-index: 100;
}
.p-guide .p-guide__sec05.rainbow2::before {
  top: 0;
  z-index: 100;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec05.rainbow2::before {
    top: -20vw;
  }
}
.p-guide .p-guide__sec05.rainbow3::before {
  top: -8rem;
  z-index: 100;
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .p-guide .p-guide__sec05 .sec__wrp {
    padding-left: 3.90625vw;
    padding-right: 3.90625vw;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec05 .sec__wrp {
    padding-left: 4.2666666667vw;
    padding-right: 4.2666666667vw;
  }
}
.p-guide .p-guide__sec05.rainbow2::before {
  top: 0;
  z-index: 100;
}
.p-guide .p-guide__sec05 .sec-main {
  padding-bottom: 0.1rem;
}
.p-guide .p-guide__sec05 .yoboRole .box {
  border-radius: 20px;
}
.p-guide .p-guide__sec05 .yoboRole .box.yobo1 {
  background: -webkit-gradient(linear, left top, right top, color-stop(8.88%, #fffcb7), color-stop(94.63%, #f4ffdd));
  background: -webkit-linear-gradient(left, #fffcb7 8.88%, #f4ffdd 94.63%);
  background: linear-gradient(90deg, #fffcb7 8.88%, #f4ffdd 94.63%);
}
.p-guide .p-guide__sec05 .yoboRole .box.yobo1 .catch {
  color: #959247;
}
.p-guide .p-guide__sec05 .yoboRole .box.yobo1 .catch::before {
  background: url(../images/yobo1-obj.svg) no-repeat center center/cover;
}
.p-guide .p-guide__sec05 .yoboRole .box.yobo2 {
  background: -webkit-gradient(linear, left top, right top, color-stop(8.88%, #f2dece), color-stop(94.63%, #fffedd));
  background: -webkit-linear-gradient(left, #f2dece 8.88%, #fffedd 94.63%);
  background: linear-gradient(90deg, #f2dece 8.88%, #fffedd 94.63%);
}
.p-guide .p-guide__sec05 .yoboRole .box.yobo2 .catch {
  color: #7e5e45;
}
.p-guide .p-guide__sec05 .yoboRole .box.yobo2 .catch::before {
  background: url(../images/yobo2-obj.svg) no-repeat center center/cover;
}
.p-guide .p-guide__sec05 .yoboRole .box .inner {
  padding: 0 3.2rem 4rem;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .p-guide__sec05 .yoboRole .box .inner {
    padding: 2.1333333333vw 4.2666666667vw 4.2666666667vw;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec05 .yoboRole .box .inner {
    padding: 2.1333333333vw 4.2666666667vw 4.2666666667vw;
  }
}
.p-guide .p-guide__sec05 .yoboRole .box .inner .catch {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-left: 2.8rem;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec05 .yoboRole .box .inner .catch {
    font-size: 3.7333333333vw;
    margin-bottom: 2.1333333333vw;
    padding-left: 5.3333333333vw;
  }
}
.p-guide .p-guide__sec05 .yoboRole .box .inner .catch::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec05 .yoboRole .box .inner .catch::before {
    width: 3.2vw;
    height: 3.2vw;
  }
}
.p-guide .p-guide__sec05 .yoboRole .box .inner .ttl {
  font-size: 3rem;
  font-weight: 500;
  margin-bottom: 1.6rem;
  line-height: 1.6em;
  letter-spacing: 0.19em;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec05 .yoboRole .box .inner .ttl {
    font-size: 6.4vw;
    margin-bottom: 2.1333333333vw;
  }
}
.p-guide .p-guide__sec05 .yoboRole .box .inner .ttl .large {
  font-size: 4rem;
  font-weight: 600;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec05 .yoboRole .box .inner .ttl .large {
    font-size: 8vw;
    margin-bottom: 0;
  }
}
.p-guide .p-guide__sec05 .yoboRole .box .inner .btn {
  margin: 2.4rem auto 0;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec05 .yoboRole .box .inner .btn {
    margin: 4.2666666667vw auto;
  }
}
.p-guide .p-guide__sec05 .courseRole {
  text-align: center;
}
.p-guide .p-guide__sec05 .courseRole .sec__catch {
  text-align: center;
}
.p-guide .p-guide__sec05 .courseRole .btn {
  margin: 0 auto;
}
.p-guide .p-guide__sec05 .tsumayoji1 {
  padding-bottom: 4rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec05 .tsumayoji1 {
    padding-bottom: 4.2666666667vw;
  }
}
.p-guide .p-guide__sec05 .tsumayoji1 .pic {
  width: 32.589%;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec05 .tsumayoji1 .pic {
    width: 100%;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
}
.p-guide .p-guide__sec05 .tsumayoji1 .inner {
  width: calc(67.411% - 2.4rem);
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec05 .tsumayoji1 .inner {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
    width: 100%;
  }
}
.p-guide .p-guide__sec06 {
  position: relative;
  padding-top: 9rem;
  margin-bottom: 8rem;
  margin-bottom: 12rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec06 {
    padding-top: 6.4vw;
    margin-bottom: 21.3333333333vw;
  }
}
.p-guide .p-guide__sec06.rainbow1::before {
  top: -16rem;
  z-index: 100;
}
.p-guide .p-guide__sec06.rainbow2::before {
  top: 0;
  z-index: 100;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec06.rainbow2::before {
    top: -20vw;
  }
}
.p-guide .p-guide__sec06.rainbow3::before {
  top: -8rem;
  z-index: 100;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .p-guide__sec06 {
    margin-bottom: 10.6666666667vw;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec06 {
    margin-bottom: 6.4vw;
  }
}
.p-guide .p-guide__sec06 .sec-main__pic {
  margin-bottom: 2.4rem;
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec06 .sec-main__pic {
    margin-bottom: 4.2666666667vw;
  }
}
.p-guide .p-guide__sec06 .sec__text {
  padding-left: 12.5rem;
  padding-bottom: 12rem;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .p-guide__sec06 .sec__text {
    padding-bottom: 64vw;
    padding-left: 3.90625vw;
    padding-right: 3.90625vw;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec06 .sec__text {
    padding-left: 4.2666666667vw;
    padding-right: 4.2666666667vw;
    padding-bottom: 76vw;
  }
}
.p-guide .p-guide__sec06 .sec__text .text {
  max-width: 53.3rem;
  width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .p-guide__sec06 .sec__text .text {
    max-width: initial;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec06 .sec__text .text {
    max-width: initial;
  }
}
.p-guide .p-guide__sec06 .sec__text .honda {
  width: 10.1rem;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .p-guide__sec06 .sec__text .honda {
    bottom: 40vw;
    top: auto;
    left: auto;
    right: 4.2666666667vw;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec06 .sec__text .honda {
    width: 26.9333333333vw;
    bottom: 40vw;
    top: auto;
    left: auto;
    right: 4.2666666667vw;
  }
}
.p-guide .p-guide__sec06 .sec__text .obj1 {
  width: 36rem;
  height: 36rem;
  position: absolute;
  top: -7rem;
  right: -4.8rem;
  z-index: 100;
}
@media only screen and (min-width: 1024px) and (max-width: 1100px) {
  .p-guide .p-guide__sec06 .sec__text .obj1 {
    width: 30rem;
    height: 30rem;
  }
}
@media only screen and (min-width: 980px) and (max-width: 1100px) {
  .p-guide .p-guide__sec06 .sec__text .obj1 {
    width: 29.414063vw;
    height: 29.414063vw;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .p-guide__sec06 .sec__text .obj1 {
    width: 45.3333333333vw;
    height: 45.3333333333vw;
    top: auto;
    left: 3.90625vw;
    bottom: 15vw;
    right: auto;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec06 .sec__text .obj1 {
    width: 52vw;
    height: 52vw;
    top: auto;
    left: 4.2666666667vw;
    bottom: 15vw;
    right: auto;
  }
}
.p-guide .p-guide__sec06 .sec__text .obj2 {
  width: 25rem;
  height: 25rem;
  position: absolute;
  bottom: 0;
  left: 58.166666666%;
  z-index: 100;
}
@media only screen and (min-width: 980px) and (max-width: 1100px) {
  .p-guide .p-guide__sec06 .sec__text .obj2 {
    width: 19.53125vw;
    height: 19.53125vw;
    left: 70%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .p-guide .p-guide__sec06 .sec__text .obj2 {
    width: 31.4666666667vw;
    height: 31.4666666667vw;
    right: 16vw;
    bottom: 4vw;
  }
}
@media only screen and (max-width: 767px) {
  .p-guide .p-guide__sec06 .sec__text .obj2 {
    width: 31.4666666667vw;
    height: 31.4666666667vw;
    right: 16vw;
    bottom: 4vw;
  }
}/*# sourceMappingURL=guide.css.map */