@charset "UTF-8";
@layer normalize, destyle;
@layer normalize {
  /* Document
   * ========================================================================== */
  /**
   * Add border box sizing in all browsers (opinionated).
   */
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  /**
   * 1. Add text decoration inheritance in all browsers (opinionated).
   * 2. Add vertical alignment inheritance in all browsers (opinionated).
   */
  ::before,
  ::after {
    text-decoration: inherit; /* 1 */
    vertical-align: inherit; /* 2 */
  }
  /**
   * 1. Use the default cursor in all browsers (opinionated).
   * 2. Change the line height in all browsers (opinionated).
   * 3. Use a 4-space tab width in all browsers (opinionated).
   * 4. Remove the grey highlight on links in iOS (opinionated).
   * 5. Prevent adjustments of font size after orientation changes in
   *    IE on Windows Phone and in iOS.
   * 6. Breaks words to prevent overflow in all browsers (opinionated).
   */
  html {
    cursor: default; /* 1 */
    line-height: 1.5; /* 2 */
    -moz-tab-size: 4; /* 3 */
    -o-tab-size: 4;
    tab-size: 4; /* 3 */
    -webkit-tap-highlight-color: transparent;
    -ms-text-size-adjust: 100%; /* 5 */
    -webkit-text-size-adjust: 100%; /* 5 */
    word-break: break-word; /* 6 */
  }
  /* Sections
   * ========================================================================== */
  /**
   * Remove the margin in all browsers (opinionated).
   */
  body {
    margin: 0;
  }
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Edge, Firefox, and Safari.
   */
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  /* Grouping content
   * ========================================================================== */
  /**
   * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
   */
  dl dl,
  dl ol,
  dl ul,
  ol dl,
  ul dl {
    margin: 0;
  }
  /**
   * Remove the margin on nested lists in Edge 18- and IE.
   */
  ol ol,
  ol ul,
  ul ol,
  ul ul {
    margin: 0;
  }
  /**
   * 1. Add the correct sizing in Firefox.
   * 2. Show the overflow in Edge 18- and IE.
   */
  hr {
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  /**
   * Add the correct display in IE.
   */
  main {
    display: block;
  }
  /**
   * Remove the list style on navigation lists in all browsers (opinionated).
   */
  nav ol,
  nav ul {
    list-style: none;
    padding: 0;
  }
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  /* Text-level semantics
   * ========================================================================== */
  /**
   * Remove the gray background on active links in IE 10.
   */
  a {
    background-color: transparent;
  }
  /**
   * Add the correct text decoration in Edge 18-, IE, and Safari.
   */
  abbr[title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  b,
  strong {
    font-weight: bolder;
  }
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  /**
   * Add the correct font size in all browsers.
   */
  small {
    font-size: 80%;
  }
  /* Embedded content
   * ========================================================================== */
  /*
   * Change the alignment on media elements in all browsers (opinionated).
   */
  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
  }
  /**
   * Add the correct display in IE 9-.
   */
  audio,
  video {
    display: inline-block;
  }
  /**
   * Add the correct display in iOS 4-7.
   */
  audio:not([controls]) {
    display: none;
    height: 0;
  }
  /**
   * Remove the border on iframes in all browsers (opinionated).
   */
  iframe {
    border-style: none;
  }
  /**
   * Remove the border on images within links in IE 10-.
   */
  img {
    border-style: none;
  }
  /**
   * Change the fill color to match the text color in all browsers (opinionated).
   */
  svg:not([fill]) {
    fill: currentColor;
  }
  /**
   * Hide the overflow in IE.
   */
  svg:not(:root) {
    overflow: hidden;
  }
  /* Tabular data
   * ========================================================================== */
  /**
   * Collapse border spacing in all browsers (opinionated).
   */
  table {
    border-collapse: collapse;
  }
  /* Forms
   * ========================================================================== */
  /**
   * Remove the margin on controls in Safari.
   */
  button,
  input,
  select {
    margin: 0;
  }
  /**
   * 1. Show the overflow in IE.
   * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
   */
  button {
    overflow: visible; /* 1 */
    text-transform: none; /* 2 */
  }
  /**
   * Correct the inability to style buttons in iOS and Safari.
   */
  button,
  [type=button],
  [type=reset],
  [type=submit] {
    -webkit-appearance: button;
  }
  /**
   * 1. Change the inconsistent appearance in all browsers (opinionated).
   * 2. Correct the padding in Firefox.
   */
  fieldset {
    border: 1px solid #a0a0a0; /* 1 */
    padding: 0.35em 0.75em 0.625em; /* 2 */
  }
  /**
   * Show the overflow in Edge 18- and IE.
   */
  input {
    overflow: visible;
  }
  /**
   * 1. Correct the text wrapping in Edge 18- and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   */
  legend {
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    white-space: normal; /* 1 */
  }
  /**
   * 1. Add the correct display in Edge 18- and IE.
   * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
   */
  progress {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
  }
  /**
   * Remove the inheritance of text transform in Firefox.
   */
  select {
    text-transform: none;
  }
  /**
   * 1. Remove the margin in Firefox and Safari.
   * 2. Remove the default vertical scrollbar in IE.
   * 3. Change the resize direction in all browsers (opinionated).
   */
  textarea {
    margin: 0; /* 1 */
    overflow: auto; /* 2 */
    resize: vertical; /* 3 */
  }
  /**
   * Remove the padding in IE 10-.
   */
  [type=checkbox],
  [type=radio] {
    padding: 0;
  }
  /**
   * 1. Correct the odd appearance in Chrome, Edge, and Safari.
   * 2. Correct the outline style in Safari.
   */
  [type=search] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  /**
   * Correct the cursor style of increment and decrement buttons in Safari.
   */
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }
  /**
   * Correct the text style of placeholders in Chrome, Edge, and Safari.
   */
  ::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
  }
  /**
   * Remove the inner padding in Chrome, Edge, and Safari on macOS.
   */
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  /**
   * 1. Correct the inability to style upload buttons in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  /**
   * Remove the inner border and padding of focus outlines in Firefox.
   */
  ::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  /**
   * Restore the focus outline styles unset by the previous rule in Firefox.
   */
  :-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  /**
   * Remove the additional :invalid styles in Firefox.
   */
  :-moz-ui-invalid {
    box-shadow: none;
  }
  /* Interactive
   * ========================================================================== */
  /*
   * Add the correct display in Edge 18- and IE.
   */
  details {
    display: block;
  }
  /*
   * Add the correct styles in Edge 18-, IE, and Safari.
   */
  dialog {
    background-color: white;
    border: solid;
    color: black;
    display: block;
    height: -moz-fit-content;
    height: fit-content;
    left: 0;
    margin: auto;
    padding: 1em;
    position: absolute;
    right: 0;
    width: -moz-fit-content;
    width: fit-content;
  }
  dialog:not([open]) {
    display: none;
  }
  /*
   * Add the correct display in all browsers.
   */
  summary {
    display: list-item;
  }
  /* Scripting
   * ========================================================================== */
  /**
   * Add the correct display in IE 9-.
   */
  canvas {
    display: inline-block;
  }
  /**
   * Add the correct display in IE.
   */
  template {
    display: none;
  }
  /* User interaction
   * ========================================================================== */
  /*
   * 1. Remove the tapping delay in IE 10.
   * 2. Remove the tapping delay on clickable elements
        in all browsers (opinionated).
   */
  a,
  area,
  button,
  input,
  label,
  select,
  summary,
  textarea,
  [tabindex] { /* 1 */
    touch-action: manipulation; /* 2 */
  }
  /**
   * Add the correct display in IE 10-.
   */
  [hidden] {
    display: none;
  }
  /* Accessibility
   * ========================================================================== */
  /**
   * Change the cursor on busy elements in all browsers (opinionated).
   */
  [aria-busy=true] {
    cursor: progress;
  }
  /*
   * Change the cursor on control elements in all browsers (opinionated).
   */
  [aria-controls] {
    cursor: pointer;
  }
  /*
   * Change the cursor on disabled, not-editable, or otherwise
   * inoperable elements in all browsers (opinionated).
   */
  [aria-disabled=true],
  [disabled] {
    cursor: not-allowed;
  }
  /*
   * Change the display on visually hidden accessible elements
   * in all browsers (opinionated).
   */
  [aria-hidden=false][hidden] {
    display: initial;
  }
  [aria-hidden=false][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute;
  }
}
@layer destyle {
  /*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
  /* Reset box-model and set borders */
  /* ============================================ */
  *,
  ::before,
  ::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
    min-width: 0;
  }
  /* Document */
  /* ============================================ */
  /**
   * 1. Correct the line height in all browsers.
   * 2. Prevent adjustments of font size after orientation changes in iOS.
   * 3. Remove gray overlay on links for iOS.
   */
  html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -webkit-tap-highlight-color: transparent; /* 3*/
  }
  /* Sections */
  /* ============================================ */
  /**
   * Remove the margin in all browsers.
   */
  body {
    margin: 0;
  }
  /**
   * Render the `main` element consistently in IE.
   */
  main {
    display: block;
  }
  /* Vertical rhythm */
  /* ============================================ */
  p,
  table,
  blockquote,
  address,
  pre,
  iframe,
  form,
  figure,
  dl {
    margin: 0;
  }
  /* Headings */
  /* ============================================ */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
  }
  /* Lists (enumeration) */
  /* ============================================ */
  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Lists (definition) */
  /* ============================================ */
  dt {
    font-weight: bold;
  }
  dd {
    margin-left: 0;
  }
  /* Grouping content */
  /* ============================================ */
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
    border-top-width: 1px;
    margin: 0;
    clear: both;
    color: inherit;
  }
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: inherit; /* 2 */
  }
  address {
    font-style: inherit;
  }
  /* Text-level semantics */
  /* ============================================ */
  /**
   * Remove the gray background on active links in IE 10.
   */
  a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
  }
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted; /* 2 */
  }
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  b,
  strong {
    font-weight: bolder;
  }
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: inherit; /* 2 */
  }
  /**
   * Add the correct font size in all browsers.
   */
  small {
    font-size: 80%;
  }
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  /* Replaced content */
  /* ============================================ */
  /**
   * Prevent vertical alignment issues.
   */
  svg,
  img,
  embed,
  object,
  iframe {
    vertical-align: bottom;
  }
  /* Forms */
  /* ============================================ */
  /**
   * Reset form fields to make them styleable.
   * 1. Make form elements stylable across systems iOS especially.
   * 2. Inherit text-transform from parent.
   */
  button,
  input,
  optgroup,
  select,
  textarea {
    -webkit-appearance: none; /* 1 */
    -moz-appearance: none;
    appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    text-align: inherit;
    text-transform: inherit; /* 2 */
  }
  /**
   * Correct cursors for clickable elements.
   */
  button,
  [type=button],
  [type=reset],
  [type=submit] {
    cursor: pointer;
  }
  button:disabled,
  [type=button]:disabled,
  [type=reset]:disabled,
  [type=submit]:disabled {
    cursor: default;
  }
  /**
   * Improve outlines for Firefox and unify style with input elements & buttons.
   */
  :-moz-focusring {
    outline: auto;
  }
  select:disabled {
    opacity: inherit;
  }
  /**
   * Remove padding
   */
  option {
    padding: 0;
  }
  /**
   * Reset to invisible
   */
  fieldset {
    margin: 0;
    padding: 0;
    min-width: 0;
  }
  legend {
    padding: 0;
  }
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  progress {
    vertical-align: baseline;
  }
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  textarea {
    overflow: auto;
  }
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  [type=number]::-webkit-inner-spin-button,
  [type=number]::-webkit-outer-spin-button {
    height: auto;
  }
  /**
   * Correct the outline style in Safari.
   */
  [type=search] {
    outline-offset: -2px; /* 1 */
  }
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  [type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Fix font inheritance.
   */
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  /**
   * Fix appearance for Firefox
   */
  [type=number] {
    -moz-appearance: textfield;
  }
  /**
   * Clickable labels
   */
  label[for] {
    cursor: pointer;
  }
  /* Interactive */
  /* ============================================ */
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  details {
    display: block;
  }
  /*
   * Add the correct display in all browsers.
   */
  summary {
    display: list-item;
  }
  /*
   * Remove outline for editable content.
   */
  [contenteditable]:focus {
    outline: auto;
  }
  /* Tables */
  /* ============================================ */
  /**
  1. Correct table border color inheritance in all Chrome and Safari.
  */
  table {
    border-color: inherit; /* 1 */
    border-collapse: collapse;
  }
  caption {
    text-align: left;
  }
  td,
  th {
    vertical-align: top;
    padding: 0;
  }
  th {
    text-align: left;
    font-weight: bold;
  }
  .wp-block-content * {
    all: revert-layer;
  }
}
/* ============================================================
/* variables
============================================================ */
:root {
  /* color */
  --color-base: #343434;
  --color-primary: #0366b3;
  --color-primary-container: #eef7fe;
  --color-secondary: #fbb03f;
  --color-secondary-container: #f7f6f5;
}

