@charset "UTF-8";
/* CSS Document */
/*------------------------------
google fonts
------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
/*------------------------------
	初期設定
------------------------------*/
/* 2023/10/24 ver.1.11.1 GitHub */
html, body {
  height: 100%;
  background-color: #fff;
}

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

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

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

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

:where(body) {
  line-height: 1.5;
  font-family: "Noto Sans JP", "sans-serif";
  -webkit-font-smoothing: antialiased;
}

:where(button) {
  all: unset;
}

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

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

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

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

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

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

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

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

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

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

:where(h2, h3, h4, h5, h6) {
  font-weight: 400;
}

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

:where(dialog, [popover]) {
  border: none;
  background: none;
  color: inherit;
  inset: unset;
  max-width: unset;
  max-height: unset;
}

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

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

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

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

/*------------------------------
	ブラウザ対応
------------------------------*/
/* 2023/9/18(A (more) Modern CSS Reset) */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

body {
  min-height: 100dvh;
  line-height: 1.5;
}

h1, h2, h3, h4, button, input, label {
  line-height: 1.1;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  color: currentColor;
}

img, picture {
  max-width: 100%;
  width: 100%;
  display: block;
  font-size: 1.6rem;
}

input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

@media print {
  body {
    background-color: #fff !important;
  }
  a, a:link, a:visited, a:hover {
    text-decoration: none !important;
  }
  #tabLink {
    display: none !important;
  }
}
/*------------------------------
	ブレイクポイント
------------------------------*/
html {
  font-size: min(0.625vw, 10px);
}

@media screen and (max-width: 767px) {
  html {
    font-size: max(2.6666666667vw, 8px);
  }
}
/* Safari用のハックは、Chromeに適用されないようにする */
@supports (-webkit-touch-callout: none) {
  body {
    /* Safari用のハック */
    height: -webkit-fill-available;
  }
}
/*------------------------------
	全体設定
------------------------------*/
html,
body {
  -webkit-text-size-adjust: none;
}

body {
  font-size: 1.6rem;
  line-height: 1.1;
  font-family: "Roboto", "Noto Sans JP", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "Verdana", "ＭＳ Ｐゴシック", "sans-serif";
  color: #252525;
  text-align: left;
}

/*------------------------------*/
.spmask {
  display: block;
}

.sponly {
  display: none;
}

@media (max-width: 767px) {
  .spmask {
    display: none;
  }
  .sponly {
    display: block;
  }
}
/*------------------------------*/
:root {
  --leading-trim: calc((1em - 1lh) / 2);
  --external: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,11a1,1,0,0,0-1,1v6a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V6A1,1,0,0,1,6,5h6a1,1,0,0,0,0-2H6A3,3,0,0,0,3,6V18a3,3,0,0,0,3,3H18a3,3,0,0,0,3-3V12A1,1,0,0,0,20,11Z"/><path d="M16,5h1.58l-6.29,6.28a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L19,6.42V8a1,1,0,0,0,1,1h0a1,1,0,0,0,1-1V4a1,1,0,0,0-1-1L16,3h0a1,1,0,0,0,0,2Z"/></svg>');
  --arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path style="fill: none; stroke: %23888; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;" d="M7 24 L41 24 L35 18 M41 24 L35 30"/></svg>');
  --tag: #afafaf;
  --line: #fff;
  --text: #252525;
  --hd: #4f4f4f;
  --border: #e2e2e2;
  --scrollbar-width: 0px; /* JSが未実行の場合のフォールバック */
}

/*------------------------------*/
a:has(.external-icon) {
  display: flex;
  align-items: center;
  transition: 0.1s;
}
a:has(.external-icon) .external-icon {
  margin-left: 0.5rem;
  display: inline-block;
  width: 1.4rem;
  aspect-ratio: 1;
  background: url(../images/common/external.svg) no-repeat center center;
}
@media (any-hover: hover) {
  a:has(.external-icon):hover {
    opacity: 0.6;
  }
}

/*------------------------------*/
.inner {
  padding-inline: 2rem;
  max-width: calc(1100px + 4rem);
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .inner {
    padding-inline: 1.5rem;
  }
}
.inner.narrow {
  max-width: calc(900px + 4rem);
}

.readText {
  font-kerning: normal;
  line-height: 2;
  font-family: "Noto Sans jp";
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .readText {
    font-size: 1.25rem;
    line-height: 1.9;
  }
}

