@charset "UTF-8";

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:where([hidden]:not([hidden="until-found"])) {
  display: none !important;
}

:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: dark light;
  -moz-tab-size: 2;
  tab-size: 2;
  scrollbar-gutter: stable;
}

:where(html:has(dialog:modal[open])) {
  overflow: clip;
}

@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth;
  }
}

:where(body) {
  line-height: 1.5;
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

:where(button) {
  all: unset;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

:where(textarea) {
  resize: vertical;
  resize: block;
}

:where(button, label, select, summary, [role="button"], [role="option"]) {
  cursor: pointer;
}

:where(:disabled) {
  cursor: not-allowed;
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed;
}

:where(a) {
  color: inherit;
  text-underline-offset: 0.2ex;
}

:where(ul, ol) {
  list-style: none;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, picture, svg, video) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem);
  text-wrap: balance;
}

:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible;
}

:where(dialog) {
  border: none;
  background: none;
  inset: unset;
  max-width: unset;
  max-height: unset;
}

:where(dialog:not([open], [popover])) {
  display: none !important;
}

:where([popover]) {
  border: none;
  background: none;
  inset: unset;
  color: inherit;
}

:where([popover]:not(:popover-open)) {
  display: none !important;
}

:where(:focus-visible) {
  outline: 3px solid CanvasText;
  box-shadow: 0 0 0 5px Canvas;
  outline-offset: 1px;
}

:where(:focus-visible, :target) {
  scroll-margin-block: 8vh;
}

:where(.visually-hidden:not(:focus-within, :active)) {
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: revert;
  vertical-align: middle;
}

:where(h1, h2, h3) {
  font-size: inherit;
  line-height: inherit;
  text-wrap: revert;
}

:where(fieldset) {
  border: none;
  background: none;
  inset: unset;
  max-width: unset;
  max-height: unset;
}

:where(summary) {
  list-style: none;
}

:where(summary)::-webkit-details-marker {
  display: none;
}

:where([tabindex="-1"]:focus-visible) {
  outline: none;
  box-shadow: none;
}

:where(:focus-visible) {
  outline: revert;
  outline-offset: revert;
  box-shadow: revert;
}

