@charset "UTF-8";

:root {
  /* color */
  --color-text: #4e3a2e;
  --color-sub-text: #6e5a4d;
  --color-title: #5c4635;
  --color-bg: #f9f6f0;
  --color-white: #ffffff;
  --color-line-beige: #c8b59d;
  --color-mimosa: #f3e7a0;
  --color-mimosa-30: rgba(243, 231, 160, 0.3);
  --color-mimosa-20: rgba(243, 231, 160, 0.2);
  --color-mimosa-10: rgba(243, 231, 160, 0.1);
  --color-olive: #d3dbcf;
  --color-olive-30: rgba(211, 219, 207, 0.3);
  --color-olive-20: rgba(211, 219, 207, 0.2);
  --color-sub-olive: #839c74;
}

:root {
  /* コンテンツ幅 */
  --content-width-main: 1024px;
  --content-width-md: 672px; /* FAQ　タブレット */
  --content-width-sm: 496px; /* contact */
  --content-width-sp: 407px; /* sp */
}

:root {
  /* z-index */
  --z-back: -1;
  --z-default: 1;
  --z-kv-top: 50;
  --z-header: 100;
  --z-menu: 150;
  --z-modal: 200;
}

:root {
  /* font-family */
  --font-FV: "Shippori Mincho", serif;
  --font-main-mincho: "Zen Old Mincho", serif;
  --font-gothic: "Zen Kaku Gothic New", sans-serif;
}
:root {
  --box-shadow-card: 0 4px 12px 0 rgba(117, 101, 85, 0.18);
  --box-shadow-faq: 0 4px 18px rgba(117, 101, 85, 0.08);
  --box-shadow-shell: 0 0 20px rgba(117, 101, 85, 0.08);
}
:root {
  /* section space */
  --section-space: 64px;
  --section-space-lg: 80px;
  --section-space-sm: 48px;
}

html {
  scrollbar-gutter: stable both-edges;
}
body {
  color: var(--color-text);
  font-family: var(--font-main-mincho);
  font-size: 16px;
  overflow-x: hidden;
}
body.is-active {
  overflow: hidden;
}

/* ---------- utility ---------- */

@media (width < 768px) {
  .u_dn-sm {
    display: none;
  }

  .u_br-lg {
    display: none;
  }
}

@media (width >= 768px) {
  .u_dn-lg {
    display: none;
  }

  .u_br-lg {
    display: inline;
  }
}

/* ---------- layout ---------- */
.l_container-16,
.l_container-32,
.l_container-48 {
  width: 100%;
  max-width: 768px;
  margin-inline: auto;
}

.l_container-16 {
  padding-inline: 16px;
}
.l_container-32 {
  padding-inline: 32px;
}
.l_shell {
  width: 100%;
}
@media (width >= 512px) {
  .l_shell {
    max-width: 512px;
    margin-inline: auto;
    box-shadow: var(--box-shadow-shell);
  }
}
@media (width >= 1080px) {
  .l_shell {
    max-width: 560px;
  }
}
.l_container-48 {
  padding-inline: 48px;
}