/*------------------------------*/
body.only-safari .header {
  right: 0;
}
body:has(#home.inView) .header {
  background-color: rgb(255, 255, 255);
  transition: background-color 0.6s 1s, border-bottom 0.6s 1s;
  pointer-events: auto;
}
@media screen and (max-width: 767px) {
  body:has(#home.inView) .header {
    border-bottom: 0.1rem solid var(--border);
  }
}
body:has(#home.inView) .header .header-logo img.white {
  opacity: 0;
  transition: opacity 0.3s 1s;
}
body:has(#home.inView) .header .header-logo img.color {
  opacity: 1;
  transition: opacity 0.3s 1s;
}
body:has(#home.inView) .header .header-logo p {
  color: #1139aa;
  transition: color 0.3s 1s;
}
body:has(#home.inView) .header #menuBtn .bar {
  background-color: #252525;
}
body:has(#home.inView) .header .header-btn-wrap {
  opacity: 1;
  transition: opacity 0.6s 1s;
}
@media screen and (max-width: 767px) {
  body:has(#home.inView) #spFilter {
    opacity: 1;
    transition: 0.6s 1s;
  }
}
@media screen and (max-width: 767px) {
  body:has(#menuWrap.open) .header {
    background-color: rgb(255, 255, 255);
    border-bottom: 0.1rem solid var(--border);
    transition: 0.4s cubic-bezier(0.5, 0.5, 0.5, 1);
  }
}
@media screen and (max-width: 767px) {
  body:has(#menuWrap.open) .header .header-logo img.color {
    opacity: 1;
    transition: 0.4s cubic-bezier(0.5, 0.5, 0.5, 1);
  }
}

/*------------------------------*/
/*------------------------------*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--scrollbar-width);
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  z-index: 1000005;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 0.1s, border-bottom 0.1s;
}
@media screen and (max-width: 767px) {
  .header {
    transition: background-color 0.3s, border-bottom 0.3s;
    justify-content: center;
    padding: 1.2rem 2rem;
    right: 0;
    height: 5.4rem;
    pointer-events: auto;
    border-bottom: 0.1rem solid transparent;
  }
}
.header .header-logo {
  position: relative;
  z-index: 100005;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  pointer-events: auto;
  transition: 0.1s;
}
.header .header-logo .logo {
  width: 13rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .header .header-logo .logo {
    width: 8rem;
  }
}
.header .header-logo .logo img.color {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.1s;
}
.header .header-logo .logo img {
  transition: opacity 0.1s;
}
.header .header-logo p {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.1s;
}
@media (any-hover: hover) {
  .header .header-logo:hover {
    opacity: 0.5;
  }
}
.header #menuBtn {
  width: 4.4rem;
  aspect-ratio: 1;
  position: relative;
  z-index: 100006;
  cursor: pointer;
  pointer-events: auto;
  translate: -0.5rem 0;
}
@media screen and (max-width: 767px) {
  .header #menuBtn {
    position: absolute;
    right: 1rem;
    width: 3.8rem;
  }
}
.header #menuBtn .bar {
  height: 2px;
  display: block;
  position: absolute;
  border-radius: 1px;
  width: 100%;
  left: 50%;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: center center;
  background-color: #fff;
}
.header #menuBtn .bar.top {
  top: 36%;
  transform: translateX(-50%);
}
.header #menuBtn .bar.bottom {
  bottom: 36%;
  transform-origin: right;
  transform: translateX(-50%) scale(0.8, 1);
}
.header #menuBtn.active .bar {
  background-color: #252525;
}
.header #menuBtn.active .bar.top {
  transform: translateX(-50%) rotate(20deg);
  top: calc(50% - 1px);
}
.header #menuBtn.active .bar.bottom {
  transform-origin: center;
  transform: translateX(-50%) rotate(-20deg) scale(1, 1);
  bottom: calc(50% - 1px);
}
@media (any-hover: hover) {
  .header #menuBtn:hover:not(.active) .bar.bottom {
    transform-origin: right;
    transform: translateX(-50%) scale(1, 1);
  }
}
.header .header-btn-wrap {
  display: flex;
  align-items: center;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
  position: absolute;
  right: 9.1rem;
  opacity: 0;
  transition: opacity 0.1s;
}

/*------------------------------*/
/*------------------------------*/
#menuWrap {
  --line: #e1e1e1;
  position: fixed;
  z-index: 100000;
  inset: 0;
  height: 100dvh;
  width: 100vw;
  overflow: clip;
  visibility: hidden;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0);
  transition: 0.5s;
  will-change: backdrop-filter, background-color;
}
@media screen and (max-width: 767px) {
  #menuWrap {
    transition: 0.4s;
    top: 5.4rem;
    height: calc(100dvh - 5.4rem);
  }
}
#menuWrap.open {
  visibility: visible;
  pointer-events: auto;
  background-color: rgba(255, 255, 255, 0.8);
}
@media screen and (max-width: 767px) {
  #menuWrap.open {
    background-color: transparent;
  }
}
#menuWrap.open .menu-container {
  transform: translateX(0);
  opacity: 1;
  transition: 0.5s, opacity 0s;
}
@media screen and (max-width: 767px) {
  #menuWrap.open .menu-container {
    transform: translateY(0);
    transition: 0.4s cubic-bezier(0.5, 0.5, 0.5, 1);
  }
}
#menuWrap .menu-container {
  position: relative;
  height: 100%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto 0;
  opacity: 0;
  background-color: #fff;
  overscroll-behavior: contain;
  box-shadow: 0 0 2rem -0.2rem rgba(183, 183, 183, 0.6);
  transform: translateX(100%);
  transition: 0.5s;
}
@media screen and (max-width: 767px) {
  #menuWrap .menu-container {
    opacity: 1;
    width: 100%;
    transform: translateY(100%);
  }
}
#menuWrap .menu-container .menu-inner {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: 4rem;
  height: 100%;
  position: relative;
}
@media screen and (max-width: 767px) {
  #menuWrap .menu-container .menu-inner {
    padding-inline: 2rem;
  }
}
#menuWrap .menu-container .menuHome-other {
  position: absolute;
  right: 4rem;
  bottom: 2rem;
}
@media screen and (max-width: 767px) {
  #menuWrap .menu-container .menuHome-other {
    width: 100%;
    height: 2.4rem;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: grid;
    place-content: center;
    border-top: 0.1rem solid var(--border);
  }
}
#menuWrap .menu-container .menuHome-other .menuHome-copyright p {
  font-size: 1.4rem;
  font-weight: 500;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #menuWrap .menu-container .menuHome-other .menuHome-copyright p {
    text-align: center;
    font-size: 1rem;
  }
}

