@font-face {
  font-family: YuGothicM;
  src: local("Yu Gothic Medium");
}

:root {
  /*
     * z-index
     */
  --z-lv-1: 1;
  --z-lv-2: 10;
  --z-lv-3: 100;
  --z-lv-4: 1000;
  --z-lv-5: 10000;
  --z-lv-6: 100000;
  --z-lv-7: 1000000;
  --z-lv-8: 10000000;
  --z-lv-9: 100000000;
  --z-lv-10: 1000000000;
  --z-behindLv-1: -1;
  --z-behindLv-2: -10;
  --z-behindLv-3: -100;
  --z-behindLv-4: -1000;
  --z-behindLv-5: -10000;
  --z-behindLv-6: -100000;
  --z-behindLv-7: -1000000;
  --z-behindLv-8: -10000000;
  --z-behindLv-9: -100000000;
  --z-behindLv-10: -1000000000;
  
  /*
     * font
     * http://mw-s.jp/2017css-font-win-mac/
     * http://silight.hatenablog.jp/entry/2015/07/02/214601
     */
  --fontFamily-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  --fontFamily-mincho: Georgia, 游明朝体, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", メイリオ, Meiryo, serif;
  --fontFamily-mono: monospace, serif;
  --fontWeight-thin: 100;
  --fontWeight-extraLight: 200;
  --fontWeight-light: 300;
  --fontWeight-normal: 400;
  --fontWeight-medium: 500;
  --fontWeight-semiBold: 600;
  --fontWeight-bold: 700;
  --fontWeight-extraBold: 800;
  --fontWeight-black: 900;
  
  /*
     * easing
     */
  --easeIn-sine: cubic-bezier(0.47, 0, 0.745, 0.715);         /* http://easings.net/ja#easeInSine */
  --easeOut-sine: cubic-bezier(0.39, 0.575, 0.565, 1);        /* http://easings.net/ja#easeOutSine */
  --easeInOut-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);    /* http://easings.net/ja#easeInOutSine */
  --easeIn-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);       /* http://easings.net/ja#easeInQuad */
  --easeOut-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);       /* http://easings.net/ja#easeOutQuad */
  --easeInOut-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);  /* http://easings.net/ja#easeInOutQuad */
  --easeIn-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);     /* http://easings.net/ja#easeInCubic */
  --easeOut-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);       /* http://easings.net/ja#easeOutCubic */
  --easeInOut-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);    /* http://easings.net/ja#easeInOutCubic */
  --easeIn-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);     /* http://easings.net/ja#easeInQuart */
  --easeOut-quart: cubic-bezier(0.165, 0.84, 0.44, 1);        /* http://easings.net/ja#easeOutQuart */
  --easeInOut-quart: cubic-bezier(0.77, 0, 0.175, 1);         /* http://easings.net/ja#easeInOutQuart */
  --easeIn-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);     /* http://easings.net/ja#easeInQuint */
  --easeOut-quint: cubic-bezier(0.23, 1, 0.32, 1);            /* http://easings.net/ja#easeOutQuint */
  --easeInOut-quint: cubic-bezier(0.86, 0, 0.07, 1);          /* http://easings.net/ja#easeInOutQuint */
  --easeIn-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);      /* http://easings.net/ja#easeInExpo */
  --easeOut-expo: cubic-bezier(0.19, 1, 0.22, 1);             /* http://easings.net/ja#easeOutExpo */
  --easeInOut-expo: cubic-bezier(1, 0, 0, 1);                 /* http://easings.net/ja#easeInOutExpo */
  --easeIn-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);        /* http://easings.net/ja#easeInCirc */
  --easeOut-circ: cubic-bezier(0.075, 0.82, 0.165, 1);        /* http://easings.net/ja#easeOutCirc */
  --easeInOut-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);   /* http://easings.net/ja#easeInOutCirc */
  --easeIn-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);      /* http://easings.net/ja#easeInBack */
  --easeOut-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);    /* http://easings.net/ja#easeOutBack */
  --easeInOut-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);   /* http://easings.net/ja#easeInOutBack */
  
  /*
     * famous layouts
     */
  --size-ipad-long: 1024px;
  --size-ipad-short: 768px;
  --size-ipadPro10inch-long: 1112px;
  --size-ipadPro10inch-short: 834px;
}

/* major breakpoints */

/* stylelint-disable */

