@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/* components */
:root {
  --red: #cc0033;
  --black: #000;
  --text-link: #1155cc;
  --white: #fff;
  --yellow: #ffc700;
  --account: #ff943e;
  --nisa: #8ceb94;
  --border: #707070;
  --marker: #f4f8fd;
  --text: #333;
  --content: #ecf1f7;
  --note: #666;
  --font-family:
    "Noto Sans JP", "Roboto Condensed", "Roboto", "游ゴシック体", yugothic,
    "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",
    sans-serif;
  --font-weight-thin: 400;
  --font-weight-normal: 500;
  --font-weight-bold: 700;
  --font-weight-strong: 900;
}
html {
  scroll-behavior: smooth;
}
body {
  font-size: 1.6rem;
  font-weight: var(--font-weight-normal);
  color: var(--black);
  overflow-x: hidden;
}
a {
  color: var(--text-link);
}
button[type="button"]:focus-visible {
  outline: 2px dashed var(--text);
}
main {
  font-family: var(--font-family);
}
/* 990px以上は非表示 */
@media screen and (min-width: 990px) {
  .only-tb {
    display: none;
  }
}
/* 990px以下は非表示 */
@media screen and (max-width: 1024px) {
  .only-desktop {
    display: none;
  }
}
@media screen and (max-width: 990px) {
  .only-laptop {
    display: none;
  }
}
.l-disclaimer .text.-titleHide > .common_disclaimer > div:first-of-type {
  display: none;
}
.l-footer .outer {
  color: var(--white);
  text-decoration: underline;
}
/* 固定ヘッダーで見出しが隠れないように（必要なら各ファイルで調整） */
:root {
  --header-height: 64px;
  --z-index-skip-link: 1000;
  --skip-link-bg-color: var(--white);
  --skip-link-color: var(--black);
  --skip-link-border-color: var(--skip-link-color);
}
/* ふだんは画面外、フォーカス時だけ見える */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-index-skip-link);
  border: 2px solid var(--skip-link-color);
  border-radius: 8px;
  padding: 0.5em 1em;
  background-color: var(--skip-link-bg-color);
  color: var(--skip-link-border-color);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
/* キーボードで Tab を押してフォーカスした瞬間に表示 */
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
}
main {
  scroll-margin-top: var(--header-height);
}
.speech-bubble {
  position: relative;
}
.speech-bubble::before,
.speech-bubble::after {
  --border-width: 1px;
  --border-rotate: 148.5deg;

  content: "";
  position: absolute;
  bottom: 0;
  height: 100%;
  border-style: solid;
  border-width: 0;
}
.speech-bubble::before {
  left: -1em;
  border-left-width: var(--border-width);
  transform: rotate(var(--border-rotate));
}
.speech-bubble::after {
  right: -1em;
  border-right-width: var(--border-width);
  transform: rotate(calc(-1 * var(--border-rotate)));
}
.rounded-button-link {
  --rounded-button-link-font-size: 2rem;
  --rounded-button-link-border: 3px;
  --rounded-button-link-line-height: 1.143;
  --rounded-button-link-width: 100%;
  --rounded-button-link-max-width: 320px;
  --rounded-button-link-img-margin-top: 2px;
  --rounded-button-link-img-margin-left: 2px;
  --rounded-button-link-padding-block: 12px;
  --rounded-button-link-padding-inline: 1.6rem 1rem;
  @media screen and (max-width: 767px) {
    --rounded-button-link-font-size: 1.6rem;
    --rounded-button-link-border: 2px;
    --rounded-button-link-line-height: 1.5;
  }

  position: relative;
  display: inline-flex;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  color: var(--black);
  border: var(--rounded-button-link-border) solid var(--black);
  width: var(--rounded-button-link-width);
  max-width: var(--rounded-button-link-max-width);
  border-radius: 100px;
  padding-block: var(--rounded-button-link-padding-block);
  padding-inline: var(--rounded-button-link-padding-inline);
  text-decoration: none;
  font-size: var(--rounded-button-link-font-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--rounded-button-link-line-height);

  > img {
    margin-top: var(--rounded-button-link-img-margin-top);
    margin-left: var(--rounded-button-link-img-margin-left);
  }
}
/* nisa-fulluse */
:root {
  --text-link: #0d6eab;
  --text-fill: #fb3e25;
  --text-stroke: #070707;
  --text-bg-gray: #f7f7f7;
  --text-bg-light-yellow: #fff9e7;
  --text-bg-light-yellow-2: #fffae6;
  --text-bg-yellow: #ffc417;
  --content-yellow: #ffc700;
  --content-light-yellow: #fff9e1;
  --content-gray: #ccc;
  --content-green: #078071;
  --content-light-green: #f2f9f8;
  --content-light-blue: #33b0ff;
  --content-max-width: 1230px;
  --content-width: 1200px;
  --content-small-width: 992px;
  --line-height-tight: 1.333;
  --section-spacing: 160px;
  --z-index-deadline-list-note-open: 300;
  --z-index-overlay: 200;
  --z-index-header: 100;
  --z-index-mv: 10;
  --z-index-common-header-img-show: 2;
  --z-index-sub-navigation: 1;
  --z-index-slider-nav: 1;
  --z-index-feature-fixed-nisa-neko: 1;
  --z-index-common-header-bg: 1;
  --z-index-gnavi-focus: 1;
  --z-index-deadline-list-note-close: 0;
  --z-index-related-links: 0;
  --z-index-animation-cat: 0;
  --z-index-common-header-img: 0;
  --z-index-animation-hole: 0;
  --z-index-related-links-strong-bg: -1;
  --z-index-animation-layer: -10;
  --z-index-content-bg: -100;
  --header-height: 64px;
  --header-border-bottom: 1px solid var(--black);
  --anchor-scroll-margin-top: calc(3rem + 64px); /* 余白 + header */

  @media screen and (max-width: 1690px) {
    --header-border-bottom: 0;
    --header-height: 50px;
  }
  @media screen and (max-width: 1439px) {
    --content-max-width: 100%;
  }
}
/* タグの初期スタイルの上書き */
main {
  margin-top: var(--header-height);
}
a {
  text-decoration: none;
}
a,
button,
summary {
  transition: filter 0.2s ease, background-color 0.2s ease;
}
@media (hover: hover) {
  a:hover,
  button:hover,
  summary:hover {
    filter: brightness(0.88) contrast(1.10);
  }
}
*:has(> wbr) {
  overflow-wrap: anywhere;
  word-break: keep-all;
}
@media screen and (max-width: 800px) {
  *:has(> wbr.only-pc) {
    overflow-wrap: unset;
    word-break: unset;
  }
}
summary  {
  list-style: none;
  -webkit-appearance: none;
  appearance: none;
}
summary::marker  {
  content: "";
}
summary::-webkit-details-marker {
  display: none;
}
details:not([open]) summary:focus,
details:not([open]) summary:focus-visible {
  filter: brightness(0.88) contrast(1.10);
  outline-offset: 3px;
}
/* summary details アコーディオンアニメーション */
details {
  &::details-content {
    transition:
      height 0.4s,
      opacity 0.4s,
      content-visibility 0.4s allow-discrete;
    height: 0;
    opacity: 0;
    overflow: clip;
  }
  &[open]::details-content {
    opacity: 1;
  }
}
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
  details[open]::details-content {
    height: auto;
  }
}
@supports not (interpolate-size: allow-keywords) {
  details[open]::details-content {
    height: auto;
  }
}
body {
  background-color: var(--content-light-blue);
}
main > .catWrap > section:not(.mv, .related-links) {
  position: relative;
}
main > .catWrap > section:not(.mv, .related-links) .inner {
    padding-inline: 15px;
  }
main > .catWrap > section:not(.related-links) > .inner {
  margin-inline: auto;
  max-width: var(--content-max-width);
}
@media screen and (max-width: 800px) {
  main > section > .inner {
    max-width: var(--content-max-width);
  }
}
.text-center {
  text-align: center;
}
.animation-spacing01 {
  margin-top: 120px;
  @media screen and (max-width: 800px) {
    margin-top: 0;
  }
}
.animation-spacing02 {
  margin-top: 600px;
  @media screen and (max-width: 1440px) {
    margin-top: 400px;
  }
  @media screen and (max-width: 800px) {
    margin-top: 300px;
  }
}
.animation-spacing03 {
  margin-top: 300px;
  @media screen and (max-width: 800px) {
    margin-top: 600px;
  }
}
@media screen and (max-width: 1440px) {
  #usage01 {
    min-height: 1900px;
  }
  #usage02_01 {
    min-height: 1400px;
  }
  #usage02_02 {
    min-height: 1200px;
  }
  #feature01 {
    min-height: 2900px;
  }
  #feature02 {
    min-height: 1600px;
  }
  #sectionTips {
    min-height: 1400px;
  }
  #faq {
  }
}
@media screen and (max-width: 800px) {
  #usage01 {
    min-height: 3000px;
  }
  #usage02_01 {
    min-height: 2400px;
  }
  #usage02_02 {
    min-height: 1600px;
  }
  #feature01 {
    min-height: 3300px;
  }
  #feature02 {
    min-height: 2300px;
  }
  #sectionTips {
    min-height: 1400px;
  }
  #faq {
  }
}
/* スクリーンリーダーのみ読み上げ用 */
.only-sr {
  position: absolute!important;
  width: 1px;
  height: 1px;
  padding: 0!important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  color: var(--black);
  background-color: var(--white);
}
@media screen and (max-width: 800px) {
  .only-sp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
}
/* common-header */
.common-header {
  width: 800px;
  margin: 0 auto;
  position: relative;
  &:after {
    content: "";
    width: 100%;
    display: block;
    clear: both;
  }
  @media screen and (max-width: 800px) {
    transform: scale(1);
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
.common-header .picture {
    position: absolute;
    width: 500px;
    height: 500px;
    z-index: var(--z-index-common-header-img);
    top: 260px;
    left: 215px;
    transform-origin: bottom;
    offset-path:path('M187,198.5S236.881,99,388,99s218,99.5,218,99.5S586,168,531,167s-69,31.5-69,31.5');
    offset-rotate: 0deg;
    offset-distance: 0;
    transform: scale(10%,10%) translate(-300px,-300px);
  }
.common-header.-reverce .picture {
    order: 1;
    left: auto;
    right: 500px;
    offset-path:path('M606,198.5S556.119,99,405,99s-218,99.5-218,99.5S207,168,262,167s69,31.5,69,31.5');
    transform: scale(10%,10%) translate(300px,-300px);
  }
.common-header .picture.is-show {
    offset-distance: 0;
    animation: cat-apeear-right 0.5s linear forwards alternate;
  }
@keyframes cat-apeear-right {
    0% {
      transform: scale(10%,10%);
      offset-distance: 0%;
      z-index: var(--z-index-common-header-img);
    }
    30% {
      transform: scale(100%,110%);
      z-index: var(--z-index-common-header-img);
    }
    50% {
      z-index: 10;
      z-index: var(--z-index-common-header-img);
    }
    60% {
      transform: scale(100%,100%);
      z-index: var(--z-index-common-header-img);
    }
    75% {
      transform: scale(100%,90%);
      z-index: var(--z-index-common-header-img);
    }
    85% {
      transform: scale(100%,100%);
      z-index: var(--z-index-common-header-img-show);
    }
    100% {
      transform: scale(100%,100%);
      offset-distance: 100%;
      z-index: var(--z-index-common-header-img-show);
    }
  }
.common-header .bg {
    float: left;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--black);
    color: var(--white);
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    width: 500px;
    z-index: var(--z-index-common-header-bg);
    @media screen and (max-width: 800px) {
      float: none;
    }
  }
.common-header.-reverce .bg {
    float: right;
    @media screen and (max-width: 800px) {
      float: none;
    }
  }
.common-header .title {
    display: inline-flex;
    flex-direction: column;
    width: 310px;
    text-align: center;
    font-size: 2.4rem;
    line-height: 1.25;
  }
.common-header .title > span {
      display: inline-flex;
      flex-direction: column;
    }
.common-header .title > span .number {
        margin-top: 10px;
        font-family: Filson Soft, sans-serif, var(--font-family);
        font-size: 7.2rem;
        line-height: 1;
      }
.common-header .title > strong {
      margin-top: 10px;
      border-block: 4px solid var(--white);
      padding-block: 6px;
      font-size: 3.6rem;
    }
#usage01 .common-header .title > strong,
    #usage02 .common-header .title > strong {
      font-size: 2.2rem;
      line-height: 1.6;
    }
.common-header .description {
    margin-top: 24px;
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.5;
  }
