@charset "UTF-8";

:root{
  --color_yellow: #FEEA00;
  --color_black: #000;

  --font-noto_sans_jp: "Noto Sans JP", sans-serif;
  --font-zen_kaku_gothic: "Zen Kaku Gothic New", sans-serif;

  --font-weight-Regular: 400;
  --font-weight-Bold: 700;
  --font-weight-Black: 900;
}

.br-sp { display: none;}
.br-pc { display: block;}

.color-consult-lp{
  font-family: var(--font-noto_sans_jp);
  font-size: 1.6rem;
  font-weight: var(--font-weight-Regular);
  color: var(--color_black);
  line-height: 1.8;
  letter-spacing: 0.04em;
  background-image: url(../img/color-consult/noise.avif);
  background-repeat: repeat;
  background-size: 10rem;
}

.bg-transparent { background-color: rgba(255, 255, 255, 0.8);}

.color-consult-lp section{ margin-top: 8rem;}

.section-title-inner {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.cc-card {
  --card-radius: 6.4rem;
  --card-border: 0.2rem;
  --text-inset: 2rem;
  --text-duration: 16s;

  position: relative;
  min-height: 50.2rem;
  border: 0.2rem solid var(--color_black);
  border-radius: 6.4rem;
  background: var(--card-bg);
  box-sizing: border-box;
  border-width: var(--card-border);
  border-radius: var(--card-radius);
}

.inner-orange { --card-bg: #FA853C;}
.inner-green { --card-bg: #57D982;}
.inner-pink { --card-bg: #F9769A;}
.inner-blue { --card-bg: #55BBF2;}
.inner-purple { --card-bg: #B58AF2;}

.cc-card > .container {
  --text-radius: max(0px, calc(var(--card-radius) - var(--card-border) - var(--text-inset)));

  position: absolute;
  inset: var(--text-inset);
  margin: 0;
  padding: 0;
  border: 0;
  width: auto;
  max-width: none;
  height: auto;
  display: block;
  border-radius: var(--text-radius);
  pointer-events: none;
}

.cc-card > .container > span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  white-space: pre;
  offset-path: rect(0 100% 100% 0 round var(--text-radius));
  offset-rotate: auto;
  animation: movetext var(--text-duration) linear infinite;
  font-family: var(--font-zen_kaku_gothic);
  font-weight: var(--font-weight-Black);
  font-size: var(--text-size, 1.2rem);
  line-height: 1;
  color: #fff;
}

@keyframes movetext {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-card > .container > span { animation-play-state: paused; }
}

.section-title-inner,
.cc-card {
  min-width: 0;
  container-type: inline-size;
}

.section-title-inner .sub-title {
  font-family: var(--font-zen_kaku_gothic);
  font-weight: var(--font-weight-Bold);
  font-size: 2.8rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.section-title-inner .main-title,
.section-title-inner .main-title .no-break {
  font-family: var(--font-zen_kaku_gothic);
  font-weight: var(--font-weight-Black);
  font-size: 4.6rem;
  line-height: 1.4;
  letter-spacing: -0.04em;
}

.no-break { white-space: nowrap;}

.section-title-inner hgroup {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.txt { font-size: 1.6rem;}

@media screen and (max-width: 640px){
.color-consult-lp section{ margin-top: 4rem;}

.br-sp { display: block;}
.br-pc { display: none;}

.section-title-inner { gap: 0.8rem;}

.section-title-inner hgroup { gap: 0.8rem;}

.section-title-inner .sub-title { font-size: 2rem;}

.section-title-inner .main-title,
.section-title-inner .main-title .no-break {
  font-size: 3rem;
  letter-spacing: -0.02em;
}

.cc-card {
  --text-inset: 1.4rem;
  min-height: 0;
}

}

/* kv-title-block */
.kv-title-block {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

.main-visual {
  position: relative;
  width: 100%;
  max-width: 91rem;
  aspect-ratio: 696 / 472;
  container-type: inline-size;
}

.main-visual > .kv-card {
  --card-radius: 7cqw;
  --text-inset: 1.8cqw;
  --text-size: 1.45cqw;

  position: absolute;
  z-index: 1;
  top: 15.5%;
  left: 9.2%;
  width: 81.6%;
  height: 66.7%;
  min-height: 0;
  container-type: normal;
}

.main-visual .kv-title {
  position: absolute;
  top: 13.5%;
  left: 41.5%;
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: var(--font-zen_kaku_gothic);
  font-weight: var(--font-weight-Black);
  font-size: 5.1cqw;
  line-height: 1.4;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.illust-container {
  position: relative;
  isolation: isolate;
}

.illust {
  position: absolute;
  z-index: 1;
  display: block;
  width: var(--illust-width);
  max-width: none;
  height: auto;
  top: var(--illust-top, auto);
  right: var(--illust-right, auto);
  bottom: var(--illust-bottom, auto);
  left: var(--illust-left, auto);
  pointer-events: none;
}

.main-visual > .illust--kv-back {
  --illust-width: 16%;
  --illust-top: 2%;
  --illust-left: 0%;

  z-index: 0;
}

.main-visual > .illust--kv-bubble01 {
  --illust-width: 40%;
  --illust-top: 10%;
  --illust-left: 30%;

  z-index: 3;
}

.main-visual > .illust--kv-bubble02 {
  --illust-width: 27%;
  --illust-top: 57%;
  --illust-left: 45%;

  z-index: 2;
}

.main-visual > .illust--kv-woman {
  --illust-width: 43%;
  --illust-top: 22%;
  --illust-bottom: auto;
  --illust-left: 1.5%;

  z-index: 3;
}

.main-visual > .illust--01 {
  --illust-width: 18%;
  --illust-top: 48%;
  --illust-right: 2%;
  --illust-bottom: auto;

  z-index: 3;
}

.kv-title-txt{
  text-align: center;
  margin: 0;
  padding: 0 2rem;
}

.button-box {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.button {
  --button-arrow: url(../img/color-consult/arrow_yellow.svg);
  --button-width: 38rem;
  --button-height: 8rem;
  --button-text-top: 25%;

  position: relative;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: var(--button-width);
  min-width: 0;
  min-height: var(--button-height);
  border-radius: 10rem;
  background: var(--color_yellow);
  text-decoration: none;
  overflow: hidden;
}

.button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.8rem;
  transform: translateY(-50%);
  width: 2.8rem;
  height: 2.8rem;
  background: var(--button-arrow) center / contain no-repeat;
  pointer-events: none;
}

.button--black {
  --button-arrow: url(../img/color-consult/arrow_black.svg);
  background: var(--color_black);
}

.button--down {  --button-arrow: url(../img/color-consult/arrow_down_black.svg);}

.button-label {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.8em;
  overflow: hidden;
  color: var(--color_black);
  font-family: var(--font-zen_kaku_gothic);
  font-weight: var(--font-weight-Bold);
  font-size: 1.7rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}

.button--black .button-label { color: #fff; }

.button-label > span {
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1.25);
}

@media (hover: hover) {
.button:hover{
  color: var(--color_black);
  text-decoration: none;
  opacity: 1;
}

.button--black:hover{ color: #fff;}
.button:hover .button-label > span { transform: translateY(-100%);}
}

.button--black:visited { color: #fff;}


@media screen and (max-width: 640px) {
.color-consult-lp .kv-title-block { gap: 2.4rem;}

.main-visual { aspect-ratio: 446 / 641;}

.main-visual > .kv-card {
  --card-radius: 16cqw;
  --text-inset: 3cqw;
  --text-size: 3.2cqw;

  top: 9.5%;
  left: 6.3%;
  width: 87.4%;
  height: 82.2%;
}

.main-visual .kv-title {
  top: 8.5%;
  left: 8.5%;
  font-size: 8.1cqw;
  letter-spacing: -0.02em;
}

.main-visual > .illust--kv-back {
  --illust-width: 24%;
  --illust-top: 1.5%;
  --illust-left: -4%;
}

.main-visual > .illust--kv-bubble01 {
  --illust-width: 64%;
  --illust-top: 5.6%;
  --illust-left: 18%;
}

.main-visual > .illust--kv-bubble02 {
  --illust-width: 31%;
  --illust-top: 35%;
  --illust-left: 51%;
}

.main-visual > .illust--kv-woman {
  --illust-width: 73%;
  --illust-top: 42%;
  --illust-left: 0%;
}

.main-visual > .illust--01 {
  --illust-width: 26%;
  --illust-top: 36.5%;
  --illust-right: -2%;
}

.color-consult-lp .kv-title-txt {
  font-size: 1.4rem;
  text-align: left;
}

.button {
  --button-width: 27.9rem;
  --button-height: 6rem;
}

.button-label { font-size: 1.6rem;}
}

@media (prefers-reduced-motion: reduce) {
  .button-label > span { transition: none; }
}

/* slide */

.slide-container {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.slide-wrapper {
  width: 100%;
  min-width: 0;
}

.splide__list { align-items: center;}

.splide__slide {
  margin: 0;
  padding: 0;
}

.splide__slide img {
  display: block;
  width: auto;
  max-width: none;
  height: 3.2rem;
}

/* concept-section */

.concept-section { overflow: visible;}

.concept-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
}

.concept-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 4rem;
  width: calc(100% - 8rem);
  max-width: 78.2rem;
}

.marker-yellow {
  background: linear-gradient(transparent 65%, var(--color_yellow) 65%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.list-title-box {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  margin: 0;
  padding: 6.4rem 10%;
  list-style: none;
}

.list-title-box li {
  display: flex;
  align-items: start;
  gap: 1.6rem;
}

.list-title-box li { flex-wrap: wrap; }

.list-title-box .list-title { flex: 0 0 auto; }

.list-title-box .list-txt { flex: 1 1 12rem; }

.list-title-box .list-title,
.list-title-box .list-title .no-break,
.support-title,
.support-title .no-break,
.slide-txt {
  color: #fff;
  font-family: var(--font-zen_kaku_gothic);
  font-weight: var(--font-weight-Black);
  -webkit-text-stroke: 0.2rem var(--color_black);
  paint-order: stroke fill;
}

.list-title-box .list-title {
  font-size: 4.7rem;
  line-height: 1;
  white-space: nowrap;
}

.list-title-box .list-title span { letter-spacing: 0.35em;}

.list-title-box .list-title--small {
  font-size: 3.6rem;
  letter-spacing: 0.04em;
}

.list-title-box .list-txt {
  min-width: 0;
  font-size: 1.4rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.support-box { padding: 6.4rem 10%;}

.support-title,
.support-title .no-break {
  font-size: 4.6rem;
  line-height: 1.4;
  letter-spacing: -0.04em;
}

.support-list {
  margin-top: 2.4rem;
  list-style: none;
}

.support-list li {
  position: relative;
  padding: 1.2rem 0 1.2rem 1.6rem;
  font-size: 2rem;
  font-weight: var(--font-weight-Bold);
  line-height: 1.8;
}

.support-list li + li {
  border-top: 0.1rem dotted #fff;
}

.support-list li::before {
  content: "";
  position: absolute;
  top: 2.6rem;
  left: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #fff;
}

/* text-slide */

.slide-wrapper--text .splide__slide { width: max-content;}

.slide-txt {
  display: block;
  padding-block: 0.1em;
  font-size: clamp(8rem, 11vw, 12rem);
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
}

.concept-wrapper.illust-container { z-index: 2;}

.concept-wrapper--support.illust-container { z-index: 1;}

.illust--02 {
  --illust-width: 32%;
  --illust-right: -3%;
  --illust-bottom: -44rem;
}

.illust--03 {
  --illust-width: 33%;
  --illust-left: -7%;
  --illust-bottom: -25rem;
}

@media screen and (max-width: 910px) {
.concept-wrapper {
  grid-template-columns: minmax(0, 1fr);
  max-width: 37.1rem;
}

.illust--02 {
  --illust-width: 40%;
  --illust-right: -3%;
  --illust-bottom: -24rem;
}

.illust--03 {
  --illust-width: 50%;
  --illust-left: -30%;
  --illust-bottom: -23rem;
}
}

@media screen and (max-width: 640px) {
.concept-container { gap: 4rem;}

.concept-wrapper {
  gap: 2.4rem;
  width: calc(100% - 4rem);
}

.txt { font-size: 1.4rem;}

.list-title-box .list-title,
.list-title-box .list-title span { font-size: 3.7rem;}

.list-title-box .list-title--small { font-size: 3rem;}

.support-list li { font-size: 1.6rem;}

.support-title,
.support-title .no-break {
  font-size: 3rem;
  letter-spacing: -0.02em;
}

.support-list li::before { top: 2.5rem;}

.illust--02 {
  --illust-width: 42%;
  --illust-right: -13%;
  --illust-bottom: -22rem;
}

.illust--03 {
  --illust-width: 50%;
  --illust-right: -4%;
  --illust-bottom: -12rem;
  --illust-left: auto;
}
}

/* brand-section */
.brand-container,
.consult-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4rem;
  margin: 0 auto;
  width: calc(100% - 8rem);
  max-width: 78.2rem;
}

.brand-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-inner {
  --card-bg: #fff;
  min-width: 0;
  padding-block: 4rem;
  display: flex;
  flex-direction: column;
}

.brand-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: flex-start;
  gap: 1.6rem;
  width: 80%;
  min-width: 0;
  margin: 0 auto;
}

.brand-box > hgroup {
  width: 100%;
  min-width: 0;
}

.brand-inner img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.brand-inner .brand-logo { max-height: 4.75rem;}

.brand-inner .brand-img { max-width: min(100%, 29.1rem);}


.brand-name {
  font-family: var(--font-zen_kaku_gothic);
  font-weight: var(--font-weight-Black);
  font-size: 3.6rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
  overflow-wrap: anywhere;
}

.brand-txt,
.menu-name,
.menu-price {
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.brand-menu-box {
  background-color: #f9f9f9;
  padding: 0.8rem 1.6rem;
  border-radius: 1.2rem;
  width: 100%;
  box-sizing: border-box;
}

.menu-title,
.benefits-title {
  font-family: var(--font-zen_kaku_gothic);
  font-weight: var(--font-weight-Bold);
  font-size: 2rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.menu-title { margin-bottom: 0.8rem;}

.menu-price {
  font-family: var(--font-zen_kaku_gothic);
  font-weight: var(--font-weight-Bold);
  color: #FA853C;
}

.brand-benefits { width: 100%;}

.benefits-tag-list {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}

.brand-inner .benefits-tag {
  min-width: 0;
  max-width: 100%;
}

.benefits-tag img {
  display: block;
  width: auto;
  height: 3.2rem;
}

.brand-box .button-box {
  margin-top: auto;
  padding-top: 0.8rem;
  flex-direction: column;
}

.brand-box .button-box .button {
  --button-width: 100%;
  --button-height: 6rem;
  --button-text-top: 22%;
}

.caution {
  font-size: 1.2rem;
  line-height: 1.5;
}

@media screen and (max-width: 910px) {
.brand-wrapper {
  grid-template-columns: minmax(0, 1fr);
  margin: 0 auto;
  max-width: 37.1rem;
}
}

@media screen and (max-width: 640px) {
.brand-container,
.consult-container {
  width: calc(100% - 4.8rem);
  max-width: 32.7rem;
  gap: 2.4rem;
}

.brand-wrapper {
  grid-template-columns: minmax(0, 1fr);
  gap: 2.4rem;
}

.brand-box { width: 85%;}
.brand-inner .brand-logo { max-height: 3.2rem;}
.brand-name { font-size: 3rem;}
.brand-txt, .menu-name, .menu-price { font-size: 1.4rem;}
.menu-title, .benefits-title { font-size: 1.6rem;}

.brand-box .button-box .button { --button-text-top: 25%;}

}

/* consult-section */

.consult-section { padding-bottom: 4rem;}

.consult-container { margin-bottom: 8rem;}

.consult-container > .section-title-inner {
  position: relative;
  z-index: 3;
}

.consult-container .cc-card { min-height: auto;}

.consult-container .support-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
}

.consult-container .support-box img {
  width: auto;
  max-width: 6rem;
  margin: 0 auto;
}

.consult-container .support-txt {
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.consult-container.illust-container { z-index: 3;}

.consult-container > .illust { z-index: 2;}

.illust--04 {
  --illust-width: 25%;
  --illust-top: -20rem;
  --illust-right: 4%;
}

.illust--05 {
  --illust-width: 30%;
  --illust-bottom: -30rem;
  --illust-right: 0;
}

#SAMPLEFORM.contact-section { padding-bottom: 4rem;}

.gmap-wrap iframe {
  display: block;
  width: 100%;
  border: 0;
}

@media screen and (max-width: 640px) {

.consult-container { margin-bottom: 4rem; }

.consult-container .support-txt { font-size: 1.4rem;}

.consult-container .support-box img { max-width: 4rem;}

.illust--04 {
  --illust-width: 38%;
  --illust-top: -10rem;
  --illust-right: -8%;
}

.illust--05 {
  --illust-width: 45%;
  --illust-bottom: -19rem;
  --illust-right: -4%;
}
}