@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&family=Montserrat:wght@400;500;600&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Outfit:wght@100..900&display=swap");

:root {
  --color-black: #000;
  --color-white: #fff;
  --color-ink: #123a63;
  --color-paper: #f8fbff;
  --color-ivory: #edf5ff;
  --color-mist: #dce9f5;
  --color-line: #eaf3fb;
  --color-wine: #2563a6;
  --color-beige: #f1f7fc;
  --color-navy: #123a63;
  --color-gold: #62a9d8;
  --color-ice: #e8f5ff;
  --color-blue: #cae5f6;
  --color-light-blue: #eef6ff;
  --color-light-gray: #dfeaf3;
  --color-dark: #183b56;
  --color-transparent-black: rgba(0, 0, 0, 0.5);

  --font-size-title: min(32px, 5vw);
  --font-size-title-sub: min(24px, 4.5vw);
  --font-size-text: min(16px, 4vw);
  --font-size-note: min(10px, 3vw);

  --color-line-height-title: 1.7;


  /* c-title */
  --c-title__weight: 500;
  --c-title__letter: 0.01em;
  --c-title__line  : 1.7;

  /* c-text */
  --c-text__line  : 1.8;
  --c-text__weight: 500;

  /* c-hero */
  --c-hero-slide-duration: 7000ms;
  --c-hero-fade-duration: 1200ms;
  --c-hero-zoom-scale: 1.055;
  --c-hero-color-indicator: rgba(23, 54, 95, 0.24);
}

@layer reset, base, layout, component, utilities;

/* =========================================================
 * reset
 * ========================================================= */
@layer reset {
  html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    /* Prevent adjustments of font size after orientation changes in iOS */
    word-break: normal;
    -moz-tab-size: 4;
    tab-size: 4;
  }

  *,
  ::before,
  ::after {
    background-repeat: no-repeat;
    /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
    box-sizing: inherit;
  }

  ::before,
  ::after {
    text-decoration: inherit;
    /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
    vertical-align: inherit;
  }

  * {
    padding: 0;
    /* Reset `padding` and `margin` of all elements */
    margin: 0;
  }
  /* # =================================================================
  	 # General elements
  	 # ================================================================= */
  hr {
    overflow: visible;
    /* Show the overflow in Edge and IE */
    height: 0;
    /* Add the correct box sizing in Firefox */
  }
  details,
  main {
    display: block;
    /* Render the `main` element consistently in IE. */
  }
  summary {
    display: list-item;
    /* Add the correct display in all browsers */
  }
  small {
    font-size: 80%;
    /* Set font-size to 80% in `small` elements */
  }
  [hidden] {
    display: none;
    /* Add the correct display in IE */
  }
  abbr[title] {
    border-bottom: none;
    /* Remove the bottom border in Chrome 57 */
    /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
    text-decoration: underline;
    text-decoration: underline dotted;
  }
  a {
    background-color: transparent;
    /* Remove the gray background on active links in IE 10 */
    color: inherit;
    text-decoration: none;
  }
  a:active,
  a:hover {
    outline-width: 0;
    /* Remove the outline when hovering in all browsers */
  }
  code,
  kbd,
  pre,
  samp {
    font-family: monospace, monospace;
    /* Specify the font family of code elements */
  }
  pre {
    font-size: 1em;
    /* Correct the odd `em` font sizing in all browsers */
  }
  b,
  strong {
    font-weight: bolder;
    /* Add the correct font weight in Chrome, Edge, and Safari */
  }
  /* https://gist.github.com/unruthless/413930 */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  /* # =================================================================
  	 # Forms
  	 # ================================================================= */
  input {
    border-radius: 0;
  }
  /* Replace pointer cursor in disabled elements */
  [disabled] {
    cursor: default;
  }
  [type=number]::-webkit-inner-spin-button,
  [type=number]::-webkit-outer-spin-button {
    height: auto;
    /* Correct the cursor style of increment and decrement buttons in Chrome */
  }
  [type=search] {
    -webkit-appearance: textfield;
    /* Correct the odd appearance in Chrome and Safari */
    outline-offset: -2px;
    /* Correct the outline style in Safari */
  }
  [type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
    /* Remove the inner padding in Chrome and Safari on macOS */
  }
  textarea {
    overflow: auto;
    /* Internet Explorer 11+ */
    resize: vertical;
    /* Specify textarea resizability */
  }
  button,
  input,
  optgroup,
  select,
  textarea {
    font: inherit;
    /* Specify font inheritance of form elements */
  }
  optgroup {
    font-weight: bold;
    /* Restore the font weight unset by the previous rule */
  }
  button {
    overflow: visible;
    /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
  }
  button,
  select {
    text-transform: none;
    /* Firefox 40+, Internet Explorer 11- */
  }
  /* Apply cursor pointer to button elements */
  button,
  [type=button],
  [type=reset],
  [type=submit],
  [role=button] {
    cursor: pointer;
    color: inherit;
  }
  /* Remove inner padding and border in Firefox 4+ */
  button::-moz-focus-inner,
  [type=button]::-moz-focus-inner,
  [type=reset]::-moz-focus-inner,
  [type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  /* Replace focus style removed in the border reset above */
  button:-moz-focusring,
  [type=button]::-moz-focus-inner,
  [type=reset]::-moz-focus-inner,
  [type=submit]::-moz-focus-inner {
    outline: 1px dotted ButtonText;
  }
  button,
  html [type=button],
  [type=reset],
  [type=submit] {
    -webkit-appearance: button;
    /* Correct the inability to style clickable types in iOS */
  }
  /* Remove the default button styling in all browsers */
  button,
  input,
  select,
  textarea {
    background-color: transparent;
    border-style: none;
  }
  /* Style select like a standard input */
  select {
    outline: none;
    background-color: #fff;
    border: #707070 solid 1px;
    border-radius: 3px;
    display: inline-block;
    padding: 0.2em 0.5em;
    width: 100%;
  }
  select::-ms-expand {
    display: none;
    /* Internet Explorer 11+ */
  }
  select::-ms-value {
    color: currentColor;
    /* Internet Explorer 11+ */
  }
  legend {
    border: 0;
    /* Correct `color` not being inherited in IE 8/9/10/11 */
    color: inherit;
    /* Correct the color inheritance from `fieldset` elements in IE */
    display: table;
    /* Correct the text wrapping in Edge and IE */
    max-width: 100%;
    /* Correct the text wrapping in Edge and IE */
    white-space: normal;
    /* Correct the text wrapping in Edge and IE */
    max-width: 100%;
    /* Correct the text wrapping in Edge 18- and IE */
  }
  ::-webkit-file-upload-button {
    /* Correct the inability to style clickable types in iOS and Safari */
    -webkit-appearance: button;
    color: inherit;
    font: inherit;
    /* Change font properties to `inherit` in Chrome and Safari */
  }
  /* # =================================================================
  	 # Specify media element style
  	 # ================================================================= */
  img {
    border-style: none;
    /* Remove border when inside `a` element in IE 8/9/10 */
  }
  /* Add the correct vertical alignment in Chrome, Firefox, and Opera */
  progress {
    vertical-align: baseline;
  }
  /* # =================================================================
  	 # Accessibility
  	 # ================================================================= */
  /* Hide content from screens but not screenreaders */
  @media screen {
    [hidden~=screen] {
      display: inherit;
    }
    [hidden~=screen]:not(:active):not(:focus):not(:target) {
      position: absolute !important;
      clip: rect(0 0 0 0) !important;
    }
  }
  /* Specify the progress cursor of updating elements */
  [aria-busy=true] {
    cursor: progress;
  }
  /* Specify the pointer cursor of trigger elements */
  [aria-controls] {
    cursor: pointer;
  }
  /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
  [aria-disabled] {
    cursor: default;
  }
  /*original*/
  html, body, div, span, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  abbr, address, cite, code,
  del, dfn, em, img, ins, kbd, q, samp,
  small, strong, sub, sup, var,
  b, i,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-weight: inherit;
    border-collapse: collapse;
  }
}