.l_section {
  padding-top: var(--section-space);
}
.l_section-lg {
  padding-top: var(--section-space-lg);
}
.l_section-sm {
  padding-top: var(--section-space-sm);
}
.l_section-bottom {
  padding-bottom: var(--section-space-sm);
}
.l_header-nav {
  position: fixed;
  top: 0%;
  right: -120%; /* 画面の外 */
  width: 100%;
  height: 100vh;
  z-index: var(--z-menu);
  transition: right 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.l_header-nav.is-active {
  right: 0;
}
.l_header-nav_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.l_header-nav_item {
  font-weight: bold;
  height: 100%;
}
.l_header-nav_link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
.l_header-nav_link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--color-line-beige);
  transition: width 0.3s ease;
}
.l_header-nav_link:hover::after,
.l_header-nav_link:focus-visible::after {
  width: 100%;
}
.l_header-nav_close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: var(--z-menu);
}
.l_header-nav_close .m_hamburger {
  width: 24px;
  height: 22px;
}
.l_header-nav_close .m_hamburger-bar {
  height: 1.5px;
  background: var(--color-line-beige);
}
.l_header-nav_logo,
.l_header-nav_note,
.l_header-nav_btn-wrapper {
  display: none;
}
@media (width < 1080px) {
  .l_header-nav {
    height: 100svh;
    overflow-y: auto;
    align-items: normal;
    padding: 16px;
  }
  .l_header-nav_inner {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    padding: 16px;
    background: var(--color-bg);
    border-radius: 16px;
    box-shadow: var(--box-shadow-card);
  }
  .l_header-nav_logo {
    display: flex;
    justify-content: center;
  }
  .l_header-nav_logo-img {
    width: 100px;
    height: auto;
  }
  .l_header-nav_list {
    margin-top: 40px;
    gap: 40px;
  }
  .l_header-nav_item {
    font-weight: 500;
  }
  .l_header-nav_link {
    display: inline-block;
    height: auto;
    font-family: var(--font-main-mincho);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-title);
  }
  .l_header-nav_note {
    display: block;
    margin-top: 56px;
    font-size: 14px;
    color: var(--color-sub-text);
    text-align: center;
  }
  .l_header-nav_btn-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }
}
@media (width >= 512px) and (width < 1080px) {
  .l_header-nav {
    padding: 32px;
  }
  .l_header-nav_inner {
    padding: 32px;
  }
}
@media (width >= 1080px) {
  .l_header-nav_close {
    display: none;
  }
  .l_header-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    display: flex;
    flex-direction: column;
    width: calc((100vw - 560px) / 2);
    height: 100vh;
    overflow-y: auto;
    padding: clamp(16px, 4vh, 40px) 32px;
    background: var(--color-white);
  }
  .l_header-nav::after {
    content: "";
    position: absolute;
    top: 0;
    right: -24px;
    width: 24px;
    height: 100%;
    box-shadow: var(--box-shadow-shell);
    pointer-events: none;
  }
  .l_header-nav_inner {
    position: static;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .l_header-nav_logo {
    display: flex;
    justify-content: center;
    transform: translateY(-32px);
  }
  .l_header-nav_logo-img {
    width: 180px;
  }
  .l_header-nav_list {
    width: max-content;
    margin-inline: auto;
    margin-top: clamp(28px, 5vh, 48px);
    padding-left: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, 2.5vh, 24px);
    color: var(--color-title);
  }
  .l_header-nav_cta {
    margin: clamp(32px, 6vh, 64px) auto 0;
    padding-top: clamp(12px, 2vh, 24px);
    width: 100%;
    max-width: 280px;
    margin-inline: auto;
    padding-inline: 8px;
    background: transparent;
    border-top: 1px solid
      color-mix(in srgb, var(--color-line-beige) 50%, transparent);
    border-radius: 0;
    box-shadow: none;
  }
  .l_header-nav_note {
    display: block;
    margin-top: 0;
    font-size: 12px;
    text-align: center;
  }
  .l_header-nav_btn-wrapper {
    display: block;
    margin-top: clamp(8px, 1.5vh, 12px);
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  .l_header-nav_btn-wrapper .m_btn-cta {
    box-shadow: var(--box-shadow-faq);
  }
}
/* PC photo area */
.l_pc-photo {
  display: none;
}
@media (width >= 1080px) {
  .l_pc-photo {
    display: block;
    position: fixed;
    top: 0;
    left: calc(50% + 280px);
    right: 0;
    width: auto;
    height: 100vh;
  }
}
.l_pc-photo_visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.l_pc-photo_visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(242, 241, 237, 0.2);
  pointer-events: none;
}
@media (width >= 1080px) {
  body:has(.p_service) .l_pc-photo_visual::after {
    background: rgba(242, 241, 237, 0.24);
  }
}
.l_pc-photo_img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  filter: saturate(0.85) brightness(1.05);
}
/* footer */
.l_footer {
  padding: var(--section-space) 0 40px;
  background: linear-gradient(
    to bottom,
    var(--color-olive-30) 0%,
    rgba(255, 255, 255, 0.9) 25%,
    rgba(255, 255, 255, 0.95) 70%,
    var(--color-olive-30) 100%
  );
}
.l_footer_inner {
  text-align: center;
}
.l_footer_brand_icon {
  width: 24px;
  height: 24px;
  margin-inline: auto;
}
.l_footer_brand_name {
  margin-top: 8px;
  font-family: var(--font-FV);
  font-size: 20px;
  font-weight: bold;
  color: var(--color-title);
}
.l_footer_nav {
  margin-top: 40px;
}
.l_footer_nav_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.l_footer_nav_link {
  position: relative;
  display: inline-block;
  font-size: 15px;
  color: var(--color-text);
}
.l_footer_nav_link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--color-line-beige);
  transition: width 0.3s ease;
}
.l_footer_nav_link:hover::after,
.l_footer_nav_link:focus-visible::after {
  width: 100%;
}
.l_footer_bottom-list {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  gap: 24px;
}
.l_footer_bottom-link {
  position: relative;
  font-size: 12px;
  color: var(--color-sub-text);
}
.l_footer_bottom-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--color-line-beige);
  transition: width 0.3s ease;
}
.l_footer_bottom-link:hover::after,
.l_footer_bottom-link:focus-visible::after {
  width: 100%;
}
.l_footer_copyright {
  margin-top: 24px;
  font-size: 12px;
  color: var(--color-sub-text);
}
.l_footer_credit {
  margin-top: 8px;
  font-size: 11px;
  color: var(--color-sub-text);
}
/* fixed nav */
.l_fixed-nav {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: var(--z-header);
  display: flex;
  width: 100%;
  height: 60px;
  background: var(--color-bg);
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}
@media (width >= 512px) {
  .l_fixed-nav {
    left: 50%;
    width: 100%;
    max-width: 512px;
    transform: translateX(-50%);
  }
}
@media (width >= 1080px) {
  .l_fixed-nav {
    display: none;
  }
}
.l_fixed-nav.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body:has(.l_header-nav.is-active) .l_fixed-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.l_fixed-nav_item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-top: 1px solid var(--color-line-beige);
  border-bottom: 1px solid var(--color-line-beige);
  border-right: 1px solid var(--color-line-beige);
}
.l_fixed-nav_item:last-child {
  border-right: none;
}
.l_fixed-nav_icon {
  width: 24px;
  height: 24px;
}
.l_fixed-nav_label {
  font-family: var(--font-gothic);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
}
.l_fixed-nav_menu-btn {
  background: transparent;
  cursor: pointer;
}
.l_fixed-nav_item:last-child {
  border-right: none;
}
.l_fixed-nav_menu-icon {
  display: inline-block;
}
/* ---------- module ---------- */
/* hamburger */
.m_hamburger {
  position: relative;
  width: 24px;
  height: 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: var(--z-menu);
}

.m_hamburger-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-title);
  border-radius: 100vh;
  transition: all 0.3s ease;
}

.m_hamburger-bar:nth-child(1) {
  top: 0;
}

.m_hamburger-bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.m_hamburger-bar:nth-child(3) {
  bottom: 0;
}

.m_hamburger.is-active .m_hamburger-bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.m_hamburger.is-active .m_hamburger-bar:nth-child(2) {
  opacity: 0;
}

.m_hamburger.is-active .m_hamburger-bar:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