/*------------------------------*/
/*------------------------------*/
#menuHome {
  height: 100%;
  width: 100%;
  position: relative;
}
#menuHome .menuHome-wrap {
  min-height: 100%;
  padding-block: 10rem 2rem;
}
@media screen and (max-width: 767px) {
  #menuHome .menuHome-wrap {
    padding-block: 3rem 12rem;
  }
}
#menuHome .menuHome-wrap .menuHome-hd {
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  margin-block: 5rem 2rem;
}
#menuHome .menuHome-wrap .menuHome-hd::after {
  content: "";
  width: 100%;
  height: 1px;
  flex-grow: 1;
  display: block;
  background-color: var(--line);
}
@media screen and (max-width: 767px) {
  #menuHome .menuHome-wrap .menuHome-hd {
    display: none;
  }
}
#menuHome .menuHome-wrap .menuHome-btn {
  display: flex;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}
@media screen and (max-width: 767px) {
  #menuHome .menuHome-wrap .menuHome-btn {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem 0;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 0.1rem solid var(--border);
  }
}
#menuHome .menuHome-wrap .menuHome-btn .menuHome-link {
  pointer-events: auto;
  position: relative;
  padding-block: 0.1em;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.1;
}
@media screen and (max-width: 767px) {
  #menuHome .menuHome-wrap .menuHome-btn .menuHome-link {
    padding-block: 0;
    font-size: 1.3rem;
    font-weight: 500;
  }
}
#menuHome .menuHome-wrap .menuHome-btn .menuHome-link::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transition: 0.05s;
  opacity: 0;
  translate: 0 0.05em;
}
@media (any-hover: hover) {
  #menuHome .menuHome-wrap .menuHome-btn .menuHome-link:hover::before {
    translate: 0 0;
    opacity: 1;
    transition: 0.1s;
  }
}
#menuHome .menuHome-wrap .nav-column {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 4rem 9rem;
  grid-auto-flow: column;
}
@media screen and (max-width: 767px) {
  #menuHome .menuHome-wrap .nav-column {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: 2rem 0;
  }
}
#menuHome .menuHome-wrap .nav-column li:first-child {
  grid-row: span 2;
}
@media screen and (max-width: 767px) {
  #menuHome .menuHome-wrap .nav-column li:first-child {
    grid-row: span 1;
  }
}
@media screen and (max-width: 767px) {
  #menuHome .menuHome-wrap .nav-column li {
    border-bottom: 0.1rem solid var(--border);
    padding-bottom: 2rem;
  }
}
#menuHome .menuHome-wrap .nav-column li p.ja {
  font-size: 2.1rem;
  font-weight: 500;
  margin-top: 0.4em;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  #menuHome .menuHome-wrap .nav-column li p.ja {
    font-size: 1rem;
    font-weight: 700;
  }
}
#menuHome .menuHome-wrap .nav-column li .nav-link {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  font-size: 1.4rem;
}
#menuHome .menuHome-wrap .nav-column li .nav-link.closed {
  opacity: 0.2;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  #menuHome .menuHome-wrap .nav-column li .nav-link {
    font-size: 1.3rem;
    margin-top: 2rem;
  }
}
#menuHome .menuHome-wrap .nav-column li .nav-link::before {
  content: "-";
  display: inline-block;
  margin-right: 0.4em;
}
#menuHome .menuHome-wrap .nav-column li .nav-link a {
  display: inline-block;
  white-space: nowrap;
  transition: 0.1s;
}
@media (any-hover: hover) {
  #menuHome .menuHome-wrap .nav-column li .nav-link:hover a {
    opacity: 0.5;
  }
}
#menuHome .menuHome-wrap .external-wrap {
  display: flex;
  align-items: center;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  #menuHome .menuHome-wrap .external-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 0;
  }
}
#menuHome .menuHome-wrap .external-wrap a img {
  width: 6rem;
}
#menuHome .menuHome-wrap .external-wrap a.corporate-link {
  font-size: 1.4rem;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #menuHome .menuHome-wrap .external-wrap a.corporate-link {
    font-size: 1.2rem;
  }
}