@media (prefers-reduced-motion) {
  *,
  *:before,
  *:after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

:root {
  --color-primary: #a27a10;
  --color-primary-bg: #a27a10;
  --color-primary-border: #a50000;
  --color-secondary: #de0f0a;
  --color-secondary-bg: #fbf8e7;
  --color-background: #f7f8fb;
  --color-border: #adadad;
  --color-text: #333;
  --color-text-sub: #f0f0f0;
  --color-disabled: #b8b8b8;
  --color-disabled-border: #989898;
  --color-link: #0066cc;
  --color-link-visited: var(--color-link);
  --color-link-hover: var(--color-link);
  --color-button01: #c40019;
  --color-button01-border: #800000;
  --color-button02: #2a4293;
  --color-button02-border: #091a54;
  --color-dark: #000;
  --color-light: #fff;
  --font-family:
    "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "BIZ UDPGothic", Meiryo, sans-serif;
  --font-family-oswald:
    "Oswald", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "BIZ UDPGothic", Meiryo, sans-serif;
  --gap: clamp(20px, 7.6971608833px + 3.1545741325vw, 40px);
  --designSize: 1440px;
  --wideSize: 980px;
  --mediumSize: 890px;
  --narrowSize: 600px;
  --full: minmax(var(--gap), 1fr);
  --wide: minmax(0, calc((var(--wideSize) - var(--mediumSize)) / 2));
  --medium: minmax(0, calc((var(--mediumSize) - var(--narrowSize)) / 2));
  --narrow: min(var(--narrowSize), 100% - var(--gap) * 2);
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 3px;
  --border-width-xl: 6px;
  --border-radius-md: 5px;
  --border-radius-lg: 10px;
  --border-radius-xl: 20px;
  --border-radius-infinity: calc(infinity * 1px);
  --easing: cubic-bezier(0.39, 0.575, 0.565, 1);
}

html {
  block-size: var(--100vh, 100vh);
  min-block-size: 100%;
  color-scheme: light;
  writing-mode: horizontal-tb;
  scrollbar-gutter: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

html :where(:focus-visible, :target) {
  scroll-margin-block: calc(54px + 4vh);
}

@media print, screen and (min-width: 1025px) {
  html :where(:focus-visible, :target) {
    scroll-margin-block: calc(94px + 4vh);
  }
}

body {
  block-size: 100%;
  font-family: var(--font-family);
  font-size: 100%;
  line-height: inherit;
  color: var(--color-text);
  font-weight: 400;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

hr {
  block-size: 0;
  margin-block: 0;
  background: none;
  border: none;
}

figure {
  text-align: center;
}

* + figure {
  margin-block-start: 30px;
}

figcaption {
  font-size: 0.9375rem;
  line-height: 1.7333333333;
}

figcaption + img,
img + figcaption {
  margin-block-start: 21px;
}

img,
svg {
  vertical-align: top;
}

@page {
  margin: 20px;
}

* + p {
  margin-block-start: 15px;
}

strong,
b {
  font-weight: 700;
}

em {
  font-weight: 700;
  font-style: normal;
  color: var(--color-caution);
}

mark {
  background-color: transparent;
}

sup {
  font-size: smaller;
  vertical-align: super;
}

sub {
  font-size: smaller;
  vertical-align: sub;
}

a:where(:any-link) {
  color: var(--color-link);
  text-decoration: underline;
}

a:where(:visited) {
  color: var(--color-link-visited);
}

@media (any-hover: hover) {
  a:where(:hover) {
    color: var(--color-link-hover);
    text-decoration: none;
  }
}

input,
textarea,
select,
button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

select,
button {
  cursor: pointer;
}

button {
  width: 100%;
  overflow: visible;
}

input::-ms-clear,
input::-ms-reveal,
select::-ms-expand {
  display: none;
}

fieldset {
  border: none;
}

legend {
  width: 100%;
}

.l-base {
  position: relative;
  min-block-size: 100%;
  font-size: 0.9375rem;
  line-height: 1.6;
  writing-mode: horizontal-tb;
}

@media print, screen and (min-width: 769px) {
  .l-base {
    font-size: 1rem;
  }
}

.l-base__head {
  position: sticky;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 3;
}

.l-base__body {
  position: relative;
  z-index: 1;
}

.l-base__foot {
  position: relative;
  z-index: 2;
}

.l-base__fixed {
  position: sticky;
  padding-inline: var(--gap);
  padding-block: 20px;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  background-color: rgb(from var(--color-light) r g b/.9);
  z-index: 4;
  opacity: 1;
  visibility: visible;
  transition-property: opacity, visibility;
  transition-duration: 0.3s;
  transition-timing-function: var(--easing);
  transition-delay: 0s;
}

.l-base__fixed.is-hide {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0.3s;
}

.l-header {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--color-light);
  transition-property: box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: var(--easing);
}

@media screen and (max-width: 1024px) {
  .l-header {
    padding-inline-start: max(var(--gap), 50% - 490px);
  }
}

@media print, screen and (min-width: 1025px) {
  .l-header {
    padding-block-start: 30px;
    padding-block-end: 28px;
    padding-inline: max(var(--gap), 50% - 490px);
  }
}

.l-header.is-scrolled {
  box-shadow: 0 0 6px rgb(from var(--color-dark) r g b/.2);
}

.l-header__logo {
  flex-shrink: 0;
  width: min(
    clamp(300px, 220.0315457413px + 20.5047318612vw, 430px),
    100% - 66px
  );
}

.l-header__logo svg {
  width: 100%;
}

.l-header__toggle {
  margin-inline-start: auto;
}

@media print, screen and (min-width: 1025px) {
  .l-header__toggle {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .l-header__nav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    background-color: var(--color-light);
  }
}

@media print, screen and (min-width: 1025px) {
  .l-header__nav {
    margin-block-start: -8px;
    margin-inline-start: auto;
  }
}

.l-main {
  overflow: hidden;
}

.l-section {
  position: relative;
  display: grid;
  grid-template-columns: [full-start] var(--full) [wide-start] var(
      --wide
    ) [medium-start] var(--medium) [narrow-start] var(
      --narrow
    ) [narrow-end] var(--medium) [medium-end] var(--wide) [wide-end] var(
      --full
    ) [full-end];
}

.l-section > * {
  grid-column: medium;
}

.l-section--full > * {
  grid-column: full;
}

.l-section--wide > * {
  grid-column: wide;
}

.l-section--medium > * {
  grid-column: medium;
}

.l-section--narrow > * {
  grid-column: narrow;
}

.l-section--bg-background {
  background-color: var(--color-background);
}

.l-section--bg-primary {
  background-color: var(--color-primary);
}

.l-section--bg-secondary {
  background-color: var(--color-secondary-bg);
}

.l-section__head {
  grid-column: full;
}

.l-section__body {
  padding-block: 50px;
}

@media print, screen and (min-width: 769px) {
  .l-section__body {
    padding-block: 80px;
  }
}

.l-section--faq .l-section__body {
  padding-block-start: 40px;
}

@media print, screen and (min-width: 769px) {
  .l-section--faq .l-section__body {
    padding-block-start: 108px;
  }
}

:where(.l-section__inner) > * {
  inline-size: fit-content;
  margin-inline: auto;
}

.u-text--primary {
  color: var(--color-primary);
}

.u-text--light {
  color: var(--color-light);
}

.u-text--emphasis {
  color: var(--color-secondary);
  font-weight: 700;
  font-size: 1.875rem;
}

@media print, screen and (max-width: 768px) {
  .u-text--emphasis {
    font-size: 1.5625rem;
  }
}

.u-pb-0 {
  padding-bottom: 0 !important;
}

.u-mt-20 {
  margin-top: 20px !important;
}

.o-headGroup {
  display: grid;
  justify-items: center;
  margin-block-end: 0px;
  font-weight: 700;
}

@media print, screen and (min-width: 769px) {
  .o-headGroup {
    margin-block-end: 38px;
  }
}

.o-headGroup:has(.o-headGroup__img) {
  margin-block-end: 20px;
}

h2 {
  font-size: 1.875rem;
}

h3 {
  font-size: 1.25rem;
}

.o-headGroup__main {
  font-size: 1.875rem;
  line-height: 1.4;
}

.o-headGroup__sub {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

.o-headGroup__sub:has(+ .o-headGroup__main) {
  padding-bottom: 15px;
}

.o-headGroup__img {
  margin-block-start: 19px;
}

.o-heading {
  margin-block-end: 30px;
  font-size: 1.5625rem;
  line-height: 1.4333333333;
  text-align: center;
  font-weight: 700;
}

@media print, screen and (min-width: 769px) {
  .o-heading {
    margin-block-end: 60px;
    font-size: 1.875rem;
    line-height: 1.4571428571;
  }
}

@media screen and (max-width: 768px) {
  .o-headGroup__main,
  h2 {
    font-size: 1.5625rem;
  }

  .o-headGroup__sub:has(+ .o-headGroup__main) {
    padding-bottom: 5px;
  }
}

.o-button {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: fit-content;
  min-inline-size: min(237px, 100%);
  min-block-size: 46px;
  margin-inline: auto;
  padding-inline-start: 25px;
  padding-inline-end: 43px;
  padding-block-start: 10px;
  padding-block-end: 10px;
  inset-block-start: 0px;
  margin-block-end: 6px;
  background-color: var(--color-secondary);
  box-shadow: 0 5px 0 var(--color-primary-border);
  font-size: 1.125rem;
  line-height: 1.4444444444;
  text-align: center;
  color: var(--color-light);
  font-weight: 700;
  border-radius: var(--border-radius-infinity);
  transition-property: box-shadow, inset-block-start;
  transition-duration: 0.3s;
  transition-timing-function: var(--easing);
  z-index: 0;
}

@media print, screen and (min-width: 769px) {
  .o-button {
    min-inline-size: min(307px, 100%);
    min-block-size: 56px;
    font-size: 1.5625rem;
    line-height: 1.44;
  }
}

* + .o-button {
  margin-block-start: 19px;
}

.o-button:has(+ *) {
  margin-block-end: 26px;
}

.o-button:where(:any-link) {
  text-decoration: none;
  color: var(--color-light);
  position: relative;
}

.o-button:where(:any-link):before {
  position: absolute;
  display: block;
  inset-inline: 0;
  inset-block: 0;
  transition: inherit;
  z-index: -1;
  border-radius: inherit;
  content: "";
}

.o-button:where(:any-link):after {
  --mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgOCAxMiI+CiAgPHBhdGggZD0iTTcuMDc3IDUuNDc1IDIuNTUzIDEuMjQ5YS45MTUuOTE1IDAgMCAwLS4yOTUtLjE4NC45NjQuOTY0IDAgMCAwLS45OS4xODQuODQ3Ljg0NyAwIDAgMC0uMTk3LjI3NS44LjggMCAwIDAtLjA3LjMyNWMwIC4yMjUuMDk2LjQ0LjI2Ny42bDMuODkgMy42MjZMMS4yNjkgOS43YS44NDQuODQ0IDAgMCAwLS4xOTguMjc1Ljc5Ny43OTcgMCAwIDAgMCAuNjUuOTExLjkxMSAwIDAgMCAuNDkzLjQ2Ljk2Ljk2IDAgMCAwIC45OS0uMTg1bDQuNTI0LTQuMjI2YS44NDQuODQ0IDAgMCAwIC4xOTgtLjI3NS43OTcuNzk3IDAgMCAwIDAtLjY1Ljg0NC44NDQgMCAwIDAtLjE5OC0uMjc1WiIvPgo8L3N2Zz4K);
  position: absolute;
  display: block;
  width: 20px;
  height: 16px;
  inset-block: 0;
  inset-block-start: 5px;
  inset-inline-end: 15px;
  margin-block: auto;
  background-color: currentColor;
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  content: "";
}

@media (any-hover: hover) {
  .o-button:where(:any-link):where(:hover) {
    inset-block-start: 5px;
    text-decoration: none;
    color: var(--color-light);
    box-shadow: 0 0 0 var(--color-primary-border);
  }

  .o-button:where(:any-link):where(:hover):before {
    inset-block-start: -5px;
  }
}

.o-button--disabled {
  inset-block-start: 0;
  background-color: var(--color-disabled);
  box-shadow: 0 6px 0 var(--color-disabled-border);
  color: var(--color-light);
  pointer-events: none;
}

.o-navGlobal__link {
  text-decoration: none;
  color: var(--color-text);
}

.o-navGlobal__link:visited {
  color: var(--color-text);
}

@media (any-hover: hover) {
  .o-navGlobal__link:where(:hover) {
    text-decoration: none;
    color: var(--color-text);
  }
}

@media screen and (max-width: 1024px) {
  .o-navGlobal {
    position: relative;
    display: grid;
    grid-template-rows: 0fr;
    transition-property: grid-template-rows;
    transition-duration: 0.3s;
    transition-timing-function: var(--easing);
  }

  .o-navGlobal:before {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-light);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s var(--easing),
      visibility 0s ease 0.6s;
    content: "";
  }

  .o-navGlobal.is-open {
    grid-template-rows: 1fr;
  }

  .o-navGlobal.is-open:before {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .o-navGlobal__list {
    overflow: hidden;
  }

  .o-navGlobal__item + .o-navGlobal__item {
    border-block-start-width: 1px;
    border-block-start-style: solid;
    border-block-start-color: #d9d9d9;
  }

  .o-navGlobal__link {
    display: grid;
    align-items: center;
    min-block-size: 52px;
    padding-inline: 30px;
  }
}

@media print, screen and (min-width: 1025px) {
  .o-navGlobal__list {
    display: flex;
    align-items: center;
  }

  .o-navGlobal__item {
    display: flex;
    place-items: center;
    font-size: 0.9375rem;
    line-height: 1.7333333333;
  }

  .o-navGlobal__item + .o-navGlobal__item:before {
    content: "｜";
  }

  .o-navGlobal__link {
    text-align: center;
  }
}

@media print and (any-hover: hover),
  screen and (min-width: 1025px) and (any-hover: hover) {
  .o-navGlobal__link:where(:hover) {
    text-decoration: underline;
  }
}

.o-navToggle {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 66px;
  block-size: 54px;
}

.o-navToggle__line span {
  position: absolute;
  display: block;
  inline-size: 24px;
  block-size: 3px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: #e60027;
  transition-property: inline-size, translate, rotate, scale;
  transition-duration: 0.3s;
  transition-timing-function: var(--easing);
  transform-origin: center;
}

.o-navToggle__line span:nth-child(1) {
  translate: 0 -7px;
}

.o-navToggle__line span:nth-child(3) {
  translate: 0 7px;
}

.o-navToggle.is-open .o-navToggle__line span:is(:nth-child(1), :nth-child(3)) {
  inline-size: calc(22px / cos(45deg));
  translate: 0 0;
  border-radius: var(--border-radius-infinity);
}

.o-navToggle.is-open .o-navToggle__line span:nth-child(1) {
  rotate: 45deg;
}

.o-navToggle.is-open .o-navToggle__line span:nth-child(3) {
  rotate: -45deg;
}

.o-navToggle.is-open .o-navToggle__line span:nth-child(2) {
  scale: 0 1;
}

.o-mainVisual {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: 50px 10px 50px;
  background: var(--color-secondary) url(../images/img_mv_bg_pc@2x.webp)
    no-repeat center top / max(1440px, 100%) auto;
  z-index: 0;
}

.o-mainVisual img {
  max-width: 100%;
}

.o-mainVisual__head {
  position: relative;
  z-index: 0;
}

.o-mainVisual_rate {
  position: relative;
  width: min(570px, 100%);
  margin-top: -75px;
  background: var(--color-light);
  border: 5px solid var(--color-dark);
  border-radius: 10px;
  filter: drop-shadow(0 4px 2px rgb(from var(--color-dark) r g b / 0.25));
  z-index: 1;
}

.o-mainVisual_rate__head {
  display: grid;
  place-content: center;
  min-height: 47px;
  padding: 0 5px;
  background: var(--color-dark);
  border-radius: 5px 5px 0 0;
  color: var(--color-light);
  font-size: 1.5625rem;
  line-height: 1.5;
  text-align: center;
}

.o-mainVisual_rate__item {
  display: flex;
  text-align: center;
}

.o-mainVisual_rate__item > div {
  width: 50%;
  height: 153px;
  padding: 12px 10px 0;
}

.o-mainVisual_rate__item > div:first-child {
  background: #ffffde;
  border-bottom-left-radius: 5px;
}

.o-mainVisual_rate__item > div:nth-child(2) {
  background: #ffeded;
  border-bottom-right-radius: 5px;
}

.o-mainVisual_rate__title {
  color: var(--color-dark);
  font-size: 1.5625rem;
  line-height: 1.5;
}

.o-mainVisual_rate__content {
  color: var(--color-secondary);
  font-size: 2.5rem;
  line-height: 1.2;
  white-space: nowrap;
}

.o-mainVisual_rate__content span {
  font-weight: 700;
  font-size: 5rem;
}

.o-mainVisual_img_mashi {
  margin-top: 30px;
}

.o-mainVisual_steps {
  width: 100%;
  margin-top: 5px;
}

.o-mainVisual_steps__track {
  display: grid;
  justify-items: center;
}

.o-mainVisual_period {
  margin-top: 15px;
  padding: 9px 14px 9px 31px;
  background: var(--color-primary);
  border-radius: 63px;
  color: var(--color-light);
  font-size: 1.875rem;
  line-height: 1.2;
  text-align: center;
}

.o-mainVisual_comment {
  width: min(820px, 100%);
  margin-top: 40px;
  padding: 20px 20px 22px;
  background: var(--color-light);
  border-radius: 20px;
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.o-mainVisual_comment > span {
  display: block;
}

.o-mainVisual_comment__lead {
  line-height: 1.6;
}

.o-mainVisual_comment__main {
  color: var(--color-secondary);
  font-size: 1.875rem;
  line-height: 1.4;
}

.o-mainVisual_comment__foot {
  line-height: 1.8;
}

@media screen and (max-width: 768px) {
  .o-mainVisual {
    padding: 40px 20px;
    background-image: url(../images/img_mv_bg_sp@2x.webp);
    background-size: 100% auto;
  }

  /* デザインでは左右の余白(20px)より少しはみ出す */
  .o-mainVisual__head img {
    width: min(362.5px, 93vw);
    max-width: none;
  }

  .o-mainVisual_rate {
    width: min(350px, 100%);
    margin-top: 18px;
    border-width: 3px;
  }

  .o-mainVisual_rate__head {
    min-height: 55px;
    padding: 0 5px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    border-radius: 3px 3px 0 0;
  }

  .o-mainVisual_rate__item > div {
    height: 119px;
    padding: 12px 5px 0;
  }

  .o-mainVisual_rate__title {
    font-size: 1rem;
  }

  .o-mainVisual_rate__content {
    color: #eb0000;
    font-size: 1.25rem;
    line-height: 1.3;
  }

  .o-mainVisual_rate__content span {
    font-size: 3.125rem;
  }

  .o-mainVisual_img_mashi {
    margin-top: 20px;
  }

  .o-mainVisual_img_mashi img {
    width: min(367px, 94vw);
    max-width: none;
  }

  /* SP：丼の金利ステップは自動で流れ続けるスライダー */
  .o-mainVisual_steps {
    width: calc(100% + 40px);
    margin-top: 0;
    margin-inline: -20px;
    overflow: hidden;
  }

  .o-mainVisual_steps__track {
    display: flex;
    width: max-content;
    animation: stepsSlide 22s linear infinite;
    will-change: transform;
  }

  .o-mainVisual_steps__track img {
    width: 901px;
    max-width: none;
    margin-right: 20px;
  }
}

@keyframes stepsSlide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 768px) {
  .o-mainVisual_period {
    width: min(321px, 100%);
    margin-top: 20px;
    padding: 5px 6px 5px 21px;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 30px;
  }

  .o-mainVisual_period > span {
    display: block;
  }

  .o-mainVisual_comment {
    width: min(350px, 100%);
    margin-top: 20px;
    padding: 19px 15px 20px;
    border-radius: 10px;
    font-size: 1rem;
  }

  .o-mainVisual_comment__lead,
  .o-mainVisual_comment__foot {
    line-height: 1.6;
  }

  .o-mainVisual_comment__main {
    font-size: 1.5625rem;
    line-height: 1.6;
  }
}

/* 金利マシマシ定期預金Ⅱとは */
.o-sectionTitle {
  padding: 23px 10px 25px;
  background: var(--color-dark);
  color: var(--color-light);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

#period-content .l-section__body {
  padding-top: 40px;
}

.o-period__lead {
  color: var(--color-primary);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.6;
}

#period-content .l-section__body > p {
  margin-top: 20px;
  line-height: 1.8;
}

.u-text--red {
  color: #f00;
}

.o-period {
  margin: 40px auto 80px;
  background: var(--color-secondary-bg);
}

.o-period__head h3 {
  padding: 6.5px 7px;
  background: var(--color-primary);
  color: var(--color-light);
  font-size: 1.5rem;
  line-height: 1.5;
}

.o-period__item {
  padding: 40px 35px 0 44px;
  overflow-x: auto;
}

/* PC：デザインどおり枠の高さ740px（見出し49px＋図691px）で図の下端を切る
   ※ScrollHintが親(.o-period__item)にoverflow:autoを付けるため、切り抜きは内側で行う */
@media print, screen and (min-width: 769px) {
  .o-period__item .js-scrollable {
    height: 651px;
    overflow: hidden;
  }
}

.o-period__item img {
  width: 811px;
  min-width: 811px;
  max-width: none;
  margin-inline: auto;
}

.o-period__item .scroll-hint-icon {
  top: 90px;
}

@media screen and (max-width: 768px) {
  .o-sectionTitle {
    padding: 10px;
    font-size: 1.5625rem;
    line-height: 1.32;
  }

  .o-period__lead {
    font-size: 1.25rem;
  }

  #period-content .l-section__body > p {
    line-height: 1.6;
    text-align: left;
  }

  .o-period {
    margin: 40px auto 50px;
  }

  .o-period__head h3 {
    padding: 9px;
    font-size: 1.25rem;
  }

  .o-period__item {
    padding: 30px 0 30px 20px;
  }

  .o-period__item img {
    margin-inline: 0;
    padding-right: 20px;
    box-sizing: content-box;
  }
}

