:root {  --color-text: #222222;
  --color-muted: #8b877d;
  --color-pink: #ff7d87;
  --color-yellow: #fff19b;
  --color-cream: #fff7c7;
  --color-green: #8bc8b4;
  --color-blue: #caedf3;
  --radius-deep: clamp(240px, 18vw, 300px);
  --radius-deep-sp: 128px;
  --radius-image: 32px;
  --radius-image-sp: 22px;
  --font-sans: "Zen Kaku Gothic Antique", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  --font-montserrat: "Montserrat", sans-serif;
}
* {  box-sizing: border-box;
}
html {  scroll-behavior: smooth;
}
body {  margin: 0;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: .15em;
  background: #fff;
}
.motion-ready .motion-target {
  transition:
    opacity .78s ease,
    transform .78s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--motion-delay, 0s);
}
.motion-ready .motion-target--fv {
  transition: none;
}
.motion-ready .motion-target:not(.is-motion-visible) {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
.motion-ready .motion-target--fv:not(.is-motion-visible) {
  transform: translate3d(0, 10px, 0);
}
.motion-ready .motion-target--fv.is-motion-visible {
  animation: fv-motion-in .82s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--motion-delay, 0s);
}
@keyframes fv-motion-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .motion-target {
    transition: none;
    transform: none;
  }
  .motion-ready .motion-target--fv.is-motion-visible {
    animation: none;
  }
  .motion-ready .motion-target:not(.is-motion-visible) {
    opacity: 1;
    transform: none;
  }
}
img {  display: block;
  max-width: 100%;
  height: auto;
}
.sp-only {  display: none;
}
a {  color: inherit;
  text-decoration: none;
}
.site-header {  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px);
  transition: transform .28s ease;
}
.site-header.is-hidden {  transform: translateY(-100%);
}
.site-header__inner {  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(100%, 1400px);
  margin: 0 auto;
  padding: 18px 40px;
}
.site-header__logo {  color: var(--color-text);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.4;
  white-space: nowrap;
}
.site-header__logo span {  display: inline;
}
.site-header__tagline {  margin: 0 0 0 auto;
  padding: 5px 14px;
  border: 1px solid #222222;
  border-radius: 5px;
  color: var(--color-text);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}