@media screen and (max-width: 800px) {
  .common-header {
    flex-direction: column;
    align-items: center;
    margin-left: 0;
    margin-bottom: -115px;
  }
  .common-header.-reverce {
    margin-right: 0;
  }
  .common-header .picture,
  .common-header.-reverce .picture {
    position: relative;
    width: 300px;
    height: 300px;
    transform-origin: bottom;
    offset-path: unset;
    transform: scale(0.9);
    z-index: var(--z-index-common-header-img-show);
    display: inline-block;
  }
  #usage01 .common-header .picture {
    left: 65px;
    top: -170px;
    margin-bottom: -30px;
  }
  #usage02 .common-header .picture {
    left: -31px;
    top: -135px;
  }
  #feature01 .common-header .picture {
    left: 45px;
    top: -135px;
  }
  #feature02 .common-header .picture {
    left: 5px;
    top: -153px;
  }
  #sectionTips .common-header .picture {
    left: 5px;
    top: -153px;
  }
  #faq .common-header .picture {
    left: 5px;
    top: -153px;
  }
  .common-header.-reverce .picture {
    order: 2;
    offset-path: unset;
  }
  .common-header .picture.is-show {
    animation: none;
  }
  .common-header .bg {
    width: 400px;
  }
  .common-header .title {
    width: 280px;
    font-size: 2.4rem;
  }
    .common-header .title > span {
      font-size: 1.8rem;
    }
      .common-header .title > span .number {
        font-size: 5.6rem;
      }
    .common-header .title > strong {
      font-size: 2.8rem;
    }
    #usage01 .common-header .title > strong,
    #usage02 .common-header .title > strong {
      font-size: 2.0rem;
    }
}
@media screen and (max-width: 1440px) {
  #usage01 .common-header { transform: scale(0.8) translate(-51px,0); }
  #usage02 .common-header { transform: scale(0.8) translate(28px,0); }
  #feature01 .common-header { transform: scale(0.8) translate(-35px,0); }
  #feature02 .common-header { transform: scale(0.8) translate(-59px,0); }
  #sectionTips .common-header { transform: scale(0.8) translate(30px,0); }
  #faq .common-header { transform: scale(0.8) translate(-70px,0); }
}
@media screen and (max-width: 800px) {
  #usage01 .common-header,
  #usage02 .common-header,
  #feature01 .common-header,
  #feature02 .common-header,
  #sectionTips .common-header,
  #faq .common-header {
    transform: scale(1) translate(0,0);
  }
}
/* accordion */
details {
  --bg: var(--white);
  --border-radius: 40px;

  background-color: var(--bg);
  border: 2px solid var(--black);
  border-radius: var(--border-radius);
}
details summary {
  cursor: pointer;
  position: relative;
  background-color: var(--bg);
  border-radius: var(--border-radius);
  padding: 10px;
}
details summary::before,
  details summary::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    width: 18px;
    height: 2.6px;
    z-index: 1;
    background-color: var(--black);
    border-radius: 10px;
  }
details summary::after {
      transform: translateY(-50%) rotate(90deg);
      transition: transform 0.3s ease-in-out;
    }
details[open] summary::after {
      transform: translateY(-50%) rotate(180deg);
    }
@media screen and (max-width: 800px) {
  details {
    --border-radius: 30px;
  }
}
/* responsive-stack（PC横並び、SP縦積み） */
.responsive-stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
}
@media screen and (max-width: 800px) {
  .responsive-stack {
    grid-template-columns: 100%;
  }
}
/* responsive-stack（均等横並び） */
.grid-equal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  justify-content: space-between;
}
/* wave-underline（svgの波線） */
.wave-underline {
  --underline-height: 5px;
  --wave-overhang: 0px;
  --bottom: -4px;
  --width: calc(100% + var(--wave-overhang) * 2);

  display: inline-block;
  position: relative;
  margin-bottom: var(--underline-height);
}
.wave-underline::after {
  content: "";
  position: absolute;
  inset-inline: calc(-1 * var(--wave-overhang));
  margin-inline: auto;
  bottom: var(--bottom);
  width: var(--width);
  height: var(--underline-height);
  background-size: auto var(--underline-height);
  background-repeat: repeat-x;
}
/* 浅めの波線 */
.wave-underline.shallow::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="5" viewBox="0 0 30 5"><path d="M0,.5c7.158,0,7.158,4,14.315,4s7.155-4,14.31-4,7.157,4,14.314,4S50.1.5,57.255.5s7.157" stroke="black" fill="none" stroke-width="1"/></svg>');
}
/* 深めの波線 */
.wave-underline.deep {
  --underline-height: 10px;
  --wave-overhang: 6px;
  --bottom: -10px;
}
.wave-underline.deep::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="34" height="10" viewBox="0 0 34 10"><path d="M0,1C8.43,1,8.43,9,16.86,9s8.431-8,16.861-8,8.43,8,16.86,8,8.43-8,16.86-8S75.869,9,84.3,9s8.429-8" stroke="black" fill="none" stroke-width="2"/></svg>');
}
/* text-stroke（縁取りの文字） */
.text-stroke {
  color: var(--text-fill);
  font-family: Filson Soft, var(--font-family);
  font-size: 4.8rem;
  font-weight: var(--font-weight-bold);
  text-stroke: 3.5px var(--text-stroke);
  -webkit-text-stroke: 3.5px var(--text-stroke);
  paint-order: stroke;
}
/* text-emphasis（文字の上にdot） */
.text-emphasis {
  --text-emphasis-color: var(--black);
  --text-emphasis-size: 16px;
  --text-emphasis-padding-top: 10px;

  background-image: radial-gradient(circle at center, var(--text-emphasis-color) 20%, transparent 20%);
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 1em var(--text-emphasis-size);
  padding-top: var(--text-emphasis-padding-top);

  @media screen and (max-width: 800px) {
    --text-emphasis-size: 10px;
    --text-emphasis-padding-top: 7px;
  }
}
/* note-listでtext-indentを調整したい場合 */
.note-list li:has(> .text-indent-adjust) {
  text-indent: 0;
  margin-left: -1em;
}
/* アンカーリンクの上余白の設定 */
[id^="anchor"] {
  scroll-margin-top: var(--anchor-scroll-margin-top);
}
.text-link {
  display: inline;
  color: var(--text-link);
  border-bottom: 1px solid transparent;
  transition: border 0.1s ease-out;
  > img {
    width: 1em;
    vertical-align: middle;
    margin-left: 2px;
  }
  @media (hover: hover) {
    &:hover {
      border-bottom: 1px solid var(--text-link);
    }
  }
}
/* ページ内リンク */
.page-anchor-link {
  --page-anchor-link-font-size: 1.8rem;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: var(--content-yellow);
  color: var(--black);
  border-radius: 100px;
  border: 3px solid var(--black);
  width: 100%;
  padding: 10px 1em;
  text-align: center;
  font-size: var(--page-anchor-link-font-size);
  font-weight: var(--font-weight-bold);
  line-height: 1.444;
  transition: filter 0.3s ease-out;

  &::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 8px;
    background-image: url('/image/feature/nisa-fulluse/icon_page-anchor-link.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  @media (hover: hover) {
    &:hover {
      filter: brightness(0.88) contrast(1.10);
    }
  }

  @media screen and (max-width: 800px) {
    --page-anchor-link-font-size: 1.6rem;
  }
}
/* 吹き出し */
.speech-bubble-surrounded-white {
  --bg: var(--white);
  --text: var(--black);
  --tail-width: 24px;
  --tail-height: 18px;
  --border-width: 2px;
  --border: var(--border-width) solid var(--black);
  --min-width: min(100%, 310px);
  --width: fit-content;
  --padding: 6px 8px 6px 18px;
  --line-height: 1.5;
  --after-bottom: -15px;
  --margin-bottom: 4px;

  margin-bottom: calc(var(--tail-height) + var(--margin-bottom));
  position: relative;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background-color: var(--bg);
  border: var(--border);
  border-radius: 100px;
  width: var(--width);
  min-width: var(--min-width);
  padding: var(--padding);
  line-height: var(--line-height);
}
.speech-bubble-surrounded-white::before,
  .speech-bubble-surrounded-white::after  {
    content: '';
    position: absolute;
    inset-inline: 0;
    margin-inline: auto;
    top: 100%;
    display: block;
    width: 0;
    height: 0;
  }
.speech-bubble-surrounded-white::before {
    --tail-height: 18px;
    top: calc(100% + var(--border-width));
    border-style: solid;
    border-width: var(--tail-height) calc(var(--tail-width) / 2) 0 calc(var(--tail-width) / 2);
    border-color: var(--black) transparent transparent transparent;
  }
.speech-bubble-surrounded-white::after {
    border-style: solid;
    border-width: var(--tail-height) calc(var(--tail-width) / 2) 0 calc(var(--tail-width) / 2);
    border-color: var(--white) transparent transparent transparent;
  }
/* scroll-information */
.scroll-information {
  display: flex;
  column-gap: 10px;
  align-items: center;
  > p {
    font-size: 1.2rem;
  }
}
/* bg-rounded */
.bg-rounded {
  background-color: var(--bg);
  border-radius: 10px;
  padding: 24px;
}
.bg-rounded.gray {
    --bg: var(--text-bg-gray);
  }
.bg-rounded.light-yellow {
    --bg: var(--text-bg-light-yellow);
  }
@media screen and (max-width: 800px) {
  .bg-rounded {
    padding: 20px;
  }
}
.speech-bubble-underline {
  --border-color: var(--content-gray);
  --tail-bg: var(--text-bg-gray);
  --tail-width: 24px;
  --tail-height: 10px;
  --border-width: 1px;
  --border: var(--border-width) solid var(--border-color);
  --margin-bottom: 0px;
  --padding-bottom: 20px;

  position: relative;
  margin-bottom: calc(var(--tail-height) + var(--margin-bottom));
  border-bottom: var(--border);
  padding-bottom: var(--padding-bottom);
}
.speech-bubble-underline::before, .speech-bubble-underline::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    margin-inline: auto;
    top: 100%;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
  }
.speech-bubble-underline::before {
    --tail-height: 10px;
    top: calc(100% + var(--border-width));
    border-width: var(--tail-height) calc(var(--tail-width) / 2) 0 calc(var(--tail-width) / 2);
    border-color: var(--border-color) transparent transparent transparent;
  }
.speech-bubble-underline::after {
    border-width: var(--tail-height) calc(var(--tail-width) / 2) 0 calc(var(--tail-width) / 2);
    border-color: var(--tail-bg) transparent transparent transparent;
  }