/* import reset library */

/*! sanitize.css v7.0.3 | CC0 License | github.com/csstools/sanitize.css */

/* Document
 * ========================================================================== */

/**
 * 1. Remove repeating backgrounds in all browsers (opinionated).
 * 2. Add border box sizing in all browsers (opinionated).
 */

*,
::before,
::after {
  background-repeat: no-repeat; /* 1 */
  box-sizing: border-box; /* 2 */
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */

::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Use the default user interface font in all browsers (opinionated).
 * 3. Correct the line height in all browsers.
 * 4. Use a 4-space tab width in all browsers (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */

html {
  cursor: default; /* 1 */
  font-family:
    system-ui,
    /* macOS 10.11-10.12 */ -apple-system,
    /* Windows 6+ */ Segoe UI,
    /* Android 4+ */ Roboto,
    /* Ubuntu 10.10+ */ Ubuntu,
    /* Gnome 3+ */ Cantarell,
    /* KDE Plasma 4+ */ Oxygen,
    /* fallback */ sans-serif,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji"; /* 2 */
  
  line-height: 1.15; /* 3 */
  -moz-tab-size: 4; /* 4 */
  tab-size: 4; /* 4 */
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}

/* Sections
 * ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * 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 sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * Add the correct display in IE.
 */

main {
  display: block;
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */

nav ol,
nav ul {
  list-style: none;
}

/**
 * 1. Use the default monospace user interface font
 *    in all browsers (opinionated).
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family:
    /* macOS 10.10+ */ Menlo,
    /* Windows 6+ */ Consolas,
    /* Android 4+ */ Roboto Mono,
    /* Ubuntu 10.10+ */ Ubuntu Monospace,
    /* KDE Plasma 4+ */ Oxygen Mono,
    /* Linux/OpenOffice fallback */ Liberation Mono,
    /* fallback */ monospace; /* 1 */
  
  font-size: 1em; /* 2 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Add the correct text decoration in Edge, IE, Opera, and Safari.
 */

abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Use the default monospace user interface font
 *    in all browsers (opinionated).
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family:
    /* macOS 10.10+ */ Menlo,
    /* Windows 6+ */ Consolas,
    /* Android 4+ */ Roboto Mono,
    /* Ubuntu 10.10+ */ Ubuntu Monospace,
    /* KDE Plasma 4+ */ Oxygen Mono,
    /* Linux/OpenOffice fallback */ Liberation Mono,
    /* fallback */ monospace; /* 1 */
  
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/*
 * Remove the text shadow on text selections in Firefox 61- (opinionated).
 * 1. Restore the coloring undone by defining the text shadow
 *    in all browsers (opinionated).
 */

::selection {
  background-color: #b3d4fc; /* 1 */
  color: #000; /* 1 */
  text-shadow: none;
}

/* Embedded content
 * ========================================================================== */

/*
 * Change the alignment on media elements in all browers (opinionated).
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

video {
 width: 100%;
 max-width: 800px;
}

.Video{
  text-align: center;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */

svg {
  fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Tabular data
 * ========================================================================== */

/**
 * Collapse border spacing in all browsers (opinionated).
 */

table {
  border-collapse: collapse;
}

/* Forms
 * ========================================================================== */

/**
 * Inherit styling in all browsers (opinionated).
 */

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

/**
 * Remove the margin in Safari.
 */

button,
input,
select {
  margin: 0;
}

/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge, Firefox, and IE.
 */

button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Show the overflow in Edge and IE.
 */

input {
  overflow: visible;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */

legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in Edge and IE.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

select {
  text-transform: none;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction on textareas in all browsers (opinionated).
 */

textarea {
  margin: 0; /* 1 */
  overflow: auto; /* 2 */
  resize: vertical; /* 3 */
}

/**
 * Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  padding: 0;
}

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

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

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

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct display in Edge and IE.
 */

details {
  display: block;
}

/*
 * Add the correct styles in Edge, IE, and Safari.
 */

dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -webkit-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
 * ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* User interaction
 * ========================================================================== */

/*
 * 1. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 * 2. Remove the tapping delay in IE 10.
 */

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] { /* 1 */
  touch-action: manipulation; /* 2 */
}

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

/* Accessibility
 * ========================================================================== */

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

[aria-busy="true"] {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */

[aria-controls] {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

[aria-disabled],
[disabled] {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  display: inherit;
  position: absolute;
}

/* reset margin & padding */

body, div, dl, dt, dd, ul, ol, li, hr, h1, h2, h3, h4, h5, h6, address,
pre, code, form, fieldset, legend, input, button, textarea, p, blockquote,
table, th, td, iframe, form, fieldset, input, button, select, optgroup, option,
textarea, label, legend, span, em, strong, dfn, code, samp, kbd, var, cite, abbr,
acronym, q, br, ins, del, a, img, object, figure, figcaption {
  margin: 0;
  padding: 0;
}

/* set base font size = 1.4rem = 14px */

html {
  /* on html element's font size = 62.5%, 1rem A?A￠A￠a?￢A°A￠a?￢a?￠ 10px */
  font-size: 62.5%;
}

body {
  font-size: 1.4rem;
}

/* remove border & font size */

div, blockquote, p, pre, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, address,
table, caption, th, td, span, em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym, q, br,
ins, del, a, img, object, iframe, figure, figcaption {
  border: 0;
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
}

/* remove table border's habit  */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* remove list style */

ul, li {
  list-style: none;
}

/* set parent color */

a {
  color: currentColor;
}

img {
  vertical-align: bottom;
}

/* stylelint-disable custom-property-empty-line-before */

:root {
  --max-width: 1280px;
  
  --color-grey: #969696;
  --color-light-grey: #f3f3f3;
  --color-blue: #614466;
  --color-red: #c26f19;
  --color-border: #e4e4e4;
  --color-border-dark: #bfbfbf;
}

/* stylelint-disable function-whitespace-after */

html {
  font-feature-settings: "palt";
}
/* header
 * ========================================================================== */
.Header {
  position: relative;
  z-index: 10000000 !important;
  z-index: var(--z-lv-8) !important;
  width: 100%;
  background: #fff;
  padding: 0 !important;
}

.BodyWrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  z-index: var(--z-lv-7);
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  transition: background 400ms;
}

.BodyWrapper.-visually-hidden {
  background: transparent;
}

.BodyWrapper[hidden] {
  display: none;
}

.Header__inner {
  position: relative;
  width: 100%;
}

@media (min-width: 1025px) {
  
  .Header__inner {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto auto;
  -ms-grid-columns: 136px 1fr 180px;
  grid-template:
    "Header__logo Header__for-customers Header__company" auto
    "Header__nav  Header__nav Header__nav" auto /
    184px 1fr 241px;
  padding: 16px 32px 12px;
  gap:29px 0;
  margin: auto;
  border-bottom: solid 2px #ececec;
}
}

@media (max-width: 1024px) {
  .Header__inner.-hidden-header-sp {
  display: none;
}
}

@media (min-width: 1025px) {
  .Header__inner.-hidden-header-pc {
  display: none;
}
}

@media (max-width: 1024px) {
  
  .Header__logo {
  width: 30vw;
  max-width: 140px;
  padding: 2vw 0;
  margin: auto
}
}

@media (min-width: 1025px) {
  
  .Header__logo {
  display: flex;
  grid-area: Header__logo;
  align-items: center;
  justify-content: center
}
}

@media (min-width: 1025px) {
  .Header__company .Header__logo-link{display: inline;}
  
  .Header__logo-link {
  display: block;
  width: 100%
}
}

.Header__logo-image {
  width: 100%!important;
  height:auto !important;
}

.Header__button {
  position: absolute;
  top: 50%;
  right: 15px;
  display: block;
  width: 20px;
  height: 20px;
  background: transparent;
  border: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.Header__button-inner {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.Header__button-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #898989;
  transition: all 400ms;
  transform-origin: center;
}

.Header__button-line:first-child {
  transform: translate3d(0, -150%, 0) translate3d(0, -3px, 0);
}

.Header__button-line:nth-child(2) {
  transform: translate3d(0, -50%, 0);
}

.Header__button-line:last-child {
  transform: translate3d(0, 50%, 0) translate3d(0, 3px, 0);
}

.Header__button[value="close"] .Header__button-line:first-child {
  transform: translate3d(0, -50%, 0) rotate(45deg);
}

.Header__button[value="close"] .Header__button-line:nth-child(2) {
  opacity: 0;
}

.Header__button[value="close"] .Header__button-line:last-child {
  transform: translate3d(0, -50%, 0) rotate(-45deg);
}

@media (min-width: 1025px) {
  
  .Header__company {
  grid-area: Header__company;
  text-align: right
}
}

.Header__company-image {
  width: 209px;
  padding: 9px 0 0 0;
}

.Header__toggle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 4vw;
  background: #fff;
  transform: translateY(100%);
}

.Header__toggle::before,
.Header__toggle::after {
  position: absolute;
  left: 0;
  display: block;
  width: 3px;
  content: "";
}

.Header__toggle::before {
  top: 0;
  height: 40%;
  background: #c26f19;
}

.Header__toggle::after {
  top: 40%;
  height: 60%;
  background: #614466;
}

@media (max-width: 1024px) {
  
  .Header__nav {
  width: 100%
}
}

@media (min-width: 1025px) {
  
  .Header__nav {
  grid-area: Header__nav
}
}

.Header__nav-list {
  font-size: 4.018vw;
}

@media (min-width: 1025px) {
  
  .Header__nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.1em;
}
}

/*@media (min-width: 1025px) and (max-width: 1279px) {
  
  .Header__nav-list {
  font-size: 1.095vw
}
}*/

@media (max-width: 1024px) {
  
  .Header__nav-list {
  font-size: 1.6rem;
}
}

.Header__nav-cell {
  display: block;
  border: none !important;
}

@media (max-width: 1024px) {
  
  .Header__nav-cell {
  border-top: solid 1px rgba(152,152,152,0.12549)
}
}

@media (min-width: 1025px) {
  
  .Header__nav-cell:not(:first-child) {
    margin-left: 1.5em
}
}

@media (max-width: 1024px) {
  
  .Header__nav-cell:last-child {
    border-bottom: solid 1px rgba(152,152,152,0.12549)
}
}

.Header__nav-link {
  position: relative;
  color: #262626;
}

@media (max-width: 1024px) {
  
  .Header__nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8em 0;
  letter-spacing: 0.1em
}
}

.Header__nav-link,
.Header__nav-link:hover,
.Header__nav-link:active {
  text-decoration: none;
}

@media (min-width: 1025px) {
  
  .Header__nav-link::before,
    .Header__nav-link::after {
    position: absolute;
  bottom: -0.4em;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  content: "";
  transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 600ms var(--easeOut-expo);
  transform: scale3d(0, 1, 1)
}
}

.Header__nav-link::before {
  background: rgba(38,38,38,0.18824);
}

@media (min-width: 1025px) {
  
  .Header__nav-link::after {
    background: rgba(38,38,38,0.49804);
  transform-origin: center
}
}

@media (min-width: 1025px) {
  
  .Header__nav-link.-current::before {
    transform: none
}
}

@media (min-width: 1025px) {
  
  .Header__nav-link:hover::after {
    transform: none
}
}

.Header__nav-link svg {
  width: 0.5em;
  height: 0.5em;
}

.Header__for-customers {
  display: flex;
  grid-area: Header__for-customers;
  align-items: center;
  justify-content: flex-end;
}

@media (min-width: 1025px) {
  /* ロゴ：1行目 / 1列目 */
  .Header__logo {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1; /* 縦の結合を解除 */
    -ms-grid-column: 1;
  }

  /* 顧客用リンク：1行目 / 2列目 */
  .Header__for-customers {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }

  /* 会社名：1行目 / 3列目 */
  .Header__company {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1; /* 横の結合を解除 */
  }

  /* ナビゲーション：2行目 / 1〜3列目すべて */
  .Header__nav {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3; /* 下段すべてを占有 */
  }
}

.Header__for-customers-link {
  padding: .8em .55em;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  background: #614466;
  border: solid 1px currentColor;
  transition: all 300ms;
}

/*@media (min-width: 1025px) and (max-width: 1279px) {
  
  .Header__for-customers-link {
  font-size: 0.939vw
}
}*/

.Header__for-customers-link,
.Header__for-customers-link:hover,
.Header__for-customers-link:active {
  text-decoration: none;
}

@media (min-width: 768px) {
  .Header__for-customers-link:hover {
    color: #614466;
  background: #fff;
  border-color: #614466;
}
}

:root {
  --max-width: 1280px;
}

/* footer
 * ========================================================================== */
.Bottom {
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #575757;
}

.Bottom::before,
.Bottom::after {
  position: absolute;
  left: 0;
  display: block;
  width: 3px;
  content: "";
}

.Bottom::before {
  top: 0;
  height: 30%;
  background: #c26f19;
}

@media (min-width: 768px) {
  
  .Bottom::before {
    height: 40%
}
}

.Bottom::after {
  top: 30%;
  height: 70%;
  background: #614466;
}

@media (min-width: 768px) {
  
  .Bottom::after {
    top: 40%;
  height: 60%
}
}

.Bottom__inner {
  position: relative;
  width: 100%;
  padding: 0 4vw;
  border-top: solid 1px rgba(152,152,152,0.12549);
}

@media (min-width: 768px) {
  
  .Bottom__inner {
  max-width: 1280px;
  max-width: var(--max-width);
  padding: 50px 40px 35px;
  margin: auto
}
}

.Bottom__go-to-top {
  position: absolute;
  top: 50px;
  right: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5em;
  height: 3.5em;
  font-size: 1.2rem;
  background: #f5f5f5;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.Bottom__go-to-top svg {
  width: 1em;
  height: 1em;
  transform: rotate(-90deg);
  transform-origin: center;
}

.Bottom__header {
  width: 27vw;
  margin: 6.67vw 0;
}

@media (min-width: 768px) {
  
  .Bottom__header {
  width: 143px;
  margin: 0
}
}

.Bottom__header-image {
  width: 100%;
}

.Bottom__contents {
  width: 100%;
}

@media (min-width: 768px) {
  
  .Bottom__contents {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px
}
}

.Bottom__contents-cell {
  width: 100%;
  font-size: 3.75vw;
}

@media (max-width: 767px) {
  
  .Bottom__contents-cell {
  border-top: solid 1px rgba(152,152,152,0.12549)
}
}

@media (min-width: 768px) {
  
  .Bottom__contents-cell {
  width: auto;
  font-size: 1.7rem
}
}

@media (min-width: 768px) {
  
  .Bottom__contents-cell:not(:last-child) {
    margin-right: 4em
}
}

@media (max-width: 767px) {
  
  .Bottom__contents-cell:last-child {
    border-bottom: solid 1px rgba(152,152,152,0.12549)
}
}

.Bottom__section {
  width: 100%;
}

@media (min-width: 768px) {
  
  .Bottom__section {
  margin-top: 1em
}
}

@media (max-width: 767px) {
  
  .Bottom__section:not(:first-of-type) {
    border-top: solid 1px rgba(152,152,152,0.12549)
}
}

.Bottom__section-link {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 0.8em 0 0.8em 1.5em;
  letter-spacing: 0.05em;
  font-size: 4.7vw;
}

@media (min-width: 768px) {
  
  .Bottom__section-link {
  padding: 0;
  margin: 1.2em 0 1em;
  font-size: 1.75rem;
}
}

.Bottom__section-link,
.Bottom__section-link:hover,
.Bottom__section-link:active {
  text-decoration: none;
}

.Bottom__section-link:hover {
  color: #614466;
  text-decoration: underline;
}

.Bottom__section-link::before,
.Bottom__section-link::after {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 0.45em;
  height: 2px;
  content: "";
}

@media (min-width: 768px) {
  
  .Bottom__section-link::before,
    .Bottom__section-link::after {
    top: -1.2em;
  width: 0.6em
}
}

.Bottom__section-link::before {
  background: #e87722;
}

.Bottom__section-link::after {
  background: #671e75;
  transform: translateX(90%);
}

.Bottom__detail-list {
  width: 100%;
  padding-bottom: 0.5em;
}

.Bottom__detail-cell {
  display: inline-block;
  padding: 0.5em 0;
  font-size: 4.3vw;
}

@media (min-width: 768px) {
  
  .Bottom__detail-cell {
  display: block;
  padding: 0.3em 0;
  font-size: 1.6rem;
  text-align: left;
}
}

@media (max-width: 767px) {
  
  .-services .Bottom__detail-cell {
  margin-right: 1.8em;
  width: 40%;
}
}

@media (max-width: 767px) {
  
  .-for-buyers .Bottom__detail-cell {
  width: 48%;
}
}

@media (max-width: 767px) {
  
  .-episodes .Bottom__detail-cell {
  margin-right: 1.3em;
}
}

@media (max-width: 767px) {
  
  .-for-customers .Bottom__detail-cell {
  margin-right: 1.8em
}
}

.Bottom__detail-link {
  position: relative;
  display: inline-block;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: color .3s;
}

@media (min-width: 768px) {
  
  .Bottom__detail-link {
  padding-left: 1em;
  line-height: 1.6;
  letter-spacing: 0.1em
}
}

.Bottom__detail-link,
.Bottom__detail-link:hover,
.Bottom__detail-link:active {
  text-decoration: none;
}

.Bottom__detail-link:hover {
  color: #614466;
  text-decoration: underline;
}

.Bottom__detail-link > svg {
  display: static;
  width: 0.4em;
  margin-right: 0.4em;
}

@media (min-width: 768px) {
  
  .Bottom__detail-link > svg {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%)
}
}

.Bottom__info-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 1.5em 0;
  font-size: 4vw;
  line-height: 1;
}

@media (min-width: 768px) {
  
  .Bottom__info-list {
  font-size: 1.6rem;
}
}

.Bottom__info-cell {
  padding: 0 1.5em;
  margin: 1em 0;
  border-left: solid 1px currentColor;
}

@media (min-width: 768px) {
  
  .Bottom__info-cell {
  margin: 0
}
}

@media (max-width: 767px) {
  
  .Bottom__info-cell:nth-child(2n) {
    border-right: solid 1px currentColor
}
}

@media (min-width: 768px) {
  
  .Bottom__info-cell:last-child {
    border-right: solid 1px currentColor
}
}

.Bottom__info-link {
  transition: color .3s;
}

.Bottom__info-link,
.Bottom__info-link:hover,
.Bottom__info-link:active {
  text-decoration: none;
}

.Bottom__info-link:hover {
  color: #614466;
  text-decoration: underline;
}

.Footer {
  width: 100%;
  border-top: solid 1px rgba(152,152,152,0.12549);
}

.Footer__inner {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto auto;
  -ms-grid-columns: 30.4vw 1fr;
  grid-template:
    "Footer__header Footer__link-list" auto
    "Footer__copyright Footer__copyright" auto /
    30.4vw 1fr;
  width: 100%;
  padding: 7vw 4vw;
}

@media (min-width: 768px) {
  
  .Footer__inner {
  -ms-grid-rows: auto;
  -ms-grid-columns: 195px 1fr 1fr;
  grid-template:
    "Footer__header Footer__link-list Footer__copyright" auto /
    195px 1fr 1fr;
  max-width: 1280px;
  max-width: var(--max-width);
  padding: 20px 40px;
  margin: auto
}
}

.Footer__header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  display: block;
  grid-area: Footer__header;
}

.Footer__header-image {
  width: 100%;
}

.Footer__link-list {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  display: flex;
  grid-area: Footer__link-list;
  align-items: center;
  justify-content: flex-end;
  font-size: 3.5vw;
  line-height: 1;
  text-align: right;
}

@media (min-width: 768px) {
  
  .Footer__link-list {
  justify-content: flex-start;
  /*padding-left: 3em;*/
  padding-left: 4%;
  font-size: 1.6rem;
}
}

.Footer__link-cell {
  display: inline-block;
  margin-left: 1.5em;
}

.Footer__link {
  transition: color .3s;
}

.Footer__link,
.Footer__link:hover,
.Footer__link:active {
  text-decoration: none;
}

.Footer__link:hover {
  color: #614466;
  text-decoration: underline;
}

.Footer__copyright {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: Footer__copyright;
  font-size: 2.411vw;
  color: #bbb;
}

@media (min-width: 768px) {
  
  .Footer__header {
  -ms-grid-row: 1;
  -ms-grid-column: 1
}

.Footer__link-list {
  -ms-grid-row: 1;
  -ms-grid-column: 2
}

.Footer__copyright {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1
}
}

@media (max-width: 767px) {
  
  .Footer__copyright {
  padding-top: 2em;
  text-align: center
}
}

@media (min-width: 768px) {
  
  .Footer__copyright {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 1.3rem;
}
}

.clearfix:after{
  clear:both;
  content:".";
  display:block;
  height:0;
  visibility:hidden;
}
.clearfix {
  display:block;
  *zoom: 1;
}


/* stylelint-disable-next-line */

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

pre {
  font-family: monospace, serif;
  font-family: var(--fontFamily-mono);
  font-weight: 400;
  font-weight: var(--fontWeight-normal);
}

@media (min-width: 768px) {
  
  .-hidden-pc {
  display: none !important
}
}

@media (max-width: 767px) {
  
  .-hidden-sp {
  display: none !important
}
}

.-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

:root {
  --max-width: 1280px;
}

body {
  width: 100%;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  font-family: var(--fontFamily-base);
}

.Main {
  width: 100%;
  overflow: hidden;
}

.KeyVisual {
  position: relative;
  width: 100%;
  background: #535353;
}

.KeyVisual::before {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 53.33333%;
  content: "";
}

@media (min-width: 768px) {
  
  .KeyVisual::before {
    padding-top: 0;
}
.KeyVisual::after{
  clear:both;
  content:".";
  display:block;
  height:0;
  visibility:hidden;
}

}

.KeyVisual__line {
  position: absolute;
  left: 0;
  display: block;
  width: 3px;
  content: "";
}

@media (min-width: 768px) {
  
  .KeyVisual__line {
  width: 1vw
}
}

.KeyVisual__line.-red {
  top: 0;
  height: 35%;
  background: #e87722;
  z-index: 1;
}

@media (min-width: 768px) {
  
  .KeyVisual__line.-red {
  height: 40%
}
}

.KeyVisual__line.-blue {
  top: 35%;
  height: 65%;
  background: #671e75;
}

@media (min-width: 768px) {
  
  .KeyVisual__line.-blue {
  top: 40%;
  height: 60%
}
}

.KeyVisual__image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
}