@media (width >= 1080px) {
  .m_hamburger {
    display: none;
  }
}
/* title */
.m_section_title-en {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color);
  text-align: center;
}
.m_section_title-jp {
  font-size: 14px;
  font-weight: bold;
  margin-top: 8px;
  text-align: center;
}
.m_section_title-sub {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
}
.m_section_title {
  margin-top: 4px;
  font-size: 20px;
  font-weight: bold;
  color: var(--color-title);
  text-align: center;
}
/* cta */
.m_cta {
  position: relative;
  width: 100%;
  padding: var(--section-space) 0 40px;
  background-image:
    linear-gradient(var(--color-mimosa-10), var(--color-mimosa-10)),
    url("../img/cta-bg-optimized.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}
.m_cta_title {
  font-family: var(--font-FV);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: var(--color-title);
}
.m_cta_text {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: var(--color-text);
  line-height: 1.4;
}
.m_cta_button-wrapper {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}
.m_btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
  padding: 16px 24px;
  border-radius: 999px;
  background: var(--color-white);
  box-shadow: var(--box-shadow-card);
  transition: opacity 0.3s;
}
.m_btn-cta:hover {
  opacity: 1;
  background-color: color-mix(in srgb, var(--color-olive) 30%, white 70%);
  transform: translateY(-2px);
}
.m_btn-cta_icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.m_btn-cta_text {
  font-family: var(--font-gothic);
  font-size: 15px;
  font-weight: bold;
  color: var(--color-title);
}

/* JS */
/* 同一セッション内の再訪問時、<head>の同期スクリプトが付与する html.no-opening で
   ペイント前に即非表示にする（チラつき防止。表示可否の判定自体は main.js 側で行う） */
html.no-opening .m_opening {
  display: none;
}
.m_opening {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-white), var(--color-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}
.m_opening_heading {
  position: relative;
  z-index: var(--z-default);
  display: flex;
  font-family: var(--font-FV);
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: var(--color-title);
}
.m_opening_char {
  display: inline-block;
}
@media (width >= 1080px) {
  .m_opening_heading {
    font-size: 40px;
  }
}
/* オープニング背景の装飾：写真基準(--center)/本文496px基準(--pattern-a/b)とは別に、
   viewport全体（.m_openingそのもの）を基準にした専用配置。位置は top/left の% で指定する。 */
.m_floating-decor_pos--opening {
  top: var(--float-top, 50%);
  left: var(--float-left, 50%);
  transform: translate(-50%, -50%) scaleX(var(--float-flip, 1));
}
/* 「同じ風が画面全体を通っている」動き：全要素が同じ右上方向へ流れ、alternateで戻る。
   方向は共通、移動量(--wind-x/--wind-y)とduration/delayだけを要素ごとに変える。 */
@keyframes m_opening-wind-dot {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(var(--wind-x, 6px), calc(var(--wind-y, 4px) * -1));
  }
}
@keyframes m_opening-wind-blur {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(var(--wind-x, 9px), calc(var(--wind-y, 6px) * -1));
  }
}
@keyframes m_opening-wind-leaf {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(var(--wind-x, 10px), calc(var(--wind-y, 7px) * -1))
      rotate(var(--wind-rotate, 3deg));
  }
}
.m_opening .m_floating-decor_item--mimosa-dot,
.m_opening .m_floating-decor_item--olive-dot {
  animation-name: m_opening-wind-dot;
}
.m_opening .m_floating-decor_item--mimosa-blur,
.m_opening .m_floating-decor_item--olive-blur {
  animation-name: m_opening-wind-blur;
}
.m_opening .m_floating-decor_item--mimosa,
.m_opening .m_floating-decor_item--olive-leaf {
  animation-name: m_opening-wind-leaf;
}
.m_icon-Solive-R-title,
.m_icon-Solive-L-title {
  width: 1.1em;
  height: 1.1em;
  margin-inline: 4px;
  object-fit: contain;
}
.m_arrow {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 14px solid var(--color-olive);
}
/* card */
.m_card {
  width: 100%;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: var(--box-shadow-card);
}
/* message title */
/* section message */
.m_section-message {
  font-family: var(--font-FV);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--color-title);
  text-align: center;
}
/* section heading */
.m_section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.m_section-heading--mimosa {
  position: relative;
  width: fit-content;
  margin-top: 24px;
  margin-inline: auto;
}
.m_section-heading_title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--color-title);
  font-family: var(--font-title);
}
.m_section_title-sub + .m_section-heading {
  margin-top: 4px;
}
.m_section-heading_icon {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
.m_section-heading_icon--olive {
  width: 32px;
  height: 32px;
}
.m_section-heading_icon--mimosa {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 4px;
  width: 48px;
  height: 56px;
}
.m_icon--mimosa {
  width: 48px;
  height: 56px;
}
/* page title */
.m_page-title {
  padding-top: 80px;
}
.m_page-title_sub {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-sub-text);
  text-align: center;
}
.m_page-title_main {
  position: relative;
  width: fit-content;
  margin-inline: auto;
}
.m_page-title_sub + .m_page-title_main {
  margin-top: 8px;
}
.m_page-title_text {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-title);
  text-align: center;
}
.m_page-title_icon {
  display: block;
  object-fit: contain;
}
.m_page-title_icon--mimosa {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 4px;
  width: 48px;
  height: 56px;
}
.m_page-title_lead {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-sub-text);
  text-align: center;
}
/* step badge */
.m_step-badge {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--color-line-beige);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.m_step-badge_label {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: var(--color-sub-olive);
  font-family: var(--font-gothic);
}
.m_step-badge_number {
  font-size: 32px;
  font-weight: bold;
  line-height: 1.1;
  color: var(--color-sub-olive);
  font-family: var(--font-gothic);
  margin-top: -4px;
}
/* time badge */
.m_time-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-family: var(--font-gothic);
  font-size: 18px;
  font-weight: bold;
  color: var(--color-white);
}
.m_time-badge--mimosa {
  background: var(--color-mimosa);
}
.m_time-badge--olive {
  background: var(--color-olive);
}
/* tag */
.m_tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-mimosa-30);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-gothic);
}

/* floating decoration */
/*
  配置は2系統のみ：
  ① 写真周り  … 写真ラッパー(position:relative)の中で .m_floating-decor_pos--center を使用
  ② 写真以外 … セクションのコンテンツインナー(position:relative)の中で
               .m_floating-decor--pattern-a / --pattern-b ＋ --primary / --secondary を使用
  位置決めは .m_floating-decor_pos が担当し、.m_floating-decor_item はアニメーション(transform)専用。
  同じ要素のtransformを位置とアニメーションで奪い合わないための分離。
*/
.m_floating-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.m_floating-decor_pos {
  position: absolute;
  transform: scaleX(var(--float-flip, 1));
}
/* ① 写真周り：写真中央からのオフセット */
.m_floating-decor_pos--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
    translate(var(--float-x, 0px), var(--float-y, 0px))
    scaleX(var(--float-flip, 1));
}
/* 写真周り共通フローティングセット（ミモザ＋オリーブ＋dot/blur3個）
   TOPの人物写真で確定した座標を正とし、プロフィール人物写真・Instagram埋め込みで共通利用する。
   座標・反転・delayはすべてここで一元管理し、HTML側は役割クラスのみを付与する。 */
.m_floating-decor_pos--photo-mimosa {
  --float-x: -160px;
  --float-y: -98px;
  --float-flip: -1;
}
.m_floating-decor_pos--photo-leaf {
  --float-x: 160px;
  --float-y: 95px;
  --float-flip: -1;
}
.m_floating-decor_pos--photo-dot {
  --float-x: 188px;
  --float-y: -58px;
}
.m_floating-decor_pos--photo-blur-a {
  --float-x: -142px;
  --float-y: 15px;
}
.m_floating-decor_pos--photo-blur-b {
  --float-x: -185px;
  --float-y: 162px;
}
.m_floating-decor_pos--photo-leaf .m_floating-decor_item {
  animation-delay: -6s;
}
.m_floating-decor_pos--photo-dot .m_floating-decor_item {
  animation-delay: -4s;
}
.m_floating-decor_pos--photo-blur-a .m_floating-decor_item {
  animation-delay: -8s;
}
.m_floating-decor_pos--photo-blur-b .m_floating-decor_item {
  animation-delay: -1s;
}
/* ② 写真以外：コンテンツインナー（496px相当）を左右から囲む2パターン */
/* --float-x は clamp() で -32px（560px shellの外周）〜16px（本文側へ少し入り込む）の範囲に強制し、
   本文系装飾が .l_shell の外（左ナビ／右サイド写真）へはみ出さないようにする */