/* ============================================================
/* base
============================================================ */
body {
  font-family: "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--color-base);
}

@media screen and (min-width: 812px) {
  html {
    font-size: 62.5%;
  }
  body {
    font-size: 1.6rem;
    line-height: 1.8;
  }
}
@media screen and (min-width: 812px) and (max-width: 1240px) {
  html {
    font-size: 0.8064516129vw;
  }
}
@media screen and (max-width: 811px) {
  html {
    font-size: 14px;
  }
  body {
    min-width: 320px;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 520px) {
  html {
    font-size: 2.67vw;
  }
}
/* ============================================================
/* module
============================================================ */
img {
  max-width: 100%;
  height: auto;
}

@media (hover: hover) {
  a[href^="tel:"] {
    pointer-events: none;
    text-decoration: none;
  }
}
a,
button {
  color: inherit;
  text-decoration: underline;
}

@media (hover: hover) {
  a:hover,
  button:hover {
    text-decoration: none;
  }
}
/* breakpoint only layout */
@media screen and (min-width: 812px) {
  .sp-only {
    display: none !important;
  }
}
@media screen and (max-width: 811px) {
  .pc-only {
    display: none !important;
  }
}
/* icon
============================================================ */
.m-icon-check, .m-icon-blink {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
.m-icon-check:before, .m-icon-blink:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center center;
  background-size: contain;
}

.m-icon-blink:before {
  background-image: url("../img/icon_blink.png");
}

.m-icon-check:before {
  background-image: url("../img/icon_check.png");
}

/* btn
============================================================ */
.m-btn {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 100%;
  text-decoration: none;
}

.m-btn {
  margin: 0 auto;
  color: #fff;
  justify-content: center;
  background: var(--color-secondary);
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: 0.15em 0.15em 0 0 #c08832;
}
.m-btn .m-arrow {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-top: 0.15em solid #fff;
  border-right: 0.15em solid #fff;
  transform: rotate(45deg);
  margin-right: 0.6em;
}
@media (hover: hover) {
  .m-btn {
    transition: all 0.2s;
  }
  .m-btn:hover {
    transform: translate(0.15em, 0.15em);
    box-shadow: 0 0 0 0;
  }
}
@media screen and (min-width: 812px) {
  .m-btn {
    width: 52rem;
    height: 10rem;
    font-size: 3rem;
    border-radius: 10rem;
  }
}
@media screen and (max-width: 811px) {
  .m-btn {
    width: 25rem;
    height: 6rem;
    font-size: 1.5rem;
    border-radius: 6rem;
  }
}

/* title
============================================================ */
/* ============================================================
/* layout
============================================================ */
@view-transition {
  navigation: auto;
}
/* inner
============================================================ */
.l-inner {
  margin: 0 auto;
}
@media screen and (min-width: 812px) {
  .l-inner {
    box-sizing: content-box;
    max-width: 1200px;
    padding: 0 3rem;
  }
}
@media screen and (max-width: 811px) {
  .l-inner {
    padding: 0 2rem;
    max-width: 520px;
  }
}

/* container
============================================================ */
.l-container {
  padding-top: 9rem;
}
@media screen and (max-width: 811px) {
  .l-container {
    padding-top: 4.5rem;
  }
}

/* header
============================================================ */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: #fff;
  box-shadow: 0px 0.1rem 0.9rem 0px rgba(0, 0, 0, 0.12);
}
.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.l-header__nav {
  font-weight: 500;
}
.l-header__nav ul {
  display: flex;
  align-items: center;
  -moz-column-gap: 1.5em;
  column-gap: 1.5em;
}
.l-header__nav a {
  letter-spacing: 0.05em;
  text-decoration: none;
}
@media (hover: hover) {
  .l-header__nav a {
    transition: color 0.3s;
  }
  .l-header__nav a:hover {
    color: var(--color-secondary);
  }
}
.l-header__logo {
  line-height: 0;
}
.l-header .m-btn {
  box-shadow: none;
}
@media (hover: hover) {
  .l-header .m-btn:hover {
    transform: none;
  }
}
@media screen and (min-width: 812px) {
  .l-header__inner {
    height: 9rem;
  }
  .l-header__logo {
    width: 12rem;
  }
  .l-header__nav {
    margin-left: auto;
    margin-right: 3rem;
  }
  .l-header .m-btn {
    width: 21rem;
    height: 5rem;
    font-size: 1.6rem;
    border-radius: 5rem;
  }
}
@media screen and (max-width: 811px) {
  .l-header .l-inner {
    max-width: 100%;
  }
  .l-header__inner {
    height: 4.5rem;
  }
  .l-header__logo {
    width: 6rem;
  }
  .l-header__nav {
    display: none;
  }
  .l-header .m-btn {
    width: 17rem;
    height: 2.9rem;
    font-size: 1.4rem;
    border-radius: 2.9rem;
  }
}