@media (min-width: 768px) {
  
  .KeyVisual__image {
  right: 0;
  left: auto;
  width: 50.5%;
  max-width: 960px;
  position: static;
  float: right;
}
}

.KeyVisual__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 1280px;
  max-width: var(--max-width);
  height: 100%;
  padding: 0 6vw;
  color: #fff;
  transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
  
  .KeyVisual__inner {
  padding: 0 40px;
  margin: auto;
}
}

.KeyVisual__header {
  font-size: 7vw;
  line-height: 1;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  
  .KeyVisual__header {
  width: calc(52.5% - 40px);
  font-size: 4.2rem;
  font-size: 2.7vw;
  margin-bottom: 4%;
  line-height: 1.2;
}
}

.KeyVisual__eyebrow {
  font-size: 3.2vw;
  display: block;
  margin-bottom: 1.25em;
  line-height: 1;
}

@media (min-width: 768px) {
  
  .KeyVisual__eyebrow {
  font-size: 2rem;
}
}

.KeyVisual__supplementIcon {
  font-size: 3.2vw;
  
  align-self: flex-start;
  padding: 0.25em 0.6em;
  margin-top: 1.25em;
  border: 1px solid #fff;
}

@media (min-width: 768px) {
  
  .KeyVisual__supplementIcon {
  font-size: 2rem
}
}