.m_floating-decor--pattern-a .m_floating-decor_pos--primary {
  top: var(--float-top, 18%);
  left: clamp(-32px, var(--float-x, -10px), 16px);
}
.m_floating-decor--pattern-a .m_floating-decor_pos--secondary {
  bottom: var(--float-bottom, 12%);
  right: clamp(-32px, var(--float-x, -20px), 16px);
}
.m_floating-decor--pattern-b .m_floating-decor_pos--primary {
  top: var(--float-top, 12%);
  right: clamp(-32px, var(--float-x, -20px), 16px);
}
.m_floating-decor--pattern-b .m_floating-decor_pos--secondary {
  bottom: var(--float-bottom, 12%);
  left: clamp(-32px, var(--float-x, -20px), 16px);
}
.m_floating-decor_item {
  display: block;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.m_floating-decor_item--mimosa {
  animation-name: m_floating-drift-leaf;
  animation-duration: 10s;
  width: 58px;
  height: 58px;
}
.m_floating-decor_item--olive-leaf {
  width: 76px;
  height: 82px;
  animation-name: m_floating-drift-leaf;
  animation-duration: 12s;
}
.m_floating-decor_item--mimosa-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-mimosa);
  animation-name: m_floating-drift-dot-a;
  animation-duration: 9s;
}
.m_floating-decor_item--mimosa-blur {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-mimosa);
  filter: blur(2px);
  animation-name: m_floating-drift-dot-b;
  animation-duration: 11s;
}
.m_floating-decor_item--olive-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-olive);
  animation-name: m_floating-drift-dot-c;
  animation-duration: 10s;
}
.m_floating-decor_item--olive-blur {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-olive);
  filter: blur(2px);
  animation-name: m_floating-drift-dot-d;
  animation-duration: 12s;
}
@keyframes m_floating-drift-dot-a {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(4px, -3px);
  }
}
@keyframes m_floating-drift-dot-b {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-3px, 4px);
  }
}
@keyframes m_floating-drift-dot-c {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(3px, 5px);
  }
}
@keyframes m_floating-drift-dot-d {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-4px, -3px);
  }
}
@keyframes m_floating-drift-leaf {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-4px) rotate(3deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .m_floating-decor_item {
    animation: none;
  }
}
/* TOP-------------------------------- */
/* TOP 共通 */
.top_section_btn-wrapper {
  margin-top: 40px;
  text-align: center;
}

/* TOP_kv */
.top_kv {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - 60px);
  background-color: var(--color-bg);
}
@media (width >= 1080px) {
  .top_kv {
    min-height: 100vh;
    min-height: 100svh;
  }
}
.top_kv_inner {
  min-height: inherit;
  position: relative;
  display: flex;
  flex-direction: column;
}
.top_kv_location {
  font-family: var(--font-gothic);
  padding: 16px;
  width: fit-content;
}
.top_kv_location-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: bold;
}

.top_kv_location-title {
  margin-top: 2px;
  font-size: 12px;
  font-weight: bold;
}
.top_kv_box {
  position: absolute;
  top: 50%;
  left: 16px;
  right: 16px;
  transform: translateY(-50%);
  text-align: center;
}
.top_kv_title {
  font-family: var(--font-FV);
  color: var(--color-title);
  font-weight: bold;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0.1em;
}
.top_kv_title-accent {
  display: block;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1.2em;
  color: var(--color-sub-text);
  margin-bottom: -4px;
}
.top_kv_subtitle {
  margin-top: 12px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.top_kv_copy {
  margin-top: 32px;
  font-size: 20px;
  font-weight: bold;
  color: var(--color-title);
  line-height: 1.6;
  letter-spacing: 0.1em;
}
.top_kv_disc {
  margin-top: 48px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.1em;
}
.top_kv_img {
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  z-index: var(--z-index-title);
}
.top_kv_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top_kv_img--top {
  top: -6%;
  right: -8%;
  width: 48%;
}
.top_kv_img--bottom {
  bottom: -4%;
  left: -8%;
  width: 42%;
}
/* TOP_service */
.top_service_title-wrapper {
  display: flex;
  justify-content: center;
}
.top_service_title18 {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.top_onayami-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}
.top_onayami_heading {
  width: fit-content;
  margin-inline: auto;
  padding: 12px 24px;
  border-radius: 50%;
  background: var(--color-bg);
}
.top_onayami_heading-text {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--color-title);
  text-align: center;
}
.top_onayami_heading-text_sub {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
}
.top_onayami_current {
  position: relative;
}
.top_onayami_current-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.top_onayami_current-item {
  position: relative;
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-gothic);
  line-height: 1.6;
}
.top_onayami_current-item::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  background: url("../img/illust/check-pink.png") center / contain no-repeat;
}
.top_onayami_current-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 250px;
  border-bottom: 1px solid #e9dfd7;
}
.top_onayami_current-item:nth-child(4)::after {
  width: 330px;
}
.top_onayami_current-item:not(:last-child) {
  padding-right: 120px;
}
.top_onayami_illust-current {
  position: absolute;
  top: 16px;
  right: 0;
  transform: none;
  width: 128px;
  height: auto;
}
@media (width >= 417px) {
  .top_onayami-body {
    max-width: 417px;
    margin-inline: auto;
  }
}
.top_onayami_heading-break {
  display: inline;
}
@media (width >= 417px) {
  .top_onayami_heading-break {
    display: none;
  }
}
.top_onayami-arrow {
  display: flex;
  justify-content: center;
}
.top_onayami_future {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.top_onayami_illust-future {
  max-width: 320px;
  margin-inline: auto;
}
.top_onayami_future-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--color-line-beige);
  border-radius: 16px;
  overflow: hidden;
}
.top_onayami_future-item {
  padding: 16px 12px;
  border-right: 1px solid var(--color-line-beige);
  border-bottom: 1px solid var(--color-line-beige);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-gothic);
  line-height: 1.6;
  text-align: center;
}
.top_onayami_future-item:nth-child(2n) {
  border-right: none;
}
.top_onayami_future-item:nth-child(n + 3) {
  border-bottom: none;
}
.top_onayami_future-accent {
  font-weight: bold;
}