.site-header__tagline span + span::before {  content: " ";
}
.site-nav {  position: absolute;
  top: calc(100% - 2px);
  right: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 340px;
  padding: 32px 30px;
  border: 1px solid rgba(34, 34, 34, .08);
  border-radius: 24px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .08), 0 12px 28px rgba(0, 0, 0, .05);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: opacity .22s ease, transform .22s ease;
}
.site-nav::before {  content: "";
  position: absolute;
  top: -7px;
  right: 48px;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgba(34, 34, 34, .08);
  border-left: 1px solid rgba(34, 34, 34, .08);
  background: rgba(255, 255, 255, .94);
  transform: rotate(45deg);
}
.site-nav a {  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 7px 16px;
  border-radius: 12px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.site-nav a::before {  content: "";
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--color-pink);
  opacity: .32;
  transition: opacity .18s ease, transform .18s ease;
}
.site-nav a:hover {  background: rgba(255, 125, 135, .08);
  color: var(--color-pink);
  transform: translateX(2px);
}
.site-nav a:hover::before {  opacity: 1;
  transform: scale(1.2);
}
.site-nav.is-open {  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.menu-button {  display: block;
  position: relative;
  width: 52px;
  height: 34px;
  padding: 8px 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-button:focus,
.menu-button:focus-visible {  outline: none;
  box-shadow: none;
}
.menu-button span {  position: absolute;
  left: 5px;
  display: block;
  width: 42px;
  height: 2px;
  margin: 0;
  background: #4b4a44;
  transition: transform .22s ease, top .22s ease, background .18s ease;
}
.menu-button span:nth-child(1) {  top: 11px;
}
.menu-button span:nth-child(2) {  top: 21px;
}
.menu-button[aria-expanded="true"] span {  background: #222222;
}
.menu-button[aria-expanded="true"] span:nth-child(1) {  top: 16px;
  transform: rotate(32deg);
}
.menu-button[aria-expanded="true"] span:nth-child(2) {  top: 16px;
  transform: rotate(-32deg);
}
.section {  position: relative;
  padding: 100px 0;
}
.section__inner {  position: relative;
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 0 40px;
}
.section h2,
.section h3 {  line-height: 1.8;
}
.section h2 {  margin: 0 0 24px;
  color: var(--color-pink);
  font-size: 24px;
  font-weight: 400;
}
.section p {  margin: 0 0 18px;
}
.vertical-number {  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  margin: 0 auto 40px;
  color: #77736c;
  font-size: 13px;
  line-height: 1;
  text-align: center;
}
.vertical-number__index {  display: block;
  line-height: 1;
  transform: translateX(1.5px);
}
.vertical-number__slash {  position: relative;
  display: block;
  width: 14px;
  height: 18px;
  margin: 5px 0 7px;
  font-size: 0;
}
.vertical-number__slash::before {  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 18px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(35deg);
}
.vertical-number__label {  display: block;
  line-height: 1;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.text-link {  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
}
.text-link::after {  content: "";
  width: 58px;
  height: 1px;
  background: currentColor;
}
.contact {  position: relative;
  padding-top: 104px;
}
.contact__inner {  position: relative;
  z-index: 1;
  max-width: 640px;
  text-align: center;
}
.contact__illust {  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.contact__illust--phone {  top: 148px;
  left: calc(50% - 342px);
  width: 122px;
}
.contact__inner h2 {  margin: 0 0 24px;
  color: var(--color-text);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .24em;
}
.contact__inner > p {  margin: 0 auto;
  font-size: 14px;
  line-height: 2.25;
  letter-spacing: .14em;
  text-align: left;
  transform: translateX(88px);
}
.contact-list {  display: grid;
  gap: 0;
  margin-top: 54px;
}
.contact-card {  padding: 58px 24px 56px;
  border-top: 1px dashed #a7a7a7;
}
.contact-card:first-child {  padding-top: 0;
  border-top: 0;
}
.contact-card h3 {  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--color-pink);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .22em;
}
.contact-card h3::before {  content: "＼";
}
.contact-card h3::after {  content: "／";
}
.contact-card h3::before,
.contact-card h3::after {  color: #f3bdc9;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.contact-card__tel {  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .255em;
}
.contact-card__tel-heading img {  width: 18px;
}
.contact-card__tel-text {  display: grid;
  gap: 8px;
}
.contact-card__tel-heading {  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.contact-card__tel-text > span:first-child {  color: var(--color-text);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: .255em;
}
.contact-card__tel-text > span:last-child {  font-family: var(--font-montserrat);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .32em;
  white-space: nowrap;
}
.contact-card__tel-label {  color: var(--color-text);
  font-size: 14px;
}
.contact-card__tel-number {  color: var(--color-pink);
  font-size: 34px;
}
.contact-card > p {  margin: 14px 0 30px;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .18em;
}
.contact-card__litalico,
.contact-card__buttons a {  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 8px 42px 8px 20px;
  border: 1px solid #a7a7a7;
  border-radius: 999px;
  background: #fff;
  font-size: 14.3px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .18em;
  position: relative;
  white-space: nowrap;
  transition: color .28s ease, border-color .28s ease, letter-spacing .28s ease, transform .28s ease;
}
.contact-card__litalico::after,
.contact-card__buttons a::after {  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  width: 24px;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
  transition: width .28s ease, transform .28s ease;
}
.contact-card__litalico::before,
.contact-card__buttons a::before {  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: right center;
  transition: transform .28s ease;
}
.contact-card__litalico:hover,
.contact-card__buttons a:hover {  border-color: var(--color-pink);
  color: var(--color-pink);
  letter-spacing: .12em;
  transform: translateX(4px);
}
.contact-card__litalico:hover::after,
.contact-card__buttons a:hover::after {  width: 30px;
  transform: translate(6px, -50%);
}
.contact-card__litalico:hover::before,
.contact-card__buttons a:hover::before {  transform: translate(6px, -50%) rotate(45deg);
}
.contact-card__litalico {  width: min(100%, 500px);
  margin: 18px auto 0;
}
.contact-card__litalico img {  width: 101px;
}
.contact-card__buttons {  display: flex;
  justify-content: center;
  gap: 12px;
}
.contact-card__buttons a {  width: min(50%, 244px);
}
.contact-card__buttons img {  width: 20px;
  height: 20px;
  object-fit: contain;
}
@media (min-width: 1181px) {.contact__inner {    max-width: 780px;
}
.contact__inner h2 {    font-size: 30px;
}
.contact__inner > p {    max-width: 640px;
    transform: translateX(150px);
}
.contact-card h3 {    font-size: 22px;
}
.contact-card h3::before,
.contact-card h3::after {    font-size: 23px;
}
.contact-card__tel-text > span:first-child {    font-size: 17px;
}
.contact-card__tel-label {    font-size: 15px;
}
.contact-card__tel-number {    font-size: 42px;
    letter-spacing: .24em;
}
.contact-card__tel {    width: auto;
}
.contact-card__litalico {    width: min(100%, 610px);
}
.contact-card__buttons a {    width: min(50%, 300px);
    min-height: 48px;
}
}

@media (max-width: 1180px) {.contact-card__tel {    width: min(100%, 520px);
    min-height: 62px;
    padding: 8px 22px;
    border: 1px solid var(--color-pink);
    border-radius: 999px;
    background: #fff2f3;
}
}

.site-footer {  overflow: hidden;
  margin-top: 42px;
  padding-right: 0;
}
.site-footer__inner {  position: relative;
  width: min(calc(100vw - 54px), 1180px);
  margin: 0 auto 0 0;
  padding: 76px 96px 62px clamp(120px, 14vw, 190px);
  border-radius: 0 230px 42px 0;
  background: var(--color-cream);
}
.footer-nav {  display: grid;
  grid-template-columns: repeat(2, minmax(142px, 1fr));
  gap: 18px 86px;
  width: min(100%, 520px);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.9;
}
.footer-nav a {  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 4px 14px;
  border-radius: 12px;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.footer-nav a::before {  content: "";
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--color-pink);
  opacity: .32;
  transition: opacity .18s ease, transform .18s ease;
}
.footer-nav a:hover {  background: rgba(255, 125, 135, .08);
  color: var(--color-pink);
  transform: translateX(2px);
}
.footer-nav a:hover::before {  opacity: 1;
  transform: scale(1.2);
}
.footer-copy {  display: block;
  margin-top: 42px;
  color: rgba(34, 34, 34, .48);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-align: left;
}
.site-footer__official-link {  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 24px;
  padding: 6px 16px;
  border: 1px solid rgba(34, 34, 34, .18);
  border-radius: 999px;
  background: #ffffff;
  opacity: 1;
  color: rgba(34, 34, 34, .62);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.site-footer__official-link:hover {  background: rgba(255, 255, 255, .78);
  color: var(--color-text);
  transform: translateY(-2px);
}
.site-footer__illust {  position: absolute;
  opacity: .85;
  pointer-events: none;
}
.site-footer__illust--right {  right: 44px;
  top: 14px;
  width: 102px;
}
.scroll-top {  position: fixed;
  right: clamp(22px, 4vw, 64px);
  bottom: 70px;
  z-index: 40;
  display: none;
  width: 54px;
  height: 128px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease, color .2s ease;
}
.scroll-top__line {  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 66px;
  background: currentColor;
  transform: translateX(-50%);
}
.scroll-top__line::before {  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 1px;
  background: currentColor;
  transform: rotate(-43deg);
  transform-origin: right center;
}
.scroll-top__text {  position: absolute;
  left: 50%;
  right: auto;
  bottom: 0;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .22em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateX(-50%) rotate(180deg);
  transform-origin: center center;
  writing-mode: vertical-rl;
}
.scroll-top.is-visible {  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top:hover {  color: var(--color-pink);
  transform: translateY(-4px);
}
.page-placeholder {  width: min(100%, 900px);
  min-height: 48vh;
  margin: 0 auto;
  padding: 120px 40px;
  text-align: center;
}
.page-placeholder h1 {  color: var(--color-pink);
}
@media (min-width: 768px) and (max-width: 1180px) {.contact__illust--phone {    top: 140px;
    left: calc(50% - 340px);
    width: 104px;
}
.contact__inner > p {    transform: translateX(82px);
}
.site-footer__inner {    width: calc(100vw - clamp(88px, 11vw, 126px));
}
.scroll-top {    right: clamp(18px, 3vw, 34px);
    display: block;
}
}

@media (min-width: 1181px) {.scroll-top {    display: block;
}
}

@media (min-width: 768px) and (max-width: 900px) {.section {    padding: 82px 0;
}
.contact__illust--phone {    left: calc(50% - 350px);
}
.contact__inner > p {    transform: translateX(92px);
}
}

@media (max-width: 767px) {.site-header__inner {    padding: 14px 20px;
}
.site-header__logo {    max-width: 168px;
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
}
.site-header__logo span {    display: block;
}
.site-header__tagline {    margin-left: auto;
    padding: 3px 8px;
    font-size: 10px;
}
.site-nav {    position: absolute;
    top: calc(100% + 4px);
    right: 18px;
    left: 18px;
    gap: 2px;
    width: auto;
    min-width: 0;
    padding: 18px 22px 22px;
    border: 1px solid rgba(34, 34, 34, .08);
    border-radius: 22px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .08), 0 10px 22px rgba(0, 0, 0, .05);
    font-size: 14px;
    transform-origin: top right;
}
.site-nav::before {    content: "";
    position: absolute;
    top: -7px;
    right: 42px;
    width: 14px;
    height: 14px;
    border-top: 1px solid rgba(34, 34, 34, .08);
    border-left: 1px solid rgba(34, 34, 34, .08);
    background: rgba(255, 255, 255, .94);
    transform: rotate(45deg);
}
.site-nav.is-open {    display: grid;
}
.menu-button {    display: block;
}
.section {    padding: 68px 0;
}
.section__inner {    padding: 0 24px;
}
.section h2 {    font-size: 20px;
}
.contact-card__tel {    font-size: 20px;
}
.contact-card {    padding: 46px 24px 44px;
}
.site-footer {    margin-top: 24px;
    padding-right: 18px;
}
.site-footer__inner {    width: 100%;
    padding: 58px 28px 42px;
    border-radius: 0 142px 32px 0;
}
.footer-nav {    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    width: 100%;
    font-size: 11.5px;
    line-height: 2.2;
}
.footer-nav a {    min-height: 38px;
    padding: 3px 6px;
}
.footer-nav a::before {    width: 5px;
    height: 5px;
    margin-right: 7px;
}
.footer-copy {    margin-top: 34px;
    text-align: center;
}
.site-footer__official-link {    display: flex;
    width: fit-content;
    min-height: 34px;
    margin: 20px auto 0;
    padding: 5px 14px;
    font-size: 10.5px;
}
.site-footer__illust--right {    right: 26px;
    top: 12px;
    width: 76px;
}
}

@media (max-width: 560px) {body {    font-size: 13px;
    line-height: 2;
}
.site-header__tagline {    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    min-width: 104px;
    padding: 3px 10px;
    letter-spacing: .06em;
    line-height: 1.35;
    white-space: normal;
}
.site-header__tagline span {    white-space: nowrap;
}
.site-header__tagline span + span::before {    content: "";
}
.section {    padding: 58px 0;
}
.vertical-number {    margin-bottom: 28px;
    font-size: 12px;
}
.sp-only {    display: inline;
}
.contact {    padding-top: 78px;
}
.contact__inner {    max-width: 390px;
}
.contact__illust--phone {    top: 130px;
    left: 18px;
    width: 66px;
}
.contact__inner h2 {    margin-bottom: 22px;
    font-size: 18px;
    letter-spacing: .22em;
}
.contact__inner > p {    width: min(calc(100% - 108px), 254px);
    margin-left: 84px;
    margin-right: 0;
    font-size: 12px;
    line-height: 2.25;
    letter-spacing: .12em;
    text-align: left;
    transform: none;
}
.contact-list {    margin-top: 44px;
}
.contact-card {    padding: 42px 0 39px;
}
.contact-card h3 {    gap: 8px;
    margin-bottom: 15px;
    font-size: 15px;
    letter-spacing: .18em;
}
.contact-card__tel {    min-height: 58px;
    padding-inline: 14px;
}
.contact-card__tel-text {    gap: 4px;
}
.contact-card__tel-heading img {    width: 18px;
}
.contact-card > p {    margin: 7px 0 20px;
    font-size: 11px;
    letter-spacing: .08em;
}
.contact-card__litalico,
.contact-card__buttons a {    height: 44px;
    padding: 7px 34px 7px 14px;
    font-size: 11px;
    letter-spacing: .06em;
}
.contact-card__litalico::after,
.contact-card__buttons a::after {    right: 13px;
    width: 20px;
}
.contact-card__litalico::before,
.contact-card__buttons a::before {    right: 13px;
    width: 8px;
}
.contact-card__litalico {    margin-top: 10px;
    width: 100%;
}
.contact-card__litalico img {    width: 86px;
}
.contact-card__tel-text > span:first-child {    font-size: 12px;
}
.contact-card__tel-label {    font-size: 11px;
    letter-spacing: .12em;
}
.contact-card__tel-number {    font-size: 24px;
    letter-spacing: .14em;
}
.contact-card__buttons {    flex-direction: row;
    gap: 10px;
}
.contact-card__buttons a {    width: calc((100% - 10px) / 2);
    font-size: 10px;
    gap: 5px;
    padding: 7px 27px 7px 10px;
    letter-spacing: .03em;
}
.contact-card__buttons img {    width: 20px;
    height: 20px;
}
.contact-card__buttons a::after {    right: 10px;
    width: 18px;
}
.contact-card__buttons a::before {    right: 10px;
    width: 7px;
}
.footer-nav {    gap: 10px 10px;
    font-size: 11px;
}
}