@media (min-width: 768px) {
  
  .KeyVisual__supplementIcon {
  padding: 0.4em 0.7em;
  margin-top: -0.75em
}
}

.KeyVisual__statement {
  font-size: 2.946vw;
  line-height: 2.2;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  
  .KeyVisual__statement {
  /*font-size: 1.6rem;*/
  font-size: 1.4vw
}
}
@media (min-width: 1200px) {
  .KeyVisual__statement {
  font-size: 17px;
}
}
.Statement {
  width: 100%;
  font-size: 3.75vw;
  line-height: 2.2;
  color: #fff;
  letter-spacing: 0.1em;
  background: #535353;
}

.Statement__inner {
  width: 100%;
  padding: 10vw;
}

.Breadcrumb {
  width: 100%;
}
.Breadcrumb.blu {
  background: #e6ebef;
}
.Breadcrumb.gre {
  background: #f3f3f3;
  background: var(--color-light-grey);
}
.Breadcrumb__list {
  display: flex;
  padding: 1.8em 4vw;
  font-size: 3.5vw;
  line-height: 1;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  
  .Breadcrumb__list {
  padding: 1.8em 40px;
  font-size: 1.6rem
}
}

.Breadcrumb__cell {
  position: relative;
  display: inline-block;
  color: #a1a1a1;
}