/* =========================================================
 * base
 * ========================================================= */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    padding: 0;
    background-color: var(--color-white);
    color: var(--color-dark);
    font-family: "Noto Serif JP", serif;
  }

  h2 {
    margin: 0;
  }

  li {
    list-style: none;
  }

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

  a {
    color: inherit;
    text-decoration: none;
  }

  p {
    line-height: inherit;
    font-size: inherit;
  }

  a:focus-visible,
  button:focus-visible {
    outline: 3px solid #59b6ee;
    outline-offset: 4px
  }
}

/* =========================================================
 * layout
 * ========================================================= */
@layer layout {
  /* main */
  .l-main {
    width: 100%;
    max-width: 1440px;
    margin: 12.3076923077vw auto 0;
  }
  @media (min-width: 768px) {
    .l-main {
      margin: min(70px, 4.8611111111vw) auto 0;
    }
  }

  /* l-kv */
  .l-kv {
    width: 100%;
  }
  .l-kv__copy {
    padding: 125px 56px 70px max(24px, calc((100vw - 1180px) / 2));
  }
  .l-kv__copy-title {
    font-size: clamp(34px, 3.2vw, 52px);
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: .08em;
    margin-bottom: 34px;
  }
  .l-kv__copy-title-sub {
    font-family: Montserrat, sans-serif;
    font-size: 10px;
    letter-spacing: .22em;
  }
  .l-kv__copy-text {
    font-size: var(--font-size-text);
    font-weight: var(--c-text__weight);
    line-height: var(--c-text__line);
  }

  .l-flex__row {
    display: flex;
    flex-direction: row;
  }

  .l-flex__column {
    display: flex;
    flex-direction: column;
  }

  .l-flex {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    gap: 0;
  }
  @media (min-width: 768px) {
    .l-flex {
      gap: 4px;
    }
  }

  /* l-grid */
  .l-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
  }
  @media (min-width: 768px) {
    .l-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .l-grid__card {
    padding: 7.6923076923vw;
    border: 1px solid #b9d0e2;
    box-shadow: 0 16px 40px rgba(25, 88, 136, .08)
  }
  @media (min-width: 768px) {
    .l-grid__card {
      padding: 30px;
    }
  }

  .l-grid__text {
    padding: 0;
  }
  @media (min-width: 768px) {
    .l-grid__text {
      padding: 80px 60px 0px 30px;
    }
  }
  .l-grid__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    row-gap: 30px;
  }
  @media (min-width: 768px) {
    .l-grid__head {
      grid-template-columns: 1fr 1fr;
      gap: 70px;
      row-gap: 0;
    }
  }
  @media (min-width: 768px) {
    .l-grid.is-6x4 {
      grid-template-columns: 0.6fr 0.4fr;
    }
    .l-grid.is-4x6 {
      grid-template-columns: 0.4fr 0.6fr;
    }
  }
  @media (min-width: 768px) {
    .l-grid.is-4x6 {
      grid-template-columns: 0.45fr 0.55fr;
    }
  }
  .l-grid__price {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    row-gap: 16px;
    align-items: center;
  }

  @media (min-width: 768px) {
    .l-grid__price {
      grid-template-columns: 0.8fr 0.6fr 1fr;
      gap: 16px;
      row-gap: 0;
    }
  }

  .l-header {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    background-color: var(--color-white);
    border-bottom: 1px solid #c8dceb;
    transition: background-color 0.3s ease-out 0.3s;
    backdrop-filter: blur(14px);
  }
  @media (max-width: 767.98px) {
    .is-menu-open .l-header {
      background-color: white;
    }
  }
  .l-header__inner {
    width: 100%;
    padding-left: 5.1282051282vw;
    padding-right: 5.1282051282vw;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }
  @media (max-width: 767.98px) {
    .l-header__inner {
      height: 12.3076923077vw;
    }
  }
  @media (min-width: 768px) {
    .l-header__inner {
      width: min(1345px, 93.4027777778vw);
      padding-top: min(15px, 1.0416666667vw);
      padding-bottom: min(15px, 1.0416666667vw);
    }
  }
  .l-header-nav__expand {
    width: 100%;
    height: auto;
    min-height :240px;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    background-color: var(--color-paper);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s;
  }
  .l-header-nav__expand-list {
    width: 100%;
    max-width: 1030px;
    margin: 0 auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
  }
  .l-header-nav__expand-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    font-size: clamp(12px, 1.5vw, 18px);
    border-bottom: 1px solid var(--color-black);
    cursor: pointer;
  }
  .l-header-nav__expand-item::after {
    content: ">";
    display: block;
  }
  .l-header-nav__expand-item:hover {
    opacity: 0.5;
  }

  @media (min-width: 768px) {
    .l-header-nav__item:hover .l-header-nav__expand {
      opacity: 1.0;
      visibility: visible;
      transform: translateY(0px);
    }
  }
  .l-header__logo {
    width: fit-content;
    line-height: 1;
    font-size: max(14px, 3.5897435897vw);
    font-family: "Noto Sans JP", serif;
    font-weight: 600;
  }
  @media (min-width: 768px) {
    .l-header__logo {
      width: min(400px, 27.7777777778vw);
      font-size: 24px;
    }
  }
  .l-header__box {
    width: max-content;
    min-width: 54px;
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .l-header__box {
      display: flex;
      margin-left: min(25px, 1.7361111111vw);
      gap: min(12px, 0.8333333333vw);
    }
  }
  .l-header__button {
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Noto Serif CJK JP", serif;
    font-weight: 500;
    font-size: clamp(14px, 2vw, 18px);
    color: #fff;
    line-height: 1.4;
    background-color: #1c70b7;
    border-color: #1c70b7;
    border-radius: 2px;
    transition: opacity 0.3s ease;
  }
  @media (min-width: 768px) {
    .l-header__button {
      padding: 0 1.0256410256vw 0;
    }
    .l-header__button:hover {
      opacity: 0.5;
    }
  }
  @media (min-width: 768px) {
    .l-header__button {
      padding: min(10px, 0.6944444444vw);
      font-weight: 500;
      font-size: min(20px, 1.3888888889vw);
      line-height: 1;
    }
  }
  .l-header__button.is-line {
    color: #06C755;
  }
  .l-header__trigger {
    margin-left: 3.8461538462vw;
    width: 6.6666666667vw;
    height: 2.8205128205vw;
    display: block;
    position: relative;
  }
  @media (min-width: 768px) {
    .l-header__trigger {
      display: none;
    }
  }
  .l-header__trigger::before,
  .l-header__trigger::after {
    content: "";
    margin: auto;
    width: 100%;
    height: 0.5128205128vw;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    background-color: #000000;
    transition: all 0.3s ease-out;
  }
  .l-header__trigger::before {
    top: 0%;
    transform-origin: 40% 50%;
  }
  .l-header__trigger::after {
    bottom: 0%;
    transform-origin: 40% 50%;
  }
  @media (max-width: 767.98px) {
    .is-menu-open .l-header__trigger::before {
      transform: rotate(-21.04deg);
      top: 50%;
    }
    .is-menu-open .l-header__trigger::after {
      transform: rotate(21.04deg);
      bottom: 50%;
    }
  }

  @media (max-width: 767.98px) {
    .l-header-nav {
      display: none;
    }
  }
  @media (min-width: 768px) {
    .l-header-nav {
      margin-left: auto;
      width: max-content;
      display: flex;
      align-items: center;
      gap: min(25px, 1.7361111111vw);
    }
  }
  .l-header-nav__list {
    width: max-content;
    display: flex;
  }
  @media (min-width: 768px) {
    .l-header-nav__list {
      gap: min(12px, 0.8333333333vw);
    }
  }
  .l-header-nav__item {
    font-family: 'Noto serif JP', serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500;
    font-size: 3.5897435897vw;
    cursor: pointer;
  }
  @media (min-width: 768px) {
    .l-header-nav__item {
      font-size: min(26px, 1.8055555556vw);
    }
  }
  .l-header-nav__box {
    display: flex;
    gap: 2.5641025641vw;
  }
  @media (min-width: 768px) {
    .l-header-nav__box {
      gap: min(12px, 0.8333333333vw);
    }
  }
  @media (max-width: 767.98px) {
    .l-header-nav .l-header__button {
      width: 38.4615384615vw;
      height: 10.5128205128vw;
      font-size: 3.5897435897vw;
      font-weight: 600;
    }
  }
  .l-header-nav__link {
    transition: opacity 0.3s ease;
  }
  @media (min-width: 768px) {
    .l-header-nav__link:hover {
      opacity: 0.5;
    }
  }

  .l-footer {
    height: auto;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-black);
    background-color: var(--color-white);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  }
  @media (min-width: 768px) {
    .l-footer {
      padding-top: min(17px, 1.1805555556vw);
    }
  }
  .l-footer__inner {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 0;
  }
  .l-footer__copyright {
    width: 100%;
    padding-top: 0.5128205128vw;
    padding-bottom: 0.5128205128vw;
    text-align: center;
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    font-size: 2.5641025641vw;
    background-color: var(--color-white);
  }
  @media (min-width: 768px) {
    .l-footer__copyright {
      padding-top: min(4.2px, 0.2916666667vw);
      padding-bottom: min(6.64px, 0.4611111111vw);
      font-size: min(12px, 0.8333333333vw);
    }
  }
  .l-footer__box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin: 0 0 30px;
  }

  .l-footer__button-text {
    min-width: 240px;
    padding: 8px 16px;
    background-color: #1c70b7;
    color: var(--color-white);
    border-radius: 2px;
    text-align: center;
  }

  .l-footer__button-text:hover {
    opacity: 0.5;
  }

  .l-footer__button-icon {
    display: block;
    width: 100%;
    max-width: 48px;
    background-color: var(--color-white);
    border-radius: 12px;
  }

  @media (max-width: 767.98px) {
    .l-nav {
      margin: auto;
      width: 100vw;
      height: 0dvh;
      overflow: hidden;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background-color: #F6F6F6;
      transition: height 0.3s ease-out;
    }
    .is-menu-open .l-nav {
      height: 100dvh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
  @media (min-width: 768px) {
    .l-nav {
      display: none;
    }
  }
  .l-nav__inner {
    margin: 17.4358974359vw auto 5.1282051282vw;
    width: 89.7435897436vw;
    min-height: calc(100dvh - 22.5641025641vw);
    height: auto;
    padding: 5.1282051282vw;
    display: flex;
    flex-direction: column;
    gap: 7.6923076923vw;
    box-sizing: border-box;
    background-color: #fff;
  }

  .l-nav__list {
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
  }
  @media (min-width: 768px) {
    .l-nav__list {
      flex-direction: row;
    }
  }
  .l-nav__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
  }
  @media (min-width: 768px) {
    .l-nav__list li {
      padding: 10px 0 10px;
      border: 0;
      text-align: left;
    }
  }
  .l-nav__list li::after {
    content: ">";
    display: block;
  }
  .l-nav__item {
    width: 100%;
    text-align: center;
    border: 0;
  }
  @media (min-width: 768px) {
    .l-nav__item {
      width: 23%;
    }
  }
  .l-nav__item-head {
    border-bottom: 1px solid var(--color-black);
    text-align: left;
  }
  @media (min-width: 768px) {
    .l-nav__item-head {
      text-align: center;
    }
  }
  .l-nav__item-head .l-nav__link {
    font-size: 24px;
  }
  .l-nav__item-body {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    padding: 10px 0 10px;
  }
  @media (min-width: 768px) {
    .l-nav__item-body {
      display: block;
      padding: 0;
    }
  }
  .l-nav__link {
    line-height: 1.6;
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
  }
  @media (min-width: 768px) {
    .l-nav__link {
      font-size: min(20px, 1.3888888889vw);
    }
  }
  .l-nav__box {
    width: 100%;
    display: flex;
    gap: 2.5641025641vw;
  }
  .l-nav__button {
    width: 100%;
    height: 10.5128205128vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.7948717949vw;
    text-align: center;
    color: #fff;
    background-color: #1c70b7;
    border-color: #1c70b7;
    border-radius: 2px;
  }
}