/* TOP_service */
.top_service_list {
  display: flex;
  flex-direction: column;
}
.top_service_category {
  padding: 40px 0;
  text-align: center;
}
.top_service_category--accent {
  margin-inline: -16px;
  padding-inline: 16px;
  background: var(--color-mimosa-10);
}
.top_service_category-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-title);
}
.top_service_category-copy {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.1em;
}
.top_service_items {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 8px;
}
.top_service_item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top_service_item-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
.top_service_item-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  font-family: var(--font-gothic);
}
.js_service-slider {
  margin-top: 40px;
}
.js_service-slider .swiper-slide img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
}
.m_btn-text {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  padding-block: 6px;
  font-family: var(--font-main-mincho);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-title);
}
.m_btn-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 0;
  background: rgba(243, 231, 160, 0.3);
  transition: width 0.3s ease;
}
.m_btn-text:hover::before {
  width: 100%;
}
.m_btn-text::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 0;
  width: calc(100% + 2px);
  height: 1px;
  background: var(--color-line-beige);
}
.m_btn-text_icon {
  width: 23px;
  height: 9px;
  flex-shrink: 0;
}
/* card */
.top_service_area {
  padding: 24px;
  margin-top: 40px;
}
.top_service_area_text {
  margin-top: 20px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.8;
  text-align: center;
  color: var(--color-title);
}
.top_service_area_desc {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
  color: var(--color-sub-text);
}
/* TOP_concept */
.top_concept {
  position: relative;
}
.top_concept_content {
  position: relative;
  z-index: var(--z-default);
}
@media (width >= 1080px) {
  .top_concept_content {
    /* フローティングの配置基準（496px）はpadding boxのまま維持し、本文だけを内側448pxへ */
    padding-inline: 24px;
  }
}
.top_concept_text {
  margin-top: 20px;
  font-size: 14px;
  line-height: 2;
  font-weight: 500;
}
.top_concept_text--bold {
  font-weight: bold;
}
.top_concept_profile {
  margin-block: 40px;
}
.top_concept_profile-visual {
  position: relative;
  width: 220px;
  margin-inline: auto;
}
.top_concept_profile-photo {
  border-radius: 16px;
  box-shadow: var(--box-shadow-card);
  overflow: hidden;
}
.top_concept_profile-image {
  width: 100%;
  height: auto;
  display: block;
}
.top_concept_profile-name {
  margin-top: 16px;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-title);
  letter-spacing: 0.2em;
  text-align: center;
}
.top_concept_profile-role {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-sub-text);
  text-align: center;
}
/* TOP_flow */
.top_flow {
  background: var(--color-olive-30);
}
.top_flow_heading {
  margin-top: 40px;
}
.top_flow_list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.top_flow_card {
  padding: 24px 16px;
}
.top_flow_card-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.top_flow_card-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-title);
  font-family: var(--font-gothic);
}
.top_flow_card-text {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  font-family: var(--font-gothic);
}
.top_flow_price {
  margin-top: 40px;
  padding-bottom: 40px;
}
.top_flow_price-head {
  position: relative;
}
.top_flow_price-tax {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 12px;
}
.top_flow_price-list {
  margin-top: 16px;
  padding: 24px;
  font-family: var(--font-gothic);
}
.top_flow_price-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  grid-template-areas:
    "title ."
    "note  ."
    "time  amount";
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
}
.top_flow_price-item + .top_flow_price-item {
  margin-top: 20px;
}
.top_flow_price-item:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-line-beige);
}
.top_flow_price-title {
  grid-area: title;
  align-self: center;
  font-weight: bold;
}
.top_flow_price-amount-wrap {
  grid-area: amount;
  position: relative;
  width: fit-content;
  align-self: center;
  justify-self: start;
}
.top_flow_price-tag {
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.top_flow_price-note {
  grid-area: note;
  font-size: 11px;
  font-weight: 500;
}
.top_flow_price-detail {
  grid-area: time;
  align-self: center;
  margin-left: 2.3em;
  font-size: 14px;
  font-weight: 500;
}
.top_flow_price-note--indent {
  grid-row: 4;
  grid-column: 1 / -1;
  margin-top: 4px;
  margin-left: 2.3em;
}
.top_flow_price-amount {
  grid-area: amount;
  align-self: center;
  justify-self: start;
  display: flex;
  align-items: baseline;
  text-align: left;
}
.top_flow_price-amount_number {
  font-weight: 500;
  font-size: 20px;
  color: var(--color-title);
}
.top_flow_price-amount_unit {
  margin-left: 2px;
  font-weight: 500;
  font-size: 14px;
  color: var(--color-title);
}
.top_flow_system-note {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 500;
}
.top_flow_system-note .m_icon-Solive-L-title {
  flex-shrink: 0;
  margin-top: 0.25em;
}
.top_flow_system-note_text {
  text-align: center;
}

/* TOP_faq */
.top_faq {
  margin-bottom: 40px;
}
.m_faq_list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.m_faq_card {
  border-radius: 0;
}
.m_faq_question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 16px;
  border-left: 3px solid var(--color-mimosa);
  text-align: left;
}
.m_faq_question_text {
  font-family: var(--font-gothic);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-title);
}
.m_faq_question_mark {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.m_faq_question_mark::before,
.m_faq_question_mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--color-mimosa);
}
.m_faq_question_mark::before {
  transform: translate(-50%, -50%);
}
.m_faq_question_mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.3s;
}
.m_faq_question_mark.is-open::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.m_faq_answer {
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.m_faq_answer-inner {
  padding: 16px;
  background: var(--color-white);
  border-left: 3px solid var(--color-olive);
  border-top: 1px solid
    color-mix(in srgb, var(--color-line-beige) 35%, transparent);
}
.m_faq_answer_text {
  font-family: var(--font-gothic);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}
.m_faq_answer_text + .m_faq_answer_text {
  margin-top: 16px;
}
.top_faq_btn-wrapper {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
/* TOP_voice */
.top_voice {
  margin-top: 48px;
  margin-bottom: 40px;
}
.m_card.top_voice {
  padding: 24px;
  background: var(--color-mimosa-10);
}
.top_voice_quote {
  margin-top: 20px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.8;
  text-align: center;
  color: var(--color-title);
}
.top_voice_text {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}
.top_voice_profile {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  color: var(--color-sub-text);
}
.top_voice_btn-wrapper {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

/* service.html（子ページ） */
.service_case-section + .service_case-section {
  margin-top: 48px;
}
.service_case-scroll {
  margin-top: 8px;
  margin-left: 8px;
  padding-block: 8px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.service_case-scroll::-webkit-scrollbar {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .service_case-scroll {
    scroll-snap-type: none;
  }
}
.service_case-scroll_list {
  display: flex;
  gap: 8px;
  padding-inline: 16px 32px;
}
.service_case-scroll_item {
  flex-shrink: 0;
  scroll-snap-align: start;
}
.service_case-scroll_divider {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-inline: 4px;
}
.service_case-scroll_divider-icon {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid transparent;
}
.service_case-scroll_list--mimosa .service_case-scroll_divider-icon {
  border-left-color: var(--color-mimosa);
}
.service_case-scroll_list--olive .service_case-scroll_divider-icon {
  border-left-color: var(--color-olive);
}
.service_case-scroll_hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  margin-top: 24px;
  padding-right: 16px;
}
.service_case-scroll_hint-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-sub-olive);
}
.service_case-scroll_hint-icon {
  width: 16px;
  height: 8px;
  color: var(--color-sub-olive);
}
.service_case {
  width: 320px;
  height: 400px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--color-line-beige);
  border-radius: 16px;
}
.service_case--mimosa {
  background: var(--color-mimosa-10);
}
.service_case--olive {
  background: var(--color-olive-20);
}
.service_case_label {
  display: inline-block;
  width: fit-content;
  padding: 2px 12px;
  border: 1px solid var(--color-line-beige);
  border-radius: 999px;
  font-family: var(--font-gothic);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-sub-olive);
  background: var(--color-white);
}
.service_case_title-wrap {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 24px auto 0;
}
.service_case_title {
  font-family: var(--font-gothic);
  font-size: 18px;
  font-weight: bold;
  color: var(--color-title);
  text-align: center;
}
.service_case_icon {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 4px;
  width: 20px;
  height: 24px;
  object-fit: contain;
}
.service_case_image {
  display: block;
  width: 240px;
  height: 160px;
  margin: 24px auto 0;
  object-fit: contain;
}
.service_case_text {
  margin-top: 32px;
  font-family: var(--font-gothic);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text);
}
.service_schedule-card {
  width: 320px;
  height: 400px;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: var(--box-shadow-card);
}
.service_schedule-head {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: end;
}
.service_schedule-title-wrap {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.service_schedule-title-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.service_schedule-title {
  font-family: var(--font-gothic);
  font-size: 18px;
  font-weight: bold;
  color: var(--color-title);
}
.service_schedule_image {
  display: block;
  margin: 16px auto 12px;
  width: 220px;
  height: 180px;
  border-radius: 12px;
  object-fit: cover;
}
.service_schedule_image--soften {
  filter: brightness(0.92) contrast(0.94);
}
.service_schedule-text {
  width: 240px;
  margin: 8px auto 0;
  font-family: var(--font-gothic);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
}
.service_schedule-decoration {
  width: 288px;
  margin: auto auto 0;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.service_schedule-decoration_icon {
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  max-width: 24px;
  object-fit: contain;
}
.service_schedule-decoration_line {
  flex: 1 1 auto;
  width: 100%;
  height: 10px;
}
.service_schedule-decoration_line-path {
  fill: none;
  stroke: var(--color-line-beige);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 2 3;
}

/* service.html サポート一覧 */
.service_support-lead {
  margin-top: 24px;
  font-family: var(--font-main-mincho);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text);
}
.service_support-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 40px;
}
.service_support-category {
  min-width: 0;
}
@media (width >= 496px) {
  .service_support-category {
    justify-self: center;
  }
}
.service_support-heading {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: end;
  column-gap: 4px;
}
.service_support-icon {
  position: static;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.service_support-title {
  position: relative;
  display: inline-block;
  width: fit-content;
  font-family: var(--font-main-mincho);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  color: var(--color-title);
  letter-spacing: 0.2em;
}
.service_support-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  border-bottom: 1px solid var(--color-line-beige);
}
.service_support-title_dot {
  letter-spacing: -0.1em;
}
.service_support-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.service_support-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 8px;
  align-items: start;
  padding-left: 14px;
}
.service_support-check {
  width: 14px;
  height: 14px;
  margin-top: 0.35em;
  object-fit: contain;
}
.service_support-item_text {
  min-width: 0;
  font-family: var(--font-gothic);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
}
.service_support-note {
  margin-top: 40px;
  font-family: var(--font-main-mincho);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
}