/*------------------------------*/
/*------------------------------*/
#spFilter {
  display: none;
}
@media screen and (max-width: 767px) {
  #spFilter {
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 1000004;
    top: 5.4rem;
    height: 4.4rem;
    left: 0;
    right: 0;
    width: 100%;
    overflow: clip;
    background-color: #fff;
    border-bottom: 0.1rem solid var(--border);
    transition: 0.1s;
    opacity: 0;
  }
}
#spFilter .spFilter-inner {
  display: flex;
  align-items: center;
  -moz-column-gap: 0.6rem;
       column-gap: 0.6rem;
  overflow-x: auto;
  padding-inline: 1.5rem;
}
#spFilter .spFilter-inner #spFilterBtn {
  width: 3rem;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border-radius: 100vmax;
  border: 0.1rem solid var(--border);
  background-color: #fff;
  flex-shrink: 0;
  margin-right: 0.7rem;
}
#spFilter .spFilter-inner #spFilterBtn img {
  width: 1.6rem;
}
#spFilter .spFilter-inner .category-wrap {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
#spFilter .spFilter-inner .category-wrap .category-checked {
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 100vmax;
  font-size: 1rem;
  padding-block: 0.7rem 0.6rem;
  padding-inline: 1.2rem;
  min-width: 8rem;
  line-height: 1;
  font-weight: 500;
  color: #fff;
  border: 0.1rem solid var(--text);
  background-color: var(--text);
}
#spFilter .spFilter-inner .category-wrap .category-checked.active {
  display: flex;
}
#spFilter .spFilter-inner .keyword-tag {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  -moz-column-gap: 0.6rem;
       column-gap: 0.6rem;
}
#spFilter .spFilter-inner .keyword-tag .keyword-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100vmax;
  font-size: 1rem;
  padding-block: 0.7rem 0.6rem;
  padding-inline: 1rem;
  line-height: 1;
  font-weight: 500;
  pointer-events: none;
  border: var(--border) 0.1rem solid;
}
#spFilter .spFilter-inner .keyword-tag .keyword-btn::before {
  content: "#";
}

/*------------------------------*/
/*------------------------------*/
#spFilterPanel {
  display: none;
  position: fixed;
  z-index: 1000004;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  max-height: calc(100dvh - 5.4rem - 4.4rem);
  background-color: #fff;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
  transition: 0.4s ease;
  touch-action: none;
}
#spFilterPanel.open {
  overscroll-behavior: none;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