.Breadcrumb__cell:not(:first-child) {
  margin-left: 2em;
}

.Breadcrumb__cell:not(:first-child)::before {
  position: absolute;
  top: 50%;
  left: -1em;
  content: "/";
  transform: translate(-50%, -50%);
}

.Breadcrumb__link {
  display: block;
  color: #000;
  text-decoration: none;
}

/* section common */

.Section {
  width: 100%;
  padding-top: 10vw;
}

@media (min-width: 768px) {
  
  .Section {
  padding-top: 80px
}
}

.Section.-bg-gray {
  background: #f3f3f3;
}

.Section__header {
  position: relative;
  width: 100%;
  padding: 0.8em 0;
  font-size: 5.893vw;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  
  .Section__header {
  font-size: 2.8rem
}
}

.Section__header::before,
.Section__header::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 0.45em;
  height: 2px;
  content: "";
}

@media (min-width: 768px) {
  
  .Section__header::before,
    .Section__header::after {
    width: 0.35em;
  height: 3px
}
}

.Section__header::before {
  background: #e87722;
  transform: translateX(-90%);
}

.Section__header::after {
  background: #671e75;
}

.Section__header-jp,
.Section__header-en {
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 3.214vw;
  line-height: 1;
  color: #614466;
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  
  .Section__header-jp,
  .Section__header-en {
  font-size: 1.4rem
}
}