/* 例えば */
.o-example .o-headGroup__main {
  color: var(--color-primary);
}

.o-example .o-headGroup__sub {
  margin-top: 20px;
}

.o-example__img {
  margin: 20px auto;
}

.o-example__img img {
  width: 131px;
  margin-inline: auto;
}

.o-example ul {
  width: fit-content;
  margin: 20px auto;
}

.o-example__table {
  overflow-x: auto;
}

.o-example__table table {
  margin: 0 auto;
  border-collapse: collapse;
  background: var(--color-light);
}

.o-example__table th,
.o-example__table td {
  height: 42px;
  padding: 4px 15px;
  border: 1px solid #8c9193;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.o-example__table th {
  width: 170px;
  background: #a5abad;
  color: var(--color-light);
}

.o-example__table--a td {
  width: 230px;
}

.o-example__table--b td {
  width: 300px;
}

.o-example__table .scroll-hint-icon {
  top: 42px;
}

.o-example__table:has(+ .o-headGroup__sub) {
  margin-bottom: 40px;
}

.o-example__table:has(+ p) {
  margin-bottom: 50px;
}

@media screen and (max-width: 768px) {
  .o-example__table th {
    width: 150px;
    padding-inline: 10px;
  }

  .o-example__table--a table {
    width: 100%;
  }

  .o-example__table--a td {
    width: auto;
    padding-inline: 10px;
  }

  .o-example__table--b {
    margin-right: calc(var(--gap) * -1);
  }

  .o-example__table--b table {
    margin: 0;
  }

  .o-example__table--b td {
    width: 300px;
  }

  .o-example__table:has(+ p) {
    margin-bottom: 20px;
  }
}