/* service.html ご利用者さまの声 */
.service_voice {
  position: relative;
  margin-bottom: 48px;
}
.service_voice_card-wrap {
  position: relative;
  z-index: var(--z-default);
}
.service_voice .top_voice {
  margin-top: 0;
  margin-bottom: 0;
}
.service_voice .m_section-heading--mimosa {
  margin-top: 0;
}

/* profile.html */
.profile {
  position: relative;
}
.profile_content {
  position: relative;
  z-index: var(--z-default);
}
@media (width >= 1080px) {
  .profile_content {
    /* フローティングの配置基準（496px）はpadding boxのまま維持し、本文だけを内側448pxへ */
    padding-inline: 24px;
  }
}
.profile_photo-wrap {
  position: relative;
  width: 240px;
  margin-inline: auto;
}
.profile_photo-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--box-shadow-card);
}
.profile_photo {
  display: block;
  width: 100%;
  height: auto;
}
.profile_role {
  margin-top: 16px;
  font-family: var(--font-main-mincho);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--color-sub-text);
}
.profile_name {
  margin-top: 4px;
  font-family: var(--font-main-mincho);
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--color-title);
}
.profile_block {
  margin-top: 48px;
}
.profile_block-title {
  font-family: var(--font-main-mincho);
  font-size: 18px;
  font-weight: bold;
  color: var(--color-title);
  letter-spacing: 0.1em;
}
.profile_block-text {
  margin-top: 16px;
  font-family: var(--font-main-mincho);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-text);
  padding-inline: 16px;
  letter-spacing: 0.1em;
}
.profile_block-text + .profile_block-text {
  margin-top: 16px;
}
.profile_keireki {
  position: relative;
  margin-top: 16px;
  padding: 24px 20px;
  background: var(--color-white);
  border-radius: 0;
  border-left: 3px solid var(--color-mimosa);
  box-shadow: var(--box-shadow-faq);
  overflow: hidden;
}
.profile_keireki_group + .profile_keireki_group {
  margin-top: 24px;
}
.profile_keireki_title {
  font-family: var(--font-main-mincho);
  font-size: 16px;
  font-weight: bold;
  color: var(--color-title);
  letter-spacing: 0.1em;
}
.profile_keireki_list {
  margin-top: 12px;
  list-style: none;
}
.profile_keireki_item {
  font-family: var(--font-main-mincho);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
}
.profile_keireki_item::before {
  content: "・";
  color: var(--color-text);
}
.profile_keireki_item + .profile_keireki_item {
  margin-top: 8px;
}
.profile_keireki_decoration {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
.profile_instagram {
  margin-bottom: 48px;
}
.profile_instagram_text {
  font-family: var(--font-main-mincho);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
  color: var(--color-text);
}
.profile_instagram_embed {
  /* .l_container-32（左右32pxパディング）の外に置き、Instagram公式embedの
     min-width:326px に対して常に十分な幅を確保する（負マージンでの帳尻合わせをしない） */
  position: relative;
  width: min(100%, 360px);
  margin: 24px auto 0;
}
.profile_instagram_embed-frame {
  /* Instagram公式scriptが生成するiframeは固定pxの幅・marginをinlineで持つため、
     iframe自身のmarginを上書きするのではなく、flexで中央に寄せる */
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 420px;
}
.profile_instagram_embed iframe.instagram-media-rendered {
  display: block;
  margin-inline: auto;
  max-width: 100%;
}
/* 写真周りフローティングの共通座標は約220〜240px四方の人物写真基準のため、
   360×420px以上あるInstagram埋め込みではそのままだと重なる。
   共通ルールは変更せず、Instagram埋め込みの上でだけ --float-x/--float-y を上書きする。 */
.profile_instagram_embed .m_floating-decor_pos--photo-mimosa {
  --float-x: -215px;
  --float-y: -90px;
}
.profile_instagram_embed .m_floating-decor_pos--photo-leaf {
  --float-x: 215px;
  --float-y: 100px;
}
.profile_instagram_embed .m_floating-decor_pos--photo-dot {
  --float-x: 230px;
  --float-y: -40px;
}
.profile_instagram_embed .m_floating-decor_pos--photo-blur-a {
  --float-x: -205px;
  --float-y: 20px;
}
.profile_instagram_embed .m_floating-decor_pos--photo-blur-b {
  --float-x: -225px;
  --float-y: 150px;
}
/* SERVICE-------------------- */
.service_body,
.service_faq_unit {
  margin-top: 64px;
}
/* service */
.service_img-wrapper {
  width: 100%;
  height: 212px;
}
.service_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service_contents:not(:first-child) {
  margin-top: 40px;
}
.service_text-wrapper {
  margin-top: 24px;
}
.service_heading {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.service_desc {
  margin-top: 24px;
  text-align: justify;
}
@media (width >= 768px) {
  .service_heading {
    font-size: 24px;
  }
  .service_contents {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
  }
  .service_img-wrapper,
  .service_text-wrapper {
    width: calc((100% - 32px) / 2);
    height: auto;
  }
  .service_contents:nth-of-type(even) {
    flex-direction: row-reverse;
  }
  .service_text-wrapper {
    margin-top: 0px;
  }
  .service_img {
    height: auto;
  }
  .service_heading {
    text-align: left;
  }
}
/* service FAQ */
.service_faq-question {
  background: var(--primary-color);
  width: 100%;
  padding: 16px 8px;
  display: flex;
}
.service_faq-question_tag {
  font-size: 12px;
  font-weight: bold;
  font-family: var(--font-family-accent);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-white);
  margin: auto 0;
}

.service_faq-question_text {
  font-size: 14px;
  font-weight: bold;
  color: var(--color-white);
  letter-spacing: 0.1em;
  margin-inline: 16px;
  text-align: left;
  flex-grow: 1;
}
.service_faq-question_mark {
  position: relative;
  width: 16px;
  height: 16px;
  margin: auto 0;
}
.service_faq-question_mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 2px;
  background: var(--color-white);
}
.service_faq-question_mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 16px;
  height: 2px;
  background: var(--color-white);
  transition: transform 0.3s;
}
.service_faq-question_mark.is-open::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.service_faq-answer {
  box-shadow: 2px 2px 4px 0px rgba(170, 170, 170, 0.16);
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.service_faq-answer_inner {
  padding: 16px 16px 16px 8px;
  display: flex;
  width: 100%;
}
.service_faq-answer_text {
  font-size: 14px;
  font-weight: bold;
  margin-left: 16px;
  flex-grow: 1;
}
.service_faq-answer_tag {
  font-size: 12px;
  font-weight: bold;
  font-family: var(--font-family-accent);
  color: var(--primary-color);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: auto 0;
}
@media (width >= 768px) {
  .service_faq-question {
    padding-inline: 24px;
  }
  .service_faq-question_text {
    margin-left: 32px;
  }
  .service_faq-answer_inner {
    padding-inline: 24px;
  }
  .service_faq-answer_text {
    margin-left: 32px;
  }
}

/* PRIVACY------------------------------------- */
.privacy-policy_body {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.privacy-policy_heading {
  font-size: 18px;
  font-weight: bold;
}
.privacy-policy_desc {
  text-align: justify;
  font-size: 14px;
  margin-top: 24px;
}
.privacy-policy_list {
  margin-top: 24px;
}
.privacy-policy_list-item {
  font-size: 14px;
  text-align: justify;
}

/* 404 */
.not_found_body {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.not_found_desc {
  margin-top: 24px;
  font-size: 14px;
}
.not_found_btn-wrapper {
  margin-top: 64px;
}
/* pricing.html */
.p_pricing {
  background: var(--color-olive-30);
}
@media (width >= 496px) {
  .p_pricing .l_container-16,
  .p_pricing .l_container-32 {
    max-width: var(--content-width-sm);
  }
  .pricing_card,
  .pricing_benefit-inner,
  .pricing_benefit-card,
  .pricing_flow-card {
    padding: 32px;
  }
}
.pricing_card-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pricing_card-list--single {
  margin-top: 0;
}
.pricing_card {
  padding: 24px 20px;
}
.pricing_card-head {
  display: flex;
  align-items: center;
  gap: 24px;
}
.pricing_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-line-beige) 70%, transparent);
  color: var(--color-white);
  font-family: var(--font-gothic);
  font-size: 24px;
  font-weight: bold;
}
.pricing_badge_number {
  display: inline-block;
  transform: translateY(-1.5px);
}
.pricing_card-title {
  font-family: var(--font-main-mincho);
  font-size: 18px;
  font-weight: bold;
  color: var(--color-title);
}
.pricing_card-title--benefit {
  width: auto;
  font-size: 16px;
  text-align: center;
}
.pricing_card-tag {
  display: block;
  width: fit-content;
  margin: 12px auto 0;
  font-size: 11px;
  font-weight: bold;
}
.pricing_card-text {
  margin-top: 12px;
  font-family: var(--font-main-mincho);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-text);
}
.pricing_spec-list {
  margin-top: 16px;
  margin-left: 8px;
}
.pricing_spec-row {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 6px;
  padding: 8px 0;
}
.pricing_spec-row--bottom {
  align-items: end;
}
.pricing_spec-label {
  font-family: var(--font-main-mincho);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-sub-text);
  letter-spacing: 0.1em;
}
.pricing_spec-label--sm {
  font-size: 14px;
  letter-spacing: normal;
}
.pricing_spec-value {
  display: flex;
  align-items: baseline;
}
.pricing_spec-value_number {
  font-family: var(--font-main-mincho);
  font-size: 20px;
  font-weight: bold;
  color: var(--color-title);
}
.pricing_spec-value_unit {
  margin-left: 2px;
  font-family: var(--font-main-mincho);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-title);
}
.pricing_spec-breakdown {
  list-style: none;
}
.pricing_spec-breakdown li {
  font-family: var(--font-main-mincho);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}
