/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!../assets/scss/styles.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .pc1:not(.sp) {
    display: none;
  }
  .pc2:not(.sp) {
    display: none;
  }
}
@media screen and (min-width: 769px) and (max-width: 1366px) {
  .sp:not(.pc1) {
    display: none;
  }
  .pc2:not(.pc1) {
    display: none;
  }
}
@media screen and (min-width: 1367px) and (max-width: px) {
  .sp:not(.pc2) {
    display: none;
  }
  .pc1:not(.pc2) {
    display: none;
  }
}
:root {
  --font-biz-ud: "BIZ UDGothic", "メイリオ", "Meiryo", sans-serif;
  --font-biz-udp: "BIZ UDPGothic", "メイリオ", "Meiryo", sans-serif;
  --color-main: #fa6900;
  --color-main2: #f84e2e;
  --color-sub1: #fa9632;
  --color-sub2: #fac878;
  --color-sub3: #fdf9f4;
  --header-width: 36.6rem;
}

html {
  font-size: 62.5%;
}
@media (max-width: 768px) {
  html {
    font-size: calc(1000vw / 376);
  }
}
@media (min-width: 769px) and (max-width: 1366px) {
  html {
    font-size: calc(1000vw / 1366);
  }
}
@media (min-width: 1367px) {
  html {
    font-size: 62.5%;
  }
}
html:not(.no-scroll) {
  scroll-behavior: smooth;
}

body {
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
  font-family: var(--font-biz-udp);
  color: #000;
}
@media screen and (min-width: 769px) {
  body {
    display: grid;
    grid-template-columns: var(--header-width) 1fr;
    grid-template-rows: 1fr auto;
    overflow-x: hidden;
    min-height: 100lvh;
  }
}
body.fixed {
  overflow: hidden;
}

body > div {
  grid-column: 2;
}

picture {
  display: block;
}

main {
  position: relative;
  grid-column: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  main {
    overflow: hidden;
    padding-top: 7.5rem;
  }
}

@media screen and (min-width: 769px) {
  :focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: 4px;
  }
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  :target {
    scroll-margin-top: 8rem;
  }
}

img {
  width: 100%;
  height: auto;
}

a,
button {
  color: #000;
  transition: 0.2s ease;
}

dialog {
  width: unset;
  max-width: unset;
  height: unset;
  max-height: unset;
  padding: unset;
  color: unset;
  background-color: unset;
  border: unset;
  overflow: unset;
}

:where(.pc) {
  display: block;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  :where(.pc) {
    display: none;
  }
}

:where(.sp) {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  :where(.sp) {
    display: block;
  }
}

.skip {
  position: absolute;
  width: 100%;
  z-index: 10;
  text-align: center;
}
.skip a {
  display: block;
  padding: 1rem 3rem;
  background-color: var(--color-main);
  color: #fff;
  font-family: var(--font-biz-udp);
  font-size: 2.4rem;
}
.skip a:not(:focus, :focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.modal :where(dialog) {
  position: fixed;
  top: 0;
  z-index: 6;
  height: 100lvh;
  padding: 16rem 0;
  background-color: rgba(255, 255, 255, 0.83);
  opacity: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .modal :where(dialog) {
    border-width: 1px;
    padding-block: 5.7rem 5.4rem;
  }
}
.modal :where(dialog)::backdrop {
  background-color: transparent;
}
.modal :where(dialog) .inner {
  transform: scale(0.95);
  overflow: visible;
  margin-inline: auto;
  overscroll-behavior: contain;
}
.modal :where(dialog) .close-button {
  position: relative;
  display: block;
  cursor: pointer;
  aspect-ratio: 1;
  border-radius: calc(infinity * 1px);
  background-color: #454545;
  backface-visibility: hidden;
}
.modal :where(dialog) .close-button:focus {
  background-color: #ff4e2e;
}
@media (hover: hover) and (pointer: fine) {
  .modal :where(dialog) .close-button:where(:-moz-any-link, :enabled, summary, span):hover {
    background-color: #ff4e2e;
  }
  .modal :where(dialog) .close-button:where(:any-link, :enabled, summary, span):hover {
    background-color: #ff4e2e;
  }
}
.modal :where(dialog) .close-button:where(.cross) {
  position: absolute;
  top: 2.8rem;
  right: 2.8rem;
  width: 6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .modal :where(dialog) .close-button:where(.cross) {
    top: 1rem;
    right: 1rem;
    width: 3rem;
  }
}
.modal :where(dialog) .close-button:where(.cross)::before, .modal :where(dialog) .close-button:where(.cross)::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3rem;
  height: 3px;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .modal :where(dialog) .close-button:where(.cross)::before, .modal :where(dialog) .close-button:where(.cross)::after {
    width: 1.6rem;
    height: 2px;
  }
}
.modal :where(dialog) .close-button:where(.cross)::before {
  transform: rotate(-45deg);
}
.modal :where(dialog) .close-button:where(.cross)::after {
  transform: rotate(45deg);
}
.modal :where(dialog).statement .inner {
  width: min(110rem, 100% - 3rem);
  border: 2px solid var(--color-main);
  padding-block: 12rem 9rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .modal :where(dialog).statement .inner {
    border-width: 1px;
    padding-block: 5.7rem 5.4rem;
  }
}
.modal :where(dialog).statement p {
  text-align: center;
  font-size: 2.8rem;
  line-height: 2.8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .modal :where(dialog).statement p {
    font-size: 1.6rem;
  }
}
.modal :where(dialog).statement p + p {
  margin-top: 6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .modal :where(dialog).statement p + p {
    margin-top: 4rem;
  }
}
.modal :where(dialog).statement .close-button.arrow {
  width: 7rem;
  margin: 8rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .modal :where(dialog).statement .close-button.arrow {
    width: 4.6rem;
    margin-top: 3.5rem;
  }
}
.modal :where(dialog).statement .close-button.arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2.2rem;
  aspect-ratio: 22/15;
  background: url(/dpa/assets/images/common/icon-arrow-white.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .modal :where(dialog).statement .close-button.arrow::before {
    width: 1.4rem;
  }
}
.modal :where(dialog).statement .decoration {
  position: absolute;
  top: -6.6rem;
  left: -14.2rem;
  width: 133rem;
  height: 169rem;
  background: url(/dpa/assets/images/top/modal-bg.svg) no-repeat center/contain;
  pointer-events: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .modal :where(dialog).statement .decoration {
    top: -2.1rem;
    left: 50%;
    translate: -50% 0;
    width: 37.5rem;
    height: 139.1rem;
    background-image: url(/dpa/assets/images/top/modal-bg-sp.svg);
  }
}
.modal :where(dialog).movie[open] {
  display: grid;
  place-content: center;
}
.modal :where(dialog).movie .inner {
  width: 90rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .modal :where(dialog).movie .inner {
    width: 34.6rem;
  }
}
.modal :where(dialog).movie figure {
  width: 100%;
}
.modal :where(dialog).movie figure iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
}
.modal :where(dialog).movie figure figcaption {
  padding-top: 2rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .modal :where(dialog).movie figure figcaption {
    padding-top: 1.2rem;
    font-size: 1.6rem;
  }
}
.modal :where(dialog).movie .close-button {
  top: -8rem;
  right: 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .modal :where(dialog).movie .close-button {
    top: -4rem;
  }
}

.common-wrapper {
  padding: 2rem 4rem 15rem 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .common-wrapper {
    padding: 2rem 1.5rem 12rem;
  }
}

