[x-cloak] {
  display: none;
}

.relative {
  position: relative;
}

.hidden {
  display: none;
}

.section-hopecell * {
  line-height: 1.625 !important;
  font-family: "Zen Maru Gothic", serif;
}

.section-hopecell a,
.section-hopecell button,
.section-hopecell [role="button"] {
  transition: filter 0.2s ease; /* スムーズな変化を追加（任意） */
  cursor: pointer;
}

.section-hopecell a:hover,
.section-hopecell button:hover,
.section-hopecell [role="button"]:hover {
  filter: brightness(0.75);
}

.section-hopecell a:active,
.section-hopecell button:active,
.section-hopecell [role="button"]:active {
  filter: brightness(0.5);
}

#header-hopecell {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  background-color: white;
}

.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px; /* gap-10 = 2.5rem = 40px */
  padding-top: 14px; /* py-3.5 = 0.875rem = 14px */
  padding-bottom: 14px;
}

.header-logo {
  display: inline-block;
  margin-left: 20px; /* ml-5 = 1.25rem = 20px */
}

.head-menu-pc {
  display: none;
  width: 100%;
}

.head-menu-pc .ex-link {
  display: none; /* デフォルトで非表示（lg:flex に備える） */
  justify-content: flex-end;
  gap: 16px; /* gap-4 = 1rem = 16px */
  padding-right: 40px; /* pr-10 = 2.5rem = 40px */
  font-size: 12px; /* text-xs = 0.75rem = 12px */
  font-weight: bold;
  list-style: none;
  color: #274f83; /* Tailwindの text-blue-700 相当（仮に blueen = blue-700 と解釈） */
}

.head-menu-pc .ex-link a {
  display: block;
  color: #2a518a;
}

.head-menu-pc .in-link {
  display: none; /* lg:flex に対応する初期状態 */
  justify-content: flex-end;
  gap: 16px; /* gap-4 = 1rem = 16px */
  padding-right: 40px; /* pr-10 = 2.5rem = 40px */
  margin-bottom: 16px; /* mb-4 = 1rem = 16px */
  font-size: 14px; /* text-sm = 0.875rem = 14px */
  font-weight: bold;
  list-style: none;
  color: #274f83; /* 仮に text-blueen = blue-700 と解釈 */
}

.head-menu-pc .in-link .opened-menu {
  position: absolute;
  top: 100%; /* top-full = 要素の下端に配置 */
  left: 50%; /* left-1/2 = 左端を親の中央に配置 */
  transform: translateX(-50%); /* -translate-x-1/2 = X軸方向に50%戻す */
  width: max-content; /* w-max = 中身に合わせた幅 */
}

.head-menu-pc .in-link .opened-menu.opened-menu-last {
  transform: translateX(0%);
  left: auto;
  right: 0%;
}

.opened-menu .active-dot {
  width: 12px; /* w-3 = 0.75rem = 12px */
  margin-left: auto; /* mx-auto = 左右マージン自動 */
  margin-right: auto;
  margin-top: 10px; /* my-2.5 = 0.625rem = 10px */
  margin-bottom: 10px;
  border-radius: 9999px; /* rounded-full = 最大の丸み */
  aspect-ratio: 1 / 1; /* aspect-square = 正方形 */
  background-color: #ff6041; /* bg-sub (sub: #FF6041) */
}

.opened-menu-last .active-dot {
  margin-right: 56px;
}

.head-menu-pc .in-link .opened-menu .opened-menu-bg {
  background-color: white; /* bg-white */
  border-width: 2px; /* border-2 */
  border-style: solid;
  border-color: #ff6041; /* border-sub (sub: '#FF6041') */
  border-radius: 6px; /* rounded-md = 6px (0.375rem) */
}

.head-menu-pc .in-link .opened-menu .opened-menu-bg .opened-menu-contents {
  padding-left: 8px; /* px-2 = 0.5rem = 8px */
  padding-right: 8px;
  padding-top: 12px; /* py-3 = 0.75rem = 12px */
  padding-bottom: 12px;
  margin-top: 12px; /* space-y-3 = 子要素の上下の間隔12px（親に適用する場合は上下マージン） */
  margin-bottom: 12px;
  font-size: 14px; /* text-sm = 0.875rem = 14px */
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  color: #2a518a; /* text-main */
  text-underline-offset: 4px; /* underline-offset-1 = 0.25rem = 4px */
  text-decoration-color: #2a518a; /* decoration-main */
  text-decoration-thickness: 1px; /* decoration-1 */
}