/* footer
============================================================ */
.l-footer {
  background-color: var(--color-primary);
  color: #fff;
}
.l-footer__inner {
  display: flex;
  font-weight: 700;
}
.l-footer__nav ul {
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
}
.l-footer__nav li {
  padding-left: 1em;
  text-indent: -1em;
}
.l-footer__nav li:before {
  content: "・";
  display: inline-block;
  width: 1em;
  text-indent: 0;
}
.l-footer .l-copyright {
  letter-spacing: 0.05em;
}
@media screen and (min-width: 812px) {
  .l-footer {
    padding: 2.9rem 0;
  }
  .l-footer__inner {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    -moz-column-gap: 8.2rem;
    column-gap: 8.2rem;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 811px) {
  .l-footer {
    padding: 3rem 0;
  }
  .l-footer__inner {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    flex-direction: column-reverse;
    row-gap: 1em;
    font-size: 1.2rem;
  }
}

/* ============================================================
/* project module
============================================================ */
/* balloon
============================================================ */
.m-balloon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  border: 2px solid;
  font-weight: 500;
  background-color: #fff;
}
.m-balloon:before, .m-balloon:after {
  content: "";
  position: absolute;
}
.m-balloon:before {
  left: 2em;
  bottom: -2px;
  width: 0.8em;
  height: 0.5em;
  background-color: #fff;
}
.m-balloon:after {
  left: 1.8em;
  bottom: -1px;
  width: 0.7em;
  border-top: 2px solid;
  transform-origin: right top;
  transform: rotate(-45deg);
}
@media screen and (min-width: 812px) {
  .m-balloon {
    height: 2.3em;
    border-radius: 2.3em;
  }
}
@media screen and (max-width: 811px) {
  .m-balloon {
    height: 2.8em;
    border-radius: 2.8em;
  }
}