.Section__header-en {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-weight: var(--fontWeight-medium);
  color: #614466;
  letter-spacing: 0.2em;
}

.Section__inner {
  padding: 6vw 4vw 10vw;
}

@media (min-width: 768px) {
  
  .Section__inner {
  max-width: 1280px;
  max-width: var(--max-width);
  padding: 40px 40px 100px;
  margin: auto
}
}

.Section__desc {
  width: 100%;
  font-size: 4.3vw;
  line-height: 2;
  color: #000;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  
  .Section__desc {
  font-size: 1.6rem;
  text-align: center
}
}

.Section__desc em {
  color: #c26f19;
  color: var(--color-red);
}

.SectionDetail__title {
  display: flex;
  align-items: center;
  margin: 2.5em 0 0;
  font-size: 4.286vw;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  
  .SectionDetail__title {
  font-size: 2.2rem
}
}

.SectionDetail__title::before {
  position: relative;
  display: block;
  width: 1.2em;
  height: 1px;
  margin-right: 0.8em;
  content: "";
  background: #4c4a4b;
}

.SectionDetail__subTitle {
  font-size: 3.214vw;
}

@media (min-width: 768px) {
  
  .SectionDetail__subTitle {
  font-size: 1.4rem
}
}

.SectionDetail__colorbarTitle {
  position: relative;
  font-size: 4.3vw;
  margin-top: 2rem;
  padding-left: 1.0rem;
  line-height: 1;
}