@media screen and (max-width: 767px) {
  #spFilterPanel {
    display: block;
  }
}
#spFilterPanel .panel-hd {
  background-color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  position: relative;
  text-align: center;
  padding-block: 3rem 1rem;
}
#spFilterPanel .panel-hd::after {
  content: "";
  height: 0.3rem;
  width: 6rem;
  display: block;
  background-color: #c9c9cb;
  border-radius: 100vmax;
  position: absolute;
  left: calc(50% - 3rem);
  top: 1rem;
}
#spFilterPanel .aside-nav {
  padding-inline: 2rem;
  padding-block: 2rem;
  background-color: #f0f3f4;
}
#spFilterPanel .aside-nav .category-hd,
#spFilterPanel .aside-nav .keyword-hd {
  display: flex;
  align-items: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  font-size: 1.4rem;
  font-family: "Oswald";
  white-space: nowrap;
  color: var(--hd);
  flex-shrink: 0;
}
#spFilterPanel .aside-nav .aside-category ul {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 2.7rem);
  gap: 0.8rem 0.6rem;
}
#spFilterPanel .aside-nav .aside-category ul li {
  width: 100%;
  height: 100%;
}
#spFilterPanel .aside-nav .aside-category ul li .category-btn {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  color: #fff;
  background-color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  border: var(--text) 0.1rem solid;
  border-radius: 100vmax;
}
#spFilterPanel .aside-nav .aside-category ul li .category-btn.active {
  background-color: #fff;
  color: var(--text);
  border: currentColor 0.1rem solid;
}
#spFilterPanel .aside-nav .aside-keyword {
  margin-top: 2rem;
}
#spFilterPanel .aside-nav .aside-keyword ul {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.6rem;
}
#spFilterPanel .aside-nav .aside-keyword ul .keyword-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100vmax;
  font-size: 1rem;
  padding-inline: 1rem;
  line-height: 1;
  font-weight: 500;
  border: var(--border) 0.1rem solid;
  background-color: #fff;
  height: 2.5rem;
}
#spFilterPanel .aside-nav .aside-keyword ul .keyword-btn::before {
  content: "#";
}
#spFilterPanel .aside-nav .aside-keyword ul .keyword-btn.active {
  border-color: #fff;
  background-color: #9e9e9e;
  color: #fff;
}
#spFilterPanel .btn-wrap {
  padding-block: 2rem;
  padding-inline: 2rem;
  background-color: #fff;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 4rem;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
#spFilterPanel .btn-wrap .reset-tags {
  display: grid;
  place-content: center;
  color: var(--text);
  background-color: #fff;
  border: var(--tag) 0.1rem solid;
  font-size: 1.2rem;
  font-weight: 500;
}
#spFilterPanel .btn-wrap #spFilterClose {
  display: grid;
  place-content: center;
  background-color: var(--text);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
}

/*------------------------------*/
/*------------------------------*/
.footer {
  --line: #e1e1e1;
  --text: #252525;
  border-top: var(--line) 1px solid;
  padding-top: 8rem;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .footer {
    display: none;
  }
}
.footer .footer-container {
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 8rem;
       column-gap: 8rem;
}
.footer .footer-container .logo-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.footer .footer-container .logo-column .footer-logo {
  display: flex;
  align-items: center;
  gap: 2rem;
  transition: 0.1s;
}
.footer .footer-container .logo-column .footer-logo .logo {
  width: 13rem;
}
.footer .footer-container .logo-column .footer-logo p {
  color: #1139aa;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
}
@media (any-hover: hover) {
  .footer .footer-container .logo-column .footer-logo:hover {
    opacity: 0.5;
  }
}
.footer .footer-container .logo-column .footer-copy {
  width: 36rem;
  margin-top: 4rem;
}
.footer .footer-container .logo-column .external-wrap {
  display: flex;
  align-items: center;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
  margin-top: 3rem;
}
.footer .footer-container .logo-column .external-wrap a img {
  width: 6rem;
}
.footer .footer-container .logo-column .external-wrap a.corporate-link {
  font-size: 1.4rem;
  font-weight: 500;
}
.footer .nav-column {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 9rem 4rem;
  grid-auto-flow: column;
  justify-self: flex-end;
}
.footer .nav-column li:first-child {
  grid-row: span 2;
}
.footer .nav-column li p.en {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1551ba;
  white-space: nowrap;
}
.footer .nav-column li p.ja {
  font-size: 2.1rem;
  font-weight: 500;
  margin-top: 0.4em;
  white-space: nowrap;
}
.footer .nav-column li .nav-link {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  font-size: 1.4rem;
}
.footer .nav-column li .nav-link.closed {
  opacity: 0.2;
  pointer-events: none;
}
.footer .nav-column li .nav-link::before {
  content: "-";
  display: inline-block;
  margin-right: 0.4em;
}
.footer .nav-column li .nav-link a {
  display: inline-block;
  white-space: nowrap;
  transition: 0.1s;
}
@media (any-hover: hover) {
  .footer .nav-column li .nav-link:hover a {
    opacity: 0.5;
  }
}
.footer .footer-copyright p {
  font-size: 1.2rem;
  font-weight: 400;
  text-align: right;
  padding-block: 6rem 1.5rem;
}
/*# sourceMappingURL=common.css.map */