.lower .page-header {
  overflow: hidden;
  position: relative;
  display: grid;
  align-items: center;
  min-height: 25.7rem;
  padding: 4rem 6rem 4rem 12rem;
  background-color: #fff;
  border-radius: 0 0 1.5rem 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower .page-header {
    min-height: 22rem;
    text-align: center;
    padding: 2.7rem 1rem 4.3rem;
  }
}
.lower .page-header::before {
  content: "";
  position: absolute;
  top: -2rem;
  right: -4.5rem;
  z-index: 2;
  width: 26.3rem;
  aspect-ratio: 263/131;
  background: url(/dpa/assets/images/common/decoration03.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower .page-header::before {
    top: -8.1rem;
    right: 10.4rem;
    width: 10rem;
  }
}
.lower .page-header :where(h1) {
  position: relative;
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower .page-header :where(h1) {
    font-size: 2.4rem;
  }
}
.lower .page-header :where(h1)::before {
  content: "";
  position: absolute;
  top: 0;
  left: -7rem;
  width: 4rem;
  aspect-ratio: 1;
  background: url(/dpa/assets/images/top/icon-head.svg) no-repeat top center/100% auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower .page-header :where(h1)::before {
    position: initial;
    display: block;
    width: 2.8rem;
    margin: 0 auto 2rem;
  }
}
.lower .page-header :where(h1)[data-text]::after {
  content: attr(data-text);
  display: block;
  margin-top: 0.8rem;
  color: #dd742d;
  font-family: var(--font-biz-ud);
  font-size: 1.8rem;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower .page-header :where(h1)[data-text]::after {
    margin-top: 1rem;
    font-size: 1.4rem;
  }
}

.common-head {
  text-align: center;
  font-size: 3.2rem;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .common-head {
    font-size: 2.2rem;
    line-height: 1.45;
  }
}
.common-head::before {
  content: "";
  display: block;
  width: 4rem;
  aspect-ratio: 1;
  margin: 0 auto 2.2rem;
  background: url(/dpa/assets/images/top/icon-head.svg) no-repeat top center/100% auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .common-head::before {
    width: 2.8rem;
    margin-bottom: 1.6rem;
  }
}
.common-head::after {
  content: attr(data-text);
  display: block;
  margin-top: 1.2rem;
  color: #dd742d;
  font-family: var(--font-biz-ud);
  font-size: 1.8rem;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .common-head::after {
    margin-top: 0.6rem;
    font-size: 1.4rem;
  }
}
.common-head span {
  display: block;
  font-size: 2.6rem;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .common-head span {
    font-size: 1.6rem;
  }
}

.common-slider .inner {
  position: relative;
  overflow: visible;
}
.common-slider .splide__arrow {
  overflow: visible;
  width: 4.8rem;
  height: 4.8rem;
  opacity: 1;
  box-shadow: 0.2rem 0.6rem 0.6rem rgba(224, 48, 6, 0.26);
  background-color: var(--color-main2);
  transition: background-color 0.2s ease;
}
@media (any-hover: hover) {
  .common-slider .splide__arrow:hover {
    background-color: var(--color-sub1);
    opacity: initial;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .common-slider .splide__arrow {
    width: 4.2rem;
    height: 4.2rem;
  }
}
.common-slider .splide__arrow::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 1.2rem;
  height: 0.7rem;
  background: url(/dpa/assets/images/common/icon-arrow02-white.svg) no-repeat center/contain;
}
.common-slider .splide__arrow--prev {
  left: calc(50% - 50rem);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .common-slider .splide__arrow--prev {
    left: 0;
  }
}
.common-slider .splide__arrow--prev::before {
  transform: rotate(-90deg);
}
.common-slider .splide__arrow--next {
  right: calc(50% - 50rem);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .common-slider .splide__arrow--next {
    right: 0;
  }
}
.common-slider .splide__arrow--next::before {
  transform: rotate(90deg);
}
.common-slider .splide__arrow svg {
  display: none;
}
.common-slider .splide__track {
  width: 96rem;
  margin-inline: auto;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .common-slider .splide__track {
    width: 30.6rem;
  }
}
.common-slider .splide__track .splide__list .splide__slide figure img {
  -o-object-fit: cover;
     object-fit: cover;
}
.common-slider .splide__pagination {
  position: initial;
  display: flex !important;
  -moz-column-gap: 1.3rem;
       column-gap: 1.3rem;
  margin-top: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .common-slider .splide__pagination {
    margin-top: 3rem;
  }
}
.common-slider .splide__pagination li button {
  margin: initial;
  width: 1.1rem;
  height: 1.1rem;
  background-color: #fad08c;
  pointer-events: none;
}
.common-slider .splide__pagination li button.is-active {
  background-color: var(--color-main2);
  transform: initial;
}

.common-more-contents li {
  transition: 0.4s ease;
}

.common-more-contents:not(.no-pc) li.is-hidden {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .common-more-contents.no-pc li.is-hidden {
    max-width: 0;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
  }
}

:where(.common-more-button) {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  :where(.common-more-button).sp.is-visible {
    display: grid;
    grid-template-columns: 2.3rem auto;
    align-items: center;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    margin: 5rem auto 0;
    text-decoration: underline;
    font-size: 2.2rem;
    font-weight: 700;
  }
  :where(.common-more-button).sp.is-visible::before {
    content: "";
    aspect-ratio: 1;
    background: url(/dpa/assets/images/common/icon-plus.svg) no-repeat center/100% auto;
  }
}
:where(.common-more-button):not(.sp).is-visible {
  display: grid;
  grid-template-columns: 2.3rem auto;
  align-items: center;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  margin: 5rem auto 0;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  font-size: 2.2rem;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  :where(.common-more-button):not(.sp).is-visible {
    font-size: 2rem;
  }
}
:where(.common-more-button):not(.sp).is-visible::before {
  content: "";
  aspect-ratio: 1;
  background: url(/dpa/assets/images/common/icon-plus.svg) no-repeat center/100% auto;
}
:where(.common-more-button):not(.sp).is-visible:focus {
  text-decoration: initial;
  color: var(--color-main2);
}
@media (hover: hover) and (pointer: fine) {
  :where(.common-more-button):not(.sp).is-visible:where(:-moz-any-link, :enabled, summary, span):hover {
    text-decoration: initial;
    color: var(--color-main2);
  }
  :where(.common-more-button):not(.sp).is-visible:where(:any-link, :enabled, summary, span):hover {
    text-decoration: initial;
    color: var(--color-main2);
  }
}

.breadcrumb {
  padding-left: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .breadcrumb {
    padding-left: initial;
  }
}
.breadcrumb ol li {
  display: inline;
}
.breadcrumb ol li + li::before {
  content: "|";
  margin-inline: 0.6rem;
  font-size: 1.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .breadcrumb ol li + li::before {
    margin-inline: 0.3rem;
    font-size: 1.2rem;
  }
}
.breadcrumb ol li :where(a, span) {
  font-size: 1.3rem;
  line-height: 1.8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .breadcrumb ol li :where(a, span) {
    font-size: 1.2rem;
  }
}
.breadcrumb ol li a:focus {
  color: var(--color-main);
}
@media (hover: hover) and (pointer: fine) {
  .breadcrumb ol li a:where(:-moz-any-link, :enabled, summary, span):hover {
    color: var(--color-main);
  }
  .breadcrumb ol li a:where(:any-link, :enabled, summary, span):hover {
    color: var(--color-main);
  }
}
.breadcrumb ol li span {
  display: inline;
}

:root {
  --color-mapping1: #2984e3;
  --color-mapping2: #f4ef72;
  --color-mapping3: #f97675;
  --color-mapping4: #55ccb6;
  --color-mapping5: #b4b7a4;
}

#mapping.lower {
  position: relative;
  z-index: 2;
  background-color: var(--color-sub3);
}
#mapping.lower main .page-header {
  background-color: #fff;
}
#mapping.lower main .page-header h1 {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 0.5rem;
}
#mapping.lower main .page-header h1::before {
  top: 1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .page-header h1::before {
    order: 1;
  }
}
#mapping.lower main .page-header h1::after {
  margin-top: initial;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .page-header h1::after {
    margin-top: 2rem;
  }
}
#mapping.lower main .common-wrapper {
  padding-bottom: initial;
}
#mapping.lower main .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.9rem 3rem;
  padding: 1.6rem 2.3rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .tag-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 0.5rem;
    padding: 1.4rem 0.8rem;
  }
}
#mapping.lower main .tag-list li {
  display: grid;
  grid-template-columns: 1.4rem auto;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
  font-size: 1.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .tag-list li {
    font-size: 1.2rem;
  }
}
#mapping.lower main .tag-list li::before {
  content: "";
  aspect-ratio: 1;
  border-radius: 50%;
}
#mapping.lower main .tag-list li:nth-of-type(1)::before {
  background-color: var(--color-mapping1);
}
#mapping.lower main .tag-list li:nth-of-type(2)::before {
  background-color: var(--color-mapping2);
}
#mapping.lower main .tag-list li:nth-of-type(3)::before {
  background-color: var(--color-mapping3);
}
#mapping.lower main .tag-list li:nth-of-type(4)::before {
  background-color: var(--color-mapping4);
}
#mapping.lower main .tag-list li:nth-of-type(5)::before {
  background-color: var(--color-mapping5);
}
#mapping.lower main .intro {
  padding-block: 4rem 5.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .intro {
    padding-block: 3.5rem 5rem;
  }
}
#mapping.lower main .intro > p {
  padding-left: 5rem;
  font-size: 1.6rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .intro > p {
    padding-inline: 2rem;
  }
}
#mapping.lower main .intro .guide-list {
  margin-top: 3rem;
}
#mapping.lower main .intro .guide-list > div + div {
  margin-top: 3.5rem;
}
#mapping.lower main .intro .guide-list > div > dt {
  display: grid;
  grid-template-columns: 1fr 3rem;
  -moz-column-gap: 1.7rem;
       column-gap: 1.7rem;
  border-radius: 2rem;
  background-color: #fff;
  padding: 1.7rem 1.8rem 1.7rem 2.8rem;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .intro .guide-list > div > dt {
    padding: 1.3rem 1.5rem 1.3rem 2.8rem;
    font-size: 2rem;
  }
}
#mapping.lower main .intro .guide-list > div > dt span {
  align-self: center;
  position: relative;
  border-radius: 50%;
  width: 3rem;
  aspect-ratio: 1;
  background-color: #e2e2e2;
}
#mapping.lower main .intro .guide-list > div > dt span::before, #mapping.lower main .intro .guide-list > div > dt span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50%;
  width: 1.2rem;
  height: 2px;
  background-color: #707070;
  transition: transform 0.3s ease-in-out;
}
#mapping.lower main .intro .guide-list > div > dt span::after {
  transform: rotate(-90deg);
}
#mapping.lower main .intro .guide-list > div > dd {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
}
#mapping.lower main .intro .guide-list > div > dd .inner {
  overflow: hidden;
}
#mapping.lower main .intro .guide-list > div > dd .inner .body {
  position: relative;
  padding-top: 2.8rem;
  padding-inline: 2.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .intro .guide-list > div > dd .inner .body {
    padding-top: 2rem;
    padding-inline: initial;
  }
}
#mapping.lower main .intro .guide-list > div > dd .inner .body p {
  font-size: 1.6rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .intro .guide-list > div > dd .inner .body p {
    padding-inline: initial;
    font-size: 1.5rem;
    line-height: 1.8;
  }
}
#mapping.lower main .intro .guide-list > div > dd .inner .body p + p {
  margin-top: 2rem;
}
#mapping.lower main .intro .guide-list > div > dd .inner .body p .annotation {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1.4rem;
}
#mapping.lower main .intro .guide-list > div > dd .inner .body dl {
  margin-top: 4rem;
}
#mapping.lower main .intro .guide-list > div > dd .inner .body dl div + div {
  margin-top: 4rem;
}
#mapping.lower main .intro .guide-list > div > dd .inner .body dl div dt {
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 1rem;
  border-bottom: 0.6rem solid var(--color-main2);
  font-size: 1.8rem;
}
#mapping.lower main .intro .guide-list > div > dd .inner .body dl div dd {
  padding: 1rem 2rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .intro .guide-list > div > dd .inner .body dl div dd {
    padding: 1rem;
  }
}
#mapping.lower main .intro .guide-list > div > dd .inner .body dl .tag-list {
  margin-block: 1rem;
  padding-inline: 1.8rem;
  width: -moz-fit-content;
  width: fit-content;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .intro .guide-list > div > dd .inner .body dl .tag-list {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    width: 100%;
    padding: 1.4rem 0.8rem;
  }
}
#mapping.lower main .intro .guide-list > div > dd .inner .body .label-list {
  margin-top: 2rem;
  padding-inline: 1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .intro .guide-list > div > dd .inner .body .label-list {
    padding-inline: initial;
  }
}
#mapping.lower main .intro .guide-list > div > dd .inner .body .label-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
#mapping.lower main .intro .guide-list > div > dd .inner .body .label-list div + div {
  margin-top: 2.4rem;
}
#mapping.lower main .intro .guide-list > div > dd .inner .body .label-list div button {
  display: grid;
  place-content: center;
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-main2);
  background-color: #fff;
  padding: 0.8rem 1.6rem 0.6rem;
  white-space: nowrap;
  font-size: 1.6rem;
}
#mapping.lower main .intro .guide-list > div > dd .inner .body .label-list div button:focus {
  border-color: #000 !important;
  background-color: #000;
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  #mapping.lower main .intro .guide-list > div > dd .inner .body .label-list div button:where(:-moz-any-link, :enabled, summary, span):hover {
    border-color: #000 !important;
    background-color: #000;
    color: #fff;
  }
  #mapping.lower main .intro .guide-list > div > dd .inner .body .label-list div button:where(:any-link, :enabled, summary, span):hover {
    border-color: #000 !important;
    background-color: #000;
    color: #fff;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .intro .guide-list > div > dd .inner .body .label-list div button {
    padding: 0.5rem 1.2rem;
    line-height: 1.37;
    font-size: 1.4rem;
  }
}
#mapping.lower main .intro .guide-list > div > dd .inner .body .label-list div.digital button {
  border-color: var(--color-mapping1);
}
#mapping.lower main .intro .guide-list > div > dd .inner .body .label-list div.learning button {
  border-color: var(--color-mapping2);
}
#mapping.lower main .intro .guide-list > div > dd .inner .body .label-list div.safety button {
  border-color: var(--color-mapping3);
}
#mapping.lower main .intro .guide-list > div > dd .inner .body .label-list div.sns button {
  border-color: var(--color-mapping4);
}
#mapping.lower main .intro .guide-list > div > dd .inner .body .label-list div.ability button {
  border-color: var(--color-mapping5);
}
#mapping.lower main .intro .guide-list > div.is-open dt span::after {
  transform: rotate(0deg);
}
#mapping.lower main .intro .guide-list > div.is-open dd {
  grid-template-rows: 1fr;
}
#mapping.lower main .page-nav {
  position: relative;
  padding-block: 4.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .page-nav {
    padding-block: 4.7rem 6rem;
  }
}
#mapping.lower main .page-nav::before {
  content: "";
  position: absolute;
  top: 0;
  right: -4rem;
  z-index: -1;
  width: 100vw;
  height: 100%;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .page-nav::before {
    right: -1.5rem;
  }
}
#mapping.lower main .page-nav::after {
  content: "";
  position: absolute;
  top: 1.7rem;
  right: 0;
  width: 10.6rem;
  aspect-ratio: 106/130;
  background: url(/dpa/assets/images/data/intro-decoration02.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .page-nav::after {
    top: -2.8rem;
    right: -2.2rem;
    width: 6.3rem;
  }
}
#mapping.lower main .page-nav ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, max-content));
  align-items: stretch;
  -moz-column-gap: 1.8rem;
       column-gap: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .page-nav ul {
    grid-template-columns: 1fr;
    row-gap: 1.6rem;
  }
}
#mapping.lower main .page-nav ul li a {
  display: grid;
  grid-template-columns: 1fr 2.4rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 6rem;
  height: 100%;
  box-shadow: 0 0.3rem 1rem #efdfd3;
  border: 1px solid #f84e2e;
  border-radius: 1rem;
  background-color: #fff;
  padding: 1.5rem 1.8rem 1.5rem 2.4rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.33;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .page-nav ul li a {
    grid-template-columns: 1fr 2rem;
    padding: 1.2rem 2rem;
    font-size: 1.6rem;
    line-height: 2;
  }
}
#mapping.lower main .page-nav ul li a::after {
  content: "";
  aspect-ratio: 1;
  background: url(/dpa/assets/images/common/icon-arrow03.svg) no-repeat center/contain;
}
@media (any-hover: hover) {
  #mapping.lower main .page-nav ul li a:hover, #mapping.lower main .page-nav ul li a[aria-selected=true] {
    translate: 0 0.2rem;
    box-shadow: initial;
    color: var(--color-main2);
  }
}
#mapping.lower main .search {
  position: relative;
  padding-bottom: 15rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search {
    padding-bottom: 10rem;
  }
}
#mapping.lower main .search::before {
  content: "";
  position: absolute;
  top: 0;
  right: -4rem;
  z-index: -1;
  width: 100vw;
  height: 100%;
  background-color: #f7f7f7;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search::before {
    right: -1.5rem;
  }
}
#mapping.lower main .search > section {
  width: min(96rem, 100%);
  margin-inline: auto;
  padding-block: 6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section {
    padding-block: 7rem;
  }
}
#mapping.lower main .search > section:first-of-type {
  padding-top: 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section:first-of-type {
    padding-top: 8rem;
  }
}
#mapping.lower main .search > section h2 {
  position: relative;
  border-radius: 2rem;
  padding: 1.6rem 4.6rem;
  background-color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.7;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section h2 {
    font-size: 2rem;
  }
}
#mapping.lower main .search > section h2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2.3rem;
  translate: 0 -50%;
  width: 0.4rem;
  height: calc(100% - 4rem);
  background-color: #f08c00;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section h2::before {
    height: calc(100% - 4rem);
  }
}
#mapping.lower main .search > section > p {
  margin-top: 3rem;
  font-size: 1.6rem;
  line-height: 2;
}
#mapping.lower main .search > section > p .annotation {
  display: block;
  margin-top: 0.8rem;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1.2rem;
  line-height: 1.5;
}
#mapping.lower main .search > section .tab-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: flex-end;
  height: 10.5rem;
  padding-inline: 0.9rem;
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section .tab-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    align-items: stretch;
    height: initial;
    margin-top: 3rem;
    padding-inline: initial;
  }
}
#mapping.lower main .search > section .tab-list li {
  flex: 1;
}
#mapping.lower main .search > section .tab-list li button {
  position: relative;
  display: grid;
  place-content: center;
  width: 100%;
  height: 6rem;
  border-radius: 1rem 1rem 0 0;
  color: #000;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.37;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section .tab-list li button {
    height: 100%;
    border: 2px solid transparent;
    border-radius: 1rem;
    box-shadow: 0 0.3rem 1rem rgba(154, 125, 87, 0.46);
    padding: 0.4rem;
    font-size: 1.4rem;
  }
}
#mapping.lower main .search > section .tab-list li button[aria-selected=true] {
  height: 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section .tab-list li button[aria-selected=true] {
    opacity: 0.7;
    height: 100%;
    border: 2px solid #fff;
    box-shadow: initial;
  }
}
#mapping.lower main .search > section .tab-list li button[aria-selected=true]::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(100% - 0.2rem);
  left: 50%;
  translate: -50% 0;
  width: 1.5rem;
  aspect-ratio: 1;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section .tab-list li button[aria-selected=true]::before {
    display: none;
  }
}
#mapping.lower main .search > section .tab-list li:nth-of-type(1) button {
  background-color: var(--color-mapping1);
  color: #fff;
}
#mapping.lower main .search > section .tab-list li:nth-of-type(1) button::before {
  background-color: var(--color-mapping1);
}
#mapping.lower main .search > section .tab-list li:nth-of-type(2) button {
  background-color: var(--color-mapping2);
}
#mapping.lower main .search > section .tab-list li:nth-of-type(2) button::before {
  background-color: var(--color-mapping2);
}
#mapping.lower main .search > section .tab-list li:nth-of-type(3) button {
  background-color: var(--color-mapping3);
}
#mapping.lower main .search > section .tab-list li:nth-of-type(3) button::before {
  background-color: var(--color-mapping3);
}
#mapping.lower main .search > section .tab-list li:nth-of-type(4) button {
  background-color: var(--color-mapping4);
}
#mapping.lower main .search > section .tab-list li:nth-of-type(4) button::before {
  background-color: var(--color-mapping4);
}
#mapping.lower main .search > section .tab-list li:nth-of-type(5) button {
  background-color: var(--color-mapping5);
}
#mapping.lower main .search > section .tab-list li:nth-of-type(5) button::before {
  background-color: var(--color-mapping5);
}
#mapping.lower main .search > section .mapping {
  background-color: #fff;
  background-image: radial-gradient(#eae9ea 1px, transparent 1px);
  background-size: 5px 5px;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section .mapping {
    width: initial;
    height: initial;
    overflow-x: auto;
  }
}
#mapping.lower main .search > section .mapping .inner {
  position: relative;
  z-index: 4;
  width: 96rem;
  height: 67rem;
}
#mapping.lower main .search > section .mapping figure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
#mapping.lower main .search > section .mapping .button-list {
  padding: 0 0 3.2rem 3.1rem;
}
#mapping.lower main .search > section .mapping .button-list button span {
  position: absolute;
  top: -3.6rem;
  left: 50%;
  z-index: 2;
  translate: -50% 0;
  opacity: 0;
  visibility: hidden;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  padding: 0.4rem;
  background-color: #fff;
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
  font-size: 1rem;
  line-height: 1.2;
  transition: 0.2s ease;
}
@media (any-hover: hover) {
  #mapping.lower main .search > section .mapping .button-list button:hover span {
    opacity: 1;
    visibility: visible;
  }
}
#mapping.lower main .search > section#search-panel-1 {
  position: relative;
  z-index: 4;
}
#mapping.lower main .search > section#search-panel-1 .tag-list {
  margin-top: 3rem;
}
#mapping.lower main .search > section#search-panel-1 .mapping {
  margin-top: 2.3rem;
}
#mapping.lower main .search > section#search-panel-1 .mapping .button-list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 7.8rem;
  align-items: center;
  justify-content: center;
  height: 100%;
}
#mapping.lower main .search > section#search-panel-1 .mapping .button-list li {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1.6rem);
  gap: 0.8rem 0.9rem;
  justify-content: center;
  align-items: center;
}
#mapping.lower main .search > section#search-panel-1 .mapping .button-list li.many {
  row-gap: 0.5rem;
}
#mapping.lower main .search > section#search-panel-1 .mapping .button-list li button {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
@media (any-hover: hover) {
  #mapping.lower main .search > section#search-panel-1 .mapping .button-list li button:hover {
    transform: scale(1.5);
  }
}
#mapping.lower main .search > section#search-panel-1 .mapping .button-list li button[aria-controls*=digital] {
  background-color: var(--color-mapping1);
}
#mapping.lower main .search > section#search-panel-1 .mapping .button-list li button[aria-controls*=learning] {
  background-color: var(--color-mapping2);
}
#mapping.lower main .search > section#search-panel-1 .mapping .button-list li button[aria-controls*=safety] {
  background-color: var(--color-mapping3);
}
#mapping.lower main .search > section#search-panel-1 .mapping .button-list li button[aria-controls*=sns] {
  background-color: var(--color-mapping4);
}
#mapping.lower main .search > section#search-panel-1 .mapping .button-list li button[aria-controls*=ability] {
  background-color: var(--color-mapping5);
}
#mapping.lower main .search > section#search-panel-1 .mapping .button-list li:nth-of-type(7n + 1) button span {
  left: -5rem;
  translate: initial;
}
#mapping.lower main .search > section#search-panel-1 .mapping .button-list li:nth-of-type(7n) button span {
  right: -2rem;
  left: initial;
  translate: initial;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section#search-panel-2 .mapping {
    margin-top: 2.9rem;
  }
}
#mapping.lower main .search > section#search-panel-2 .mapping .inner {
  padding: 0 0 3rem 3.1rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list {
  position: relative;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button {
  position: absolute;
  box-shadow: 0 0.4rem 0.6rem rgba(214, 207, 195, 0.4);
  border: 1px solid #707070;
  border-radius: 1rem;
  padding-inline: 1.4rem;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 1.4rem auto;
  background-position: top 0.3rem right 0.4rem;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  --purpose-width: 12.4rem;
  --purpose-height: 5.8rem;
}
@media (any-hover: hover) {
  #mapping.lower main .search > section#search-panel-2 .mapping .button-list li button:hover {
    color: var(--color-main2);
    border-color: var(--color-main2);
  }
  #mapping.lower main .search > section#search-panel-2 .mapping .button-list li button:hover span {
    color: initial;
    transform: scale(1.5);
  }
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button :where(span) {
  top: -4.5rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button.tip {
  width: 4rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button.right span {
  left: initial;
  right: 1.5rem;
  translate: initial;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button.left span {
  left: 1rem;
  translate: initial;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-width=thin] {
  width: 10rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-width="1"] {
  width: var(--purpose-width);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-width="2"] {
  width: calc(var(--purpose-width) * 2.08);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-width="3"] {
  width: calc(var(--purpose-width) * 3.15);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-width="4"] {
  width: calc(var(--purpose-width) * 4.2);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-height=thin] {
  height: 5rem;
  padding-top: 0.5rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-height="1"] {
  height: var(--purpose-height);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-height="2"] {
  height: calc(var(--purpose-height) * 2);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-height="3"] {
  height: calc(var(--purpose-height) * 3.02);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-height="4"] {
  height: calc(var(--purpose-height) * 4.19);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-height="5"] {
  height: calc(var(--purpose-height) * 5.18);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-height="6"] {
  height: calc(var(--purpose-height) * 6.15);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-height="7"] {
  height: calc(var(--purpose-height) * 7.1);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-height="8"] {
  height: calc(var(--purpose-height) * 8.69);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-height="9"] {
  height: calc(var(--purpose-height) * 9.2);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button[data-height="10"] {
  height: calc(var(--purpose-height) * 10.66);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li button.position {
  display: grid;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button {
  background-color: #b5d5f5;
  background-image: url(/dpa/assets/images/mapping/decoration01.svg);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(1) {
  top: 6.5rem;
  right: 4.7rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(2) {
  top: 12.7rem;
  right: 0.5rem;
  padding-top: 9.5rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(3) {
  top: 31rem;
  left: 14rem;
  z-index: 6;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(4) {
  top: 31rem;
  right: 9rem;
  z-index: 2;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(5) {
  top: 25.5rem;
  left: 0.5rem;
  z-index: 1;
  height: 37.9rem;
  padding-top: 1.2rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(5) span {
  top: 13rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(6) {
  top: 44rem;
  right: 13.7rem;
  z-index: 1;
  height: 19.5rem;
  padding-inline: 0.6rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(7) {
  top: 37.6rem;
  left: 0.5rem;
  z-index: 6;
  padding: 1.6rem 0.2rem 0;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(8) {
  top: 25.5rem;
  left: 0.5rem;
  z-index: 5;
  padding: 0 0.2rem 2rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(9) {
  top: 18.9rem;
  left: 0.5rem;
  z-index: 4;
  padding: 4rem 1.2rem 0 13rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(10) {
  top: 12.7rem;
  left: 14rem;
  z-index: 2;
  padding: 6.4rem 1rem 0 12rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(11) {
  top: 12.7rem;
  left: 40.2rem;
  z-index: 2;
  padding-inline: 0.2rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(12).tip {
  top: 56.2rem;
  right: 9rem;
  z-index: 2;
  height: 7.2rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(13).tip {
  top: 56.2rem;
  right: 7.4rem;
  z-index: 3;
  height: 7.2rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(14) {
  top: 57.5rem;
  left: 14rem;
  z-index: 8;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(14) span {
  left: 5rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(15) {
  top: 57.5rem;
  left: 40.2rem;
  z-index: 2;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(16).tip {
  top: 56.2rem;
  right: 5.7rem;
  z-index: 3;
  height: 7.2rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(17).tip {
  top: 56.2rem;
  right: 4rem;
  z-index: 4;
  height: 7.2rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(18).tip {
  top: 56.2rem;
  right: 2.3rem;
  z-index: 5;
  height: 7.2rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(19).tip {
  top: 56.2rem;
  right: 0.5rem;
  z-index: 6;
  height: 7.2rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(20) {
  top: 43.6rem;
  left: 0.5rem;
  z-index: 6;
  padding: 0.4rem 0rem 0;
  font-size: 1.1rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(21).tip {
  top: 31rem;
  right: 7rem;
  z-index: 3;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(22).tip {
  top: 31rem;
  right: 5rem;
  z-index: 4;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(23) {
  top: 50rem;
  left: 0.5rem;
  z-index: 7;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(24).tip {
  top: 18.9rem;
  right: 9rem;
  z-index: 3;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(25).tip {
  top: 31rem;
  right: 3rem;
  z-index: 4;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(26) {
  top: 12.7rem;
  left: 0.5rem;
  z-index: 3;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(27) {
  top: 12.7rem;
  right: 13.7rem;
  z-index: 1;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=digital] button:nth-of-type(28) {
  top: 18.9rem;
  right: 4.7rem;
  z-index: 2;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button {
  background-color: #fbf7c2;
  background-image: url(/dpa/assets/images/mapping/decoration02.svg);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(1) {
  top: 12.7rem;
  right: 0.5rem;
  z-index: 1;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(2) {
  top: 12.7rem;
  right: 0.5rem;
  z-index: 2;
  padding-inline: 0.6rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(3) {
  top: 12.7rem;
  right: 8.9rem;
  z-index: 1;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(4) {
  top: 37.4rem;
  right: 0.5rem;
  z-index: 9;
  padding-inline: 0.8rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(5) {
  top: 49.8rem;
  right: 0.5rem;
  z-index: 8;
  padding-inline: 1rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(5) span {
  right: 4rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(6) {
  top: 25.2rem;
  left: 0.5rem;
  z-index: 1;
  padding-bottom: 12rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(7) {
  top: 31.2rem;
  right: 2.6rem;
  z-index: 8;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(7) span {
  top: -4rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(8) {
  top: 43.8rem;
  left: 0.5rem;
  z-index: 3;
  height: 3rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(9) {
  top: 46.8rem;
  left: 13.8rem;
  z-index: 4;
  height: 3rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(10) {
  top: 43.8rem;
  left: 53.5rem;
  z-index: 3;
  padding-inline: 0.6rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(11) {
  top: 37.5rem;
  left: 13.8rem;
  z-index: 2;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(12) {
  top: 12.7rem;
  right: 4.7rem;
  z-index: 1;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(13).tip {
  top: 31.2rem;
  right: 8.9rem;
  z-index: 2;
  width: 4rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(14).tip {
  top: 31.2rem;
  right: 7.5rem;
  z-index: 3;
  width: 4rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(15).tip {
  top: 31.2rem;
  right: 5.9rem;
  z-index: 4;
  width: 4rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(16).tip {
  top: 31.2rem;
  right: 4.4rem;
  z-index: 5;
  width: 4rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(17).tip {
  top: 31.2rem;
  right: 3rem;
  z-index: 6;
  width: 4rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(18).tip {
  top: 31.2rem;
  right: 1.4rem;
  z-index: 7;
  width: 4rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(19).tip {
  top: 31.2rem;
  right: 7rem;
  z-index: 8;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=learning] button:nth-of-type(20) {
  top: 18.9rem;
  right: 0.5rem;
  z-index: 3;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button {
  background-color: #fdc4c4;
  background-image: url(/dpa/assets/images/mapping/decoration03.svg);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(1) {
  top: 43.8rem;
  left: 40.2rem;
  z-index: 4;
  height: 19.6rem;
  padding-top: 5rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(1) span {
  left: 18rem;
  translate: initial;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(2) {
  top: 44.6rem;
  left: 0.5rem;
  z-index: 14;
  height: 4rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(3) {
  top: 43.8rem;
  right: 0.5rem;
  z-index: 6;
  padding-inline: 0.6rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(4) {
  top: 12.7rem;
  left: 13.8rem;
  z-index: 3;
  padding-left: 13rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(4) span {
  left: 21rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(5) {
  top: 6.8rem;
  right: 0.5rem;
  z-index: 1;
  height: 56.2rem;
  padding: 9rem 1.4rem 0;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(6) {
  top: 22rem;
  left: 0.5rem;
  z-index: 6;
  height: 15rem;
  padding-inline: 13rem 1rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(7) {
  top: 18.9rem;
  left: 40.2rem;
  z-index: 4;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(8) {
  top: 43.5rem;
  left: 0.5rem;
  z-index: 12;
  height: 3.2rem;
  padding: 0 1rem 0 25rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(9) {
  top: 46.8rem;
  left: 0.5rem;
  z-index: 13;
  height: 3.2rem;
  padding: 0 1rem 0 25rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(9) span {
  left: 29rem;
  translate: initial;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(10) {
  top: 1.5rem;
  left: 0.5rem;
  z-index: 1;
  padding-top: 54rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(11) {
  top: 57.5rem;
  right: 0.5rem;
  z-index: 8;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(12) {
  top: 25.5rem;
  left: 0.5rem;
  z-index: 6;
  padding: 2rem 1.8rem 0;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(13) {
  top: 17rem;
  left: 0.5rem;
  z-index: 3;
  padding: 1rem 5rem 0;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(14) {
  top: 6.5rem;
  left: 0.5rem;
  z-index: 4;
  padding: 4rem 5rem 0;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(15) {
  top: 1.5rem;
  left: 13.8rem;
  z-index: 2;
  padding: 0.6rem 5rem 0;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(16) {
  top: 1.5rem;
  left: 40.2rem;
  z-index: 2;
  padding-inline: 5rem;
  height: 23rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(17) {
  top: 37.4rem;
  left: 40.2rem;
  z-index: 12;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(18) {
  top: 31rem;
  right: 8.8rem;
  z-index: 2;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(18) span {
  right: -5rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(19) {
  top: 31rem;
  right: 6.2rem;
  z-index: 3;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(19) span {
  right: -3rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(20) {
  top: 31rem;
  right: 3.2rem;
  z-index: 4;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(21) {
  top: 31rem;
  right: 0.5rem;
  z-index: 5;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(21) span {
  right: 2rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(22) {
  top: 37.4rem;
  right: 0.5rem;
  z-index: 5;
  padding-inline: 0;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(23) {
  top: 39.6rem;
  left: 0.5rem;
  z-index: 10;
  height: 2.5rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(24) {
  top: 38.4rem;
  left: 0.5rem;
  z-index: 9;
  height: 2.5rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(25) {
  top: 37.4rem;
  left: 0.5rem;
  z-index: 8;
  height: 2.5rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=safety] button:nth-of-type(26) {
  top: 40.8rem;
  left: 0.5rem;
  z-index: 11;
  height: 2.5rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=sns] button {
  background-color: #b3e8de;
  background-image: url(/dpa/assets/images/mapping/decoration04.svg);
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=sns] button:nth-of-type(1) {
  top: 50rem;
  right: 13.6rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=sns] button:nth-of-type(2) {
  top: 43.6rem;
  left: 0.5rem;
  z-index: 5;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=sns] button:nth-of-type(3) {
  top: 25.2rem;
  left: 13.9rem;
  z-index: 5;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=sns] button:nth-of-type(4) {
  top: 19.1rem;
  left: 42.2rem;
  z-index: 2;
  height: 44.3rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=sns] button:nth-of-type(5) {
  top: 19.1rem;
  left: 13.9rem;
  z-index: 2;
  height: 44.3rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=sns] button:nth-of-type(6) {
  top: 19.1rem;
  left: 46.7rem;
  z-index: 4;
  height: 44.3rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=sns] button:nth-of-type(7) {
  top: 13rem;
  left: 13.9rem;
  z-index: 1;
  padding-top: 2rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=sns] button:nth-of-type(8) {
  top: 13rem;
  right: 0.3rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=sns] button:nth-of-type(9) {
  top: 31.3rem;
  right: 13.6rem;
  padding-inline: 0.4rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=ability] button {
  background-color: #ddddd5;
  background-image: url(/dpa/assets/images/mapping/decoration05.svg);
  right: 0.5rem;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=ability] button:nth-of-type(1) {
  top: 25.2rem;
  padding-top: 16rem;
  z-index: 2;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=ability] button:nth-of-type(2) {
  top: 31.3rem;
  right: 7rem;
  z-index: 3;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=ability] button:nth-of-type(3) {
  top: 31.3rem;
  right: 2rem;
  z-index: 3;
}
#mapping.lower main .search > section#search-panel-2 .mapping .button-list li[id*=ability] button:nth-of-type(4) {
  top: 18.9rem;
  right: 0.5rem;
}
#mapping.lower main .search > section#search-panel-3 .tags {
  position: relative;
  z-index: 2;
  padding: 3rem 3rem;
  margin-top: 2rem;
  background-color: #fff;
  background-image: linear-gradient(to right, #707070, #707070 0.4rem, transparent 0.4rem, transparent 0.4rem), linear-gradient(to left, #707070, #707070 0.4rem, transparent 0.4rem, transparent 0.4rem);
  background-size: 8px 1px, 8px 1px;
  background-position: left top, right bottom;
  background-repeat: repeat-x, repeat-x;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section#search-panel-3 .tags {
    margin-top: 1.8rem;
    padding: 2.3rem 1.2rem;
  }
}
#mapping.lower main .search > section#search-panel-3 .tags .filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 0.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section#search-panel-3 .tags .filter-list {
    gap: 1rem 0.8rem;
  }
}
#mapping.lower main .search > section#search-panel-3 .tags .filter-list:not(:first-of-type) {
  margin-top: 2rem;
  border-top: 1px solid #fac878;
  padding-top: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section#search-panel-3 .tags .filter-list:not(:first-of-type) {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
  }
}
#mapping.lower main .search > section#search-panel-3 .tags .filter-list li.hidden {
  visibility: hidden;
  opacity: 0;
  width: 0;
  height: 0;
}
#mapping.lower main .search > section#search-panel-3 .tags .filter-list li button {
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-main2);
  padding: 0.8rem 1.6rem 0.6rem;
  background-color: #fff;
  font-size: 1.4rem;
}
@media (any-hover: hover) {
  #mapping.lower main .search > section#search-panel-3 .tags .filter-list li button:hover {
    border-color: #000 !important;
    background-color: #000;
    color: #fff;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section#search-panel-3 .tags .filter-list li button {
    padding: 0.5rem 1.2rem;
    line-height: 1.37;
  }
}
#mapping.lower main .search > section#search-panel-3 .tags .filter-list li button[aria-selected=true] {
  border-color: #000 !important;
  background-color: #000;
  color: #fff;
}
#mapping.lower main .search > section#search-panel-3 .tags .filter-list li button:where([data-company=all], [data-tag=all]) {
  border-color: var(--color-main2);
  color: var(--color-main2);
}
#mapping.lower main .search > section#search-panel-3 .tags .filter-list:nth-of-type(2) li button {
  border-color: var(--color-mapping1);
}
#mapping.lower main .search > section#search-panel-3 .tags .filter-list:nth-of-type(3) li button {
  border-color: var(--color-mapping2);
}
#mapping.lower main .search > section#search-panel-3 .tags .filter-list:nth-of-type(4) li button {
  border-color: var(--color-mapping3);
}
#mapping.lower main .search > section#search-panel-3 .tags .filter-list:nth-of-type(5) li button {
  border-color: var(--color-mapping4);
}
#mapping.lower main .search > section#search-panel-3 .tags .filter-list:nth-of-type(6) li button {
  border-color: var(--color-mapping5);
}
#mapping.lower main .search > section#search-panel-3 .result {
  overflow: hidden;
  position: relative;
  padding: 5.5rem 0.8rem 1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section#search-panel-3 .result {
    padding: 7rem 0.8rem 1rem;
  }
}
#mapping.lower main .search > section#search-panel-3 .result ul {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section#search-panel-3 .result ul {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
}
#mapping.lower main .search > section#search-panel-3 .result ul[hidden] {
  display: none;
}
#mapping.lower main .search > section#search-panel-3 .result ul li {
  display: contents;
}
#mapping.lower main .search > section#search-panel-3 .result ul li.is-hidden {
  display: none;
}
#mapping.lower main .search > section#search-panel-3 .result ul li article {
  display: contents;
}
#mapping.lower main .search > section#search-panel-3 .result ul li :where(a) {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  align-items: flex-start;
  gap: 0;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 0.3rem 1rem rgba(154, 125, 87, 0.46);
  padding: 4.5rem 2.6rem 1.5rem;
  background: #fff url(/dpa/assets/images/mapping/decoration06.svg) no-repeat 1.6rem 1.6rem/3rem auto;
}
#mapping.lower main .search > section#search-panel-3 .result ul li :where(a):focus {
  box-shadow: initial;
  translate: 0 0.3rem;
}
@media (hover: hover) and (pointer: fine) {
  #mapping.lower main .search > section#search-panel-3 .result ul li :where(a):where(:-moz-any-link, :enabled, summary, span):hover {
    box-shadow: initial;
    translate: 0 0.3rem;
  }
  #mapping.lower main .search > section#search-panel-3 .result ul li :where(a):where(:any-link, :enabled, summary, span):hover {
    box-shadow: initial;
    translate: 0 0.3rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section#search-panel-3 .result ul li :where(a) {
    display: block;
    width: 100%;
    padding: 5rem 2.3rem 1.7rem;
    background-position: 1.8rem 1.8rem;
    background-size: 3rem auto;
  }
}
#mapping.lower main .search > section#search-panel-3 .result ul li :where(a)[href=""] {
  pointer-events: none;
}
#mapping.lower main .search > section#search-panel-3 .result ul li :where(a) h3 {
  text-decoration: underline;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section#search-panel-3 .result ul li :where(a) h3 {
    font-size: 1.8rem;
  }
}
#mapping.lower main .search > section#search-panel-3 .result ul li :where(a) .description {
  margin-top: 2rem;
  font-size: 1.6rem;
  line-height: 1.85;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section#search-panel-3 .result ul li :where(a) .description {
    margin-top: 2rem;
  }
}
#mapping.lower main .search > section#search-panel-3 .result ul li :where(a) .text {
  margin-top: 2rem;
  font-size: 1.3rem;
  line-height: 1.8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section#search-panel-3 .result ul li :where(a) .text {
    margin-top: 1.2rem;
    font-size: 1.4rem;
  }
}
#mapping.lower main .search > section#search-panel-3 .result ul li :where(a) .company {
  margin-top: 1rem;
  font-size: 1.3rem;
  line-height: 1.8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section#search-panel-3 .result ul li :where(a) .company {
    margin-top: 1.2rem;
    font-size: 1.4rem;
  }
}
#mapping.lower main .search > section#search-panel-3 .common-more-button {
  margin-top: 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower main .search > section#search-panel-3 .common-more-button {
    margin-top: 5.8rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower .modal dialog {
    padding-inline: 1.5rem;
  }
}
#mapping.lower .modal dialog[open] {
  display: grid;
  place-content: center;
}
#mapping.lower .modal dialog .wrapper {
  position: relative;
}
#mapping.lower .modal > [id^=label] .wrapper {
  width: min(54.6rem, 100%);
  margin-inline: auto;
}
#mapping.lower .modal > [id^=label] dl {
  border-radius: 2rem;
  box-shadow: 0rem 0.3rem 1rem rgba(154, 125, 87, 0.46);
  background-color: #fff;
  padding: 1.4rem 1.4rem 1.8rem;
}
#mapping.lower .modal > [id^=label] dl dt {
  position: relative;
  padding-block: 0.5rem 1.5rem;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower .modal > [id^=label] dl dt {
    padding-block: 1.6rem 2.5rem;
  }
}
#mapping.lower .modal > [id^=label] dl dt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 2.4rem;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: scaleX(-1);
}
#mapping.lower .modal > [id^=label] dl dd {
  margin-inline: 0.5rem;
  padding: 2rem 1.8rem;
  background-color: #f7f7f7;
}
#mapping.lower .modal > [id^=label] dl dd p {
  font-size: 1.6rem;
  line-height: 1.8;
}
#mapping.lower .modal > [id^=label][id*=digital] dl dt::before {
  background-image: url(/dpa/assets/images/mapping/decoration01.svg);
}
#mapping.lower .modal > [id^=label][id*=learning] dl dt::before {
  background-image: url(/dpa/assets/images/mapping/decoration02.svg);
}
#mapping.lower .modal > [id^=label][id*=safety] dl dt::before {
  background-image: url(/dpa/assets/images/mapping/decoration03.svg);
}
#mapping.lower .modal > [id^=label][id*=sns] dl dt::before {
  background-image: url(/dpa/assets/images/mapping/decoration04.svg);
}
#mapping.lower .modal > [id^=label][id*=ability] dl dt::before {
  background-image: url(/dpa/assets/images/mapping/decoration05.svg);
}
#mapping.lower .modal > [id^=label] .close-button {
  top: 1.3rem;
  right: 1.2rem;
  width: 2.6rem;
  background-color: var(--color-main2);
}
#mapping.lower .modal > [id^=label] .close-button::before, #mapping.lower .modal > [id^=label] .close-button::after {
  width: 1.4rem;
  height: 2px;
}
#mapping.lower .modal > [id^=mapping] .wrapper {
  width: 80rem;
  margin-inline: auto;
  background-color: #fff;
  border: 1px solid #707070;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower .modal > [id^=mapping] .wrapper {
    width: 100%;
    margin-block: 3rem;
  }
}
#mapping.lower .modal > [id^=mapping] header {
  display: grid;
  grid-template-columns: 24rem 1fr;
  grid-template-rows: 2.8rem auto;
  align-items: flex-start;
  padding: 1.4rem 1.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower .modal > [id^=mapping] header {
    grid-template-columns: auto;
    padding: 1.4rem 1.2rem;
  }
}
#mapping.lower .modal > [id^=mapping] header::before {
  grid-column: 1;
  grid-row: 1;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: calc(infinity * 1px);
  padding: 0.6rem 0.8rem 0.4rem;
  color: #fff;
  font-size: 1.3rem;
}
#mapping.lower .modal > [id^=mapping] header .subject {
  grid-column: 1;
  grid-row: 2;
  margin-top: 1.1rem;
  font-size: 1.3rem;
}
#mapping.lower .modal > [id^=mapping] header ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  grid-column: 2;
  grid-row: 1/-1;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower .modal > [id^=mapping] header ul {
    grid-column: 1;
    grid-row: 3;
    gap: 0.4rem;
    margin-top: 1.8rem;
  }
}
#mapping.lower .modal > [id^=mapping] header ul li {
  border-radius: calc(infinity * 1px);
  background-color: #fff;
  padding: 0.4rem 1.2rem 0.4rem;
  font-size: 1.1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower .modal > [id^=mapping] header ul li {
    padding-inline: 1rem;
  }
}
#mapping.lower .modal > [id^=mapping] header ul li[class^=digital] {
  border: 1px solid var(--color-mapping1);
}
#mapping.lower .modal > [id^=mapping] header ul li[class^=learning]:not([class=learning-18]) {
  border: 1px solid var(--color-mapping2);
}
#mapping.lower .modal > [id^=mapping] header ul li[class^=safety] {
  border: 1px solid var(--color-mapping3);
}
#mapping.lower .modal > [id^=mapping] header ul li[class^=sns] {
  border: 1px solid var(--color-mapping4);
}
#mapping.lower .modal > [id^=mapping] header ul li[class^=ability] {
  border: 1px solid var(--color-mapping5);
}
#mapping.lower .modal > [id^=mapping] h3 {
  position: relative;
  display: grid;
  place-content: center;
  border-top: 1px solid #707070;
  padding: 2.4rem 1rem;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  text-decoration-thickness: 0.7rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower .modal > [id^=mapping] h3 {
    text-underline-offset: 0.3rem;
    text-decoration-thickness: 0.4rem;
  }
}
#mapping.lower .modal > [id^=mapping] .content {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto 3rem;
  border-top: 1px solid #707070;
  padding: 1.8rem 1.2rem;
  background-color: #fae8cc;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower .modal > [id^=mapping] .content {
    grid-template-columns: auto;
    grid-template-rows: initial;
  }
}
#mapping.lower .modal > [id^=mapping] .content .description {
  grid-column: span 2;
  font-size: 1.3rem;
  line-height: 1.8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower .modal > [id^=mapping] .content .description {
    grid-row: 1;
  }
}
#mapping.lower .modal > [id^=mapping] .content .text {
  grid-column: 1/span 2;
  grid-row: 2;
  margin-block: 3rem 1rem;
  font-size: 1.3rem;
}
#mapping.lower .modal > [id^=mapping] .content .company {
  display: flex;
  align-items: center;
  grid-row: 3;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: calc(infinity * 1px);
  padding-inline: 1rem;
  background-color: #fff;
  font-size: 1.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower .modal > [id^=mapping] .content .company {
    grid-column: span 2;
    grid-row: 3;
    padding-block: 0.7rem;
    width: -moz-fit-content;
    width: fit-content;
  }
}
#mapping.lower .modal > [id^=mapping] .content a {
  display: grid;
  grid-template-columns: auto 1.2rem;
  align-items: center;
  justify-content: flex-end;
  grid-column: 2;
  grid-row: 3;
  margin-left: auto;
  -moz-column-gap: 1.1rem;
       column-gap: 1.1rem;
  width: 12.8rem;
  border-radius: 1rem;
  padding-inline: 1rem;
  background-color: var(--color-main2);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
}
@media (any-hover: hover) {
  #mapping.lower .modal > [id^=mapping] .content a:hover {
    background-color: #000;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #mapping.lower .modal > [id^=mapping] .content a {
    grid-row: 4;
    margin-top: 1rem;
    outline: none;
    line-height: 3rem;
  }
}
#mapping.lower .modal > [id^=mapping] .content a::after {
  content: "";
  aspect-ratio: 10/6;
  background: url(/dpa/assets/images/common/icon-arrow02-white.svg) no-repeat center/contain;
  transform: rotate(90deg) translateX(-0.1rem);
}
#mapping.lower .modal > [id^=mapping] .close-button {
  top: -1rem;
  right: -1rem;
  width: 3rem;
  background-color: #000;
}
#mapping.lower .modal > [id^=mapping] .close-button:focus {
  background-color: var(--color-main2);
}
@media (hover: hover) and (pointer: fine) {
  #mapping.lower .modal > [id^=mapping] .close-button:where(:-moz-any-link, :enabled, summary, span):hover {
    background-color: var(--color-main2);
  }
  #mapping.lower .modal > [id^=mapping] .close-button:where(:any-link, :enabled, summary, span):hover {
    background-color: var(--color-main2);
  }
}
#mapping.lower .modal > [id^=mapping] .close-button::before, #mapping.lower .modal > [id^=mapping] .close-button::after {
  width: 1.4rem;
  height: 2px;
}
#mapping.lower .modal > [id^=mapping][id*=digital] header {
  background-color: #f7f7fd;
}
#mapping.lower .modal > [id^=mapping][id*=digital] header::before {
  content: "デジタル技術を活用する";
  background-color: var(--color-mapping1);
}
#mapping.lower .modal > [id^=mapping][id*=digital] h3 {
  text-decoration-color: var(--color-mapping1);
}
#mapping.lower .modal > [id^=mapping][id*=learning] header {
  background-color: #fdfdf7;
}
#mapping.lower .modal > [id^=mapping][id*=learning] header::before {
  content: "仕組みやリスクを学ぶ";
  background-color: var(--color-mapping2);
  color: #000;
}
#mapping.lower .modal > [id^=mapping][id*=learning] h3 {
  text-decoration-color: var(--color-mapping2);
}
#mapping.lower .modal > [id^=mapping][id*=safety] header {
  background-color: #fdf7f9;
}
#mapping.lower .modal > [id^=mapping][id*=safety] header::before {
  content: "安全に利用する";
  background-color: var(--color-mapping3);
}
#mapping.lower .modal > [id^=mapping][id*=safety] h3 {
  text-decoration-color: var(--color-mapping3);
}
#mapping.lower .modal > [id^=mapping][id*=sns] header {
  background-color: #f9fdf7;
}
#mapping.lower .modal > [id^=mapping][id*=sns] header::before {
  content: "SNS・スマホ機能を学ぶ";
  background-color: var(--color-mapping4);
}
#mapping.lower .modal > [id^=mapping][id*=sns] h3 {
  text-decoration-color: var(--color-mapping4);
}
#mapping.lower .modal > [id^=mapping][id*=ability] header {
  background-color: #f4f4f4;
}
#mapping.lower .modal > [id^=mapping][id*=ability] header::before {
  content: "自己能力を把握する";
  background-color: var(--color-mapping5);
}
#mapping.lower .modal > [id^=mapping][id*=ability] h3 {
  text-decoration-color: var(--color-mapping5);
}