#noaccount {
  background-color: var(--color-secondary-bg);
}

#noaccount .o-headGroup {
  margin-bottom: 45px;
}

.o-accountOpening__list {
  display: flex;
  max-width: 470px;
  margin: 20px auto 40px;
  justify-content: space-between;
}

.o-accountOpening__item {
  width: calc(50% - 20px);
}

.o-accountOpening__note {
  font-size: 0.875rem;
}

.o-accountOpening__img {
  display: grid;
  justify-items: center;
  grid-template-columns: 100%;
  grid-template-rows: [img] 170px [caption] max-content;
  text-align: center;
}

.o-accountOpening__img:before {
  grid-column: 1 / 2;
  grid-row: img;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background-color: var(--color-light);
  content: "";
}

.o-accountOpening__img img {
  grid-row: img;
  align-self: center;
}

.o-accountOpening__img > * {
  grid-column: 1 / 2;
}

@media print, screen and (min-width: 768px) {
  .o-accountOpening__img > * {
    font-size: 1rem;
  }
}

.o-accountOpening__more {
  margin: 36px auto;
}

@media print, screen and (max-width: 769px) {
  #noaccount .o-headGroup {
    margin-bottom: 10px;
  }

  .o-accountOpening__list {
    margin-bottom: 30px;
  }

  .o-accountOpening__item {
    width: calc(50% - 15px);
  }

  .o-accountOpening__more {
    margin: 30px auto;
  }

  .o-accountOpening__note {
    font-size: 0.75rem;
  }
}