/* =========================================================
 * component
 * ========================================================= */
@layer component {
  /* section */
  .c-section {
    width: 100%;
    margin-bottom: 30px;
  }
  @media (min-width: 768px) {
    .c-section {
      margin-bottom: 0;
    }
  }

  .c-wrap {
    width: 100%;
    max-width: 1030px;
    margin: 0 auto 0;
    padding: 30px 16px 30px;
  }
  @media (min-width: 768px) {
    .c-wrap {
      padding: 60px 30px 60px;
    }
  }

  .c-wrap__small {
    width: 100%;
    max-width: 1030px;
    margin: 0 auto 0;
    padding: 20px 12px 20px;
  }
  @media (min-width: 768px) {
    .c-wrap__small {
      padding: 40px 20px 40px;
    }
  }

  .c-map {
    border: 12px solid #fff;
  }

  .c-map iframe {
    width: 100%;
    aspect-ratio: 6 / 4;
    filter: grayscale(1);
  }

  /* c-title */
  .c-title {
    font-size: var(--font-size-title);
    font-weight: var(--c-title__weight);
    font-family: "Noto Serif JP", serif;
    letter-spacing: var(--c-title__letter);
    line-height: var(--c-title__line);
    color: var(--color-black);
  }

  .c-title__sub {
    font-size: var(--font-size-title-sub);
    font-family: "Noto Serif JP", serif;
    line-height: 1.25;
    letter-spacing: .05em;
    color: var(--color-black);
  }

  /* c-text */
  .c-text {
    font-size: var(--font-size-text);
    font-weight: var(--c-text__weight);
    line-height: var(--c-text__line);
  }

  .c-text__large {
    font-size: 16px;
  }
  @media (min-width: 768px) {
    .c-text__large {
      font-size: 20px;
    }
  }

  .c-text__small {
    font-size: 16px;
  }
  @media (min-width: 768px) {
    .c-text__small {
      font-size: 14px;
    }
  }

  .c-text__ex-small {
    font-family: Montserrat, sans-serif;
    font-size: 10px;
    letter-spacing: .22em;
    color: #287ebc;
  }

  .c-text__note {
    font-size: 10px;
  }
  .c-text__note.small {
    font-size: 8px;
  }
  @media (min-width: 768px) {
    .c-text__note {
      font-size: 12px;
    }
    .c-text__note.small {
      font-size: 10px;
    }
  }

  .c-text__note.is-left__line {
    border-left: 1px solid #000;
    padding-left: 20px;
  }

  /* c-radius-box */
  .c-radius-box {
    border-radius: 5%;
    background-color: #eef7ff;
    overflow: hidden;
    background-color: var(--color-mist);
  }

  .c-radius-box__title {
    text-align: center;
    background-color: #1c70b7;
    color: #fff;
  }

  .c-radius-box__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5%;
    color: var(--color-black);
  }

  .c-radius-box__list--item {
    width: fit-content;
    padding: 10px;
    margin-bottom: 10px;
    font-size: var(--ci-text__size);
    font-weight: var(--c-text__weight);
    line-height: var(--c-text__line);
    color: var(--color-black);
    background-color: var(--color-white);
  }


  /* c-column */
  .c-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    row-gap: 30px;
  }
  @media (min-width: 768px) {
    .c-column {
      flex-direction: row;
      row-gap: 0;
    }
  }
  .c-column > div {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 30px;
    background-color: var(--color-white);
    border: 1px solid #b9d0e2;
    box-shadow: 0 16px 40px rgba(25, 88, 136, .08);
  }
  @media (min-width: 768px) {
    .c-column > div {
      min-height: 290px;
    }
    .c-column:not(:last-child) {
      border-right: 0;
    }
    .c-column.column2 > div {
      width: calc(100% / 2);
    }
    .c-column.column3 > div {
      width: calc(100% / 3);
    }
  }
  .c-column > div.is-border {
    border: 1px solid #bbb;
  }
  .c-column > div.no-border {
    border: 0 !important;
  }
  .c-column__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #287ebc;
  }
  .c-column__header::after {
    display: "block";
    content: "＋";
    width: 24px;
    height: 24px;
  }
  .c-column__image img {
    width: 100%;
  }

  .c-column__circle {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 30px;
  }
  @media (min-width: 768px) {
    .c-column__circle {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 55px;
      row-gap: 0;
      align-items: center;
    }
  }

  .c-column__circle-image img {
    border-radius: 50%;
  }

  .c-column__circle b {
    display: block;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
  }

  .c-column__circle small {
    display: block;
    color: #aaa;
    font-size: 16px;
    margin-top: 8px;
    text-align: center;
  }

  .c-column__grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  .c-column__grid.column2 {
    grid-template-columns: 1fr 1fr;
  }
  @media (min-width: 768px) {
    .c-column__grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .c-column__combination {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    row-gap: 30px;
  }
  @media (min-width: 768px) {
    .c-column__combination {
      flex-direction: row;
      row-gap: 0;
    }
  }
  .c-column__combination > div {
    display: flex;
    flex-direction: column;
    width: max-content;
    margin: 0;
    padding: 30px;
    background-color: transparent;
  }
  @media (min-width: 768px) {
    .c-column__combination > div {
      min-height: 290px;
    }
    .c-column.column3 > div {
      width: calc(100% / 3);
    }
  }
  .c-column__combination-item-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .c-column__combination-item-text .number {
    font-size: 18px;
    color: #287ebc;
  }

  .c-column__combination-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 48px;
    font-weight: 600;
    color: var(--color-gold);
  }

  /* c-indent-box */
  .c-indent-box {
    width: 100%;
  }
  @media (min-width: 768px) {
    .c-indent-box {
      min-height: 200px;
    }
  }

  .c-indent-box__title {
    font-size: var(--font-size-title-sub);
    font-weight: var(--c-title__weight);
    font-family: "Noto Serif JP", serif;
    letter-spacing: var(--c-title__letter);
    line-height: var(--c-title__line);
    color: var(--color-black);
  }

  .c-indent-box__body {
    padding-left: var(--font-size-title);
  }

  /* c-price-table */
  .c-price-table {
    width: 100%;
    border-collapse: collapse;
  }

  .c-price-table__header {
    display: none;
  }
  @media (min-width: 768px) {
    .c-price-table__header {
      display: table-header-group;
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 1px solid var(--color-transparent-black);;
      background-color: var(--color-mist);
    }
    .c-price-table__header th {
      padding: 10px;
      border-right: 1px solid var(--color-ice);
    }
    .c-price-table__header th:last-child {
      border-right: 0;
    }
  }

  .c-price-table__body {
    display: block;
    background-color: var(--color-white);
  }
  @media (min-width: 768px) {
    .c-price-table__body {
      display: table-row-group;
      background-color: var(--color-white);
    }
  }

  .c-price-table__body tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    border-bottom: 1px solid var(--color-transparent-black);
  }
  @media (min-width: 768px) {
    .c-price-table__body tr {
      display: table-row;
      padding: 0;
      border-top: 0;
      border-bottom: 0;
    }
  }

  .c-price-table__body th,
  .c-price-table__body td {
    padding: 10px 0 10px;
    border: 0;
    text-align: left;
  }
  @media (min-width: 768px) {
    .c-price-table__body th,
    .c-price-table__body td {
      padding: 10px;
      border-right: 1px solid var(--color-transparent-black);;
      border-bottom: 1px solid var(--color-transparent-black);;
    }
  }

  .c-price-table__body th {
    grid-column: 1 / -1;
    min-width: 0;
    font-weight: 500;
    border-bottom: 1px solid var(--color-transparent-black);;
    padding-top: 40px;
    color: var(--color-black);
  }
  @media (min-width: 768px) {
    .c-price-table__body th {
      display: table-cell;
      min-width: 120px;
      padding: 0;
      border-bottom: 0;
    }
  }
  @media (min-width: 768px) {
    .c-price-table__body td {
      display: table-cell;
    }
  }
  .c-price-table__body td:first-of-type {
    grid-column: 1;
    min-width: 0;
  }

  .c-price-table__body td:last-child {
    grid-column: 2;
    align-self: end;
    min-width: 0;
    white-space: nowrap;
    text-align: right;
  }
  @media (min-width: 768px) {
    .c-price-table__body td:last-child {
      min-width: 120px;
      white-space: normal;
      text-align: inherit;
    }
    .c-price-table__body th:last-child,
    .c-price-table__body td:last-child {
      border-right: 0;
    }

    .c-price-table__body tr:last-child th,
    .c-price-table__body tr:last-child td {
      border-bottom: 0;
    }
  }

  /* c-image-box */
  .c-media-box {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  @media (min-width: 768px) {
    .c-media-box {
      grid-template-columns: 1fr 1fr;
      margin-bottom: 30px;
      gap: 10px;
    }
  }

  .c-media-box__image {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .c-media-box__text {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
  }

  /* c-fit-box */
  .c-fit-box {
    width: fit-content;
    min-width: 360px;
    margin: 0 auto 7.6923076923vw;
  }
  @media (min-width: 768px) {
    .c-fit-box {
      max-width: 80%;
      min-width: unset;
    }
  }

  /* c-separator */
  .c-separateor-line {
    width: 100%;
    height: 2px;
    background-color: var(--color-ink);
    margin: 30px auto 30px;
  }

  .c-text__bottom {
    font-size: var(--font-size-title-sub);
  }
  @media (min-width: 768px) {
    .c-text__bottom {
      font-size: 24px;
    }
  }

  /* c-section */
  .c-section__text {
    padding: 0;
  }
  @media (min-width: 768px) {
    .c-section__text {
      padding: 0;
    }
  }

  .c-section__image {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: row;
    gap: 0;
  }
  .c-section__image > div {
    margin-bottom: 30px;
    padding-bottom: 10px;
  }
  .c-section__image .c-title {
    font-family: 'Outfit';
  }
  @media (min-width: 768px) {
    .c-section__image > div {
      margin-bottom: 0;
    }
  }
  .c-section__image > div {
      width: 50%;
  }
  @media (min-width: 768px) {
    .c-section__image {
      padding: 0;
    }
  }
  .c-section__image-box img {
    width: 100%;
  }

  .c-section__image-content {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .c-section__image-glass {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.6) 45%, #000 70%, #000 100%);
  }
  .c-section__image-text {
    color: #000;
  }
  @media (min-width: 768px) {
    .c-section__image-box {
      aspect-ratio: 1374/3417;
    }
  }

  /* c-picture-card */
  .c-picture-card {
    padding: 7.6923076923vw 7.6923076923vw 0 7.6923076923vw;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    font-size: 20px;
    text-align: center;
  }
  @media (min-width: 768px) {
    .c-picture-card {
      padding: 30px 30px 0 30px;
    }
  }

  .c-picture-card__title {
    padding-top: 7.6923076923vw;
    padding-bottom: 7.6923076923vw;
  }
  @media (min-width: 768px) {
    .c-picture-card__title {
      padding-top: 30px;
      padding-bottom: 30px;
    }
  }

  /* c-table__line */
  .c-table__line {
    margin-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #aaa;
  }
  @media (min-width: 768px) {
    .c-table__line {
      margin-top: 40px;
      padding-bottom: 0;
    }
  }

  .c-table__line-row,
  .c-table__line-row-single {
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    font-weight: 600;
  }

  .c-table__line-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    padding: 18px 0;
  }

  .c-table__line-row-single {
    padding: 0px 4px;
  }

  @media (min-width: 768px) {
    .c-table__line-row-single {
      padding: 10px;
    }
  }

  .c-table__line-row-single .c-text {
    font-size: 10px;
  }
  @media (min-width: 768px) {
    .c-table__line-row-single .c-text {
      font-size: var(--font-size-text);
    }
  }

  /* c-tale__div */
  .c-table__div {
    display: flex;
    flex-direction: row;
    width: 100%;
    border-top: 1px solid #222;
    font-size: 12px;
  }
  @media (min-width: 768px) {
    .c-table__div {
      flex-direction: column;
    }
  }
  .c-table__div-row {
    display: grid;
    grid-template-columns: 1fr;
    flex: 1;
    border-right: 1px solid #000;
  }
  .c-table__div-row:last-child {
    border-right: 0;
  }
  @media (min-width: 768px) {
    .c-table__div-row {
      grid-template-columns: 0.7fr 0.7fr 1fr;
      margin-bottom: 0;
      border-right: 0;
    }
  }
  .c-table__div-row:not(:first-child) {
    height: auto;
    min-height: 95px;
    font-size: 18px;
  }
  .c-table__div-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 6px;
    border-bottom: 1px solid #bbb;
    font-size: 10px;
    text-align: center;
  }
  @media (min-width: 768px) {
    .c-table__div-cell {
      align-items: center;
      justify-content: flex-start;
      padding: 16px 16px;
      font-size: 18px;
      text-align: left;
    }
  }

  .c-table__div-cell .material-icons {
    font-size: 10px;
  }
  @media (min-width: 768px) {
    .c-table__div-cell .material-icons {
      font-size: 24px;
    }
  }

  /* c-list-text */
  .c-list-text {
    display: grid;
    grid-template-columns: minmax(auto, 70px) 1fr;
    gap: 20px;
  }
  .c-list-text__head {
    text-align: justify;
    text-align-last: justify;
  }
  .c-list-text__body {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .c-list-text__svg {
    display: inline;
    width: 48px;
    height: 24px;
  }

  /* c-list__point */
  .c-list__point {
    border-top: 1px solid #ccc;
  }

  .c-list__point-item {
    padding-bottom: 7.6923076923vw;
    margin-bottom: 2.5641025641vw;
    border-bottom: 1px solid #ddd;
  }
  @media (min-width: 768px) {
    .c-list__point-item {
      padding-bottom: 30px;
      margin-bottom: 10px;
    }
  }

  .c-list__point-item .c-text__small {
    font-size: 14px
  }
  @media (min-width: 768px) {
    .c-list__point-item .c-text__small {
      font-size: 16px;
    }
  }

  /* c-circle */
  .c-circle_number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    aspect-ratio: 1 / 1;
    font-family: 'Outfit';
    font-size: 16px;
    color: #000;
    background-color: transparent;
    border-radius: 50%;
    border: 2px solid #000;
  }

  /* c-icon */
  .c-icon.material-symbols-outlined {
    line-height: 1.4;
  }

  .c-icon__image {
    width: 100%;
    max-width: 56px;
  }

  .c-table__div-cell-price {
    width: 100%;
    text-align: center;
    font-size: 20px;
  }
  .c-table__div-cell-price.small {
    font-size: 16px;
  }
  @media (min-width: 768px) {
    .c-table__div-cell-price {
      text-align: right;
      font-size: 24px;
    }
    .c-table__div-cell-price.small {
      font-size: 16px;
    }
  }
  .c-arrow__price {
    width: 100%;
    max-width: 120px;
    margin: 0 auto 0;
    position: relative;
  }

  /* c-hero */
  .c-hero {
    width: 100%;
    height: auto;
    background-color: #fff;
  }

  .c-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .c-hero__inner {
      grid-template-columns: 0.6fr 0.4fr;
      max-width: 1030px;
      height: 90vh;
      margin: 0 auto 0;
    }
  }

  .c-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(36px, 4vw, 120px) clamp(24px, 3.1vw, 84px);
    position: relative;
    z-index: 3;
    background: linear-gradient(90deg, #fff 0%, #fafafa 67%, rgba(250, 250, 250, 0.88) 79%, transparent 100%);
  }

  .c-hero__eyebrow {
    margin: 0 0 28px;
    color: var(--color-gold);
    font-family: Georgia, serif;
    font-size: clamp(12px, 1vw, 16px);
    letter-spacing: 0.28em;
  }

  .c-hero__title {
    max-width: 760px;
    margin: 0;
    color: var(--color-ink);
    font-family: "Noto Serif JP", serif;
    font-size: clamp(32px, 3.25vw, 64px);
    font-weight: 400;
    line-height: 1.42;
    letter-spacing: 0.045em;
  }

  .c-hero__lead {
    margin: 30px 0 0;
    color: var(--color-ink);
    font-family: "Noto Serif JP", serif;
    font-size: clamp(15px, 1.3vw, 21px);
    letter-spacing: 0.08em;
  }

  .c-hero__description {
    max-width: 600px;
    margin: 28px 0 0;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 2;
  }

  .c-hero__actions {
    display: flex;
    gap: 16px;
    margin-top: 36px;
  }

  .c-hero__action {
    display: inline-flex;
    min-width: 190px;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid var(--color-gold);
    color: #8e713b;
    background-color: #fff;
    text-decoration: none;
    transition: color 0.25s, background 0.25s;
  }

  .c-hero__action--primary {
    color: #fff;
    background-color: #1c70b7;
    border-color: #1c70b7;
  }
  .c-hero__action:hover {
    color: #fff;
    background: #123a63;

  }

  /* c-step-list */
  .c-step-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    row-gap: 60px;
  }
  @media (min-width: 768px) {
    .c-step-list {
      max-width: 840px;
      margin: 0 auto 0;
    }
  }

  .c-step-list__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 110px;
    border: 1px solid #000;
    position: relative;
  }
  @media (min-width: 768px) {
    .c-step-list__item {
      flex-direction: row;
    }
  }

  .c-step-list__item:not(:last-child)::after {
    content: "▼";
    display: block;
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
  }

  .c-step-list__item-head {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-right: 1px solid #000;
  }

  .c-step-list__item-body {
    display: grid;
    grid-template-rows: 0.4fr 1fr;
    width: 100%;
    height: 100%;
  }

  .c-step-list__item-body-title {
    display: flex;
    align-items: start;
    justify-content: left;
    border-bottom: 1px solid #000;
  }

  .c-step-list__item-body-text {
    display: flex;
    align-items: start;
    justify-content: left;
    background-color: #f8fbff;
  }

  /* c-number-list */
  .c-number-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .c-number-list__item {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    margin: 0 auto 0;
    border: 1px solid var(--color-ink);
  }
  @media (min-width: 768px) {
    .c-number-list__item {
      width: 80%;
    }
  }

  .c-number-list__item-head {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--color-ink);
    padding: 0 16px 0;
    text-align: center;
  }
  @media (min-width: 768px) {
    .c-number-list__item-head {
      padding: 0 30px 0;
    }
  }

  .c-number-list__item-body {
    display: flex;
    flex-direction: column;
  }

  .c-number-list__item-body-title {
    width: 100%;
    background-color: var(--color-mist);
    padding: 10px;
    border-bottom: 1px solid var(--color-ink);
  }

  .c-number-list__item-body-text {
    width: 100%;
    background-color: #eef7ff;
    padding: 10px;
  }

  /* Block: c-hero-slider */
  .c-hero-slider {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    touch-action: pan-y;
  }

  .c-hero-slider__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--c-hero-fade-duration) ease, visibility 0s linear var(--c-hero-fade-duration);
  }

  .c-hero-slider__slide.is-active {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  .c-hero-slider__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transform-origin: var(--origin, center);
    will-change: transform;
    filter: saturate(.82) contrast(.96) hue-rotate(5deg);
  }

  .c-hero-slider__slide.is-active .c-hero-slider__image {
    animation: c-hero-slider-zoom var(--c-hero-slide-duration) linear both;
  }

  @keyframes c-hero-slider-zoom {
    from { transform: scale(1); }
    to { transform: scale(var(--c-hero-zoom-scale)); }
  }

  .c-hero-slider__controls {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 15px;
    position: absolute;
    right: clamp(24px, 4vw, 70px);
    bottom: clamp(24px, 5vh, 58px);
    z-index: 4;
    border-radius: 999px;
    background-color: transparent;
  }

  .c-hero-slider__indicators {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .c-hero-slider__indicator {
    width: 9px;
    height: 9px;
    padding: 0;
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--c-hero-color-indicator);
    cursor: pointer;
    transition: width 0.45s ease, background 0.25s ease;
  }

  .c-hero-slider__indicator::after {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: inherit;
    background: var(--color-gold);
    transform: scaleX(var(--progress, 0));
    transform-origin: left center;
  }

  .c-hero-slider__indicator.is-active {
    width: 96px;
    height: 6px;
    background: rgba(183, 151, 88, 0.25);
  }

  .c-hero-slider__indicator:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 4px;
  }

  .c-hero {
    display: block;
    min-height: auto;
  }
  .c-hero__copy {
    padding: 54px 24px 64px;
  }
  .c-hero__copy::after {
    display: none;
  }
  .c-hero__title {
    font-size: clamp(30px, 7.6vw, 48px);
  }
  .c-hero__actions {
    flex-direction: column;
    color: #183b56;
  }
  .c-hero__action {
    width: 100%;
  }

  .c-hero-slider {
    min-height: 58svh;
  }
  .c-hero-slider__controls {
    right: 50%;
    bottom: 18px;
    transform: translateX(50%);
  }

  @media (prefers-reduced-motion: reduce) {
    .c-hero-slider__slide {
      transition-duration: 0.01ms;
    }

    .c-hero-slider__slide.is-active .c-hero-slider__image {
      animation: none;
    }
  }

}