#data.lower {
  position: relative;
  z-index: 2;
  background-color: var(--color-sub3);
}
#data.lower main .common-wrapper {
  padding-bottom: initial;
}
#data.lower main .intro {
  position: relative;
  margin-top: 2.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .intro {
    margin-top: 3.2rem;
  }
}
#data.lower main .intro .description {
  font-size: 1.6rem;
  line-height: 2;
}
#data.lower main .intro .annotation {
  margin-top: 2rem;
}
#data.lower main .intro .annotation p {
  font-size: 1.2rem;
  text-indent: -1em;
  padding-left: 1em;
  line-height: 1.6;
}
#data.lower main nav.index {
  position: relative;
  margin-top: 4rem;
  padding: 3.7rem 5rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main nav.index {
    padding: 3.5rem 2rem;
  }
}
#data.lower main nav.index::before {
  content: "";
  position: absolute;
  top: 1.9rem;
  left: 1.9rem;
  width: 2.4rem;
  aspect-ratio: 1;
  background: url(/dpa/assets/images/common/decoration02.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main nav.index::before {
    top: 1.5rem;
    left: 1.5rem;
    width: 2rem;
  }
}
#data.lower main nav.index::after {
  content: "";
  position: absolute;
  right: -6.7rem;
  top: -6.8rem;
  z-index: 2;
  width: 18.7rem;
  aspect-ratio: 187/214;
  background: url(/dpa/assets/images/common/decoration04.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main nav.index::after {
    right: -2rem;
    top: -3rem;
    width: 6.6rem;
  }
}
#data.lower main nav.index h2 {
  padding-bottom: 1.2rem;
  font-size: 2rem;
  font-weight: 700;
  border-bottom: 1px solid #c9c6c6;
}
#data.lower main nav.index ul {
  margin-top: 3rem;
  border: 1px solid #c9c6c6;
  border-radius: 1rem;
  padding: 2.5rem;
  background-color: #fdfdfd;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main nav.index ul {
    padding: 2rem;
  }
}
#data.lower main nav.index ul li + li {
  margin-top: 1.4rem;
}
#data.lower main nav.index ul li a {
  display: grid;
  grid-template-columns: 1.8rem auto;
  align-items: baseline;
  width: -moz-fit-content;
  width: fit-content;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  text-decoration: underline;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.8;
}
#data.lower main nav.index ul li a:focus {
  color: var(--color-main2);
}
@media (hover: hover) and (pointer: fine) {
  #data.lower main nav.index ul li a:where(:-moz-any-link, :enabled, summary, span):hover {
    color: var(--color-main2);
  }
  #data.lower main nav.index ul li a:where(:any-link, :enabled, summary, span):hover {
    color: var(--color-main2);
  }
}
#data.lower main nav.index ul li a::before {
  content: "";
  aspect-ratio: 1;
  background: url(/dpa/assets/images/common/icon-arrow03.svg) no-repeat center/contain;
  translate: 0 0.2rem;
}
#data.lower main section.summary {
  position: relative;
  display: grid;
  grid-template-columns: 22.7rem 1fr;
  align-items: center;
  padding-top: 10.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.summary {
    position: relative;
    grid-template-columns: 1fr;
    padding-top: 14rem;
  }
}
#data.lower main section.summary::before {
  content: "";
  aspect-ratio: 227/247;
  background: url(/dpa/assets/images/data/intro-decoration01.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.summary::before {
    position: absolute;
    top: 3.9rem;
    right: 2rem;
    z-index: 2;
    width: 10rem;
  }
}
#data.lower main section.summary::after {
  content: "";
  position: absolute;
  top: 4.4rem;
  right: 0;
  width: 10.6rem;
  aspect-ratio: 106/130;
  background: url(/dpa/assets/images/data/intro-decoration02.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.summary::after {
    display: none;
  }
}
#data.lower main section.summary .body {
  position: relative;
  margin-right: 5rem;
  padding: 4rem 1rem 6rem 1.6rem;
  border-radius: 2rem;
  background-color: #fceed8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.summary .body {
    margin-right: initial;
    padding-bottom: 5rem;
  }
}
#data.lower main section.summary .body h2 {
  position: absolute;
  top: -3rem;
  left: -6rem;
  color: #f99731;
  text-align: end;
  -webkit-text-stroke: 3px black;
  paint-order: stroke;
  font-size: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.summary .body h2 {
    top: -2.8rem;
    left: 0rem;
    font-size: 4rem;
  }
}
#data.lower main section.summary .body ul li {
  display: grid;
  grid-template-columns: 1.6rem auto;
  align-items: baseline;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.summary .body ul li {
    font-size: 1.6rem;
  }
}
#data.lower main section.summary .body ul li::before {
  content: "⚫︎";
  font-size: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.summary .body ul li::before {
    font-size: 1.4rem;
  }
}
#data.lower main section.summary .body ul li + li {
  margin-top: 1.5rem;
}
#data.lower main section.summary .body ul li b {
  background: linear-gradient(transparent 70%, #f99731 30%);
}
#data.lower main section.point {
  padding-block: 6rem 9rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.point {
    padding-block: 7rem 7rem;
  }
}
#data.lower main section.point h2 {
  position: relative;
  border-radius: 2rem 2rem 0 0;
  border: 1px solid #c9c6c6;
  border-width: 1px 1px 0 1px;
  padding: 2rem 2.6rem 2rem 5rem;
  background-color: #f7f7f7;
  font-size: 2.2rem;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.point h2 {
    font-size: 2rem;
    padding: 2rem 4.5rem;
  }
}
#data.lower main section.point h2:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2.6rem;
  translate: 0 -50%;
  width: 0.4rem;
  height: calc(100% - 4rem);
  background-color: #f08c00;
}
#data.lower main section.point ol {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid #c9c6c6;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.point ol {
    grid-template-columns: 1fr;
  }
}
#data.lower main section.point ol li {
  padding: 2rem 3.4rem 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.point ol li {
    padding: 2rem 2rem 4rem;
  }
}
#data.lower main section.point ol li .number {
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 0.3rem;
       column-gap: 0.3rem;
  color: transparent;
  -webkit-text-stroke: 1px black;
  paint-order: stroke;
  font-size: 5.6rem;
  line-height: 1;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.point ol li .number {
    font-size: 5rem;
  }
}
#data.lower main section.point ol li .number::before {
  content: "#";
  color: #f86902;
  -webkit-text-stroke: initial;
  font-size: 2rem;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.point ol li .number::before {
    font-size: 1.8rem;
  }
}
#data.lower main section.point ol li h3 {
  border-bottom: 1px solid #c9c6c6;
  margin-block: 1.6rem 1rem;
  padding-bottom: 1rem;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8;
}
#data.lower main section.point ol li h3 a {
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}
#data.lower main section.point ol li h3 a:focus {
  text-decoration: initial;
  color: var(--color-main2);
}
@media (hover: hover) and (pointer: fine) {
  #data.lower main section.point ol li h3 a:where(:-moz-any-link, :enabled, summary, span):hover {
    text-decoration: initial;
    color: var(--color-main2);
  }
  #data.lower main section.point ol li h3 a:where(:any-link, :enabled, summary, span):hover {
    text-decoration: initial;
    color: var(--color-main2);
  }
}
#data.lower main section.point ol li h3 a::before {
  content: "";
  display: inline-block;
  width: 2rem;
  aspect-ratio: 1;
  margin-right: 0.5rem;
  background: url(/dpa/assets/images/common/icon-arrow03.svg) no-repeat center/100% auto;
  transform: translateY(0.3rem);
}
#data.lower main section.point ol li p:not(.annotation) {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.6rem;
  line-height: 2;
}
#data.lower main section.point ol li p:not(.annotation)::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}
#data.lower main section.point ol li p:not(.annotation) + p:not(.annotation) {
  margin-top: 2rem;
}
#data.lower main section.point ol li p:not(.annotation) b {
  color: #f86902;
  font-weight: 700;
}
#data.lower main section.point ol li .annotation {
  display: inline-block;
  margin-block: 1rem;
  font-size: 1.2rem;
  line-height: 2;
  text-indent: -1.7em;
  padding-left: 1.7em;
}
#data.lower main section.point ol li:not(:nth-of-type(2n + 1)) {
  border-left: 1px solid #707070;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.point ol li:not(:nth-of-type(2n + 1)) {
    border-left: initial;
  }
}
#data.lower main section.point ol li:not(:nth-of-type(-n + 2)) {
  border-top: 1px solid #707070;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.point ol li:not(:first-of-type) {
    border-top: 1px solid #707070;
  }
}
#data.lower main section.point ol li:nth-of-type(4) {
  position: relative;
}
#data.lower main section.point ol li:nth-of-type(4)::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -2.2rem;
  left: -3rem;
  width: 5.9rem;
  aspect-ratio: 293/220;
  background: url(/dpa/assets/images/efforts/event-decoration.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main section.point ol li:nth-of-type(4)::before {
    display: none;
  }
}
#data.lower main section.point .annotation {
  display: block;
  text-align: end;
  margin-top: 1rem;
  font-size: 1.6rem;
  line-height: 1.6;
}
#data.lower main section.point > a {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  text-decoration: underline;
}
#data.lower main section.point > a:focus {
  text-decoration: initial;
  color: #f86902;
}
@media (hover: hover) and (pointer: fine) {
  #data.lower main section.point > a:where(:-moz-any-link, :enabled, summary, span):hover {
    text-decoration: initial;
    color: #f86902;
  }
  #data.lower main section.point > a:where(:any-link, :enabled, summary, span):hover {
    text-decoration: initial;
    color: #f86902;
  }
}
#data.lower main .contents {
  padding-bottom: 10.8rem;
  -o-border-image: linear-gradient(#f7f7f7 0 0) 0/0/0 100vw;
     border-image: linear-gradient(#f7f7f7 0 0) fill 0/0/0 100vw;
}
#data.lower main .contents article:first-of-type {
  padding-top: 6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article:first-of-type {
    padding-top: 8rem;
  }
}
#data.lower main .contents article:not(:first-of-type) {
  padding-top: 8rem;
}
#data.lower main .contents article h2 {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 5rem;
  text-decoration: underline;
  text-decoration-color: #f99731;
  text-underline-offset: -0.2rem;
  text-decoration-thickness: 0.8rem;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article h2 {
    margin-bottom: 4rem;
  }
}
#data.lower main .contents article section + section {
  margin-top: 14rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section + section {
    margin-top: 6rem;
  }
}
#data.lower main .contents article section h3 {
  position: relative;
  border-radius: 2rem;
  margin-bottom: 2.5rem;
  padding: 2.5rem 4.6rem;
  background-color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.7;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section h3 {
    padding: 1.6rem 4.5rem;
    font-size: 2rem;
  }
}
#data.lower main .contents article section h3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2.3rem;
  translate: 0 -50%;
  width: 0.4rem;
  height: calc(100% - 5rem);
  background-color: #f08c00;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section h3::before {
    height: calc(100% - 4rem);
  }
}
#data.lower main .contents article section > p {
  position: relative;
  padding-left: 4.5rem;
  font-size: 1.6rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section > p {
    padding-left: 3rem;
  }
}
#data.lower main .contents article section > p::before {
  content: "⚫︎";
  position: absolute;
  top: 0rem;
  left: 2rem;
  font-size: 1.4rem;
  translate: 0 0.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section > p::before {
    left: 1rem;
  }
}
#data.lower main .contents article section > p b {
  color: #f86902;
}
#data.lower main .contents article section > p span {
  display: block;
  font-size: 1.2rem;
}
#data.lower main .contents article section dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.7rem 2.1rem;
  max-width: 96rem;
  margin: 3rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section dl {
    display: block;
  }
}
#data.lower main .contents article section dl.column {
  grid-template-columns: 1fr 1fr;
}
#data.lower main .contents article section dl div {
  padding: 4rem 2.5rem 2rem;
  background: linear-gradient(to right, #f8f8f8 2px, transparent 2px), linear-gradient(to bottom, #f8f8f8 2px, transparent 2px), #fff;
  background-size: 1.8rem 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section dl div {
    padding: initial;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section dl div + div {
    margin-top: 3rem;
  }
}
#data.lower main .contents article section dl div dt {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section dl div dt {
    padding: 3rem 1rem 0;
    font-size: 1.6rem;
  }
}
#data.lower main .contents article section dl div dt span {
  display: block;
  font-weight: 400;
}
#data.lower main .contents article section dl div dt .sub-text {
  margin-top: 1rem;
  font-size: 1.2rem;
  line-height: 2;
}
#data.lower main .contents article section dl div dd {
  padding-top: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section dl div dd {
    padding: 2rem 2rem;
    overflow-x: auto;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section dl div dd > img {
    width: 80rem;
  }
}
#data.lower main .contents article section .annotation {
  max-width: 96rem;
  margin-inline: auto;
  margin-top: 2.2rem;
}
#data.lower main .contents article section .annotation p {
  text-indent: -1em;
  padding-left: 1em;
  font-size: 1.2rem;
  line-height: 2;
}
#data.lower main .contents article section.awareness01 dl {
  background: linear-gradient(to right, #f8f8f8 2px, transparent 2px), linear-gradient(to bottom, #f8f8f8 2px, transparent 2px), #fff;
  background-size: 1.8rem 1.8rem;
  gap: initial;
}
#data.lower main .contents article section.awareness01 dl div {
  background: initial;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section.awareness01 dl div + div {
    margin-top: initial;
  }
}
#data.lower main .contents article section.reason02 dl {
  grid-template-columns: 48.2rem 42rem;
  justify-content: center;
  gap: 0;
  background: linear-gradient(to right, #f8f8f8 2px, transparent 2px), linear-gradient(to bottom, #f8f8f8 2px, transparent 2px), #fff;
  background-size: 1.8rem 1.8rem;
}
#data.lower main .contents article section.reason02 dl div {
  background: initial;
}
#data.lower main .contents article section.reason02 dl div:nth-of-type(1) dd {
  position: relative;
}
#data.lower main .contents article section.reason02 dl div:nth-of-type(1) dd::after {
  content: "";
  display: block;
  width: 7.6rem;
  aspect-ratio: 76/22;
  margin: 1.3rem 0 0 28rem;
  background: url(/dpa/assets/images/data/reason-data02-subtext.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section.reason02 dl div:nth-of-type(1) dd::after {
    width: 6rem;
    margin-left: 32rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section.reason02 dl div:nth-of-type(1) dd > img {
    width: 40rem;
    padding-right: 2rem;
  }
}
#data.lower main .contents article section.reason02 dl div:nth-of-type(2) dd {
  position: relative;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section.reason02 dl div:nth-of-type(2) dd > img {
    width: 100%;
  }
}
#data.lower main .contents article section.reason02 dl div:nth-of-type(2) dd > p {
  position: absolute;
  z-index: 2;
  bottom: 0rem;
  left: -10.6rem;
  width: 16.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section.reason02 dl div:nth-of-type(2) dd > p {
    left: 2rem;
    bottom: 2rem;
    width: 12rem;
  }
}
#data.lower main .contents article section.literacy01 dl {
  grid-template-columns: 45.6rem 48rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #data.lower main .contents article section.literacy01 dl img {
    width: 40rem;
  }
}

