@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

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

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

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 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 */
}

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

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

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -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: 1em; /* 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;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 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;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 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 odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * 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. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* 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;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/**************************************************/
/* helpers */
/**************************************************/
@media (max-width: 1059px) {
  ._view-cw-high {
    display: none !important;
  }
}
@media (min-width: 1060px) {
  ._view-cw-low {
    display: none !important;
  }
}
@media (max-width: 1279px) {
  ._view-xl-high {
    display: none !important;
  }
}
@media (min-width: 1280px) {
  ._view-xl-low {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  ._view-lg-high {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  ._view-lg-low {
    display: none !important;
  }
}
@media (max-width: 767px) {
  ._view-md-high {
    display: none !important;
  }
}
@media (min-width: 768px) {
  ._view-md-low {
    display: none !important;
  }
}
@media (max-width: 599px) {
  ._view-sm-high {
    display: none !important;
  }
}
@media (min-width: 600px) {
  ._view-sm-low {
    display: none !important;
  }
}
._clearfix {
  zoom: 1;
}
._clearfix:after {
  content: "";
  display: block;
  clear: both;
  overflow: auto;
}

._center {
  text-align: center !important;
}

._left {
  text-align: left !important;
}

._right {
  text-align: right !important;
}

._float-l {
  float: left !important;
}

._float-r {
  float: right !important;
}

._clear {
  clear: both !important;
}

._hidden {
  display: none !important;
}

._disp-ib {
  display: inline-block !important;
}

._margin0 {
  margin: 0 !important;
}

._padding0 {
  padding: 0 !important;
}

._border0 {
  border: none !important;
}

._fixed {
  position: fixed !important;
}

._absolute {
  position: absolute !important;
}

._static {
  position: static !important;
}

._xsmall {
  font-size: 75% !important;
}

._small {
  font-size: 88% !important;
}

._large {
  font-size: 113% !important;
}

._xlarge {
  font-size: 133% !important;
}

._nowrap {
  white-space: nowrap !important;
}

._nobg {
  background: none !important;
}

._full {
  width: 100% !important;
}

/**************************************************/
/* base */
/**************************************************/
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}
@media (min-width: 768px) and (max-width: 1024px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media (max-width: 767px) {
  html {
    font-size: 4.2666666667vw;
  }
}

body {
  font-family: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ Pro", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  color: #333333;
  background-color: #F6F6F6;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .site-container {
    padding-bottom: 3.75rem;
    box-sizing: border-box;
  }
}
.site-container.-loading {
  opacity: 0;
  visibility: hidden;
}

textarea {
  overflow: auto; /* Internet Explorer 11+ */
  resize: vertical; /* Specify textarea resizability */
}

input,
textarea,
select,
button {
  font-family: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ Pro", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

button,
input[type=button],
input[type=submit],
input[type=reset] {
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  text-decoration: underline;
}
a:hover, a:active {
  outline-width: 0; /* Remove the outline when hovering in all browsers */
}
a:hover img {
  transition: opacity 0.15s ease-out;
  opacity: 0.7;
}

p, h1, h2, h3, h4, h5, h6, dl, dt, dd, figure {
  margin: 0;
}

ol, ul {
  margin: 0;
  padding: 0;
}

iframe {
  border-style: none;
}

::selection {
  background: rgba(0, 170, 245, 0.3);
}

@font-face {
  font-family: "Oswald Medium";
  src: url("../fonts/Oswald/Oswald-Medium.eot");
  src: url("../fonts/Oswald/Oswald-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Oswald/Oswald-Medium.woff2") format("woff2"), url("../fonts/Oswald/Oswald-Medium.woff") format("woff"), url("../fonts/Oswald/Oswald-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald Semi Bold";
  src: url("../fonts/Oswald/Oswald-SemiBold.eot");
  src: url("../fonts/Oswald/Oswald-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Oswald/Oswald-SemiBold.woff2") format("woff2"), url("../fonts/Oswald/Oswald-SemiBold.woff") format("woff"), url("../fonts/Oswald/Oswald-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Bold";
  src: url("../fonts/Roboto/Roboto-Bold.eot");
  src: url("../fonts/Roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto/Roboto-Bold.woff") format("woff"), url("../fonts/Roboto/Roboto-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Black";
  src: url("../fonts/Roboto/Roboto-Black.eot");
  src: url("../fonts/Roboto/Roboto-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto/Roboto-Black.woff2") format("woff2"), url("../fonts/Roboto/Roboto-Black.woff") format("woff"), url("../fonts/Roboto/Roboto-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Medium";
  src: url("../fonts/Roboto/Roboto-Medium.eot");
  src: url("../fonts/Roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto/Roboto-Medium.woff2") format("woff2"), url("../fonts/Roboto/Roboto-Medium.woff") format("woff"), url("../fonts/Roboto/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
.site-header > .inner {
  padding: 1.25rem 0;
  max-width: 79.25rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  box-sizing: border-box;
}
@media (max-width: 1440px) {
  .site-header > .inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (max-width: 1280px) {
  .site-header > .inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (max-width: 767px) {
  .site-header > .inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.site-header .logo {
  width: 15.25rem;
  margin: 0;
}
@media (max-width: 767px) {
  .site-header .logo {
    width: 9.25rem;
  }
}
.site-header .global-nav {
  padding-bottom: 0.9375rem;
}
@media (max-width: 767px) {
  .site-header .global-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    background: #ffffff;
    width: 100%;
    padding-bottom: 0;
    box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.1);
  }
}
.site-header .global-nav > .desktop {
  display: flex;
  list-style: none;
}
@media (max-width: 767px) {
  .site-header .global-nav > .desktop {
    display: none;
  }
}
.site-header .global-nav > .desktop li {
  line-height: 1;
}
.site-header .global-nav > .desktop li:not(:last-child) {
  border-right: 1px solid #333333;
}
.site-header .global-nav > .desktop li:last-child a {
  padding-right: 0;
}
.site-header .global-nav > .desktop a {
  text-decoration: none;
  font-weight: bold;
  font-size: 1.375rem;
  color: #333333;
  display: block;
  padding: 0 1.25rem;
  transition: all 0.2s;
}
.site-header .global-nav > .desktop a.-active, .site-header .global-nav > .desktop a:hover {
  color: #787878;
}
.site-header .global-nav > .desktop a.-external {
  position: relative;
  padding-right: 3.125rem;
}
.site-header .global-nav > .desktop a.-external::after {
  position: absolute;
  right: 1.375rem;
  top: 50%;
  margin-top: -0.375rem;
  transition: all 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='prefix__レイヤー_1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 22 22' xml:space='preserve'%3E%3Cstyle%3E.prefix__st1%7Bfill:none;stroke:%23333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round%7D%3C/style%3E%3Cpath fill='none' d='M-13-13h48v48h-48z'/%3E%3Cpath class='prefix__st1' d='M12 1h9v9M19 15v6H1V3h6M9 13L20 2'/%3E%3C/svg%3E");
  background-size: contain;
  width: 1rem;
  height: 1rem;
  content: "";
}
.site-header .global-nav > .desktop a.-external:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='prefix__レイヤー_1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 22 22' xml:space='preserve'%3E%3Cstyle%3E.prefix__st1%7Bfill:none;stroke:%23787878;stroke-width:2;stroke-linecap:round;stroke-linejoin:round%7D%3C/style%3E%3Cpath fill='none' d='M-13-13h48v48h-48z'/%3E%3Cpath class='prefix__st1' d='M12 1h9v9M19 15v6H1V3h6M9 13L20 2'/%3E%3C/svg%3E");
}
@media (max-width: 1279px) {
  .site-header .global-nav > .desktop a {
    font-size: 1.125rem;
    padding: 0 1.125rem;
  }
}
.site-header .global-nav > .mobile {
  display: flex;
  list-style: none;
}
@media (min-width: 768px) {
  .site-header .global-nav > .mobile {
    display: none;
  }
}
.site-header .global-nav > .mobile li {
  width: 20%;
}
.site-header .global-nav > .mobile li:nth-child(2) a.-active svg path, .site-header .global-nav > .mobile li:nth-child(3) a.-active svg g, .site-header .global-nav > .mobile li:nth-child(4) a.-active svg g {
  stroke: #00e0df;
}
.site-header .global-nav > .mobile li:nth-child(1) a.-active svg path, .site-header .global-nav > .mobile li:nth-child(5) a.-active svg g {
  fill: #00e0df;
}
.site-header .global-nav > .mobile a {
  text-decoration: none;
  color: #333333;
  display: block;
  font-size: 0.625rem;
  font-weight: bold;
  text-align: center;
  padding: 0.3125rem 0;
}
.site-header .global-nav > .mobile a > span {
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header .global-nav > .mobile a.-active {
  color: #00e0df;
}

.site-footer {
  background: #00E0DF;
  color: #ffffff;
  padding-bottom: 1.5625rem;
}
.site-footer .contact {
  text-align: center;
  font-size: 1.25rem;
  padding: 2.1875rem 0;
}
@media (max-width: 767px) {
  .site-footer .contact {
    font-size: 1rem;
  }
}
.site-footer .contact .title {
  display: block;
  margin-bottom: 0.9375rem;
}
.site-footer .logo {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 2.1875rem 0 1.375rem;
}
.site-footer .logo li {
  margin: 0 1.125rem;
}
.site-footer .copyright {
  font-size: 0.875rem;
  text-align: center;
}
@media (max-width: 767px) {
  .site-footer .copyright {
    font-size: 0.625rem;
  }
}

.article-card-a {
  background: #ffffff;
  border-radius: 0 2.5rem;
  box-shadow: 0 0.625rem 1.25rem 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  min-height: 19.125rem;
}
@media (max-width: 767px) {
  .article-card-a {
    min-height: 0;
  }
}
.article-card-a:not(:last-of-type) {
  margin-bottom: 3.625rem;
}
.article-card-a > a {
  display: flex;
  text-decoration: none;
  color: #333333;
}
@media (max-width: 767px) {
  .article-card-a > a {
    flex-wrap: wrap;
  }
}
.article-card-a .image {
  width: 17rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .article-card-a .image {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .article-card-a .image > img {
    width: 100%;
  }
}
.article-card-a .content {
  padding: 0.625rem 1.875rem;
  flex-grow: 1;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 767px) {
  .article-card-a .content {
    padding: 1.25rem 1.25rem 1.875rem;
  }
}
.article-card-a .content .lead {
  font-size: 1.75rem;
  line-height: 1.7;
  margin-bottom: 0.625rem;
}
@media (max-width: 767px) {
  .article-card-a .content .lead {
    font-size: 1.25rem;
  }
}
.article-card-a .content .name {
  font-size: 1.375rem;
}
@media (max-width: 767px) {
  .article-card-a .content .name {
    font-size: 1rem;
  }
}
@media (max-width: 767px) {
  .article-card-a .content .name > span {
    display: block;
    font-size: 0.875rem;
  }
}
.article-card-a .content .meta {
  font-size: 1.6875rem;
  font-weight: bold;
  border-top: 1px solid #cccccc;
  margin-top: 1.5625rem;
  line-height: 1;
  padding-top: 1.25rem;
}
@media (max-width: 767px) {
  .article-card-a .content .meta {
    font-size: 1.25rem;
    padding-top: 0.9375rem;
    margin-top: 0.9375rem;
  }
}
.article-card-a .content .meta .date {
  font-family: "Oswald Medium";
  font-size: 4.125rem;
  color: #00C0C5;
  display: inline-block;
  vertical-align: -1px;
  margin-right: 1.25rem;
}
@media (max-width: 767px) {
  .article-card-a .content .meta .date {
    font-size: 2.0625rem;
    margin-right: 0;
    margin-bottom: 0.625rem;
    display: block;
  }
}

.article-list-b {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  list-style: none;
  max-width: 65.625rem;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.article-list-b > .item {
  width: 48.0952380952%;
  background: #ffffff;
}
@media (max-width: 767px) {
  .article-list-b > .item {
    width: 100%;
  }
}
.article-list-b > .item > a {
  color: inherit;
  text-decoration: none;
}
.article-list-b > .item .image img {
  width: 100%;
}
.article-list-b > .item .body {
  padding: 1.5625rem 1.875rem;
}
@media (max-width: 767px) {
  .article-list-b > .item .body {
    padding: 1.25rem;
  }
}
.article-list-b > .item .body .title {
  font-size: 1.125rem;
  margin-bottom: 0.625rem;
}
@media (max-width: 767px) {
  .article-list-b > .item .body .title {
    font-size: 0.9375rem;
  }
}
.article-list-b > .item .body .title > span {
  font-size: 1.625rem;
  display: block;
}
@media (max-width: 767px) {
  .article-list-b > .item .body .title > span {
    font-size: 1.5rem;
  }
}
.article-list-b > .item .body p {
  font-size: 1rem;
  line-height: 1.7;
}
@media (max-width: 767px) {
  .article-list-b > .item .body p {
    font-size: 0.875rem;
  }
}

.article-list-c {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  list-style: none;
  margin: 2.375rem 0;
}
@media (max-width: 767px) {
  .article-list-c {
    flex-wrap: wrap;
    margin: 1.25rem 0;
  }
}

.btn-a {
  display: inline-block;
  text-decoration: none;
  min-width: 18.75rem;
  box-sizing: border-box;
  color: #5580FF;
  font-size: 1.375rem;
  border-radius: 1.875rem;
  padding: 0.75rem 0.9375rem;
  text-align: center;
  border: 0;
  line-height: 1.6;
  background: linear-gradient(90deg, #72ffca 0%, #ffff87 100%);
  transition: 0.25s;
}
.btn-a:hover {
  animation: pulse-72ffca 0.8s;
  box-shadow: 0 0 0 0.6em transparent;
}
@keyframes pulse-72ffca {
  0% {
    box-shadow: 0 0 0 0 #72ffca;
  }
}
@media (max-width: 767px) {
  .btn-a {
    font-size: 1rem;
    min-width: 13.75rem;
  }
}

.btn-b {
  display: inline-block;
  text-decoration: none;
  min-width: 18.75rem;
  box-sizing: border-box;
  padding: 0.625rem 0.9375rem;
  border: 0.125rem solid #5580FF;
  border-radius: 1.875rem;
  color: #5580FF;
  font-size: 1.375rem;
  font-weight: 500;
  text-align: center;
  transition: 0.25s;
  position: relative;
}
.btn-b:hover {
  animation: pulse-5580FF 0.8s;
  box-shadow: 0 0 0 0.6em transparent;
}
@keyframes pulse-5580FF {
  0% {
    box-shadow: 0 0 0 0 #5580FF;
  }
}
@media (max-width: 767px) {
  .btn-b {
    font-size: 1rem;
    min-width: 15.625rem;
    padding: 0.625rem;
  }
}
.btn-b::after {
  position: absolute;
  right: 1.375rem;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 0.125rem solid #5580FF;
  border-bottom: 0.125rem solid #5580FF;
  transform: rotate(-45deg) translateY(-50%);
  content: "";
}
@media (max-width: 767px) {
  .btn-b::after {
    width: 0.5rem;
    height: 0.5rem;
  }
}

.btn-c {
  display: inline-block;
  text-decoration: none;
  min-width: 18.75rem;
  box-sizing: border-box;
  border-radius: 1.875rem;
  color: #5580FF;
  background: linear-gradient(90deg, #1580ff 0%, #06c6ff 100%);
  background-clip: padding-box;
  font-size: 1.375rem;
  font-weight: 500;
  text-align: center;
  transition: all 0.15s;
  position: relative;
  z-index: 1;
  padding: 0.75rem 1.0625rem;
  line-height: 1.6;
  border: 0;
}
@media (max-width: 767px) {
  .btn-c {
    min-width: 15.625rem;
    font-size: 1.125rem;
    padding: 0.625rem;
  }
}
.btn-c::after {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  background: #ffffff;
  width: calc(100% - 0.25rem);
  height: calc(100% - 0.25rem);
  border-radius: 1.875rem;
  z-index: -1;
  content: "";
}
.btn-c:hover {
  color: #0078D4;
  background: linear-gradient(90deg, #0144ca 0%, #06ccff 100%);
}

[data-animate^=fade] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 1.5s;
}

[data-animate^=fade].-animated {
  opacity: 1;
  transform: translate(0);
}

[data-animate=fade-left] {
  transform: translate3d(-50px, 0, 0);
}

[data-animate=fade-right] {
  transform: translate3d(50px, 0, 0);
}

[data-animate=fade-up] {
  transform: translate3d(0, 50px, 0);
}

[data-animate=fade-down] {
  transform: translate3d(0, -50px, 0);
}

[data-animate=fade-blur] {
  filter: blur(10px);
  transition-property: filter, opacity;
  transition-duration: 1.6s;
  transition-timing-function: ease;
}

[data-animate=fade-blur].-animated {
  filter: blur(0);
}

[data-animate-delay="0"] {
  transition-delay: 0ms;
}

[data-animate-delay="50"] {
  transition-delay: 50ms;
}

[data-animate-delay="100"] {
  transition-delay: 100ms;
}

[data-animate-delay="150"] {
  transition-delay: 150ms;
}

[data-animate-delay="200"] {
  transition-delay: 200ms;
}

[data-animate-delay="250"] {
  transition-delay: 250ms;
}

[data-animate-delay="300"] {
  transition-delay: 300ms;
}

[data-animate-delay="350"] {
  transition-delay: 350ms;
}

[data-animate-delay="400"] {
  transition-delay: 400ms;
}

[data-animate-delay="450"] {
  transition-delay: 450ms;
}

[data-animate-delay="500"] {
  transition-delay: 500ms;
}

[data-animate-delay="550"] {
  transition-delay: 550ms;
}

[data-animate-delay="600"] {
  transition-delay: 600ms;
}

[data-animate-delay="650"] {
  transition-delay: 650ms;
}

[data-animate-delay="700"] {
  transition-delay: 700ms;
}

[data-animate-delay="750"] {
  transition-delay: 750ms;
}

[data-animate-delay="800"] {
  transition-delay: 800ms;
}

[data-animate-delay="850"] {
  transition-delay: 850ms;
}

[data-animate-delay="900"] {
  transition-delay: 900ms;
}

[data-animate-delay="950"] {
  transition-delay: 950ms;
}

[data-animate-delay="1000"] {
  transition-delay: 1000ms;
}

[data-animate-delay="1050"] {
  transition-delay: 1050ms;
}

[data-animate-delay="1100"] {
  transition-delay: 1100ms;
}

[data-animate-delay="1150"] {
  transition-delay: 1150ms;
}

[data-animate-delay="1200"] {
  transition-delay: 1200ms;
}

[data-animate-delay="1250"] {
  transition-delay: 1250ms;
}

[data-animate-delay="1300"] {
  transition-delay: 1300ms;
}

[data-animate-delay="1350"] {
  transition-delay: 1350ms;
}

[data-animate-delay="1400"] {
  transition-delay: 1400ms;
}

[data-animate-delay="1450"] {
  transition-delay: 1450ms;
}

[data-animate-delay="1500"] {
  transition-delay: 1500ms;
}

[data-animate-delay="1550"] {
  transition-delay: 1550ms;
}

[data-animate-delay="1600"] {
  transition-delay: 1600ms;
}

[data-animate-delay="1650"] {
  transition-delay: 1650ms;
}

[data-animate-delay="1700"] {
  transition-delay: 1700ms;
}

[data-animate-delay="1750"] {
  transition-delay: 1750ms;
}

[data-animate-delay="1800"] {
  transition-delay: 1800ms;
}

[data-animate-delay="1850"] {
  transition-delay: 1850ms;
}

[data-animate-delay="1900"] {
  transition-delay: 1900ms;
}

[data-animate-delay="1950"] {
  transition-delay: 1950ms;
}

[data-animate-delay="2000"] {
  transition-delay: 2000ms;
}

[data-animate-delay="2050"] {
  transition-delay: 2050ms;
}

[data-animate-delay="2100"] {
  transition-delay: 2100ms;
}

[data-animate-delay="2150"] {
  transition-delay: 2150ms;
}

[data-animate-delay="2200"] {
  transition-delay: 2200ms;
}

[data-animate-delay="2250"] {
  transition-delay: 2250ms;
}

[data-animate-delay="2300"] {
  transition-delay: 2300ms;
}

[data-animate-delay="2350"] {
  transition-delay: 2350ms;
}

[data-animate-delay="2400"] {
  transition-delay: 2400ms;
}

[data-animate-delay="2450"] {
  transition-delay: 2450ms;
}

[data-animate-delay="2500"] {
  transition-delay: 2500ms;
}

[data-animate-delay="2550"] {
  transition-delay: 2550ms;
}

[data-animate-delay="2600"] {
  transition-delay: 2600ms;
}

[data-animate-delay="2650"] {
  transition-delay: 2650ms;
}

[data-animate-delay="2700"] {
  transition-delay: 2700ms;
}

[data-animate-delay="2750"] {
  transition-delay: 2750ms;
}

[data-animate-delay="2800"] {
  transition-delay: 2800ms;
}

[data-animate-delay="2850"] {
  transition-delay: 2850ms;
}

[data-animate-delay="2900"] {
  transition-delay: 2900ms;
}

[data-animate-delay="2950"] {
  transition-delay: 2950ms;
}

[data-animate-delay="3000"] {
  transition-delay: 3000ms;
}

[data-animate-delay="3050"] {
  transition-delay: 3050ms;
}

[data-animate-delay="3100"] {
  transition-delay: 3100ms;
}

[data-animate-delay="3150"] {
  transition-delay: 3150ms;
}

[data-animate-delay="3200"] {
  transition-delay: 3200ms;
}

[data-animate-delay="3250"] {
  transition-delay: 3250ms;
}

[data-animate-delay="3300"] {
  transition-delay: 3300ms;
}

[data-animate-delay="3350"] {
  transition-delay: 3350ms;
}

[data-animate-delay="3400"] {
  transition-delay: 3400ms;
}

[data-animate-delay="3450"] {
  transition-delay: 3450ms;
}

[data-animate-delay="3500"] {
  transition-delay: 3500ms;
}

[data-animate-delay="3550"] {
  transition-delay: 3550ms;
}

[data-animate-delay="3600"] {
  transition-delay: 3600ms;
}

[data-animate-delay="3650"] {
  transition-delay: 3650ms;
}

[data-animate-delay="3700"] {
  transition-delay: 3700ms;
}

[data-animate-delay="3750"] {
  transition-delay: 3750ms;
}

[data-animate-delay="3800"] {
  transition-delay: 3800ms;
}

[data-animate-delay="3850"] {
  transition-delay: 3850ms;
}

[data-animate-delay="3900"] {
  transition-delay: 3900ms;
}

[data-animate-delay="3950"] {
  transition-delay: 3950ms;
}

[data-animate-delay="4000"] {
  transition-delay: 4000ms;
}

[data-animate-delay="4050"] {
  transition-delay: 4050ms;
}

[data-animate-delay="4100"] {
  transition-delay: 4100ms;
}

[data-animate-delay="4150"] {
  transition-delay: 4150ms;
}

[data-animate-delay="4200"] {
  transition-delay: 4200ms;
}

[data-animate-delay="4250"] {
  transition-delay: 4250ms;
}

[data-animate-delay="4300"] {
  transition-delay: 4300ms;
}

[data-animate-delay="4350"] {
  transition-delay: 4350ms;
}

[data-animate-delay="4400"] {
  transition-delay: 4400ms;
}

[data-animate-delay="4450"] {
  transition-delay: 4450ms;
}

[data-animate-delay="4500"] {
  transition-delay: 4500ms;
}

[data-animate-delay="4550"] {
  transition-delay: 4550ms;
}

[data-animate-delay="4600"] {
  transition-delay: 4600ms;
}

[data-animate-delay="4650"] {
  transition-delay: 4650ms;
}

[data-animate-delay="4700"] {
  transition-delay: 4700ms;
}

[data-animate-delay="4750"] {
  transition-delay: 4750ms;
}

[data-animate-delay="4800"] {
  transition-delay: 4800ms;
}

[data-animate-delay="4850"] {
  transition-delay: 4850ms;
}

[data-animate-delay="4900"] {
  transition-delay: 4900ms;
}

[data-animate-delay="4950"] {
  transition-delay: 4950ms;
}

/**************************************************/
/* components */
/**************************************************/
.pg-top .site-container {
  overflow-x: hidden;
}
.pg-top .site-container.-hide-scrollbar {
  overflow: auto;
  height: 100vh;
}
.pg-top .overlay-container {
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
}
.pg-top .overlay-container [data-slide] {
  position: relative;
}
.pg-top .overlay-container [data-slide] .before, .pg-top .overlay-container [data-slide] .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(1, 1);
  content: "";
}
.pg-top .overlay-container [data-slide=left] .before, .pg-top .overlay-container [data-slide=left] .after {
  transform-origin: right top;
}
.pg-top .overlay-container [data-slide=left] .before {
  z-index: 1;
  background: #333;
}
.pg-top .overlay-container [data-slide=left] .after {
  z-index: 2;
  background: #ffffff;
}
.pg-top .overlay-container [data-animate-slide=left].-animated .before, .pg-top .overlay-container [data-animate-slide=left].-animated .after {
  transform: scale(0, 1);
}
.pg-top .overlay-container [data-fade=blur] {
  filter: blur(10px);
  opacity: 0;
  transition: 1s;
}
.pg-top .overlay-container > .inner {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .pg-top .overlay-container > .inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.pg-top .overlay-container > .inner > .wrapper {
  width: 100%;
  height: 33.5625rem;
}
@media (max-width: 767px) {
  .pg-top .overlay-container > .inner > .wrapper {
    height: 18.4375rem;
  }
}
.pg-top .overlay-container .text {
  overflow: hidden;
}
.pg-top .overlay-container .text > span {
  display: inline-block;
}
@media (max-width: 767px) {
  .pg-top .overlay-container .-t1 {
    width: 10rem;
  }
}
.pg-top .overlay-container .-t1 > span {
  transition-delay: 200ms;
}
.pg-top .overlay-container .-t2 {
  display: inline-block;
  margin: 1.25rem 0 4.0625rem;
}
@media (max-width: 767px) {
  .pg-top .overlay-container .-t2 {
    width: 12.5rem;
    margin: 0.9375rem 0 1.875rem;
  }
}
.pg-top .overlay-container .-t2 > span::before {
  transition-delay: 1.5s;
}
.pg-top .overlay-container .-t2 > span::after {
  transition-delay: 1.3s;
}
.pg-top .overlay-container .-t3 {
  margin-bottom: 3rem;
}
@media (max-width: 767px) {
  .pg-top .overlay-container .-t3 {
    width: 11.25rem;
    margin: 0 auto 1.875rem;
  }
}
@media (max-width: 767px) {
  .pg-top .overlay-container .-t4 {
    width: 15.625rem;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 767px) {
  .pg-top .overlay-container .-t5 {
    width: 16.25rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.pg-top .overlay-container .logo {
  margin: 5rem 0 3.75rem;
}
@media (max-width: 767px) {
  .pg-top .overlay-container .logo {
    margin: 2.5rem auto 1.25rem;
    width: 13.125rem;
  }
}
.pg-top .overlay-container .skip {
  position: absolute;
  right: 2.5rem;
  bottom: 2.5rem;
  cursor: pointer;
}
@media (max-width: 767px) {
  .pg-top .overlay-container .skip {
    right: 1.25rem;
    bottom: 1.25rem;
    width: 4.375rem;
  }
}
.pg-top .overlay-container .group.-center {
  text-align: center;
}

.top-mv {
  max-width: 79.25rem;
  margin-left: auto;
  margin-right: auto;
  padding: 5.1875rem 2.5rem 7.5rem;
  position: relative;
}
@media (max-width: 767px) {
  .top-mv {
    padding: 2.8125rem 1.25rem 3.75rem;
  }
}
.top-mv .heading {
  width: 32.6875rem;
}
@media (max-width: 767px) {
  .top-mv .heading {
    width: 16rem;
    margin-bottom: 20rem;
  }
}
.top-mv .content {
  font-size: 1.25rem;
  line-height: 2;
  padding-top: 3.9375rem;
}
@media (max-width: 767px) {
  .top-mv .content {
    font-size: 1rem;
    padding-top: 3.125rem;
  }
}
.top-mv .content p {
  margin-bottom: 2em;
}
.top-mv .content > *:last-child {
  margin-bottom: 0;
}
.top-mv .triangle {
  position: absolute;
  z-index: -1;
  transform: rotate(1deg);
  animation: swaying 4s ease-in-out infinite alternate;
}
@keyframes swaying {
  50% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(1deg);
  }
}
.top-mv .triangle > svg {
  width: 100%;
  height: auto;
}
.top-mv .triangle.-one {
  top: 5rem;
  right: -11.875rem;
  z-index: -1;
  width: 48.5625rem;
  height: 37.0625rem;
}
@media (max-width: 767px) {
  .top-mv .triangle.-one {
    width: 22.5rem;
    height: 17.125rem;
    right: auto;
    top: 13.125rem;
    left: 1.875rem;
  }
}
.top-mv .triangle.-two {
  top: -5.625rem;
  right: -7.5rem;
  z-index: -2;
  animation-delay: -1s;
  width: 49.0625rem;
  height: 40.125rem;
}
@media (max-width: 767px) {
  .top-mv .triangle.-two {
    right: auto;
    top: 8rem;
    left: 0.75rem;
    width: 22.8125rem;
    height: 18.6875rem;
  }
}

.top-article-list {
  padding: 0 0 8.25rem;
  position: relative;
}
@media (max-width: 767px) {
  .top-article-list {
    padding: 4.25rem 0 1.875rem;
  }
}
@media (max-width: 1279px) {
  .top-article-list > .inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 768px) {
  .top-article-list > .inner {
    max-width: 79.25rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: flex-end;
  }
}
@media (max-width: 767px) {
  .top-article-list > .inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.top-article-list .top-article-card {
  margin-left: 3.875rem;
}
@media (max-width: 767px) {
  .top-article-list .top-article-card {
    margin-left: 0;
    margin-bottom: 3.75rem;
  }
}
.top-article-list .top-article-card:nth-child(2) .heading {
  text-align: right;
  padding-left: 0;
  padding-right: 0.9375rem;
}
.top-article-list .line {
  position: absolute;
  z-index: -1;
  top: 28%;
}
.top-article-list .line.-x {
  left: 0;
  width: calc(100% - (100% - 79.25rem) / 2 - 12.8125rem);
  height: 0.5rem;
}
@media (max-width: 767px) {
  .top-article-list .line.-x {
    display: none;
  }
}
.top-article-list .line.-y {
  left: calc(100% - (100% - 79.25rem) / 2 - 13.125rem);
  width: 0.5rem;
  height: 100%;
}
@media (max-width: 767px) {
  .top-article-list .line.-y {
    display: none;
  }
}
.top-article-list .line.-sp {
  top: 0;
  width: 20.25rem;
  height: 95.4375rem;
}
@media (min-width: 768px) {
  .top-article-list .line.-sp {
    display: none;
  }
}

.top-article-card {
  display: flex;
}
@media (max-width: 767px) {
  .top-article-card {
    flex-wrap: wrap;
  }
}
.top-article-card > .heading {
  padding-right: 1.75rem;
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
@media (max-width: 767px) {
  .top-article-card > .heading {
    padding-right: 0;
    padding-left: 0.9375rem;
    margin-bottom: 0.9375rem;
    width: 100%;
  }
}
.top-article-card > .link {
  width: 29.875rem;
  background: #ffffff;
  text-decoration: none;
  border-radius: 0 2.5rem;
  overflow: hidden;
  box-shadow: 0 0.625rem 1.25rem 0 rgba(0, 0, 0, 0.1);
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
@media (max-width: 767px) {
  .top-article-card > .link {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .top-article-card > .link:hover .poster img {
    opacity: 1;
  }
}
@media (min-width: 768px) {
  .top-article-card > .link:hover .poster .image img {
    transform: scale(1.15);
  }
}
.top-article-card .poster {
  position: relative;
}
.top-article-card .poster .image {
  overflow: hidden;
  width: 100%;
}
.top-article-card .poster .image img {
  transition: transform 0.3s;
  display: block;
}
.top-article-card .poster .title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top-article-card .content {
  color: #333333;
  font-size: 1.125rem;
  line-height: 2;
  padding: 1.625rem 1.625rem 2.1875rem;
}
@media (max-width: 767px) {
  .top-article-card .content {
    font-size: 1rem;
  }
}
.top-article-card .content .title {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
@media (max-width: 767px) {
  .top-article-card .content .title {
    font-size: 1rem;
  }
}
.top-article-card .content .title > span {
  display: block;
  font-size: 1.875rem;
}
@media (max-width: 767px) {
  .top-article-card .content .title > span {
    font-size: 1.25rem;
  }
}

.top-webinner {
  padding-bottom: 9.0625rem;
}
@media (max-width: 767px) {
  .top-webinner {
    padding-bottom: 3.625rem;
  }
}
.top-webinner .heading {
  max-width: 79.25rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem;
  padding: 0 2.5rem;
}
@media (max-width: 767px) {
  .top-webinner .heading {
    width: 18.125rem;
    margin-left: 1.25rem;
    margin-right: 0;
  }
}
.top-webinner .cover {
  height: 60rem;
  background: url("../../top/images/img-webinner-cover.png") center center no-repeat;
  background-size: cover;
}
@media (max-width: 1680px) {
  .top-webinner .cover {
    height: 56rem;
  }
}
@media (max-width: 1440px) {
  .top-webinner .cover {
    height: 44rem;
  }
}
@media (max-width: 1279px) {
  .top-webinner .cover {
    height: 32rem;
  }
}
@media (max-width: 767px) {
  .top-webinner .cover {
    height: 12rem;
  }
}
.top-webinner > .inner {
  max-width: 79.25rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4.125rem;
  padding-right: 6.75rem;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  position: relative;
}
@media (max-width: 767px) {
  .top-webinner > .inner {
    padding: 1.875rem 1.25rem;
  }
}
.top-webinner > .inner > .wrapper {
  width: 58.5rem;
}
.top-webinner .line {
  position: absolute;
  z-index: -1;
}
.top-webinner .line.-x {
  top: 32.6%;
  left: 0.125rem;
  height: 0.5rem;
  width: 20.625rem;
}
@media (max-width: 767px) {
  .top-webinner .line.-x {
    display: none;
  }
}
.top-webinner .line.-y {
  top: 0;
  left: 0;
  width: 0.5rem;
  height: 33%;
}
@media (max-width: 767px) {
  .top-webinner .line.-y {
    display: none;
  }
}
.top-webinner .line.-sp {
  top: 0;
  left: 3.125rem;
  height: 152.6875rem;
  width: 0.25rem;
}
@media (min-width: 768px) {
  .top-webinner .line.-sp {
    display: none;
  }
}
.top-webinner .text {
  font-size: 1.25rem;
  line-height: 2;
  margin-bottom: 4.25rem;
}
@media (max-width: 767px) {
  .top-webinner .text {
    font-size: 1rem;
    padding-left: 2.8125rem;
  }
}
.top-webinner .list {
  position: relative;
}
.top-webinner .list .line.-y {
  height: 100%;
  left: 6.375rem;
}
.top-webinner .media-inner {
  max-width: 79.25rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4.125rem;
  box-sizing: border-box;
  text-align: center;
}
@media (max-width: 767px) {
  .top-webinner .media-inner {
    padding: 0 1.25rem;
  }
}
.top-webinner .media-heading {
  font-size: 1.875rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 767px) {
  .top-webinner .media-heading {
    font-size: 1.375rem;
    margin-bottom: 0.625rem;
  }
}
.top-webinner .media-logo > .logo {
  display: inline-block;
}
.top-webinner .media-logo > .logo.-forum {
  width: 20rem;
}
.top-webinner .media-logo > .logo > img {
  width: 100%;
}
@media (max-width: 767px) {
  .top-webinner .media-logo > .logo.-forum {
    width: 10.9375rem;
  }
}

.top-goals {
  position: relative;
  overflow: hidden;
}
.top-goals::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: "";
}
@media (min-width: 768px) {
  .top-goals::before {
    background: linear-gradient(to bottom right, #a0c3ff 50%, transparent 50%);
    width: calc(100% - (100% - 79.25rem) / 2);
    height: 60.5%;
  }
}
@media (max-width: 767px) {
  .top-goals::before {
    border-style: solid;
    border-width: 25.875rem 22.125rem 0 0;
    border-color: #a0c3ff transparent transparent transparent;
  }
}
.top-goals::after {
  position: absolute;
  z-index: -2;
  top: 11.23%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00E0DF;
  content: "";
}
@media (max-width: 767px) {
  .top-goals::after {
    top: 5.3125rem;
  }
}
.top-goals > .inner {
  max-width: 79.25rem;
  margin-left: auto;
  margin-right: auto;
  padding: 8.75rem 6.75rem 5.75rem;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .top-goals > .inner {
    padding: 3.75rem 1.25rem;
  }
}
.top-goals .heading {
  margin-bottom: 5.25rem;
}
@media (max-width: 767px) {
  .top-goals .heading {
    width: 13.3125rem;
    margin-bottom: 3.4375rem;
  }
}
.top-goals .section:not(:last-of-type) {
  margin-bottom: 10.25rem;
}
@media (max-width: 767px) {
  .top-goals .section:not(:last-of-type) {
    margin-bottom: 5rem;
  }
}
.top-goals .section > .title {
  margin-bottom: 4.5rem;
  transform: translate3d(-80px, 0, 0);
}
@media (max-width: 767px) {
  .top-goals .section > .title {
    margin-bottom: 1.25rem;
  }
}
.top-goals .section > .title.-right {
  transform: translate3d(80px, 0, 0);
}
@media (min-width: 768px) {
  .top-goals .section > .title.-right {
    text-align: right;
  }
}
.top-goals .section > .title.-animated {
  transform: translate(0);
}
.top-goals .section .text {
  font-size: 1.25rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .top-goals .section .text {
    font-size: 1rem;
  }
}
.top-goals .section .text > p {
  margin-bottom: 2em;
}
@media (max-width: 767px) {
  .top-goals .section .text br {
    display: none;
  }
}
.top-goals .section > *:last-child {
  margin-bottom: 0;
}
.top-goals .goals-card {
  background: #ffffff;
  box-shadow: 0 0.625rem 1.25rem 0 rgba(0, 0, 0, 0.1);
  border-radius: 0 2.5rem;
  overflow: hidden;
}
.top-goals .goals-card:not(:last-of-type) {
  margin-bottom: 3.4375rem;
}
.top-goals .goals-card .link {
  text-decoration: none;
  color: inherit;
  display: flex;
}
@media (max-width: 767px) {
  .top-goals .goals-card .link {
    flex-wrap: wrap;
  }
}
.top-goals .goals-card .image {
  width: 29rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .top-goals .goals-card .image {
    width: 100%;
  }
}
.top-goals .goals-card .image img {
  width: 100%;
}
.top-goals .goals-card .body {
  padding: 0.625rem 2rem;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 767px) {
  .top-goals .goals-card .body {
    padding: 1.25rem 1.25rem 1.5625rem;
  }
}
.top-goals .goals-card .body .title {
  font-size: 1.5rem;
  margin-bottom: 0.9375rem;
}
@media (max-width: 767px) {
  .top-goals .goals-card .body .title {
    font-size: 1rem;
  }
}
.top-goals .goals-card .body .title > span {
  font-size: 1.875rem;
  display: block;
}
@media (max-width: 767px) {
  .top-goals .goals-card .body .title > span {
    font-size: 1.25rem;
  }
}
.top-goals .goals-card .body p {
  font-size: 1.125rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .top-goals .goals-card .body p {
    font-size: 1rem;
  }
}
.top-goals .goals-card.-close .close-text {
  font-size: 1.875rem;
  display: block;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  min-width: 100%;
  text-align: center;
  padding-inline: 0.625rem;
  box-sizing: border-box;
  font-weight: 700;
}
.top-goals .goals-card.-close .link {
  position: relative;
}
.top-goals .goals-card.-close .link:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
@media (max-width: 767px) {
  .top-goals .goals-card.-close .close-text {
    font-size: 1.25rem;
  }
}

.top-contents {
  background: #6093FF;
  padding: 8.75rem 1.25rem 2.5rem;
}
@media (max-width: 767px) {
  .top-contents {
    padding: 3.75rem 1.25rem 1.375rem;
  }
}
.top-contents .heading {
  text-align: center;
  color: #ffffff;
  font-size: 2.25rem;
  margin-bottom: 3.125rem;
}
@media (max-width: 767px) {
  .top-contents .heading {
    font-size: 1.25rem;
    width: 20.625rem;
    margin: 0 auto 2.375rem;
    line-height: 1.2;
  }
}
.top-contents .heading > img {
  margin: 0 auto -2.3125rem;
  display: block;
  pointer-events: none;
}
@media (max-width: 767px) {
  .top-contents .heading > img {
    margin-bottom: -0.875rem;
  }
}
@media (min-width: 768px) {
  .top-contents .heading br {
    display: none;
  }
}
.top-contents .text {
  font-size: 1.25rem;
  line-height: 1.9;
  color: #ffffff;
  text-align: center;
}
@media (max-width: 767px) {
  .top-contents .text {
    font-size: 1rem;
    text-align: left;
  }
}
.top-contents .article-list-b {
  margin-top: 5.125rem;
}
@media (max-width: 767px) {
  .top-contents .article-list-b {
    margin-top: 3.4375rem;
  }
}

@media (min-width: 768px) {
  .pg-chonology .section-intro {
    contain: paint;
  }
}
.pg-chonology .section-intro > .inner {
  max-width: 81rem;
  margin-left: auto;
  margin-right: auto;
  padding: 4.75rem 1.25rem 9.375rem;
  position: relative;
}
@media (max-width: 767px) {
  .pg-chonology .section-intro > .inner {
    padding: 0.625rem 1.25rem 2.8125rem;
    display: flex;
    flex-direction: column;
  }
}
.pg-chonology .section-intro > .inner::after {
  display: block;
  background: url("../../chronology/images/intro-illust.svg") no-repeat;
  width: 54.0625rem;
  height: 38.375rem;
  background-size: contain;
  content: "";
}
@media (min-width: 768px) {
  .pg-chonology .section-intro > .inner::after {
    position: absolute;
    top: 0.1875rem;
    right: -1.125rem;
  }
}
@media (max-width: 767px) {
  .pg-chonology .section-intro > .inner::after {
    width: calc(100% + 1.875rem);
    height: 0;
    padding-top: 77.1%;
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
    margin-top: -0.5rem;
    order: 1;
  }
}
.pg-chonology .section-intro .leading {
  pointer-events: none;
}
@media (max-width: 767px) {
  .pg-chonology .section-intro .leading {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
.pg-chonology .section-intro .heading {
  margin: -2.6875rem 0 1.75rem;
  position: relative;
  z-index: 1;
  padding-left: 0.5rem;
}
@media (max-width: 767px) {
  .pg-chonology .section-intro .heading {
    width: 10.125rem;
    margin: -0.875rem 0 0;
    padding-left: 0;
  }
}
.pg-chonology .section-intro .text {
  font-size: 1.25rem;
  line-height: 1.95;
  color: #00C0C5;
  font-weight: bold;
  position: relative;
  z-index: 1;
  padding-left: 0.5rem;
}
@media (max-width: 767px) {
  .pg-chonology .section-intro .text {
    font-size: 1rem;
    padding-left: 0;
    margin-top: 1.375rem;
    order: 2;
  }
}
@media (max-width: 767px) {
  .pg-chonology .section-intro .text br {
    display: none;
  }
}
.pg-chonology .section-history {
  contain: paint;
}
.pg-chonology .section-history > .inner {
  position: relative;
}
.pg-chonology .section-history.-half {
  height: 187.5rem;
}
.pg-chonology .section-history > .readmore {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  padding-bottom: 7.5rem;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 65%, transparent);
  z-index: 30;
}
.pg-chonology .timeline-menu {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #82B0FF;
  display: -ms-grid;
  display: grid;
  place-content: center;
}
.pg-chonology .timeline-menu .list {
  display: flex;
  list-style: none;
  overflow-x: auto;
  padding: 0.25rem 0.625rem;
  color: #ffffff;
}
.pg-chonology .timeline-menu .list .item {
  padding: 0 1.875rem;
}
@media (max-width: 767px) {
  .pg-chonology .timeline-menu .list .item {
    padding: 0 1.0625rem;
  }
}
.pg-chonology .timeline-menu .list a {
  font-family: "Oswald Semi Bold";
  color: inherit;
  text-decoration: none;
  font-size: 2.1875rem;
  opacity: 0.5;
  transition: opacity 0.15s;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .pg-chonology .timeline-menu .list a {
    font-size: 1.125rem;
  }
}
.pg-chonology .timeline-menu .list a.-active {
  opacity: 1;
}
.pg-chonology .history-chart {
  background: #ffffff;
}
.pg-chonology .history-chart .chart-header {
  padding: 1.875rem 0;
  background: #ffffff;
  box-shadow: 0 0.625rem 1.25rem 0 rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 4rem;
  z-index: 10;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .chart-header {
    padding: 0.9375rem 0;
    top: 2.25rem;
  }
}
.pg-chonology .history-chart .chart-header > .inner {
  display: flex;
  max-width: 81rem;
  margin-left: auto;
  margin-right: auto;
}
.pg-chonology .history-chart .chart-header .year {
  width: 32%;
  flex-shrink: 0;
  color: #00C0C5;
  font-family: "Oswald Medium";
  font-size: 5rem;
  line-height: 1;
  text-align: right;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .chart-header .year {
    display: none;
  }
}
.pg-chonology .history-chart .chart-header .content {
  font-size: 1rem;
  flex-grow: 1;
  padding: 1.25rem 10% 1.25rem 2.1875rem;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .chart-header .content {
    padding: 0 1.25rem;
  }
}
.pg-chonology .history-chart .chart-header .content h2 {
  font-weight: bold;
  font-size: 1.625rem;
  color: #00C0C5;
  margin-bottom: 0.75rem;
  display: table;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .chart-header .content h2 {
    font-size: 1.125rem;
    margin-bottom: 0;
  }
}
.pg-chonology .history-chart .chart-header .content p {
  line-height: 1.75;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .chart-header .content p {
    display: none;
  }
}
.pg-chonology .history-chart .event-detail {
  box-shadow: 0 0.625rem 1.25rem 0 rgba(0, 0, 0, 0.1);
  position: relative;
  background: #ffffff;
  z-index: 1;
}
.pg-chonology .history-chart .event-detail > .inner {
  box-sizing: border-box;
  max-width: 81rem;
  margin-left: auto;
  margin-right: auto;
}
.pg-chonology .history-chart .event-detail .event-content {
  padding-left: calc(32% + 2.1875rem);
  padding-top: 3.625rem;
  padding-bottom: 3.625rem;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .event-detail .event-content {
    padding: 1.5625rem 1.25rem;
  }
}
.pg-chonology .history-chart .event-detail .event-content h2 {
  font-size: 1.625rem;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .event-detail .event-content h2 {
    font-size: 1.125rem;
  }
}
.pg-chonology .history-chart .event-detail .event-content h2::before {
  display: none;
}
.pg-chonology .history-chart .event-detail .event-content p {
  font-size: 1.125rem;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .event-detail .event-content p {
    font-size: 0.875rem;
  }
}
.pg-chonology .history-chart .chart-body {
  padding: 3.125rem 0;
  position: relative;
  z-index: 1;
  background-image: linear-gradient(45deg, #ffffff 25%, #FBFBFB 25%, #FBFBFB 50%, #ffffff 50%, #ffffff 75%, #FBFBFB 75%, #FBFBFB 100%);
  background-size: 180vw 180vw;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .chart-body {
    padding: 1.5625rem 1.25rem;
  }
}
.pg-chonology .history-chart .chart-body > .inner {
  position: relative;
  max-width: 81rem;
  margin-left: auto;
  margin-right: auto;
}
.pg-chonology .history-chart .chart-body .meta {
  position: absolute;
  left: 0;
  top: 0;
  color: #DCE9EF;
  font-family: "Oswald Medium";
  line-height: 1;
  font-size: 8.125rem;
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  white-space: nowrap;
  height: 100%;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .chart-body .meta {
    font-size: 4.6875rem;
    right: 0;
    left: auto;
    z-index: -1;
  }
}
.pg-chonology .history-chart .chart-body .meta > span {
  position: sticky;
  top: 0;
}
.pg-chonology .history-chart .chart-body .list > .item {
  display: flex;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .chart-body .list > .item {
    display: block;
    flex-wrap: wrap;
  }
}
.pg-chonology .history-chart .chart-body .list > .item:not(:last-child) {
  margin-bottom: 4.0625rem;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .chart-body .list > .item:not(:last-child) {
    margin-bottom: 2.1875rem;
  }
}
.pg-chonology .history-chart .chart-body .list > .item.-last {
  margin-bottom: 6.25rem;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .chart-body .list > .item.-last {
    margin-bottom: 3.125rem;
  }
}
.pg-chonology .history-chart .chart-body .year {
  width: 32%;
  flex-shrink: 0;
  color: #00C0C5;
  font-family: "Oswald Medium";
  font-size: 3.125rem;
  line-height: 1;
  text-align: right;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .chart-body .year {
    font-size: 2.375rem;
    width: 100%;
    text-align: left;
    margin-bottom: 0.9375rem;
  }
}
.pg-chonology .history-chart .chart-body .last {
  position: relative;
  left: 24%;
  padding-top: 2.5rem;
  font-size: 3.125rem;
  font-family: "Roboto Bold";
  line-height: 1;
  color: #00C0C5;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .chart-body .last {
    left: auto;
    font-size: 2.375rem;
    text-align: center;
    width: 100%;
  }
}
.pg-chonology .history-chart .chart-body .last::before {
  position: absolute;
  top: 0;
  left: 1.875rem;
  border-style: solid;
  border-width: 2rem 1.4375rem 0 1.4375rem;
  border-color: #00C0C5 transparent transparent transparent;
  content: "";
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .chart-body .last::before {
    left: 50%;
    margin-left: -1.4375rem;
  }
}
.pg-chonology .history-chart .event-content {
  font-size: 1rem;
  flex-grow: 1;
  padding: 0.625rem 9% 0.625rem 2.1875rem;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .event-content {
    padding: 0;
  }
}
.pg-chonology .history-chart .event-content h2 {
  font-weight: bold;
  font-size: 1.375rem;
  color: #00C0C5;
  margin-bottom: 0.75rem;
  display: table;
}
.pg-chonology .history-chart .event-content h2::before {
  display: table-cell;
  font-size: 70%;
  padding-right: 0.3125rem;
  position: relative;
  top: -0.1875rem;
  content: "▶";
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .event-content h2 {
    font-size: 1.125rem;
    margin-bottom: 0.3125rem;
  }
}
.pg-chonology .history-chart .event-content mark {
  background: linear-gradient(to right, transparent 50%, #F1FF6D 50%);
  background-size: 200% 35%;
  background-repeat: repeat-x;
  background-position: 0 100%;
  color: inherit;
  transition: background-position 0.8s;
}
.pg-chonology .history-chart .event-content mark.-animated {
  background-position: -100% 100%;
}
.pg-chonology .history-chart .event-content p {
  line-height: 1.75;
  margin-bottom: 1.5em;
  font-size: 1rem;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .event-content p {
    font-size: 0.875rem;
  }
}
.pg-chonology .history-chart .event-content figure figcaption {
  margin-top: 0.625rem;
  font-size: 0.875rem;
}
.pg-chonology .history-chart .event-content a {
  color: #333333;
  word-break: break-all;
}
.pg-chonology .history-chart .event-content a:hover {
  text-decoration: none;
}
.pg-chonology .history-chart .event-content .tag {
  display: inline-block;
  padding: 0.1875rem 0.375rem 0.3125rem;
  font-size: 1rem;
  margin-left: 1.25rem;
  color: #ffffff;
  background: #6093FF;
  vertical-align: 2px;
  line-height: 1;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .event-content .tag {
    font-size: 0.75rem;
    margin-left: 0.9375rem;
    padding: 0.1875rem 0.375rem 0.25rem;
  }
}
.pg-chonology .history-chart .event-content .tag.programming {
  background: #FF79C8;
}
.pg-chonology .history-chart .event-content .tag.os {
  background: #00CADD;
}
.pg-chonology .history-chart .event-content .tag.browser {
  background: #6093FF;
}
.pg-chonology .history-chart .event-content .tag.search {
  background: #FF566D;
}
.pg-chonology .history-chart .event-content .tag.markup {
  background: #FF6BC8;
}
.pg-chonology .history-chart .event-content .tag.soft {
  background: #75CE00;
}
.pg-chonology .history-chart .event-content .tag.develop {
  background: #A25DD0;
}
.pg-chonology .history-chart .event-content .tag.design {
  background: #FF8408;
}
.pg-chonology .history-chart .event-content .tag.kurabe {
  background: #725E54;
}
.pg-chonology .history-chart .event-content .bubble {
  border: 2px solid #00E0DF;
  background: #ffffff;
  border-radius: 0 2.5rem;
  font-size: 1rem;
  padding: 1.375rem 1.75rem;
  position: relative;
  box-sizing: border-box;
  margin-top: 3.125rem;
  margin-bottom: 1.875rem;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .event-content .bubble {
    font-size: 0.875rem;
    padding: 1.25rem;
  }
}
.pg-chonology .history-chart .event-content .bubble::before {
  position: absolute;
  top: -1.5625rem;
  left: -0.125rem;
  border-style: solid;
  border-width: 1.5625rem 0 0 1.5625rem;
  border-color: transparent transparent transparent #00E0DF;
  content: "";
}
.pg-chonology .history-chart .event-content > *:last-child {
  margin-bottom: 0;
}
.pg-chonology .history-chart .event-content .notes {
  list-style: none;
  padding-left: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #787878;
}
.pg-chonology .history-chart .event-content .notes > li {
  padding-left: 1.2em;
  text-indent: -1.2em;
}
.pg-chonology .history-chart .event-content .notes > li::before {
  display: inline-block;
  text-align: left;
  text-indent: 0;
  width: 1.2em;
  content: "※";
}
.pg-chonology .history-chart .event-content .notes > li > * {
  text-indent: 0;
}
@media (max-width: 767px) {
  .pg-chonology .history-chart .event-content .notes {
    font-size: 0.625rem;
  }
}
.pg-chonology .section-webinner {
  background: #00E0DF;
  padding: 5rem 1.25rem 5.75rem;
}
@media (max-width: 767px) {
  .pg-chonology .section-webinner {
    padding: 3.125rem 1.25rem;
  }
}
.pg-chonology .section-webinner > .heading {
  text-align: center;
  font-family: "Roboto Black";
  font-size: 6.375rem;
  color: #00E6DF;
  line-height: 1;
  opacity: 0.7;
  mix-blend-mode: multiply;
}
@media (max-width: 767px) {
  .pg-chonology .section-webinner > .heading {
    font-size: 3.75rem;
  }
}
.pg-chonology .section-webinner > .title {
  text-align: center;
  margin: 0.625rem 0 0.9375rem;
}
@media (max-width: 767px) {
  .pg-chonology .section-webinner > .title {
    width: 18.125rem;
    margin: 0.625rem auto 0.9375rem;
  }
}
.pg-chonology .section-webinner > .text {
  text-align: center;
  font-weight: bold;
  font-size: 1.25rem;
}
@media (max-width: 767px) {
  .pg-chonology .section-webinner > .text {
    font-size: 1rem;
  }
}
.pg-chonology .section-webinner > .list {
  max-width: 65.625rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
}
.pg-chonology .section-last {
  background: #6093FF;
  padding: 5.625rem 0 2.5rem;
}
@media (max-width: 767px) {
  .pg-chonology .section-last {
    padding: 3.125rem 1.25rem;
  }
}
.pg-chonology .section-last .white-box {
  background: #ffffff;
  max-width: 65.625rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2.5rem 0;
  text-align: center;
}
@media (max-width: 767px) {
  .pg-chonology .section-last .white-box {
    padding: 1.5625rem 1.25rem;
  }
}
.pg-chonology .section-last .white-box:not(:last-of-type) {
  margin-bottom: 2.5rem;
}
.pg-chonology .section-last .white-box .heading {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 767px) {
  .pg-chonology .section-last .white-box .heading {
    font-size: 1.25rem;
  }
}
.pg-chonology .section-last .white-box .title {
  font-size: 1.25rem;
  font-weight: bold;
}
@media (max-width: 767px) {
  .pg-chonology .section-last .white-box .title {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }
}
@media (max-width: 767px) {
  .pg-chonology .section-last .white-box .logo {
    width: 15.9375rem;
    margin: 0 auto;
  }
}
.pg-chonology .section-last .white-box .image {
  margin: 2.5rem 0;
}
@media (max-width: 767px) {
  .pg-chonology .section-last .white-box .image {
    margin-top: 1.5625rem;
  }
}
.pg-chonology .section-last .white-box .text {
  font-size: 0.8125rem;
  line-height: 1.8;
}
@media (max-width: 767px) {
  .pg-chonology .section-last .white-box .text {
    font-size: 0.75rem;
    text-align: left;
  }
}
.pg-chonology .section-last .white-box .image, .pg-chonology .section-last .white-box .article-list-c .item {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 1.5s;
  transform: translate3d(0, -50px, 0);
}
.pg-chonology .section-last .white-box.-animated .image, .pg-chonology .section-last .white-box.-animated .article-list-c .item {
  opacity: 1;
  transform: translateZ(0);
}
.pg-chonology .site-footer #page-top {
  position: fixed;
  right: 1.25rem;
  bottom: 2.5rem;
  border: 0;
  background: none;
  width: 3.125rem;
  height: 3.75rem;
  padding: 0;
  display: flex;
  justify-content: center;
  z-index: 100;
}
@media (max-width: 767px) {
  .pg-chonology .site-footer #page-top {
    height: 3.125rem;
    right: 0;
    bottom: 5rem;
  }
}
.pg-chonology .site-footer #page-top > span {
  display: block;
  position: relative;
  line-height: 1;
  height: 100%;
  text-align: right;
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  color: #333333;
  padding-right: 0.25rem;
  border-right: 1px solid #333333;
  font-weight: bold;
  font-size: 1rem;
}
@media (max-width: 767px) {
  .pg-chonology .site-footer #page-top > span {
    font-size: 0.875rem;
  }
}
.pg-chonology .site-footer #page-top > span::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0.9375rem;
  border-top: solid 1px;
  transform: rotate(-45deg);
  transform-origin: top right;
}

.pg-contentslist .section-intro {
  padding: 4.5rem 1.25rem 6.25rem;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .pg-contentslist .section-intro {
    padding: 0.625rem 1.25rem 2.8125rem;
  }
}
.pg-contentslist .section-intro .heading {
  text-align: center;
  pointer-events: none;
}
@media (max-width: 767px) {
  .pg-contentslist .section-intro .heading {
    width: 16.4375rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.pg-contentslist .section-intro .title {
  font-size: 2.5rem;
  text-align: center;
  margin: -2.3125rem 0 3.4375rem;
}
@media (max-width: 767px) {
  .pg-contentslist .section-intro .title {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: -0.9375rem 0 1.875rem;
  }
}
@media (min-width: 768px) {
  .pg-contentslist .section-intro .title br {
    display: none;
  }
}
.pg-contentslist .section-intro .text {
  font-size: 1.25rem;
  line-height: 1.9;
}
@media (min-width: 768px) {
  .pg-contentslist .section-intro .text {
    text-align: center;
  }
}
@media (max-width: 767px) {
  .pg-contentslist .section-intro .text {
    font-size: 1rem;
  }
}
.pg-contentslist .section-article {
  max-width: 65.625rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6.875rem;
}
@media (max-width: 767px) {
  .pg-contentslist .section-article {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-bottom: 3.75rem;
  }
}
.pg-contentslist .section-article .heading {
  font-size: 2.125rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 767px) {
  .pg-contentslist .section-article .heading {
    font-size: 1.5rem;
  }
}
@media (max-width: 767px) {
  .pg-contentslist .section-article .article-list-b .item:nth-child(even) {
    transition-delay: 300ms;
  }
}
.pg-contentslist .site-footer {
  background: none;
  position: relative;
}
.pg-contentslist .site-footer::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  border-style: solid;
  border-color: transparent #6093FF #6093FF transparent;
  border-width: 52.75rem calc(var(--vw) / 2) 52.75rem calc(var(--vw) / 2);
  box-sizing: border-box;
  content: "";
}

.pg-quiz .site-container {
  background-image: url("../../quiz/images/background.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@media (max-width: 767px) {
  .pg-quiz .site-container {
    background-image: url("../../quiz/images/background-sp.svg");
    padding-bottom: 0;
  }
}
.pg-quiz .site-content {
  position: relative;
}
@media (min-width: 768px) {
  .pg-quiz .site-content {
    flex: 1;
  }
}
.pg-quiz .quiz-container {
  padding-top: 2.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .pg-quiz .quiz-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.pg-quiz .intro-box {
  text-align: center;
}
.pg-quiz .intro-box .title {
  font-size: 2.25rem;
  font-weight: bold;
  color: #7380FF;
  margin: 1.5625rem 0 2.1875rem;
}
@media (max-width: 767px) {
  .pg-quiz .intro-box .title {
    font-size: 1.375rem;
    margin: 1.25rem 0 3.125rem;
  }
}
@media (max-width: 767px) {
  .pg-quiz .intro-box .heading {
    width: 18.875rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.pg-quiz .intro-box .text {
  color: #7380FF;
  font-weight: bold;
  font-size: 1.875rem;
  margin-bottom: 2.1875rem;
}
@media (max-width: 767px) {
  .pg-quiz .intro-box .text {
    font-size: 1.375rem;
    margin-bottom: 1.25rem;
  }
}
.pg-quiz .intro-box .btn-a {
  color: #ffffff;
  background: linear-gradient(90deg, #2a8aff 0%, #ff6ae3 100%);
  transition: 0.25s;
}
.pg-quiz .intro-box .btn-a:hover {
  animation: pulse-2a8aff 0.8s;
  box-shadow: 0 0 0 0.6em transparent;
}
@keyframes pulse-2a8aff {
  0% {
    box-shadow: 0 0 0 0 #2a8aff;
  }
}
@media (max-width: 767px) {
  .pg-quiz .intro-box .btn-a {
    font-size: 1.5rem;
    min-width: 16.5625rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
.pg-quiz .quiz-box {
  background: #ffffff;
  width: 52rem;
  margin-left: auto;
  margin-right: auto;
  padding: 4.375rem 5.625rem 3.75rem;
  box-sizing: border-box;
  position: relative;
}
@media (max-width: 767px) {
  .pg-quiz .quiz-box {
    width: 100%;
    padding: 2.5rem 1.25rem 1.875rem;
  }
}
.pg-quiz .quiz-box .number {
  position: absolute;
  top: 1.25rem;
  left: 2.1875rem;
  z-index: 0;
  font-family: "Roboto Medium";
  font-size: 9.375rem;
  line-height: 1;
  color: #DCE8FF;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
@media (max-width: 767px) {
  .pg-quiz .quiz-box .number {
    font-size: 5.625rem;
    left: 0.9375rem;
    top: 0.625rem;
  }
}
.pg-quiz .quiz-box .question {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.9;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .pg-quiz .quiz-box .question {
    font-size: 1rem;
  }
}
.pg-quiz .quiz-box .answer-list {
  list-style: none;
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .pg-quiz .quiz-box .answer-list {
    align-items: center;
  }
}
.pg-quiz .quiz-box .answer-list li:not(:last-child) {
  margin-bottom: 1.25rem;
}
.pg-quiz .quiz-box .answer-list button {
  text-decoration: none;
  color: #5580FF;
  font-size: 1.3125rem;
  font-weight: bold;
  width: 29.75rem;
  display: inline-block;
  border: 0.125rem solid #5580FF;
  border-radius: 0.5rem;
  background: none;
  line-height: 1.6;
  text-align: center;
  padding: 1rem 0.625rem;
  box-sizing: border-box;
  transition: all 0.15s;
}
@media (max-width: 767px) {
  .pg-quiz .quiz-box .answer-list button {
    width: 100%;
    font-size: 1rem;
    padding: 0.75rem 0.3125rem;
  }
}
.pg-quiz .quiz-box .answer-list button:hover {
  background: #5580FF;
  color: #ffffff;
}
.pg-quiz .quiz-box .correct {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1;
  position: relative;
  z-index: 1;
  color: #FF61C8;
  padding-top: 0.75rem;
}
@media (max-width: 767px) {
  .pg-quiz .quiz-box .correct {
    font-size: 1.5625rem;
  }
}
.pg-quiz .quiz-box .correct::after {
  display: inline-block;
  vertical-align: -0.3125rem;
  margin-left: 0.9375rem;
  width: 2.5625rem;
  height: 2.5625rem;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39.96 39.97'%3E%3Cg%3E%3Cpath d='M19.98,6c7.71,0,13.98,6.27,13.98,13.98s-6.27,13.98-13.98,13.98-13.98-6.27-13.98-13.98S12.27,6,19.98,6m0-6C8.95,0,0,8.95,0,19.98s8.95,19.98,19.98,19.98,19.98-8.95,19.98-19.98S31.02,0,19.98,0h0Z' fill='%23ff61c8' /%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 767px) {
  .pg-quiz .quiz-box .correct::after {
    width: 1.5625rem;
    vertical-align: -0.1875rem;
    margin-left: 0.625rem;
    height: 1.5625rem;
  }
}
.pg-quiz .quiz-box .correct.-wrong {
  color: #5580FF;
}
.pg-quiz .quiz-box .correct.-wrong::after {
  width: 1.9375rem;
  height: 1.9375rem;
  vertical-align: -0.125rem;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.24 35.24'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%235580ff;stroke-miterlimit:10;stroke-width:6px;%7D%3C/style%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cline class='cls-1' x1='2.12' y1='2.12' x2='33.12' y2='33.12'/%3E%3Cline class='cls-1' x1='33.12' y1='2.12' x2='2.12' y2='33.12'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 767px) {
  .pg-quiz .quiz-box .correct.-wrong::after {
    width: 1.375rem;
    height: 1.375rem;
  }
}
.pg-quiz .quiz-box .answer {
  position: relative;
  z-index: 1;
  font-size: 1.3125rem;
  font-weight: bold;
  margin: 0.75rem 0 1.25rem;
}
@media (max-width: 767px) {
  .pg-quiz .quiz-box .answer {
    font-size: 1.0625rem;
  }
}
.pg-quiz .quiz-box .text {
  font-size: 1.125rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .pg-quiz .quiz-box .text {
    font-size: 0.875rem;
  }
}
.pg-quiz .quiz-box .button {
  text-align: center;
  margin-top: 3.125rem;
}
@media (max-width: 767px) {
  .pg-quiz .quiz-box .button {
    margin-top: 1.875rem;
  }
}
.pg-quiz .result-box {
  background: #ffffff;
  width: 52rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1.875rem 4.0625rem 1.25rem;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .pg-quiz .result-box {
    width: 100%;
    padding: 0.625rem 1.25rem 1.875rem;
    margin-bottom: 4.375rem;
  }
}
.pg-quiz .result-box > .inner {
  display: flex;
  align-items: flex-end;
}
@media (max-width: 767px) {
  .pg-quiz .result-box > .inner {
    flex-wrap: wrap;
  }
}
.pg-quiz .result-box .image {
  width: 20.1875rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .pg-quiz .result-box .image {
    width: 100%;
    height: 12.5rem;
    margin-bottom: 1.25rem;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .pg-quiz .result-box .image img {
    height: 100%;
  }
}
.pg-quiz .result-box .score {
  font-size: 1.25rem;
  color: #5580FF;
  font-weight: bold;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .pg-quiz .result-box .score {
    font-size: 1rem;
  }
}
.pg-quiz .result-box .score > span {
  display: block;
  font-size: 1.875rem;
}
@media (max-width: 767px) {
  .pg-quiz .result-box .score > span {
    font-size: 1.375rem;
  }
}
.pg-quiz .result-box .level {
  font-size: 2.75rem;
  line-height: 1;
  font-weight: bold;
  color: #5580FF;
  margin: 0.9375rem 0 1.5rem;
}
@media (max-width: 767px) {
  .pg-quiz .result-box .level {
    font-size: 1.875rem;
    margin: 0.625rem 0 0.9375rem;
  }
}
.pg-quiz .result-box .text {
  font-size: 0.9375rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .pg-quiz .result-box .text {
    font-size: 0.875rem;
    line-height: 1.8;
  }
}
.pg-quiz .result-box .button {
  text-align: center;
  margin-top: 2.1875rem;
}
.pg-quiz .result-box .sns-share {
  text-align: center;
  margin-top: 1.875rem;
}
@media (max-width: 767px) {
  .pg-quiz .result-box .sns-share {
    margin-top: 1.25rem;
  }
}
.pg-quiz .result-box .sns-share .wrapper {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.875rem;
  background: linear-gradient(90deg, #3f76ff 0%, #9055e7 44%, #ff2acc 100%);
}
@media (max-width: 767px) {
  .pg-quiz .result-box .sns-share .wrapper {
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 0.9375rem;
  }
}
.pg-quiz .result-box .sns-share .wrapper::before {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  background: #ffffff;
  width: calc(100% - 0.375rem);
  height: calc(100% - 0.375rem);
  z-index: -1;
  content: "";
}
.pg-quiz .result-box .sns-share .title {
  font-size: 1.375rem;
  color: #5580FF;
  margin-right: 1.875rem;
}
@media (max-width: 767px) {
  .pg-quiz .result-box .sns-share .title {
    font-size: 1rem;
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.625rem;
  }
}
.pg-quiz .result-box .sns-share .icon:not(:last-child) {
  margin-right: 1.25rem;
}
.pg-quiz .result-box .sns-share .close {
  text-align: center;
  margin-top: 0.9375rem;
}
.pg-quiz .result-box .sns-share .close > button {
  font-size: 1rem;
  color: #5580FF;
  background: none;
  text-decoration: underline;
  border: 0;
}
@media (max-width: 767px) {
  .pg-quiz .result-box .sns-share .close > button {
    font-size: 0.875rem;
  }
}
.pg-quiz .result-box .sns-share .close > button:hover {
  text-decoration: none;
}
.pg-quiz .related-box {
  background: #ffffff;
  width: 52rem;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 3.375rem 2.5rem 3.75rem;
}
@media (max-width: 767px) {
  .pg-quiz .related-box {
    width: 100%;
    padding: 1.25rem 1.25rem 1.875rem;
    margin-bottom: 4.375rem;
  }
}
.pg-quiz .related-box .heading {
  color: #5580FF;
  font-size: 2rem;
  text-align: center;
}
@media (max-width: 767px) {
  .pg-quiz .related-box .heading {
    font-size: 1.125rem;
  }
}
.pg-quiz .related-box > .text {
  text-align: center;
  font-size: 1.0625rem;
}
@media (max-width: 767px) {
  .pg-quiz .related-box > .text {
    font-size: 0.875rem;
  }
}
.pg-quiz .related-box .post-list {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0 -1.75rem;
}
@media (max-width: 767px) {
  .pg-quiz .related-box .post-list {
    flex-wrap: wrap;
    margin: 0;
  }
}
.pg-quiz .related-box .post-list li {
  margin: 2.3125rem 1.75rem 0;
}
@media (max-width: 767px) {
  .pg-quiz .related-box .post-list li {
    margin: 1.25rem 0 0;
  }
}
.pg-quiz .related-box .post-list a {
  display: block;
  width: 18.625rem;
  text-decoration: none;
  border-radius: 0 1.875rem;
  border: 0.0625rem solid #cccccc;
  overflow: hidden;
  color: #333333;
}
.pg-quiz .related-box .post-list .image img {
  width: 100%;
}
.pg-quiz .related-box .post-list .text {
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  padding: 0.9375rem 0.625rem 1.25rem;
}
.pg-quiz .related-box .post-list .text .-big {
  font-size: 1.125rem;
}
.pg-quiz .site-footer {
  background: none;
}
@media (max-width: 767px) {
  .pg-quiz .site-footer {
    display: none;
  }
}
.pg-quiz .site-footer .copyright {
  color: #333333;
}

/* 2023/6/13 footer改修 */
.site-footer ul.info {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0;
padding: 40px 0 10px 0;
font-size: 0.75em;
}
.site-footer ul.info li {
line-height: 1;
padding-right: 10px;
margin: 0 10px 15px 0;
border-right: 1px solid #ffffff;
list-style: none;
}
.site-footer ul.info li:last-of-type {
border: none;
}
.site-footer ul.info li a {
text-decoration: none;
color: #ffffff;
}
.site-footer ul.info li a:hover {
text-decoration: underline;
}
.site-footer .copyright {
width: 940px;
margin: 0 auto;
padding: 0 0 0 20px;
font-size: .5em;
text-align: left;
background: none;
}
#quiz .site-footer ul.info li a {
  color: #333333;
}
#quiz .site-footer ul.info li {
  border-right: 1px solid #333333;
}

@media only screen and (max-width : 768px){
  .pg-contentslist .site-footer::before {
    border-width: 52.75rem calc(var(--vw) / 2) 90rem calc(var(--vw) / 2);
  }
  .site-footer {
    padding: 10px 0 20px 0;
  }
  .site-footer ul.info {
    justify-content: flex-start;
    padding: 10px 0 0 20px;
  }
  .site-footer ul.infoli {
    margin-bottom: 15px;
  }
  .site-footer .copyright {
    width: auto;
    margin: 0;
    padding:  0 0 0 20px;
  }
}

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