.head-menu-pc .in-link .opened-menu .opened-menu-bg .opened-menu-contents a {
  display: block;
  color: #2a518a;
}

.head-menu-pc
  .in-link
  .opened-menu
  .opened-menu-bg
  .opened-menu-contents
  a:not(:nth-child(1)) {
  margin-top: 12px; /* mt-3 */
}

.head-menu-pc .head-border {
  margin-top: 16px; /* mt-4 = 1rem = 16px */
  line-height: 2rem; /* leading-8 = 2rem = 32px/16px = 2 */
  border-width: 1px; /* border = 1px */
  border-style: solid; /* border-solid */
  border-color: #29518a; /* border-line-blue (#29518A) */
}

.head-menu-sp-btn {
  position: relative; /* relative */
  margin-right: 20px; /* mr-5 = 1.25rem = 20px */
  text-align: right; /* text-right */
}

.head-menu-sp-btn .sp-btn {
  width: 32px; /* w-8 = 2rem = 32px */
}

.head-menu-sp {
  position: fixed; /* fixed */
  z-index: 50; /* z-50 */
  overflow: auto; /* overflow-auto */
  color: #2a518a; /* text-main（カラーコード） */
  right: 20px; /* right-5 = 1.25rem = 20px */
  height: max-content; /* h-max */
  top: 80px; /* top-20 = 5rem = 80px */
  width: max-content; /* w-max */
}

.head-menu-sp .head-menu-sp-wrapper {
  max-height: calc(100svh - 150px); /* max-h-[calc(100svh-150px)] */
  width: 320px; /* w-80 = 20rem = 320px */
  overflow: auto; /* overflow-auto */
  border-radius: 0.25rem; /* rounded = 4px */
  color: #2a518a; /* text-main */
}

.head-menu-sp .head-menu-sp-wrapper .sp-menu-content {
  background-color: #ffffff; /* bg-white */
  border-left: 1px solid #ff6041; /* border-x → left/right に border-sub */
  border-right: 1px solid #ff6041;
  border-bottom: 1px solid #ff6041;
  padding-left: 20px; /* px-5 = 1.25rem = 20px */
  padding-right: 20px;
  padding-top: 10px; /* py-2.5 = 0.625rem = 10px */
  padding-bottom: 10px;
  font-size: 16px;
}

.head-menu-sp .head-menu-sp-wrapper .sp-menu-content:nth-child(1) {
  border-top: 1px solid #ff6041; /* border-t with border-sub */
  border-top-left-radius: 0.25rem; /* rounded-t = 4px */
  border-top-right-radius: 0.25rem;
}

.head-menu-sp .head-menu-sp-wrapper .sp-menu-content:last-child {
  border-bottom: 1px solid #ff6041; /* !border-b with border-sub */
  border-bottom-left-radius: 0.25rem; /* rounded-b = 4px */
  border-bottom-right-radius: 0.25rem;
}

.head-menu-sp .head-menu-sp-wrapper .sp-menu-content .open-btn {
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: space-between; /* justify-between */
}

.head-menu-sp .head-menu-sp-wrapper .sp-menu-content a {
  /* font-size: 16px; */
  color: #2a518a;
}

.head-menu-sp .head-menu-sp-wrapper .sp-menu-content ul {
  padding-left: 16px; /* pl-4 = 1rem */
  margin-top: 16px; /* mt-4 = 1rem */
  margin-bottom: 0px; /* mb-0 */
  font-size: 14px; /* text-sm = 0.875rem */
  list-style: none; /* list-none */
}

.head-menu-sp .head-menu-sp-wrapper .sp-menu-content ul > * + * {
  margin-top: 16px; /* space-y-4 = 1rem */
}

.head-menu-sp .head-menu-sp-wrapper .sp-menu-content ul a {
  text-decoration: underline;
}