.o-overview {
  max-width: 640px;
  margin: 0 auto;
}

.o-overview__heading {
  font-size: 1.125rem;
  padding-bottom: 6px;
  font-weight: 700;
  color: var(--color-primary);
}

.o-overview__heading:first-child {
  margin-top: 40px;
}

* + .o-overview__heading {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px dashed var(--color-primary);
}

.o-overview__note {
  padding: 45px;
  background: var(--color-primary-bg);
  margin-top: 80px;
}

.o-overview__note h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 42px;
  text-align: center;
}

.o-overview * + p {
  margin-block-start: 0;
}

.o-overview__more .o-button--black {
  margin-top: 40px;
  background: #444;
  font-weight: 400;
  font-size: 1.125rem;
  box-shadow: none;
  min-inline-size: min(255px, 100%);
  transition-property: none;
  inset-block-start: 0;
  transition: 0.3s;
}

.o-overview__more .o-button--black::after {
  inset-block-start: 1px;
  width: 11px;
  --mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgOSAxMCIgZmlsbD0ibm9uZSI+CjxwYXRoIGQ9Ik05IDVMMC43NSA5Ljc2MzE0TDAuNzUgMC4yMzY4Nkw5IDVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=");
}

.o-overview__more .o-button--black:hover {
  background-color: #757575;
}

@media screen and (max-width: 768px) {
  .o-overview__heading {
    font-size: 0.9375rem;
    padding-bottom: 10px;
  }

  .o-overview__heading:first-child {
    margin-top: 36px;
  }

  * + .o-overview__heading {
    margin-top: 20px;
  }

  .o-overview__more .o-button--black {
    font-size: 0.9375rem;
    min-inline-size: min(220px, 100%);
    padding-top: 5px;
    padding-bottom: 5px;
    min-block-size: 30px;
  }
}

@media print, screen and (min-width: 769px) {
  #faq .l-section__body {
    padding-top: 74px;
  }
}

.o-faq {
  inline-size: min(980px, 100%);
}

* + .o-faq {
  margin-block-start: 25px;
}

.o-faq + .o-faq {
  margin-block-start: 30px;
}

.o-faq__question {
  position: relative;
  padding-block-start: 13px;
  padding-block-end: 13px;
  padding-inline-start: 20px;
  padding-inline-end: 50px;
  background-color: var(--color-primary);
  font-weight: 700;
  color: var(--color-light);
  font-size: 1rem;
  line-height: 1.5;
}

@media print, screen and (min-width: 769px) {
  .o-faq__question {
    padding-inline-start: 20px;
    padding-inline-end: 65px;
  }
}

.o-faq__question__icon {
  position: absolute;
  width: 30px;
  height: 30px;
  inset-block: 0;
  inset-inline-end: 10px;
  margin-block: auto;
  background-color: var(--color-light);
  border-radius: 50%;
}

@media print, screen and (min-width: 769px) {
  .o-faq__question__icon {
    inset-inline-end: 30px;
  }
}

.o-faq__question__icon:before,
.o-faq__question__icon:after {
  position: absolute;
  display: block;
  width: 18px;
  height: 3px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: var(--color-primary);
  border-radius: calc(infinity * 1px);
  transition-property: rotate;
  transition-duration: 0.3s;
  transition-timing-function: var(--easing);
  content: "";
}

.o-faq:not([open]) .o-faq__question__icon:after {
  rotate: 90deg;
}

.o-faq__answer {
  padding-inline: 20px;
  padding-block-start: 20px;
  padding-block-end: 20px;
  background-color: var(--color-background);
  font-size: 1rem;
  line-height: 1.5;
  overflow: hidden;
}

@media print, screen and (min-width: 769px) {
  .o-faq__answer {
    padding-inline: 20px;
    padding-block-start: 30px;
    padding-block-end: 30px;
  }
}

@media print, screen and (max-width: 768px) {
  .o-faq__question {
    padding-block-start: 12px;
    padding-block-end: 12px;
    padding-inline-start: 15px;
    font-size: 0.9375rem;
  }

  .o-faq__answer {
    padding-inline: 15px;
    padding-block-start: 15px;
    padding-block-end: 15px;
    font-size: 0.9375rem;
  }
}

a img {
  transition: 0.3s;
}

a:hover img {
  opacity: 0.7;
}