#about.lower {
  position: relative;
  z-index: 2;
  background-color: var(--color-sub3);
}
#about.lower main .intro {
  position: relative;
  margin-top: 2.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .intro {
    margin-top: 3.2rem;
  }
}
#about.lower main .intro::before {
  content: "";
  display: block;
  width: 91rem;
  aspect-ratio: 910/369;
  margin-inline: auto;
  background: url(/dpa/assets/images/about/mv.png) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .intro::before {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: 376/229;
    background-image: url(/dpa/assets/images/about/mv-sp.png);
    translate: initial;
  }
}
#about.lower main .intro::after {
  content: "";
  position: absolute;
  right: -6rem;
  bottom: -5.8rem;
  z-index: 2;
  width: 18.7rem;
  aspect-ratio: 187/214;
  background: url(/dpa/assets/images/common/decoration04.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .intro::after {
    right: -2rem;
    bottom: -9rem;
    width: 6.6rem;
  }
}
#about.lower main .intro h2 {
  margin-bottom: 5rem;
  font-size: 3rem;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .intro h2 {
    margin-bottom: 3rem;
    font-size: 2.2rem;
  }
}
#about.lower main .intro h2 span {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  padding: 0.4rem 1rem;
  border: 1px solid #000;
  background-color: #fff;
}
#about.lower main .intro h2 span:not(:first-of-type) {
  margin-top: 0.7rem;
}
#about.lower main .intro h2 span:nth-of-type(1) {
  translate: -3rem 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .intro h2 span:nth-of-type(1) {
    translate: initial;
  }
}
#about.lower main .intro h2 span:nth-of-type(2) {
  margin-top: 0.7rem;
  translate: 12rem 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .intro h2 span:nth-of-type(2) {
    translate: initial;
  }
}
#about.lower main .intro p {
  text-align: center;
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .intro p {
    padding-inline: 2rem;
    font-size: 1.6rem;
  }
}
#about.lower main .intro p + p {
  margin-top: 4rem;
}
#about.lower main .steatment {
  position: relative;
  border-radius: 10rem;
  box-shadow: 0.6rem 0.6rem 0.6rem rgba(245, 136, 9, 0.16);
  margin-top: 14rem;
  padding: 13.5rem 2rem 9.3rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .steatment {
    border-radius: initial;
    box-shadow: initial;
    margin-top: 15rem;
    padding: 11.5rem 1rem 22rem 3rem;
  }
}
#about.lower main .steatment::before {
  content: "";
  position: absolute;
  top: -5.6rem;
  left: calc(50% - 3.8rem);
  width: 12rem;
  aspect-ratio: 120/96;
  background: url(/dpa/assets/images/about/steatment-decoration01.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .steatment::before {
    top: -3.7rem;
    width: 8rem;
  }
}
#about.lower main .steatment::after {
  content: "";
  position: absolute;
  top: -8.3rem;
  right: 2.6rem;
  width: 17.6rem;
  aspect-ratio: 176/249;
  background: url(/dpa/assets/images/about/steatment-decoration02.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .steatment::after {
    top: -4.3rem;
    right: 0.3rem;
    width: 8.4rem;
  }
}
#about.lower main .steatment h2 {
  position: absolute;
  top: 8.3rem;
  left: 8.7rem;
  width: 6.9rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .steatment h2 {
    top: 4.6rem;
    left: -2.4rem;
    width: 4.7rem;
  }
}
#about.lower main .steatment .body::before {
  content: "";
  position: absolute;
  bottom: 7.9rem;
  right: -2rem;
  width: 24.3rem;
  aspect-ratio: 243/520;
  background: url(/dpa/assets/images/about/steatment-decoration03.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .steatment .body::before {
    bottom: -5.8rem;
    right: 0;
    width: 11.2rem;
  }
}
#about.lower main .steatment .body::after {
  content: "";
  position: absolute;
  left: 8.7rem;
  bottom: -5.7rem;
  width: 11.1rem;
  aspect-ratio: 111/308;
  background: url(/dpa/assets/images/about/steatment-decoration04.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .steatment .body::after {
    left: 3.6rem;
    bottom: 8.6rem;
    width: 4.2rem;
  }
}
#about.lower main .steatment .body p {
  text-align: center;
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .steatment .body p {
    font-size: 1.6rem;
  }
}
#about.lower main .steatment .body p + p {
  margin-top: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .steatment .body p + p {
    margin-top: 4rem;
  }
}
#about.lower main .share {
  margin-top: 10rem;
  padding-inline: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about.lower main .share {
    padding-inline: initial;
  }
}
#about.lower main .share h2 {
  width: 19.3rem;
  margin-inline: auto;
}
#about.lower main .share ul {
  display: grid;
  grid-template-columns: 2.7rem 3.2rem 3.2rem;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  margin-top: -1.2rem;
  border-radius: 2rem;
  padding-block: 3.5rem 2.5rem;
  background-color: #fff;
}
#about.lower main .share ul li a:focus {
  opacity: 0.7;
}
@media (hover: hover) and (pointer: fine) {
  #about.lower main .share ul li a:where(:-moz-any-link, :enabled, summary, span):hover {
    opacity: 0.7;
  }
  #about.lower main .share ul li a:where(:any-link, :enabled, summary, span):hover {
    opacity: 0.7;
  }
}

