@charset "UTF-8";
@media screen and (min-width: 1024px) {
  .pcnone {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .spnone {
    display: none;
  }
}
.fade {
  transition: 0.3s ease-in-out;
}
.fade:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
.reverse {
  flex-direction: row-reverse;
}
.relative {
  position: relative;
}
/* ============================================================================
   Variables
   ========================================================================= */ :root {
  --color-black: #191e2e;
  --color-white: #ffffff;
  --color-red: #c53d4b;
  --color-blue: #003894;
  --color-blue-light: #136cfa;
  --color-gray-bg: #f3f6fa;
  --color-gray-text: #7a8192;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "Montserrat", sans-serif;
}
/* 共通のコンテンツ幅設定 */
.l-container {
  max-width: 1160px; /* Figma基準の最大幅 */
  margin: 0 auto;
  padding: 0 20px; /* 画面端の余白（必要に応じて調整） */
  width: 100%;
}
/* flexの共通設定 */
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* flexの共通設定 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  /* clamp(最小値, 推奨値, 最大値) */
  /* 推奨値は 331 / 375 * 100 = 88.26vw */
  width: clamp(331px, 88.26vw, 1160px);
  /* 中央寄せ */
  margin-inline: auto;
  /* 念のため、非常に小さい画面で331px固定だとハミ出すのを防ぐ */
  max-width: 100%;
}
.relative {
  position: relative;
}
.btn-blue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-blue);
  color: var(--color-white);
  text-decoration: none;
  font-weight: bold;
  padding: 12px 12px 12px 30px;
  border-radius: 50px;
  width: 240px;
  transition: 0.3s;
  font-family: "Noto Sans JP", sans-serif;
  border: 1px solid var(--color-blue);
}
.btn-blue-arrow {
  background-color: var(--color-blue);
  color: var(--color-white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-blue-arrow::after {
  content: "";
  background-image: url(/create/image/common/arrow-white.svg);
  width: 15px;
  height: 12px;
  aspect-ratio: 5/4;
  display: inline-block;
}
.btn-blue:hover {
  background-color: #fff;
  color: var(--color-blue);
}
.btn-white {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-white);
  color: var(--color-blue);
  text-decoration: none;
  font-weight: bold;
  padding: 12px 12px 12px 30px;
  border-radius: 50px;
  /* width: 240px; */
  transition: 0.3s;
  font-family: "Noto Sans JP", sans-serif;
  border: 1px solid var(--color-white);
}
.btn-white-arrow {
  background-color: var(--color-blue);
  color: var(--color-white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
}
.btn-white-arrow::after {
  content: "";
  background-image: url(/create/image/common/arrow-white.svg);
  width: 15px;
  height: 12px;
  aspect-ratio: 5/4;
  display: inline-block;
}
.btn-white:hover {
  background-color: var(--color-blue);
  color: #fff !important;
}
.btn-white:hover a span {
  color: #fff !important;
}
.btn-center {
  margin: 0 auto;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .spbtncenter {
    margin: 0 auto;
  }
}

/* page-transition.css の中身をそのままここに貼る */
.pt-overlay {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.35s ease;
}
.pt-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}