.o-company {
  inline-size: min(510px, 100%);
  margin-inline: auto;
}

.o-company__table {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 18px;
}

.o-company__item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  row-gap: 4px;
}

.o-company__item + .o-company__item {
  margin-block-start: 9px;
  padding-block-start: 12px;
  border-block-start-width: 1px;
  border-block-start-style: dashed;
  border-block-start-color: var(--color-border);
}

@media print, screen and (min-width: 769px) {
  .o-company__item + .o-company__item {
    margin-block-start: 22px;
    padding-block-start: 21px;
  }
}

@media screen and (max-width: 768px) {
  .o-company__item > * {
    grid-column: span 2;
  }
}

.o-company__label {
  margin-block-end: -2px;
  font-weight: 700;
}

.o-company__note {
  margin-block-start: 42px;
  font-size: 0.9375rem;
  line-height: 1.7333333333;
  text-align: end;
}

@media print, screen and (min-width: 769px) {
  .o-company__note {
    margin-block-start: 45px;
  }
}

.o-copyright {
  padding-inline: var(--gap);
  padding-block-start: 14px;
  padding-block-end: 13px;
  background-color: var(--color-primary);
  font-size: 0.75rem;
  line-height: 1.6666666667;
  color: var(--color-light);
  text-align: center;
}

.o-fixedBtns {
  display: grid;
  grid-template-columns: repeat(2, calc(min(var(--narrowSize) / 2, 50%) - 5px));
  justify-content: center;
  column-gap: 10px;
}

.o-fixedBtns__item {
  display: grid;
}

.o-fixedBtns__btn {
  position: relative;
  display: grid;
  place-items: center;
  padding-inline: 25px;
  padding-block-start: 6px;
  padding-block-end: 8px;
  inset-block-start: 0px;
  background-color: var(--button-background);
  font-size: 1.125rem;
  line-height: 1.4444444444;
  font-weight: 700;
  color: var(--color-light);
  text-decoration: none;
  box-shadow: 0 3px 0 var(--button-border);
  border-radius: var(--border-radius-infinity);
  transition-property: box-shadow, inset-block-start;
  transition-duration: 0.3s;
  transition-timing-function: var(--easing);
  z-index: 0;
}

.o-fixedBtns__btn--item01 {
  --button-background: var(--color-button01);
  --button-border: var(--color-button01-border);
}

.o-fixedBtns__btn--item02 {
  --button-background: var(--color-button02);
  --button-border: var(--color-button02-border);
}

@media print, screen and (min-width: 769px) {
  .o-fixedBtns__btn {
    padding-block-start: 11px;
    padding-block-end: 13px;
  }
}

.o-fixedBtns__btn:where(:any-link) {
  text-decoration: none;
  color: var(--color-light);
}

.o-fixedBtns__btn:where(:any-link):before {
  position: absolute;
  display: block;
  inset-inline: 0;
  inset-block: 0;
  transition: inherit;
  z-index: -1;
  border-radius: inherit;
  content: "";
}

.o-fixedBtns__btn:where(:any-link):after {
  --mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgOCAxMiI+CiAgPHBhdGggZD0iTTcuMDc3IDUuNDc1IDIuNTUzIDEuMjQ5YS45MTUuOTE1IDAgMCAwLS4yOTUtLjE4NC45NjQuOTY0IDAgMCAwLS45OS4xODQuODQ3Ljg0NyAwIDAgMC0uMTk3LjI3NS44LjggMCAwIDAtLjA3LjMyNWMwIC4yMjUuMDk2LjQ0LjI2Ny42bDMuODkgMy42MjZMMS4yNjkgOS43YS44NDQuODQ0IDAgMCAwLS4xOTguMjc1Ljc5Ny43OTcgMCAwIDAgMCAuNjUuOTExLjkxMSAwIDAgMCAuNDkzLjQ2Ljk2Ljk2IDAgMCAwIC45OS0uMTg1bDQuNTI0LTQuMjI2YS44NDQuODQ0IDAgMCAwIC4xOTgtLjI3NS43OTcuNzk3IDAgMCAwIDAtLjY1Ljg0NC44NDQgMCAwIDAtLjE5OC0uMjc1WiIvPgo8L3N2Zz4K);
  position: absolute;
  display: block;
  width: 10px;
  height: 16px;
  inset-block: 0;
  inset-inline-end: 15px;
  margin-block: auto;
  background-color: currentColor;
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  content: "";
}

@media print, screen and (max-width: 768px) {
  .o-fixedBtns__btn {
    font-size: 1.125rem;
    padding-block-start: 6px;
    padding-block-end: 6px;
    padding-inline-start: 10px;
  }
}

@media (any-hover: hover) {
  .o-fixedBtns__btn:where(:any-link):where(:hover) {
    inset-block-start: 3px;
    text-decoration: none;
    color: var(--color-light);
    box-shadow: 0 0 0 var(--button-border);
  }

  .o-fixedBtns__btn:where(:any-link):where(:hover):before {
    inset-block-start: -3px;
  }
}

.u-inlineCenter {
  inline-size: fit-content;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .u-alignStart,
  .u-alignStart--sp {
    text-align: start;
  }
}

@media print, screen and (min-width: 769px) {
  .u-alignStart,
  .u-alignStart--pc {
    text-align: start;
  }
}

@media screen and (max-width: 768px) {
  .u-alignCenter,
  .u-alignCenter--sp {
    text-align: center;
  }
}