#activity.lower {
  position: relative;
  z-index: 2;
  background-color: var(--color-sub3);
}
#activity.lower .page-nav {
  position: relative;
  margin-top: 2.4rem;
  padding-block: 4.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #activity.lower .page-nav {
    padding-block: 4.7rem;
  }
}
#activity.lower .page-nav::before {
  content: "";
  position: absolute;
  top: 0;
  right: -4rem;
  z-index: -1;
  width: 100vw;
  height: 100%;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #activity.lower .page-nav::before {
    right: -1.5rem;
  }
}
#activity.lower .page-nav::after {
  content: "";
  position: absolute;
  top: 1.7rem;
  right: 0;
  width: 10.6rem;
  aspect-ratio: 106/130;
  background: url(/dpa/assets/images/data/intro-decoration02.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #activity.lower .page-nav::after {
    top: -2.8rem;
    right: -2.2rem;
    width: 6.3rem;
  }
}
#activity.lower .page-nav ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, max-content));
  align-items: stretch;
  -moz-column-gap: 1.8rem;
       column-gap: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #activity.lower .page-nav ul {
    grid-template-columns: 1fr;
    row-gap: 1.6rem;
  }
}
#activity.lower .page-nav ul li a {
  display: grid;
  grid-template-columns: 1fr 2.4rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 6rem;
  height: 100%;
  box-shadow: 0 0.3rem 1rem #efdfd3;
  border: 1px solid #f84e2e;
  border-radius: 1rem;
  background-color: #fff;
  padding: 1.5rem 1.8rem 1.5rem 2.4rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.33;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #activity.lower .page-nav ul li a {
    grid-template-columns: 1fr 2rem;
    padding: 1.2rem 2rem;
    font-size: 1.6rem;
    line-height: 2;
  }
}
#activity.lower .page-nav ul li a::after {
  content: "";
  aspect-ratio: 1;
  background: url(/dpa/assets/images/common/icon-arrow03.svg) no-repeat center/contain;
}
@media (any-hover: hover) {
  #activity.lower .page-nav ul li a:hover, #activity.lower .page-nav ul li a[aria-selected=true] {
    translate: 0 0.2rem;
    box-shadow: initial;
    color: var(--color-main2);
  }
}
#activity.lower .page-nav p {
  margin-top: 3rem;
  font-size: 1.6rem;
  line-height: 2;
}
#activity.lower .report-panel h2 {
  margin-block: 8rem 3.2rem;
}
#activity.lower .report-panel h3 {
  position: relative;
  border-radius: 2rem;
  padding: 1.6rem 4.6rem;
  background-color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.7;
}
#activity.lower .report-panel h3:not(:first-of-type) {
  margin-top: 6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #activity.lower .report-panel h3 {
    font-size: 2rem;
  }
}
#activity.lower .report-panel h3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2.3rem;
  translate: 0 -50%;
  width: 0.4rem;
  height: calc(100% - 4rem);
  background-color: #f08c00;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #activity.lower .report-panel h3::before {
    height: calc(100% - 4rem);
  }
}
#activity.lower .report-panel .lead-text {
  margin-top: 3rem;
  font-size: 1.6rem;
  line-height: 2;
}
#activity.lower .report-panel .item-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 2.4rem;
  margin: 3.2rem auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #activity.lower .report-panel .item-list {
    grid-template-columns: 1fr;
  }
}
#activity.lower .report-panel .item-list li button {
  display: block;
}
#activity.lower .report-panel .item-list li button figure {
  position: relative;
}
#activity.lower .report-panel .item-list li button figure::before {
  content: "動画を再生する";
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  border-radius: 1rem 0 0 0;
  background: var(--color-main2) url(/dpa/assets/images/top/gallery-movie-icon.svg) no-repeat center left 1.1rem/1.9rem auto;
  padding-inline: 3.7rem 0.7rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 3rem;
  transition: background-color 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #activity.lower .report-panel .item-list li button figure::before {
    line-height: 3.6rem;
  }
}
#activity.lower .report-panel .item-list li button figure img {
  aspect-ratio: 304/171;
  -o-object-fit: cover;
     object-fit: cover;
}
#activity.lower .report-panel .item-list li button p {
  padding-top: 1.2rem;
  font-size: 1.6rem;
  line-height: 1.6;
}
#activity.lower .report-panel .item-list li button:focus figure::before {
  background-color: #fa9632;
}
@media (hover: hover) and (pointer: fine) {
  #activity.lower .report-panel .item-list li button:where(:-moz-any-link, :enabled, summary, span):hover figure::before {
    background-color: #fa9632;
  }
  #activity.lower .report-panel .item-list li button:where(:any-link, :enabled, summary, span):hover figure::before {
    background-color: #fa9632;
  }
}

#faq.lower {
  position: relative;
  z-index: 2;
  background-color: #f7f7f7;
}
#faq.lower main {
  padding-bottom: 11.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faq.lower main {
    padding-block: 7.5rem 0;
  }
}
#faq.lower main .common-wrapper > section {
  margin-top: 5.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faq.lower main .common-wrapper > section {
    margin-top: 6.3rem;
  }
}
#faq.lower main .common-wrapper > section h2 {
  position: relative;
  border-radius: 2rem;
  padding: 2.5rem 4.6rem;
  background-color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.7;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faq.lower main .common-wrapper > section h2 {
    padding: 1.6rem 4.5rem;
    font-size: 2rem;
  }
}
#faq.lower main .common-wrapper > section h2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2.3rem;
  translate: 0 -50%;
  width: 0.4rem;
  height: calc(100% - 5rem);
  background-color: #f08c00;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faq.lower main .common-wrapper > section h2::before {
    height: calc(100% - 4rem);
  }
}
#faq.lower main .common-wrapper > section dl {
  margin-top: 3.1rem;
}
#faq.lower main .common-wrapper > section dl > div {
  border-top: 1px solid #afafaf;
  letter-spacing: 0.02em;
}
#faq.lower main .common-wrapper > section dl > div:last-of-type {
  border-bottom: 1px solid #afafaf;
}
#faq.lower main .common-wrapper > section dl > div dt {
  display: grid;
  grid-template-columns: auto 1fr 3rem;
  -moz-column-gap: 1.7rem;
       column-gap: 1.7rem;
  padding: 3rem 1.7rem 3rem 4rem;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faq.lower main .common-wrapper > section dl > div dt {
    padding: 1.5rem 0rem 1.5rem 0.6rem;
    font-size: 1.5rem;
    line-height: 1.6;
  }
}
#faq.lower main .common-wrapper > section dl > div dt::before {
  content: "Q" attr(data-number) ".";
  color: #716c6b;
  font-size: 2rem;
  line-height: 1.8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faq.lower main .common-wrapper > section dl > div dt::before {
    font-size: 1.8rem;
  }
}
#faq.lower main .common-wrapper > section dl > div dt span {
  align-self: center;
  position: relative;
  border-radius: 50%;
  width: 3rem;
  aspect-ratio: 1;
  background-color: #e2e2e2;
}
#faq.lower main .common-wrapper > section dl > div dt span::before, #faq.lower main .common-wrapper > section dl > div dt span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50%;
  width: 1.2rem;
  height: 2px;
  background-color: #707070;
  transition: transform 0.3s ease-in-out;
}
#faq.lower main .common-wrapper > section dl > div dt span::after {
  transform: rotate(-90deg);
}
#faq.lower main .common-wrapper > section dl > div dd {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
}
#faq.lower main .common-wrapper > section dl > div dd .inner {
  overflow: hidden;
  background-color: #fff;
}
#faq.lower main .common-wrapper > section dl > div dd .inner .body {
  position: relative;
  padding: 3rem 3rem 3rem 8.1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faq.lower main .common-wrapper > section dl > div dd .inner .body {
    padding: 2.4rem 5rem 4rem 6rem;
  }
}
#faq.lower main .common-wrapper > section dl > div dd .inner .body::before {
  content: "A.";
  position: absolute;
  top: 3.7rem;
  left: 4rem;
  color: var(--color-main2);
  font-size: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faq.lower main .common-wrapper > section dl > div dd .inner .body::before {
    top: 3rem;
    left: 2.2rem;
    font-size: 1.8rem;
  }
}
#faq.lower main .common-wrapper > section dl > div dd .inner .body p {
  font-size: 1.8rem;
  line-height: 2.2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faq.lower main .common-wrapper > section dl > div dd .inner .body p {
    font-size: 1.5rem;
    line-height: 1.8;
  }
}
#faq.lower main .common-wrapper > section dl > div dd .inner .body p + p {
  margin-top: 3rem;
}
#faq.lower main .common-wrapper > section dl > div dd .inner .body a,
#faq.lower main .common-wrapper > section dl > div dd .inner .body button {
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}
#faq.lower main .common-wrapper > section dl > div dd .inner .body a:focus,
#faq.lower main .common-wrapper > section dl > div dd .inner .body button:focus {
  color: var(--color-main2);
  text-decoration: initial;
}
@media (hover: hover) and (pointer: fine) {
  #faq.lower main .common-wrapper > section dl > div dd .inner .body a:where(:-moz-any-link, :enabled, summary, span):hover, #faq.lower main .common-wrapper > section dl > div dd .inner .body button:where(:-moz-any-link, :enabled, summary, span):hover {
    color: var(--color-main2);
    text-decoration: initial;
  }
  #faq.lower main .common-wrapper > section dl > div dd .inner .body a:where(:any-link, :enabled, summary, span):hover,
  #faq.lower main .common-wrapper > section dl > div dd .inner .body button:where(:any-link, :enabled, summary, span):hover {
    color: var(--color-main2);
    text-decoration: initial;
  }
}
#faq.lower main .common-wrapper > section dl > div dd .inner .body a.external-icon::after,
#faq.lower main .common-wrapper > section dl > div dd .inner .body button.external-icon::after {
  content: "";
  display: inline-block;
  width: 1.6rem;
  aspect-ratio: 1;
  margin-left: 0.6rem;
  background: url(/dpa/assets/images/common/icon-arrow04.svg) no-repeat center/contain;
  translate: 0 0.2rem;
}
#faq.lower main .common-wrapper > section dl > div dd .inner .body button {
  display: block;
}
#faq.lower main .common-wrapper > section dl > div.is-open dt span::after {
  transform: rotate(0deg);
}
#faq.lower main .common-wrapper > section dl > div.is-open dd {
  grid-template-rows: 1fr;
}

#column-list.lower {
  position: relative;
  z-index: 2;
  background-color: var(--color-sub3);
}
#column-list.lower main .column-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 2.4rem;
  margin: 2rem auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column-list.lower main .column-list {
    grid-template-columns: 1fr;
  }
}
#column-list.lower main .column-list li {
  display: contents;
}
#column-list.lower main .column-list li a {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0;
  padding: 2.4rem 2.4rem 5rem;
  border-radius: 2rem;
  background: #fff url(/dpa/assets/images/common/icon-arrow-black.svg) no-repeat right 2.5rem bottom 1.6rem/2rem auto;
  box-shadow: 0 0.3rem 1rem rgba(154, 125, 87, 0.46);
}
#column-list.lower main .column-list li a:focus {
  box-shadow: initial;
  translate: 0 0.3rem;
}
@media (hover: hover) and (pointer: fine) {
  #column-list.lower main .column-list li a:where(:-moz-any-link, :enabled, summary, span):hover {
    box-shadow: initial;
    translate: 0 0.3rem;
  }
  #column-list.lower main .column-list li a:where(:any-link, :enabled, summary, span):hover {
    box-shadow: initial;
    translate: 0 0.3rem;
  }
}
#column-list.lower main .column-list li a::before {
  content: "";
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 3rem;
  aspect-ratio: 1;
  background: url(/dpa/assets/images/top/icon-head.svg) no-repeat top center/100% auto;
}
#column-list.lower main .column-list li time {
  line-height: 1.6;
  font-size: 1.4rem;
}
#column-list.lower main .column-list li time:before {
  content: "更新日";
  background: var(--color-main2);
  color: #fff;
  padding: 0.4rem 1.6rem;
  border-radius: 999rem;
  font-size: 0.9em;
  margin-right: 0.4rem;
}
#column-list.lower main .column-list li figure {
  margin-top: 2rem;
  padding-inline: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column-list.lower main .column-list li figure {
    padding-inline: initial;
  }
}
#column-list.lower main .column-list li figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#column-list.lower main .column-list li h3 {
  margin-top: 1.6rem;
  color: var(--color-main2);
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1.6;
}
#column-list.lower main .column-list li p {
  margin-top: 2.4rem;
  font-size: 1.4rem;
  font-weight: bold;
}

#column.lower {
  position: relative;
  z-index: 2;
}
#column.lower::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 140rem;
  left: -45rem;
  width: 21.8rem;
  aspect-ratio: 218/272;
  background: url(/dpa/assets/images/common/decoration05.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower::before {
    display: none;
  }
}
#column.lower main::after {
  content: "";
  position: absolute;
  right: -3.6rem;
  bottom: 15rem;
  z-index: 2;
  width: 18.7rem;
  aspect-ratio: 187/214;
  background: url(/dpa/assets/images/common/decoration04.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower main::after {
    right: -0.3rem;
    bottom: 6.7rem;
    width: 10.3rem;
    aspect-ratio: 103/52;
    background-image: url(/dpa/assets/images/common/decoration07.svg);
  }
}
#column.lower figure {
  max-width: 86rem;
  margin-inline: auto;
}
#column.lower .page-header {
  background-color: var(--color-sub3);
  padding-top: 5.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .page-header {
    padding: 10rem 3.5rem 4.2rem;
  }
}
#column.lower .page-header h1 {
  margin-block: 1.3rem 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .page-header h1 {
    margin-block: 0.8rem 3.5rem;
    font-size: 2rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .page-header h1::before {
    position: absolute;
    top: -9.8rem;
    left: 50%;
    translate: -50% 0;
  }
}
#column.lower .page-header .date {
  font-size: 1.4rem;
}
#column.lower .page-header .author {
  font-size: 1.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .common-wrapper {
    padding-bottom: initial;
  }
}
#column.lower .kv {
  margin-block: 4rem 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .kv {
    margin-block: 3.5rem 3rem;
  }
}
#column.lower .content {
  border-radius: 3rem;
  padding: 5rem 5rem 9.2rem;
  background-color: var(--color-sub3);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .content {
    border-radius: initial;
    -o-border-image: linear-gradient(var(--color-sub3) 0 0) 0/0/0 100vw;
       border-image: linear-gradient(var(--color-sub3) 0 0) fill 0/0/0 100vw;
    margin-right: initial;
    padding: 2.6rem 0 7rem;
    background-color: initial;
  }
}
#column.lower .content + .content {
  margin-top: 3.9rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .content + .content {
    margin-top: 4.3rem;
  }
}
#column.lower .content:last-of-type {
  padding-bottom: 10.5rem;
}
#column.lower .content h2 {
  position: relative;
  border-radius: 2rem;
  margin-bottom: 6rem;
  padding: 3rem 4.4rem 3rem 4.6rem;
  background-color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .content h2 {
    margin-bottom: 2.5rem;
    padding: 3rem 2rem 3rem 4.5rem;
    font-size: 2rem;
  }
}
#column.lower .content h2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2.3rem;
  translate: 0 -50%;
  width: 0.4rem;
  height: calc(100% - 8rem);
  background-color: #f08c00;
}
#column.lower .content p {
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .content p {
    padding-inline: 2rem;
    font-size: 1.6rem;
  }
}
#column.lower .content p + p {
  margin-top: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .content p + p {
    margin-top: 2rem;
  }
}
#column.lower .content figure {
  margin-top: 4rem;
}
#column.lower .content figure iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
}
#column.lower .content figure video {
  width: 100%;
  height: auto;
}
#column.lower .content .links {
  margin-top: 6.4rem;
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.16);
  border-radius: 3rem;
  padding: 1.7rem 2rem 4rem;
  background-color: #faefdd;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .content .links {
    padding: 2rem 2rem 4.5rem;
  }
}
#column.lower .content .links h3 {
  border-radius: 1rem;
  padding: 2rem;
  background-color: #fff;
  text-decoration: underline;
  text-underline-offset: -0.4rem;
  text-decoration-thickness: 0.7rem;
  text-decoration-color: #fdc403;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .content .links h3 {
    padding: 1.8rem;
    font-size: 1.8rem;
  }
}
#column.lower .content .links .inner {
  padding: 3rem 3.1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .content .links .inner {
    padding: 3rem 1rem;
  }
}
#column.lower .content .links .inner a {
  display: block;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
#column.lower .content .links .inner a:focus {
  color: var(--color-main2);
}
@media (hover: hover) and (pointer: fine) {
  #column.lower .content .links .inner a:where(:-moz-any-link, :enabled, summary, span):hover {
    color: var(--color-main2);
  }
  #column.lower .content .links .inner a:where(:any-link, :enabled, summary, span):hover {
    color: var(--color-main2);
  }
}
#column.lower .content .links .inner a::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1.6rem;
  aspect-ratio: 1;
  margin: -0.3rem 0 0 1rem;
  background: url(/dpa/assets/images/common/icon-arrow04.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower .content .links .inner a::after {
    margin-top: -0.1rem;
  }
}
#column.lower .content .links .inner a + a {
  margin-top: 2.2rem;
}
#column.lower.column03 .content:first-of-type {
  margin-top: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #column.lower.column03 .content:first-of-type {
    margin-top: 3rem;
  }
}

#survey.lower main {
  padding-top: 16.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #survey.lower main {
    padding-top: 10rem;
  }
}
#survey.lower .survey {
  position: relative;
  padding-block: 8.6rem 15rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #survey.lower .survey {
    padding-block: 4rem 8rem;
  }
}
#survey.lower .survey .inner {
  width: min(92rem, 100% - 3rem);
  margin-inline: auto;
}
#survey.lower .survey :where(p, li) {
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #survey.lower .survey :where(p, li) {
    font-size: 1.6rem;
  }
}
#survey.lower .survey::before {
  content: "";
  position: absolute;
  pointer-events: none;
  top: -20rem;
  right: -1.5rem;
  width: 96.8rem;
  aspect-ratio: 968/238;
  background: url(/dpa/assets/images/efforts/efforts-decoration.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #survey.lower .survey::before {
    top: -11.5rem;
    right: 0rem;
    width: 23rem;
    aspect-ratio: 230/123;
    background-image: url(/dpa/assets/images/efforts/efforts-decoration-sp.svg);
  }
}
#survey.lower .survey .intro {
  margin-top: 4.2rem;
}
#survey.lower .survey .intro p:not(.annotation) {
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #survey.lower .survey .intro p:not(.annotation) {
    text-align: initial;
  }
}
#survey.lower .survey .intro p:not(.annotation) + p {
  margin-top: 1.5em;
}
#survey.lower .survey .intro a {
  border-bottom: 1px solid #000;
}
#survey.lower .survey .intro a:focus {
  border-bottom: initial;
}
@media (hover: hover) and (pointer: fine) {
  #survey.lower .survey .intro a:where(:-moz-any-link, :enabled, summary, span):hover {
    border-bottom: initial;
  }
  #survey.lower .survey .intro a:where(:any-link, :enabled, summary, span):hover {
    border-bottom: initial;
  }
}
#survey.lower .survey .intro a.pdf::after {
  content: "";
  display: inline-block;
  width: 2rem;
  aspect-ratio: 1;
  background: url(/dpa/assets/images/common/icon-pdf.png) no-repeat center/contain;
}
#survey.lower .survey section {
  margin-top: 6rem;
}
#survey.lower .survey section h3 {
  margin-bottom: 2rem;
  font-size: 2rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #survey.lower .survey section h3 {
    font-size: 1.8rem;
  }
}
#survey.lower .survey section ol {
  counter-reset: listnum;
}
#survey.lower .survey section ol li::before {
  content: counter(listnum) ".";
  counter-increment: listnum;
}
#survey.lower .survey section dl {
  display: grid;
  grid-template-columns: auto 1fr;
  border: 1px solid #000;
}
#survey.lower .survey section dl div {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #survey.lower .survey section dl div {
    grid-column: span 2;
    font-size: 1.6rem;
  }
}
#survey.lower .survey section dl div:not(:first-of-type) {
  border-top: 1px solid #000;
}
#survey.lower .survey section dl div :where(dt, dd) {
  padding-block: 0.5rem;
}
#survey.lower .survey section dl div dt {
  border-right: 1px solid #000;
  padding-inline: 4rem;
  text-align: center;
  font-weight: 500;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #survey.lower .survey section dl div dt {
    padding-inline: 2rem;
  }
}
#survey.lower .survey section dl div dd {
  padding-inline: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #survey.lower .survey section dl div dd {
    padding-inline: 1rem;
  }
}

#event.lower {
  position: relative;
  z-index: 2;
  background-color: var(--color-sub3);
}
#event.lower main .events h2 {
  width: -moz-fit-content;
  width: fit-content;
  margin: 5rem auto;
  text-decoration: underline;
  text-decoration-color: #f99731;
  text-underline-offset: -0.2rem;
  text-decoration-thickness: 0.8rem;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #event.lower main .events h2 {
    margin: 4rem auto;
  }
}
#event.lower main .events article + article {
  margin-top: 2.4rem;
}
#event.lower main .events article a {
  display: grid;
  grid-template-columns: 10rem auto 1fr;
  gap: 0 1.6rem;
  padding: 3.2rem 3.2rem 5rem;
  background: url(/dpa/assets/images/common/decoration02.svg) #fff no-repeat 1rem 1rem/3rem auto;
  border-radius: 1.6rem;
  line-height: 1.6;
  font-size: 1.6rem;
  position: relative;
}
#event.lower main .events article a:focus {
  translate: 0.6rem 0;
}
#event.lower main .events article a:focus h1 {
  color: var(--color-main2);
}
@media (hover: hover) and (pointer: fine) {
  #event.lower main .events article a:where(:-moz-any-link, :enabled, summary, span):hover {
    translate: 0.6rem 0;
  }
  #event.lower main .events article a:where(:any-link, :enabled, summary, span):hover {
    translate: 0.6rem 0;
  }
  #event.lower main .events article a:where(:-moz-any-link, :enabled, summary, span):hover h1 {
    color: var(--color-main2);
  }
  #event.lower main .events article a:where(:any-link, :enabled, summary, span):hover h1 {
    color: var(--color-main2);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #event.lower main .events article a {
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    padding: 3.2rem 2rem 4.8rem 2.2rem;
    font-size: 1.2rem;
  }
}
#event.lower main .events article a:after {
  content: "";
  width: 2rem;
  aspect-ratio: 1;
  background: var(--color-main2);
  -webkit-mask: url(/dpa/assets/images/common/icon-arrow-black.svg) center center/contain no-repeat;
          mask: url(/dpa/assets/images/common/icon-arrow-black.svg) center center/contain no-repeat;
  position: absolute;
  right: 3.2rem;
  bottom: 1.6rem;
  pointer-events: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #event.lower main .events article a:after {
    right: 2.4rem;
  }
}
#event.lower main .events article a .location {
  display: grid;
  grid-row: 1/span 4;
  align-self: flex-start;
  border-radius: 0.8rem;
  padding-block: 0.3rem;
  background-color: var(--color-sub1);
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #event.lower main .events article a .location {
    grid-row: auto;
    align-self: center;
    min-width: 7rem;
    padding: 0.1rem 1rem;
    border-radius: 0.6rem;
    font-size: 1.2rem;
    line-height: 1.8;
  }
}
#event.lower main .events article a[href=""] {
  pointer-events: none;
}
#event.lower main .events article a[href=""]::after {
  display: none;
}
#event.lower main .events article a time {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.6rem;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #event.lower main .events article a time {
    font-size: 1.2rem;
    line-height: 2;
    text-align: left;
  }
}
#event.lower main .events article a h3 {
  font-size: 2rem;
  font-weight: bold;
  text-decoration: underline;
  text-align: justify;
  transition: color 0.2s;
  line-height: 1.4;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #event.lower main .events article a h3 {
    grid-column: span 2;
    font-size: 1.4rem;
  }
}
#event.lower main .events article a dl {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-block: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #event.lower main .events article a dl {
    gap: 0.8rem;
    margin: 0;
  }
}
#event.lower main .events article a dl dt {
  flex: 0 0 10rem;
  border: 1px solid var(--color-sub2);
  text-align: center;
  border-radius: 0.8rem;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 2.6rem;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #event.lower main .events article a dl dt {
    flex: 0 0 7rem;
    font-size: 1.2rem;
    line-height: 2;
  }
}
#event.lower main .events article a .desc {
  grid-column: 2/-1;
  text-align: justify;
  padding-left: 11.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #event.lower main .events article a .desc {
    order: 99;
    grid-column: 1/-1;
    padding-left: initial;
  }
}
#event.lower main .events article a span {
  margin-top: 1rem;
  display: block;
  font-size: 1.4rem;
}
#event.lower main .events.past {
  margin-top: 15rem;
}