#footer-hopecell {
  position: relative; /* relative */
  background-color: #ffffff; /* bg-white */
  max-width: none;
}

.footer-wrapper {
  padding: 0 20px;
  margin: 0 auto;
}

.foot-menu-main {
  display: grid; /* grid */
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
  gap: 20px; /* gap-5 = 1.25rem = 20px */
  padding-bottom: 40px; /* pb-10 = 2.5rem = 40px */
  margin-left: 32px; /* mx-8 = 2rem = 32px */
  margin-right: 32px;
  padding-top: 28px; /* pt-7 = 1.75rem = 28px */
}

.foot-menu-main a {
  transition: filter 0.2s ease;
}

.foot-menu-main a {
  transition: filter 0.2s ease; /* hover時の明度変化にアニメ感を出す */
}

.foot-menu-main a:hover {
  filter: brightness(100%);
}

.foot-menu-main a::before {
  position: absolute; /* absolute */
  opacity: 0; /* opacity-0 */
  top: 50%; /* top-1/2 */
  transform: translateY(-50%); /* -translate-y-1/2 */
  left: -18px; /* -left-[18px] */
  width: 8px; /* w-2 = 0.5rem = 8px */
  aspect-ratio: 1 / 1; /* aspect-square */
  border-radius: 9999px; /* rounded-full */
  background-color: #ff6041; /* bg-sub */
  content: "";
  display: none; /* hidden */
}

.foot-menu-main > div:nth-child(2),
.foot-menu-main > div:nth-child(3),
.foot-menu-main > div:nth-child(4) {
  width: 83.333333%; /* w-5/6 */
}

.foot-menu-main > div:nth-child(2),
.foot-menu-main > div:nth-child(4) {
  margin-left: auto; /* ml-auto */
}

.foot-menu-main .menu-title {
  margin-bottom: 20px; /* mb-5 = 1.25rem = 20px */
  font-weight: bold; /* font-bold */
  text-align: left; /* text-left */
  color: #ff6041; /* text-sub */
  font-size: 16px;
}

.foot-menu-main .menu-contents {
  padding-left: 12px; /* px-3 = 0.75rem */
  padding-right: 12px;
  padding-top: 20px; /* py-5 = 1.25rem */
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px; /* space-y-3 = 0.75rem */
  font-size: 12px; /* text-xs */
  font-weight: bold; /* font-bold */
  background-color: #ffffff; /* bg-white */
  border-width: 4px; /* border-4 */
  border-color: #2a518a; /* border-main */
  border-right-color: #ffffff; /* border-r-white */
  border-bottom-color: #ffffff; /* border-b-white */
  border-style: solid;
  border-top-left-radius: 24px; /* rounded-tl-3xl = 1.5rem = 24px */
}

.foot-menu-main .menu-contents a {
  color: #2a518a;
}

.foot-menu-main .menu-icon {
  position: absolute;
  top: 24px; /* top-6 = 1.5rem */
  right: 0; /* デフォルト（モバイル）用 */
}

.foot-menu-sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px; /* gap-6 = 1.5rem */
  margin-top: 40px; /* my-10 = 2.5rem */
  margin-bottom: 40px;
}

.foot-menu-contact {
  display: flex;
  flex-direction: column;
  gap: 8px; /* space-y-2 = 0.5rem */
  font-size: 18px; /* text-lg ≒ 1.125rem */
  font-weight: bold;
  color: #274f83; /* text-blueen */
}

.foot-menu-contact .contact-tel {
  display: block;
  margin-bottom: 20px; /* mb-5 = 1.25rem */
  text-align: center;
}

.foot-menu-contact .contact-tel a {
  color: #274f83; /* text-blueen */
  font-size: 36px;
}

.foot-menu-contact .contact-tel .time {
  font-size: 14px;
  font-weight: bold;
}

.foot-menu-contact .contact-web {
  display: flex;
  flex-direction: column;
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  gap: 4px; /* space-y-1 = 0.25rem */
  text-align: center;
}

.foot-menu-contact .contact-web .title {
  margin-bottom: 16px; /* mb-4 = 1rem */
  font-size: 18px; /* text-lg ≒ 1.125rem */
  font-weight: bold;
}