@media print, screen and (min-width: 769px) {
  .u-alignCenter,
  .u-alignCenter--pc {
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  .u-alignEnd,
  .u-alignEnd--sp {
    text-align: end;
  }
}

@media print, screen and (min-width: 769px) {
  .u-alignEnd,
  .u-alignEnd--pc {
    text-align: end;
  }
}

.u-mbs--1lh {
  margin-block-start: 1lh;
}

.u-mbs--2lh {
  margin-block-start: 2lh;
}

@media screen and (max-width: 768px) {
  .u-fsSmall,
  .u-fsSmall--sp {
    font-size: 0.8125rem;
    line-height: 1.4615384615;
  }
}

@media print, screen and (min-width: 769px) {
  .u-fsSmall,
  .u-fsSmall--pc {
    font-size: 0.875rem;
    line-height: 1.4285714286;
  }
}

@media screen and (max-width: 768px) {
  .u-fsNormal,
  .u-fsNormal--sp {
    font-size: 0.9375rem;
    line-height: 1.6;
  }
}

@media print, screen and (min-width: 769px) {
  .u-fsNormal,
  .u-fsNormal--pc {
    font-size: 1rem;
    line-height: 1.625;
  }
}

@media screen and (max-width: 768px) {
  .u-fsLarge,
  .u-fsLarge--sp {
    font-size: 1.125rem;
    line-height: 1.4444444444;
  }
}

@media print, screen and (min-width: 769px) {
  .u-fsLarge,
  .u-fsLarge--pc {
    font-size: 1.25rem;
    line-height: 1.45;
  }
}

@media screen and (max-width: 768px) {
  .u-lsp--1em,
  .u-lsp--1em--sp {
    letter-spacing: 1em;
  }
}

@media print, screen and (min-width: 769px) {
  .u-lsp--1em,
  .u-lsp--1em--pc {
    letter-spacing: 1em;
  }
}

.u-fwNormal {
  font-weight: 400;
}

.u-fwBold {
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .u-breakNormal,
  .u-breakNormal--sp {
    word-break: normal;
  }
}

@media print, screen and (min-width: 769px) {
  .u-breakNormal,
  .u-breakNormal--pc {
    word-break: normal;
  }
}

@media screen and (max-width: 768px) {
  .u-breakKeep,
  .u-breakKeep--sp {
    word-break: keep-all;
  }
}

@media print, screen and (min-width: 769px) {
  .u-breakKeep,
  .u-breakKeep--pc {
    word-break: keep-all;
  }
}

@media screen and (max-width: 768px) {
  .u-spNone {
    display: none;
  }
}

@media print, screen and (min-width: 769px) {
  .u-pcNone {
    display: none;
  }
}
/* ---------------------------------------------
  金利マシマシ定期預金Ⅱ 追加・上書き
--------------------------------------------- */
.o-headGroup__main,
.o-heading {
  color: var(--color-text);
}

.o-headGroup__main.u-text--emphasis {
  color: var(--color-secondary);
}

.o-button:where(:any-link):after {
  --mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgOSAxMCIgZmlsbD0ibm9uZSI+CjxwYXRoIGQ9Ik05IDVMMC43NSA5Ljc2MzE0TDAuNzUgMC4yMzY4Nkw5IDVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=");
  width: 9px;
  height: 10px;
  inset-block-start: 0;
  inset-inline-end: 16px;
}

.o-faq__answer {
  background-color: var(--color-light);
}

#faq .o-faq {
  margin-inline: auto;
}

.l-base__fixed {
  background-color: rgb(from var(--color-light) r g b/.95);
}

@media print, screen and (min-width: 769px) {
  .l-base__fixed {
    padding-block: 38px;
  }

  .o-fixedBtns {
    grid-template-columns: repeat(2, min(300px, 50% - 15px));
    column-gap: 30px;
  }

  .o-fixedBtns__btn {
    min-block-size: 56px;
    padding-block: 6px;
    font-size: 1.5625rem;
    line-height: 1.4;
  }
}

/* ---------------------------------------------
  PC：Figmaの余白・サイズに合わせた調整
--------------------------------------------- */
@media print, screen and (min-width: 769px) {
  /* 各セクション見出し（30px / 高さ43px） */
  h2.o-headGroup__main,
  .o-heading {
    line-height: 43px;
  }

  /* 金利マシマシ定期預金Ⅱとは */
  #period-content .l-section__body > p {
    line-height: 29px;
  }

  /* 例えば */
  .o-example .o-headGroup__sub {
    line-height: 1.4;
  }

  .o-example ul,
  .o-example > p {
    line-height: 26px;
  }

  .o-example__table th,
  .o-example__table td {
    height: 41px;
    padding-block: 0;
    line-height: 1.6;
  }

  /* 口座をお持ちでない方 */
  #noaccount .o-headGroup {
    margin-bottom: 0;
  }

  #noaccount .o-headGroup__sub {
    margin-top: 10px;
    padding: 0;
    line-height: 29px;
  }

  #noaccount .o-headGroup + .u-inlineCenter {
    margin-top: 40px;
    line-height: 19px;
  }

  .o-accountOpening__list {
    max-width: 470px;
    margin: 23px auto 0;
  }

  .o-accountOpening__item {
    width: 215px;
  }

  .o-accountOpening__img figcaption {
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.6;
  }

  .o-accountOpening__note {
    margin-top: 10px;
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .o-accountOpening__more {
    margin: 40px auto 0;
  }

  #noaccount .o-button {
    min-inline-size: 0;
    min-block-size: 56px;
    margin-block: 0;
    padding: 10px 32px 10px 25px;
    line-height: 36px;
  }

  .o-accountOpening__more + p {
    margin-top: 30px;
    line-height: 19px;
  }

  /* キャンペーン概要 */
  .o-overview__heading {
    line-height: 26px;
  }

  .o-overview__heading:first-child {
    margin-top: 40px;
  }

  .o-overview__content {
    line-height: 26px;
  }

  .o-overview__content .u-mt-20 {
    margin-top: 26px !important;
  }

  /* 区切り線の1pxを含めて見出しまで40px */
  .o-overview__content * + .o-overview__heading {
    padding-top: 19px;
  }

  /* デザインでは「お預入れ金額」のみ見出し下が4px広い */
  .o-overview__content .o-overview__amount {
    margin-top: 4px;
  }

  .o-overview__more .o-button--black {
    min-inline-size: 255px;
    min-block-size: 42px;
    margin: 30px auto 0;
    padding: 12px 32px 12px 25px;
    line-height: 18px;
  }

  /* よくあるご質問 */
  #faq .l-section__body {
    padding-top: 80px;
    padding-bottom: 68px;
  }

  #faq .o-headGroup {
    margin-bottom: 30px;
  }

  .o-faq__answer {
    padding-block: 30px 28px;
  }

  /* 会社概要（1行70px間隔） */
  #company .o-heading {
    margin-bottom: 33px;
  }

  .o-company__table {
    grid-template-columns: 156px 1fr;
    column-gap: 0;
  }

  .o-company__item {
    align-items: center;
    line-height: 30px;
  }

  .o-company__item + .o-company__item {
    margin-block-start: 20px;
    padding-block-start: 19px;
  }

  .o-company__label {
    margin-block-end: 0;
  }

  .o-company__note {
    margin-block-start: 40px;
    line-height: 26px;
  }
}