#top main {
  position: relative;
  z-index: 1;
}
#top main > :where(section, nav) {
  position: relative;
  padding-right: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > :where(section, nav) {
    padding-inline: 1.5rem;
  }
}
#top main .news {
  padding: 5.5rem 0 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .news {
    padding-top: 7rem;
  }
}
#top main .news::before {
  content: "";
  position: absolute;
  top: 2.9rem;
  right: -3.2rem;
  z-index: 2;
  width: 17.2rem;
  aspect-ratio: 263/131;
  background: url(/dpa/assets/images/common/decoration03.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .news::before {
    top: 2.7rem;
    right: 0rem;
    width: 5rem;
    aspect-ratio: 50/87;
    background-image: url(/dpa/assets/images/common/decoration08.svg);
  }
}
#top main .news .inner {
  background-color: #f7f7f7;
  padding: 3.9rem 9rem 4.2rem 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .news .inner {
    padding: 3.5rem 1.5rem;
  }
}
#top main .news ul {
  display: grid;
  grid-template-columns: auto auto 1fr;
  row-gap: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .news ul {
    grid-template-columns: 1fr;
    row-gap: 1.4rem;
  }
}
#top main .news ul li:not(.link), #top main .news ul li.link a {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
  align-items: baseline;
  gap: 0.6rem 1.4rem;
  border-radius: 1rem;
  background-color: #fff;
  padding: 1rem 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .news ul li:not(.link), #top main .news ul li.link a {
    grid-template-columns: auto 1fr;
    grid-column: span 2;
    gap: 0.6rem 1rem;
    padding: 1.6rem 2rem;
  }
}
#top main .news ul li:not(.link) time, #top main .news ul li.link a time {
  font-size: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .news ul li:not(.link) time, #top main .news ul li.link a time {
    grid-column: span 1;
    white-space: nowrap;
    font-size: 1.4rem;
  }
}
#top main .news ul li:not(.link) span, #top main .news ul li.link a span {
  border-radius: 1rem;
  background-color: #fac878;
  padding-inline: 1.6rem;
  min-width: 10rem;
  text-align: center;
  font-size: 1.4rem;
  line-height: 2.6rem;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .news ul li:not(.link) span, #top main .news ul li.link a span {
    width: -moz-fit-content;
    width: fit-content;
    min-width: initial;
    padding-inline: 1.4rem;
    line-height: 2.4rem;
  }
}
#top main .news ul li:not(.link) p, #top main .news ul li.link a p {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .news ul li:not(.link) p, #top main .news ul li.link a p {
    grid-column: span 2;
    font-size: 1.4rem;
  }
}
#top main .news ul li.link {
  display: contents;
}
#top main .news ul li.link a {
  position: relative;
  padding-right: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .news ul li.link a {
    padding-right: 4rem;
  }
}
#top main .news ul li.link a p {
  transition: color 0.2s ease;
}
#top main .news ul li.link a::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 3rem;
  width: 1rem;
  aspect-ratio: 1;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg) translateY(-50%);
  transition: 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .news ul li.link a::after {
    right: 2.4rem;
  }
}
#top main .news ul li.link a:focus p {
  color: var(--color-main2);
}
#top main .news ul li.link a:focus::after {
  translate: 0.5rem 0;
  border-color: var(--color-main2);
}
@media (hover: hover) and (pointer: fine) {
  #top main .news ul li.link a:where(:-moz-any-link, :enabled, summary, span):hover p {
    color: var(--color-main2);
  }
  #top main .news ul li.link a:where(:any-link, :enabled, summary, span):hover p {
    color: var(--color-main2);
  }
  #top main .news ul li.link a:where(:-moz-any-link, :enabled, summary, span):hover::after {
    translate: 0.5rem 0;
    border-color: var(--color-main2);
  }
  #top main .news ul li.link a:where(:any-link, :enabled, summary, span):hover::after {
    translate: 0.5rem 0;
    border-color: var(--color-main2);
  }
}
#top main .recommend {
  padding-block: 6.8rem 9.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .recommend {
    padding-block: 8rem 9.5rem;
  }
}
#top main .recommend .slide-wrapper {
  position: relative;
  margin-top: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .recommend .slide-wrapper {
    margin-top: 4rem;
  }
}
#top main .recommend .slide-wrapper .common-slider {
  margin-top: initial;
}
#top main .recommend .slide-wrapper .common-slider .splide__arrow--prev {
  left: calc(50% - 27rem);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .recommend .slide-wrapper .common-slider .splide__arrow--prev {
    left: 0;
  }
}
#top main .recommend .slide-wrapper .common-slider .splide__arrow--next {
  right: calc(50% - 27rem);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .recommend .slide-wrapper .common-slider .splide__arrow--next {
    right: 0;
  }
}
#top main .recommend .slide-wrapper .common-slider .splide__track {
  width: 100%;
  margin-inline: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .recommend .slide-wrapper .common-slider .splide__track {
    width: 32rem;
  }
}
#top main .recommend .slide-wrapper .common-slider .splide__list .splide__slide {
  position: relative;
  height: 24.3rem;
  padding: 1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .recommend .slide-wrapper .common-slider .splide__list .splide__slide {
    height: 19.4rem;
    padding: 0rem 1rem 1rem;
  }
}
#top main .recommend .slide-wrapper .common-slider .splide__list .splide__slide a,
#top main .recommend .slide-wrapper .common-slider .splide__list .splide__slide button {
  display: block;
}
#top main .recommend .slide-wrapper .common-slider .splide__list .splide__slide figure {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 95%;
  box-shadow: 0 0.3rem 1rem rgba(154, 125, 87, 0.46);
  transition: transform 1s cubic-bezier(0.46, 0.36, 0, 0.99);
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .recommend .slide-wrapper .common-slider .splide__list .splide__slide figure {
    width: 94%;
  }
}
#top main .recommend .slide-wrapper .common-slider .splide__list .splide__slide figure img {
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.7s ease-in-out, opacity 0.1s 1s ease;
}
#top main .recommend .slide-wrapper .common-slider .splide__list .splide__slide.is-active {
  opacity: 1 !important;
}
#top main .recommend .slide-wrapper .common-slider .splide__list .splide__slide.is-active figure img {
  transform: translateX(0);
}
#top main .recommend .slide-wrapper .common-slider .splide__list .splide__slide.was-active {
  opacity: 1 !important;
}
#top main .recommend .slide-wrapper .common-slider .splide__list .splide__slide.was-active figure img {
  transform: translateX(-110%);
  opacity: 0;
}
#top main .recommend .slide-wrapper .common-slider .splide__list .splide__slide:not(.is-active, .was-active) {
  z-index: -1;
  opacity: 0;
}
#top main .recommend .slide-wrapper .common-slider.before, #top main .recommend .slide-wrapper .common-slider.after {
  position: absolute;
  top: 4rem;
  width: 29rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .recommend .slide-wrapper .common-slider.before, #top main .recommend .slide-wrapper .common-slider.after {
    visibility: hidden;
    opacity: 0;
    z-index: -1;
  }
}
#top main .recommend .slide-wrapper .common-slider.before figure, #top main .recommend .slide-wrapper .common-slider.after figure {
  width: calc(100% - 2rem);
}
#top main .recommend .slide-wrapper .common-slider.before {
  left: calc(50% - 58rem);
}
#top main .recommend .slide-wrapper .common-slider.after {
  right: calc(50% - 58rem);
}
#top main .recommend .slide-wrapper .common-slider.current {
  width: min(40rem, 100%);
  margin-inline: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .recommend .slide-wrapper .common-slider.current {
    aspect-ratio: 306/164;
  }
}
#top main .recommend .slide-wrapper .common-slider.current .inner {
  padding: 2rem 2rem;
  background-color: #efefef;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .recommend .slide-wrapper .common-slider.current .inner {
    padding: initial;
    background-color: initial;
  }
}
#top main .recommend .slide-wrapper .common-slider.current .splide__pagination {
  margin-top: 8.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .recommend .slide-wrapper .common-slider.current .splide__pagination {
    margin-top: 10rem;
  }
}
#top main .recommend .slide-wrapper .common-slider.current .splide__track .splide__list .splide__slide a,
#top main .recommend .slide-wrapper .common-slider.current .splide__track .splide__list .splide__slide button {
  display: block;
  width: 100%;
}
#top main .recommend .slide-wrapper .text-slider {
  position: absolute;
  top: 21rem;
  left: calc(50% - 21rem);
  width: 26rem;
  margin-inline: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .recommend .slide-wrapper .text-slider {
    top: 15rem;
    left: calc(50% - 17rem);
    width: 24rem;
  }
}
#top main .recommend .slide-wrapper .text-slider .splide__track {
  padding: 1rem;
}
#top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide a,
#top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide button {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 11rem;
  border: 1px solid #000;
  padding: 0.8rem 1.2rem;
  background-color: #fff;
  translate: 0 1rem;
  opacity: 0;
  visibility: hidden;
  transition: translate 0.7s ease, opacity 0.7s ease, visibility 0.7s ease, background-color 0.2s ease;
}
#top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide a:focus,
#top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide button:focus {
  background-color: #000;
}
#top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide a:focus span,
#top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide button:focus span {
  background-color: #fff;
  color: #000;
}
#top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide a:focus p,
#top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide button:focus p {
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide a:where(:-moz-any-link, :enabled, summary, span):hover, #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide button:where(:-moz-any-link, :enabled, summary, span):hover {
    background-color: #000;
  }
  #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide a:where(:any-link, :enabled, summary, span):hover,
  #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide button:where(:any-link, :enabled, summary, span):hover {
    background-color: #000;
  }
  #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide a:where(:-moz-any-link, :enabled, summary, span):hover span, #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide button:where(:-moz-any-link, :enabled, summary, span):hover span {
    background-color: #fff;
    color: #000;
  }
  #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide a:where(:any-link, :enabled, summary, span):hover span,
  #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide button:where(:any-link, :enabled, summary, span):hover span {
    background-color: #fff;
    color: #000;
  }
  #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide a:where(:-moz-any-link, :enabled, summary, span):hover p, #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide button:where(:-moz-any-link, :enabled, summary, span):hover p {
    color: #fff;
  }
  #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide a:where(:any-link, :enabled, summary, span):hover p,
  #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide button:where(:any-link, :enabled, summary, span):hover p {
    color: #fff;
  }
}
#top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide a span,
#top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide button span {
  width: -moz-fit-content;
  width: fit-content;
  border-radius: calc(infinity * 1px);
  padding: 0.4rem 1rem;
  background-color: #000;
  color: #fff;
  font-size: 1.2rem;
  transition: 0.2s ease;
}
#top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide a p,
#top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide button p {
  margin-top: 0.8rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  transition: 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide a p,
  #top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide button p {
    font-size: 1.4rem;
  }
}
#top main .recommend .slide-wrapper .text-slider .splide__track .splide__list .splide__slide.is-active :where(a, button) {
  translate: 0;
  opacity: 1;
  visibility: visible;
}
#top main .gallery {
  padding-block: 6.4rem 7.7rem;
  -o-border-image: linear-gradient(var(--color-sub3) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-sub3) 0 0) fill 0/0/0 100vw;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .gallery {
    padding-block: 3.5rem 3.9rem;
  }
}
#top main .gallery::after {
  content: "";
  position: absolute;
  top: -11rem;
  right: -9rem;
  z-index: 2;
  width: 18.7rem;
  aspect-ratio: 187/214;
  background: url(/dpa/assets/images/common/decoration04.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .gallery::after {
    top: -3.7rem;
    right: -1.7rem;
    width: 6.4rem;
  }
}
#top main .gallery .common-slider {
  margin-top: 6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .gallery .common-slider {
    margin-top: 4rem;
  }
}
#top main .gallery .common-slider .splide__arrow {
  top: 6.5rem;
  transform: initial;
}
#top main .gallery .common-slider .splide__list li button {
  display: block;
}
#top main .gallery .common-slider .splide__list li button figure {
  position: relative;
}
#top main .gallery .common-slider .splide__list li button figure::before {
  content: "動画を再生する";
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  border-radius: 1rem 0 0 0;
  background: var(--color-main2) url(/dpa/assets/images/top/gallery-movie-icon.svg) no-repeat center left 1.1rem/1.9rem auto;
  padding-inline: 3.7rem 0.7rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 3rem;
  transition: background-color 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .gallery .common-slider .splide__list li button figure::before {
    line-height: 3.6rem;
  }
}
#top main .gallery .common-slider .splide__list li button figure img {
  aspect-ratio: 304/171;
  -o-object-fit: cover;
     object-fit: cover;
}
#top main .gallery .common-slider .splide__list li button p {
  padding-top: 1.2rem;
  font-size: 1.6rem;
  line-height: 1.6;
}
#top main .gallery .common-slider .splide__list li button:focus figure::before {
  background-color: #fa9632;
}
@media (hover: hover) and (pointer: fine) {
  #top main .gallery .common-slider .splide__list li button:where(:-moz-any-link, :enabled, summary, span):hover figure::before {
    background-color: #fa9632;
  }
  #top main .gallery .common-slider .splide__list li button:where(:any-link, :enabled, summary, span):hover figure::before {
    background-color: #fa9632;
  }
}
#top main .gallery .common-slider .splide__pagination {
  margin-top: 4rem;
}
#top main .pickup {
  padding-block: 10rem 14.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .pickup {
    padding-block: 4rem 8.6rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .pickup::before {
    content: "";
    position: absolute;
    top: 1.3rem;
    right: -4.6rem;
    z-index: 2;
    width: 10.3rem;
    aspect-ratio: 103/52;
    background: url(/dpa/assets/images/common/decoration07.svg) no-repeat center/contain;
  }
}
#top main .pickup p {
  margin-top: 4rem;
  text-align: center;
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .pickup p {
    font-size: 1.6rem;
  }
}
#top main .pickup a {
  display: block;
  width: min(79rem, 100%);
  margin: 4rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .pickup a {
    margin-top: 4rem;
  }
}
#top main .pickup a:focus {
  filter: brightness(1.1);
}
@media (hover: hover) and (pointer: fine) {
  #top main .pickup a:where(:-moz-any-link, :enabled, summary, span):hover {
    filter: brightness(1.1);
  }
  #top main .pickup a:where(:any-link, :enabled, summary, span):hover {
    filter: brightness(1.1);
  }
}
#top main .column {
  padding-block: 6.4rem 7.7rem;
  -o-border-image: linear-gradient(#f7f7f7 0 0) 0/0/0 100vw;
     border-image: linear-gradient(#f7f7f7 0 0) fill 0/0/0 100vw;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .column {
    padding-block: 3.6rem 6.5rem;
  }
}
#top main .column::before {
  content: "";
  position: absolute;
  top: -2rem;
  right: -11.4rem;
  z-index: 2;
  width: 22.4rem;
  aspect-ratio: 224/168;
  background: url(/dpa/assets/images/common/decoration06.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .column::before {
    display: none;
  }
}
#top main .column .description {
  margin-top: 4rem;
  text-align: center;
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .column .description {
    padding-inline: 4rem;
    text-align: initial;
    font-size: 1.6rem;
  }
}
#top main .column ul {
  display: grid;
  grid-template-columns: repeat(3, 30.4rem);
  gap: 4rem 2.4rem;
  justify-content: center;
  margin-top: 6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .column ul {
    grid-template-columns: 1fr;
  }
}
#top main .column ul li a figure {
  height: 17rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .column ul li a figure {
    height: 20rem;
  }
}
#top main .column ul li a figure img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#top main .column ul li a p {
  margin-top: 1.8rem;
  text-decoration: underline;
  font-size: 1.6rem;
  line-height: 1.6;
  transition: color 0.2s ease;
}
#top main .column ul li a p::before {
  content: "";
  display: inline-block;
  width: 1.8rem;
  aspect-ratio: 1;
  margin-right: 0.4rem;
  background: url(/dpa/assets/images/common/icon-arrow03.svg) no-repeat center/100% auto;
  transform: translateY(0.3rem) rotate(-90deg);
}
#top main .column ul li a:focus p {
  color: var(--color-main2);
}
@media (hover: hover) and (pointer: fine) {
  #top main .column ul li a:where(:-moz-any-link, :enabled, summary, span):hover p {
    color: var(--color-main2);
  }
  #top main .column ul li a:where(:any-link, :enabled, summary, span):hover p {
    color: var(--color-main2);
  }
}
#top main .data {
  padding-block: 6.4rem 7.7rem;
  -o-border-image: linear-gradient(var(--color-sub3) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-sub3) 0 0) fill 0/0/0 100vw;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .data {
    padding-block: 6.8rem 7rem;
  }
}
#top main .data::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -8.5rem;
  right: -2.8rem;
  width: 17rem;
  aspect-ratio: 218/272;
  background: url(/dpa/assets/images/common/decoration05.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .data::before {
    display: none;
  }
}
#top main .data .description {
  margin-top: 3rem;
  text-align: center;
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .data .description {
    margin-top: 6.5rem;
    padding-inline: 4rem;
    text-align: initial;
    font-size: 1.6rem;
  }
}
#top main .data .description::before {
  content: "";
  display: block;
  width: 29rem;
  aspect-ratio: 290/187;
  margin: 0 auto 5rem;
  background: url(/dpa/assets/images/top/data-img.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .data .description::before {
    width: 100%;
  }
}
#top main .data a {
  display: grid;
  grid-template-columns: 2.3rem auto;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  margin-top: 5rem;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  font-size: 1.8rem;
  font-weight: 700;
}
#top main .data a:focus {
  text-decoration: initial;
  color: var(--color-main2);
}
@media (hover: hover) and (pointer: fine) {
  #top main .data a:where(:-moz-any-link, :enabled, summary, span):hover {
    text-decoration: initial;
    color: var(--color-main2);
  }
  #top main .data a:where(:any-link, :enabled, summary, span):hover {
    text-decoration: initial;
    color: var(--color-main2);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .data a {
    font-size: 2rem;
  }
}
#top main .data a::before {
  content: "";
  aspect-ratio: 1;
  background: url(/dpa/assets/images/common/icon-arrow03.svg) no-repeat center/100% auto;
  transform: rotate(-90deg);
}
#top main .efforts {
  padding-top: 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts {
    padding-top: 6.7rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    right: -8rem;
    z-index: 2;
    width: 11.5rem;
    aspect-ratio: 128/96;
    background: url(/dpa/assets/images/common/decoration06.svg) no-repeat center/contain;
  }
}
#top main .efforts .link {
  margin-top: 2.4rem;
}
#top main .efforts .link a {
  display: grid;
  grid-template-columns: 2.3rem auto;
  justify-content: flex-end;
  align-items: center;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
  text-decoration: underline;
  font-size: 2rem;
  font-weight: 700;
}
#top main .efforts .link a:focus {
  color: var(--color-main2);
}
@media (hover: hover) and (pointer: fine) {
  #top main .efforts .link a:where(:-moz-any-link, :enabled, summary, span):hover {
    color: var(--color-main2);
  }
  #top main .efforts .link a:where(:any-link, :enabled, summary, span):hover {
    color: var(--color-main2);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .link a {
    grid-template-columns: 2rem auto;
    font-size: 1.6rem;
  }
}
#top main .efforts .link a::before {
  content: "";
  aspect-ratio: 1;
  background: url(/dpa/assets/images/common/icon-arrow03.svg) no-repeat center/contain;
  transform: rotate(-90deg);
}
#top main .efforts .tab-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  -moz-column-gap: 1.3rem;
       column-gap: 1.3rem;
  height: 6.8rem;
  margin-top: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-list {
    position: relative;
    -moz-column-gap: initial;
         column-gap: initial;
    height: 6rem;
  }
}
#top main .efforts .tab-list li {
  flex: 1;
}
#top main .efforts .tab-list li :where(a, button) {
  display: grid;
  place-content: center;
  width: 100%;
  height: 6rem;
  border-radius: 1rem 1rem 0 0;
  box-shadow: inset 0 0 0.6rem rgba(0, 0, 0, 0.26);
  background-color: #fcfaf8;
  font-size: 2rem;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-list li :where(a, button) {
    height: 5.4rem;
    font-size: 1.6rem;
  }
}
#top main .efforts .tab-list li :where(a, button):focus {
  background-color: var(--color-main2);
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  #top main .efforts .tab-list li :where(a, button):where(:-moz-any-link, :enabled, summary, span):hover {
    background-color: var(--color-main2);
    color: #fff;
  }
  #top main .efforts .tab-list li :where(a, button):where(:any-link, :enabled, summary, span):hover {
    background-color: var(--color-main2);
    color: #fff;
  }
}
#top main .efforts .tab-list li :where(a, button)[aria-selected=true] {
  height: 6.8rem;
  box-shadow: initial;
  background-color: var(--color-main2);
  color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-list li :where(a, button)[aria-selected=true] {
    height: 6rem;
  }
}
#top main .efforts .tab-list li a {
  display: grid;
  grid-template-columns: 2.3rem auto;
  align-items: center;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
  text-decoration: underline;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-list li a {
    width: 30.6rem;
    border-radius: 1rem;
    grid-template-columns: 2rem auto;
  }
}
#top main .efforts .tab-list li a::before {
  content: "";
  aspect-ratio: 1;
  background: url(/dpa/assets/images/common/icon-arrow03.svg) no-repeat center/contain;
  transform: rotate(-90deg);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-list li:last-of-type {
    position: absolute;
    top: 8.8rem;
    left: 50%;
    translate: -50% 0;
    z-index: 2;
  }
}
#top main .efforts .tab-panel {
  -o-border-image: linear-gradient(var(--color-sub3) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-sub3) 0 0) fill 0/0/0 100vw;
  padding-block: 4rem 13rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel {
    padding-block: 11.9rem 8.8rem;
  }
}
#top main .efforts .tab-panel ul {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 3.8rem 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel ul {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
}
#top main .efforts .tab-panel ul li :where(a) {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  height: 100%;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 0.3rem 1rem rgba(154, 125, 87, 0.46);
  background: #fff url(/dpa/assets/images/common/decoration01.svg) no-repeat 1.6rem 1.6rem/3rem auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel ul li :where(a) {
    display: block;
    background-position: 1.8rem 1.6rem;
    background-size: 3rem auto;
  }
}
#top main .efforts .tab-panel ul li :where(a):focus {
  box-shadow: initial;
  translate: 0 0.3rem;
}
@media (hover: hover) and (pointer: fine) {
  #top main .efforts .tab-panel ul li :where(a):where(:-moz-any-link, :enabled, summary, span):hover {
    box-shadow: initial;
    translate: 0 0.3rem;
  }
  #top main .efforts .tab-panel ul li :where(a):where(:any-link, :enabled, summary, span):hover {
    box-shadow: initial;
    translate: 0 0.3rem;
  }
}
#top main .efforts .tab-panel ul li:nth-of-type(2n) a {
  background-image: url(/dpa/assets/images/common/decoration02.svg);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel .common-more-button {
    font-size: 2rem;
  }
}
#top main .efforts .tab-panel#panel-1::before {
  bottom: 88.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel#panel-1::before {
    bottom: initial;
  }
}
#top main .efforts .tab-panel#panel-1 ul li {
  display: contents;
}
#top main .efforts .tab-panel#panel-1 ul li:not(.is-hidden) {
  display: contents;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel#panel-1 ul li:not(.is-hidden) {
    display: initial;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel#panel-1 ul li.is-hidden {
    display: none;
  }
}
#top main .efforts .tab-panel#panel-1 ul li article {
  display: contents;
}
#top main .efforts .tab-panel#panel-1 ul li a {
  padding: 3.6rem 2.5rem 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel#panel-1 ul li a {
    padding: 3.6rem 2.5rem 2rem;
  }
}
#top main .efforts .tab-panel#panel-1 ul li a::after {
  content: "";
  display: block;
  width: 2rem;
  aspect-ratio: 1;
  margin: 1rem 0 0 auto;
  background: url(/dpa/assets/images/common/icon-arrow-black.svg) no-repeat center/contain;
}
#top main .efforts .tab-panel#panel-1 ul li a h3 {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  font-size: 2rem;
  line-height: 1.7;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel#panel-1 ul li a h3 {
    font-size: 1.8rem;
  }
}
#top main .efforts .tab-panel#panel-1 ul li a p {
  margin-top: 2.6rem;
  font-size: 1.6rem;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel#panel-1 ul li a p {
    margin-top: 2rem;
  }
}
#top main .efforts .tab-panel#panel-2::before {
  bottom: 6.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel#panel-2::before {
    bottom: initial;
  }
}
#top main .efforts .tab-panel#panel-2 ul {
  gap: 3rem 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel#panel-2 ul {
    row-gap: 1.2rem;
  }
}
#top main .efforts .tab-panel#panel-2 ul li a {
  display: grid;
  grid-template-columns: 1fr 2rem;
  align-items: center;
  padding: 2.4rem 2rem 2.4rem 4rem;
  text-decoration: underline;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel#panel-2 ul li a {
    grid-template-columns: 1fr 1.8rem;
    padding: 2rem 2rem 2rem 5rem;
    font-size: 1.6rem;
  }
}
#top main .efforts .tab-panel#panel-2 ul:nth-of-type(2) {
  margin-top: 3rem;
  border-top: 1px solid var(--color-main2);
  padding-top: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .efforts .tab-panel#panel-2 ul:nth-of-type(2) {
    margin-top: 2rem;
    padding-top: 2rem;
  }
}
#top main .efforts.active .tab-panel::before {
  opacity: 1;
  transform: scale(1);
}
@media screen and (min-width: 769px) {
  #top main .companies {
    padding-block: 8rem 15.8rem;
    padding-right: initial;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies {
    padding-block: 5.6rem 9.4rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies::before {
    content: "";
    position: absolute;
    top: 0rem;
    right: -7.8rem;
    z-index: 2;
    width: 12.8rem;
    aspect-ratio: 128/96;
    background: url(/dpa/assets/images/common/decoration06.svg) no-repeat center/contain;
  }
}
#top main .companies ul {
  flex-direction: column;
  justify-content: center;
  row-gap: 4rem;
  width: min(91rem, 100%);
  margin: 6.5rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul {
    row-gap: 2.6rem;
    margin-top: 4rem;
  }
}
#top main .companies ul.pc {
  display: flex;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul.pc {
    display: none;
  }
}
#top main .companies ul.sp {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul.sp {
    display: flex;
  }
}
#top main .companies ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#top main .companies ul li:nth-of-type(1) {
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li:nth-of-type(1) {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
#top main .companies ul li:nth-of-type(2) {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li:nth-of-type(2) {
    -moz-column-gap: 0rem;
         column-gap: 0rem;
  }
}
#top main .companies ul li:nth-of-type(3) {
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li:nth-of-type(3) {
    -moz-column-gap: 0.8rem;
         column-gap: 0.8rem;
  }
}
#top main .companies ul li:nth-of-type(4) {
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li:nth-of-type(4) {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
#top main .companies ul li:nth-of-type(5) {
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li:nth-of-type(5) {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
#top main .companies ul li:nth-of-type(6) {
  justify-content: initial;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li:nth-of-type(6) {
    justify-content: space-between;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li:nth-of-type(7) {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li:nth-of-type(8) {
    margin-top: -2rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li:nth-of-type(9) {
    justify-content: initial;
  }
}
#top main .companies ul li span {
  display: block;
}
#top main .companies ul li span.jispa {
  width: 29rem;
  margin-left: -0.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.jispa {
    width: 17rem;
  }
}
#top main .companies ul li span.grafsec {
  width: 26rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.grafsec {
    width: 15rem;
  }
}
#top main .companies ul li span.sia {
  width: 30rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.sia {
    width: 20rem;
  }
}
#top main .companies ul li span.smaj {
  width: 16rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.smaj {
    width: 10rem;
  }
}
#top main .companies ul li span.jtsa {
  width: 37rem;
  margin-left: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.jtsa {
    width: 18rem;
    margin-left: -0.5rem;
  }
}
#top main .companies ul li span.jcta {
  width: 41rem;
  margin-right: -1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.jcta {
    width: 18rem;
  }
}
#top main .companies ul li span.fmmc {
  width: 25rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.fmmc {
    width: 14rem;
  }
}
#top main .companies ul li span.google {
  width: 13rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.google {
    width: 7rem;
  }
}
#top main .companies ul li span.line {
  width: 15rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.line {
    width: 9rem;
  }
}
#top main .companies ul li span.meta {
  width: 20rem;
  margin-inline: -2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.meta {
    width: 11rem;
    margin-inline: -1.5rem;
  }
}
#top main .companies ul li span.tiktok {
  width: 15rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.tiktok {
    width: 9rem;
  }
}
#top main .companies ul li span.x {
  width: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.x {
    width: 2.6rem;
  }
}
#top main .companies ul li span.kddi {
  width: 13rem;
  margin-left: -0.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.kddi {
    width: 7rem;
    margin-left: -0.2rem;
  }
}
#top main .companies ul li span.docomo {
  width: 16rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.docomo {
    width: 9rem;
  }
}
#top main .companies ul li span.softbank {
  width: 19rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.softbank {
    width: 10rem;
  }
}
#top main .companies ul li span.rakuten {
  width: 22rem;
  margin-right: -1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.rakuten {
    width: 12.5rem;
  }
}
#top main .companies ul li span.gunosy {
  width: 17rem;
  margin-left: -1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.gunosy {
    width: 8.8rem;
    margin-left: initial;
  }
}
#top main .companies ul li span.studios {
  width: 25rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.studios {
    width: 13rem;
    margin-left: -0.5rem;
  }
}
#top main .companies ul li span.smartnews {
  width: 18.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.smartnews {
    width: 10rem;
  }
}
#top main .companies ul li span.microsoft {
  width: 26rem;
  margin-right: -3.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.microsoft {
    width: 14rem;
    margin-left: -1.6rem;
  }
}
#top main .companies ul li span.nihonshinbun {
  width: 19rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.nihonshinbun {
    width: 12rem;
  }
}
#top main .companies ul li span.nihonshinbun span {
  display: block;
  margin-top: 1.6rem;
  text-align: center;
  color: #676666;
  font-size: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .companies ul li span.nihonshinbun span {
    margin-top: 0.8rem;
    font-size: 1.2rem;
  }
}