.foot-menu-contact .contact-web a {
  color: #274f83; /* text-blueen */
}

.foot-menu-contact .contact-web .img-arrow {
  width: 16px;
}

.foot-menu-contact .contact-web .request {
  display: flex;
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  gap: 8px; /* gap-2 = 0.5rem */
  font-size: 14px; /* text-sm = 0.875rem */
}

.foot-menu-contact .contact-web .form {
  display: flex;
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  gap: 8px; /* gap-2 = 0.5rem */
  font-size: 14px; /* text-sm = 0.875rem */
}

.foot-menu-contact .contact-web .privacy {
  display: block;
  padding-top: 20px; /* pt-5 = 1.25rem */
  font-size: 14px; /* text-sm = 0.875rem */
  font-weight: normal;
}

.foot-logo {
  margin-top: 40px; /* mt-10 = 2.5rem */
  margin-bottom: 20px; /* mb-5 = 1.25rem */
}

.foot-logo img {
  width: 160px; /* w-40 = 10rem */
  margin-left: auto; /* mx-auto */
  margin-right: auto;
}

.copyright {
  padding-top: 8px; /* pt-2 = 0.5rem */
  padding-bottom: 56px; /* pb-14 = 3.5rem */
  background-color: #274f83; /* bg-blueen */
  font-size: 12px; /* text-xs = 0.75rem */
  font-weight: bold;
  text-align: center;
  color: white;
}

.foot-fix {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.foot-fix .request-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px; /* py-2 = 0.5rem なので上下8pxずつ */
  padding-bottom: 8px;
  font-size: 14px; /* text-sm = 0.875rem */
  text-align: center;
  color: white;
  border-right: 1px solid white; /* border-r border-r-white */
  background-color: #2a518a; /* bg-main */
}

.foot-fix .chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px; /* py-2 = 0.5rem */
  padding-bottom: 8px;
  font-size: 14px; /* text-sm = 0.875rem */
  text-align: center;
  color: white;
  background-color: #2a518a; /* bg-main */
  transition: filter 0.2s ease;
  border: 0px;
}

.foot-fix .online-btn {
  display: none; /* hidden */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  padding-top: 8px; /* py-2 = 0.5rem */
  padding-bottom: 8px;
  font-size: 14px; /* text-sm = 0.875rem */
  text-align: center;
  color: white;
  border-right: 1px solid white; /* border-r border-r-white */
  background-color: #2a518a; /* bg-main */
}

.foot-fix .btn-wrapper {
  display: flex;
  align-items: center;
  gap: 8px; /* gap-2 = 0.5rem = 8px */
  text-align: center;
  font-weight: bold !important;
}

.eyecatcher-no_chat,
.eyecatcher-in_chat {
  display: none !important;
}