.pricing_spec-breakdown li::before {
  content: "・";
  color: var(--color-text);
}
.pricing_spec-breakdown li + li {
  margin-top: 4px;
}
.pricing_spec-breakdown_note {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.pricing_spec-value--text {
  display: block;
  font-family: var(--font-main-mincho);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}
.pricing_spec-value_unit--sm {
  font-size: 14px;
}
.pricing_spec-value_number--muted {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}
.pricing_spec-value_unit--muted {
  font-size: 14px;
  color: var(--color-text);
}
.pricing_regular-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pricing_regular-course {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--color-line-beige);
  font-family: var(--font-main-mincho);
  white-space: nowrap;
}
.pricing_regular-course_number {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-title);
}
.pricing_regular-course_unit {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-title);
}
.pricing_regular-course_symbol {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-title);
}
.pricing_regular-course_note {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-title);
}
.pricing_regular-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 10px 0;
}
.pricing_regular-row--border {
  border-bottom: 1px solid var(--color-line-beige);
}
.pricing_regular-label {
  font-family: var(--font-main-mincho);
  font-size: 15px;
  color: var(--color-sub-text);
  letter-spacing: 0.1em;
}
.pricing_regular-value {
  display: flex;
  align-items: baseline;
  justify-self: end;
}
.pricing_regular-value_number {
  font-family: var(--font-main-mincho);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}
