/*!************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/index.css ***!
  \************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/*!****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/index.css (1) ***!
  \****************************************************************************************************************************************/
@charset "UTF-8";
html {
  font-size: 62.5%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  color: #272723;
  background-color: #efefef;
}

* {
  box-sizing: border-box;
}

.w400 {
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.14rem;
}

.w500 {
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.18rem;
}

.w700 {
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.12rem;
}

.section_container {
  opacity: 0;
}
.section_container.active {
  animation: show_words_opacity_translateY 0.75s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
}
.section_container.gNavi {
  animation: show_words_opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
}
.section_container.gNavi.active {
  opacity: 1;
  animation: show_words_opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
}

h1.section_container.active:after {
  opacity: 1;
  animation: hover_bottom_line 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
}
h1.section_container.active {
  animation: show_words_opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
}

@keyframes pagetop_slider_after_anim {
  0% {
    transform: scale(0.4) translateY(10px);
  }
  25% {
    transform: scale(1) translateY(-35px);
  }
  50% {
    transform: scale(1) translateY(-35px);
  }
  75% {
    transform: scale(0.4) translateY(10px);
  }
  100% {
    transform: scale(0.4) translateY(10px);
  }
}
@keyframes hover_view_all {
  0% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(0%, -50%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
@keyframes hover_view_all_circle {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes hover_bottom_line {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes hover_bottom_line_reverse {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@keyframes show_title {
  0% {
    opacity: 0;
    transform: translateX(25px) scale(1.01);
  }
  50% {
    opacity: 0.75;
    transform: translateX(0px) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) scale(1);
  }
}
@keyframes show_words_opacity_translateY {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes show_words_opacity_translateY_reverse {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes show_words_opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slider_v1 {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@keyframes zoomin_v1 {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/**
 * Based on
 *
 *  - reset.css 2.0 by Eric Meyer
      (public domain)
 *    http://meyerweb.com/eric/tools/css/reset/
 *
 *  - normalize.css 8.0.1 by Nicolas Gallagher and Jonathan Neal
 *    (licensed under MIT)
 *    https://github.com/necolas/normalize.css
 *
 *  - Reboot from Bootstrap 4.5.3
 *    (licensed under MIT)
 *    https://github.com/twbs/bootstrap
 */
/**
 * IE10+ doesn't honor `<meta name="viewport">` in some cases
 */
@-ms-viewport {
  width: device-width;
}
/**
 * general reset
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, main {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/**
 * HTML5 display-role reset for older browsers
 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section,
main, summary {
  display: block;
}

/**
 * inherit box model for all elements
 */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/**
 * html root rules
 * 1. set border-box for inheritance
 * 2. avoid 300ms click delay on touch devices that support the `touch-action`
 *    CSS property
 * 3. Prevent adjustments of font size after orientation changes in IE, on
 *    Windows Phone and iOS.
 * 4. Setting @viewport causes scrollbars to overlap content in IE11 and Edge,
 *    so we force a non-overlapping, non-auto-hiding scrollbar to counteract.
 * 5. Change the default tap highlight to be completely transparent in iOS.
 */
html {
  /* 1 */
  box-sizing: border-box;
  /* 2 */
  touch-action: manipulation;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* 4 */
  -ms-overflow-style: scrollbar;
  /* 5 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/**
 * body rules
 * 1. reset line-height to 1
 * 2. set base font-family to sans-serif
 * 3. Set an explicit initial text-align value so that we can later use the
 *    `inherit` value on things like `<th>` elements.
 */
body {
  /* 1 */
  line-height: 1;
  /* 2 */
  font-family: sans-serif;
  /* 3 */
  text-align: left;
}

/**
 * Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
 * on elements that programmatically receive focus but wouldn't normally show a visible
 * focus outline. In general, this would mean that the outline is only applied if the
 * interaction that led to the element receiving programmatic focus was a keyboard interaction,
 * or the browser has somehow determined that the user is primarily a keyboard user and/or
 * wants focus outlines to always be presented.
 *
 * See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
 * and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
 */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

/**
 * Lists
 */
ol, ul {
  list-style: none;
}

/**
 * Quotes
 */
blockquote, q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

/**
 * Tables
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  caption-side: bottom;
}

/**
 * Table Headers
 * 1. Matches default `<td>` alignment by inheriting from the `<body>`, or the
 *    closest parent with a set `text-align`.
 * 2. Fix alignment for Safari
 */
th {
  /* 1 */
  text-align: inherit;
  /* 2 */
  text-align: -webkit-match-parent;
}

/**
 * Horizontal Lines
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  /* 1 */
  box-sizing: content-box;
  height: 0;
  /* 2 */
  overflow: visible;
}

/**
 * Preformatted Text
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Don't allow content to break outside
 * 3. We have @viewport set which causes scrollbars to overlap content in IE11
 *    and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to
 *    counteract.
 */
pre,
code,
kbd,
samp {
  /* 1 */
  font-family: monospace, monospace;
}

pre {
  /* 2 */
  overflow: auto;
  /* 3 */
  -ms-overflow-style: scrollbar;
}

/**
 * Links
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  /* 1 */
  background-color: transparent;
  /* 2 */
  -webkit-text-decoration-skip: objects;
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 * 3. Add explicit cursor to indicate changed behavior.
 * 4. Prevent the text-decoration to be skipped.
 */
abbr[title] {
  /* 1 */
  border-bottom: 0;
  /* 2 */
  text-decoration: underline;
  text-decoration: underline dotted;
  /* 3 */
  cursor: help;
  /* 4 */
  text-decoration-skip-ink: none;
}

address {
  font-style: normal;
  line-height: inherit;
}

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

/**
 * 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 {
  position: relative;
  font-size: 75%;
  line-height: 0;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/**
 * Prevent `em` being affected from global reset
 */
em {
  font-style: italic;
}

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

/**
 * Hide SVG overflow in IE
 */
svg:not(:root) {
  overflow: hidden;
}

/**
 * Remove the default `border-radius` that macOS Chrome adds.
 * Details at https://github.com/twbs/bootstrap/issues/24093
 */
button {
  border-radius: 0;
}

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 * Credit: https://github.com/suitcss/base/
 */
button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

/**
 * form element resets
 * 1. Remove the margin in Firefox and Safari
 * 2. inherit font rules
 */
input,
button,
select,
optgroup,
textarea {
  /* 1 */
  margin: 0;
  /* 2 */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=reset],
[type=submit],
[type=button] {
  /* 2 */
  -webkit-appearance: button;
}

/**
 * Remove the default appearance of temporal inputs to avoid a Mobile Safari
 * bug where setting a custom line-height prevents text from being vertically
 * centered within the input.
 * See https://bugs.webkit.org/show_bug.cgi?id=139848
 * and https://github.com/twbs/bootstrap/issues/11266
 */
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
  -webkit-appearance: listbox;
}

/**
 * 1. Remove the default vertical scrollbar in IE.
 * 2. Textareas should really only resize vertically so they don't break their
 *    (horizontal) containers.
 */
textarea {
  overflow: auto;
  resize: vertical;
}

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

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

/**
 * Set the cursor for non-`<button>` buttons
 * Details at https://github.com/twbs/bootstrap/pull/30562
 */
[role=button] {
  cursor: pointer;
}

/**
 * Remove the inheritance of word-wrap in Safari.
 * See https://github.com/twbs/bootstrap/issues/24990
 */
select {
  word-wrap: normal;
}

/**
 * Remove inner border and padding from Firefox, but don't restore the outline
 * like Normalize.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

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

/**
 * Suppress the focus outline on elements that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 * Credit: https://github.com/suitcss/base
 */
[tabindex="-1"]:focus {
  outline: 0 !important;
}

/**
 * Browsers set a default `min-width: min-content` on fieldsets,
 * unlike e.g. `<div>`s, which have `min-width: 0` by default.
 * So we reset that to ensure fieldsets behave more like a standard block element.
 * See https://github.com/twbs/bootstrap/issues/12359
 * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
 */
fieldset {
  min-width: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Set display to block for all browsers
 */
legend {
  /* 1 */
  max-width: 100%;
  white-space: normal;
  /* 2 */
  color: inherit;
  /* 3 */
  display: block;
}

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

/**
 * 1. Remove the default vertical scrollbar in IE 10+.
 * 2. Textareas should really only resize vertically so they don't break their
 *    (horizontal) containers.
 */
textarea {
  /* 1 */
  overflow: auto;
  /* 2 */
  resize: vertical;
}

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

/**
 * 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] {
  /* 1 */
  -webkit-appearance: textfield;
  /* 2 */
  outline-offset: -2px;
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-cancel-button,
[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 {
  /* 1 */
  -webkit-appearance: button;
  /* 2 */
  font: inherit;
}

/**
 * Correct element display for output
 */
output {
  display: inline-block;
}

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

/**
 * Always hide an element with the `hidden` HTML attribute (from PureCSS).
 * Needed for proper display in IE 10-.
 */
[hidden] {
  display: none;
}

.gNavi {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  height: 110px;
}

.gNavi__logo {
  transform: translateX(41px);
}

.gNavi__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  transform: translateX(-200px);
  height: 100%;
}

.gNavi__menu li {
  position: relative;
  font-size: 0.925rem;
  list-style: none;
  margin: 0 0 0 28px;
}
.gNavi__menu li:after {
  content: "";
  display: block;
  width: 0%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 35px;
  background-color: #0032AF;
  animation: hover_bottom_line_reverse 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
}
.gNavi__menu li:hover:after {
  animation: hover_bottom_line 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
}
.gNavi__menu li a {
  font-family: "Noto Sans JP", sans-serif;
  height: 100%;
  color: #0032AF;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.gNavi .entry {
  color: #fff;
  background-color: #0032AF;
  text-align: center;
  vertical-align: center;
  position: fixed;
  display: inline-block;
  height: 110px;
  width: 170px;
  top: 0;
  right: 0;
}
.gNavi .entry:hover {
  opacity: 0.8;
}
.gNavi .entry span {
  line-height: 0;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateX(-50%);
}
.gNavi__logo img {
  width: 177px;
}

.Top__main {
  width: 1100px;
  margin: 118px auto 0;
  position: relative;
  padding: 54px 0 0;
}
.Top__main h3 {
  color: #0032AF;
}
.Top__main p {
  color: #0032AF;
}
.Top__main:before {
  content: "";
  width: 110px;
  height: 1.5px;
  display: block;
  background-color: #0032AF;
  transform: translateY(-54px);
}

.Top__main_txt {
  position: relative;
}
.Top__main_txt:after {
  content: "";
  display: block;
  width: 10px;
  height: 181px;
  background: url(../images/top/about.svg) no-repeat;
  position: absolute;
  top: 325px;
  left: -65px;
}
.Top__main_txt h3 {
  margin: 35px 0 80px;
  transform: translateX(-6px);
}
.Top__main_txt h1 {
  color: #0032AF;
  font-size: 1.25rem;
  letter-spacing: 0.12rem;
  opacity: 0;
  animation-name: show_words_opacity;
  animation-delay: 0.5s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_txt p {
  font-size: 1.125rem;
  line-height: 1.7;
}

.Top__main_title .letter {
  opacity: 0;
  transform-origin: 25px left;
}
.Top__main_title .letter:nth-of-type(1) {
  animation-name: show_title;
  animation-delay: 0.54s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(2) {
  animation-name: show_title;
  animation-delay: 0.58s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(3) {
  animation-name: show_title;
  animation-delay: 0.62s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(4) {
  animation-name: show_title;
  animation-delay: 0.66s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(5) {
  animation-name: show_title;
  animation-delay: 0.7s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(6) {
  animation-name: show_title;
  animation-delay: 0.74s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(7) {
  animation-name: show_title;
  animation-delay: 0.78s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(8) {
  animation-name: show_title;
  animation-delay: 0.82s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(9) {
  animation-name: show_title;
  animation-delay: 0.86s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(10) {
  animation-name: show_title;
  animation-delay: 0.9s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(11) {
  animation-name: show_title;
  animation-delay: 0.94s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(12) {
  animation-name: show_title;
  animation-delay: 0.98s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(13) {
  animation-name: show_title;
  animation-delay: 1.02s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(14) {
  animation-name: show_title;
  animation-delay: 1.06s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(15) {
  animation-name: show_title;
  animation-delay: 1.1s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(16) {
  animation-name: show_title;
  animation-delay: 1.14s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(17) {
  animation-name: show_title;
  animation-delay: 1.18s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(18) {
  animation-name: show_title;
  animation-delay: 1.22s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(19) {
  animation-name: show_title;
  animation-delay: 1.26s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_title .letter:nth-of-type(20) {
  animation-name: show_title;
  animation-delay: 1.3s;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}

.Top__main_words span {
  display: block;
  opacity: 0;
  line-height: 1;
  margin: 0;
  padding: 0;
}
.Top__main_words span:nth-of-type(1) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 1.6s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(2) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 1.7s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(3) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 1.8s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(4) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 1.9s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(5) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 2s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(6) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 2.1s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(7) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 2.2s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(8) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 2.3s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(9) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 2.4s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(10) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 2.5s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(11) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 2.6s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(12) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 2.7s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(13) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 2.8s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(14) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 2.9s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(15) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 3s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(16) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 3.1s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(17) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 3.2s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(18) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 3.3s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(19) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 3.4s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}
.Top__main_words span:nth-of-type(20) {
  animation-name: show_words_opacity_translateY;
  animation-delay: 3.5s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.105, 0.55, 0.355, 1);
}

.Top__main_photo {
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 0;
  width: 480px;
  height: 720px;
  overflow: hidden;
}
.Top__main_photo span {
  opacity: 1;
  position: absolute;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  background: none #efefef;
}
.Top__main_photo span.active {
  animation: slider_v1 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s forwards;
}
.Top__main_photo span.zoomin {
  animation: zoomin_v1 5s linear 0s forwards;
}
.Top__main_photo img {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center;
}

.Top__topics {
  width: 1100px;
  margin: 265px auto 0;
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.Top__topics .topics_inner {
  position: absolute;
  top: 10px;
  left: 0;
}
.Top__topics .topics_inner h2 {
  margin: 0 0 41.5px;
  display: block;
}
.Top__topics ul {
  width: 820px;
}
.Top__topics li {
  position: relative;
  border-bottom: 1px solid #0032AF;
}
.Top__topics li:after {
  content: "";
  display: block;
  width: 0%;
  height: 1px;
  position: absolute;
  bottom: -1px;
  left: 0;
  background-color: #0032AF;
}
.Top__topics li:hover {
  background-color: #d9dde9;
}
.Top__topics li:hover:after {
  animation: hover_bottom_line 0.75s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
}
.Top__topics li span {
  display: inline-block;
  margin: 0 28px 0 0;
}
.Top__topics li a {
  display: flex;
  padding: 32px 10px 32px;
  font-size: 1rem;
  color: #0032AF;
  line-height: 1.6;
  text-decoration: none;
}

.Top__ex {
  text-align: center;
  margin: 162px 0 110px;
}
.Top__ex p {
  font-size: 1.125rem;
  color: #0032AF;
}
.Top__ex p a {
  color: unset;
  position: relative;
  text-decoration: none;
}
.Top__ex p a:after {
  content: "";
  display: block;
  width: 0%;
  height: 1px;
  position: absolute;
  bottom: -8px;
  left: 0;
  background-color: #0032AF;
}
.Top__ex p a:hover:after {
  animation: hover_bottom_line 0.75s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
}

.usage,
.contact,
.cfn,
.faq,
.topics {
  text-align: center;
}
.usage h1,
.contact h1,
.cfn h1,
.faq h1,
.topics h1 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  display: inline-block;
  text-align: center;
  font-size: 2.6875rem;
  padding: 0 0 23.5px;
  margin: 138px 0 145px;
  position: relative;
  letter-spacing: 0.3rem;
}
.usage h1:after,
.contact h1:after,
.cfn h1:after,
.faq h1:after,
.topics h1:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 5px;
  background-color: #0032AF;
}

.faq h1,
.cfn h1 {
  margin-bottom: 80px !important;
}

.wrapper_2nd {
  color: #0032AF;
}

.cts {
  font-size: 1rem;
  letter-spacing: 0.12rem;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-start;
  margin: 0 auto 140px auto;
  width: 1020px;
}

.cts__L {
  width: 215px;
  margin: 0 81px 0 0;
}
.cts__L h3 {
  text-align: center;
  color: #fff;
  background-color: #0032AA;
  padding: 20px 0;
}
.cts__L h3 span {
  display: block;
  padding-top: 12px;
}

.cts__R h4 {
  font-size: 1.25rem;
  margin: 0 0 15px;
}
.cts__R p {
  line-height: 2.2;
  transform: translateY(-7px);
}
.cts__R .w500 {
  font-size: 1.25rem;
}

.cts_table {
  display: flex;
  flex-wrap: nowrap;
  margin: 0 0 22px;
}
.cts_table br {
  display: none;
}
.cts_table dl {
  width: 140px;
  border-top: 1px solid #0032AA;
  border-left: 1px solid #0032AA;
}
.cts_table dl dt {
  padding: 25px 0px;
  border-bottom: 1px solid #0032AA;
}
.cts_table dl dt:first-child {
  text-align: center;
  background-color: rgba(0, 50, 175, 0.36);
}
.cts_table dl dd {
  font-size: 1rem;
  letter-spacing: 0.08rem;
  padding: 25px 0 25px 27px;
  border-bottom: 1px solid #0032AA;
  text-align: center;
}
.cts_table dl dd:first-child {
  text-align: left;
}
.cts_table dl:nth-of-type(1) {
  width: 300px;
}
.cts_table dl:nth-of-type(1) dd {
  text-align: left;
}
.cts_table dl:nth-of-type(2) dd {
  padding: 25px 0;
}
.cts_table dl:nth-of-type(3) dd {
  padding: 25px 0;
}
.cts_table dl:nth-of-type(3) dt {
  padding-left: 0;
  padding-right: 0;
}
.cts_table dl:nth-of-type(4) {
  border-right: 1px solid #0032AA;
}
.cts_table dl:nth-of-type(4) dd {
  padding: 25px 0;
}

.annotation {
  letter-spacing: 0.05rem;
  font-size: 0.8125rem;
}

.pg2nd_topics {
  padding-bottom: 185px;
}
.pg2nd_topics ul.pg2nd_topics__items {
  width: 820px;
  margin: auto;
  border-top: 1px solid #0032AF;
}
.pg2nd_topics li {
  text-align: left;
  position: relative;
  border-bottom: 1px solid #0032AF;
}
.pg2nd_topics li:after {
  content: "";
  display: block;
  width: 0%;
  height: 1px;
  position: absolute;
  bottom: -1px;
  left: 0;
  background-color: #0032AF;
}
.pg2nd_topics li:hover {
  background-color: #d9dde9;
}
.pg2nd_topics li span {
  display: inline-block;
  margin: 0 28px 0 0;
}
.pg2nd_topics li a {
  display: flex;
  line-height: 1.6;
  margin: 0 20px;
  padding: 32px 0 32px;
  font-size: 1rem;
  color: #0032AF;
  text-decoration: none;
}

.contact {
  padding: 0 0 124px;
}
.contact h2 {
  margin-bottom: 91.5px;
}
.contact p {
  font-size: 1.125rem;
}

.formarea {
  width: 680px;
  margin: 81.6px auto 0;
}
.formarea_item {
  display: flex;
  margin: 0 0 46px;
}
.formarea p {
  font-size: 1.0625rem;
  width: 30%;
  text-align: left;
}
.formarea p + div {
  width: 70%;
}
.formarea .require {
  transform: translateY(5px);
}
.formarea .require:before {
  content: "必須";
  display: inline-block;
  color: #fff;
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #0032AF;
  margin: 0 10px 0 0;
  vertical-align: middle;
  transform: translateY(-2px);
}
.formarea .confirm {
  margin: 0 0 46px;
}
.formarea .confirm label {
  font-size: 1.0625rem;
}
.formarea .confirm a {
  margin: 0 7px 0 10px;
}
.formarea input[type=text] {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #0032AF;
  padding: 5px;
}
.formarea textarea {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #0032AF;
  height: 200px;
  padding: 5px;
}
.formarea input[type=submit] {
  cursor: pointer;
  width: 245px;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 12px 0;
  background-color: #0032AF;
}
.formarea input[type=submit]:hover {
  opacity: 0.8;
}

.cfn {
  width: 1000px;
  margin: 0 auto 100px;
}
.cfn h1 {
  margin-bottom: 100px;
}
.cfn h1 + p {
  margin: 0 0 75px;
  letter-spacing: 1.8px;
}
.cfn p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
.cfn h2 {
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  padding: 0 0 10px;
  margin: 50px 0 5px;
  border-bottom: 1px solid #0032AF;
  letter-spacing: 0.12em;
}
.cfn h3 {
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  padding: 3.5px 0 5px 10px;
  margin: 20px 0 10px;
  letter-spacing: 1.8px;
  border-left: 5px solid #0032AF;
}
.cfn a {
  text-decoration: none;
}

.cfn_area_fixed {
  position: sticky;
  top: 0;
  padding: 20px 0;
  border: 1px solid #0032AF;
  border-radius: 10px;
  background-color: #efefef;
  z-index: 100;
}
.cfn_area_fixed a {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #0032AF;
  margin: 0 12px;
  letter-spacing: 0.1em;
}
.cfn_area_fixed a:hover {
  text-decoration: underline;
}

.cfn_ex {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  margin: 50px 0 70px;
}

.cfn_area {
  box-sizing: unset;
}

.cfn_area_list {
  text-align: left;
  display: flex;
  flex-wrap: wrap;
}
.cfn_area_list div {
  min-width: 320px;
  min-height: 22px;
  border: 1px solid rgba(0, 50, 175, 0.5);
  border-radius: 8px;
  margin: 0 15px 15px 0;
  background: url("../images/common/arrow.png") no-repeat 14px center;
}
.cfn_area_list div:hover {
  background-color: #d9dde9;
}
.cfn_area_list div:nth-child(3n) {
  margin-right: 0;
}
.cfn_area_list div a {
  color: #0032AF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.8125rem;
  padding: 13px 0 15px 32px;
  line-height: 1;
  display: block;
  letter-spacing: 0.1em;
}

.faq h1 {
  margin-bottom: 100px;
}
.faq h1 + p {
  margin: 0 0 75px;
  letter-spacing: 1.6px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}

.faq_list {
  width: 780px;
  margin: 0 auto;
  padding: 0 0 100px;
}
.faq_list dl {
  text-align: left;
  letter-spacing: 0.1rem;
  margin: 0 0 54px;
}
.faq_list dt {
  line-height: 1.8;
  font-size: 1rem;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #0032ae;
  color: #fff;
  padding: 20px 0 21px 80px;
  position: relative;
  letter-spacing: 0.15em;
}
.faq_list dt:before {
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 500;
  content: "Q";
  display: block;
  position: absolute;
  top: auto;
  left: 30px;
  margin: 0 auto;
  transform: translateY(2.5px);
}
.faq_list dd {
  line-height: 1.85;
  font-size: 0.9rem;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #d9dde9;
  color: #0032ae;
  padding: 20px 20px 24px 80px;
  position: relative;
}
.faq_list dd:before {
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 500;
  content: "A";
  display: block;
  position: absolute;
  top: auto;
  left: 30px;
  margin: 0 auto;
  transform: translateY(2px);
}

.howto {
  width: 1020px;
  margin: 0 auto 185px;
}

.howto__item {
  text-align: left;
  display: flex;
  letter-spacing: 0.12rem;
}
.howto__item_l {
  text-align: center;
  width: 211px;
  margin: 0 50.5px 0 0;
  padding: 57.5px 0 0;
  position: relative;
}
.howto__item_l:before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  position: absolute;
  background-color: #0032AF;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 10px;
}
.howto__item_l:after {
  content: "";
  display: block;
  width: 1px;
  height: 137px;
  position: absolute;
  background-color: #0032AF;
  top: 108px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.howto__item:nth-of-type(1) .howto__item_l {
  border-top: 1px solid #0032AF;
}
.howto__item:nth-of-type(1) .howto__item_r {
  border-top: 1px solid #0032AF;
}
.howto__item_r {
  width: 670px;
  padding: 57.5px 0 60px;
  border-bottom: 1px solid #0032AF;
}
.howto__item_r dt {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1;
  font-size: 1.3125rem;
  margin: 0 0 21px;
}
.howto__item_r dd {
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1rem;
}

.gFooter {
  background-color: #1E1E1E;
}

.gFooter a,
.gFooter p {
  color: #808080;
}

.footer {
  width: 1200px;
  margin: auto;
}
.footer a {
  font-weight: 400;
  text-decoration: none;
}

.footer__body__jwave {
  padding: 53px 0;
  text-align: center;
}
.footer__body__jwave p {
  color: #fff;
  margin-top: 8px;
  letter-spacing: 1.5px;
  font-size: 0.6875rem;
}

.footer__body__extra {
  padding: 27px 10px;
  border-top: 1px solid #707070;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
}
.footer__body__extra p, .footer__body__extra a {
  font-size: 0.6875rem;
  line-height: 1.6;
  letter-spacing: 0.9px;
}
.footer__body__extra a:hover {
  color: #fff;
}

.footer {
  background-color: #1E1E1E;
}
.footer__body {
  position: relative;
}
.footer__body__pagetop {
  position: absolute;
  top: 45px;
  font-size: 0.875rem;
  right: 50px;
  z-index: 1000;
}
.footer__body__pagetop .pagetop {
  font-feature-settings: "palt";
  pointer-events: all;
  word-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
  background: none;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: #808080;
  font-weight: 500;
  letter-spacing: 0.06rem;
  -webkit-font-smoothing: antialiased;
  font-size: 1.6rem;
  line-height: 0;
  cursor: pointer;
  position: relative;
  right: -10px;
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: stretch;
}
.footer__body__pagetop .pagetop__label {
  display: block;
  position: relative;
  padding-right: 40px;
  font-family: "Noto Sans Myanmar", sans-serif;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 1rem;
  line-height: 16px;
}
.footer__body__pagetop .pagetop__label:hover {
  color: #fff;
}
.footer__body__pagetop .pagetop__slider {
  position: absolute;
  right: 10px;
  bottom: 0;
}
.footer__body__pagetop .pagetop__slider__rail {
  z-index: 1;
  position: relative;
  display: block;
  width: 1px;
  height: 45px;
  background-color: #808080;
}
.footer__body__pagetop .pagetop__slider__rail:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  z-index: 3;
  right: -4.45px;
  width: 10px;
  height: 10px;
  background-color: #808080;
  animation: pagetop_slider_after_anim 3.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

:root {
  --delay: .5s;
  --duration: 2800ms;
  --iterations: 1;
}

.reveal-text,
.reveal-text::after {
  animation-delay: var(--animation-delay, 2s);
  animation-iteration-count: var(--iterations, 1);
  animation-duration: var(--duration, 800ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.reveal-text {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  font-size: 50px;
  animation-name: clip-text;
  color: #000;
  white-space: nowrap;
  cursor: default;
}
.reveal-text::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f2f98b;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation-name: text-revealer;
}

@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes text-revealer {
  0%, 50% {
    transform-origin: 0 50%;
  }
  60%, 100% {
    transform-origin: 100% 50%;
  }
  60% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.BtnToggleMenu {
  display: none;
  position: fixed;
  top: 56px;
  right: 50px;
  width: 37px;
  height: 54px;
  z-index: 99999999;
  background: 0 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.BtnToggleMenu:before,
.BtnToggleMenu:after,
.BtnToggleMenu span {
  width: 100%;
  height: 2px;
  background-color: #272723;
  display: block;
  left: 0;
  position: absolute;
  transition: background-color 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.BtnToggleMenu:before {
  content: "";
  width: 100%;
  top: 5px;
}

.BtnToggleMenu:after {
  content: "";
  top: 23px;
  width: 100%;
}

.BtnToggleMenu span {
  top: 14px;
  width: 100%;
}

body:before {
  content: "";
  display: block;
  height: 100vh;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  top: 0;
  animation-name: bg2;
  width: 100vw;
  transform-origin: right;
  transform: scale(0);
  animation-duration: 0s;
}

body.open-menu-panel:before {
  animation-name: bg1;
  animation-fill-mode: forwards;
  animation-duration: 0s;
}

@keyframes bg1 {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes bg2 {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.toggle_menu {
  display: none;
}

@media screen and (max-width: 750px) {
  .Top__main {
    width: auto;
    padding-top: 52px;
    margin-top: 0px;
  }
  .Top__main_txt {
    position: relative;
  }
  .Top__main_txt h1 {
    font-size: 16px;
    padding-left: 10px;
    text-align: left;
  }
  .Top__main_txt h3 {
    margin: 20px 0 10px 20px;
    text-align: left;
  }
  .Top__main_title {
    text-align: center;
  }
  .Top__main_title svg {
    width: 90%;
  }
  .Top__main_words {
    width: 97%;
    margin: auto;
  }
  .Top__main_words span {
    line-height: 1.55;
    font-size: 12px;
    margin: 0 0 10px;
  }
  .Top__main_words br {
    display: none;
  }
  .Top__main_photo {
    opacity: 0.2;
    width: 100%;
    height: 600px;
    bottom: unset;
    top: 0;
    right: unset;
    left: 0;
  }
  .Top__topics {
    width: auto;
    display: block;
    margin-top: 150px;
  }
  .Top__topics .topics_inner {
    position: relative;
    top: unset;
    padding-left: 10px;
  }
  .Top__topics .topics_inner h2 {
    margin-bottom: 15px;
  }
  .Top__topics .topics_inner a {
    position: absolute;
    top: 15px;
    right: 10px;
  }
  .Top__topics ul {
    width: auto;
  }
  .Top__topics li a {
    display: block;
    padding-left: 10px;
    padding-right: 10px;
  }
  .Top__topics li a span {
    margin: 0;
  }
  .Top__topics li a span:first-child {
    margin: 0 0 5px;
  }
  .Top__ex {
    margin: 100px 0;
  }
  .Top__ex p {
    line-height: 1.4;
    font-size: 15px;
    padding: 0 10px;
  }
  .footer {
    width: auto;
  }
  .footer__body__extra {
    display: block;
  }
  .footer__body__extra p {
    margin: 0 0 10px;
  }
  .footer__body__extra p br {
    display: none;
  }
  .footer__body__pagetop {
    right: 15px;
  }
  .footer__body__pagetop .pagetop__label {
    padding-right: 15px;
    font-size: 12px;
  }
  .pg2nd_topics ul.pg2nd_topics__items {
    width: auto;
  }
  .cfn {
    width: auto;
  }
  .cfn_area_fixed a {
    line-height: 2;
  }
  .cfn_area_list div:nth-child(3n) {
    margin: 0 15px 15px 0;
  }
  .faq_list {
    width: auto;
  }
  .cts {
    width: auto;
    display: block;
  }
  .cts__L {
    width: 100%;
    margin-bottom: 30px;
  }
  .cts__R {
    width: 100%;
  }
  .cts_table dl {
    width: auto !important;
    flex-grow: 1;
  }
  .usage,
.contact,
.cfn,
.faq,
.topics {
    text-align: center;
  }
  .usage h1,
.contact h1,
.cfn h1,
.faq h1,
.topics h1 {
    font-size: 1.25rem;
    margin: 50px 0;
  }
  .cts {
    margin-bottom: 50px;
  }
  .cts__R p {
    font-size: 0.8125rem;
    padding-right: 5px;
    padding-left: 5px;
  }
  .cts__R .w500 {
    font-size: 1rem;
  }
  .cts_table {
    font-size: 0.75rem;
  }
  .cts_table br {
    display: block;
  }
  .cts_table dl:nth-of-type(1) dd {
    text-align: center;
  }
  .cts_table dl dd {
    height: 65px;
    font-size: 0.75rem;
    padding-left: 0;
  }
  .pg2nd_topics li a {
    display: block;
  }
  .pg2nd_topics li a span {
    margin: 0;
  }
  .pg2nd_topics li a span:first-child {
    margin-bottom: 5px;
  }
  .howto {
    width: auto;
  }
  .howto__item_l {
    width: 17%;
    margin-right: 15px;
    padding-right: 2.5px;
    padding-left: 2.5px;
  }
  .howto__item_l img {
    max-width: 100%;
  }
  .howto__item_r {
    width: 83%;
    padding-right: 5px;
    padding-left: 5px;
  }
  .faq h1 + p {
    line-height: 1.6;
    padding: 0 15px;
  }
  .faq_list dt {
    padding-right: 3px;
  }
  .faq_list dt,
.faq_list dd {
    padding-left: 50px;
  }
  .faq_list dt:before,
.faq_list dd:before {
    left: 15px;
  }
  .cfn h1 + p {
    line-height: 1.6;
    padding: 0 10px;
  }
  .cfn_area_fixed a {
    margin: 0 7px;
  }
  .contact p {
    line-height: 1.6;
    padding: 0 10px;
  }
  .formarea {
    width: auto;
  }
  .formarea_item {
    display: block;
  }
  .formarea .require {
    transform: unset;
  }
  .formarea p {
    width: auto;
  }
  .formarea p + div {
    width: auto;
    text-align: left;
  }
  .formarea input[type=text],
.formarea textarea {
    margin-top: 5px;
    width: 98%;
  }
  .formarea .confirm label {
    line-height: 1.5;
  }
}
@media screen and (max-width: 1035px) {
  .toggle_menu {
    display: block;
  }
  .BtnToggleMenu {
    display: block;
    top: 15px;
    right: 10px;
    width: 30px;
    height: 30px;
  }
  .BtnToggleMenu span {
    top: 14px;
  }
  .BtnToggleMenu:before {
    top: 5px;
  }
  .BtnToggleMenu:after {
    top: 23px;
  }
  body.open-menu-panel .BtnToggleMenu:before {
    top: 15px;
  }
  body.open-menu-panel .BtnToggleMenu:after {
    top: 15px;
  }
  body.open-menu-panel .BtnToggleMenu span {
    display: none;
  }
  body.open-menu-panel .BtnToggleMenu:before {
    background-color: #fff !important;
    top: 15px;
    transform: rotate(-45deg);
  }
  body.open-menu-panel .BtnToggleMenu:after {
    background-color: #fff !important;
    top: 15px;
    transform: rotate(45deg);
  }
  .gNavi {
    display: block;
    z-index: 3000;
    overflow: hidden;
  }
  .gNavi__logo {
    transform: translate(20px, 20px);
  }
  .gNavi__logo img {
    width: 177px;
  }
  .gNavi__menu {
    display: none;
    transform: translateX(0);
    height: auto;
    padding: 50px 0 0;
  }
  .gNavi__menu li {
    opacity: 0;
  }
  .gNavi__menu li:after {
    display: none;
  }
  .gNavi__menu li:before {
    display: none;
  }
  .gNavi__menu li a {
    color: #fff;
    display: block;
    padding: 15px 0;
  }
  .gNavi .entry {
    display: none;
    position: relative;
    width: 100%;
    margin: 20px 0 0;
  }
  body.open-menu-panel .gNavi {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  body.open-menu-panel .gNavi__menu {
    display: block;
  }
  body.open-menu-panel .gNavi .entry {
    display: block;
  }
  body.open-menu-panel .gNavi.active {
    height: 100%;
  }
  body.open-menu-panel .gNavi.active li {
    opacity: 1;
    transition: opacity 1s 0s ease;
  }
}