/* =========================================================
 * utilities
 * ========================================================= */
@layer utilities {
  /* text-align */
  .u-text-center {
    text-align: center;
  }
  .u-text-left {
    text-align: left;
  }
  .u-text-right {
    text-align: right;
  }

  /* margin-top */
  .u-mt-30 {
    margin-top: 7.6923076923vw !important;
  }
  @media (min-width: 768px) {
    .u-mt-30 {
      margin-top: 30px !important;
    }
  }

  /* margin-bottom */
  .u-mb-10 {
    margin-bottom: 2.5641025641vw !important;
  }
  @media (min-width: 768px) {
    .u-mb-10 {
      margin-bottom: 10px !important;
    }
  }
  .u-mb-20 {
    margin-bottom: 5.1282051282vw !important;
  }
  @media (min-width: 768px) {
    .u-mb-20 {
      margin-bottom: 20px !important;
    }
  }
  .u-mb-30 {
    margin-bottom: 7.6923076923vw !important;
  }
  @media (min-width: 768px) {
    .u-mb-30 {
      margin-bottom: 30px !important;
    }
  }
  .u-mb-40 {
    margin-bottom: 10.2564102564vw !important;
  }
  @media (min-width: 768px) {
    .u-mb-40 {
      margin-bottom: 40px !important;
    }
  }

  /* margin-top */
  .u-mt-10 {
    margin-top: 2.5641025641vw !important;
  }
  @media (min-width: 768px) {
    .u-mt-10 {
      margin-top: 10px !important;
    }
  }
  .u-mt-40 {
    margin-top: 10.2564102564vw !important;
  }
  @media (min-width: 768px) {
    .u-mt-40 {
      margin-top: 40px !important;
    }
  }

  /* mark */
  .has-mark {
    display: flex;
    flex-direction: row;
    gap: 2px;
  }
  .has-mark::before {
    content: "※";
    font-size: inherit;
  }

  /* only */
  @media (max-width: 768px) {
    .u-pc-only {
      display: none !important;
    }
  }
  @media (min-width: 768px) {
    .u-sp-only {
      display: none !important;
    }
  }

  /* menu */
  .is-menu-open {
    overflow: hidden;
  }
}

.ai-center  { align-items: center; }
.ai-start   { align-items: flex-start; }
.ai-end     { align-items: flex-end; }
.ai-stretch { align-items: stretch; }
.is-black {
  background-color: #000;
  color: #fff;
}

.is-bold {
  font-weight: 600;
}