@media (min-width: 1024px) {
  .lg\:block {
    display: block;
  }

  .lg\:hidden {
    display: none;
  }

  #header-hopecell {
    z-index: 50;
  }

  .head-menu-pc {
    display: block;
  }

  .head-menu-pc .ex-link {
    display: flex;
    font-size: 14px; /* lg:text-sm = 0.875rem = 14px */
  }

  .head-menu-pc .in-link {
    display: flex;
    margin-top: 16px; /* lg:my-4 = margin-top/bottom: 1rem = 16px */
    margin-bottom: 16px;
    font-size: 16px; /* lg:text-base = 1rem = 16px */
  }

  .head-menu-pc .head-border {
    margin-top: 0; /* lg:mt-0 */
  }

  .head-menu-sp-btn {
    display: none; /* lg:hidden */
  }

  .foot-menu-main {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
    margin-left: 64px; /* lg:mx-16 = 4rem = 64px */
    margin-right: 64px;
    padding-top: 56px; /* lg:pt-14 = 3.5rem = 56px */
    padding-bottom: 80px; /* lg:pb-20 = 5rem = 80px */
    column-gap: 40px; /* lg:gap-x-10 = 2.5rem = 40px */
  }

  .foot-menu-main a::before {
    display: block; /* lg:block */
  }

  .foot-menu-main a:hover::before {
    opacity: 1; /* hover:opacity-100 */
  }

  .foot-menu-main > div:nth-child(2),
  .foot-menu-main > div:nth-child(3),
  .foot-menu-main > div:nth-child(4) {
    width: 100%; /* lg:w-full */
  }

  .foot-menu-main .menu-contents {
    font-size: 14px; /* text-sm = 0.875rem */
    text-align: left;
  }

  .foot-menu-main .menu-icon {
    right: -20px; /* lg:-right-5 = -1.25rem */
  }

  .foot-menu-sns {
    gap: 32px; /* lg:gap-8 = 2rem */
    margin-top: 0; /* lg:mt-0 */
    margin-bottom: 80px; /* lg:mb-20 = 5rem */
  }

  .foot-menu-contact {
    gap: 0; /* lg:space-y-0 */
  }

  .foot-menu-contact .contact-tel {
    display: flex; /* lg:flex */
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    gap: 28px; /* lg:gap-7 = 1.75rem */
    text-align: left; /* lg:text-left */
  }

  .foot-menu-contact .contact-web {
    flex-direction: row; /* lg:flex */
    gap: 28px; /* lg:gap-7 = 1.75rem */
    text-align: left; /* lg:text-left */
  }

  .foot-menu-contact .contact-web .title {
    margin-bottom: 0; /* lg:mb-0 */
  }

  .foot-menu-contact .contact-web .img-arrow {
    width: auto;
  }

  .foot-menu-contact .contact-web .privacy {
    padding-top: 0; /* lg:pt-0 */
  }

  .foot-logo {
    margin-top: 80px; /* lg:mt-20 = 5rem */
    margin-bottom: 64px; /* lg:mb-16 = 4rem */
  }

  .foot-logo img {
    width: auto; /* lg:w-auto */
  }

  .copyright {
    padding-top: 20px; /* lg:py-5 = 1.25rem top and bottom */
    padding-bottom: 20px;
  }

  .foot-fix {
    display: block;
    right: 40px; /* lg:right-10 = 2.5rem */
    bottom: 40px; /* lg:bottom-10 = 2.5rem */
    left: auto;
    /* lg:space-y-5 = vertical spacing between children, 
       but display:block disables grid layout, so space-y-5 
       may need margin on children if necessary */
  }

  .foot-fix .request-btn {
    padding-top: 4px; /* lg:pt-1 = 0.25rem */
    padding-bottom: 0; /* lg:pb-0 */
    border-right: none; /* lg:border-r-0 */
    width: 96px; /* lg:w-24 = 96px */
    border-radius: 9999px; /* lg:rounded-full */
    aspect-ratio: 1 / 1; /* lg:aspect-square */
    /* lg:space-y-1 は flex の場合無効なので、縦間隔は別途調整してください */
  }

  .foot-fix .chat-btn {
    padding-top: 4px; /* lg:pt-1 = 0.25rem */
    padding-bottom: 0; /* lg:pb-0 */
    width: 96px; /* lg:w-24 = 96px */
    border-radius: 9999px; /* lg:rounded-full */
    aspect-ratio: 1 / 1; /* lg:aspect-square */
    margin-top: 20px;
    /* lg:space-y-1 は flex の場合効かないので必要なら個別に調整を */
  }

  .foot-fix .online-btn {
    display: flex; /* lg:flex */
    padding-top: 4px; /* lg:pt-1 = 0.25rem */
    padding-bottom: 0; /* lg:pb-0 */
    border-right: none; /* lg:border-r-0 */
    width: 96px; /* lg:w-24 = 96px */
    border-radius: 9999px; /* lg:rounded-full */
    aspect-ratio: 1 / 1; /* lg:aspect-square */
    margin-top: 20px;
    /* lg:space-y-1 は flex では効かないので別途調整 */
  }

  .foot-fix .btn-wrapper {
    flex-direction: column;
  }
}

@media (min-width: 1280px) {
  .head-menu-pc .ex-link {
    gap: 40px; /* xl:gap-10 = 2.5rem = 40px */
  }

  .head-menu-pc .in-link {
    gap: 48px; /* xl:gap-12 = 3rem = 48px */
  }

  .foot-menu-main {
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* xl:grid-cols-5 */
  }
}