/* ---------------------------------------------
  SP：Figma(SP_design)の余白・サイズに合わせた調整
--------------------------------------------- */
@media screen and (max-width: 768px) {
  /* ヘッダー（高さ52px・ロゴ幅304px） */
  .l-header__logo {
    width: min(304px, 100% - 66px);
  }

  .o-navToggle {
    block-size: 52px;
  }

  /* 金利マシマシ定期預金Ⅱとは（SPは帯がゴールド） */
  .o-sectionTitle {
    padding: 6.5px 10px;
    font-size: 1.5625rem;
    line-height: 1.6;
  }

  #period-content .l-section__body {
    padding-top: 30px;
    padding-bottom: 50px;
  }

  .o-period__lead {
    line-height: 1.6;
  }

  #period-content .l-section__body > p {
    margin-top: 10px;
    line-height: 1.6;
  }

  .o-period__head h3 {
    padding: 10px;
    line-height: 29px;
  }

  /* 例えば */
  .o-example .o-headGroup__main {
    line-height: 1.4;
  }

  .o-example .o-headGroup__sub {
    margin-top: 0;
    line-height: 1.4;
  }

  .o-example .o-headGroup__main + .o-headGroup__sub {
    margin-top: 10px;
  }

  .o-example ul,
  .o-example > p {
    line-height: 1.6;
  }

  .o-example__table th,
  .o-example__table td {
    height: 41px;
    padding-block: 0;
    line-height: 1.6;
  }

  .o-example__table:has(+ .o-headGroup__sub) {
    margin-bottom: 50px;
  }

  .o-example__table--a td {
    padding-inline: 8px;
  }

  .o-example__table--b table {
    min-width: 449px;
  }

  /* 口座をお持ちでない方 */
  #noaccount .l-section__body {
    padding-block: 50px;
  }

  #noaccount .o-headGroup {
    margin-bottom: 0;
  }

  #noaccount .o-headGroup__main {
    line-height: 36px;
  }

  #noaccount .o-headGroup__sub {
    margin-top: 20px;
    padding: 0;
    line-height: 29px;
  }

  #noaccount .o-headGroup + .u-inlineCenter {
    margin-top: 10px;
    line-height: 22px;
  }

  .o-accountOpening__list {
    max-width: 350px;
    margin: 20px auto 0;
  }

  .o-accountOpening__item {
    width: 160px;
  }

  .o-accountOpening__img figcaption {
    margin-top: 20px;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .o-accountOpening__note {
    margin-top: 10px;
    font-size: 0.75rem;
    line-height: 1.6;
  }

  .o-accountOpening__more {
    margin: 30px auto 0;
  }

  #noaccount .o-button {
    min-inline-size: min(320px, 100%);
    min-block-size: 60px;
    margin-block: 0;
    padding: 0 18px 0 43px;
    font-size: 1.25rem;
    line-height: 60px;
  }

  /* SPのボタン矢印は「>」型 */
  #noaccount .o-button:after {
    --mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgOCAxMiI+CiAgPHBhdGggZD0iTTcuMDc3IDUuNDc1IDIuNTUzIDEuMjQ5YS45MTUuOTE1IDAgMCAwLS4yOTUtLjE4NC45NjQuOTY0IDAgMCAwLS45OS4xODQuODQ3Ljg0NyAwIDAgMC0uMTk3LjI3NS44LjggMCAwIDAtLjA3LjMyNWMwIC4yMjUuMDk2LjQ0LjI2Ny42bDMuODkgMy42MjZMMS4yNjkgOS43YS44NDQuODQ0IDAgMCAwLS4xOTguMjc1Ljc5Ny43OTcgMCAwIDAgMCAuNjUuOTExLjkxMSAwIDAgMCAuNDkzLjQ2Ljk2Ljk2IDAgMCAwIC45OS0uMTg1bDQuNTI0LTQuMjI2YS44NDQuODQ0IDAgMCAwIC4xOTgtLjI3NS43OTcuNzk3IDAgMCAwIDAtLjY1Ljg0NC44NDQgMCAwIDAtLjE5OC0uMjc1WiIvPgo8L3N2Zz4K);
    width: 10px;
    height: 16px;
    inset-inline-end: 29.5px;
  }

  .o-accountOpening__more + p {
    margin-top: 29px;
    line-height: 18px;
  }

  /* キャンペーン概要 */
  #overview .l-section__body {
    padding-block: 50px;
  }

  #overview .o-headGroup__main {
    line-height: 36px;
  }

  .o-overview__heading {
    padding-bottom: 10px;
    font-size: 0.9375rem;
    line-height: 22px;
  }

  .o-overview__heading:first-child {
    margin-top: 30px;
  }

  .o-overview__content {
    line-height: 24px;
  }

  .o-overview__content * + .o-overview__heading {
    margin-top: 20px;
    padding-top: 19px;
  }

  .o-overview__content .u-mt-20 {
    margin-top: 24px !important;
  }

  .o-overview__more .o-button--black {
    min-inline-size: 222px;
    min-block-size: 32px;
    margin: 30px auto 0;
    padding: 5px 32px 5px 25px;
    font-size: 0.9375rem;
    line-height: 22px;
  }

  .o-overview__more .o-button--black::after {
    inset-block-start: 0;
    inset-inline-end: 14px;
  }

  /* よくあるご質問（SPは白背景） */
  #faq.l-section--bg-secondary {
    background-color: var(--color-light);
  }

  #faq .l-section__body {
    padding-block: 0;
  }

  #faq .o-headGroup__main {
    line-height: 36px;
  }

  #faq .o-headGroup {
    margin-bottom: 30px;
  }

  .o-faq + .o-faq {
    margin-block-start: 20px;
  }

  .o-faq__question {
    padding: 12.5px 50px 12.5px 14px;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .o-faq__question__icon {
    inset-inline-end: 10px;
  }

  .o-faq__answer {
    padding: 10px 14px 17.5px;
    background-color: rgb(247 248 251 / 0.5);
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* 会社概要（1行103px間隔） */
  #company .l-section__body {
    padding-block: 60px;
  }

  #company .o-heading {
    margin-bottom: 30px;
    font-size: 1.5625rem;
    line-height: 36px;
  }

  .o-company__item {
    row-gap: 11px;
  }

  .o-company__item + .o-company__item {
    margin-block-start: 17px;
    padding-block-start: 22px;
  }

  .o-company__label {
    margin-block-end: 0;
    line-height: 22px;
  }

  .o-company__desc {
    line-height: 30px;
  }

  .o-company__note {
    margin-block-start: 30px;
    font-size: 0.9375rem;
    line-height: 1.7;
  }
}