@media (min-width: 768px) {
  
  .SectionDetail__colorbarTitle {
  padding-left: 2.0rem;
  margin-top: 4.0rem;
  font-size: 1.8rem
}
}

.SectionDetail__colorbarTitle::before,
.SectionDetail__colorbarTitle::after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  height: 4px;
  background: #c26f19;
  transform: translateY(0.2rem);
}

@media (min-width: 768px) {
  
  .SectionDetail__colorbarTitle::before,
    .SectionDetail__colorbarTitle::after {
    width: 5px;
  height: 5px;
  transform: translateY(0.4rem)
}
}

.SectionDetail__colorbarTitle::before {
  top: 0;
  background: #c26f19;
}

.SectionDetail__colorbarTitle::after {
  top: 4px;
  background: #614466;
}

@media (min-width: 768px) {
  
  .SectionDetail__colorbarTitle::after {
    top: 5px
}
}

.include_bnr_area{
  text-align: center;
  padding: 30px 0;
}
.include_bnr_area a:hover{
  opacity:0.7;
}
.Breadcrumb.gre + .include_bnr_area{
  background: #f3f3f3;
  background: var(--color-light-grey);
}
.Breadcrumb.blu + .include_bnr_area{
  background: #e6ebef;
}
.include_bnr_area img{
  width:90%;
}
.prevention_txt{
  font-size: 4.3vw;
  line-height: 1.6;
  padding: 0 4vw 5vw;
  text-align: left;
}
@media (min-width: 768px) {
  .include_bnr_area img{
     max-width: 750px;
  }
  .prevention_txt + a img{
     max-width: 900px;
  } 
  .prevention_txt{
    font-size: 1.6rem;
    line-height: 2;
    padding: 0 0 1vw;
    margin: 0 auto;
    text-align: center;
  }
}