/* js-inview
============================================================ */
.js-inview {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}
.js-inview.isInviewed {
  opacity: 1;
  transform: translateY(0);
}

.js-inview-fade {
  opacity: 0;
  transition: opacity 1s ease;
}
.js-inview-fade.isInviewed {
  opacity: 1;
}

/* ============================================================
/* lp page
============================================================ */
body[data-current-content=about] .l-header__nav a[href="#about"], body[data-current-content=problem] .l-header__nav a[href="#problem"], body[data-current-content=merit] .l-header__nav a[href="#merit"], body[data-current-content=feature] .l-header__nav a[href="#feature"], body[data-current-content=step] .l-header__nav a[href="#step"], body[data-current-content=case] .l-header__nav a[href="#case"], body[data-current-content=cta] .l-header__nav a[href="#cta"] {
  color: var(--color-secondary);
}

.sc-content__ttl {
  position: relative;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
}
.sc-content__ttl::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  display: block;
  background-color: var(--color-primary);
}
.sc-content__balloon {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  margin: 0 auto;
  font-weight: 500;
  line-height: 1.5;
  padding: 0 1em;
}
.sc-content__balloon:before, .sc-content__balloon:after {
  content: "";
  position: absolute;
  display: block;
  width: 0.3em;
  height: 2em;
  background-color: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.sc-content__balloon:before {
  right: 100%;
  bottom: 0;
  transform: rotate(-30deg);
}
.sc-content__balloon:after {
  left: 100%;
  bottom: 0;
  transform: rotate(30deg);
}
@media screen and (min-width: 812px) {
  .sc-content {
    padding: 10rem 0;
  }
  .sc-content__header {
    margin-bottom: 4.6rem;
  }
  .sc-content__ttl {
    padding-bottom: 2.5rem;
    font-size: 3rem;
  }
  .sc-content__ttl::after {
    width: 8rem;
    height: 0.6rem;
  }
  .sc-content__ttl .logo {
    width: 19.8rem;
  }
  .sc-content__footer {
    margin-top: 6rem;
  }
  .sc-content__balloon {
    margin-bottom: 3.9rem;
    font-size: 3rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-content {
    padding: 3rem 0;
  }
  .sc-content__header {
    margin-bottom: 1.75rem;
  }
  .sc-content__ttl {
    padding-bottom: 1.2rem;
    font-size: 1.8rem;
  }
  .sc-content__ttl::after {
    width: 7rem;
    height: 0.3rem;
  }
  .sc-content__ttl span {
    vertical-align: middle;
  }
  .sc-content__ttl .logo {
    width: 10rem;
  }
  .sc-content__footer {
    margin-top: 1.5rem;
  }
  .sc-content__balloon {
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }
}

.sc-mv {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-color: var(--color-secondary-container);
}
.sc-mv:before, .sc-mv:after {
  content: "";
  position: absolute;
  aspect-ratio: 1472/338;
  background: url(../img/clowd.png) no-repeat center center/cover;
}
.sc-mv:before {
  left: 50%;
  bottom: 0;
}
.sc-mv:after {
  left: 50%;
  top: 0;
  transform: rotate(180deg);
}
.sc-mv__inner {
  position: relative;
  z-index: 1;
}
.sc-mv__image span {
  position: absolute;
  display: block;
}
.sc-mv__sub {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sc-mv__ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  row-gap: 0.3em;
}
.sc-mv__ttl span {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 2.1;
  padding: 0 0.75em;
  font-weight: 700;
  background-color: #fff;
  box-shadow: 0.1rem 0.1rem 0.4rem 0 rgba(0, 0, 0, 0.15);
}
.sc-mv__list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-mv__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
  font-weight: 500;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  aspect-ratio: 1/1;
  background-color: #fff;
}
@media screen and (min-width: 812px) {
  .sc-mv {
    padding: 4.5rem 0 7.2rem;
  }
  .sc-mv:before {
    width: 73.6rem;
    margin-left: -78rem;
  }
  .sc-mv:after {
    width: 73.6rem;
    margin-left: 5rem;
  }
  .sc-mv__sub {
    margin-bottom: 2.3rem;
    -moz-column-gap: 1.3em;
    column-gap: 1.3em;
  }
  .sc-mv__sub .logo {
    width: 26rem;
  }
  .sc-mv__sub .m-balloon {
    font-size: 2rem;
    margin-bottom: 0.5em;
  }
  .sc-mv__ttl {
    margin-bottom: 2.2rem;
    font-size: 3.8rem;
  }
  .sc-mv__inner {
    padding-bottom: 2.2rem;
  }
  .sc-mv__image span {
    width: 20rem;
  }
  .sc-mv__image span:nth-child(1) {
    top: 0;
    left: 4rem;
  }
  .sc-mv__image span:nth-child(2) {
    bottom: 0;
    right: 3rem;
  }
  .sc-mv__list {
    -moz-column-gap: 4.5em;
    column-gap: 4.5em;
  }
  .sc-mv__list li {
    width: 13rem;
    padding-bottom: 2rem;
    font-size: 1.8rem;
  }
  .sc-mv__list li em {
    font-size: 4.3rem;
  }
  .sc-mv .m-btn {
    width: 42rem;
    height: 8rem;
    font-size: 2.4rem;
    border-radius: 8rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-mv {
    padding: 2rem 0 2.5rem;
  }
  .sc-mv:before {
    width: 52vw;
    left: auto;
    right: 50%;
    margin-right: 1rem;
  }
  .sc-mv:after {
    width: 52vw;
    margin-left: 1rem;
  }
  .sc-mv__sub {
    margin-bottom: 2.3rem;
  }
  .sc-mv__sub .logo {
    width: 12rem;
  }
  .sc-mv__sub .m-balloon {
    font-size: 1.2rem;
  }
  .sc-mv__ttl {
    margin-bottom: 2.2rem;
    font-size: 1.8rem;
  }
  .sc-mv__ttl span {
    padding: 0 0.3em;
    white-space: nowrap;
  }
  .sc-mv__inner {
    padding-bottom: 2.5rem;
  }
  .sc-mv__image span {
    width: 9rem;
  }
  .sc-mv__image span:nth-child(1) {
    bottom: 0;
    left: -3.5rem;
  }
  .sc-mv__image span:nth-child(2) {
    bottom: 0;
    right: -4.5rem;
  }
  .sc-mv__list {
    -moz-column-gap: 1rem;
    column-gap: 1rem;
  }
  .sc-mv__list li {
    width: 8.2rem;
    padding-bottom: 2rem;
    font-size: 1.3rem;
  }
  .sc-mv__list li em {
    font-size: 2.5rem;
  }
}

.sc-about__movie {
  position: relative;
  aspect-ratio: 16/9;
  margin: 0 auto;
}
.sc-about__movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 812px) {
  .sc-about {
    padding-top: 5rem;
  }
  .sc-about__movie {
    width: 80rem;
  }
}

.sc-problem {
  padding-bottom: 0;
  background-color: var(--color-primary-container);
}
.sc-problem__ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  color: #fff;
  aspect-ratio: 63/25;
  margin: 0 auto;
  background: url(../img/balloon.png) no-repeat center center/cover;
}
.sc-problem__list {
  display: flex;
}
.sc-problem__image__footer {
  margin: 0 auto;
}
@media screen and (min-width: 812px) {
  .sc-problem__ttl {
    font-size: 3rem;
    width: 63rem;
    padding-bottom: 1.5rem;
  }
  .sc-problem__list {
    margin: 6.25rem 0 3.2rem;
    -moz-column-gap: 2.7rem;
    column-gap: 2.7rem;
  }
  .sc-problem__image__footer {
    width: 68rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-problem__ttl {
    line-height: 1.6;
    font-size: 1.8rem;
    width: 29rem;
    padding-bottom: 1.5rem;
  }
  .sc-problem__list {
    flex-wrap: wrap;
    margin: 1.5rem 0 2.5rem;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
  }
  .sc-problem__image__footer {
    width: 30rem;
  }
}

.sc-problem__item {
  background: #fff;
  box-shadow: 0.1rem 0.1rem 1rem 0 rgba(0, 0, 0, 0.08);
}
.sc-problem__item__image {
  aspect-ratio: 1/1;
  margin: 0 auto;
}
.sc-problem__item__text {
  line-height: 1.6;
  font-weight: 500;
  text-align: center;
}
@media screen and (min-width: 812px) {
  .sc-problem__item {
    flex: 1;
    padding: 2rem 0;
    border-radius: 1.6rem;
  }
  .sc-problem__item__image {
    width: 57.9%;
    margin-bottom: 1.5rem;
  }
  .sc-problem__item__text {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-problem__item {
    width: calc(50% - 0.75rem);
    padding: 1rem 0 2rem;
    border-radius: 0.8rem;
  }
  .sc-problem__item__image {
    width: 50%;
    margin-bottom: 0.9rem;
  }
  .sc-problem__item__text {
    font-size: 1.15rem;
  }
}

.sc-feature {
  background-color: var(--color-primary);
}
.sc-feature .sc-content__ttl {
  color: #fff;
}
.sc-feature .sc-content__ttl::after {
  background-color: #fff;
}
.sc-feature .sc-content__footer {
  color: #fff;
}
.sc-feature__list {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 812px) {
  .sc-feature__list {
    row-gap: 6rem;
    margin-top: 6rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-feature__list {
    row-gap: 2rem;
    margin-top: 2rem;
  }
}

.sc-feature__item {
  background-color: #fff;
  border: 1rem solid var(--color-secondary);
}
.sc-feature__item__caption {
  line-height: 1;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-weight: 600;
  font-style: italic;
}
.sc-feature__item__ttl {
  line-height: 1.4;
  font-weight: 700;
  color: var(--color-primary);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  letter-spacing: 0.15em;
}
.sc-feature__item__ttl em {
  margin-left: -0.1em;
}
.sc-feature__item__detail {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}
.sc-feature__item__detail li {
  line-height: 1.6;
  font-weight: 500;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  -moz-column-gap: 0.5em;
  column-gap: 0.5em;
}
.sc-feature__item__image {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media screen and (min-width: 812px) {
  .sc-feature__item {
    padding: 3rem 3.5rem 3.5rem;
    border-radius: 1.6rem;
    display: grid;
    grid-template-columns: 1fr auto;
  }
  .sc-feature__item__caption {
    margin-bottom: 1.5rem;
    font-size: 3rem;
  }
  .sc-feature__item__ttl {
    min-height: 2.8em;
    margin-bottom: 1rem;
    font-size: 3rem;
  }
  .sc-feature__item__ttl em {
    font-size: 6rem;
  }
  .sc-feature__item__detail li {
    font-size: 1.8rem;
  }
  .sc-feature__item__detail li em {
    font-size: 2.5rem;
  }
  .sc-feature__item:nth-child(1) .sc-feature__item__image {
    width: 48rem;
  }
  .sc-feature__item:nth-child(2) .sc-feature__item__image {
    width: 41rem;
  }
  .sc-feature__item:nth-child(3) .sc-feature__item__image {
    width: 36rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-feature__item {
    padding: 2.5rem 1rem 1rem;
    border-radius: 0.8rem;
    border-width: 0.5rem;
  }
  .sc-feature__item__caption {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    text-align: center;
  }
  .sc-feature__item__ttl {
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }
  .sc-feature__item__ttl br {
    display: none;
  }
  .sc-feature__item__ttl em {
    font-size: 3rem;
  }
  .sc-feature__item__detail li {
    font-size: 1.2rem;
  }
  .sc-feature__item__detail li br {
    display: none;
  }
  .sc-feature__item__detail li em {
    font-size: 1.5rem;
  }
  .sc-feature__item__image {
    width: 23rem;
    margin: 0.5rem auto 0;
  }
  .sc-feature__item:nth-child(3) .sc-feature__item__image {
    width: 20rem;
  }
}

@media screen and (max-width: 811px) {
  .sc-merit .sc-content__ttl span:nth-of-type(2) {
    display: inline-block;
    transform: translateY(-0.15em);
  }
}

.sc-merit__group__ttl {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.sc-merit__group__ttl span {
  font-weight: 700;
  color: var(--color-primary);
}
.sc-merit__group__ttl .underline {
  font-style: normal;
  background: linear-gradient(to bottom, transparent 80%, var(--color-secondary) 80%);
}
.sc-merit__group__ttl .dots {
  position: relative;
  font-style: normal;
}
.sc-merit__group__ttl .dots::before {
  content: "";
  position: absolute;
  top: -0.55em;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, var(--color-secondary) 2px, transparent 2px);
  background-position: 0 0;
  background-size: 1.1em 1.1em;
  background-repeat: repeat-x;
}
.sc-merit__group__list {
  display: flex;
}
@media screen and (min-width: 812px) {
  .sc-merit__group {
    margin-top: 7.8rem;
  }
  .sc-merit__group__ttl {
    font-size: 2.4rem;
  }
  .sc-merit__group__list {
    margin-top: 5rem;
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-merit__group {
    margin-top: 2.5rem;
  }
  .sc-merit__group__ttl {
    font-size: 1.5rem;
  }
  .sc-merit__group__list {
    margin-top: 2.5rem;
    flex-wrap: wrap;
    justify-content: center;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    row-gap: 2.35rem;
  }
}

.sc-merit__item {
  border: 2px solid var(--color-primary);
  background: #fff;
  box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.14);
  text-align: center;
}
.sc-merit__item__caption {
  margin: 0 1em;
  line-height: 2;
  font-weight: 500;
  color: #fff;
  border-radius: 2em;
  background-color: var(--color-primary);
  transform: translateY(-50%);
}
.sc-merit__item__image {
  aspect-ratio: 1/1;
  margin: 0 auto;
}
.sc-merit__item__ttl {
  position: relative;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
}
.sc-merit__item__ttl::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: 2px;
  background-color: var(--color-primary);
}
.sc-merit__item__text {
  line-height: 1.5;
  font-weight: 500;
}
@media screen and (min-width: 812px) {
  .sc-merit__item {
    flex: 1;
    border-radius: 1.6rem;
    padding-bottom: 1.6rem;
  }
  .sc-merit__item__caption {
    font-size: 2.2rem;
  }
  .sc-merit__item__image {
    width: 45%;
  }
  .sc-merit__item__ttl {
    padding: 0.6em 0;
    margin-bottom: 0.4em;
    font-size: 2.2rem;
  }
  .sc-merit__item__ttl::after {
    width: 6rem;
  }
  .sc-merit__item__text {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-merit__item {
    width: 14rem;
    border-radius: 0.8rem;
    padding-bottom: 0.8rem;
  }
  .sc-merit__item__caption {
    font-size: 1.1rem;
  }
  .sc-merit__item__image {
    width: 40%;
  }
  .sc-merit__item__ttl {
    padding: 0.6em 0;
    margin-bottom: 0.4em;
    font-size: 1.4rem;
  }
  .sc-merit__item__ttl::after {
    width: 3rem;
  }
  .sc-merit__item__text {
    font-size: 1.2rem;
  }
}

.sc-step {
  background-color: var(--color-secondary-container);
}
.sc-step__list {
  display: flex;
}
@media screen and (min-width: 812px) {
  .sc-step__list {
    justify-content: center;
    -moz-column-gap: 2.7rem;
    column-gap: 2.7rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-step__list {
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
  }
}

.sc-step__item {
  border: 2px solid var(--color-primary);
  background: #fff;
  text-align: center;
  position: relative;
}
.sc-step__item:before {
  content: "";
  position: absolute;
  aspect-ratio: 1/1;
  background: url(../img/icon_arrow.svg) no-repeat center center/contain;
}
.sc-step__item__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "wdth" 75;
  font-weight: 700;
  color: var(--color-primary);
  background-color: var(--color-primary-container);
}
.sc-step__item__image {
  aspect-ratio: 1/1;
  margin: 0 auto;
}
.sc-step__item__ttl {
  position: relative;
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
}
.sc-step__item__ttl::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: 2px;
  background-color: var(--color-primary);
}
@media screen and (min-width: 812px) {
  .sc-step__item {
    width: 22rem;
    border-radius: 1.6rem;
    padding: 3rem 0 2.8rem;
  }
  .sc-step__item:not(:last-child)::before {
    top: 50%;
    left: 100%;
    width: 2.2rem;
    transform: translateY(-50%);
  }
  .sc-step__item__caption {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 1rem;
    padding: 0 1em;
    height: 3.6rem;
    font-size: 2.4rem;
    border-radius: 3.6rem;
  }
  .sc-step__item__image {
    width: 45%;
  }
  .sc-step__item__ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3em;
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-step__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    border-radius: 0.8rem;
    padding: 0.75rem 2.5rem;
    max-width: 32rem;
    width: 100%;
  }
  .sc-step__item:not(:last-child)::before {
    left: 50%;
    top: 100%;
    width: 1.5rem;
    transform: translateX(-50%) rotate(90deg);
  }
  .sc-step__item__caption {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 1/1;
    width: 6rem;
    font-size: 1.4rem;
    border-radius: 50%;
  }
  .sc-step__item__image {
    width: 5.5rem;
    grid-column: 3;
    grid-row: 1;
  }
  .sc-step__item__ttl {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.4rem;
  }
}

.sc-case {
  padding-bottom: 0;
}

.sc-case__item {
  background: var(--color-primary);
  box-shadow: 0.2rem 0.2rem 1rem 0 rgba(0, 0, 0, 0.3);
}
.sc-case__item__ttl {
  line-height: 1;
  color: #fff;
  text-align: center;
  font-weight: 700;
}
.sc-case__item__inner {
  background-color: #fff;
}
.sc-case__item__list {
  display: flex;
  flex-direction: column;
  row-gap: 0.7em;
}
.sc-case__item__list dt {
  position: relative;
  line-height: 1.2;
  font-weight: 700;
  padding-left: 1em;
  margin-bottom: 0.25em;
}
.sc-case__item__list dt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0.4em;
  height: 1em;
  background-color: var(--color-primary);
}
.sc-case__item__list dd {
  line-height: 1.5;
  font-weight: 500;
}
.sc-case__item__list dd li {
  padding-left: 1em;
  text-indent: -1em;
}
.sc-case__item__list dd li::before {
  content: "・";
  display: inline-block;
  width: 1em;
  text-indent: 0;
}
@media screen and (min-width: 812px) {
  .sc-case__item {
    padding: 2rem 3rem 3.5rem;
    border-radius: 1.6rem;
  }
  .sc-case__item__ttl {
    margin-bottom: 2rem;
    font-size: 3rem;
  }
  .sc-case__item__inner {
    display: flex;
    flex-direction: row-reverse;
    -moz-column-gap: 5rem;
    column-gap: 5rem;
    border-radius: 1.6rem;
    align-items: center;
    padding: 4rem;
  }
  .sc-case__item__image {
    width: 38rem;
    margin-left: 1rem;
  }
  .sc-case__item__list {
    flex: 1;
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-case__item {
    padding: 2rem 1.5rem 2rem;
    border-radius: 0.8rem;
  }
  .sc-case__item__ttl {
    margin-bottom: 2rem;
    font-size: 1.5rem;
  }
  .sc-case__item__inner {
    padding: 1.5rem 1rem 1rem;
    border-radius: 0.8rem;
  }
  .sc-case__item__image {
    width: 20rem;
    margin: 1rem auto 0;
  }
  .sc-case__item__list {
    flex: 1;
    font-size: 2.4rem;
  }
  .sc-case__item__list dt {
    font-size: 1.4rem;
  }
  .sc-case__item__list dd {
    font-size: 1.2rem;
    margin-right: -1rem;
  }
}

.sc-cta__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  line-height: 1;
  color: #fff;
  font-weight: 500;
  aspect-ratio: 64/11;
  padding-bottom: 2.3%;
  background: url(../img/ribbon.png) no-repeat center center/contain;
}
.sc-cta__wrap {
  border: 1rem solid var(--color-primary);
  margin: 0 auto;
}
.sc-cta__inner {
  position: relative;
}
.sc-cta__ttl {
  display: flex;
  flex-direction: column;
}
.sc-cta__ttl .sub {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 0 1em;
  font-weight: 700;
  line-height: 2.1;
  color: #fff;
  background-color: var(--color-secondary);
}
.sc-cta__ttl .main {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}
.sc-cta__image {
  position: absolute;
  bottom: 0;
}
.sc-cta__image:first-of-type {
  left: 0;
}
.sc-cta__image:last-of-type {
  right: 0;
}
@media screen and (min-width: 812px) {
  .sc-cta {
    padding-top: 15rem;
  }
  .sc-cta__caption {
    font-size: 3.6rem;
    width: 64rem;
    transform: translateY(-60%);
  }
  .sc-cta__wrap {
    border-radius: 1.6rem;
    width: 92.6rem;
    padding: 0 0 5.8rem;
  }
  .sc-cta__inner {
    margin-top: -2rem;
    padding-bottom: 1rem;
  }
  .sc-cta__ttl {
    row-gap: 3rem;
  }
  .sc-cta__ttl .sub {
    font-size: 3.2rem;
  }
  .sc-cta__ttl .main {
    font-size: 6.6rem;
  }
  .sc-cta__ttl .logo {
    width: 33rem;
    margin-top: -0.2em;
  }
  .sc-cta__image {
    width: 18rem;
  }
  .sc-cta .sc-content__footer {
    margin-top: 3rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-cta {
    padding-top: 5rem;
  }
  .sc-cta__caption {
    font-size: 1.6rem;
    width: 25rem;
    transform: translateY(-70%);
  }
  .sc-cta__wrap {
    border-radius: 0.8rem;
    padding: 0 0 2.7rem;
    border-width: 0.5rem;
  }
  .sc-cta__inner {
    margin-top: -1.5rem;
    padding-bottom: 1rem;
  }
  .sc-cta__ttl {
    row-gap: 2.5rem;
  }
  .sc-cta__ttl .sub {
    font-size: 1.4rem;
  }
  .sc-cta__ttl .main {
    font-size: 2.5rem;
  }
  .sc-cta__ttl .logo {
    width: 15rem;
    margin-top: -0.3em;
  }
  .sc-cta__image {
    width: 5.5rem;
  }
  .sc-cta .sc-content__footer {
    margin-top: 1rem;
  }
}