.fade-content {
  opacity: 0;
  @media screen and (max-width: 800px) {
    opacity: 1;
  }
  &.is-show {
    animation: content-animation01 0.5s linear forwards alternate;
    @media screen and (max-width: 800px) {
      animation: unset;
    }
  }
}
@keyframes content-animation01 {
  0% {
    opacity: 0;
    transform: translate(0,150px);
  }
  100%  {
    opacity: 1;
    transform: translate(0,0);
  }
}
.content-width {
  max-width: var(--content-max-width);
  width: 100%;
  margin-inline: auto;
  @media screen and (max-width: 1439px) {
    --content-max-width: 800px;
  }
  @media screen and (max-width: 800px) {
    --content-max-width: 100%;
  }
}
@media screen and (max-width: 1690px) {
  body:has([aria-controls="global-navigation"][aria-expanded="true"]) {
    overflow: hidden;
    overscroll-behavior: none;
  }
}
@media screen and (min-width: 1690.1px) {
  .nav-only-sp {
    display: none !important;
  }
  .header a:focus,
  .header button:focus {
    outline-offset: 1px;
    position: relative;
    z-index: var(--z-index-gnavi-focus);
  }
}
@media screen and (max-width: 1690px) {
  .nav-only-pc {
    display: none !important;
  }
}
.header {
  --header-display: flex;
  --dark-yellow: #ffc803;

  position: fixed;
  top: 0;
  inset-inline: 0;
  background-color: var(--yellow);
  z-index: var(--z-index-header);
  border-bottom: var(--header-border-bottom);
  display: var(--header-display);
  justify-content: space-between;
  overflow: visible;

  @media screen and (max-width: 1690px) {
    --header-display: block;
  }

  .logo .link {
    --logo-width: 117px;
    --logo-padding-inline: 30px;

    display: inline-flex;
    align-items: center;
    width: calc(var(--logo-width) + var(--logo-padding-inline) * 2);
    padding-inline: var(--logo-padding-inline);
    height: var(--header-height);

    @media screen and (max-width: 1690px) {
      --logo-width: 78px;
      --logo-padding-inline: 15px;
    }
  }

  .logo svg {
    vertical-align: bottom;
  }
}
@media screen and (max-width: 1690px) {
  .header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--black);
  }
}
@media screen and (max-width: 1690px) {
  .global-navigation {
    background-color: var(--yellow);
  }
  .global-navigation:not([hidden]) {
    overflow-y: scroll;
  }
  .global-navigation[data-global-navigation="true"] {
    display: none;
  }
  .global-navigation:not([inert]) {
    animation: gNaviSlideDown 0.2s ease-out forwards;
  }
  .global-navigation[inert] {
    animation: gNaviSlideUp 0.2s ease-out forwards;
  }
}
.global-navigation-list {
  --global-navigation-list-display: flex;

  display: var(--global-navigation-list-display);
  align-items: center;

  @media screen and (max-width: 1690px) {
    --global-navigation-list-display: block;
    padding-inline: 20px;
    padding-bottom: 48px;
  }
}
.global-navigation-list > .item {
  --global-navigation-list-border-left: 1px solid var(--black);
  border-left: var(--global-navigation-list-border-left);
  position: relative;

  @media screen and (max-width: 1690px) {
    --global-navigation-list-border-left: 0;

    border-bottom: 1px solid var(--black);
  }
}
.global-navigation-list > .item > .link,
.global-navigation-list > .item > .label {
  --label-font-size: 1.4rem;
  --label-height: var(--header-height);
  --label-padding-inline: 30px;

  display: inline-flex;
  align-items: center;
  text-align: left;
  color: var(--black);
  font-size: var(--label-font-size);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  height: var(--label-height);
  padding-inline: var(--label-padding-inline);
  background-color: var(--yellow);

  @media screen and (max-width: 1690px) {
    --label-font-size: 1.8rem;
    --label-height: auto;
    --label-padding-inline: 0;

    width: 100%;
  }
}
@media screen and (max-width: 1690px) {
  .global-navigation-list > .item > .link {
    padding-block: 15px;
  }
}
@media screen and (max-width: 1690px) {
  .global-navigation-list > .item > .label {
    padding-block: 15px 10px;
  }
}
@media screen and (max-width: 1690px) {
  .global-navigation-list > .item-faq > .link {
    position: relative;
  }
  .global-navigation-list > .item-faq > .link::after {
    position: absolute;
    right: 0;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--black);
    border-right: 0;
  }
  .global-navigation-list > .item-kakunin {
    border-bottom: 0;
  }
  .global-navigation-list > .item-kakunin > .link {
    position: relative;
    margin-top: 30px;
    margin-inline: auto;
    display: block;
    width: min(100%, 335px);
    padding: 25px 23px;
    text-align: center;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 1690px) {
  .global-navigation-list > .item-monex {
    border-bottom: 0;
    text-align: center;
  }
}
.global-navigation-list > .item-monex > .link {
  display: flex;
  font-size: 1.2rem;
  line-height: 1.5;
  padding-block: 13px;
  align-items: center;

  @media screen and (max-width: 1690px) {
    margin-top: 30px;
    margin-inline: auto;
    text-decoration: underline;
    width: fit-content;
    padding: 0;
  }
  > img {
    margin-top: 2px;
    margin-left: 2px;
  }
}
.global-navigation-list > .item-usage > .label::before,
.global-navigation-list > .item-feature > .label::before,
.global-navigation-list > .item-tips > .label::before,
.global-navigation-list > .item-faq > .link::before {
  display: inline-block;
  padding-right: 8px;
  vertical-align: -6px;
}
.global-navigation-list > .item-usage > .label::before {
  content: url(/image/feature/nisa-fulluse/icon_usage.svg);
}
.global-navigation-list > .item-feature > .label::before {
  content: url(/image/feature/nisa-fulluse/icon_features.svg);
}
.global-navigation-list > .item-tips > .label::before {
  content: url(/image/feature/nisa-fulluse/icon_tips.svg);
}
.global-navigation-list > .item-faq > .link::before {
  content: url(/image/feature/nisa-fulluse/icon_faq.svg);
}
.global-navigation-list > .item > .label::after {
  content: url(/image/feature/nisa-fulluse/icon_plus.svg);
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  width: 12px;
  height: 12px;
  margin-left: 8px;

  @media screen and (max-width: 1690px) {
    display: none;
  }
}
.global-navigation-list > .item > .label[aria-expanded="true"]::after {
  content: url(/image/feature/nisa-fulluse/icon_minus.svg);
}
.global-navigation-list > .item-kakunin .link {
  background-color: var(--black);
  color: var(--white);
}
.sub-navigation[inert] {
  opacity: 0;
}
.sub-navigation[data-sub-navigation-panel="true"][inert] {
  display: block;
}
.sub-navigation[data-sub-navigation-panel="true"] {
  display: none;
  @media screen and (max-width: 1690px) {
    display: block;
  }
}
.sub-navigation {
  --sub-navigation-position: absolute;
  --sub-navigation-border: 1px solid var(--black);
  --sub-navigation-border-radius: 0 0 15px 15px;
  --sub-navigation-background-color: var(--white);
  --sub-navigation-padding: 15px;
  --sub-navigation-transition: opacity 0.3s ease-in-out;

  position: var(--sub-navigation-position);
  top: var(--header-height);

  width: calc(100% + 2px);
  background-color: var(--sub-navigation-background-color);
  z-index: var(--z-index-sub-navigation);
  border: var(--sub-navigation-border);
  border-radius: var(--sub-navigation-border-radius);
  padding: var(--sub-navigation-padding);
  opacity: 1;
  transition: var(--sub-navigation-transition);

  @media screen and (min-width: 1690.1px){
    left: -1px;
  }
  @media screen and (max-width: 1690px) {
    --sub-navigation-position: static;
    --sub-navigation-border: 0;
    --sub-navigation-border-radius: 0;
    --sub-navigation-background-color: transparent;
    --sub-navigation-padding: 0;
    --sub-navigation-transition: none;

    padding-left: 30px;
    margin-bottom: 15px;
  }
}
.sub-navigation > .item {
  font-size: 1.4rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}