#efforts.lower {
  position: relative;
  z-index: 2;
}
#efforts.lower main .page-header {
  background-color: var(--color-sub3);
}
#efforts.lower main .common-wrapper {
  padding-bottom: initial;
}
#efforts.lower main .page-nav {
  margin-top: 5.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .page-nav {
    margin-top: 4.4rem;
  }
}
#efforts.lower main .page-nav ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, max-content));
  align-items: stretch;
  gap: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .page-nav ul {
    grid-template-columns: repeat(auto-fit, minmax(15rem, auto));
    gap: 0.7rem;
  }
}
#efforts.lower main .page-nav ul li a {
  display: grid;
  grid-template-columns: 1fr 2.4rem;
  align-items: center;
  justify-content: space-between;
  min-height: 6rem;
  height: 100%;
  box-shadow: 0 0.3rem 1rem #efdfd3;
  border: 1px solid #f84e2e;
  border-radius: 1rem;
  background-color: #fff;
  padding: 1.5rem 1.8rem 1.5rem 2.4rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.33;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .page-nav ul li a {
    grid-template-columns: 1fr 2rem;
    padding-inline: 0.9rem 1.3rem;
    font-size: 1.4rem;
    line-height: 2;
  }
}
#efforts.lower main .page-nav ul li a::after {
  content: "";
  aspect-ratio: 1;
  background: url(/dpa/assets/images/common/icon-arrow03.svg) no-repeat center/contain;
}
#efforts.lower main .page-nav ul li a:focus {
  translate: 0 0.2rem;
  box-shadow: initial;
  color: var(--color-main2);
}
@media (hover: hover) and (pointer: fine) {
  #efforts.lower main .page-nav ul li a:where(:-moz-any-link, :enabled, summary, span):hover {
    translate: 0 0.2rem;
    box-shadow: initial;
    color: var(--color-main2);
  }
  #efforts.lower main .page-nav ul li a:where(:any-link, :enabled, summary, span):hover {
    translate: 0 0.2rem;
    box-shadow: initial;
    color: var(--color-main2);
  }
}
#efforts.lower main .page-nav ul li:last-of-type a::after {
  transform: rotate(-90deg);
}
#efforts.lower main .efforts {
  position: relative;
  margin-top: 6.5rem;
  padding-top: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .efforts {
    padding-top: 4rem;
  }
}
#efforts.lower main .efforts::before {
  content: "";
  position: absolute;
  top: 0;
  right: -4rem;
  z-index: -1;
  width: 100vw;
  height: 100%;
  background-color: #f7f7f7;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .efforts::before {
    right: -1.5rem;
  }
}
#efforts.lower main .efforts h2 {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  text-decoration: underline;
  text-decoration-color: #f99731;
  text-underline-offset: -0.2rem;
  text-decoration-thickness: 0.8rem;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .efforts h2 {
    margin-bottom: 4rem;
  }
}
#efforts.lower main .efforts :where(section, nav) {
  position: relative;
}
#efforts.lower main .event {
  z-index: 2;
  padding-block: 5rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .event {
    padding-block: 5rem 8.6rem;
  }
}
#efforts.lower main .event::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -5rem;
  right: -6rem;
  width: 13.3rem;
  aspect-ratio: 293/220;
  background: url(/dpa/assets/images/efforts/event-decoration.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .event::after {
    top: -1rem;
    right: -7.5rem;
    width: 11.6rem;
  }
}
#efforts.lower main .event ul {
  display: grid;
  grid-template-columns: auto 1fr 3rem;
  margin-top: 3rem;
  padding-inline: 6rem;
  max-height: 41.4rem;
  overflow-y: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .event ul {
    grid-template-columns: 1fr 2rem;
    margin-top: 2.6rem;
    padding-inline: 2rem;
  }
}
#efforts.lower main .event ul li {
  position: relative;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .event ul li {
    grid-column: span 2;
  }
}
#efforts.lower main .event ul li::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(90deg, var(--color-main) 4rem, transparent 4rem, transparent 4.5rem, #000 4.5rem);
}
#efforts.lower main .event ul li a {
  display: grid;
  grid-template-columns: subgrid;
  align-items: flex-start;
  grid-column: span 3;
  padding-block: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .event ul li a {
    grid-column: span 2;
    padding-block: 2rem;
  }
}
#efforts.lower main .event ul li a::after {
  content: "";
  grid-column: 3;
  grid-row: 1/span 2;
  align-self: center;
  aspect-ratio: 1;
  background: url(/dpa/assets/images/common/icon-arrow04.svg) no-repeat center right/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .event ul li a::after {
    grid-column: 2;
  }
}
#efforts.lower main .event ul li a[href=""] {
  pointer-events: none;
}
#efforts.lower main .event ul li a[href=""]::after {
  display: none;
}
#efforts.lower main .event ul li a .prefectures {
  border-radius: 1rem;
  padding: 0.4rem 1.6rem;
  background-color: #fac878;
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .event ul li a .prefectures {
    width: -moz-fit-content;
    width: fit-content;
    margin: initial;
    padding: 0.3rem 1.6rem;
    font-size: 1.2rem;
  }
}
#efforts.lower main .event ul li a .detail {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-inline: 2rem 6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .event ul li a .detail {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
    margin-top: 0.4rem;
    padding-inline: 0 2rem;
  }
}
#efforts.lower main .event ul li a .detail time {
  font-size: 1.4rem;
  line-height: 1.5;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .event ul li a .detail time {
    font-size: 1.4rem;
  }
}
#efforts.lower main .event ul li a .detail h3 {
  grid-column: 2;
  padding-left: 2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.8;
  transition: color 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .event ul li a .detail h3 {
    grid-row: 2;
    grid-column: span 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    padding-left: initial;
    white-space: initial;
    text-decoration: initial;
  }
}
#efforts.lower main .event ul li a .entity {
  grid-column: 1/-1;
  grid-row: 2;
  display: flex;
  align-items: baseline;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #c4c4c4;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .event ul li a .entity {
    grid-column: span 2;
    grid-row: 3;
  }
}
#efforts.lower main .event ul li a .entity .label {
  border-radius: 1rem;
  padding: 0.5rem 1.6rem;
  border: 1px solid #000;
  background-color: #fff;
  white-space: nowrap;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .event ul li a .entity .label {
    padding: 0.4rem 1rem;
  }
}
#efforts.lower main .event ul li a .entity .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.4rem;
}
#efforts.lower main .event ul li a:focus h3 {
  color: var(--color-main);
  text-decoration: initial;
}
@media (hover: hover) and (pointer: fine) {
  #efforts.lower main .event ul li a:where(:-moz-any-link, :enabled, summary, span):hover h3 {
    color: var(--color-main);
    text-decoration: initial;
  }
  #efforts.lower main .event ul li a:where(:any-link, :enabled, summary, span):hover h3 {
    color: var(--color-main);
    text-decoration: initial;
  }
}
#efforts.lower main .event > a {
  display: grid;
  grid-template-columns: 2.3rem auto;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  margin-top: 5rem;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  font-size: 1.8rem;
  font-weight: 700;
}
#efforts.lower main .event > a:focus {
  text-decoration: initial;
  color: var(--color-main2);
}
@media (hover: hover) and (pointer: fine) {
  #efforts.lower main .event > a:where(:-moz-any-link, :enabled, summary, span):hover {
    text-decoration: initial;
    color: var(--color-main2);
  }
  #efforts.lower main .event > a:where(:any-link, :enabled, summary, span):hover {
    text-decoration: initial;
    color: var(--color-main2);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .event > a {
    font-size: 2rem;
  }
}
#efforts.lower main .event > a::before {
  content: "";
  aspect-ratio: 1;
  background: url(/dpa/assets/images/common/icon-arrow03.svg) no-repeat center/100% auto;
  transform: rotate(-90deg);
}
#efforts.lower main .teaching {
  position: relative;
  z-index: 1;
  padding-top: 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching {
    padding-top: 5rem;
  }
}
#efforts.lower main .teaching .tab-list {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 9.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .tab-list {
    position: relative;
    -moz-column-gap: initial;
         column-gap: initial;
    height: 8.7rem;
  }
}
#efforts.lower main .teaching .tab-list li {
  flex: 1;
}
#efforts.lower main .teaching .tab-list li button {
  display: grid;
  place-content: center;
  width: 100%;
  height: 4.4rem;
  border-radius: 1rem 1rem 0 0;
  box-shadow: inset 0 0 0.6rem rgba(0, 0, 0, 0.26);
  background-color: #fcfaf8;
  font-size: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .tab-list li button {
    height: 5.4rem;
    font-size: 1.6rem;
  }
}
#efforts.lower main .teaching .tab-list li button:focus {
  background-color: var(--color-main2);
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  #efforts.lower main .teaching .tab-list li button:where(:-moz-any-link, :enabled, summary, span):hover {
    background-color: var(--color-main2);
    color: #fff;
  }
  #efforts.lower main .teaching .tab-list li button:where(:any-link, :enabled, summary, span):hover {
    background-color: var(--color-main2);
    color: #fff;
  }
}
#efforts.lower main .teaching .tab-list li button[aria-selected=true] {
  height: 5.4rem;
  box-shadow: initial;
  background-color: var(--color-main2);
  color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .tab-list li button[aria-selected=true] {
    height: 6rem;
  }
}
#efforts.lower main .teaching .inner {
  position: relative;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.5);
  padding-bottom: 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .inner {
    padding-bottom: 7rem;
  }
}
#efforts.lower main .teaching .tags {
  position: relative;
  z-index: 2;
  border: 1px solid #fac878;
  padding: 3rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .tags {
    padding: 1.2rem 1.2rem 2.4rem;
  }
}
#efforts.lower main .teaching .tags .filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.7rem 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .tags .filter-list {
    gap: 0.9rem 0.5rem;
  }
}
#efforts.lower main .teaching .tags .filter-list:not(:first-of-type) {
  margin-top: 2rem;
  border-top: 1px solid #fac878;
  padding-top: 2rem;
}
#efforts.lower main .teaching .tags .filter-list::after {
  content: "";
  position: absolute;
  bottom: -1.9rem;
  left: 50%;
  width: 5.2rem;
  aspect-ratio: 52/19;
  background: url(/dpa/assets/images/efforts/decoration-speech.svg) no-repeat center/contain;
  translate: -50% 0;
}
#efforts.lower main .teaching .tags .filter-list li button {
  border-radius: calc(infinity * 1px);
  border: 1px solid #000;
  padding: 1rem 1.6rem;
  background-color: #fff;
  font-size: 1.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .tags .filter-list li button {
    padding-block: 0.7rem;
    line-height: 1.37;
  }
}
#efforts.lower main .teaching .tags .filter-list li button:focus {
  border-color: #000;
  background-color: #000;
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  #efforts.lower main .teaching .tags .filter-list li button:where(:-moz-any-link, :enabled, summary, span):hover {
    border-color: #000;
    background-color: #000;
    color: #fff;
  }
  #efforts.lower main .teaching .tags .filter-list li button:where(:any-link, :enabled, summary, span):hover {
    border-color: #000;
    background-color: #000;
    color: #fff;
  }
}
#efforts.lower main .teaching .tags .filter-list li button:where([data-company=all], [data-tag=all]) {
  border-color: var(--color-main2);
  color: var(--color-main2);
}
#efforts.lower main .teaching .tags .filter-list li button[aria-selected=true] {
  border-color: #000;
  background-color: #000;
  color: #fff;
}
#efforts.lower main .teaching .result {
  overflow: hidden;
  position: relative;
  padding: 5.5rem 0.8rem 1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .result {
    padding: 3.4rem 0.8rem 1rem;
  }
}
#efforts.lower main .teaching .result ul {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .result ul {
    grid-template-columns: 1fr;
    row-gap: 3.9rem;
  }
}
#efforts.lower main .teaching .result ul li {
  display: contents;
}
#efforts.lower main .teaching .result ul li.is-hidden {
  display: none;
}
#efforts.lower main .teaching .result ul li article {
  display: contents;
}
#efforts.lower main .teaching .result ul li :where(a) {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  align-items: flex-start;
  gap: 0;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 0.3rem 1rem rgba(154, 125, 87, 0.46);
  padding: 3.6rem 2.6rem;
  background: #fff url(/dpa/assets/images/common/decoration01.svg) no-repeat 1.6rem 1.6rem/3rem auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .result ul li :where(a) {
    display: block;
    width: 100%;
    padding: 4rem 2.3rem;
    background-position: 1.8rem 1.8rem;
    background-size: 3rem auto;
  }
}
#efforts.lower main .teaching .result ul li :where(a)[href=""] {
  pointer-events: none;
}
#efforts.lower main .teaching .result ul li :where(a)[href=""] .label::after {
  display: none;
}
#efforts.lower main .teaching .result ul li :where(a) h3 {
  grid-row: 1;
  text-decoration: underline;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .result ul li :where(a) h3 {
    font-size: 1.8rem;
  }
}
#efforts.lower main .teaching .result ul li :where(a) figure {
  align-self: center;
  display: grid;
  place-items: center;
  margin-top: 2rem;
}
#efforts.lower main .teaching .result ul li :where(a) figure img {
  align-self: center;
  max-height: 19rem;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .result ul li :where(a) figure img {
    max-height: initial;
  }
}
#efforts.lower main .teaching .result ul li :where(a) .description {
  margin-top: 2.4rem;
  font-size: 1.6rem;
  line-height: 1.85;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .result ul li :where(a) .description {
    margin-top: 2rem;
  }
}
#efforts.lower main .teaching .result ul li :where(a) .label {
  grid-row: 4;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .result ul li :where(a) .label {
    margin-top: 1.8rem;
  }
}
#efforts.lower main .teaching .result ul li :where(a) .label span {
  border-radius: calc(infinity * 1px);
  background-color: #f84f2e;
  padding: 0.6rem 2.2rem;
  color: #fff;
  font-size: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .result ul li :where(a) .label span {
    padding: 0.4rem 2rem;
    font-size: 1.4rem;
  }
}
#efforts.lower main .teaching .result ul li :where(a) .company {
  grid-row: 5;
  margin-top: 1.4rem;
  font-size: 1.3rem;
  line-height: 1.8;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .result ul li :where(a) .company {
    margin-top: 1.2rem;
    font-size: 1.4rem;
  }
}
#efforts.lower main .teaching .result ul li :where(a):focus {
  box-shadow: initial;
  translate: 0 0.3rem;
}
@media (hover: hover) and (pointer: fine) {
  #efforts.lower main .teaching .result ul li :where(a):where(:-moz-any-link, :enabled, summary, span):hover {
    box-shadow: initial;
    translate: 0 0.3rem;
  }
  #efforts.lower main .teaching .result ul li :where(a):where(:any-link, :enabled, summary, span):hover {
    box-shadow: initial;
    translate: 0 0.3rem;
  }
}
#efforts.lower main .teaching .result ul li:nth-of-type(2n) a {
  background-image: url(/dpa/assets/images/common/decoration02.svg);
}
#efforts.lower main .teaching .common-more-button {
  margin-top: 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #efforts.lower main .teaching .common-more-button {
    margin-top: 5.8rem;
  }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  font-family: var(--font-biz-udp);
  width: var(--header-width);
  padding: 2rem 3.5rem 2rem 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header {
    width: 100%;
    padding: 0 0.9rem;
  }
}
.site-header > .inner {
  position: relative;
  border-radius: 3rem;
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.16);
  padding-block: 2.6rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header > .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: initial;
    background-color: initial;
    padding: 1rem 0.4rem 1rem 0rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header > .inner > .soumu-logo {
    width: 12.4rem;
    background-color: #fff;
    padding: 1rem;
  }
}
.site-header.drawer-open .soumu-logo {
  background-color: initial;
}
.site-header .drawer-button {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-button {
    position: relative;
    z-index: 2;
    display: block;
  }
  .site-header .drawer-button button {
    position: relative;
    padding: 0.6rem;
  }
  .site-header .drawer-button button .line {
    position: relative;
    display: block;
    width: 3.2rem;
    height: 0.3rem;
    background-color: #f99733;
    transition: 0.3s ease;
  }
  .site-header .drawer-button button .line::before, .site-header .drawer-button button .line::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.3rem;
    background-color: #f99733;
    transition: 0.3s ease;
  }
  .site-header .drawer-button button .line::before {
    top: -1rem;
  }
  .site-header .drawer-button button .line::after {
    top: 1rem;
  }
  .site-header .drawer-button button[aria-expanded=true] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    border-radius: calc(infinity * 1px);
    padding: 0.8rem 1.2rem;
    background-color: #484646;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
  }
  .site-header .drawer-button button[aria-expanded=true]::before {
    content: "CLOSE";
  }
  .site-header .drawer-button button[aria-expanded=true] .line {
    background-color: transparent;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-button button[aria-expanded=true] .line {
    width: 1.8rem;
    height: 0.2rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-button button[aria-expanded=true] .line::before, .site-header .drawer-button button[aria-expanded=true] .line::after {
    top: 0;
    background-color: #fff;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-button button[aria-expanded=true] .line::before, .site-header .drawer-button button[aria-expanded=true] .line::after {
    height: 0.2rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-button button[aria-expanded=true] .line::before {
    transform: rotate(45deg);
  }
  .site-header .drawer-button button[aria-expanded=true] .line::after {
    transform: rotate(-45deg);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100lvh;
    overflow: auto;
    background-color: #f9f1e7;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s ease-out;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu[data-expanded=true] {
    visibility: visible;
    opacity: 1;
    padding: 1.1rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav {
    box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.16);
    border-radius: 3rem;
    background-color: #fff;
    padding: 6.5rem 0 5rem;
  }
}
.site-header .drawer-menu nav .dpa-logo {
  display: block;
  width: 22.6rem;
  margin-inline: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .dpa-logo {
    width: 27.7rem;
  }
}
.site-header .drawer-menu nav .menu-list {
  display: grid;
  padding-block: 1rem 2rem;
  border-bottom: 1px solid #e6e6e6;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list {
    flex-direction: column;
    align-items: initial;
    padding-block: 2.5rem 0;
  }
}
.site-header .drawer-menu nav .menu-list > li:not(:first-of-type)::before {
  content: "";
  display: block;
  width: calc(100% - 5.4rem);
  margin-left: 2.7rem;
  height: 1px;
  background-color: #e6e6e6;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list > li:not(:first-of-type)::before {
    width: calc(100% - 3rem);
    margin-left: 1.5rem;
  }
}
.site-header .drawer-menu nav .menu-list > li > :where(a, span) {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  padding: 1.8rem 2rem;
  font-size: 1.6rem;
  line-height: 1.4;
}
.site-header .drawer-menu nav .menu-list > li > :where(a, span):focus {
  color: var(--color-main);
}
@media (hover: hover) and (pointer: fine) {
  .site-header .drawer-menu nav .menu-list > li > :where(a, span):where(:-moz-any-link, :enabled, summary, span):hover {
    color: var(--color-main);
  }
  .site-header .drawer-menu nav .menu-list > li > :where(a, span):where(:any-link, :enabled, summary, span):hover {
    color: var(--color-main);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list > li > :where(a, span) {
    padding: 1.6rem 2.8rem;
  }
}
.site-header .drawer-menu nav .menu-list > li > :where(a, span)[aria-current=page]::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #f9f1e7;
}
.site-header .drawer-menu nav .menu-list > li > :where(a, span)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3rem;
  width: 0.8rem;
  aspect-ratio: 1;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  translate: 0 -50%;
  transform: rotate(45deg);
  transition: 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list > li > :where(a, span)::after {
    right: 2.4rem;
  }
}
.site-header .drawer-menu nav .menu-list > li > :where(a, span).efforts {
  grid-template-columns: 2.6rem 1fr;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
  align-items: center;
}
.site-header .drawer-menu nav .menu-list > li > :where(a, span).efforts::before {
  content: "";
  aspect-ratio: 209/150;
  background: url(/dpa/assets/images/common/icon-logo.svg) no-repeat center/contain;
}
.site-header .drawer-menu nav .menu-list > li.summary span:focus {
  background-color: #f9f1e7;
  color: initial;
}
@media (hover: hover) and (pointer: fine) {
  .site-header .drawer-menu nav .menu-list > li.summary span:where(:-moz-any-link, :enabled, summary, span):hover {
    background-color: #f9f1e7;
    color: initial;
  }
  .site-header .drawer-menu nav .menu-list > li.summary span:where(:any-link, :enabled, summary, span):hover {
    background-color: #f9f1e7;
    color: initial;
  }
}
.site-header .drawer-menu nav .menu-list > li.summary span::after {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list > li.summary span::after {
    display: block;
    transform: rotate(135deg);
  }
}
@media screen and (min-width: 769px) {
  .site-header .drawer-menu nav .menu-list > li.summary .detail {
    position: absolute;
    top: 0;
    left: calc(100% - 2.5rem);
    z-index: -1;
    translate: -2rem 0;
    width: 32rem;
    opacity: 0;
    height: 100%;
    border-radius: 0 3rem 3rem 0;
    background-color: #f9f1e7;
    visibility: hidden;
    transition: 0.2s ease;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list > li.summary .detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-in-out;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list > li.summary .detail .inner {
    overflow: hidden;
  }
}
.site-header .drawer-menu nav .menu-list > li.summary .detail ul {
  display: grid;
  grid-template-columns: 1fr;
}
.site-header .drawer-menu nav .menu-list > li.summary .detail ul li a {
  position: relative;
  display: block;
  font-size: 1.5rem;
  line-height: 1.4;
}
.site-header .drawer-menu nav .menu-list > li.summary .detail ul li a:focus {
  color: var(--color-main);
}
.site-header .drawer-menu nav .menu-list > li.summary .detail ul li a:focus::before {
  border-color: var(--color-main);
}
@media (hover: hover) and (pointer: fine) {
  .site-header .drawer-menu nav .menu-list > li.summary .detail ul li a:where(:-moz-any-link, :enabled, summary, span):hover {
    color: var(--color-main);
  }
  .site-header .drawer-menu nav .menu-list > li.summary .detail ul li a:where(:any-link, :enabled, summary, span):hover {
    color: var(--color-main);
  }
  .site-header .drawer-menu nav .menu-list > li.summary .detail ul li a:where(:-moz-any-link, :enabled, summary, span):hover::before {
    border-color: var(--color-main);
  }
  .site-header .drawer-menu nav .menu-list > li.summary .detail ul li a:where(:any-link, :enabled, summary, span):hover::before {
    border-color: var(--color-main);
  }
}
@media screen and (min-width: 769px) {
  .site-header .drawer-menu nav .menu-list > li.summary .detail.list {
    padding: 7rem 2.1rem 7rem 5rem;
  }
}
.site-header .drawer-menu nav .menu-list > li.summary .detail.list ul {
  row-gap: 2.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list > li.summary .detail.list ul {
    row-gap: 0.6rem;
    padding: 2rem 1.5rem;
  }
}
.site-header .drawer-menu nav .menu-list > li.summary .detail.list ul li a:focus::before {
  border-color: var(--color-main);
}
@media (hover: hover) and (pointer: fine) {
  .site-header .drawer-menu nav .menu-list > li.summary .detail.list ul li a:where(:-moz-any-link, :enabled, summary, span):hover::before {
    border-color: var(--color-main);
  }
  .site-header .drawer-menu nav .menu-list > li.summary .detail.list ul li a:where(:any-link, :enabled, summary, span):hover::before {
    border-color: var(--color-main);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list > li.summary .detail.list ul li a {
    border-radius: 1rem;
    padding: 2rem 2.4rem;
    background-color: #f7f7f7;
  }
}
.site-header .drawer-menu nav .menu-list > li.summary .detail.list ul li a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  width: 0.8rem;
  aspect-ratio: 1;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: translateY(-50%) rotate(45deg);
  transition: 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list > li.summary .detail.list ul li a::before {
    right: 1.2rem;
  }
}
@media screen and (min-width: 769px) {
  .site-header .drawer-menu nav .menu-list > li.summary .detail.column {
    padding: 2rem 4rem 2rem 5rem;
  }
}
.site-header .drawer-menu nav .menu-list > li.summary .detail.column ul {
  row-gap: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list > li.summary .detail.column ul {
    row-gap: 4.5rem;
    padding: 3rem 2.8rem 6.6rem;
  }
}
.site-header .drawer-menu nav .menu-list > li.summary .detail.column ul li a figure img {
  display: block;
  width: 12.2rem;
  margin-inline: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list > li.summary .detail.column ul li a figure img {
    width: 21rem;
  }
}
.site-header .drawer-menu nav .menu-list > li.summary .detail.column ul li a figure figcaption {
  margin-top: 1.6rem;
  text-decoration: underline;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list > li.summary .detail.column ul li a figure figcaption {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 769px) and (any-hover: hover) {
  .site-header .drawer-menu nav .menu-list > li.summary:hover .detail, .site-header .drawer-menu nav .menu-list > li.summary:focus-within .detail {
    opacity: 1;
    visibility: visible;
    translate: 0;
    z-index: -1;
  }
}
@media screen and (min-width: 769px) {
  .site-header .drawer-menu nav .menu-list > li.summary.is-open .detail {
    opacity: 1;
    visibility: visible;
    translate: 0;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu nav .menu-list > li.summary.is-open > span {
    color: var(--color-main2);
  }
  .site-header .drawer-menu nav .menu-list > li.summary.is-open > span::after {
    transform: rotate(-45deg);
  }
  .site-header .drawer-menu nav .menu-list > li.summary.is-open .detail {
    grid-template-rows: 1fr;
  }
}
.site-header .drawer-menu .soumu-logo {
  display: block;
  width: 13rem;
  margin: 2.3rem auto 0;
}
.site-header .drawer-menu .soumu-logo:focus {
  opacity: 0.8;
}
@media (hover: hover) and (pointer: fine) {
  .site-header .drawer-menu .soumu-logo:where(:-moz-any-link, :enabled, summary, span):hover {
    opacity: 0.8;
  }
  .site-header .drawer-menu .soumu-logo:where(:any-link, :enabled, summary, span):hover {
    opacity: 0.8;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header .drawer-menu .soumu-logo {
    position: initial;
    display: block;
    width: 16rem;
    margin-top: 4.5rem;
  }
}

.site-footer {
  grid-column: span 2;
  grid-row: 2;
  position: relative;
}
.site-footer .contact {
  padding: 8.1rem 2.5rem 5.5rem;
  text-align: center;
  background-color: #f7f7f7;
}
.site-footer .contact a {
  display: block;
  width: min(68rem, 100%);
  margin-inline: auto;
  border-radius: 1rem;
  background: #ff4e2e url(/dpa/assets/images/common/icon-external-link-white.svg) no-repeat center right 13.4rem/2.4rem;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 8rem;
}
.site-footer .contact a:focus {
  opacity: 0.8;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer .contact a:where(:-moz-any-link, :enabled, summary, span):hover {
    opacity: 0.8;
  }
  .site-footer .contact a:where(:any-link, :enabled, summary, span):hover {
    opacity: 0.8;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer .contact a {
    background-position: top 2.5rem right 2.7rem;
    box-shadow: 0.2rem 0.6rem 0.6rem rgba(224, 48, 6, 0.26);
    border-radius: 2rem;
    font-size: 2.4rem;
  }
}
.site-footer .contact span {
  display: block;
  margin-top: 1.8rem;
  font-size: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer .contact span {
    margin-top: 2.6rem;
  }
}
.site-footer .copy {
  display: block;
  background-color: var(--color-main);
  padding-block: 2rem;
  text-align: center;
  font-family: var(--font-biz-ud);
  font-size: 1.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer .copy {
    padding-block: 1.6rem;
    font-size: 0.9rem;
  }
}
.site-footer .fixed-banner {
  position: fixed;
  right: 2rem;
  bottom: 10rem;
  z-index: 4;
  width: 32rem;
  transition: 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer .fixed-banner {
    width: 22rem;
  }
}
.site-footer .fixed-banner.is-hide {
  visibility: hidden;
  opacity: 0;
}
.site-footer .fixed-banner button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-content: center;
  background-color: #000;
  border-radius: 50%;
  cursor: pointer;
  width: 2rem;
  aspect-ratio: 1;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
}
.site-footer .fixed-banner button:focus {
  opacity: 0.8;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer .fixed-banner button:where(:-moz-any-link, :enabled, summary, span):hover {
    opacity: 0.8;
  }
  .site-footer .fixed-banner button:where(:any-link, :enabled, summary, span):hover {
    opacity: 0.8;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer .fixed-banner button {
    top: 0.3rem;
    right: 0.4rem;
    width: 1.5rem;
    font-size: 1.2rem;
  }
}
.site-footer .fixed-banner a:focus {
  filter: brightness(1.2);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer .fixed-banner a:where(:-moz-any-link, :enabled, summary, span):hover {
    filter: brightness(1.2);
  }
  .site-footer .fixed-banner a:where(:any-link, :enabled, summary, span):hover {
    filter: brightness(1.2);
  }
}
.site-footer .page-top {
  position: fixed;
  right: 7.5rem;
  bottom: 3.3rem;
  z-index: 3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer .page-top {
    right: 2.5rem;
    bottom: 3.1rem;
  }
}
.site-footer .page-top a {
  display: grid;
  place-content: center;
  border-radius: calc(infinity * 1px);
  border: 0.2rem solid var(--color-main);
  background-color: #454545;
  z-index: 3;
  box-shadow: 0.2rem 0.6rem 0.6rem rgba(224, 48, 6, 0.26);
  width: 5.5rem;
  aspect-ratio: 1;
}
.site-footer .page-top a:focus {
  background-color: var(--color-main);
  transform: scale(1.2);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer .page-top a:where(:-moz-any-link, :enabled, summary, span):hover {
    background-color: var(--color-main);
    transform: scale(1.2);
  }
  .site-footer .page-top a:where(:any-link, :enabled, summary, span):hover {
    background-color: var(--color-main);
    transform: scale(1.2);
  }
}
.site-footer .page-top a::before {
  content: "";
  width: 1.1rem;
  aspect-ratio: 11/6;
  background: url(/dpa/assets/images/common/icon-arrow02-white.svg) no-repeat center/contain;
}

/*# sourceMappingURL=styles.css.map*/