.pricing_regular-value_number--price {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-title);
}
.pricing_regular-value_unit {
  margin-left: 2px;
  font-family: var(--font-main-mincho);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}
.pricing_regular-value_unit--price {
  color: var(--color-title);
}
.pricing_group {
  padding-inline: 16px;
}
.pricing_group-notes {
  margin-top: 24px;
}
.pricing_group-notes li {
  font-family: var(--font-main-mincho);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-sub-text);
}
.pricing_group-notes li + li {
  margin-top: 4px;
}
.pricing_benefit-surface {
  background: var(--color-white);
  border-radius: 16px;
}
.pricing_benefit-inner {
  background: var(--color-mimosa-30);
  border-radius: 16px;
  padding: 24px 20px;
}
.pricing_benefit-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pricing_benefit-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pricing_benefit-card {
  padding: 24px 20px;
  width: 80%;
}
.pricing_benefit-head {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-olive);
}
.pricing_benefit-icon {
  position: static;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  object-fit: contain;
}
.pricing_benefit-content {
  width: fit-content;
  margin: 16px auto 0;
  text-align: center;
}
.pricing_benefit-label {
  margin-top: 16px;
  font-family: var(--font-main-mincho);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-sub-text);
}
.pricing_benefit-rate {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.pricing_benefit-rate_number,
.pricing_benefit-rate_percent {
  font-family: var(--font-main-mincho);
  font-size: 20px;
  font-weight: bold;
  color: var(--color-title);
}
.pricing_benefit-rate_off {
  display: inline-block;
  margin-left: 4px;
  transform: translateY(-2px);
  font-family: var(--font-main-mincho);
  font-size: 16px;
  font-weight: bold;
  color: var(--color-title);
}
.pricing_benefit-price {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.pricing_benefit-price_before {
  margin-right: 8px;
  font-family: var(--font-main-mincho);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}
.pricing_benefit-price_arrow {
  margin-right: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}
.pricing_benefit-price_after-number {
  font-family: var(--font-main-mincho);
  font-size: 20px;
  font-weight: bold;
  color: var(--color-title);
}
.pricing_benefit-price_after-unit {
  margin-left: 2px;
  font-family: var(--font-main-mincho);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-title);
}
.pricing_benefit-note {
  margin-top: 24px;
  font-family: var(--font-main-mincho);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}
.pricing_flow-steps {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pricing_flow-card {
  padding: 20px;
}
.pricing_flow-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-line-beige);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pricing_flow-badge_label {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-sub-olive);
  font-family: var(--font-gothic);
}
.pricing_flow-badge_number {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  color: var(--color-sub-olive);
  font-family: var(--font-gothic);
}
.pricing_flow-subtitle {
  margin-top: 2px;
  font-family: var(--font-main-mincho);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-top: -4px;
}
.pricing_flow-title_sub {
  font-size: 14px;
  font-weight: 500;
}
.pricing_flow-text {
  margin-top: 12px;
  font-family: var(--font-main-mincho);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-text);
  text-align: justify;
  text-justify: inter-ideograph;
  padding-inline: 12px;
}
.pricing_flow-tag {
  margin-top: 16px;
  font-size: 15px;
}
.pricing_flow-bullet-list {
  margin-top: 12px;
  list-style: none;
}
.pricing_flow-bullet-item {
  font-family: var(--font-main-mincho);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
}
.pricing_flow-bullet-item::before {
  content: "・";
  color: var(--color-text);
}
.pricing_flow-bullet-item + .pricing_flow-bullet-item {
  margin-top: 4px;
}
.pricing_faq .m_faq_question_text {
  font-size: 15px;
}
.pricing_faq .m_faq_answer_text {
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: justify;
  text-justify: inter-ideograph;
}
.pricing .top_flow_price-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.pricing .top_flow_price-head .m_section-heading {
  grid-column: 2;
}
.pricing .top_flow_price-tax {
  grid-column: 3;
  position: static;
  justify-self: end;
  transform: none;
}
/* policy.html */
.policy_nav {
  margin-top: 24px;
  display: flex;
}
.policy_nav_item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-title);
  text-align: center;
}
.policy_nav_item:nth-child(2) {
  border-left: 1px solid var(--color-line-beige);
  border-right: 1px solid var(--color-line-beige);
}
.policy_section-heading {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line-beige);
}
.policy_subheading {
  margin-top: 24px;
  font-family: var(--font-main-mincho);
  font-size: 16px;
  font-weight: bold;
  color: var(--color-title);
}
.policy_section-text {
  margin-top: 16px;
  font-family: var(--font-main-mincho);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--color-text);
}
.policy_section-label {
  margin-top: 16px;
  font-family: var(--font-main-mincho);
  font-size: 14px;
  font-weight: bold;
  color: var(--color-title);
}
.policy_section-list {
  margin-top: 16px;
  padding-left: 1.4em;
  list-style: decimal;
  font-family: var(--font-main-mincho);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--color-text);
}
.policy_section-list--bullet {
  list-style: disc;
}
.policy_section-list li + li {
  margin-top: 12px;
}
/* ブレイクポイント
  header, footerは1080px
  それ以外は基本768px */