.sub-navigation > .item > .link {
  --sub-navigation-link-display: block;

  display: var(--sub-navigation-link-display);
  color: var(--black);
  padding: 5px;

  @media screen and (max-width: 1690px) {
    --sub-navigation-link-display: flex;

    align-items: baseline;
    gap: 5px;
    word-break: auto-phrase;
  }
  @media (any-hover: hover) {
    &:hover {
      --sub-navigation-background-color: #f6f6f6;
      background-color: var(--sub-navigation-background-color);

      @media screen and (max-width: 1690px) {
        --sub-navigation-background-color: var(--dark-yellow);
      }
    }
  }
}
@media screen and (max-width: 1690px) {
  .sub-navigation > .item > .link::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--black);
    border-right: 0;
  }
}
.header-menu-toggle {
  display: none;
  @media screen and (max-width: 1690px) {
    display: block;
  }
}
.header-menu-toggle {
  --menu-toggle-size: 48px;
  --menu-line-length: 21px;
  --menu-line-thickness: 2px;
  --menu-line-gap: 8px;
  --menu-x-length: 20px;
  --menu-line-color: var(--black);

  position: relative;
  width: var(--menu-toggle-size);
  height: var(--menu-toggle-size);
  background: none;
  border: none;
  cursor: pointer;
}
.header-menu-toggle::before,
.header-menu-toggle::after,
.header-menu-toggle span {
  content: "";
  position: absolute;
  left: 50%;
  width: var(--menu-line-length);
  height: var(--menu-line-thickness);
  background-color: var(--menu-line-color);
  transform: translateX(-50%);
  transition:
    transform 0.3s ease,
    width 0.3s ease;
}
.header-menu-toggle::before {
  top: calc(50% - var(--menu-line-gap) - var(--menu-line-thickness) / 2);
}
.header-menu-toggle span {
  top: 50%;
  transform: translate(-50%, -50%);
}
.header-menu-toggle::after {
  top: calc(50% + var(--menu-line-gap) - var(--menu-line-thickness) / 2);
}
.header-menu-toggle[aria-expanded="true"]::before {
  top: 50%;
  width: var(--menu-x-length);
  transform: translate(-50%, -50%) rotate(45deg);
}
.header-menu-toggle[aria-expanded="true"]::after {
  top: 50%;
  width: var(--menu-x-length);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.header-menu-toggle[aria-expanded="true"] span {
  display: none;
}
@keyframes gNaviSlideDown {
  from {
    height: 0;
  }
  to {
    height: calc(100dvh - var(--header-height));
  }
}
@keyframes gNaviSlideUp {
  from {
    height: calc(100dvh - var(--header-height));
  }
  to {
    height: 0;
  }
}
.mv {
  --mv-height: calc(100svh - var(--header-height) + 2px);
  --mv-min-height: min(calc(100svh - var(--header-height) + 2px), 500px);

  position: relative;
  background-color: var(--content-yellow);
  z-index: var(--z-index-mv);
  .inner {
    position: relative;
    width: 100%;
    height: 100vh; /* 古いブラウザ用フォールバック */
    height: var(--mv-height);
    min-height: var(--mv-min-height);
    margin-inline: 0;
    max-width: 100%;
    .title {
      width: 100vw;
      height: 100vh; /* 古いブラウザ用フォールバック */
      height: var(--mv-height);
      min-height: var(--mv-min-height);
      overflow: hidden;
      .picture {
        width: 100vw;
        height: 100vh; /* 古いブラウザ用フォールバック */
        height: var(--mv-height);
        min-height: var(--mv-min-height);
        .img {
          width: 100%;
          height: var(--mv-height);
          min-height: var(--mv-min-height);
          object-fit: contain;
        }
      }
      .main-cat {
        width: 100vw;
        height: 100vh; /* 古いブラウザ用フォールバック */
        height: var(--mv-height);
        min-height: var(--mv-min-height);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%,0);
        .motion {
          opacity: 0; /* 初期設定 */
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%,0);
          width: 100vw;
          height: 100vh; /* 古いブラウザ用フォールバック */
          height: var(--mv-height);
          background-position: center bottom;
          background-repeat: no-repeat;
          background-size: contain;
          &.-scene01 {
            opacity: 1; /* 初期設定 */
            background-image: url(/image/feature/nisa-fulluse/mv_image01.webp);
            @media screen and (max-width: 1200px) {
              background-image: url(/image/feature/nisa-fulluse/mv_image01_sp.webp);
            }
          }
          &.-scene02 {
            background-image: url(/image/feature/nisa-fulluse/mv_image02.webp);
            @media screen and (max-width: 1200px) {
              background-image: url(/image/feature/nisa-fulluse/mv_image02_sp.webp);
            }
          }
        }
      }
    }
  }
}
@media (orientation: landscape) and (max-width: 1440px){
  .mv {
    .inner {
      .title {
        height: 80svh;
        .picture {
          width: 80svw;
          height: 80svh;
          position: relative;
          left: 50%;
          top: 20px;
          transform: translate(calc(-50% + 30svw) ,0);
        }
        .main-cat {
          .motion {
            width: 80svw;
            height: 80svh;
            background-size: contain;
            &.-scene01 {
              background-image: url(/image/feature/nisa-fulluse/mv_image01.webp);
            }
            &.-scene02 {
              background-image: url(/image/feature/nisa-fulluse/mv_image02.webp);
            }
          }
        }
      }
    }
  }
}
@supports (-webkit-touch-callout: none) {
  .mv {
    .inner {
      height: -webkit-fill-available;
      margin-top: 0;
      .title {
        height: -webkit-fill-available;
        .picture {
          height: -webkit-fill-available;
        }
      }
    }
  }
}
.features {
  .feature {
    padding-top: var(--section-spacing);
    @media screen and (max-width: 800px) {
      padding-top: 30px;
    }
  }
  .lead {
    text-align: center;
    font-size: 3.2rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.5;

    &:has(.text-stroke) {
      line-height: 1.3;
    }
    .speech-bubble-surrounded-white {
      font-size: 1.6rem;
      margin-bottom: 0.5em;
    }
    .text-stroke {
      display: inline-block;
      margin: 10px 4px 0;
    }
  }
  .lead.speech-bubble {
    width: fit-content;
    padding-inline: 20px;

    .text-stroke {
      color: var(--white);
    }
    &::before,
    &::after {
      --border-width: 2px;
      --border-rotate: 150deg;
      bottom: -10px;
      height: 110%;
    }
  }
  .lead-small {
    text-align: center;
    font-size: 1.8rem;
    line-height: 2;
  }
  .feature-body {
    padding-top: 80px;
  }
    :where(.feature-body p:not([class])) {
      font-size: 1.8rem;
      line-height: 2;
    }
  @media screen and (max-width: 800px) {
    .lead {
      font-size: 2.2rem;
      .speech-bubble-surrounded-white {
        --padding: 4px 18px 4px 28px;
        --margin-bottom: 10px;

        font-size: 1.4rem;
      }
      .text-stroke {
        margin: 14px 4px 2px;
        font-size: 5.6rem;
      }
    }
    .lead.speech-bubble {
      width: fit-content;
      padding-inline: 0px;

      .text-stroke {
        display: inline;
        font-size: 3.6rem;
      }
      &::before,
      &::after {
        --border-width: 2px;
        --border-rotate: 150deg;
        top: -14px;
        height: 106px;
      }
    }
    .lead-small {
      text-align: left;
      font-size: 1.4rem;
    }
    .feature-body {
      padding-top: 60px;
    }
      :where(.feature-body p:not([class])) {
        font-size: 1.4rem;
      }
  }

    .feature-body .border-box {
      position: relative;
      display: block;
      background-color: var(--white);
      border: 2px solid var(--black);
      border-radius: 20px;
      padding: 40px;
    }
    .feature-body .border-box:has(.heading) {
      margin-top: 68px;
      padding: 60px 40px 40px;
    }
      .feature-body .border-box .heading {
        position: absolute;
        top: 0;
        transform: translateY(-50%);
        inset-inline: 0;
        margin-inline: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-width: 400px;
        min-height: 56px;
        border: 2px solid var(--black);
        border-radius: 100px;
        padding: 8px;
        font-size: 2.4rem;
        line-height: 1.667;
        background-color: var(--text-bg-yellow);
      }
        .feature-body .border-box .heading span {
          font-size: 1.6rem;
          padding-top: 6px;
        }
    .feature-body .responsive-stack:has(figure + figure) {
      gap: 40px;
    }
      .feature-body .responsive-stack:has(figure + figure) figure {
        margin: 0;
      }
    @media screen and (max-width: 1440px) {
      .feature-body .border-box:has(.heading) {
        max-width: 800px;
        margin-inline: auto;
      }
    }
    @media screen and (max-width: 800px) {
      .feature-body .border-box {
        width: 100%;
        padding: 20px;
      }
        .feature-body .border-box:has(.heading) {
          margin-top: 58px;
          padding: 64px 18px 28px;
        }
        .feature-body .responsive-stack:has(figure + figure) {
          gap: 20px;
        }
    }

    .feature-body figure {
      display: flex;
      flex-direction: column;
      gap: 20px 32px;
      justify-content: space-between;
    }
    .feature-body .figure-responsive-stack {
      flex-direction: row;
    }
      .feature-body .figure-responsive-stack figcaption {
        flex-shrink: 0;
        margin-right: auto;
      }
      .feature-body .responsive-stack figcaption {
        margin-right: auto;
      }

    @media screen and (max-width: 1440px) {
      .feature-body .figure-responsive-stack {
        flex-direction: column;
        width: fit-content;
      }
      .feature-body figure {
        align-items: center;
        margin: 0 auto auto;
      }
    }
    @media screen and (max-width: 800px) {
      .feature-body .figure-responsive-stack {
        flex-direction: column;
      }
          .feature-body .border-box .heading {
            flex-direction: column;
            line-height: 1;
            padding: 10px;
            min-width: 225px;
            font-size: 2rem;
          }
            .feature-body .border-box .heading > span {
              font-size: 1.4rem;
            }
    }

    .feature-body .highlight-title {
      display: inline;
      background-color: var(--black);
      color: var(--white);
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      padding: 5px 12px;
      font-size: 1.8rem;
      font-weight: var(--font-weight-bold);
      line-height: 2.222;
    }
    @media screen and (max-width: 1439px) {
      .feature-body .highlight-title {
        font-size: 1.2rem;
        padding: 8px 10px 7px;
        line-height: 3;
      }
    }
    @media screen and (max-width: 800px) {
      .feature-body .highlight-title {
        font-size: 1.2rem;
        padding: 8px 10px 7px;
        line-height: 3;
      }
    }

  /* 個別スタイル */
  /* NISA口座の活用例02 */
  @media screen and (min-width: 1441px) {
    .dividend .figure-responsive-stack figcaption {
      max-width: 425px;
    }
  }
  @media screen and (max-width: 800px) {
    .dividend .figure-responsive-stack figcaption {
      max-width: 280px;
    }
  }

  /* NISA口座の活用例01 */
  .feature-body .nisa-frame-group {
    display: flex;
    justify-content: center;
    gap: 15px 16px;
    height: 100%;
    padding: 58px 38px 38px;

    > section,
    .responsive-stack > section {
      display: flex;
      flex-direction: column;
    }
    section {
      --border-radius: 10px;

      position: relative;
      width: 100%;
      border-radius: var(--border-radius);
    }
      section::after {
        --background-image-size: 64px;

        position: absolute;
        top: -20px;
        inset-inline: 0;
        display: block;
        margin-inline: auto;
        content: "";
        width: var(--background-image-size);
        height: var(--background-image-size);
        background-size: contain;
        background-repeat: no-repeat;
      }
      .savings-graph::after {
        background-image: url(/image/feature/nisa-fulluse/icon_savings-graph.svg);
      }
      .calendar::after {
        background-image: url(/image/feature/nisa-fulluse/icon_calendar.svg);
      }
      .growth-coin::after {
        background-image: url(/image/feature/nisa-fulluse/icon_growth-coin.svg);
      }

      .bg-gray {
        background-color: var(--text-bg-gray);
        padding-top: 62px;
        padding-inline: 32px;
        border-radius: var(--border-radius) var(--border-radius) 0 0;

        display: flex;
        flex-direction: column;
      }
      .bg-light-yellow-2 {
        background-color: var(--text-bg-light-yellow-2);
      }

      section h3 {
        text-align: center;
        font-size: 2rem;
        font-weight: var(--font-weight-bold);
        line-height: 1.5;
        margin-bottom: 24px;
        > .small {
          display: block;
          font-size: 1.4rem;
        }
      }
      section p {
        font-size: 1.4rem;
        line-height: 1.5;
      }
      .bg-light-yellow-2 > .speech-bubble-underline {
        --border-color: var(--black);
        --border-width: 2px;
        --padding-bottom: 32px;

        flex-grow: 1;
      }
      .bg-gray > .speech-bubble-underline {
        --margin-bottom: 10px;
        --padding-bottom: 20px;

        flex-grow: 1;
      }

      .nisa-frame-page-anchor-link {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 28px 30px 32px;
      }
      .nisa-frame-page-anchor-link p {
        text-align: center;
        font-size: 1.6rem;
        font-weight: var(--font-weight-bold);
        line-height: 1.5;
      }
      .page-anchor-link-wrap {
        display: flex;
        gap: 8px;
      }
      .page-anchor-link {
        font-size: 1.6rem;
      }

    > div:has(section + section) {
      gap: 20px;
    }
  }
  @media screen and (min-width: 1441px) {
    .feature-body .nisa-frame-group {
      > section {
        max-width: calc((100% - 100px) / 3);
      }
      section p {
          min-height: calc(2em * 1.5);
      }
    }
  }
  @media screen and (max-width: 1440px) {
    .feature-body .nisa-frame-group {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      flex-direction: column;
      align-items: center;
      padding: 56px 36px 36px;

      .bg-gray > .speech-bubble-underline {
        text-align: center;
        word-break: keep-all;
        word-break: auto-phrase;
        word-wrap: break-word;
      }
      section p {
        text-align: center;
        word-break: keep-all;
        word-break: auto-phrase;
        word-wrap: break-word;
      }
    }
  }
  @media screen and (min-width: 801px) {
    .feature-body .nisa-frame-group {
      section h3 {
        min-height: calc((1em + 1.4rem) * 1.5);
      }

      .page-anchor-link-wrap {
        margin-inline: 10px
      }
    }
  }
  @media screen and (max-width: 800px) {
    .feature-body .nisa-frame-group {
      flex-direction: column;
      padding: 38px 18px 28px;

      .bg-gray {
        padding-top: 70px;
        padding-inline: 20px;
      }

      > img {
        width: 32px;
        height: auto;
      }
      > div:has(section + section) {
        width: 100%;
      }
        section::after {
          top: -10px;
        }
        section h3 {
          margin-bottom: 20px;
        }
        section .speech-bubble-underline {
          --margin-bottom: 7px;
          --padding-bottom: 18px;
        }

      .nisa-frame-page-anchor-link {
        padding: 20px;
      }
      .nisa-frame-page-anchor-link p {
        font-size: 1.5rem;
      }
      .page-anchor-link {
        font-size: 1.4rem;
      }
    }
  }

  /* NISAのおさらい01 */
  .feature:nth-of-type(1) {
    section:nth-of-type(1) .border-box {
      position: relative;

      &::before {
        z-index: var(--z-index-feature-fixed-nisa-neko);
        position: absolute;
        left: 80px;
        top: -120px;
        content: '';
        display: inline-block;
        width: 120px;
        height: 160px;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(/image/feature/nisa-fulluse/img_feature-01_nisa-neko_01.webp);
      }
    }
    section:nth-of-type(2) .border-box {
      position: relative;

      &::before {
        z-index: var(--z-index-feature-fixed-nisa-neko);
        position: absolute;
        right: 80px;
        top: -120px;
        content: '';
        display: inline-block;
        width: 111px;
        height: 160px;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(/image/feature/nisa-fulluse/img_feature-01_nisa-neko_02.webp);
      }
    }
  }
  @media screen and (max-width: 1440px) {
    .feature:nth-of-type(1) {
      section:nth-of-type(1) .border-box {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        &::before {
          left: 0;
          top: -64px;
          width: 59.68px;
          height: 80px;
        }
      }
    }
  }

  .border-box .note {
    margin: 20px 0 0 0;
    font-size: 1.4rem;
  }

  .border-box .result {
    margin: 30px 0 0 0;
    background-color: var(--content-light-yellow);
    padding: 35px 40px;
    border-radius: 20px;
  }
  @media screen and (max-width: 800px) {
    .border-box .result {
      padding: 20px;
    }
  }

  /* NISAのおさらい02 */
  .deadline-list {
    margin-top: 80px;
    display: flex;
    gap: 50px 48px;

    li {
      flex: 1;
    }
  }
  @media screen and (max-width: 1440px) {
    .deadline-list {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      column-gap: 16px;
    }
  }
  @media screen and (max-width: 800px) {
    .deadline-list {
      margin-top: 70px;
      flex-direction: column;
    }
  }

  .deadline-article {
    position: relative;
    background-color: var(--white);
    border: 2px solid var(--black);
    border-radius: 20px;
    padding: 22px 22px 38px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .date {
      position: absolute;
      top: -20px;
      left: -20px;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: var(--text-bg-yellow);
      border: 2px solid var(--black);
      border-radius: 100%;
      aspect-ratio: 1 / 1;
      width: 120px;
      text-align: center;
      font-size: 2rem;
      font-weight: var(--font-weight-bold);
      line-height: 1.35;
    }
      .date:has(.small) time {
        margin-top: 2px;
      }
      .date .weekday {
        margin-left: 0.2em;
      }
      .date .small {
        font-size: 1.4rem;
        line-height: 1.35;
        display: inline-block;
      }
        .date .weekday.offset-y {
          vertical-align: 2px;
        }
        .date .small.offset-y:not(.weekday) {
          vertical-align: 3px;
        }
    img {
      display: block;
      margin-inline: auto;
    }
    .title {
      margin-block: 16px;
      font-size: 2.4rem;
    }
      .title sup {
        font-size: 1.2rem;
        vertical-align: 0.5em;
      }
    p:not([class]) {
      font-size: 1.4rem;
      margin: 0;
    }

      div:has(> .page-anchor-link-wrap) {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 40px;
      }
      .page-anchor-link-wrap {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
  }
  @media screen and (max-width: 1440px) {
    .deadline-article {
      padding: 18px 18px 28px;

      .date {
        top: -72px;
        left: -15px;
        width: 110px;
      }
    }
  }
  @media screen and (max-width: 800px) {
    .deadline-article {
      padding: 18px 18px 28px;

      .date {
        top: -30px;
        left: -10px;
        width: 96px;
        font-size: 1.6rem;
      }
        .date:has(.small) time {
          margin-top: 2px;
        }
        .date .small {
          font-size: 1.1rem;
        }
          .date .weekday.offset-y {
            vertical-align: 1px;
          }
      .title {
        margin-block: 20px 15px;
        font-size: 2rem;
        line-height: 1.5;
      }
        .title sup {
          vertical-align: 0.3em;
        }
    }
  }

  .deadline-list-note-wrap {
    --deadline-list-note-height: 82px;

    position: relative;
    height: calc(var(--deadline-list-note-height) + 4px);
  }
  .deadline-list-note:not(.active) {
    z-index: var(--z-index-deadline-list-note-close);
  }
  .deadline-list-note {
    --bg: var(--white);
    --deadline-list-note-div-font-size: 1.2rem;

    position: absolute;
    top: 0;
    inset-inline: 0;
    max-width: var(--content-small-width);
    margin-inline: auto;
    background-color: var(--white);
    z-index: var(--z-index-deadline-list-note-open);

    summary {
      font-size: 1.8rem;
      font-weight: var(--font-weight-bold);
      text-align: center;
      padding: 25px 40px;
      height: var(--deadline-list-note-height);
    }
    > div {
      padding: 4px 80px 72px;
      line-height: 2;
      font-size: var(--deadline-list-note-div-font-size);

      .note-list {
        color: var(--black);
      }
      p {
        font-size: var(--deadline-list-note-div-font-size);
      }
      .text-link {
        word-break: break-word;
      }
    }
  }
  @media screen and (max-width: 1440px) {
    .deadline-list-note-wrap {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media screen and (max-width: 800px) {
    .deadline-list-note-wrap {
      --deadline-list-note-height: 60px;
    }
    .deadline-list-note {
      max-width: 100%;

      summary::before,
      summary::after {
        right: 15px;
      }
      summary {
        font-size: 1.6rem;
        padding: 16px 40px;
      }
      > div {
        padding: 2px 20px 30px;
        line-height: 1.5;
      }
    }
  }

  /* NISAのおさらい03 */
  .scroll-information {
    display: none;
  }
  .nisa-overview-table-wrap {
    position: relative;
  }
  .nisa-overview-table {
    --table-border-radius: 20px;
    --border-table-primary: 2px solid var(--black);
    --border-table-secondary: 1px solid var(--content-gray);
    --col-count: 2;

    margin-top: 80px;
    width: 100%;
    position: relative;

    &::before {
      z-index: var(--z-index-feature-fixed-nisa-neko);
      position: absolute;
      left: -37px;
      top: -40px;
      content: '';
      display: inline-block;
      margin-inline: auto;
      width: 301.14px;
      height: 160px;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url(/image/feature/nisa-fulluse/img_feature-03_nisa-neko.webp);
    }

    thead {
      width: 100%;
    }
      thead th {
        background-color: var(--content-green);
        color: var(--white);
        padding: 31px 38px 5px;
        font-size: 1.8rem;
        font-weight: var(--font-weight-bold);
      }
        thead th span {
          position: relative;
          display: block;
          padding-top: 14px;
        }
        thead th:nth-of-type(n + 3) span::before {
          position: absolute;
          inset-inline: 0;
          bottom: 100%;
          content: '';
          display: inline-block;
          margin-inline: auto;
          width: 80px;
          height: 80px;
          background-size: contain;
          background-repeat: no-repeat;
        }
        thead th .savings-graph::before {
          background-image: url(/image/feature/nisa-fulluse/icon_savings-graph.svg);
        }
        thead th .growth-coin::before {
          background-image: url(/image/feature/nisa-fulluse/icon_growth-coin.svg);
        }
      thead th:nth-child(-n+2) {
        background-color: transparent;
      }
      thead th:nth-child(1) {
        width: 170px;
      }
      thead th:nth-child(2) {
        width: 230px;
      }
      thead th:nth-child(3),
      thead th:nth-child(4) {
        width: calc(797px / 2);
      }
      thead th:nth-of-type(3) {
        position: relative;
        border-top-left-radius: var(--table-border-radius);
        border-top: var(--border-table-primary);
        border-left: var(--border-table-primary);

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          right: 0;
          width: 1px;
          height: 100%;
          background: var(--content-gray);
        }
      }
      thead th:last-of-type {
        border-top: var(--border-table-primary);
        border-right: var(--border-table-primary);
        border-top-right-radius: var(--table-border-radius);
      }
    tbody {
      border: var(--border-table-primary);
    }
      tbody th,
      tbody td {
        padding: 20px 42px;
        font-size: 1.8rem;
        border-right: var(--border-table-secondary);
        border-bottom: var(--border-table-secondary);
      }
        tbody th:last-of-type {
          border-right: none;
        }
        tbody tr:first-of-type th,
        tbody tr:first-of-type td {
          border-top: var(--border-table-primary);
        }
        tbody tr:last-of-type th,
        tbody tr:last-of-type td {
          border-bottom: var(--border-table-primary);
        }
        tbody tr th:first-of-type,
        tbody tr td:first-of-type {
          border-left: var(--border-table-primary);
        }
      tbody th {
        background-color: var(--white);
        font-weight: var(--font-weight-bold);
      }
        tbody tr:first-of-type th:first-of-type {
          border-top-left-radius: var(--table-border-radius);
        }
      tbody td {
        background-color: var(--content-light-green);
      }
        tbody td strong {
          color: var(--content-green);
          font-weight: var(--font-weight-bold);
        }
        tbody td .small {
          font-size: 1.2rem;
          margin-left: 16px;
        }
        tbody tr:last-of-type th:first-of-type {
          border-bottom-left-radius: var(--table-border-radius);
        }
        tbody tr:last-of-type td:last-of-type {
          border-bottom-right-radius: var(--table-border-radius);
        }
        tbody tr td:last-of-type {
          border-right: var(--border-table-primary);
        }
    /* 個別調整 */
    tbody tr th.border-left-secondary {
      border-left: none;
    }
    tbody td.merged-cell {
      border-bottom: none;
    }
    tbody td.limit-growth {
      border-top: var(--border-table-secondary);
    }
  }
  @media screen and (max-width: 1440px) {
    .nisa-overview-table-wrap {
      margin-top: 20px;
      margin-inline: auto;
      max-width: 800px;
    }
    .nisa-overview-table {
      margin-top: 46px;
      table-layout: fixed;
      position: relative;

      &::before {
        left: -32px;
        top: -17px;
        width: 150.57px;
        height: 80px;
      }

        thead th {
          padding: 8px 12px;
          font-size: 1.4rem;
        }
          thead th:nth-of-type(n + 3) span {
            padding-top: 5px;
          }
          thead th:nth-of-type(n + 3) span::before {
            width: 56px;
            height: 56px;
          }
        thead th:nth-child(1) {
          width: 70px;
        }
        thead th:nth-child(2) {
          width: 136px;
        }
        thead th:nth-child(3),
        thead th:nth-child(4) {
          width: calc(454px / 2);
        }
        tbody th,
        tbody td {
          padding: 8px 14px 7px;
        }
        tbody th {
          font-size: 1.3rem;
        }
        tbody td {
          font-size: 1.4rem;
        }
          tbody td .small {
            margin-left: 10px;
          }
    }
  }
  @media screen and (max-width: 690px) {
    .scroll-information {
      display: block;
    }
    .nisa-overview-table-wrap {
      overflow-x: scroll;
      margin-inline: -15px;
      padding-inline: 15px;
    }
    .nisa-overview-table {
      width: 660px;
    }
  }

  .annual-limit-description {
    gap: 40px 48px;
  }
    .annual-limit-description figure {
      position: relative;
    }
      .annual-limit-description figure img {
        display: block;
        margin-inline: auto;
      }
      .annual-limit-description figure figcaption {
        position: absolute;
        top: 40px;
      }
  @media screen and (max-width: 1440px) {
    .annual-limit-description {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media screen and (max-width: 800px) {
        .annual-limit-description figure img {
          width: 280px;
          height: auto;
        }
        .annual-limit-description figure figcaption {
          top: 20px;
        }
  }

  .investment-profit-comparison {
    margin-top: 60px;

    picture {
      margin-top: -25px;
    }
    img {
      display: block;
      margin-inline: auto;
    }
  }
  @media screen and (max-width: 1440px) {
    .investment-profit-comparison {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media screen and (max-width: 800px) {
    .investment-profit-comparison.border-box {
      margin-top: 40px;
      padding: 30px 20px;

      picture {
        margin-top: 20px;
        margin-inline: auto;
        width: min(100%, 305px);
        height: auto;
      }
    }
  }


  .feature-cta {
    margin-top: var(--section-spacing);
    padding: 60px;
    background-color: var(--text-bg-yellow);

        > div .lead strong  {
          font-weight: var(--font-weight-bold);
        }
      > div .rounded-button-link {
        font-size: 2.8rem;
      }
      > div.rounded-button-link::after {
        right: 20px;
      }
    > img {
      position: absolute;
      top: -10px;
      right: 60.4px;
    }
  }
  @media screen and (min-width: 1441px) {
    .feature-cta {
      --feature-cta-text-max-width: 64%;

      position: relative;
      display: flex;
      justify-content: space-between;
      margin-inline: auto;
      max-width: calc(var(--content-max-width) - 15px * 2);
      border: 2px solid var(--black);
      border-radius: 20px;
      > div {
        max-width: var(--feature-cta-text-max-width);
      }
        > div .lead  {
          text-align: left;
        }
        > div .rounded-button-link {
          --rounded-button-link-max-width: 520px;
        }
      > img {
        max-width: calc(100% - var(--feature-cta-text-max-width) - 40px);
        width: 100%;
      }
    }
    .only-sp {
      display: none!important;
    }
    .only-pc {
      display: block!important;
    }
  }
  @media screen and (max-width: 1440px) {
    .feature-cta {
      border-block: 2px solid var(--black);
      margin-top: var(--section-spacing);
      width: 100%;
      padding: 42px 15px 40px;

      > div {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        justify-content: center;
      }
        > div .lead  {
          font-size: 2.8rem;
          line-height:  1.25;
        }
        > div .rounded-button-link {
          --rounded-button-link-padding-block: 18px;

          display: flex;
          font-size: 1.6rem;
          line-height: 1.5;
        }
        > div.rounded-button-link::after {
          right: 20px;
        }
      img {
        width: auto;
        height: 120px;
      }

      .only-sp {
        display: block!important;
      }
      .only-pc {
        display: none!important;
      }
    }
  }
  @media screen and (max-width: 359px) {
    .feature-cta {
      > div .lead {
        font-size: 2.5rem;
      }
      > div .arrow-rounded-button-link {
        font-size: 1.4rem;
      }
    }
  }
}
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: var(--z-index-overlay);
}
main:has(.deadline-list-note[open]) .overlay {
  display: block;
}
.introduction-box {
  position: relative;
  border: 3px solid var(--black);
  padding: 60px 60px;
  border-radius: 40px;
  background-color: var(--white);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin-inline: auto;
  margin-top: -50px;
  margin-bottom: 90px;
  @media screen and (max-width: 1440px) {
    margin-top: -80px;
    margin-bottom: 130px;
  }
  @media screen and (max-width: 800px) {
    margin-top: -50px;
    margin-bottom: 90px;
    padding: 30px 20px;
    border-width: 2px;
  }
  + & {
    margin-top: 40px;
    @media screen and (max-width: 800px) {
      margin-top: 20px;
    }
  }
  &::before,
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(calc( -50% - 173px ),0);
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px;
  }
  &::before {
    top: -60px;
    border-color: transparent transparent var(--black) transparent;
  }
  &::after {
    top: -55px;
    border-color: transparent transparent var(--white) transparent;
  }
}
@media screen and (max-width: 800px) {
  .introduction-box {
    &::before,
    &::after {
      transform: translate(-50%,0);
    }
    &::after {
      top: -57px;
      border-color: transparent transparent var(--white) transparent;
    }
  }
}
.tips {
  padding-top: var(--section-spacing);
  overflow-x: hidden;

  .common-header .title {
    .speech-bubble-surrounded {
      --bg: var(--white);
      --tail-height: 11px;

      margin-bottom: var(--tail-height);
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-inline: auto;
      color: var(--black);
      background-color: var(--bg);
      border-radius: 100px;
      width: fit-content;
      padding: 2px 14px 4px 20px;
      font-size: 3.2rem;
      line-height: 1.5;
    }
      .speech-bubble-surrounded::after {
        content: "";
        position: absolute;
        bottom: calc(-1 * var(--tail-height) + 0.5px);
        inset-inline: 0;
        margin-inline: auto;
        display: block;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: var(--tail-height) var(--tail-height) 0 0;
        border-color: var(--bg) transparent transparent transparent;
      }
      > strong {
        margin-top: 24px;
        padding-block: 10px;
      }
  }
  @media screen and (max-width: 800px) {
    .common-header .title {
      .speech-bubble-surrounded {
        padding: 4px 16px 6px 20px;
        font-size: 2.4rem;
      }
      > strong {
        margin-top: 10px;
      }
    }
  }
  /* スライダー */
  .slider-nav {
    --slider-nav-margin-top: 80px;
    --slider-nav-button-bg: var(--white);
    --slider-nav-button-border-radius: 10px;
    --slider-nav-button-font-size: 1.8rem;
    --slider-nav-button-padding: 17px;
    --slider-nav-button-max-width: 86.6%;

    margin-top: var(--slider-nav-margin-top);
    z-index: var(--z-index-slider-nav); /* パネルのフォーカスより上に */
    position: relative;
    margin-inline: auto;
    display: flex;
    border: 1px solid var(--black);
    border-radius: var(--slider-nav-button-border-radius);
    max-width: var(--slider-nav-button-max-width);
  }
  .slider-nav button {
    background-color: var(--slider-nav-button-bg);
    width: 100%;
    padding: var(--slider-nav-button-padding);
    border: 1px solid var(--black);
    font-size: var(--slider-nav-button-font-size);
    font-weight: var(--font-weight-bold);
    line-height: 1.444;
  }
    .slider-nav button[aria-selected="true"] {
      --slider-nav-button-bg: var(--text-bg-yellow);

      pointer-events: none;
      position: relative;
    }
  @media screen and (max-width: 1440px) {
    .slider-nav {
      --slider-nav-button-max-width: 750px;
      margin-left: auto;
      margin-right: auto;
    }
    .slider-nav button {
      font-size: 1.4rem;
    }
  }
  @media screen and (min-width: 801px) {
    .slider-nav button:first-child {
      border-top-left-radius: var(--slider-nav-button-border-radius);
      border-bottom-left-radius: var(--slider-nav-button-border-radius);
    }
    .slider-nav button:last-child {
      border-top-right-radius: var(--slider-nav-button-border-radius);
      border-bottom-right-radius: var(--slider-nav-button-border-radius);
    }
  }
  @media screen and (max-width: 800px) {
    .slider-nav {
      --slider-nav-margin-top: 0;
      --slider-nav-button-font-size: 1.4rem;
      --slider-nav-button-padding: 14px;
      --slider-nav-button-max-width: calc(100% - var(--slider-nav-button-padding) * 2);

      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
      .slider-nav button:first-child {
        border-top-left-radius: var(--slider-nav-button-border-radius);
      }
      .slider-nav button:nth-child(2) {
        border-top-right-radius: var(--slider-nav-button-border-radius);
      }
      .slider-nav button:nth-last-child(2) {
        border-bottom-left-radius: var(--slider-nav-button-border-radius);
      }
      .slider-nav button:last-child {
        border-bottom-right-radius: var(--slider-nav-button-border-radius);
      }
  }

    .slider-panel-wrap {
      --slider-panel-wrap-spacing-top: 34px;
      --slider-panel-wrap-padding-inline: 1.67%;
      --slider-panel-wrap-border-radius: 50px;

      margin-top: calc(-1 * var(--slider-panel-wrap-spacing-top));
      padding-top: var(--slider-panel-wrap-spacing-top);
      border: 2px solid var(--black);
      border-radius: var(--slider-panel-wrap-border-radius);
      background-color: var(--white);
      padding-inline: var(--slider-panel-wrap-padding-inline);
    }
    .slider-panel {
      --slider-panel-padding-top: 80px;
      --slider-panel-padding-inline: 5%;
      --slider-panel-padding-bottom: 46px;
      --slider-panel-margin-bottom: 34px;
      --slider-panel-height: 640px;

      --background-image-top: -6px;
      --background-image-right: 46px;
      --background-image-width: 142.78px;
      --background-image-height: 240px;
      --backgroud-image: url(/image/feature/nisa-fulluse/img_tips-tab-01_nisa-neko.svg);

      --width-slider-panel-h3: calc(100% - var(--background-image-width) - var(--background-image-right));

      margin-inline: auto;
      margin-bottom: var(--slider-panel-margin-bottom);
      width: 100%;
      height: calc(var(--slider-panel-height) - var(--slider-panel-wrap-spacing-top) - var(--slider-panel-margin-bottom));
      padding: var(--slider-panel-padding-top) var(--slider-panel-padding-inline) var(--slider-panel-padding-bottom);
      overflow-y: auto;
      position: relative;
    }
    .slider-panel[aria-hidden="true"] {
      display: none;
    }
    .slider-panel[aria-hidden="false"] {
      display: block;
    }
    @media screen and (max-width: 1440px) {
      .slider-panel-wrap {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
      }
    }
    @media screen and (max-width: 1250px) {
      .slider-panel-wrap {
        --slider-panel-wrap-padding-inline: 10px;
        --slider-panel-wrap-border-radius: 20px;
      }
      .slider-panel {
        --slider-panel-padding-top: 72px;
        --slider-panel-padding-bottom: 10px;
        --slider-panel-height: 630px;
        --slider-panel-padding-inline: 10px;
        --slider-panel-margin-bottom: 20px;
      }
    }
    @media screen and (max-width: 800px) {
      .slider-panel-wrap {
        --slider-panel-wrap-spacing-top: 50px;
        --slider-panel-wrap-padding-inline: 1px;
      }
      .slider-panel {
        --slider-panel-padding-top: 37px;
        --slider-panel-padding-inline: 14px;
        --slider-panel-padding-bottom: 20px;
        --slider-panel-height: 530px;
        --slider-panel-margin-bottom: 15px;
      }
    }

    .slider-panel::before {
      position: absolute;
      right: calc(var(--slider-panel-padding-inline) + var(--background-image-right));
      top: calc(var(--slider-panel-padding-top) + var(--background-image-top));
      content: '';
      display: inline-block;
      width: var(--background-image-width);
      height: var(--background-image-height);
      background-size: contain;
      background-repeat: no-repeat;
      background-image: var(--backgroud-image);
    }
    .slider-panel:nth-of-type(2) {
      --background-image-top: 3px;
      --background-image-right: 336px;
      --background-image-width: 139px;
      --background-image-height: 160px;
      --backgroud-image: url(/image/feature/nisa-fulluse/img_tips-tab-02_nisa-neko.svg);
    }
    .slider-panel:nth-of-type(3) {
      --background-image-top: -11px;
      --background-image-right: 58px;
      --background-image-width: 160px;
      --background-image-height: 138px;
      --backgroud-image: url(/image/feature/nisa-fulluse/img_tips-tab-03_nisa-neko.svg);
    }
    .slider-panel:nth-of-type(4) {
      --background-image-top: -11px;
      --background-image-right: 26.5px;
      --background-image-width: 143px;
      --background-image-height: 160px;
      --backgroud-image: url(/image/feature/nisa-fulluse/img_tips-tab-04_nisa-neko.svg);
    }
    @media screen and (max-width: 1440px) {
      .slider-panel {
        --background-image-width: 95.18px;
        --background-image-height: 160px;
      }
      .slider-panel:nth-of-type(2) {
        --background-image-right: 25%;
        --background-image-width: 139.06px;
        --background-image-height: 160px;
      }
      .slider-panel:nth-of-type(3) {
        --background-image-width: 160px;
        --background-image-height: 137.68px;
      }
      .slider-panel:nth-of-type(4) {
        --background-image-width: 142.54px;
        --background-image-height: 160px;
      }
    }
    @media screen and (max-width: 800px) {
      .slider-panel {
        --background-image-top: -6px;
        --background-image-right: 10px;
        --background-image-width: 47.59px;
        --background-image-height: 80px;
      }
      .slider-panel:nth-of-type(2) {
        --background-image-top: -6px;
        --background-image-right: 5.5px;
        --background-image-width: 69.53px;
        --background-image-height: 80px;
      }
      .slider-panel:nth-of-type(3) {
        --background-image-top: -15px;
        --background-image-right: 5px;
        --background-image-width: 80px;
        --background-image-height: 68.84px;
      }
      .slider-panel:nth-of-type(4) {
        --background-image-top: -8px;
        --background-image-right: 5px;
        --background-image-width: 71.27px;
        --background-image-height: 80px;
      }
    }

    .slider-panel h3 {
      width: var(--width-slider-panel-h3);
      font-size: 4rem;
      line-height: 1.5;
      margin-bottom: 1em;
    }
    .slider-panel > section {
      margin-top: 48px;
    }
    .slider-panel h4 {
      font-size: 2.4rem;
      line-height: 1.5;
      border-left: 4px solid var(--content-light-blue);
      margin-bottom: 1em;
      padding-left: 16px;
    }
      .slider-panel h4 .small {
        font-size: 2rem;
      }
      .slider-panel h4 .only-pc {
        display: block!important;
      }
    .slider-panel .page-anchor-link {
      margin-top: 48px;
      font-size: 1.6rem;
      line-height: 1.5;
    }
    @media screen and (max-width: 1440px) {
      .slider-panel h4 .only-pc {
        display: none!important;
      }
    }
    @media screen and (max-width: 800px) {
      .slider-panel h3 {
        font-size: 2.4rem;
        margin-bottom: 20px;
      }
      .slider-panel > section {
        margin-top: 40px;
      }
      .slider-panel h4 {
        font-size: 1.8rem;
        border-left: 4px solid var(--content-light-blue);
        margin-bottom: 20px;
        padding-left: 14px;
      }
        .slider-panel h4 .small {
          font-size: inherit;
        }
      .slider-panel section > p:not([class]) {
        font-size: 1.4rem;
      }
      .slider-panel .page-anchor-link {
        margin-top: 30px;
        border-radius: 10px;
        font-size: 1.2rem;
      }
    }

  /* パネル内の共通のスタイル */
  .bg-rounded-short-text {
    --bg: #058071;
    --min-height: 77px;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background-color: var(--bg);
    border-radius: 100px;
    width: 100%;
    min-width: min(100%, 310px);
    min-height: var(--min-height);
    padding: 10px 20px;
    line-height: 1.5;
  }
  .responsive-stack:has(.bg-rounded-short-text + .bg-rounded-short-text) {
    gap: 12px 24px;
  }
  @media screen and (max-width: 1440px) {
    .responsive-stack:has(.bg-rounded-short-text + .bg-rounded-short-text) {
      grid-template-columns: 1fr;
    }
    .bg-rounded-short-text {
      --min-height: 64px;

      font-size: 1.4rem;
    }
  }

  .formula {
    display: flex;
    gap: 16px 10px;
    line-height: 1.2;
  }
    .formula .text-stroke {
      vertical-align: -3px;
    }
  @media screen and (max-width: 800px) {
    .formula {
      font-size: 1.2rem;
      flex-wrap: wrap;
    }
      .formula > span {
        flex-shrink: 0;
      }
      .formula .text-stroke {
        font-size: 2.8rem;
        letter-spacing: 1px;
        vertical-align: 0px;
      }
  }

  .bullet-list {
    padding-left: 1em;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
    .bullet-list li {
      list-style-type: disc;
      line-height: 1.5;
    }
      .bullet-list li::marker {
        color: var(--content-light-blue);
      }
  @media screen and (max-width: 800px) {
    .bullet-list {
      font-size: 1.4rem;
    }
  }

  .ranking-table {
    --caption-margin-bottom: 40px;
    --ranking-bg: #757575;
    --ranking-bg-1: #87742E;
    --ranking-bg-2: #4B7B9C;
    --ranking-bg-3: #A36740;
    --rabking-bg-size: 36px;
    --rabking-caption-font-size: 2.4rem;
    --rabking-caption-small-font-size: 1.8rem;
    --rabking-caption-before-margin-bottom: 8px;
    --rabking-caption-before-width: 386px;
    --rabking-caption-before-height: 48px;
    --rabking-caption-before-background-image: url(/image/feature/nisa-fulluse/img_text-ranking.svg);

    caption {
      margin-bottom: var(--caption-margin-bottom);
      font-size: var(--rabking-caption-font-size);
      line-height: 1.5;

      > small {
        margin-top: 5px;
        display: block;
        font-size: var(--rabking-caption-small-font-size);
      }
      &::before {
        content: "";
        display: block;
        margin-bottom: var(--rabking-caption-before-margin-bottom);
        width: var(--rabking-caption-before-width);
        height: var(--rabking-caption-before-height);
        background-image: var(--rabking-caption-before-background-image);
        background-repeat: no-repeat;
        background-size: contain;
      }
    }
      caption small {
        display: block;
      }
        thead tr th:nth-of-type(n + 2),
        tbody tr td:nth-of-type(n + 2) {
          text-align: left;
          line-height: 1.5;
        }

        thead tr th small {
          display: block;
          font-size: 1.2rem;
        }

        tbody tr td:first-of-type {
          width: var(--rabking-bg-size);
        }
          tbody tr td:first-of-type span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--ranking-bg);
            border-radius: 100%;
            color: var(--white);
            width: var(--rabking-bg-size);
            height: var(--rabking-bg-size);
            padding-top: 2px;
            font-family: Filson Soft, var(--font-family);
          }
          tbody tr:nth-of-type(1) td:first-of-type span {
            --ranking-bg: var(--ranking-bg-1);
          }
          tbody tr:nth-of-type(2) td:first-of-type span {
            --ranking-bg: var(--ranking-bg-2);
          }
          tbody tr:nth-of-type(3) td:first-of-type span {
            --ranking-bg: var(--ranking-bg-3);
          }
      a {
        transition: border 0.1s ease-out;
      }
        a img {
          vertical-align: middle;
          position: relative;
          bottom: 2px;
          margin-left: 2px;
        }
    @media (hover: hover) {
      a:hover {
        border-bottom: 3px dotted var(--text-link);
      }
    }
  }
  @media screen and (min-width: 801px) {
    .ranking-table {
      --thead-border-radius: 10px;

          thead tr th:nth-of-type(n + 2),
          tbody tr td:nth-of-type(n + 2) {
            padding: 7px 12px;
          }

        thead tr {
          background-color: var(--black);
          color: var(--white);
        }
          thead tr th:first-of-type {
            border-top-left-radius: var(--thead-border-radius);
          }
          thead tr th:last-of-type {
            border-top-right-radius: var(--thead-border-radius);
          }
        tbody tr td {
          border-bottom: 1px solid var(--content-gray);
        }
        tbody tr td:first-of-type {
          padding: 10px 0;
        }
    }
  }
  @media screen and (max-width: 800px) {
    .ranking-table {
      --caption-margin-bottom: 20px;
      --rabking-caption-font-size: 1.6rem;
      --rabking-caption-small-font-size: 1.2rem;
      --rabking-caption-before-margin-bottom: 0;
      --rabking-caption-before-width: 264px;
      --rabking-caption-before-height: 38px;
      --rabking-caption-before-background-image: url(/image/feature/nisa-fulluse/img_text-ranking_sp.svg);
      --rabking-bg-size: 24px;

      tbody tr {
        display: grid;
        column-gap: 10px;
        grid-template-columns: 24px 1fr;
        grid-template-areas:
        "number link"
        "number text01"
        "number text02";
        padding-block: 10px;
        border-bottom: 1px solid var(--content-gray)
      }
      tbody tr td {
        font-size: 1.3rem;
      }
      tbody tr td::before {
        content: attr(data-label);
      }
      tbody tr td:first-of-type span {
        grid-area: number;
        padding-top: 0;
        font-size: 1.4rem;
      }
      tbody tr td:nth-of-type(2) a {
        grid-area: link;
        font-size: 1.4rem;
      }
      tbody tr td:nth-of-type(n + 3) {
        color: var(--note);
      }
      tbody tr td:nth-of-type(3) {
        grid-area: text01;
      }
      tbody tr td:nth-of-type(4) {
        grid-area: text02;
      }

    }
  }

  .ranking-note {
    margin-top: 20px;
    font-size: 1.4rem;
    > li {
      text-indent: -1.0em;
      margin-left: 1.0em;
      > p {
        margin-left: 1em;
        text-indent: -1.25em;
      }
    }
  }

  .responsive-stack.wide-narrow,
  .responsive-stack.narrow-wide {
    gap: 20px 72px;
  }
  .responsive-stack.wide-narrow {
    /* grid-template-columns: calc(648 / 1040 * 100%) auto; */
    grid-template-columns: auto minmax(320px, calc(392 / 1040 * 100%));
    grid-template-areas: ". img";
  }
  .responsive-stack.narrow-wide {
    grid-template-columns: minmax(320px, calc(392 / 1040 * 100%)) auto;
    grid-template-areas: "img .";
  }
    .responsive-stack > img {
      grid-area: img;
      display: block;
      margin-inline: auto;
    }
  @media screen and (max-width: 800px) {
    .responsive-stack.wide-narrow,
    .responsive-stack.narrow-wide {
      grid-template-columns: 1fr;
      grid-template-areas:
        "."
        "img";
    }
      .responsive-stack > img {
        width: 305px;
        height: auto;
      }
  }

  .slider-panel > .note-list {
    margin-top: 48px;
  }
  .slider-panel > section > div > .note-list {
    margin-top: 24px;
  }
  @media screen and (max-width: 800px) {
    .slider-panel > .note-list {
      margin-top: 30px;
    }
    .slider-panel > section > div > .note-list {
      margin-top: 20px;
    }
  }

  /* パネル内のタブごとに固有のstyle */
  /* 投信_つみたて投資枠 */
    .savings-overview {
      .bg-rounded {
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 20px;
      }
      ul,
      .bg-rounded p:has(strong) {
        flex: 1;
      }
        .bg-rounded p:has(strong) {
          text-align: center;
          font-size: 1.8rem;
        }
    }
    @media screen and (min-width: 801px) {
      .bg-rounded p:has(strong) {
        padding-left: 20px;
      }
    }
    @media screen and (max-width: 800px) {
      .savings-overview {
        .bg-rounded {
          margin-top: 8px;
          flex-direction: column;
          padding: 15px 15px 20px;
        }
          .bg-rounded > img {
            transform: rotate(90deg);
          }
          .bg-rounded p strong {
            font-weight: var(--font-weight-normal);
          }
      }
    }

  /* 投信_成長投資枠 */
    .savings-usage {
      .bg-rounded {
        padding: 20px;
      }
      .grid-equal {
        gap: 20px clamp(20px, 2vw, 25px);
      }
        .grid-equal figure {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
        }
          .grid-equal figure figcaption {
            text-align: center;
            font-size: 1.4rem;
            line-height: 1.5;
          }
        .grid-equal .img-wrap {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 28px;
          width: 100%;
          border-radius: 10px;
          background-color: var(--white);

        }
          .grid-equal .img-wrap img {
            width: 64px;
            height: 64px;
          }
      .responsive-flow {
        display: grid;
        grid-template-columns: 1fr auto 57.69%;
        align-items: center;
        gap: 0 6px;
      }
    }
    @media screen and (max-width: 800px) {
      .savings-usage {
          .grid-equal figure figcaption {
            font-size: 1.3rem;
          }
        .responsive-flow {
          grid-template-columns: 1fr;
        }
          .responsive-flow > img {
            margin: auto;
            transform: rotate(90deg);
          }
      }
    }
  @media screen and (min-width: 363px) and (max-width: 800px) {
    .savings-usage {
      /* 最後の要素が単独行に落ちた場合に中央寄せ */
      .grid-equal > :last-child:nth-child(odd) {
        grid-column: 1 / 3;
        justify-self: center;
        max-width: clamp(120px, -61.051px + 49.876vw, 321.5px);
        width: 100%;
      }
    }
  }

  /* 成長投信 */
  @media screen and (min-width: 801x) {
    .tips-tab02-img {
      margin-top: -90px;
    }
  }
  /* 日本株 */
  /* 外国株 */
}
#faq {
  scroll-margin-top: calc(-1 * var(--faq-padding-block) + var(--anchor-scroll-margin-top));
}
.faq {
  --faq-padding-block: var(--section-spacing);

  padding-block: var(--faq-padding-block);
  overflow-x: hidden;

  .title > strong {
    padding-block: 10px;
  }
  .faq-list {
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    max-width: var(--content-small-width);
    gap: 32px;
    @media screen and (max-width: 800px) {
      gap: 10px;
    }
  }
  @media screen and (max-width: 1440px) {
    .faq-list {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  .faq-list details {
    --details-border-radius: 36px;

    border-radius: var(--details-border-radius);

    @media screen and (max-width: 800px) {
      --details-border-radius: 40px;
    }
  }
  .faq-list summary {
    --summary-padding-right: 80px;
    --summary-font-size: 1.8rem;
    --summary-line-height: 2.667;
    --summary-padding-block: 10px;

    font-size: var(--summary-font-size);
    font-weight: bold;
    padding-right: var(--summary-padding-right);
    display: flex;
    align-items: center;
    line-height: var(--summary-line-height);
    padding-block: var(--summary-padding-block);

    @media screen and (max-width: 800px) {
      --summary-padding-right: 40px;
      --summary-font-size: 1.4rem;
      --summary-line-height: 1.5;
      --summary-padding-block: 20px;

      background-color: transparent;
    }
  }
  .faq-list summary::before,
  .faq-list summary::after {
    width: 18px;
    height: 3px;

    @media screen and (max-width: 800px) {
      right: 15px;
    }
  }
  .faq-list summary .question {
    --question-margin-right: 40px;

    margin-right: var(--question-margin-right);
    flex-shrink: 0;

    @media screen and (max-width: 800px) {
      --question-margin-right: 10px;
    }
  }
  .faq-list .answer {
    --answer-padding: 0px 40px 54px 92px;

    padding: var(--answer-padding);
    text-align: center;

    @media screen and (max-width: 800px) {
      --answer-padding: 10px 20px 30px;
    }
  }
  .faq-list .answer p,
  .faq-list .answer li {
    text-align: left;
  }
  .faq-list .answer p:not(.note-list),
  .faq-list .answer li,
  .faq-list .answer figcaption {
    --answer-font-size: 1.6rem;

    font-size: var(--answer-font-size);
    line-height: 2;

    @media screen and (max-width: 800px) {
      --answer-font-size: 1.4rem;
    }
  }
  .faq-list .answer > img {
    display: block;
    margin-inline: auto;
  }
  .faq-list .answer .triangle {
    margin-block: 10px;
  }
  .faq-list .answer figcaption {
    margin-bottom: 10px;
    font-weight: bold;
  }
  .faq-list .answer .columns-2 {
    --answer-columns: 1fr 1fr;
    display: grid;
    grid-template-columns: var(--answer-columns);
    gap: 32px;

    @media screen and (max-width: 800px) {
      --answer-columns: 1fr;
    }
  }
}
.related-links {
  --text-width: 320px;

  position: relative;
  z-index: var(--z-index-related-links);
  background-color: var(--content-yellow);
  .inner {
    position: relative;
    margin-inline: auto;
    height: 746px;
    aspect-ratio: 1702 / 746;
    width: 100%;
    background-image: url(/image/feature/nisa-fulluse/img_nisa-neko_related-links.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
  }
  .title {
    padding-top: 120px;
    width: var(--text-width);
  }
  .rounded-button-link {
    display: flex;
    margin-top: 92px;
  }
}
@media (min-width: 1440px) {
  .related-links {
    --text-margin-left: 231px;
    .inner {
      width: 1702px;
      max-width: 1702px;
      background-size: contain;
      background-position: center bottom;
      overflow: visible;
    }
    .title {
      padding-inline: 40px;
      margin-left: var(--text-margin-left);
    }
    .rounded-button-link {
      --rounded-button-link-padding-block: 18px;

      margin-left: var(--text-margin-left);
      width: var(--text-width);
    }
  }
}
@media (max-width: 1439px) {
  .related-links {
    --text-width: 146px;

    .inner {
      height: 617px;
      aspect-ratio: 569 / 617;
      background-image: url(/image/feature/nisa-fulluse/img_nisa-neko_related-links_sp.webp);
      background-size: contain;
      padding-inline: 15px;
    }
    .title {
      padding-top: 40px;
      margin-inline: auto;
      font-size: 2.6rem;
      letter-spacing: 0.026em;
    }
    .rounded-button-link {
      --rounded-button-link-max-width: 345px;

      margin-top: 246px;
      margin-inline: auto;

    }
  }
}
@media (max-width: 617px) {
  .related-links {
    .inner {
      background-size: cover;
    }
  }
}
.catWrap {
  position: relative;
}
.features,
.tips,
.faq {
  position: relative;
  overflow: hidden;
  margin-inline: auto;
}
main {
  position: relative;
}
.animation-layer {
  position: absolute; /* 背景とコンテンツの間に置く */
  width: 100%;
  height: 100%;
  top: -125px;
  inset-inline: 0;
  overflow: hidden;
  z-index: var(--z-index-animation-layer);
}
.animation-wrapper {
    position: absolute; /* 基準になる */
    width: 3135px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    @media screen and (max-width: 1440px) {
      width: 1956px;
    }
    @media screen and (max-width: 800px) {
      width: 1379px;
    }
  }
.animation-layer .animation_svg {
    position: absolute;
    transform-origin: center;
  }
#animation_path_01 {
    display: inline;
    @media screen and (max-width: 1440px) {
      display: none;
    }
  }
#animation_path_02 {
    display: none;
    @media screen and (max-width: 1440px) {
      display: inline;
    }
    @media screen and (max-width: 800px) {
      display: none;
    }
  }
#animation_path_03 {
    display: none;
    @media screen and (max-width: 800px) {
      display: inline;
    }
  }
.cat-walk {
  position: absolute;
  width: 224px;
  height: 190px;
  top: 0;
  left: 0;
  z-index: var(--z-index-animation-cat);
  transform-origin: center;
  @media screen and (max-width: 1440px) {
    transform: scale(0.8);
  }
  @media screen and (max-width: 800px) {
    transform: scale(0.5) translate(0,-30px);
  }
  .-first,
  .-second {
    position: absolute;
    top: 0;
    left: 0;
    width: 224px;
    height: 190px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}
.cat-walk.-hide {
  opacity: 0;
}
.cat-walk.scene01 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat01_01_right.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat01_02_right.webp); }
}
.-reverce .cat-walk.scene01 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat01_01_left.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat01_02_left.webp); }
}
.cat-walk.scene02 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat02_01_right.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat02_02_right.webp); }
}
.-reverce .cat-walk.scene02 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat02_01_left.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat02_02_left.webp); }
}
.cat-walk.scene03 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat03_01_right.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat03_02_right.webp); }
}
.-reverce .cat-walk.scene03 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat03_01_left.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat03_02_left.webp); }
}
.cat-walk.scene04 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat04_01_right.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat04_02_right.webp); }
}
.-reverce .cat-walk.scene04 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat04_01_left.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat04_02_left.webp); }
}
.cat-walk.scene05 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat05_01_right.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat05_02_right.webp); }
}
.-reverce .cat-walk.scene05 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat05_01_left.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat05_02_left.webp); }
}
.cat-walk.scene06 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat06_01_right.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat06_02_right.webp); }
}
.-reverce .cat-walk.scene06 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat06_01_left.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat06_02_left.webp); }
}
.cat-walk.scene07 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat07_01_right.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat07_02_right.webp); }
  transform: scale(1.3);
  @media screen and (max-width: 1440px) {
    transform: scale(1.0);
  }
  @media screen and (max-width: 800px) {
    transform: scale(0.5) translate(0,-30px);
  }
}
.-reverce .cat-walk.scene07 {
  .-first  { background-image: url(/image/feature/nisa-fulluse/cat07_01_left.webp); }
  .-second { background-image: url(/image/feature/nisa-fulluse/cat07_02_left.webp); }
}
.cat-walk {
  .-first  { animation: cat-animation01 1.0s linear infinite alternate; }
  .-second { animation: cat-animation02 1.0s linear infinite alternate; }
}
@keyframes cat-animation01 {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  51%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes cat-animation02 {
  0%   { opacity: 1; }
  50%  { opacity: 1; }
  51%  { opacity: 0; }
  100% { opacity: 0; }
}
.animation-hole {
  position: absolute;
  top: 7100px;
  left: 50%;
  width: 180px;
  transform: translate( calc( -50% - 6px ),0);
  @media screen and (max-width: 1440px) {
    top: 7480px;
    transform-origin: center center;
    transform: translate(-50%,0) scale(0.8);
  }
  @media screen and (max-width: 800px) {
    top: 9100px;
    transform: scale(0.45) translate(-246px, -30px);
  }
  @media screen and (max-width: 690px) {
    top: 9200px;
    transform: scale(0.45) translate(-184px, -30px);
  }
  .hole {
    position: relative;
    width: 180px;
    height: 239px;
    overflow: hidden;
    .img {
      position: absolute;
      top: 0;
      left: 0;
      &.layer01 {
        z-index: 10;
      }
      &.layer02 {
        opacity: 0;
        z-index: 10;
      }
      &.layer03 {
        opacity: 0;
        z-index: 10;
      }
      &.layer04 {
        opacity: 0;
        z-index: 11;
        transform-origin: left bottom;
        left: 45px;
        top: 209px;
        width: 58px;
        height: 30px;
      }
      &.layer05 {
        z-index: 10;
      }
    }
  }
  .graph {
    position: absolute;
    left: 180px;
    top: 20px;
    width: 309px;
    height: 158px;
    animation: flying-graph01 3s ease infinite alternate;
    @media screen and (max-width: 1440px) {
      transform: translate(0,50px);
      left: 180px;
    }
    .img {
      animation: flying-graph02 5.5s ease infinite alternate;
      @media screen and (max-width: 1440px) {
        width: 200px;
      }
      @media screen and (max-width: 800px) {
        width: 250px;
      }
    }
  }
  &.-start {
    .hole {
      .img {
        &.layer02 {
          animation: angry-cat01 0.7s linear forwards alternate;
        }
        &.layer03 {
          animation: angry-cat02 1.0s linear 0.7s forwards alternate;
        }
        &.layer04 {
          animation: angry-cat03 0.7s linear 0.7s forwards alternate;
        }
      }
    }
  }
}
@keyframes angry-cat01 {
  0% {
    opacity: 1;
  }
  80% {
    transform: translate(0,0);
  }
  100%  {
    transform: translate(0,300px);
    opacity: 1;
  }
}
@keyframes angry-cat02 {
  0% {
    transform: translate(0,300px);
    opacity: 1;
  }
  100% {
    transform: translate(0,0);
    opacity: 1;
  }
}
@keyframes angry-cat03 {
  0% {
    opacity: 1;
    top: 509px;
    transform: rotate(-25deg);
  }
  80% {
    top: 209px;
    transform: rotate(-25deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
    z-index: 11;
  }
}
@keyframes flying-graph01 {
  0% {
    top: 0px;
  }
  100% {
    top: 30px;
  }
}
@keyframes flying-graph02 {
  0% {
    transform: translate(0,0);
  }
  100% {
    transform: translate(40px,0);
  }
}
/* 初期非表示 */
/* [data-scroll-center-01="false"],
[data-scroll-enter-01="false"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
} */
/* trueのとき表示 */
[data-scroll-center-01="true"],
[data-scroll-enter-01="true"] {
  opacity: 1;
  transform: translateY(0);
}
.note-list {
  text-indent: -1em;
  padding-left: 1em;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 2;
  color: var(--note);
}
body:has(.dialog[open]) {
  overflow: hidden;
  overscroll-behavior: none;
}
.dialog {
  position: fixed;
  width: 90%;
  max-width: 900px;
  background-color: var(--white);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 0;
  border: 2px solid var(--black);
  animation: dialog-fade-out 0.3s ease-out forwards;
  max-height: calc(100% - 38px);
  inset: 0;

  @media screen and (max-width: 800px) {
    --dialog-title-font-size: 1.8rem;
  }
}
.dialog[open] {
  animation: dialog-fade-in 0.3s ease-out forwards;
}
.dialog[open]::backdrop {
  animation: backdrop-dialog-fade-in 0.3s ease-out forwards;
}
.dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.dialog-title {
  --dialog-title-font-size: 2.4rem;

  text-align: center;
  font-size: var(--dialog-title-font-size);
  font-weight: bold;

  @media screen and (max-width: 800px) {
    --dialog-title-font-size: 1.8rem;
  }
}
.dialog-content {
  --dialog-padding: 64px;

  text-align: center;
  padding: var(--dialog-padding);

  @media screen and (max-width: 800px) {
    --dialog-padding: 20px;
  }
}
.dialog-content .arrow-rounded-button-link {
  --arrow-rounded-button-link-max-width: 330px;
  @media screen and (max-width: 359px) {
    --arrow-rounded-button-link-font-size: 1.3rem;
  }
}
.dialog-text {
  --dialog-content-font-size: 1.6rem;
  --dialog-content-padding: 48px;

  margin-inline: auto;
  inline-size: fit-content;
  text-align: left;
  margin-top: var(--dialog-content-padding);

  font-size: var(--dialog-content-font-size);
  line-height: 1.5;

  @media screen and (max-width: 800px) {
    --dialog-content-font-size: 1.4rem;
    --dialog-content-padding: 30px;
  }
}
.dialog-image {
  display: block;
  margin-inline: auto;
}
.dialog-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px;
  background-color: var(--white);
  border-top-right-radius: 8px;
}
.dialog-close::before,
.dialog-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: var(--black);
}
.dialog-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.dialog-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
@keyframes dialog-fade-in {
  0% {
    opacity: 0;
    display: none;
  }

  100% {
    opacity: 1;
    display: block;
  }
}
@keyframes dialog-fade-out {
  0% {
    opacity: 1;
    display: block;
  }

  100% {
    opacity: 0;
    display: none;
  }
}
@keyframes backdrop-dialog-fade-in {
  0% {
    background-color: rgb(0 0 0 / 0%);
  }

  100% {
    background-color: rgb(0 0 0 / 25%);
  }
}
.newsWrap {
  position: relative;
  padding: 0 0 100px 0;
  margin-bottom: -100px;
  .cat-road {
    width: 2015px;
    position: absolute;
    bottom: -30px;
    right: calc( 50% + 214px );
    z-index: var(--z-index-animation-layer);
  }
}
.news {
  --news-padding-inline: 64px;
  --news-padding-block: 64px;

  background-color: var(--white);
  width: min(calc(100% - 30px), 1200px);
  margin-inline: auto;
  border-radius: 20px;
  border: 2px solid var(--black);
  padding: var(--news-padding-block) var(--news-padding-inline);
  margin-top: 160px;
  overflow: hidden;

  @media screen and (max-width: 1200px) {
    --news-padding-inline: 20px;
    --news-padding-block: 40px;
    margin-top: 15px;
  }
}
.faq + .newsWrap {
  .cat-road {
    display: none;
  }
  .news {
    position: relative;
    margin-top: 0;
    margin-bottom: 160px;
  }
}
.news::before {
  --news-before-width: 182px;
  --news-before-height: 32px;

  content: "";
  background-image: url(/image/feature/nisa-fulluse/img_text-news.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  width: var278px;
  height: 46.21px;
  display: block;
  margin-inline: auto;
  @media screen and (max-width: 800px) {
    width: 192.5px;
    height: 32px;
  }
}
.news-title {
  --news-title-font-size: 1.6rem;
  --news-title-width: 182px;
  --news-title-height: 32px;
  --news-title-margin-top: 20px;

  color: var(--white);
  background-color: var(--black);
  height: var(--news-title-height);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--news-title-width);
  font-size: var(--news-title-font-size);
  font-weight: bold;
  margin-top: var(--news-title-margin-top);
  margin-inline: auto;

  @media screen and (max-width: 800px) {
    --news-title-font-size: 1.4rem;
    --news-title-width: 120px;
    --news-title-height: 24px;
    --news-title-margin-top: 12px;
  }
}
.news-items {
  --news-items-display: grid;
  --news-items-margin: 48px;

  margin-top: var(--news-items-margin);
  display: var(--news-items-display);
  column-gap: 48px;
  grid-template-columns: 1fr 1fr;

  @media screen and (max-width: 800px) {
    --news-items-display: block;
    --news-items-margin: 30px;
    text-align: center;
  }
}
.news-items + .news-items {
  --news-items-margin: 64px;

  margin-top: var(--news-items-margin);

  @media screen and (max-width: 800px) {
    --news-items-margin: 48px;
  }
}
.news-image-link {
  order: 2;
  display: inline-block;
}
.news-item {
  order: 1;
}
.news-item-title {
  --news-item-title-font-size: 2.4rem;

  font-size: var(--news-item-title-font-size);
  line-height: 1.5;
  text-align: left;

  @media screen and (max-width: 800px) {
    --news-item-title-font-size: 1.8rem;

    margin-top: 20px;
  }
}
.news-item-text {
  --news-item-text-font-size: 1.6rem;
  --news-item-text-margin-top: 24px;

  margin-top: var(--news-item-text-margin-top);
  font-size: 1.6rem;
  line-height: 2;
  text-align: left;

  @media screen and (max-width: 800px) {
    --news-item-text-font-size: 1.4rem;
    --news-item-text-margin-top: 20px;
  }
}
.news-item-link {
  --news-item-link-margin-top: 32px;
  --rounded-button-link-max-width: 300px;
  --rounded-button-link-padding-block: 14px;

  margin-top: var(--news-item-link-margin-top);
  background-color: var(--content-yellow);

  @media screen and (max-width: 800px) {
    --news-item-link-margin-top: 20px;
    --rounded-button-link-max-width: 305px;

    margin-inline: auto;
  }
}
/* アクセシビリティ対応上書き */
.l-disclaimer a,
.l-footer a {
  text-decoration: underline;
}
.l-footer .copy {
  font-size: 11px;
}
@media (hover: hover) {
  .l-disclaimer a:hover,
  .l-footer a:hover {
    text-decoration: none;
  }
  .l-disclaimer a:focus-visible,
  .l-footer a:focus-visible {
    outline: var(--white) solid 1px;
  }
}